/* Groupe A · pages « Vos soins » (soins.html) et « Un soin » (soin.html) — maquette page blanche du 28/09/2026.
   Composants propres au groupe, préfixe .ds-a- ; uniquement des jetons --ds-* ; rien ne s'applique hors de ces classes.
   .ds-a-ancres (entrée rapide numérotée) · .ds-a-grp (un besoin : titre collant + cartes) · .ds-a-soin (carte de soin)
   .ds-a-h1-t (terme technique sous le h1) · .ds-a-cles (repères du haut de page) · .ds-a-schema (dent en coupe)
   .ds-a-signes (signes d'alerte) · .ds-a-steps (frise verticale dans un texte) · .ds-a-renvoi (lien vers une fiche)
   .ds-a-tarifs (tableau court) · .ds-a-urg (liens lisibles dans un encadré sombre) */

/* ══ Entrée rapide : les besoins, numérotés ══ */
.ds-a-ancres{justify-self:stretch;width:100%;margin-top:6px}
.ds-a-ancres ul{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px;border-top:1.5px solid var(--ds-ink)}
.ds-a-ancres li{border-bottom:1px solid var(--ds-rule)}
.ds-a-ancres a{display:grid;grid-template-columns:26px 22px minmax(0,1fr) 16px;align-items:center;gap:12px;min-height:56px;padding:8px 10px;margin:0 -10px;border-radius:10px;color:var(--ds-ink);text-decoration:none;font:500 15.5px/1.3 var(--ds-f-body);transition:background-color .2s,color .2s}
.ds-a-ancres b{font:500 11.5px/1 var(--ds-f-mono);letter-spacing:.04em;color:var(--ds-accent)}
.ds-a-ancres .ds-svg{width:20px;height:20px;color:var(--ds-accent)}
.ds-a-ancres .ds-svg:last-child{width:16px;height:16px;color:var(--ds-mute);transform:rotate(90deg);transition:transform .25s var(--ds-ease),color .2s}
.ds-a-ancres a:hover{background:var(--ds-tint);color:var(--ds-accent)}
.ds-a-ancres a:hover .ds-svg:last-child{transform:rotate(90deg) translateX(3px);color:var(--ds-accent)}
@media (max-width:900px){.ds-a-ancres ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.ds-a-ancres ul{grid-template-columns:1fr}.ds-a-ancres a{min-height:50px}}

/* ══ Un besoin : titre collant à gauche, cartes de soins à droite ══ */
.ds-a-grp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:28px clamp(40px,5vw,72px);align-items:start;padding-block:clamp(40px,5vw,60px);border-top:1px solid var(--ds-rule)}
.ds-a-grp.ds-a-grp--1{border-top:1.5px solid var(--ds-ink)}
.ds-a-grp:last-child{padding-bottom:0}
.ds-a-grp-h{position:sticky;top:calc(var(--ds-hdr-h) + var(--ds-hdr-dec,0px) + 32px);display:grid;gap:14px;justify-items:start}
.ds-a-grp-top{display:flex;align-items:center;gap:14px}
.ds-a-grp-k{font:500 11.5px/1.2 var(--ds-f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ds-mute)}
.ds-a-grp-k b{font-weight:500;color:var(--ds-accent)}
.ds-a-grp-h h2{font-size:clamp(1.7rem,1.2rem + 1.2vw,2.25rem);line-height:1.08}
.ds-a-grp-h > p{font-size:16px;line-height:1.6;max-width:400px}
.ds-a-grp-h .ds-note{font-size:14.5px;line-height:1.55;padding:16px 18px;margin-top:4px;gap:12px}
.ds-a-grp-h .ds-note > .ds-svg{width:20px;height:20px}
@media (max-width:900px){.ds-a-grp{grid-template-columns:1fr}.ds-a-grp-h{position:static}.ds-a-grp-h > p{max-width:640px}}
/* accordéons du téléphone (famille.js pose le bouton .ds-a-plier et .is-plie ; sans script, tout reste déplié) */
.ds-a-plier{all:unset;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) 22px;align-items:center;gap:14px;width:100%;min-height:44px;cursor:pointer;font:inherit;color:inherit;letter-spacing:inherit}
.ds-a-plier:focus-visible{outline:2px solid var(--ds-accent);outline-offset:4px;border-radius:4px}
.ds-a-plier > .ds-svg:last-child{width:22px;height:22px;transform:rotate(180deg);transition:transform .3s var(--ds-ease,ease)}
.ds-a-grp.is-plie .ds-a-plier > .ds-svg:last-child{transform:rotate(0)}
.ds-a-grp-h:has(.ds-a-plier){justify-items:stretch}
.ds-a-grp.is-plie{row-gap:0}
.ds-a-grp.is-plie .ds-a-grp-h > :not(.ds-a-grp-top):not(h2),.ds-a-grp.is-plie > :not(.ds-a-grp-h){display:none}
@media (prefers-reduced-motion:reduce){.ds-a-plier > .ds-svg:last-child{transition:none}}

