/* =====================================================================================================================
   Dr Juliette Brémond, chirurgien-dentiste à Bordeaux (cabinet imaginaire, site d'exemple)
   « Pierre blonde » : lin, sable, pierre, caramel, cacao. Newsreader + Figtree. Sa signature, ses paroles.
   Refonte du 07/10 (soir) : photos sans cadre fondues dans le lin, parties bord à bord, séance en bandes, gouttières
   qui bougent seules. Voir outils/PLAN-REFONTE.md (la raison de chaque choix).
   ===================================================================================================================== */
@font-face { font-family: "Newsreader"; src: url("polices/newsreader.woff2") format("woff2"); font-weight: 380 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("polices/newsreader-italique.woff2") format("woff2"); font-weight: 380 560; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("polices/figtree.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }

:root {
  --lin: #F7F1E8; --lin-clair: #FBF8F2; --sable: #EFE4D3; --pierre: #E2D2BA; --pierre-fonce: #CDB79A;
  --caramel: #B8875A; --caramel-fonce: #8C6140; --miel: #D8B68C; --cacao: #3A291E; --brun: #6A5343; --creme: #FFFCF7;
  --ligne: #E4D7C5; --ok: #4E7A52;
  --titre: "Newsreader", Georgia, "Times New Roman", serif;
  --texte: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --courbe: cubic-bezier(.2, .7, .2, 1);
  --int: 1240px; --gouttiere: clamp(20px, 4vw, 48px); --demi: 572px;
  --haut-entete: 84px;
  --rayon: 24px; --rayon-petit: 14px;
  --ombre: 0 1px 2px rgba(58, 41, 30, .05), 0 22px 44px -30px rgba(58, 41, 30, .45);
  --ombre-douce: 0 14px 34px -26px rgba(58, 41, 30, .4);
  --section: clamp(64px, 9vh, 112px);

  /* Agenda simulé du socle (agenda.css) */
  --ag-titre: var(--cacao); --ag-texte: #3E2E24; --ag-gris: var(--brun); --ag-gris-2: #9A8676; --ag-ligne: var(--ligne);
  --ag-accent: var(--caramel); --ag-accent-fonce: var(--caramel-fonce); --ag-fond-doux: var(--lin); --ag-fond-tete: var(--sable);
  --ag-rayon: 24px; --ag-ombre: var(--ombre-douce); --rebond: cubic-bezier(.34, 1.56, .64, 1);
  --illu-trait: #5A4434; --illu-accent: var(--caramel); --illu-doux: #F1E3D0; --illu-police: var(--texte); --illu-texte: var(--cacao); --illu-metal: #C6C3BE;
  /* Blog commun (commun/blog.css) */
  --bl-fond: var(--lin); --bl-fond-2: var(--sable); --bl-surface: var(--creme); --bl-texte: #3E2E24; --bl-texte-doux: var(--brun);
  --bl-titre: var(--cacao); --bl-accent: var(--caramel); --bl-accent-texte: var(--caramel-fonce); --bl-accent-doux: #F1E3D0; --bl-sur-accent: #fff;
  --bl-ligne: var(--ligne); --bl-alerte: #A64B32; --bl-alerte-doux: #F6E4DC; --bl-ok: var(--ok);
  --bl-police-titre: var(--titre); --bl-police-texte: var(--texte); --bl-graisse-titre: 450; --bl-em-style: italic;
  --bl-rayon: 24px; --bl-rayon-petit: 14px; --bl-ombre: var(--ombre); --bl-haut-entete: 84px;
  --il-trait: #5A4434; --il-email: #FFFDF8; --il-dentine: #F2E2C6; --il-pulpe: #EDB3A1; --il-carie: #6E4A2F; --il-carie-pulpe: #D98A72;
  --il-gencive: #F0C3B5; --il-gencive-rouge: #E08D7B; --il-tartre: #C9A66C; --il-os: #EEE2CF; --il-os-trait: #CDB79A;
  --il-accent: var(--caramel); --il-accent-texte: var(--caramel-fonce); --il-doux: #F1E3D0; --il-metal: #C6C3BE; --il-metal-clair: #E3E0DA;
  --il-metal-fonce: #857E75; --il-texte: var(--cacao); --il-fond: var(--creme); --il-ligne: var(--ligne);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--lin); color: #3E2E24; font: 400 17.5px/1.66 var(--texte); -webkit-font-smoothing: antialiased; }
img, svg, video { display: block; max-width: 100%; }
picture { display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 450; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--caramel); outline-offset: 3px; border-radius: 6px; }
::selection { background: #EAD5BB; color: var(--cacao); }
.int { width: 100%; max-width: var(--int); margin: 0 auto; padding: 0 var(--gouttiere); }
.saut { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--cacao); color: #fff; padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.saut:focus { top: 12px; }
.visuel-masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Titres ---------- */
.surtitre { font: 700 12.5px/1.2 var(--texte); letter-spacing: .16em; text-transform: uppercase; color: var(--caramel-fonce); margin: 0 0 18px; }
.t1 { font-family: var(--titre); font-weight: 420; font-size: clamp(42px, 4.6vw, 70px); line-height: 1.04; letter-spacing: -.022em; color: var(--cacao); margin: 0 0 22px; text-wrap: balance; }
.t2 { font-family: var(--titre); font-weight: 430; font-size: clamp(32px, 3.4vw, 50px); line-height: 1.1; letter-spacing: -.018em; color: var(--cacao); margin: 0 0 18px; text-wrap: balance; }
.t3 { font-family: var(--titre); font-weight: 480; font-size: clamp(22px, 1.75vw, 26px); line-height: 1.22; color: var(--cacao); margin: 0 0 8px; }
.t4 { font: 700 13px/1.2 var(--texte); letter-spacing: .12em; text-transform: uppercase; color: var(--caramel-fonce); margin: 0 0 12px; }
.t1 em, .t2 em, .t3 em { font-style: italic; font-weight: 400; color: var(--caramel-fonce); }
.chapo { font-size: clamp(18px, 1.35vw, 20px); line-height: 1.6; color: var(--brun); max-width: 56ch; margin: 0 0 30px; text-wrap: pretty; }
.page-rdv .page-tete-int { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.page-rdv .section--rdv { padding-top: clamp(36px, 6vh, 64px); }

/* ---------- Boutons et liens ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; border: 1.5px solid transparent;
  font: 700 16px/1 var(--texte); text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .3s var(--courbe), background-color .3s, color .3s, border-color .3s; }
.btn:active { transform: translateY(1px); }
.btn-rond { display: inline-grid; place-items: center; transition: transform .35s var(--courbe); }
.btn-rond svg { width: 17px; height: 17px; }
.btn:hover .btn-rond { transform: translateX(4px); }
.btn--plein { background: var(--cacao); color: var(--lin-clair); }
.btn--plein:hover { background: #4B3628; }
.btn--plein .btn-rond { color: var(--miel); }
.btn--contour { border-color: var(--pierre-fonce); color: var(--cacao); }
.btn--contour:hover { border-color: var(--caramel); color: var(--caramel-fonce); }
.lien-fleche { display: inline-flex; align-items: center; gap: 9px; font: 700 16px/1.2 var(--texte); color: var(--caramel-fonce); text-decoration: none;
  border-bottom: 1.5px solid currentColor; padding-bottom: 3px; }
.lien-fleche svg { width: 16px; height: 16px; transition: transform .3s var(--courbe); }
.lien-fleche:hover svg { transform: translateX(4px); }
.lien-tel { font: 600 16px/1.3 var(--texte); color: var(--cacao); text-decoration: underline; text-decoration-color: var(--pierre-fonce); text-underline-offset: 4px; }
.lien-tel:hover { text-decoration-color: var(--caramel); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.ic { width: 20px; height: 20px; flex: none; }

/* ---------- Ouverture (une fois par visite) ---------- */
#ouverture { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: var(--lin); pointer-events: none; }
html:not(.avec-ouverture) #ouverture { display: none; }
.ouv-centre { display: grid; justify-items: center; gap: 14px; transform: translateY(-2vh); }
.ouv-signature { width: min(560px, 78vw); height: auto; color: var(--cacao); overflow: visible; }
.ouv-signature path { fill: currentColor; fill-opacity: 0; stroke: currentColor; stroke-width: .9; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ouv-sous { font: 600 13px/1 var(--texte); letter-spacing: .3em; text-transform: uppercase; color: var(--caramel-fonce); opacity: 0; }
.ouv-trait { width: 0; height: 1.5px; background: var(--caramel); }
html.ouverture-prete .ouv-signature path { animation: ouv-ecrit .62s var(--courbe) forwards, ouv-remplit .5s ease forwards; animation-delay: calc(var(--i) * .075s), calc(.85s + var(--i) * .03s); }
html.ouverture-prete .ouv-sous { animation: ouv-monte .6s var(--courbe) 1.2s forwards; }
html.ouverture-prete .ouv-trait { animation: ouv-trait .7s var(--courbe) 1.05s forwards; }
html.ouverture-prete #ouverture { animation: ouv-sort .75s cubic-bezier(.65, 0, .35, 1) 1.85s forwards; }
@keyframes ouv-ecrit { to { stroke-dashoffset: 0; } }
@keyframes ouv-remplit { to { fill-opacity: 1; stroke-width: 0; } }
@keyframes ouv-monte { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ouv-trait { to { width: 120px; } }
@keyframes ouv-sort { to { transform: translateY(-100%); } }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 60; height: var(--haut-entete); background: color-mix(in srgb, var(--lin) 88%, transparent);
  backdrop-filter: saturate(1.2) blur(14px); -webkit-backdrop-filter: saturate(1.2) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, background-color .3s; }
.entete.defile { border-bottom-color: var(--ligne); background: color-mix(in srgb, var(--lin) 95%, transparent); }
.entete-int { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.marque { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--cacao); flex: none; }
.marque-signature { width: 158px; height: auto; }
.marque-sous { font: 600 11px/1.35 var(--texte); letter-spacing: .14em; text-transform: uppercase; color: var(--brun); border-left: 1px solid var(--pierre-fonce); padding-left: 14px; }
.nav { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 30px); }
.nav a { font: 600 15px/1.2 var(--texte); text-decoration: none; color: var(--cacao); position: relative; padding: 6px 0; white-space: nowrap; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--caramel); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--courbe); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.entete-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.entete-tel { display: inline-flex; align-items: center; gap: 8px; font: 700 15px/1 var(--texte); text-decoration: none; color: var(--cacao); padding: 10px 4px; }
.entete-tel svg { width: 18px; height: 18px; color: var(--caramel-fonce); }
.entete .btn { min-height: 46px; font-size: 15px; padding: 0 20px; }
.burger { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--pierre-fonce); background: transparent; cursor: pointer; place-items: center; }
.burger span { display: block; width: 18px; height: 1.6px; background: var(--cacao); margin: 4px auto; transition: transform .3s var(--courbe), opacity .3s; }
.menu-tel { display: none; }
@media (max-width: 1560px) { .marque-sous { display: none; } }
@media (max-width: 1460px) { .entete-tel span { display: none; } .nav { gap: clamp(12px, 1.4vw, 22px); } }
@media (max-width: 1120px) {
  .nav, .entete-tel { display: none; }
  .burger { display: grid; }
  .menu-tel { position: fixed; inset: var(--haut-entete) 0 0 0; z-index: 59; background: var(--lin); padding: 26px var(--gouttiere) 40px; overflow-y: auto; display: block;
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s, transform .35s var(--courbe), visibility .3s; }
  html.menu-ouvert .menu-tel { opacity: 1; visibility: visible; transform: none; }
  html.menu-ouvert { overflow: hidden; }
  html.menu-ouvert .burger span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
  html.menu-ouvert .burger span:nth-child(2) { opacity: 0; }
  html.menu-ouvert .burger span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }
  .menu-tel a { display: block; font: 450 28px/1.2 var(--titre); color: var(--cacao); text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--ligne); }
  .menu-tel .menu-petits a { font: 600 16px/1.3 var(--texte); border: 0; padding: 8px 0; color: var(--brun); }
  .menu-tel .menu-petits { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .menu-tel .btn { margin-top: 24px; display: inline-flex; font: 700 16px/1 var(--texte); color: var(--lin-clair); border: 0; padding: 0 24px; }
}
@media (max-width: 560px) { .entete .btn { display: none; } .marque-signature { width: 138px; } }

/* ---------- Parties ---------- */
.section { padding: var(--section) 0; position: relative; }
main [id] { scroll-margin-top: var(--haut-entete); }
.section--sable { background: var(--sable); }
.section--creme { background: var(--lin-clair); }
.tete-section { max-width: 780px; margin-bottom: clamp(26px, 4vh, 44px); }
.tete-section .chapo { margin: 0; }
.deux-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.deux-col--haut { align-items: start; }
.prose { max-width: 66ch; }
.prose p, .prose li { color: #3E2E24; }
.prose a { color: var(--caramel-fonce); text-decoration: underline; text-underline-offset: 3px; }

/* Sa parole : la mise en avant de ce site. Le guillemet est suspendu dans la marge, vers le bord. */
.parole { position: relative; font: italic 400 clamp(22px, 1.9vw, 28px)/1.38 var(--titre); color: var(--cacao); max-width: 34ch; margin: 26px 0 30px; text-wrap: pretty; }
.parole-guillemet { position: absolute; right: 100%; top: -.2em; margin-right: .16em; font: normal 400 2.4em/1 var(--titre); color: var(--caramel); }
.tete-section + .parole { margin-top: -10px; }

/* Une partie en deux : la photo part du bord de la fenêtre et se fond vers le texte (pas de cadre, pas de coin). */
.duo { display: grid; grid-template-columns: minmax(var(--gouttiere), 1fr) minmax(0, var(--demi)) minmax(0, var(--demi)) minmax(var(--gouttiere), 1fr); position: relative; }
.duo-photo { position: relative; min-height: 480px; grid-row: 1; overflow: hidden; }
.duo-photo > picture, .duo-photo > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.duo-texte { grid-row: 1; padding: var(--section) 0; align-self: center; }
.duo--g .duo-photo { grid-column: 1 / 3; -webkit-mask-image: linear-gradient(90deg, #000 58%, transparent 99%); mask-image: linear-gradient(90deg, #000 58%, transparent 99%); }
.duo--g .duo-texte { grid-column: 3 / 4; padding-left: clamp(36px, 4.5vw, 72px); }
.duo--d .duo-photo { grid-column: 3 / 5; -webkit-mask-image: linear-gradient(270deg, #000 58%, transparent 99%); mask-image: linear-gradient(270deg, #000 58%, transparent 99%); }
.duo--d .duo-texte { grid-column: 2 / 3; padding-right: clamp(36px, 4.5vw, 72px); }
.duo-texte > p { max-width: 60ch; }
.note { color: var(--brun); font-size: 16.5px; padding-left: 18px; border-left: 2px solid var(--miel); }
.note b { color: var(--cacao); }
.note a { color: var(--caramel-fonce); }

/* ---------- 1. Premier écran : elle écoute, photo bord à bord fondue dans le lin ---------- */
.hero { position: relative; min-height: min(calc(100svh - var(--haut-entete)), 860px); display: flex; align-items: center; overflow: hidden; background: var(--lin); }
.hero-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 100%; }
.hero-photo picture, .hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero--large .hero-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--lin) 0%, rgba(247, 241, 232, .96) 26%, rgba(247, 241, 232, .72) 40%, rgba(247, 241, 232, 0) 56%); }
.hero--bord .hero-photo { width: 64%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36%); mask-image: linear-gradient(90deg, transparent 0, #000 36%); }
.hero-int { position: relative; z-index: 1; padding-top: 40px; padding-bottom: 48px; }
.hero-texte { max-width: 620px; }
.hero .t1 { font-size: clamp(46px, 4.8vw, 74px); margin-bottom: 26px; }
.hero .t1 em { display: block; }
.hero-chapo { font-size: clamp(19px, 1.45vw, 21.5px); color: #57412F; max-width: 30em; margin-bottom: 34px; }

/* ---------- 2. La séance en bandes (signature) ----------
   Rien ne recouvre jamais un texte : chaque bande coupe ce qui dépasse, les bandes fermées ne montrent que leur titre
   sur une ligne, la phrase n'apparaît que sous la bande ouverte (sa largeur est fixe : elle ne se replie pas pendant
   que la bande s'ouvre). */
.seance .t2 { margin-bottom: 10px; }
.seance .chapo { margin-bottom: 0; }
.bande { display: flex; gap: 6px; margin-top: clamp(22px, 3.5vh, 34px); }
.volet { flex: 1 1 0; min-width: 0; margin: 0; display: flex; flex-direction: column; cursor: pointer; overflow: hidden; transition: flex-grow .85s var(--courbe); }
.volet.actif { flex-grow: 2.4; cursor: default; }
.volet:focus-visible { outline-offset: -4px; }
.volet-photo { position: relative; height: min(50vh, 480px); overflow: hidden; background: var(--pierre); }
.volet-photo picture, .volet-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.volet-photo img { filter: saturate(.72) brightness(.98); transition: filter .8s var(--courbe); }
.volet.actif .volet-photo img, .volet:hover .volet-photo img { filter: none; }
.volet figcaption { min-height: 104px; padding: 16px clamp(14px, 1.5vw, 24px) 0; overflow: hidden; }
.volet:first-child figcaption { padding-left: max(var(--gouttiere), calc((100vw - var(--int)) / 2 + var(--gouttiere))); }
.volet figcaption b { display: block; font: 450 22px/1.25 var(--titre); color: var(--brun); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .4s; }
.volet.actif figcaption b { color: var(--cacao); font-style: italic; }
.volet figcaption span { display: block; width: min(28em, 36vw); font-size: 16px; line-height: 1.5; color: var(--brun); opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.volet.actif figcaption span { opacity: 1; visibility: visible; transition: opacity .6s var(--courbe) .35s, visibility 0s; }
.bande--une-legende { position: relative; padding-bottom: 92px; }
.bande--une-legende .volet figcaption { min-height: 0; }
.bande--une-legende figcaption { position: absolute; left: 0; right: 0; bottom: 0; height: 92px; padding: 18px 0 0 !important; opacity: 0; transition: opacity .5s; pointer-events: none; }
.bande--une-legende .volet.actif figcaption { opacity: 1; }
.bande--une-legende figcaption b, .bande--une-legende figcaption span { max-width: var(--int); width: auto; margin-left: auto; margin-right: auto; padding: 0 var(--gouttiere); opacity: 1; visibility: visible; white-space: normal; }

/* ---------- 3. La première heure : le cadran ---------- */
.heure { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(30px, 6vw, 100px); align-items: center; }
.cadran { position: relative; width: min(100%, 470px); justify-self: center; aspect-ratio: 1; }
.cadran svg { width: 100%; height: 100%; overflow: visible; }
.cadran .fond { fill: var(--creme); stroke: var(--ligne); stroke-width: 1; }
.cadran .graduation { stroke: var(--pierre-fonce); stroke-width: 1.2; }
.cadran .graduation--grande { stroke: var(--caramel); stroke-width: 2; }
.cadran .arc { fill: none; stroke-width: 26; stroke-linecap: butt; transition: stroke-width .35s var(--courbe), opacity .35s; opacity: .9; }
.cadran .arc[data-n="1"] { stroke: #E9D3B5; }
.cadran .arc[data-n="2"] { stroke: var(--miel); }
.cadran .arc[data-n="3"] { stroke: var(--caramel); }
.cadran .arc[data-n="4"] { stroke: var(--caramel-fonce); }
.cadran[data-actif] .arc { opacity: .35; }
.cadran[data-actif="1"] .arc[data-n="1"], .cadran[data-actif="2"] .arc[data-n="2"], .cadran[data-actif="3"] .arc[data-n="3"], .cadran[data-actif="4"] .arc[data-n="4"] { opacity: 1; stroke-width: 34; }
.cadran .aiguille { fill: var(--cacao); stroke: var(--creme); stroke-width: 4; transform-origin: 250px 250px; }
.cadran .cadran-txt { font: 600 13px/1 var(--texte); fill: var(--brun); }
.cadran-centre { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.cadran-centre b { font: 400 clamp(64px, 7vw, 96px)/.9 var(--titre); color: var(--cacao); letter-spacing: -.03em; }
.cadran-centre span { font: 700 12.5px/1.35 var(--texte); letter-spacing: .14em; text-transform: uppercase; color: var(--caramel-fonce); margin: 8px auto 0; max-width: 15ch; }
.minutes { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 6px; }
.minute { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 18px; align-items: start; padding: 12px 16px; border-radius: var(--rayon-petit); cursor: default; transition: background-color .3s; }
.minute:hover, .minute.actif { background: var(--creme); }
.minute-temps { font: 400 24px/1 var(--titre); color: var(--caramel-fonce); padding-top: 3px; white-space: nowrap; display: flex; align-items: center; gap: 10px; }
.minute-temps i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.minute[data-n="1"] i { background: #E9D3B5; } .minute[data-n="2"] i { background: var(--miel); } .minute[data-n="3"] i { background: var(--caramel); } .minute[data-n="4"] i { background: var(--caramel-fonce); }
.minute b { display: block; font: 700 17.5px/1.35 var(--texte); color: var(--cacao); margin-bottom: 2px; }
.minute p { margin: 0; color: var(--brun); font-size: 16px; line-height: 1.55; }

/* ---------- 4. Ce que votre plan peut contenir : les soins, la photo au bord droit ---------- */
.soins-zone { display: grid; grid-template-columns: minmax(var(--gouttiere), 1fr) minmax(0, 700px) minmax(0, 444px) minmax(var(--gouttiere), 1fr); align-items: start; }
.soins-tete { grid-column: 2 / 3; grid-row: 1; padding-right: 48px; }
.soins-tete .t2 { margin-bottom: 22px; }
.soins-lignes { grid-column: 2 / 3; grid-row: 2; list-style: none; margin: 0; padding: 0 48px 0 0; }
.soins-lignes li + li { border-top: 1px solid var(--ligne); }
.soin-ligne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 24px; align-items: baseline; padding: 12px 0; text-decoration: none; color: inherit; }
.soin-nom { font: 450 clamp(24px, 2vw, 29px)/1.18 var(--titre); color: var(--cacao); transition: color .3s; }
.soin-desc { font-size: 16px; line-height: 1.5; color: var(--brun); }
.soin-ligne:hover .soin-nom, .soin-ligne:focus-visible .soin-nom, .soin-ligne.actif .soin-nom { color: var(--caramel-fonce); font-style: italic; }
.soins-photos { grid-column: 3 / 5; grid-row: 1 / 3; align-self: stretch; position: relative; margin: calc(-1 * var(--section)) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%); mask-image: linear-gradient(90deg, transparent 0, #000 26%); }
.soins-photo { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.soins-photo.actif { opacity: 1; }
.soins-photo picture, .soins-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 5. Les gouttières qui bougent toutes seules ---------- */
.gout { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(30px, 5vw, 84px); align-items: center; }
.gout .parole { margin: 20px 0 28px; }
.aligneur { width: 100%; }
.aligneur-compte { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin: 0; font: 400 clamp(26px, 2.4vw, 36px)/1.1 var(--titre); color: var(--cacao); }
.aligneur-compte b { font-weight: 450; color: var(--caramel-fonce); font-variant-numeric: tabular-nums; display: inline-block; min-width: 1.1em; text-align: right; }
.aligneur-sem { font-size: .66em; font-style: italic; color: var(--brun); }
.aligneur-sem b { min-width: 1.1em; }
.simu-arcade { width: 100%; height: auto; margin: 10px 0 6px; }
.simu-arcade .dent { fill: #FFFDF8; stroke: #5A4434; stroke-width: 1.4; }
.simu-arcade .gout-trace { fill: none; stroke: var(--caramel); stroke-width: 26; stroke-opacity: .14; stroke-linecap: round; stroke-linejoin: round; }
.simu-arcade .gencive { fill: none; stroke: #F0C3B5; stroke-width: 44; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.aligneur input[type="range"] { width: 100%; accent-color: var(--caramel); margin: 4px 0 10px; cursor: pointer; }
.aligneur-note { font-size: 16px; line-height: 1.55; color: var(--brun); margin: 0; max-width: 58ch; }

/* ---------- 6. Où ça se passe : la pièce claire en grand, puis l'adresse ---------- */
.venir { position: relative; padding-bottom: var(--section); }
.venir-photo { height: min(50vh, 520px); }
.venir-photo picture, .venir-photo img { width: 100%; height: 100%; object-fit: cover; }
.venir-photo { -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 82%); mask-image: linear-gradient(180deg, #000 45%, transparent 82%); }
.venir-texte { position: relative; margin-top: -110px; }
.venir-texte .t2 { margin-bottom: 12px; }
.venir-texte .chapo { margin-bottom: 26px; }
.venir-infos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; border-top: 1px solid var(--ligne); padding-top: 22px; }
.venir-infos p { font-size: 16.5px; color: var(--brun); margin: 0 0 12px; }
.venir-infos p b { color: var(--cacao); }
.horaires-courts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 16px; }
.horaires-courts li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; color: var(--brun); }
.horaires-courts b { color: var(--cacao); font-weight: 600; }
.horaires-courts span { font-variant-numeric: tabular-nums; }
.statut { display: inline-flex; align-items: center; gap: 9px; font: 700 14px/1 var(--texte); color: var(--brun); margin: 0 0 12px !important; }
.statut i { width: 9px; height: 9px; border-radius: 50%; background: var(--pierre-fonce); position: relative; }
.statut.ouvert { color: var(--ok); }
.statut.ouvert i { background: var(--ok); }
.statut.ouvert i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--ok); animation: pouls 2.2s ease-out infinite; }
@keyframes pouls { from { transform: scale(.6); opacity: .8; } to { transform: scale(1.8); opacity: 0; } }

/* ---------- 7. Conseils ---------- */
.conseils-tete { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 30px; }
.conseils-tete .t2 { margin-bottom: 0; }
#conseils .bl-carte-chapo { display: none; }

/* ---------- 8. La lettre, qui finit la page ---------- */
.lettre-zone .duo-photo { grid-column: 1 / 3; margin-right: 10%; }
.lettre-zone .duo-texte { grid-column: 3 / 5; padding-right: var(--gouttiere); padding-left: clamp(20px, 3vw, 48px); max-width: 700px; }
.lettre { position: relative; background: var(--creme); border-radius: 6px; padding: clamp(28px, 3.4vw, 44px) clamp(28px, 3.6vw, 52px) 24px; box-shadow: 0 1px 1px rgba(58, 41, 30, .06), 0 30px 60px -40px rgba(58, 41, 30, .6);
  background-image: linear-gradient(transparent 0 calc(100% - 1px), rgba(184, 135, 90, .12) 0); background-size: 100% 2.05em; transform: rotate(-.6deg); margin-bottom: 30px; }
.lettre::before { content: ""; position: absolute; top: -12px; left: 50%; width: 110px; height: 26px; transform: translateX(-50%) rotate(2deg); background: rgba(216, 182, 140, .55); border-radius: 3px; }
.lettre-titre { font: italic 400 15px/1.2 var(--titre); color: var(--caramel-fonce); letter-spacing: .02em; margin: 0 0 14px; }
.lettre p { font: 400 clamp(19px, 1.4vw, 21px)/2.05em var(--titre); color: var(--cacao); margin: 0; }
.lettre p + p { margin-top: 2.05em; }
.lettre-signature { width: 230px; margin: 8px 0 0 auto; color: var(--cacao); overflow: visible; }
.lettre-signature path { fill: currentColor; }
.lettre-zone .actions { padding-left: 6px; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lettre-signature path, .appel-signature path { fill-opacity: 0; stroke: currentColor; stroke-width: .9; stroke-dasharray: 1; stroke-dashoffset: 1;
      animation: sig-ecrit linear both; animation-timeline: view(); animation-range: entry 30% cover 55%; }
  }
}
@keyframes sig-ecrit { 0% { stroke-dashoffset: 1; fill-opacity: 0; } 75% { stroke-dashoffset: 0; fill-opacity: 0; } 100% { stroke-dashoffset: 0; fill-opacity: 1; stroke-width: 0; } }

/* ---------- Pages intérieures ---------- */
.page-tete { background: var(--sable); }
.page-tete.duo .duo-photo { min-height: min(64vh, 580px); }
.page-tete.duo--d .duo-photo { -webkit-mask-image: linear-gradient(270deg, #000 70%, transparent 100%); mask-image: linear-gradient(270deg, #000 70%, transparent 100%); }
.page-tete.duo .duo-texte { padding-top: clamp(34px, 6vh, 64px); padding-bottom: clamp(40px, 7vh, 72px); }
.page-tete:not(.duo) { padding: clamp(36px, 6vh, 70px) 0 clamp(40px, 7vh, 76px); }
.page-tete--sans-photo .int { max-width: 940px; margin-left: max(0px, calc((100vw - var(--int)) / 2)); }
.page-tete .t1 { font-size: clamp(40px, 4.2vw, 64px); }
.page-tete .chapo { margin-bottom: 0; }
.fil { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 500 14.5px/1.4 var(--texte); color: var(--brun); margin-bottom: 26px; }
.fil a { text-decoration: none; }
.fil a:hover { color: var(--cacao); text-decoration: underline; }
.fil span[aria-hidden] { opacity: .5; }

/* Listes typographiques (à la place des cartes à icône) */
.points { list-style: none; margin: 0; padding: 26px 0 0; display: grid; gap: 26px 48px; border-top: 1px solid var(--ligne); }
.points--1 { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.points--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.points--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.points--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.points p { margin: 0; color: var(--brun); font-size: 16.5px; line-height: 1.6; }
.duo .points { margin-top: 4px; }
.chiffres { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.chiffres b { display: block; font: 400 clamp(34px, 3.2vw, 48px)/1.05 var(--titre); color: var(--caramel-fonce); letter-spacing: -.02em; margin-bottom: 16px; white-space: nowrap; }
.chiffres p { margin: 0; color: var(--brun); font-size: 16.5px; }
.liste-simple { list-style: none; margin: 0; padding: 0; }
.liste-simple li { padding: 14px 0; color: var(--brun); font-size: 17px; }
.liste-simple li + li { border-top: 1px solid var(--ligne); }
.liste-simple b { color: var(--cacao); }

/* Étapes (vrais déroulés : les numéros ont un sens) : une frise sur toute la largeur, un trait relie les numéros */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 clamp(24px, 3vw, 44px); position: relative; }
.etapes::before { content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 1px; background: var(--pierre-fonce); }
.etape { position: relative; }
.etape-num { display: inline-block; position: relative; font: 300 54px/1 var(--titre); color: var(--caramel); letter-spacing: -.02em; padding-right: 14px; margin-bottom: 18px; background: var(--fond-partie, var(--lin)); }
.section--creme .etape-num { background: var(--lin-clair); }
.section--sable .etape-num { background: var(--sable); }
.etape .t3 { margin-bottom: 2px; }
.etape .duree { font: italic 400 18px/1.3 var(--titre); color: var(--caramel-fonce); margin: 0 0 8px; }
.etape p { margin: 0; color: var(--brun); font-size: 16.5px; line-height: 1.6; }

.comparatif { display: grid; grid-template-columns: 1fr 1fr; }
.comparatif > div { padding: 6px 48px 6px 0; }
.comparatif .apres { padding: 6px 0 6px 48px; border-left: 1px solid var(--pierre-fonce); }
.comparatif .avant .t3 { color: var(--brun); }
.comparatif .apres .t3 { color: var(--caramel-fonce); font-style: italic; }
.comparatif ul { margin: 12px 0 0; padding: 0 0 0 20px; display: grid; gap: 8px; }
.comparatif .avant li { color: var(--brun); }
.comparatif .apres li { color: var(--cacao); }
.comparatif .apres li::marker { color: var(--caramel); }

/* Le cabinet : trois photos bord à bord */
.lieux { padding-bottom: var(--section); }
.trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.trois figure { margin: 0; }
.trois picture { height: min(46vh, 440px); }
.trois img { width: 100%; height: 100%; object-fit: cover; }
.trois figcaption { padding: 16px 20px 0; color: var(--brun); font-size: 16px; max-width: 40ch; }
.trois figure:first-child figcaption { padding-left: max(var(--gouttiere), calc((100vw - var(--int)) / 2 + var(--gouttiere))); }
.trois figcaption b { display: block; font: 450 22px/1.2 var(--titre); color: var(--cacao); margin-bottom: 2px; }

/* Infos pratiques : le plan collé au bord droit */
.pratique { background: var(--lin-clair); }
.pratique .duo-photo { -webkit-mask-image: none; mask-image: none; }
.pratique .plan { position: absolute; inset: 0; margin: 0; }
.pratique .plan a { display: block; height: 100%; }
.pratique .plan img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.35) saturate(.75) contrast(.96) brightness(1.03); }
.pratique .plan-legende { position: absolute; right: 0; bottom: 0; margin: 0; padding: 4px 10px; font-size: 13px; color: var(--brun); background: color-mix(in srgb, var(--creme) 90%, transparent); }
.plan-legende a { color: var(--brun); }
.adresse { font-size: 17px; color: var(--cacao); margin-bottom: 14px; }
.horaires-zone { margin: 4px 0 22px; max-width: 460px; }
.acces-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.acces-liste li { font-size: 16px; color: var(--brun); line-height: 1.5; }
.acces-liste b { color: var(--cacao); }

/* Bande d'appel des pages intérieures : claire et signée */
.appel { padding: var(--section) 0; background: var(--lin-clair); border-top: 1px solid var(--ligne); }
.appel-int { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 30px 60px; align-items: center; }
.appel .t2 { margin-bottom: 12px; }
.appel p { color: var(--brun); max-width: 52ch; margin-bottom: 26px; }
.appel-signature { width: min(100%, 300px); justify-self: end; color: var(--cacao); overflow: visible; }
.appel-signature path { fill: currentColor; }

/* Sources des pages de santé */
.section--sources { padding: 0 0 clamp(36px, 6vh, 60px); }
.sources-page { border-top: 1px solid var(--ligne); padding-top: 22px; max-width: 900px; }
.sources-page p { font-size: 14.5px; color: var(--brun); margin: 0 0 8px; }
.sources-titre { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--cacao) !important; }
.sources-titre .ic { width: 18px; height: 18px; color: var(--caramel-fonce); }
.sources-page ul { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.sources-page a { font-size: 14px; color: var(--brun); }

/* Questions fréquentes : un « + » typographique, sans rond */
.faq-zone { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.faq-tete { position: sticky; top: calc(var(--haut-entete) + 30px); }
.faq-tete .chapo { margin-bottom: 18px; }
.faq details + details { border-top: 1px solid var(--ligne); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 20px 2px; font: 450 21px/1.35 var(--titre); color: var(--cacao); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--caramel-fonce); }
.faq .plus { flex: none; font: 300 34px/1 var(--titre); color: var(--caramel); transition: transform .35s var(--courbe); }
.faq details[open] .plus { transform: rotate(45deg); }
.faq details > div { padding: 0 54px 22px 2px; color: var(--brun); }
.faq details > div p { margin: 0; }

/* Tableau des honoraires */
.tarifs { width: 100%; border-collapse: collapse; font-size: 16px; }
.tarifs caption { text-align: left; font: 450 24px/1.2 var(--titre); color: var(--cacao); padding: 0 0 14px; }
.tarifs th, .tarifs td { padding: 14px 0; border-bottom: 1px solid var(--ligne); text-align: left; vertical-align: top; }
.tarifs td { padding-left: 16px; }
.tarifs thead th { font: 700 12.5px/1.2 var(--texte); letter-spacing: .1em; text-transform: uppercase; color: var(--caramel-fonce); }
.tarifs td:last-child, .tarifs th:last-child { text-align: right; white-space: nowrap; }
.tarifs tbody th { font-weight: 700; color: var(--cacao); }
.tarifs small { display: block; color: var(--brun); font-weight: 400; font-size: 14.5px; margin-top: 2px; }
.notes-honoraires { margin-top: 40px; }

/* ---------- Pied de page ---------- */
.pied { background: var(--cacao); color: #D8C6B0; padding: clamp(50px, 8vh, 84px) 0 calc(28px + env(safe-area-inset-bottom)); position: relative; overflow: hidden; }
.pied-haut { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 30px 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(216, 198, 176, .18); }
.pied-signature { width: 200px; color: var(--lin-clair); margin-bottom: 14px; }
.pied p { margin: 0 0 8px; font-size: 15.5px; line-height: 1.6; }
.pied-titre { font: 700 12.5px/1.2 var(--texte) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--miel); margin: 0 0 16px !important; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pied-horaires { margin-top: 6px !important; gap: 4px !important; font-size: 14px; }
.pied-horaires li { display: flex; justify-content: space-between; gap: 12px; color: #D8C6B0; }
.pied-horaires span { color: #fff; font-weight: 600; }
.pied a { text-decoration: none; color: #E8DACA; font-size: 15.5px; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied-bas { display: flex; justify-content: space-between; gap: 14px 30px; flex-wrap: wrap; padding-top: 24px; font-size: 13.5px; color: #B9A58F; }
.pied-bas p { font-size: 13.5px; margin: 0; }

/* Barre d'actions sur téléphone */
.barre-tel { display: none; }
@media (max-width: 760px) {
  .barre-tel { position: fixed; z-index: 70; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; padding: 8px;
    background: color-mix(in srgb, var(--creme) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--ligne); border-radius: 999px; box-shadow: var(--ombre); }
  .barre-tel a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 999px; font: 700 15px/1 var(--texte); text-decoration: none; }
  .barre-tel a:first-child { color: var(--cacao); border: 1.5px solid var(--pierre-fonce); }
  .barre-tel a:last-child { background: var(--cacao); color: #fff; }
  .barre-tel svg { width: 18px; height: 18px; }
  body { padding-bottom: 86px; }
}

/* ---------- Apparitions au défilement (règle de l'équipe, le 07/10, code de référence : site du Dr Sitbon) ----------
   Le contenu est visible par défaut ; la classe « reveal-actif » n'est posée que si le script peut ré-afficher. Chaque bloc
   arrive du bas (46 px, flou léger, 1 s), ses éléments l'un après l'autre, les titres mot à mot. Jamais le premier écran. */
html.reveal-actif [data-reveal]:not([data-vu]) { opacity: 0; transform: translateY(46px); filter: blur(4px); }
[data-reveal] { transition: opacity 1s var(--courbe), transform 1.15s var(--courbe), filter 1s var(--courbe); }
html.reveal-actif [data-cascade][data-reveal]:not([data-vu]) { opacity: 1; transform: none; filter: none; }
html.reveal-actif [data-cascade] > * { transition: opacity 1s var(--courbe), transform 1.15s var(--courbe), filter 1s var(--courbe), flex-grow .85s var(--courbe); transition-delay: var(--d, 0s); }
html.reveal-actif [data-cascade]:not([data-vu]) > * { opacity: 0; transform: translateY(42px); filter: blur(4px); }
html.reveal-actif [data-cascade][data-vu] > * { transition-delay: var(--d, 0s), var(--d, 0s), var(--d, 0s), 0s; }
html.reveal-actif .mot { display: inline-block; opacity: 0; transform: translateY(.42em); filter: blur(5px); transition: opacity .75s var(--courbe), transform 1s var(--courbe), filter .75s var(--courbe); transition-delay: calc(var(--i, 0) * 45ms + 120ms); }
html.reveal-actif [data-vu] .mot { opacity: 1; transform: none; filter: none; }
.lie { white-space: nowrap; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cadran .arc { animation: arc-trace 1s linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
    .cadran .aiguille { animation: aiguille 1s linear both; animation-timeline: view(); animation-range: entry 10% cover 55%; }
  }
}
@media print { [data-reveal], [data-cascade] > *, .mot { opacity: 1 !important; transform: none !important; filter: none !important; } }
@keyframes arc-trace { from { stroke-dashoffset: var(--long); } to { stroke-dashoffset: 0; } }
@keyframes aiguille { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Écrans peu hauts : on resserre les marges, jamais le contenu ---------- */
@media (min-width: 1024px) and (max-height: 860px) {
  :root { --section: clamp(48px, 7vh, 64px); }
  .tete-section { margin-bottom: 26px; }
  .minutes { gap: 2px; }
  .minute { padding-top: 10px; padding-bottom: 10px; }
}

/* ---------- Tablette et téléphone ---------- */
@media (max-width: 1100px) {
  .points--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etapes { grid-auto-flow: row; grid-auto-columns: auto; gap: 26px; }
  .etapes::before { left: 26px; right: auto; top: 10px; bottom: 10px; width: 1px; height: auto; }
  .etape { padding-left: 74px; }
  .etape-num { position: absolute; left: 0; top: 0; width: 54px; text-align: center; padding: 0 0 6px; }
}
@media (max-width: 960px) {
  .heure, .gout, .deux-col, .faq-zone, .appel-int { grid-template-columns: minmax(0, 1fr); }
  .faq-tete { position: static; }
  .appel-signature { justify-self: start; width: 220px; }
  /* les parties en deux : la photo en haut, bord à bord, fondue vers le bas */
  .duo { grid-template-columns: minmax(0, 1fr); }
  .duo .duo-photo, .lettre-zone .duo-photo { grid-column: 1; grid-row: 1; min-height: 0; aspect-ratio: 4 / 3; margin: 0;
    -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 100%); mask-image: linear-gradient(180deg, #000 68%, transparent 100%); }
  .duo .duo-texte, .lettre-zone .duo-texte { grid-column: 1; grid-row: 2; padding: 6px var(--gouttiere) var(--section); max-width: none; }
  .page-tete.duo .duo-photo { min-height: 0; aspect-ratio: 16 / 10; }
  .page-tete.duo .duo-texte { padding-top: 0; }
  .pratique .duo-photo { aspect-ratio: 4 / 3; -webkit-mask-image: none; mask-image: none; }
  .pratique .duo-texte { padding-top: 28px; }
  /* premier écran : la photo d'abord, le texte dessous */
  .hero { display: block; min-height: 0; }
  .hero-photo { position: relative; width: 100% !important; height: 62vw; min-height: 260px; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
  .hero--large .hero-photo::after { display: none; }
  /* sur téléphone, la photo large est recadrée sur les deux femmes (la dentiste n'est pas coupée à droite) */
  .hero--large .hero-photo img { object-position: 86% 40% !important; }
  .hero-int { padding-top: 6px; padding-bottom: 40px; }
  /* soins : la photo au-dessus, les lignes dessous */
  .soins-zone { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
  .soins-photos { grid-column: 1; grid-row: 1; height: 56vw; margin: 0 0 8px; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
  .soins-tete { grid-column: 1; grid-row: 2; padding: 0 var(--gouttiere); }
  .soins-lignes { grid-column: 1; grid-row: 3; padding: 0 var(--gouttiere); }
  .venir-infos { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .venir-texte { margin-top: -60px; }
  .points--3, .chiffres { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .trois { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .trois figcaption, .trois figure:first-child figcaption { padding: 14px var(--gouttiere) 0; }
  .pied-haut { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  /* les bandes, au doigt : les étapes l'une sous l'autre ; une bande fine avec son titre, on touche, elle s'ouvre */
  .bande, .bande--une-legende { flex-direction: column; gap: 4px; padding-bottom: 0; }
  .volet, .volet.actif { flex: none; }
  .volet-photo { height: 64px; transition: height .6s var(--courbe); }
  .volet.actif .volet-photo { height: min(64vw, 340px); }
  .volet figcaption, .bande--une-legende figcaption, .volet:first-child figcaption { position: static; height: auto; min-height: 0; opacity: 1; padding: 10px var(--gouttiere) 12px !important; pointer-events: auto; }
  .volet figcaption b, .bande--une-legende figcaption b { padding: 0; font-size: 21px; margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .volet:not(.actif) figcaption b::after { content: "+"; font: 300 28px/1 var(--titre); color: var(--caramel); }
  .volet figcaption span, .bande--une-legende figcaption span { width: auto; padding: 0; display: none; margin-top: 4px; }
  .volet.actif figcaption span { display: block; opacity: 1; visibility: visible; }
  .parole-guillemet { position: static; display: block; height: .55em; margin: 0 0 4px; font-size: 2em; }
}
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .t1, .hero .t1 { font-size: clamp(38px, 10.4vw, 48px); }
  .t2 { font-size: clamp(30px, 8.4vw, 38px); }
  .btn { white-space: normal; text-align: left; }
  .minute { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 10px; }
  .minute-temps { font-size: 21px; }
  .soin-ligne { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 14px 0; }
  .points--2, .points--4 { grid-template-columns: minmax(0, 1fr); }
  .comparatif { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .comparatif > div, .comparatif .apres { padding: 0; border: 0; }
  .comparatif .apres { padding-top: 24px; border-top: 1px solid var(--pierre-fonce); }
  .etape-num { font-size: 40px; margin-bottom: 8px; }
  .faq summary { font-size: 19px; }
  .faq details > div { padding-right: 6px; }
  .pied-haut { grid-template-columns: minmax(0, 1fr); }
  .lettre { transform: none; }
  .aligneur-compte { font-size: 24px; }
  .conseils-tete { flex-direction: column; align-items: flex-start; }
}

/* Le portrait de la praticienne : visage dans le tiers haut sur ordinateur (cadre large), tête entière sur téléphone
   (cadre plus bas, moins de marge à recadrer). */
@media (max-width: 960px) { :root { --portrait-y: 34%; } }

/* Téléphone (29/10/2026) : la page ne devient jamais plus large que l'écran. Une photo inclinée,
   un décor animé ou une ouverture qui entre par le côté élargissait la page de quelques pixels
   (jusqu'à 100 px pendant l'ouverture de Ricochet) : elle glissait de côté et la barre du bas
   était coupée. « clip » ne crée pas de zone de défilement : les en-têtes collants restent collants.
   Le corps est aussi coupé, et devient le repère des éléments posés en absolu : sans lui, un élément
   ajouté après le chargement (une mouette) élargissait encore la page et la barre du bas. */
html { overflow-x: hidden; overflow-x: clip; }
body { overflow-x: clip; position: relative; }