/* Socle page blanche · version téléphone (08/10/2026, branche demos-version-mobile). Téléphone seulement (640 px de large au
   plus), communes aux 5 styles. Le générateur pose sur <html>, page par page, la variante retenue (dc_pb.TELEPHONE) :
   mob-a = A « léger » (on resserre), mob-a mob-b = B « plus court » (A, et ce qui fait doublon est replié ou masqué).
   Rien d'obligatoire n'est retiré (mentions, bandeau de démonstration, « Données utilisées », étiquettes « Exemple » et
   « À compléter »). Sur le serveur local, ?mobile=avant|a|b compare les variantes (maquette-mobile.js). Les règles .dcx-
   (surcouche de la démo) sont retirées des sites en ligne (dc_pb.sans_surcouche). */
/* ═══ A « léger » : on resserre, rien n'est masqué ═══════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  /* colonne de gauche des questions fréquentes, collante en style direct (accueil, honoraires, première consultation) :
     sur une seule colonne, elle passait par-dessus les questions au défilement (et tout de suite dans une section repliée) */
  html.mob-a .ds-split > .ds-split-txt[style*="sticky"]{position:static!important}
  /* sections et titres */
  html.mob-a .ds-sec{padding-block:44px}
  html.mob-a .ds-head{gap:10px;margin-bottom:24px}
  html.mob-a .ds-h2{font-size:clamp(1.65rem,1.2rem + 2vw,2rem);line-height:1.08}
  html.mob-a .ds-lead{font-size:1rem;line-height:1.55}
  /* accueil, haut : titre plus court, la fiche pratique (ouvert ou fermé, adresse, rendez-vous) avant la photo */
  html.mob-a .ds-hero-txt{padding-top:28px;padding-bottom:20px}
  html.mob-a .ds-hero .ds-h1{font-size:clamp(2rem,1.5rem + 3vw,2.35rem);line-height:1.04}
  html.mob-a .ds-hero .ds-lead{margin-top:12px}
  html.mob-a .ds-hero .ds-btns{margin-top:18px}
  html.mob-a .ds-chips{gap:6px;margin-top:16px}
  html.mob-a .ds-chips > li{font-size:.8125rem;padding:5px 10px}
  html.mob-a .ds-hero-media{display:flex;flex-direction:column;gap:14px;padding:0 16px 28px}
  html.mob-a .ds-hero-media > .ds-fiche{order:-1;position:relative;inset:auto;margin:0;width:auto}
  html.mob-a .ds-hero-media > img{aspect-ratio:16/9;max-height:210px}
  /* Vous venez pour… : cartes compactes */
  html.mob-a .ds-besoin{grid-template-columns:38px minmax(0,1fr) auto;gap:2px 12px;padding:14px 14px 14px 12px}
  html.mob-a .ds-besoin .ds-ico{width:38px;height:38px}
  html.mob-a .ds-besoins{gap:8px}
  /* le cabinet : photo plus basse, informations pratiques serrées */
  html.mob-a .ds-fig{max-height:220px;overflow:hidden}
  html.mob-a .ds-fig img{aspect-ratio:16/9;max-height:220px;width:100%;object-fit:cover}
  html.mob-a .ds-fact{padding:9px 10px;gap:12px}
  html.mob-a .ds-prat{padding:14px}
  /* étapes (premier rendez-vous, devis…) : numéro dans une pastille à gauche du titre, texte gardé */
  html.mob-a .ds-steps{gap:10px}
  html.mob-a .ds-steps > .ds-step{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:12px;align-items:start;padding:14px 16px 16px;background-image:none}
  html.mob-a .ds-steps > .ds-step::before{grid-row:1 / span 4;position:static;display:grid;place-items:center;width:34px;height:34px;margin:0;
    font-size:15px;line-height:1;letter-spacing:0;box-shadow:none}
  html.mob-a .ds-steps > .ds-step::after{display:none}
  html.mob-a .ds-steps > .ds-step > *{grid-column:2;margin-top:0}
  html.mob-a .ds-step h3{margin:6px 0 4px;font-size:1.05rem}
  /* hauts des pages intérieures : titre plus court, photo plus basse */
  html.mob-a .ds-phero .ds-h1{font-size:clamp(1.9rem,1.4rem + 3vw,2.25rem);line-height:1.05}
  html.mob-a .ds-phero-media img{aspect-ratio:16/9;max-height:200px;width:100%;object-fit:cover}
  html.mob-a .ds-crumb{margin-bottom:10px}
  /* honoraires, conseils */
  html.mob-a .ds-grid{gap:10px}
  html.mob-a .ds-card{padding:18px 16px}
  html.mob-a .ds-card-img{aspect-ratio:21/9}
  /* bas de page */
  html.mob-a .ds-cta{padding:28px 20px}
  html.mob-a .ds-ftr{padding-top:36px}
  /* couche démo : bandeau légal sur deux lignes plus serrées */
  html.mob-a .dcx-lg-t{font-size:12px;line-height:1.35;padding:5px 14px}
  /* bas de l'écran : les commandes de la démo sont dans la barre du bas (dc_demo.BARRE_CSS, 08/10), qui réserve sa place et
     se masque quand le menu ☰ est ouvert */
}