/* ══ Carte d'un soin : nom du patient, terme technique, une phrase ══ */
.ds-a-soin{gap:8px;padding:24px 24px 24px}
.ds-a-soin h3{font-size:19px;padding-right:30px}
.ds-a-soin .ds-k{letter-spacing:.08em;line-height:1.45}
.ds-a-soin p{font-size:14.5px;line-height:1.6;margin-top:4px}
.ds-a-soin > .ds-svg{position:absolute;top:27px;right:22px;width:18px;height:18px;color:var(--ds-mute);transition:transform .25s var(--ds-ease),color .25s}
a.ds-a-soin:hover > .ds-svg{transform:translateX(3px);color:var(--ds-accent)}
@media (max-width:640px){.ds-a-soin{padding:20px 20px 22px}.ds-a-soin > .ds-svg{top:23px;right:18px}}

/* ══ Haut de la page d'un soin ══ */
.ds-a-h1-t{display:block;margin-top:.4em;font-size:max(18px,.4em);line-height:1.2;letter-spacing:-.015em;font-weight:500;color:var(--ds-body)}
.ds-a-cles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:580px;margin:4px 0 0;border-top:1.5px solid var(--ds-ink)}
.ds-a-cles > div{padding:12px 14px 12px 0;border-bottom:1px solid var(--ds-rule)}
.ds-a-cles > div + div{padding-left:14px;border-left:1px solid var(--ds-rule)}
.ds-a-cles dt{font:500 11px/1.3 var(--ds-f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ds-mute)}
.ds-a-cles dd{margin:5px 0 0;color:var(--ds-ink);font:600 15px/1.35 var(--ds-f-body)}
@media (max-width:420px){.ds-a-cles{grid-template-columns:1fr}.ds-a-cles > div + div{padding-left:0;border-left:0}.ds-a-cles > div,.ds-a-cles > div + div{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:12px 0}.ds-a-cles dd{margin:0;text-align:right}}

/* ══ Schéma : une dent en coupe (SVG en ligne, couleurs du cabinet) ══ */
.ds-a-schema{max-width:620px}
.ds-a-schema svg{width:100%;height:auto;background:var(--ds-surface);border:1px solid var(--ds-rule);border-radius:var(--ds-r-l)}
.ds-a-schema .sa-os{fill:var(--ds-tint)}
.ds-a-schema .sa-os-l{fill:none;stroke:color-mix(in srgb, var(--ds-accent) 16%, transparent);stroke-width:1.2}
.ds-a-schema .sa-gen{fill:var(--ds-tint-2)}
.ds-a-schema .sa-dent{fill:#fff;stroke:var(--ds-ink);stroke-width:1.6}
.ds-a-schema .sa-email{fill:var(--ds-surface);stroke:var(--ds-ink);stroke-width:1.6}
.ds-a-schema .sa-pulpe{fill:var(--ds-accent)}
.ds-a-schema .sa-trait{stroke:var(--ds-mute);stroke-width:1;fill:none}
.ds-a-schema .sa-pt{fill:var(--ds-ink);stroke:#fff;stroke-width:1.5}
.ds-a-schema text{font:500 16px var(--ds-f-body);fill:var(--ds-ink)}
.ds-a-schema text tspan.sa-k{font:500 11.5px var(--ds-f-mono);letter-spacing:.08em;fill:var(--ds-mute)}
@media (max-width:640px){.ds-a-schema text{font-size:18px}.ds-a-schema text tspan.sa-k{font-size:14px;letter-spacing:.02em}}

/* ══ Signes qui doivent faire consulter ══ */
.ds-prose .ds-a-signes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ds-prose .ds-a-signes li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:2px 14px;align-content:start;padding:18px;background:#fff;border:1px solid var(--ds-rule);border-radius:var(--ds-r);font-size:15.5px;line-height:1.5;color:var(--ds-ink)}
.ds-prose .ds-a-signes li::before{content:none}
.ds-a-signes .ds-ico{width:40px;height:40px;border-radius:10px;grid-row:span 2}
.ds-a-signes .ds-ico .ds-svg{width:20px;height:20px}
.ds-a-signes b{font-weight:600}
.ds-a-signes small{display:block;color:var(--ds-body);font-size:14px;line-height:1.5}
@media (max-width:640px){.ds-prose .ds-a-signes{grid-template-columns:1fr}}

/* ══ Frise verticale (étapes dans une colonne de texte) ══ */
.ds-steps.ds-a-steps{grid-template-columns:minmax(0,1fr)!important;gap:10px}
.ds-a-steps .ds-step{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:20px;padding:20px 24px 20px 20px;box-shadow:none}
.ds-a-steps .ds-step:hover{transform:none;box-shadow:var(--ds-shadow)}
.ds-a-steps .ds-step::before{grid-row:1/span 2;margin:0;font-size:26px;line-height:1.1}
.ds-a-steps .ds-step::after{left:32px;right:auto;top:56px;bottom:20px;width:2px;height:auto}
html.dsa .ds-a-steps .ds-step::after{background-size:100% 0,auto}
html.dsa .ds-a-steps.ds-lance .ds-step::after{background-size:100% 100%,auto}
.ds-a-steps .ds-step h3{margin:3px 0 6px;font-size:18px}
.ds-a-steps .ds-step p{font-size:15px}
@media (max-width:520px){.ds-a-steps .ds-step{grid-template-columns:34px minmax(0,1fr);column-gap:14px;padding:18px 18px 18px 16px}.ds-a-steps .ds-step::before{font-size:22px}.ds-a-steps .ds-step::after{left:26px;top:50px}}

/* ══ Renvoi vers une fiche ou une page ══ */
.ds-a-renvoi{display:flex;align-items:center;gap:18px;padding:18px 20px;border:1px solid var(--ds-rule);border-radius:var(--ds-r);background:var(--ds-surface);color:inherit;text-decoration:none;transition:background-color .25s,border-color .25s,transform .35s var(--ds-ease)}
.ds-prose a.ds-a-renvoi{text-decoration:none}
.ds-a-renvoi .ds-a-renvoi-t{display:grid;gap:3px;flex:1;min-width:0}
.ds-a-renvoi .ds-k{line-height:1.3}
.ds-a-renvoi b{font:var(--ds-w-title) 18px/1.25 var(--ds-f-title);font-stretch:var(--ds-stretch);letter-spacing:-.015em;color:var(--ds-ink)}
.ds-a-renvoi small{font-size:14.5px;line-height:1.5;color:var(--ds-body)}
.ds-a-renvoi > .ds-svg{width:18px;height:18px;color:var(--ds-mute);transition:transform .25s var(--ds-ease),color .25s}
a.ds-a-renvoi:hover{background:var(--ds-tint);border-color:color-mix(in srgb, var(--ds-accent) 35%, transparent)}
a.ds-a-renvoi:hover .ds-ico{background:var(--ds-accent);color:#fff}
a.ds-a-renvoi:hover > .ds-svg{transform:translateX(3px);color:var(--ds-accent)}
@media (max-width:520px){.ds-a-renvoi{gap:14px;padding:16px}.ds-a-renvoi .ds-ico{width:40px;height:40px}}

/* ══ Tableau court (tient sur un téléphone) ══ */
.ds-a-tarifs .ds-table{min-width:0}
.ds-a-tarifs td,.ds-a-tarifs thead th:not(:first-child){text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ds-a-tarifs td{color:var(--ds-ink)}
.ds-a-legende{font-size:14px;line-height:1.55;color:var(--ds-mute)}
@media (max-width:520px){.ds-a-tarifs .ds-table{font-size:14px}.ds-a-tarifs th,.ds-a-tarifs td{padding:12px 10px}.ds-a-tarifs thead th:not(:first-child){white-space:normal}}

/* ══ Encadré sombre : liens lisibles ══ */
.ds-a-urg a{color:#fff;text-underline-offset:3px}
.ds-a-urg a:hover{opacity:.8}

/* ══ Petits réglages dans un texte long ══ */
.ds-prose .ds-a-schema figcaption{margin-top:14px}
.ds-prose .ds-a-signes,.ds-prose .ds-a-steps,.ds-prose .ds-a-schema,.ds-prose .ds-a-tarifs{margin-top:1.4em}

/* ══ Cibles tactiles ≥ 44 px sans changer le dessin ══ */
.ds-a-cible::before{content:"";position:absolute;inset:-8px -4px}
@media (max-width:1000px){.ds-a-toc a{display:inline-flex;align-items:center;min-height:44px}}