/* ═══ B « plus court » : A, et ce qui fait doublon est replié ou masqué sur téléphone ══════════════════════════ */
@media (max-width:640px){
  /* haut : pas de photo (la fiche pratique la remplace) */
  html.mob-b[data-mob-page="accueil"] .ds-hero-media > img{display:none}
  /* Vous venez pour… : les titres seuls (le détail est sur la page de chaque soin) */
  html.mob-b[data-mob-page="accueil"] .ds-besoin > span:not(.ds-ico){display:none}
  html.mob-b[data-mob-page="accueil"] .ds-besoins{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}
  html.mob-b[data-mob-page="accueil"] .ds-besoins > .ds-besoin{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:2px 12px;
    padding:10px 14px;grid-column:auto!important;grid-row:auto!important;min-height:0}
  html.mob-b[data-mob-page="accueil"] .ds-besoin > .ds-ico{margin:0}
  /* le cabinet : sans photo ni informations pratiques (déjà dans la fiche du haut et dans « Prendre rendez-vous ») */
  html.mob-b[data-mob-page="accueil"] #cabinet .ds-fig,html.mob-b[data-mob-page="accueil"] #cabinet .ds-facts{display:none}
  /* premier rendez-vous : étapes repliées (titres), « À apporter » replié */
  html.mob-b[data-mob-page="accueil"] .ds-step > p{display:none}
  html.mob-b[data-mob-page="accueil"] .ds-steps > .ds-step{display:flex;flex-direction:row;align-items:center;gap:12px;padding:10px 14px;background-image:none;border-radius:14px}
  html.mob-b[data-mob-page="accueil"] .ds-steps > .ds-step::before{position:static;display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;margin:0;
    font-size:15px;line-height:1;letter-spacing:0;box-shadow:none}
  html.mob-b[data-mob-page="accueil"] .ds-steps > .ds-step::after{display:none}
  html.mob-b[data-mob-page="accueil"] .ds-step h3{margin:0;font-size:1.05rem}
  /* conseils : une rangée qui défile */
  html.mob-b[data-mob-page="accueil"] #conseils .ds-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin-inline:-20px;padding:2px 20px 8px}
  html.mob-b[data-mob-page="accueil"] #conseils .ds-card{flex:0 0 78%;scroll-snap-align:start}
  /* pied : les colonnes de liens redisent le menu (gardés : cabinet, ouvert ou fermé, rendez-vous, adresse, liens légaux, éditeur) */
  html.mob-b .ds-ftr-top > nav,html.mob-b .ds-ftr-top > div:not(.ds-ftr-brand):not(:last-child){display:none}
  html.mob-b .ds-ftr-top > div:not(.ds-ftr-brand):last-child > :not(ul),html.mob-b .ds-ftr-top > div:not(.ds-ftr-brand):last-child li:not(:last-child){display:none}
  /* visite guidée : après le premier défilement, pas sur le haut de la page */
  html.mob-b:not(.mob-tuto) .dcx-tuto{visibility:hidden}
}
@media (max-width:640px){
  html.mob-b .mob-pli{margin-top:18px;border-top:1px solid var(--ds-rule,#dde2ea)}
  html.mob-b .mob-pli > summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;font-weight:600;cursor:pointer;list-style:none}
  html.mob-b .mob-pli > summary::after{content:"+";font-size:22px;line-height:1}
  html.mob-b .mob-pli[open] > summary::after{content:"–"}
}
@media (max-width:640px){
  html.mob-b .mob-menu-fiche{position:relative;inset:auto;margin:18px 0 96px;width:auto;box-shadow:none}
}

/* B, pages intérieures en plusieurs sections (le cabinet, honoraires, urgences) : chaque longue section montre son début
   puis « Lire la suite » (telephone.js) ; un lien vers une ancre de la section la déplie. Rien n'est retiré.
   Section qui porte une mention obligatoire ([data-oblig]) : la mention reste visible, seules les explications (.mob-expl)
   se replient derrière « Voir le détail », placé à leur place (choix du 08/10). */
@media (max-width:640px){
  html.mob-b .mob-sec-pli:not(.mob-sec-ouverte) > .ds-wrap{max-height:440px;overflow:hidden;
    -webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
  html.mob-b .mob-suite{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin:10px auto 0;padding:0 18px;
    border:1.5px solid currentColor;border-radius:999px;background:transparent;color:inherit;font:600 15px/1 inherit;cursor:pointer}
  html.mob-b .mob-sec-ouverte .mob-suite{margin-top:18px}
  html.mob-b .mob-sec-tri:not(.mob-sec-ouverte) .mob-expl{display:none}
  html.mob-b .mob-sec-tri .mob-suite{margin:4px 0 22px}
  html.mob-b .mob-sec-tri.mob-sec-ouverte .mob-suite{margin:4px 0 22px}
}