/* =====================================================================================================================
   L'Atelier, cabinet dentaire imaginaire (site de démonstration) : la charte « carnet d'atelier ».
   Papier, encre, encre bleue, photos en tirages, notes à la main. Marcellus (titres), Alegreya Sans (texte),
   Reenie Beanie (notes). Source unique : outils/atelier.css, recopié dans styles.css par outils/construire.py
   (suivi des dessins au trait communs, commun/blog-illustrations.css).
   Animations : le contenu est visible par défaut ; les apparitions au défilement sont en CSS seul
   (animation-timeline: view()) et sans remplissage arrière (« forwards ») : une capture pleine page, un navigateur
   ancien ou « réduire les animations » montrent tout.
   ===================================================================================================================== */

@font-face { font-family: "Marcellus"; src: url("polices/Marcellus.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("polices/AlegreyaSans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("polices/AlegreyaSans-500.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("polices/AlegreyaSans-700.woff2") format("woff2"); font-weight: 700 800; font-display: swap; }
@font-face { font-family: "Reenie Beanie"; src: url("polices/ReenieBeanie.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* ============ JETONS ============ */
:root {
  --papier: #ECE9E4; --papier-2: #E3DFD8; --papier-3: #F3F1EC; --carte: #F8F7F4;
  --bande: rgba(214, 208, 199, .42);
  --encre: #2B2B2D; --texte: #3B3B3E; --texte-2: #5F5B56;
  --bleu: #34528F; --bleu-fonce: #2B4475; --bleu-clair: #A9BCE4; --bleu-lavis: #DDE4F1;
  --sombre: #2F2F32; --sur-sombre: #F3F1EC; --sur-sombre-2: #C9C4BC;
  --ligne: rgba(43, 43, 45, .14); --ligne-forte: rgba(43, 43, 45, .3);
  --ok: #3F7A55; --ko: #9C4A3C;
  --ombre-tirage: 0 1px 1px rgba(30, 28, 25, .06), 0 20px 36px -24px rgba(30, 28, 25, .55);
  --ombre-douce: 0 16px 34px -28px rgba(30, 28, 25, .5);
  --titre: "Marcellus", "Optima", Georgia, serif;
  --corps: "Alegreya Sans", "Gill Sans", system-ui, sans-serif;
  --main: "Reenie Beanie", "Bradley Hand", cursive;
  --entete: 76px;
  --courbe: cubic-bezier(.2, .7, .2, 1);
  --section-y: clamp(56px, 9vh, 112px);
  --bruit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --lignes-carnet: repeating-linear-gradient(180deg, transparent 0 31px, rgba(52, 82, 143, .075) 31px 32px);

  /* blog et fiches (moteur commun) */
  --bl-fond: #ECE9E4; --bl-fond-2: rgba(214, 208, 199, .42); --bl-surface: #F8F7F4;
  --bl-texte: #3B3B3E; --bl-texte-doux: #5F5B56; --bl-titre: #2B2B2D;
  --bl-accent: #34528F; --bl-accent-texte: #34528F; --bl-accent-doux: #DDE4F1; --bl-sur-accent: #F8F7F4;
  --bl-ligne: rgba(43, 43, 45, .16); --bl-alerte: #9C4A3C; --bl-alerte-doux: #F2E6E1; --bl-ok: #3F7A55;
  --bl-police-titre: "Marcellus", "Optima", Georgia, serif; --bl-police-texte: "Alegreya Sans", "Gill Sans", system-ui, sans-serif;
  --bl-graisse-titre: 400; --bl-em-style: normal;
  --bl-rayon: 3px; --bl-rayon-petit: 2px; --bl-ombre: 0 20px 36px -26px rgba(30, 28, 25, .5);
  --bl-largeur: 1240px; --bl-haut-entete: 76px; --bl-couv-rotation: 1.2deg;

  /* dessins au trait : crayon, papier, lavis bleu */
  --il-trait: #2B2B2D; --il-email: #FBFAF7; --il-dentine: #EDE6D9; --il-pulpe: #DCCFC6; --il-carie: #7A6A5C;
  --il-carie-pulpe: #B98A7E; --il-gencive: #E8DCD5; --il-gencive-rouge: #D4A99F; --il-tartre: #BDB291; --il-os: #E4DED2;
  --il-os-trait: #9A9184; --il-accent: #34528F; --il-accent-texte: #34528F; --il-doux: #DDE4F1; --il-metal: #CBC8C2;
  --il-metal-clair: #E6E3DE; --il-metal-fonce: #77736C; --il-texte: #3B3B3E; --il-fond: #F8F7F4; --il-ligne: rgba(43, 43, 45, .2);
}

/* ============ BASE ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; color: var(--texte); font: 400 18px/1.65 var(--corps); -webkit-font-smoothing: antialiased; overflow-x: clip;
  background-color: var(--papier);
  background-image: linear-gradient(rgba(236, 233, 228, .8), rgba(236, 233, 228, .8)), var(--bruit); background-size: auto, 260px;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
picture { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; }
blockquote, figure { margin: 0; }
.int { width: min(1240px, 100% - 48px); margin-inline: auto; }
.evitement { position: absolute; left: -9999px; top: 8px; z-index: 999; background: var(--encre); color: #fff; padding: 10px 16px; border-radius: 4px; }
.evitement:focus { left: 12px; }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; }

.t1, .t2, .t3 { font-family: var(--titre); font-weight: 400; color: var(--encre); letter-spacing: -.005em; text-wrap: balance; }
.t1 { font-size: clamp(40px, min(5.2vw, 8vh), 78px); line-height: 1.04; }
.t2 { font-size: clamp(30px, min(3.4vw, 6vh), 50px); line-height: 1.08; }
.t3 { font-size: clamp(20px, 1.6vw, 24px); line-height: 1.2; }
.t4 { font: 700 13px/1.2 var(--corps); letter-spacing: .12em; text-transform: uppercase; color: var(--texte-2); }
.t1 em, .t2 em, .t3 em { font-style: normal; color: var(--bleu); }
.surtitre { display: inline-block; font: 400 30px/1 var(--main); color: var(--bleu); transform: rotate(-2deg); transform-origin: 0 50%; margin: 0 0 12px; }
.chapo { font-size: clamp(18px, 1.35vw, 20px); line-height: 1.6; color: var(--texte); max-width: 620px; }
.note-main { font: 400 28px/1.05 var(--main); color: var(--bleu); }
.liens-doubles { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; }

/* ============ BOUTONS ============ */
/* Les boutons sont des pilules (seule forme arrondie du site) ; plus de rond à flèche dedans (retour de l'équipe, 07/10). */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 6px 28px; border-radius: 999px; font: 500 17px/1.1 var(--corps);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), background-color .3s, color .3s, border-color .3s; white-space: nowrap; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:active { transform: translateY(1px); }
.btn--plein { background: var(--encre); color: var(--papier-3); }
.btn--plein:hover { background: #1F1F21; transform: translateY(-2px); }
.btn--contour { border: 1px solid var(--encre); padding: 6px 22px; color: var(--encre); }
.btn--contour:hover { background: rgba(255, 255, 255, .45); transform: translateY(-2px); }
.btn--contour svg { margin-left: -4px; }
.btn--clair { background: var(--papier-3); color: var(--encre); }
.btn--clair:hover { transform: translateY(-2px); background: #fff; }
.btn--petit { min-height: 44px; font-size: 16px; padding: 6px 20px; }
.btn--contour.btn--petit { padding: 6px 16px; }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.lien-fleche { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--bleu); background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 2px; transition: background-size .4s cubic-bezier(.2, .7, .2, 1); }
.lien-fleche svg { width: 18px; height: 18px; transition: transform .3s; }
.lien-fleche:hover { background-size: 100% 1px; }
.lien-fleche:hover svg { transform: translateX(4px); }

/* La table des matières du carnet : ce qui se clique.
   Une ligne cliquable porte le petit croquis de son sujet ; au survol, le croquis se redessine trait par trait (on
   dessine avant de soigner), le titre passe à l'encre bleue, la petite flèche tracée à l'encre se repasse et avance.
   Les liens courts (.lien-encre) ont un trait bleu tracé à la main dessous, fixe, comme un mot souligné au stylo. */
.souligne { padding-bottom: .16em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M1.5 6.6C34 3.2 71 7.9 108 5.3S170 3.4 198.5 6' fill='none' stroke='%2334528F' stroke-width='1.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 100% / 100% .34em; }
.fleche-encre { width: 38px; height: 17px; flex: none; overflow: visible; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.fleche-encre path { fill: none; stroke: var(--bleu); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
a:hover .fleche-encre, a:focus-visible .fleche-encre, button:hover .fleche-encre { transform: translateX(6px); }
.ligne-croquis { display: block; flex: none; width: 40px; height: 40px; color: var(--encre); }
.ligne-croquis svg { width: 100%; height: 100%; }
.ligne-croquis path, .ligne-croquis circle, .ligne-croquis rect { stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  a:hover .fleche-encre path, a:focus-visible .fleche-encre path, button:hover .fleche-encre path { animation: trace .5s cubic-bezier(.6, 0, .2, 1); }
  a:hover .fleche-encre path + path, button:hover .fleche-encre path + path { animation-delay: .16s; animation-fill-mode: backwards; }
  a:hover .ligne-croquis .ic-trait > *, a:focus-visible .ligne-croquis .ic-trait > * { animation: trace .9s cubic-bezier(.5, 0, .2, 1); }
  a:hover .ligne-croquis .ic-repasse > *, a:focus-visible .ligne-croquis .ic-repasse > * { animation: trace .9s .35s cubic-bezier(.5, 0, .2, 1) backwards; }
}
.lien-encre { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; color: var(--encre); }
.lien-encre:hover { color: var(--bleu); }
.lien-encre--clair { color: #fff; }
.lien-encre--clair:hover { color: var(--bleu-clair); }
.lien-encre--clair .fleche-encre path { stroke: var(--bleu-clair); }
.lien-encre--clair .souligne { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M1.5 6.6C34 3.2 71 7.9 108 5.3S170 3.4 198.5 6' fill='none' stroke='%23A9BCE4' stroke-width='1.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.liens-doubles .lien-encre { font-size: 16.5px; }

/* ============ STATUT OUVERT / FERMÉ ============ */
.statut { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--texte-2); margin: 0; }
.statut i { width: 9px; height: 9px; border-radius: 50%; background: #A7A29A; flex: none; position: relative; }
.statut.ouvert i { background: var(--ok); }
.statut.ouvert i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--ok); opacity: 0; animation: pouls 2.4s infinite; }
.statut.ouvert b { color: var(--ok); }
.statut.ferme i { background: var(--ko); }
.statut b { font-weight: 600; }
.statut--grand { font-size: 15.5px; background: var(--carte); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--ligne); margin: 2px 0 16px; }
@keyframes pouls { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.8); opacity: 0; } }

/* ============ PAPIER : tirages, scotch, feuilles ============ */
.scotch { position: absolute; top: -13px; left: 50%; width: 96px; height: 26px; translate: -50% 0; rotate: -3deg; z-index: 2;
  background: rgba(226, 220, 204, .72); box-shadow: 0 1px 2px rgba(30, 28, 25, .1);
  clip-path: polygon(2% 0, 100% 6%, 97% 50%, 100% 96%, 0 100%, 3% 50%); pointer-events: none; }
.tirage { margin: 0; position: relative; }
.tirage-papier { position: relative; background: var(--carte); padding: 10px 10px 0; box-shadow: var(--ombre-tirage); transform: rotate(var(--r, 0deg));
  transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.tirage-papier picture, .tirage-papier img { width: 100%; }
.tirage-papier img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; }
.tirage figcaption { font: 400 27px/1.05 var(--main); color: var(--bleu); padding: 10px 6px 12px; text-align: center; }
.tirage--paysage .tirage-papier img { aspect-ratio: 3 / 2; object-position: 50% 50%; }
.feuille { position: relative; margin: 0; background-color: var(--carte); background-image: var(--lignes-carnet); border: 1px solid var(--ligne); box-shadow: var(--ombre-douce);
  padding: clamp(18px, 2.4vw, 30px); }
.feuille figcaption { font-size: 15.5px; color: var(--texte-2); margin-top: 14px; text-align: center; line-height: 1.45; }
.feuille .il { margin-inline: auto; }

/* croquis à la main (traits du carnet) */
.croquis-dessin { overflow: visible; }
.croquis-dessin path { fill: none; stroke: var(--encre); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.croquis-dessin .fin { stroke-width: 1.2; opacity: .55; }
.croquis-dessin .bleu { stroke: var(--bleu); stroke-width: 2.1; }
.fleche-main { width: 70px; height: 40px; flex: none; overflow: visible; }
.fleche-main path { fill: none; stroke: var(--bleu); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic-crayon { overflow: visible; }
.ic-crayon .ic-trait { stroke-width: 1.35; }
.ic-crayon .ic-repasse { stroke-width: .8; opacity: .45; }

/* ============ EN-TÊTE ============ */
.entete { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--entete); display: flex; align-items: center;
  transition: background-color .35s, box-shadow .35s; view-transition-name: entete; }
.entete--solide { background: rgba(236, 233, 228, .9); -webkit-backdrop-filter: saturate(1.2) blur(12px); backdrop-filter: saturate(1.2) blur(12px); box-shadow: 0 1px 0 var(--ligne); }
.entete-int { display: flex; align-items: center; gap: 26px; }
.logo { display: flex; align-items: baseline; gap: 12px; flex: none; }
.logo-nom { font: 400 19px/1 var(--titre); letter-spacing: .22em; text-transform: uppercase; color: var(--encre); }
.logo-sous { font: 400 25px/1 var(--main); color: var(--bleu); transform: rotate(-3deg); }
.menu { display: flex; gap: 2px; margin-left: auto; }
.menu a { position: relative; padding: 10px 12px; font-size: 17px; color: var(--encre); }
.menu a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.menu a:hover::after, .menu a[aria-current]::after { transform: scaleX(1); }
.menu a[aria-current] { color: var(--bleu); }
.entete-actions { display: flex; align-items: center; gap: 10px; }
.entete-tel svg { width: 18px; height: 18px; }
.burger { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--ligne-forte); position: relative; }
.burger i { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--encre); transition: transform .3s, opacity .3s; }
.burger i:nth-child(1) { top: 16px; } .burger i:nth-child(2) { top: 22px; } .burger i:nth-child(3) { top: 28px; }
.burger.ouvert i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.ouvert i:nth-child(2) { opacity: 0; }
.burger.ouvert i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.menu-mobile { position: fixed; inset: 0; z-index: 90; background: var(--papier); padding: 96px 24px 120px; overflow-y: auto; transform: translateY(-102%); visibility: hidden;
  transition: transform .5s cubic-bezier(.7, 0, .2, 1), visibility 0s .5s; }
.menu-mobile.ouvert { transform: none; visibility: visible; transition: transform .5s cubic-bezier(.7, 0, .2, 1); }
.menu-mobile nav a { display: block; font: 400 29px/1.2 var(--titre); color: var(--encre); padding: 10px 0; border-bottom: 1px solid var(--ligne); }
.menu-mobile-note { margin: 26px 0 4px; font: 400 26px/1.1 var(--main); color: var(--bleu); }
.menu-mobile-adresse { margin: 0 0 22px; color: var(--texte-2); }
.menu-mobile-adresse a { color: var(--encre); font-weight: 700; }

/* ============ OUVERTURE : la page du carnet se tourne (transform et opacity seulement) ============ */
#ouverture { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; pointer-events: none;
  background-color: var(--papier); background-image: linear-gradient(rgba(236, 233, 228, .8), rgba(236, 233, 228, .8)), var(--bruit); background-size: auto, 260px;
  transition: transform .55s cubic-bezier(.7, 0, .25, 1), opacity .55s; }
html.sans-ouverture #ouverture { display: none; }
html.ouverture-finie #ouverture { transform: translateY(-104%); }
html.avec-ouverture #ouverture { animation: filet-ouverture .01s 6s forwards; }
@keyframes filet-ouverture { to { opacity: 0; visibility: hidden; } }
.ouv { text-align: center; width: min(560px, 84vw); }
.ouv-mot { font: 400 clamp(30px, 5vw, 56px)/1 var(--titre); letter-spacing: .24em; text-transform: uppercase; color: var(--encre); margin: 0 0 6px; padding-left: .24em;
  opacity: 0; animation: ouv-monte .7s .1s cubic-bezier(.2, .7, .2, 1) forwards; }
.ouv-trait { overflow: hidden; transform: translateX(-100%); animation: ouv-volet 1.1s .35s cubic-bezier(.6, 0, .25, 1) forwards; }
.ouv-trait-in { transform: translateX(100%); animation: ouv-volet 1.1s .35s cubic-bezier(.6, 0, .25, 1) forwards; }
.ouv-trait svg { width: 100%; height: auto; overflow: visible; }
.ouv-ligne { fill: none; stroke: var(--encre); stroke-width: 2.2; stroke-linecap: round; opacity: .85; }
.ouv-ligne--fine { stroke-width: 1.2; opacity: .5; }
.ouv-bleu { fill: none; stroke: var(--bleu); stroke-width: 1.8; stroke-linecap: round; }
.ouv-main { font: 400 clamp(26px, 3.2vw, 38px)/1 var(--main); color: var(--bleu); margin: 4px 0 0; transform: rotate(-3deg); opacity: 0; animation: ouv-monte .6s 1.25s forwards; }
@keyframes ouv-monte { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; } }
@keyframes ouv-volet { to { transform: none; } }

/* ============ PREMIER ÉCRAN ============
   Texte à gauche ; un seul grand tirage, celui du lieu (la salle d'attente sous la verrière), scotché et légèrement
   de travers, qui déborde du bord droit de la fenêtre comme une photo glissée dans le carnet. Le croquis posé dessus
   s'efface : le croquis devient photo. Plus d'étiquettes ni de petit tirage posés dessus. */
.hero { position: relative; display: flex; align-items: center; min-height: clamp(620px, calc(100svh - var(--entete)), 1000px); overflow: hidden;
  padding: calc(var(--entete) + clamp(20px, 4vh, 48px)) 0 clamp(40px, 7vh, 72px); }
.hero-int { position: relative; z-index: 2; }
.hero-texte { max-width: min(560px, 38vw); }
.hero-titre { max-width: 11.5ch; }
.croquis { position: relative; width: min(100%, 480px); margin: 0 0 clamp(16px, 2.6vh, 26px); }
.croquis svg { width: 100%; height: auto; overflow: visible; }
.croquis path { fill: none; stroke: var(--encre); stroke-width: 2.2; stroke-linecap: round; opacity: .8; }
.croquis .croquis-fin { stroke-width: 1.2; opacity: .5; }
.croquis .croquis-bleu { stroke: var(--bleu); stroke-width: 1.8; opacity: .95; }
.croquis-note { position: absolute; right: 2%; bottom: -16px; font: 400 clamp(25px, 2.2vw, 32px)/.9 var(--main); color: var(--bleu); transform: rotate(-4deg); }
.hero-chapo { font-size: clamp(18px, 1.45vw, 21px); max-width: 30em; margin: 0 0 clamp(18px, 3vh, 30px); }
.hero-action { margin: 0; }
.hero-tirage { position: absolute; top: calc(var(--entete) + clamp(18px, 4vh, 44px)); bottom: clamp(30px, 6vh, 64px); right: -6vw; width: 62vw; margin: 0; }
.hero-tirage-papier { position: relative; height: 100%; display: flex; flex-direction: column; background: var(--carte); padding: 14px 14px 0;
  box-shadow: var(--ombre-tirage); --r: -1.3deg; transform: rotate(var(--r)); }
.hero-tirage .scotch { left: 12%; translate: 0 0; }
.hero-photo-image { position: relative; flex: 1; min-height: 0; overflow: hidden; isolation: isolate; background: #fff; }
.hero-photo-image picture, .hero-photo-image img { width: 100%; height: 100%; }
.hero-photo-image img { object-fit: cover; object-position: 30% 50%; }
.hero-tirage figcaption { font: 400 clamp(25px, 2.1vw, 31px)/1 var(--main); color: var(--bleu); padding: 10px 6px 12px 18px; }
.calque-croquis { position: absolute; inset: 0; mix-blend-mode: color-dodge; pointer-events: none; opacity: 0; visibility: hidden; }
.calque-croquis img { filter: invert(1) blur(5px); }
@media (prefers-reduced-motion: no-preference) {
  .croquis path { stroke-dasharray: 1; animation: trace 1.6s .35s cubic-bezier(.6, 0, .2, 1) both; }
  .croquis .croquis-fin { animation-delay: .6s; }
  .croquis .croquis-bleu { animation: trace .8s 1.6s ease-out both; }
  .croquis-note { animation: note 1s 2s cubic-bezier(.2, .7, .2, 1) both; }
  .calque-croquis { animation: developpe 2.6s 1.2s cubic-bezier(.45, 0, .25, 1) both; }
  .hero-tirage-papier { animation: pose-hero 1.2s .1s cubic-bezier(.2, .8, .2, 1) both; }
  html.avec-ouverture .croquis path { animation-delay: 2.35s; }
  html.avec-ouverture .croquis .croquis-fin { animation-delay: 2.6s; }
  html.avec-ouverture .croquis .croquis-bleu { animation-delay: 3.5s; }
  html.avec-ouverture .croquis-note { animation-delay: 3.9s; }
  html.avec-ouverture .calque-croquis { animation-delay: 3.1s; }
  html.avec-ouverture .hero-tirage-papier { animation-delay: 2.05s; }
}
@keyframes trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes developpe { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }
@keyframes pose-hero { from { transform: translate(10px, -34px) rotate(var(--r0, -5deg)) scale(1.02); } to { transform: rotate(var(--r, 0deg)); } }
@keyframes note { from { transform: translateY(8px) rotate(-4deg); clip-path: inset(0 100% 0 0); } to { transform: rotate(-4deg); clip-path: inset(0 0 0 0); } }

/* ============ PARTIES ============ */
.section { padding: var(--section-y) 0; }
.section-tete { max-width: 780px; margin-bottom: clamp(26px, 4.4vh, 48px); }
.section-tete .chapo { margin: 14px 0 0; }
.section-tete--centre { text-align: center; margin-inline: auto; }
.section-tete .liens-doubles { margin-top: 16px; }
.int--large { width: min(1360px, 100% - 48px); }

/* ouverture d'un chapitre du carnet (écouter, dessiner, soigner) : le croquis se trace au défilement, le verbe à la main */
.chapitre { display: flex; align-items: flex-end; gap: 12px; margin: 0 0 12px -6px; }
.chapitre .croquis-dessin { width: 92px; height: auto; }
.chapitre-verbe { font: 400 44px/1 var(--main); color: var(--bleu); transform: rotate(-3deg); transform-origin: 0 100%; margin-bottom: 4px; }

/* chapitre « dessiner » : les mains qui tracent la ligne du sourire, collées au bord gauche, et la table des matières */
.section--soins-carnet { position: relative; }
.photo-bord { margin: 0; display: flex; flex-direction: column; }
.photo-bord picture { flex: 1; min-height: 0; }
.photo-bord picture, .photo-bord img { width: 100%; height: 100%; }
.photo-bord img { object-fit: cover; }
.photo-bord--gauche picture { -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 30%); mask-image: linear-gradient(270deg, transparent 0, #000 30%); }
.photo-bord--droite picture { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); }
.photo-bord figcaption { padding: 10px 24px 0; transform: rotate(-1.5deg); }
.photo-bord--droite figcaption { text-align: right; padding-right: clamp(20px, 3vw, 44px); }
.soins-photo { position: absolute; left: 0; top: var(--section-y); bottom: var(--section-y); width: 44vw; }
.soins-photo img { object-position: 60% 50%; }
.soins-carnet-int { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.soins-carnet-texte { grid-column: 2; }
.soins-carnet-tete .t2 { margin-bottom: clamp(18px, 3vh, 30px); }
.liste-soins { border-top: 1px solid var(--ligne-forte); }
.ligne-soin { display: flex; align-items: center; gap: 16px; padding: 10px 2px 10px 0; border-bottom: 1px solid var(--ligne); color: var(--encre); }
.ligne-soin-titre { font: 400 clamp(21px, 1.75vw, 25px)/1.2 var(--titre); transition: color .3s; flex: none; }
.ligne-soin .points { flex: 1; min-width: 24px; align-self: flex-end; margin-bottom: 14px; border-bottom: 2px dotted rgba(43, 43, 45, .28); }
.ligne-qui { font: 400 24px/1 var(--main); color: var(--bleu); white-space: nowrap; }
.ligne-soin:hover .ligne-soin-titre, .ligne-soin:focus-visible .ligne-soin-titre { color: var(--bleu); }
.ligne-soin .ligne-croquis { width: 36px; height: 36px; }
.ligne-soin-urgence .ligne-soin-titre { font-family: var(--corps); font-weight: 700; font-size: 19px; }
.ligne-soin-urgence .ligne-croquis { color: var(--bleu); }
.soins-carnet-texte .liens-doubles { margin-top: 18px; }

/* le prix, avant de commencer : le devis écrit sur une feuille de carnet */
.prix { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.prix-texte p { margin: 18px 0 24px; max-width: 32em; }
.feuille--prix { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 6px 32px; padding: clamp(28px, 3.4vw, 44px) clamp(28px, 3.4vw, 48px) 26px; transform: rotate(-.8deg); }
.feuille--prix .croquis-dessin { width: 116px; height: auto; grid-row: span 2; align-self: start; }
.prix-liste li { display: flex; gap: 12px; align-items: flex-start; padding: 7px 0; font-size: 18px; line-height: 1.45; color: var(--texte); }
.prix-liste b { color: var(--encre); font-weight: 700; }
.prix-liste svg { width: 22px; height: 22px; flex: none; color: var(--bleu); margin-top: 3px; }
.prix-note { grid-column: 2; text-align: right; margin: 8px 0 0; transform: rotate(-2deg); }

/* chapitre « soigner » : la bande photo bord à bord, fondue dans le papier à droite, une phrase écrite à la main */
.bande { position: relative; height: clamp(440px, 74svh, 760px); overflow: hidden; background: var(--papier-2); }
.bande-photo, .bande-photo picture, .bande-photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bande-photo img { object-fit: cover; object-position: 26% 42%; }
.bande::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 40%, rgba(236, 233, 228, .78) 62%, var(--papier) 84%); }
.bande-texte { position: absolute; z-index: 2; top: 50%; right: max(24px, (100% - 1240px) / 2); width: min(440px, 32vw); transform: translateY(-50%); }
.bande-phrase { font: 400 clamp(42px, 4.1vw, 62px)/1 var(--main); color: var(--bleu); transform: rotate(-3deg); margin: 0; }

/* chapitre « soigner » : trois praticiens au travail, des tirages (les gens) */
.travail-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 40px; margin-bottom: clamp(28px, 4.4vh, 48px); }
.travail-tete .t2 { margin: 0; }

/* le lieu : la planche de tirages, volet qui se retire au défilement */
.section--lieu { background: var(--bande); }
.planche { position: relative; display: grid; grid-template-columns: .8fr 1.35fr 1fr; grid-template-rows: clamp(340px, 52vh, 520px); gap: clamp(18px, 2vw, 30px); }
.planche--2 { grid-template-columns: .8fr 1.35fr; }
.planche--1 { grid-template-columns: minmax(0, 1fr); }
.planche figure { margin: 0; min-width: 0; min-height: 0; }
.planche-papier { height: 100%; display: flex; flex-direction: column; background: var(--carte); padding: 10px 10px 0; box-shadow: var(--ombre-tirage); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.planche figure:nth-child(odd) .planche-papier { transform: rotate(-.7deg); }
.planche figure:nth-child(even) .planche-papier { transform: rotate(.6deg); }
.planche figure:hover .planche-papier { transform: rotate(0) translateY(-4px); }
.planche-photo { position: relative; flex: 1; min-height: 0; overflow: hidden; display: block; }
.planche-photo picture, .planche-photo img { width: 100%; height: 100%; }
.planche-photo img { object-fit: cover; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.planche figure:hover .planche-photo img { transform: scale(1.04); }
.planche-photo::after { content: ""; position: absolute; inset: 0; background: var(--papier-2); transform-origin: 50% 0; pointer-events: none; }
.planche figcaption { font: 400 27px/1 var(--main); color: var(--bleu); padding: 7px 4px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planche-1 .planche-photo img { object-position: 50% 60%; }
.planche-note { position: absolute; right: -6px; top: -64px; display: flex; align-items: flex-end; gap: 4px; margin: 0; transform: rotate(-4deg); }
.planche-note .fleche-main { transform: scaleY(-1) rotate(-14deg); width: 58px; margin-bottom: -26px; }

/* l'équipe : trois tirages */
.tirages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.6vw, 56px); }
.tirage-lien { display: block; min-width: 0; }
.tirage--travail .tirage-papier img { aspect-ratio: 3 / 2.1; object-position: 50% 40%; }
.tirage-lien:hover .tirage-papier { transform: rotate(0deg) translateY(-6px); }
.tirage-nom { display: block; margin-top: 18px; text-align: center; }
.tirage-nom b { display: block; font: 400 22px/1.2 var(--titre); color: var(--encre); }
.tirage-nom small { display: block; color: var(--texte-2); font-size: 16px; }

/* première visite (accueil) : partie sombre, étapes « 01 » en chiffres fins */
.section--etapes { color: var(--sur-sombre-2); background-color: var(--sombre);
  background-image: linear-gradient(rgba(47, 47, 50, .95), rgba(47, 47, 50, .95)), var(--bruit); background-size: auto, 260px; }
.section--etapes .t2, .section--etapes .t3 { color: #fff; }
.section--etapes .t2 em { color: var(--bleu-clair); }
.section--etapes .surtitre, .section--etapes .chapitre-verbe { color: var(--bleu-clair); }
.section--etapes .chapitre .croquis-dessin path { stroke: var(--sur-sombre); }
.section--etapes .chapitre .croquis-dessin .bleu { stroke: var(--bleu-clair); }
.etapes-tete .chapo { margin: 16px 0 22px; }
.section--etapes .chapo { color: var(--sur-sombre); }
.section--etapes .btn--contour { color: #fff; border-color: rgba(255, 255, 255, .45); margin-top: 8px; }
.section--etapes .btn--contour:hover { background: rgba(255, 255, 255, .08); }
.etapes-int { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 90px); align-items: start; }
.etapes li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 18px; padding: clamp(16px, 2.6vh, 24px) 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.etape-num { font: 400 clamp(46px, 4.4vw, 62px)/.9 var(--titre); color: var(--bleu-clair); letter-spacing: -.02em; }
.etape-tag { font: 400 23px/1 var(--main); color: var(--bleu-clair); margin: 0 0 4px; }
.etapes p:last-child { margin: 6px 0 0; }

/* colonnes sans boîte (honoraires, première visite) : un filet au-dessus, une icône tracée, pas de rond */
.remb-grille li, .main-cartes li { position: relative; padding: 18px 0 0; border-top: 1px solid var(--ligne-forte); display: flex; flex-direction: column; gap: 6px; }
.remb-grille i, .main-cartes i { width: 34px; height: 34px; display: block; color: var(--bleu); margin-bottom: 6px; }
.remb-grille i svg, .main-cartes i svg { width: 100%; height: 100%; }
.main-cartes b { font: 400 22px/1.2 var(--titre); color: var(--encre); }
.main-cartes span { font-size: 17px; color: var(--texte); line-height: 1.55; }

/* conseils (cartes du moteur commun) */
.bl-grille--accueil { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bl-grille--accueil .bl-carte .bl-couv--photo { aspect-ratio: 16 / 9; }
.bl-grille--accueil .bl-carte-chapo { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* « Lire » des cartes du moteur commun : la flèche tracée à l'encre du carnet */
.bl-carte-lire { color: var(--encre); font-weight: 700; }
.bl-carte-lire .bl-ic { display: none; }
.bl-carte-lire::after { content: ""; width: 34px; height: 15px; flex: none; transition: transform .45s cubic-bezier(.2, .7, .2, 1);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 20' fill='none' stroke='%2334528F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 11.4c8.8-2.4 19.4-2.7 34.2-1.5'/%3E%3Cpath d='M29.4 3.4c3.3 1.9 6.3 4.1 8.9 6.4-2.8 1.9-5.5 3.9-8.3 6.4'/%3E%3C/svg%3E") no-repeat center / contain; }
.bl-carte-lien:hover .bl-carte-lire::after { transform: translateX(6px); }
.bl-carte-lien:hover .bl-carte-titre { color: var(--bleu); }

/* infos pratiques : horaires, adresse, croquis du quartier */
.section--infos { background: var(--bande); }
.infos { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, .95fr) minmax(0, 1.3fr); gap: clamp(28px, 3.4vw, 52px); align-items: start; }
.infos-carte { padding: 18px 0 0; border-top: 1px solid var(--ligne-forte); }
.infos-carte .t3 { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.infos-carte .t3 svg { width: 24px; height: 24px; color: var(--bleu); }
.horaires { width: 100%; border-collapse: collapse; font-size: 16px; }
.horaires th, .horaires td { padding: 7px 8px; text-align: left; border-bottom: 1px solid var(--ligne); }
.horaires th { font-weight: 600; color: var(--encre); }
.horaires td { text-align: right; color: var(--texte); }
.horaires tr.aujourdhui { background: rgba(52, 82, 143, .08); }
.horaires tr.aujourdhui th { color: var(--bleu); }
.horaires tr.aujourdhui th::after { content: " · aujourd'hui"; font-weight: 400; font-size: 14px; }
.infos-adresse { margin: 0 0 4px; }
.infos-adresse b { display: block; font: 400 21px/1.25 var(--titre); color: var(--encre); }
.acces { display: grid; gap: 12px; margin: 16px 0; }
.acces li, .infos-langues { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.45; }
.acces i { width: 26px; height: 26px; flex: none; display: grid; place-items: center; color: var(--bleu); margin-top: 1px; }
.acces i svg { width: 22px; height: 22px; }
.acces b, .infos-langues b { display: block; color: var(--encre); font-size: 16.5px; }
.infos-langues { margin: 0; padding-top: 14px; border-top: 1px solid var(--ligne); }
.infos-langues svg { width: 26px; height: 26px; flex: none; padding: 2px; color: var(--bleu); }
.infos-plan { display: flex; }
.plan-croquis { width: 100%; display: flex; flex-direction: column; justify-content: center; padding: 18px 18px 12px; transform: rotate(.8deg); }
.plan-croquis svg { width: 100%; height: auto; }
.plan-croquis figcaption { font-size: 14px; margin-top: 4px; }
.pc-rue { fill: none; stroke: #2B2B2D; stroke-width: 10; stroke-linecap: round; opacity: .13; }
.pc-rue--fine { stroke-width: 6; opacity: .1; }
.pc-nom { font: 400 15px var(--corps); fill: #67635E; letter-spacing: .02em; }
.pc-metro { fill: #F8F7F4; stroke: #2B2B2D; stroke-width: 1.6; }
.pc-m { font: 700 15px var(--corps); fill: #2B2B2D; text-anchor: middle; }
.pc-station { font: 400 21px var(--titre); fill: #2B2B2D; }
.pc-lignes { font: 400 14px var(--corps); fill: #67635E; }
.pc-cour { fill: none; stroke: #2B2B2D; stroke-width: 1.4; stroke-dasharray: 4 4; }
.pc-ici { fill: var(--bleu); }
.pc-fleche { fill: none; stroke: var(--bleu); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pc-main { font: 400 31px var(--main); fill: var(--bleu); }

/* questions fréquentes : titre à gauche, questions à droite, bouton « + » rond */
.faq-int { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq-cote { position: sticky; top: calc(var(--entete) + 24px); }
.faq-aide { margin: 16px 0 18px; color: var(--texte-2); max-width: 26em; }
.faq { display: grid; gap: 10px; }
.faq details { background: rgba(248, 247, 244, .8); border: 1px solid var(--ligne); transition: box-shadow .35s, background-color .35s; }
.faq details[open] { background: var(--carte); box-shadow: var(--ombre-douce); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 18px 20px 18px 24px; cursor: pointer; font: 400 19px/1.35 var(--titre); color: var(--encre); }
.faq summary::-webkit-details-marker { display: none; }
.faq-plus { width: 30px; height: 30px; flex: none; display: grid; place-items: center; color: var(--bleu); transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.faq-plus svg { width: 24px; height: 24px; stroke-width: 1.5; }
.faq details[open] .faq-plus { transform: rotate(45deg); }
.faq summary:hover { color: var(--bleu); }
.faq-reponse { padding: 0 24px 20px; }
.faq-reponse p { margin: 0; }

/* quartiers : bandeau en vraie boucle */
.communes { padding: 8px 0 clamp(36px, 6vh, 64px); text-align: center; }
.communes-titre { font: 400 26px/1 var(--main); color: var(--bleu); margin: 0 0 6px; }
.bandeau { overflow: hidden; position: relative; }
.bandeau-piste { display: flex; width: max-content; animation: defile 90s linear infinite; }
.bandeau-groupe { display: flex; flex: none; }
.bandeau-groupe span { display: inline-flex; align-items: center; gap: 24px; padding-right: 24px; white-space: nowrap; }
.bandeau-groupe span::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ligne-forte); }
.bandeau--communes { font: 400 clamp(26px, 3vw, 40px)/1.3 var(--titre); color: var(--encre);
  -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.bandeau--communes span:nth-child(odd) { font-family: var(--main); color: var(--bleu); font-size: 1.12em; }
@keyframes defile { to { transform: translateX(-50%); } }

/* bande d'appel */
.section--appel { padding-top: clamp(20px, 4vh, 40px); }
.appel { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; color: var(--sur-sombre);
  background-color: var(--sombre); background-image: linear-gradient(rgba(47, 47, 50, .95), rgba(47, 47, 50, .95)), var(--bruit); background-size: auto, 260px;
  border-radius: 4px; padding: clamp(32px, 5vw, 60px); overflow: hidden; isolation: isolate; }
.appel::after { content: ""; position: absolute; left: -4%; right: 46%; bottom: 26px; height: 60px; z-index: -1; opacity: .16;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 130'%3E%3Cpath d='M8 24 C 118 104 384 124 632 16' fill='none' stroke='%23F3F1EC' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.appel .t2 { color: #fff; }
.appel .t2 em { color: var(--bleu-clair); }
.appel p { color: var(--sur-sombre-2); margin: 14px 0 24px; max-width: 30em; }
.appel .appel-tel { margin: 0; }
.appel-tels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.appel-tel { margin: 0; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13); padding: 15px 18px; transition: background-color .3s; min-width: 0; }
a.appel-tel:hover { background: rgba(255, 255, 255, .12); }
.appel-tel small { display: block; color: var(--sur-sombre-2); font: 400 22px/1 var(--main); margin-bottom: 4px; }
.appel-tel b { color: #fff; font: 400 19px/1.25 var(--titre); }
.appel-tel--statut .statut, .appel-tel--statut .statut b { color: #fff; }
.appel-tel--statut .statut.ouvert b { color: #9FD6B0; }

/* ============ PIED ============ */
.pied { color: var(--sur-sombre-2); padding: 72px 0 110px; margin-top: clamp(30px, 6vh, 60px); font-size: 16px;
  background-color: var(--sombre); background-image: linear-gradient(rgba(47, 47, 50, .96), rgba(47, 47, 50, .96)), var(--bruit); background-size: auto, 260px; }
.pied .logo-nom { color: #fff; }
.pied .logo-sous { color: var(--bleu-clair); }
.pied-haut { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding-bottom: 36px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.pied-phrase { max-width: 440px; margin: 0; color: var(--sur-sombre); }
.pied-main { display: block; font: 400 25px/1.1 var(--main); color: var(--bleu-clair); margin-top: 6px; }
.pied-colonnes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; padding: 36px 0; }
.pied-col p { margin: 0 0 8px; }
.pied-titre a { color: #fff; font: 400 20px/1.2 var(--titre); }
.pied-titre small { display: block; font: 400 22px/1.1 var(--main); color: var(--bleu-clair); }
.pied-col a:hover { color: #fff; }
.pied .statut { color: var(--sur-sombre-2); }
.pied .statut.ouvert b { color: #9FD6B0; }
.pied-horaires { display: grid; gap: 4px; font-size: 15px; }
.pied-horaires li { display: flex; justify-content: space-between; gap: 14px; }
.pied-horaires li span:last-child { color: var(--sur-sombre); }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .12); }
.pied-liens { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.pied-liens a:hover, .pied-liens a[aria-current] { color: #fff; }
.pied-note { margin: 0; font-size: 14.5px; }
.barre-mobile { display: none; }

/* ============ PAGES INTÉRIEURES : en-tête ============ */
.page-tete { padding: calc(var(--entete) + clamp(18px, 4.5vh, 50px)) 0 clamp(30px, 6vh, 64px); position: relative; }
.page-tete-int { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.page-tete--seule .page-tete-int { grid-template-columns: minmax(0, 1fr); max-width: 900px; margin-inline: 0; }
.page-tete--seule .int.page-tete-int { margin-left: max(24px, (100% - 1240px) / 2); }
.page-tete .t1 { font-size: clamp(36px, min(4.3vw, 7.4vh), 64px); }
.page-tete .chapo { margin: 18px 0 24px; }
.page-tete--court { padding-bottom: clamp(10px, 2vh, 20px); }
.page-action { margin: 0; }
/* en-tête avec une photo sans cadre collée au bord droit, fondue à gauche (pages de soins, Soins, Première visite) */
.page-tete--bord { display: flex; align-items: center; min-height: clamp(540px, 76svh, 780px); }
.page-tete--bord .page-tete-int { grid-template-columns: minmax(0, 1fr); }
.page-tete--bord .page-tete-texte { max-width: min(600px, 44vw); }
.page-tete--bord > .photo-bord { position: absolute; top: var(--entete); right: 0; bottom: clamp(18px, 3vh, 32px); width: 54vw; }
.fil { display: flex; flex-wrap: wrap; gap: 8px; font-size: 15px; color: var(--texte-2); margin-bottom: 18px; }
.fil a::after { content: "/"; margin-left: 8px; opacity: .5; }
.fil a:hover { color: var(--encre); }
.page-visuel { width: 100%; max-width: 560px; justify-self: center; position: relative; }
.tirage--page .tirage-papier { padding: 12px 12px 0; }
.tirage--page img { aspect-ratio: 4 / 3; max-height: min(52vh, 460px); object-position: 50% 50%; }
.tirage--page.tirage--portrait img { aspect-ratio: 4 / 4.6; object-position: 50% 62%; }
.tirage--page figcaption { text-align: right; padding-right: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .tirage--page .tirage-papier { animation: pose-hero 1.15s .1s cubic-bezier(.2, .8, .2, 1) both; }
  .eventail a { animation: eventail .9s cubic-bezier(.2, .8, .2, 1) both; }
  .eventail a:nth-child(2) { animation-delay: .12s; }
  .eventail a:nth-child(3) { animation-delay: .24s; }
}
@keyframes eventail { from { translate: 0 -30px; rotate: -8deg; } }
.feuille--devis figcaption.note-main { font: 400 28px/1.05 var(--main); color: var(--bleu); text-align: right; margin-top: 8px; }
.feuille--devis { max-width: 400px; margin-inline: auto; transform: rotate(-1.4deg); }
.feuille--devis .croquis-dessin { width: 100%; height: auto; max-height: 44vh; }

/* l'éventail des trois praticiens (en-tête de l'équipe) */
.eventail { position: relative; height: clamp(300px, 46vh, 430px); }
.eventail a { position: absolute; top: 9%; width: 42%; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.eventail-1 { left: 0; transform: rotate(-7deg); }
.eventail-2 { left: 29%; top: 0 !important; z-index: 2; transform: rotate(1.5deg); }
.eventail-3 { left: 58%; transform: rotate(6deg); }
.eventail a:hover { transform: rotate(0) translateY(-10px); z-index: 3; }
.eventail-papier { display: block; background: var(--carte); padding: 8px 8px 0; box-shadow: var(--ombre-tirage); }
.eventail img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; }
.eventail small { display: block; font: 400 25px/1 var(--main); color: var(--bleu); text-align: center; padding: 8px 0 10px; }

/* ============ LE CABINET ============ */
.histoire { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(36px, 6vw, 90px); align-items: center; }
.histoire-texte .t2 { margin-bottom: 18px; }
.histoire-texte > p:not(.surtitre) { max-width: 36em; }
.frise { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin-top: 26px; border-top: 1px solid var(--ligne-forte); }
.frise li { position: relative; padding: 18px 12px 0 0; }
.frise li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--papier); border: 1.5px solid var(--bleu); }
.frise-annee { display: block; font: 400 26px/1 var(--titre); color: var(--encre); margin-bottom: 6px; }
.frise p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--texte-2); }
.histoire-visuel { position: relative; padding-bottom: 36px; }
.histoire-visuel .tirage { max-width: 440px; margin-inline: auto; }
.tirage--grand .tirage-papier img { aspect-ratio: 4 / 5; max-height: min(60vh, 520px); }
.histoire-visuel .tirage-papier img { aspect-ratio: 4 / 4.4; object-position: 62% 50%; }
.histoire-note { position: absolute; left: -2%; bottom: -6px; max-width: 250px; transform: rotate(-4deg); margin: 0; }
.section--plateau { background: var(--bande); }
.section--plateau { position: relative; }
.section--plateau > .photo-bord { position: absolute; left: 0; top: 0; bottom: 0; width: 46vw; }
.plateau-int { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.plateau-texte { grid-column: 2; }
.equipements li { padding: 14px 0; border-top: 1px solid var(--ligne-forte); }
.equipements b { font: 400 20px/1.25 var(--titre); color: var(--encre); }
.equipements p { margin: 4px 0 0; font-size: 16.5px; }

/* ============ SOINS (index) ============ */
.index-soins { border-top: 1px solid var(--ligne-forte); }
.index-soin { display: grid; grid-template-columns: 48px minmax(0, 1fr) 210px 44px; gap: 26px; align-items: center; padding: 22px 0;
  border-bottom: 1px solid var(--ligne-forte); color: var(--encre); }
.index-soin .ligne-croquis { width: 46px; height: 46px; }
.index-texte b { display: inline; font-size: clamp(24px, 2.2vw, 30px); transition: color .3s; }
.index-texte span { color: var(--texte-2); font-size: 17px; display: block; max-width: 640px; margin-top: 4px; }
.index-ou { font: 400 25px/1.05 var(--main); color: var(--bleu); }
.index-soin:hover .index-texte b, .index-soin:focus-visible .index-texte b { color: var(--bleu); }
/* « un seul fil » : le schéma commun en grand, sur sa feuille, avec sa note en marge */
.fil-int { display: grid; grid-template-columns: minmax(0, 3.6fr) minmax(0, 8.4fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.fil-texte { padding-left: max(0px, (100vw - 1240px) / 2 - (100vw - 1360px) / 2); }
.fil-texte .t2 { margin-bottom: 18px; }
.fil-note { display: flex; align-items: flex-end; gap: 6px; margin: 26px 0 0; transform: rotate(-3deg); }
.fil-note .fleche-main { transform: rotate(-20deg); margin-bottom: -14px; }
.feuille--fil { padding: clamp(24px, 2.8vw, 40px); transform: rotate(.6deg); }
.section--index { padding-top: 0; }
.section--index .index-soin { padding: 16px 0; }
@media (min-width: 1181px) {
  .index-texte { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 22px; }
  .index-texte span { margin-top: 0; }
}
.section--lieu .section-tete { max-width: none; }
.lieu-chapo { max-width: none !important; }
.lieu-chapo .lien-encre { margin-left: 10px; }
.section--tarifs-notes { background: var(--bande); padding-top: 0; }
.soins-aussi { margin: 22px 0 0; color: var(--texte-2); }
.soins-aussi b { color: var(--encre); }
.section--qui { background: var(--bande); }
.qui-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.qui { display: flex; align-items: center; gap: 18px; padding: 18px 0 0; border-top: 1px solid var(--ligne-forte); min-width: 0; }
.qui:hover b { color: var(--bleu); }
.qui img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.qui b { display: block; font: 400 20px/1.2 var(--titre); color: var(--encre); }
.qui small { display: block; color: var(--texte-2); font-size: 15.5px; }
.qui-soins { display: block; font: 400 22px/1.05 var(--main); color: var(--bleu); margin-top: 4px; }

/* ============ UNE PAGE DE SOIN ============ */
.essentiel-int { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4.6fr); gap: clamp(36px, 5vw, 90px); align-items: center; }
.essentiel .t2 { margin-bottom: 20px; }
.essentiel ul { display: grid; gap: 4px; border-top: 1px solid var(--ligne-forte); }
.essentiel li { display: flex; gap: 14px; align-items: flex-start; color: var(--encre); font-weight: 500; font-size: 18.5px; line-height: 1.5; padding: 12px 0; border-bottom: 1px solid var(--ligne); }
.essentiel li svg { width: 23px; height: 23px; flex: none; color: var(--bleu); margin-top: 3px; }
.soin-qui { color: var(--sur-sombre-2); padding: clamp(24px, 2.6vw, 34px);
  background-color: var(--sombre); background-image: linear-gradient(rgba(47, 47, 50, .95), rgba(47, 47, 50, .95)), var(--bruit); background-size: auto, 260px; }
.soin-qui .t4 { color: var(--bleu-clair); margin-bottom: 10px; }
.ou-prats { display: grid; gap: 8px; margin-bottom: 14px; }
.ou-prat { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, .13); transition: background-color .25s; }
.ou-prat:hover { background: rgba(255, 255, 255, .07); }
.ou-prat img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.ou-prat b { display: block; color: #fff; font: 400 18px/1.2 var(--titre); }
.ou-prat small { display: block; font-size: 14.5px; margin-bottom: 3px; }
.ou-prat .semaine i { background: rgba(255, 255, 255, .07); color: var(--sur-sombre-2); }
.ou-prat .semaine i.oui { background: rgba(169, 188, 228, .26); color: #fff; }
.soin-prix { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; color: var(--sur-sombre); margin: 0 0 14px; }
.soin-prix svg { width: 20px; height: 20px; flex: none; color: var(--bleu-clair); margin-top: 2px; }
.soin-qui .btn { width: 100%; }
.soin-prix { font-size: 16.5px !important; }
/* le dessin du soin : en grand, sur une feuille de carnet, la note dans la marge (jamais dans une petite carte) */
.section--dessin { padding-top: 0; }
.dessin-int { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 960px); gap: clamp(24px, 3vw, 48px); align-items: center; justify-content: center; }
.dessin-marge { align-self: center; text-align: right; }
.dessin-marge .note-main { font-size: 32px; transform: rotate(-4deg); margin: 0 0 8px; }
.dessin-marge .fleche-main { margin-left: auto; transform: scaleY(-1) rotate(-12deg); }
.feuille--soin { padding: clamp(28px, 3vw, 44px) clamp(28px, 3.4vw, 52px) clamp(18px, 2vw, 26px); }
.feuille--soin figcaption { font-size: 17px; }
.ou-prats--trois { display: flex; flex-wrap: wrap; gap: 8px; }
.ou-prats--trois .ou-prat { grid-template-columns: 36px auto; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; }
.ou-prats--trois .ou-prat img { width: 36px; height: 36px; }
.ou-prats--trois .ou-prat b { font-size: 16.5px; }
.ou-presence { margin: -4px 0 14px; font-size: 15.5px; color: var(--sur-sombre); }
.feuille--soin .il, .feuille--fil .il { width: 100%; }
.semaine { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; }
.semaine i { font-style: normal; font-size: 13px; font-weight: 700; padding: 2px 7px; border-radius: 3px; background: rgba(43, 43, 45, .07); color: var(--texte-2); }
.semaine i:not(.oui) { text-decoration: line-through; text-decoration-color: rgba(43, 43, 45, .35); color: rgba(95, 91, 86, .75); }
.semaine i.oui { background: rgba(52, 82, 143, .12); color: var(--bleu); opacity: 1; }
.soin-parties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 64px); }
.soin-partie { display: grid; grid-template-columns: 58px minmax(0, 1fr); column-gap: 14px; align-content: start; padding: 24px 0; border-top: 1px solid var(--ligne-forte); }
.soin-partie--libre { grid-template-columns: minmax(0, 1fr); }
.soin-partie-num { grid-row: span 2; font: 400 clamp(34px, 3vw, 44px)/.9 var(--titre); color: var(--bleu); }
.soin-partie h3 { margin-bottom: 6px; }
.soin-partie p { margin: 0; font-size: 17.5px; }
.soin-fiches { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 30px; margin-top: 30px; }
.soin-fiches-titre { margin: 0; transform: rotate(-2deg); }
.fiche-lien { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 17px; color: var(--encre); }
.fiche-lien svg { width: 21px; height: 21px; color: var(--bleu); }
.fiche-lien:hover { color: var(--bleu); }
.section--deroule { background: var(--bande); }
/* les autres soins : des entrées de la table des matières, sans boîtes */
.lignes-autres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); }
.ligne-autre { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-top: 1px solid var(--ligne-forte); color: var(--encre); min-width: 0; height: 100%; }
.ligne-autre > span { flex: 1; min-width: 0; }
.ligne-autre-titre { display: block; font: 400 21px/1.2 var(--titre); transition: color .3s; }
.ligne-autre small { display: block; color: var(--texte-2); font-size: 15.5px; line-height: 1.4; margin-top: 2px; }
.ligne-autre:hover .ligne-autre-titre { color: var(--bleu); }

/* ============ L'ÉQUIPE ============ */
.section--fiche:nth-of-type(odd) { background: var(--bande); }
.fiche { display: grid; grid-template-columns: minmax(0, 5.6fr) minmax(0, 6.4fr); gap: clamp(36px, 5.5vw, 90px); align-items: center; scroll-margin-top: 90px; }
.fiche--inverse { grid-template-columns: minmax(0, 6.4fr) minmax(0, 5.6fr); }
.fiche--inverse .fiche-visuel { order: 2; }
.fiche-visuel { position: relative; padding: 4px 0 0; }
.fiche-visuel .tirage { max-width: 560px; margin-inline: auto; }
.fiche-visuel .tirage-papier img { aspect-ratio: 3 / 2.15; max-height: none; object-position: 50% 40%; }
.fiche-trousse { max-width: 360px; margin: 18px auto 0; text-align: center; transform: rotate(-2.5deg); font-size: 26px; }
.fiche--inverse .fiche-trousse { transform: rotate(2deg); }
.fiche-role { color: var(--texte-2); font-size: 17px; margin: 8px 0 0; }
.fiche-mot { margin: 16px 0 14px; padding: 2px 0 2px 18px; border-left: 2px solid var(--bleu); }
.fiche-mot p { margin: 0; font: 400 clamp(19px, 1.55vw, 22px)/1.4 var(--titre); color: var(--encre); }
.fiche-pratique { font-size: 17.5px; max-width: 40em; margin-bottom: 0; }
.fiche-grille { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 26px; margin: 18px 0; padding: 16px 0; border-top: 1px solid var(--ligne-forte); border-bottom: 1px solid var(--ligne-forte); }
.fiche-grille .t4 { margin-bottom: 8px; }
.fiche-grille .fiche-t4 { margin-top: 14px; }
.fiche-liste { display: grid; gap: 6px; }
.fiche-liste li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.4; }
.fiche-liste svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--bleu); }
.fiche-langues { margin: 0; font-size: 16px; }
.fiche .semaine i { font-size: 13px; padding: 3px 8px; }
.fiche-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; }
.fiche-soins { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; }
.fiche-soins .t4 { margin-right: 4px; }
.fiche-soins a { font-size: 16.5px; color: var(--encre); text-decoration: underline; text-decoration-color: rgba(52, 82, 143, .45); text-underline-offset: 4px; }
.fiche-soins a:hover { color: var(--bleu); }
.section--autour { background: var(--bande); }
.autour { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.autour .tirage-papier img { max-height: min(56vh, 480px); }
.autour-liste { display: grid; gap: 12px; }
.autour-liste li { padding: 16px 0 0; border-top: 1px solid var(--ligne-forte); }
.autour-liste b { display: block; font: 400 21px/1.2 var(--titre); color: var(--encre); }
.autour-liste small { display: block; font: 400 24px/1.05 var(--main); color: var(--bleu); margin: 2px 0 6px; }
.autour-liste p { margin: 0; }

/* ============ PREMIÈRE VISITE ============ */
.parcours { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 44px); }
.parcours li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: clamp(16px, 2.8vh, 26px) 0; border-top: 1px solid var(--ligne-forte); }
.parcours .etape-num { font-size: clamp(40px, 3.6vw, 52px); color: var(--bleu); }
.parcours .etape-tag { color: var(--bleu); font-size: 22px; }
.parcours h2 { margin: 2px 0 6px; }
.parcours p:last-child { margin: 0; font-size: 16.5px; }
.section--main { background: var(--bande); }
.main-cartes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); }
.apporter { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.apporter-carte { padding: 30px 32px 26px; transform: rotate(-1.2deg); max-width: 480px; }
.apporter-titre { margin: 0 0 12px; font-size: 32px; }
.apporter-liste { display: grid; gap: 0; }
.apporter-liste li { display: flex; gap: 12px; align-items: center; min-height: 32px; font-size: 17.5px; color: var(--encre); }
.apporter-liste svg { width: 20px; height: 20px; color: var(--bleu); flex: none; }
.apporter-texte .t2 { margin-bottom: 16px; }

/* ============ URGENCES ============ */
.urgence-carte { padding: 28px 30px 24px; transform: rotate(1.2deg); max-width: 460px; margin-inline: auto; }
.urgence-carte .note-main { margin: 0 0 10px; font-size: 30px; }
.urgence-numero { display: flex; align-items: center; gap: 14px; font: 400 clamp(32px, 3.2vw, 44px)/1.1 var(--titre); color: var(--encre); margin-bottom: 14px; }
.urgence-numero svg { width: 38px; height: 38px; padding: 8px; border-radius: 50%; background: var(--encre); color: var(--papier-3); flex: none; }
.urgence-numero:hover { color: var(--bleu); }
.urgence-carte-texte { margin: 0; color: var(--texte-2); font-size: 16.5px; }
.urgence { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.urgence-bloc { padding: 26px 28px; }
.urgence-bloc .t3 { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.urgence-bloc .t3 svg { width: 26px; height: 26px; color: var(--bleu); flex: none; }
.urgence-bloc p:last-child { margin-bottom: 0; }
.urgence-bloc--garde { background: var(--sombre); color: var(--sur-sombre-2);
  background-image: linear-gradient(rgba(47, 47, 50, .95), rgba(47, 47, 50, .95)), var(--bruit); background-size: auto, 260px; }
.urgence-bloc--garde .t3 { color: #fff; }
.urgence-bloc--garde .t3 svg { color: var(--bleu-clair); }
.urgence-bloc--garde a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.gestes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); }
.geste { padding: 18px 0 0; border-top: 2px solid var(--encre); }
.geste p { margin: 10px 0 0; font-size: 16.5px; }
.gestes-note { display: block; margin-top: 6px; transform: rotate(-2deg); }

/* ============ HONORAIRES ============ */
.remb-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); }
.remb-grille .t3 { font-size: 21px; margin-bottom: 4px; }
.remb-grille p { margin: 0; font-size: 17px; color: var(--texte); line-height: 1.55; }
.section--remb-cartes { padding-top: clamp(10px, 2vh, 24px); }
.section--tarifs { background: var(--bande); }
.tarifs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.tableau-cadre { overflow-x: auto; background: var(--carte); border: 1px solid var(--ligne); }
.tableau { width: 100%; border-collapse: collapse; font-size: 16px; }
.tableau caption { text-align: left; padding: 16px 18px 6px; font: 400 22px/1.2 var(--titre); color: var(--encre); }
.tableau th, .tableau td { padding: 12px 18px; text-align: left; border-bottom: 1px solid var(--ligne); vertical-align: top; }
.tableau thead th { font: 700 13px/1.2 var(--corps); letter-spacing: .1em; text-transform: uppercase; color: var(--texte-2); }
.tableau tbody th { font-weight: 500; color: var(--encre); }
.tableau td { color: var(--texte); }
.tableau tr:last-child th, .tableau tr:last-child td { border-bottom: 0; }
.tarifs-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; font-size: 15.5px; color: var(--texte-2); }
.tarifs-notes p { margin: 0; }
.tarifs-notes a { text-decoration: underline; text-underline-offset: 3px; }

/* ============ MENTIONS ============ */
.texte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(36px, 5vw, 80px); }
.texte h2 { margin: 26px 0 10px; }
.texte div > h2:first-child { margin-top: 0; }

/* ============ AGENDA DE DÉMONSTRATION ============ */
.section--rdv { padding-top: clamp(16px, 3vh, 32px); }
.agenda { background: var(--carte); border: 1px solid var(--ligne); box-shadow: var(--ombre-douce); padding: clamp(20px, 3vw, 36px); }
.agenda-etapes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.agenda-etapes li { display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 7px; border-radius: 999px; background: rgba(43, 43, 45, .06); font-weight: 700; font-size: 15px; color: var(--texte-2);
  transition: background-color .3s, color .3s; }
.agenda-etapes li i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--carte); font-style: normal; font-size: 13px; }
.agenda-etapes li.actif { background: var(--encre); color: var(--papier-3); }
.agenda-etapes li.actif i { color: var(--encre); }
.agenda-etapes li.fait { color: var(--bleu); }
.agenda-corps { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 30px; align-items: start; }
.vue { display: none; }
.vue.actif { display: block; animation: glisse .45s ease; }
@keyframes glisse { from { transform: translateY(10px); } to { transform: none; } }
.vue-titre { margin-bottom: 16px; }
.prats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.prat { display: grid; grid-template-columns: 54px minmax(0, 1fr) 24px; gap: 14px; align-items: center; text-align: left; padding: 12px 14px; border: 1px solid var(--ligne-forte); background: rgba(255, 255, 255, .4);
  transition: border-color .25s, box-shadow .25s, background-color .25s; min-width: 0; }
.prat:hover { border-color: var(--encre); box-shadow: var(--ombre-douce); }
.prat.choisi { border-color: var(--encre); background: rgba(52, 82, 143, .06); }
.prat-photo img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.avatar { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; }
.avatar--plus { border: 1px dashed var(--ligne-forte); color: var(--bleu); }
.avatar--plus svg { width: 24px; height: 24px; }
.prat-texte { min-width: 0; }
.prat-texte b { display: block; color: var(--encre); font: 400 18px/1.2 var(--titre); }
.prat-texte small { display: block; font-size: 14.5px; color: var(--texte-2); }
.prat--premier { border-style: dashed; }
.prat-fleche svg { width: 18px; height: 18px; color: var(--bleu); }
.vue-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.vue-tete .vue-titre { margin: 0; }
.semaine-nav { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--encre); font-size: 15.5px; }
.semaine-nav button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ligne-forte); display: grid; place-items: center; }
.semaine-nav button:first-child svg { transform: scaleX(-1); }
.semaine-nav button:disabled { opacity: .35; cursor: default; }
.semaine-nav svg { width: 18px; height: 18px; }
.creneaux { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.jour { min-width: 0; }
.jour-tete { text-align: center; margin: 0 0 8px; padding: 8px 4px; background: rgba(43, 43, 45, .05); line-height: 1.2; }
.jour-tete b { display: block; color: var(--encre); font-size: 15px; }
.jour-tete span { font-size: 13px; color: var(--texte-2); }
.jour-creneaux { display: grid; gap: 5px; }
.creneau { padding: 7px 2px; border-radius: 3px; font-size: 14px; font-weight: 700; color: var(--bleu); background: rgba(52, 82, 143, .1); border: 1px solid transparent; transition: background-color .15s, color .15s; }
.creneau:hover { background: rgba(52, 82, 143, .2); }
.creneau.pris { background: transparent; color: var(--texte-2); opacity: .5; text-decoration: line-through; cursor: default; }
.creneau.choisi { background: var(--encre); color: #fff; }
.jour--absent .jour-tete { opacity: .5; }
.jour-vide { font-size: 13.5px; text-align: center; color: var(--texte-2); margin: 8px 0; }
.vue-pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 16px; align-items: center; }
.legende { display: flex; gap: 16px; font-size: 14.5px; color: var(--texte-2); }
.legende li { display: flex; align-items: center; gap: 6px; }
.legende i { width: 14px; height: 14px; border-radius: 3px; }
.l-libre { background: rgba(52, 82, 143, .2); }
.l-pris { background: rgba(43, 43, 45, .08); }
.vue-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.champs label span { display: block; font-size: 15px; font-weight: 700; color: var(--encre); margin-bottom: 6px; }
.champs input { width: 100%; font: inherit; padding: 12px 14px; border-radius: 3px; border: 1px solid var(--ligne-forte); background: #fff; color: var(--encre); }
.champs input:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(52, 82, 143, .18); }
.case { display: flex; gap: 10px; align-items: center; margin: 8px 0; cursor: pointer; font-size: 16px; }
.case input { position: absolute; opacity: 0; }
.case i { width: 24px; height: 24px; border-radius: 4px; border: 1px solid var(--ligne-forte); display: grid; place-items: center; color: transparent; transition: background-color .2s; flex: none; }
.case i svg { width: 16px; height: 16px; }
.case input:checked + i { background: var(--encre); border-color: var(--encre); color: #fff; }
.case input:focus-visible + i { outline: 2px solid var(--bleu); outline-offset: 2px; }
.champs-erreur { color: var(--ko); font-weight: 600; font-size: 15px; margin: 10px 0 0; }
.vue--ok { text-align: center; position: relative; padding: 20px 0; }
.ok-rond { width: 84px; height: 84px; margin: 0 auto 18px; }
.ok-rond circle { fill: none; stroke: var(--bleu-clair); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ok-rond path { fill: none; stroke: var(--bleu); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.vue--ok.actif .ok-rond circle { animation: trace .6s forwards; }
.vue--ok.actif .ok-rond path { animation: trace .45s .45s forwards; }
.vue--ok .t2 { font-size: clamp(26px, 3vw, 38px); }
.ok-texte { margin: 14px auto; max-width: 480px; }
.ok-apporter { display: inline-flex; gap: 10px; text-align: left; background: rgba(43, 43, 45, .05); padding: 14px 18px; font-size: 16px; margin-bottom: 18px; }
.ok-apporter svg { width: 22px; height: 22px; flex: none; color: var(--bleu); }
.eclats { position: absolute; left: 50%; top: 62px; width: 0; height: 0; pointer-events: none; }
.eclats i { position: absolute; width: 8px; height: 8px; border-radius: 2px; background: var(--bleu); opacity: 0; }
.eclats i:nth-child(3n) { background: var(--bleu-clair); }
.eclats i:nth-child(3n+1) { background: var(--encre); }
.eclats.parti i { animation: eclat .9s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes eclat { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(.4); } }
.agenda-recap { background-color: var(--papier-3); background-image: var(--lignes-carnet); border: 1px solid var(--ligne); padding: 20px 22px; }
.recap-titre { margin: 0 0 6px; font-size: 30px; }
.agenda-recap dl { margin: 6px 0 0; display: grid; gap: 12px; }
.agenda-recap dt { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-2); }
.agenda-recap dd { margin: 2px 0 0; color: var(--encre); font-weight: 600; }
.agenda-demo { display: flex; gap: 10px; align-items: flex-start; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--ligne); font-size: 15px; color: var(--texte-2); }
.agenda-demo svg { width: 20px; height: 20px; flex: none; color: var(--bleu); }

/* ============ BLOG ET FICHES : la charte du carnet sur les pages du moteur commun ============ */
.bl-page .bl-main { padding-top: var(--entete); }
body.bl-page .bl-cat, body.bl-page .bl-surtitre, body.bl-page .bl-lire-tete .bl-surtitre { font: 400 30px/1 var(--main); letter-spacing: 0; text-transform: none; color: var(--bleu); transform: rotate(-2deg); transform-origin: 0 50%; display: inline-block; }
body.bl-page .bl-lire-tete .bl-surtitre { font-size: 32px; }
body.bl-page .bl-citation p { font-style: normal; }
@media (min-width: 1100px) { body.bl-page .bl-grille--index { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
body.bl-page .bl-index-tete .bl-surtitre { margin-bottom: 14px; }
.bl-page .bl-cat { display: inline-block; }
.bl-page .bl-cat-pastille { display: none; }
.bl-carte-cat { font: 400 25px/1 var(--main) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--bleu) !important; }
.bl-tete::after, .bl-index-tete::after { opacity: .35; }
.bl-tete .bl-couv, .bl-une .bl-couv { background: var(--carte); }
.bl-tete .bl-couv--photo { padding: 10px; box-shadow: var(--ombre-tirage); }
.bl-carte-lien { background: rgba(248, 247, 244, .86); }
.bl-carte .bl-couv--photo { margin: 10px 10px 0; aspect-ratio: 3 / 2; }
.bl-appel-int { border-radius: 4px; }
.bl-retenir { border-radius: 3px; }
.bl-page .bl-carte-chapo { font-size: 16px; }
.bl-page .bl-carte-meta, .bl-page .bl-meta-info, .bl-page .bl-meta-date { font-size: 15px; }
/* le moteur commun anime avec un remplissage arrière : sur ce site, rien n'est caché avant le défilement */
.bl-section, .bl-figure, .bl-carte, .bl-une, .fi-moment, .fi-carte, .bl-retenir, .bl-signature, .bl-appel-int, .bl-fiches-encart-int { animation-fill-mode: forwards !important; }
.bl-figure .il .acc, .bl-figure .il .acc-tirets, .bl-figure .il .lien-tirets, .bl-figure .il .cercle-parcours { animation-fill-mode: forwards !important; }

/* ============ APPARITIONS AU DÉFILEMENT ============
   Règle du 07/10 (code de référence : site du Dr Sitbon). Le contenu est visible par défaut ; il n'est masqué que sous
   html.reveal-actif (posé en tête de page si les animations sont permises) et tant que script.js n'a pas posé data-vu.
   Chaque bloc arrive du bas (45 px, flou léger, 1 s) ; un bloc de texte fait arriver ses éléments l'un après l'autre
   (data-cascade) ; les titres arrivent mot à mot (.mot) ; les croquis du bloc se tracent ensuite, à l'encre. */
[data-reveal] { transition: opacity 1s var(--courbe), transform 1.1s var(--courbe), filter 1s var(--courbe); }
html.reveal-actif [data-reveal]:not([data-vu]) { opacity: 0; transform: translateY(45px); filter: blur(4px); }
html.reveal-actif [data-reveal="pose"]:not([data-vu]) { transform: translateY(45px) rotate(-3deg); }
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.1s var(--courbe), filter 1s 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 .bande-texte[data-reveal]:not([data-vu]) { transform: translateY(calc(-50% + 45px)); }
/* les titres, mot à mot */
.lie { white-space: nowrap; }
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; }
/* la planche du lieu : la photo n'apparaît pas en fondu, un volet de papier se retire (une photo après l'autre) */
html.reveal-actif [data-reveal="volet"]:not([data-vu]) { opacity: 1; transform: translateY(24px); filter: none; }
.planche-photo::after { transform: scaleY(0); transition: transform 1.1s cubic-bezier(.6, 0, .2, 1); transition-delay: calc(var(--rd, 0s) + .15s); }
html.reveal-actif [data-reveal="volet"]:not([data-vu]) .planche-photo::after { transform: scaleY(1); transition: none; }
/* les croquis se tracent quand leur bloc est arrivé (chapitres, devis, plan du quartier, la phrase de la bande) */
html.reveal-actif [data-reveal]:not([data-vu]) :is(.trace, .plan-croquis) path:not(.pc-cour),
html.reveal-actif .plan-croquis[data-reveal]:not([data-vu]) path:not(.pc-cour) { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.reveal-actif [data-vu]:not([data-net]) .trace path,
html.reveal-actif .plan-croquis[data-vu]:not([data-net]) path:not(.pc-cour) { stroke-dasharray: 1; animation: trace 1.5s cubic-bezier(.6, 0, .2, 1) both; animation-delay: calc(var(--rd, 0s) + .45s); }
html.reveal-actif [data-vu]:not([data-net]) .trace .bleu { animation-delay: calc(var(--rd, 0s) + 1.2s); }
html.reveal-actif .bande-texte:not([data-vu]) .bande-phrase { clip-path: inset(0 100% 0 0); }
html.reveal-actif .bande-texte[data-vu]:not([data-net]) .bande-phrase { animation: ecrit 1.8s .7s cubic-bezier(.5, 0, .3, 1) both; }
@keyframes ecrit { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* le devis de l'en-tête des honoraires (premier écran) se trace au chargement */
@media (prefers-reduced-motion: no-preference) {
  .trace--charge path { stroke-dasharray: 1; animation: trace 1.6s .5s cubic-bezier(.6, 0, .2, 1) both; }
}

/* transitions entre les pages : un fondu de papier (navigateurs qui le savent) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-sort .28s ease both; }
  ::view-transition-new(root) { animation: vt-entre .5s .06s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes vt-sort { to { opacity: 0; } }
@keyframes vt-entre { from { opacity: 0; transform: translateY(10px); } }

/* au clic, une petite coche tracée à l'encre bleue, qui s'efface (remplace l'onde ronde, retour de l'équipe, le 07/10) */
.coche-encre { position: fixed; width: 26px; height: 20px; margin: -16px 0 0 -4px; overflow: visible; pointer-events: none; z-index: 2000;
  animation: coche-efface .5s .55s ease-in forwards; }
.coche-encre path { fill: none; stroke: var(--bleu); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1;
  animation: trace .38s cubic-bezier(.5, 0, .2, 1) both; }
.coche-encre--clair path { stroke: var(--bleu-clair); }
@keyframes coche-efface { to { opacity: 0; transform: translateY(-3px); } }

/* ============ ÉCRANS PEU HAUTS ============
   Une partie = un écran, sans jamais rapetisser photos, titres ou textes (règle de l'équipe, 07/10) : seuls les espaces
   entre les parties se resserrent ; ce qui ne tient pas a été retiré ou découpé. */
@media (min-width: 1024px) and (max-height: 860px) {
  :root { --section-y: clamp(44px, 7vh, 64px); --entete: 70px; }
  .section-tete { margin-bottom: 26px; }
  .travail-tete { margin-bottom: 26px; }
}

/* ============ TABLETTE ET TÉLÉPHONE ============ */
@media (max-width: 1500px) { .entete-tel { display: none; } }
@media (max-width: 1320px) { .menu a { padding: 10px 9px; font-size: 16.5px; } .menu a::after { left: 9px; right: 9px; } .logo-sous { display: none; } }
@media (max-width: 1180px) {
  .menu { display: none; }
  .burger { display: block; }
  .entete-actions { margin-left: auto; }
  .page-tete-int, .etapes-int, .faq-int, .histoire, .plateau-int, .essentiel-int, .fiche, .fiche--inverse, .autour, .apporter, .prix, .fil-int { grid-template-columns: minmax(0, 1fr); }
  /* premier écran : le texte, puis le tirage en dessous, qui déborde toujours du bord droit */
  .hero { display: block; min-height: 0; }
  .hero-texte { max-width: 640px; }
  .hero-tirage { position: relative; top: auto; bottom: auto; right: -6vw; width: 96vw; margin: 34px 0 0 auto; }
  .hero-photo-image { flex: none; aspect-ratio: 16 / 11; }
  /* photos au bord : elles deviennent des bandes pleine largeur */
  .page-tete--bord { display: block; min-height: 0; }
  .page-tete--bord .page-tete-texte { max-width: 680px; }
  .page-tete--bord > .photo-bord, .soins-photo, .section--plateau > .photo-bord { position: relative; inset: auto; width: 100%; }
  .page-tete--bord > .photo-bord { margin-top: 26px; }
  .photo-bord picture { flex: none; aspect-ratio: 16 / 10; }
  .photo-bord--gauche picture, .photo-bord--droite picture { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent); mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent); }
  .soins-photo { margin-bottom: 18px; }
  .section--soins-carnet { padding-top: 0; }
  .soins-carnet-int { grid-template-columns: minmax(0, 1fr); }
  .soins-carnet-texte { grid-column: 1; }
  .section--plateau { padding-top: 0; }
  .section--plateau > .photo-bord { margin-bottom: 22px; }
  .plateau-texte { grid-column: 1; }
  .faq-cote { position: static; }
  .infos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .infos-plan { grid-column: span 2; }
  .agenda-corps { grid-template-columns: minmax(0, 1fr); }
  .index-soin { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .index-ou { display: none; }
  .main-cartes, .remb-grille, .gestes { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
  .parcours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-visuel { max-width: 520px; }
  .bl-grille--accueil { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dessin-int { grid-template-columns: minmax(0, 1fr); }
  .dessin-marge { text-align: left; display: flex; align-items: flex-end; gap: 6px; }
  .dessin-marge .fleche-main { margin-left: 0; transform: rotate(20deg); }
  .bande-texte { width: min(420px, 44vw); }
  .lignes-autres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .planche, .planche--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 260px; }
  .planche-1 { grid-row: span 2; }
  .planche-note { display: none; }
  .tirages { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; row-gap: 36px; }
  .qui-grille, .tarifs, .tarifs-notes, .texte, .urgence, .lignes-autres { grid-template-columns: minmax(0, 1fr); }
  .soin-parties { grid-template-columns: minmax(0, 1fr); }
  .appel { grid-template-columns: minmax(0, 1fr); }
  .appel::after { display: none; }
  .pied-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prats { grid-template-columns: minmax(0, 1fr); }
  .frise { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; border-top: 0; }
  .frise li { border-top: 1px solid var(--ligne-forte); }
  /* la bande : la photo, puis la phrase posée sur le papier dessous */
  .bande { height: auto; overflow: visible; background: none; }
  .bande::after { display: none; }
  .bande-photo { position: relative; height: 62vw; max-height: 520px; }
  .bande-texte { position: static; transform: none; width: auto; padding: 18px 16px 0; }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  .int, .int--large { width: calc(100% - 32px); }
  :root { --section-y: 56px; --entete: 66px; }
  .entete-rdv { display: none; }
  .logo-nom { font-size: 17px; letter-spacing: .18em; }
  .barre-mobile { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; gap: 8px;
    background: rgba(243, 241, 236, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--ligne);
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
  .barre-mobile a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: 999px; font-weight: 700; font-size: 16px; }
  .barre-mobile-tel { border: 1px solid var(--encre); color: var(--encre); }
  .barre-mobile-rdv { background: var(--encre); color: var(--papier-3); }
  .barre-mobile svg { width: 20px; height: 20px; }
  .btn { white-space: normal; text-align: center; }
  .hero { padding-top: calc(var(--entete) + 18px); }
  .hero-titre { max-width: none; }
  .croquis-note { bottom: -10px; }
  .hero-tirage { right: -10px; width: calc(100% + 4px); margin-top: 28px; }
  .hero-tirage-papier { padding: 9px 9px 0; }
  .hero-photo-image { aspect-ratio: 4 / 3.3; }
  .chapitre .croquis-dessin { width: 74px; }
  .chapitre-verbe { font-size: 38px; }
  .ligne-soin { gap: 12px; flex-wrap: wrap; row-gap: 0; padding: 12px 0; }
  .ligne-soin .points { display: none; }
  .ligne-soin-titre { flex: 1; min-width: 0; }
  .ligne-qui { order: 5; flex-basis: 100%; padding-left: 48px; font-size: 22px; white-space: normal; }
  .feuille--prix { grid-template-columns: minmax(0, 1fr); padding: 24px 20px 20px; transform: none; }
  .feuille--prix .croquis-dessin { width: 96px; grid-row: auto; }
  .prix-note { grid-column: auto; }
  .bl-grille--accueil { grid-template-columns: minmax(0, 1fr); }
  .remb-grille, .main-cartes, .gestes, .parcours, .infos { grid-template-columns: minmax(0, 1fr); }
  .infos-plan { grid-column: auto; }
  .planche { gap: 12px; }
  .planche figcaption { font-size: 21px; white-space: normal; line-height: .95; }
  .planche, .planche--2 { grid-auto-rows: 190px; }
  .etapes li, .parcours li { grid-template-columns: 58px minmax(0, 1fr); gap: 12px; }
  .etape-num { font-size: 42px; }
  .page-tete { padding-top: calc(var(--entete) + 16px); }
  .page-visuel { max-width: 420px; }
  .eventail { height: 78vw; max-height: 380px; }
  .fiche-grille { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .fiche-bas .btn { width: 100%; }
  .histoire-note { position: static; transform: rotate(-2deg); margin-top: 10px; max-width: none; }
  .frise { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .champs { grid-template-columns: minmax(0, 1fr); }
  .creneaux { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
  .appel-tels { grid-template-columns: minmax(0, 1fr); }
  .pied { padding-bottom: 150px; }
  .pied-haut { flex-direction: column; align-items: flex-start; }
  .pied-colonnes { grid-template-columns: minmax(0, 1fr); }
  .apporter-carte { transform: none; }
  .urgence-carte { transform: none; }
  .tableau th, .tableau td { padding: 10px 14px; }
  .faq summary { font-size: 18px; padding: 16px 16px 16px 18px; }
  .faq-reponse { padding: 0 18px 18px; }
  .index-soin { grid-template-columns: 38px minmax(0, 1fr) 40px; gap: 14px; padding: 18px 0; }
  .index-soin .ligne-croquis { width: 38px; height: 38px; }
  .feuille--soin, .feuille--fil { padding: 20px 14px 16px; transform: none; }
  .dessin-marge .note-main { font-size: 28px; }
  .essentiel li { font-size: 17px; }
  .travail-tete { display: block; }
  .travail-tete .liens-doubles { margin-top: 12px; }
}
@media (max-width: 400px) {
  .t1 { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .bandeau-piste { animation: none; }
  .calque-croquis { display: none; }
}
@media print {
  [data-reveal], [data-cascade] > *, .mot { opacity: 1 !important; transform: none !important; filter: none !important; }
  .entete, .barre-mobile, .menu-mobile, #ouverture, .communes, .section--appel { display: none !important; }
  body { background: #fff; }
}

/* ===== Dessins au trait (copie de commun/blog-illustrations.css, pour les pages de soins) ===== */
/* Illustrations au trait des articles et fiches (commun/illustrations.py). Couleurs : variables --il-* du site. */
.il { width: 100%; height: auto; display: block; overflow: visible; font-family: var(--bl-police-texte, system-ui, sans-serif); }
.il .t { fill: none; stroke: var(--il-trait); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.il .t-fin { fill: none; stroke: var(--il-trait); stroke-width: 1.1; stroke-linecap: round; opacity: .55; }
.il .email { fill: var(--il-email); }
.il .email-acc { fill: var(--il-doux); stroke: var(--il-accent); stroke-width: 2.4; }
.il .dentine { fill: var(--il-dentine); }
.il .pulpe { fill: var(--il-pulpe); stroke: var(--il-trait); stroke-width: 1.3; stroke-opacity: .5; }
.il .pulpe-atteinte { fill: var(--il-carie-pulpe); stroke: var(--il-trait); stroke-width: 1.3; stroke-opacity: .5; }
.il .canal-vide { fill: var(--il-email); stroke: var(--il-trait); stroke-width: 1.2; stroke-opacity: .45; }
.il .carie { fill: var(--il-carie); }
.il .abces { fill: var(--il-carie-pulpe); fill-opacity: .55; stroke: var(--il-carie); stroke-width: 1.6; stroke-dasharray: 3 3; }
.il .gencive { fill: var(--il-gencive); stroke: var(--il-trait); stroke-width: 1.6; stroke-opacity: .6; }
.il .gencive-rouge { fill: var(--il-gencive-rouge); stroke: var(--il-trait); stroke-width: 1.6; stroke-opacity: .6; }
.il .gencive-arcade { fill: var(--il-gencive); stroke: var(--il-trait); stroke-width: 1.6; stroke-opacity: .5; }
.il .tartre { fill: var(--il-tartre); }
.il .os { fill: var(--il-os); }
.il .os-leger { fill: var(--il-os); opacity: .7; }
.il .os-neuf { fill: var(--il-os); stroke: var(--il-accent); stroke-width: 2; stroke-dasharray: 4 4; }
.il .os-trame { fill: none; stroke: var(--il-os-trait); stroke-width: 1; opacity: .55; }
.il .acc { fill: none; stroke: var(--il-accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.il .acc-plein { fill: var(--il-accent); }
.il .acc-tirets { fill: none; stroke: var(--il-accent); stroke-width: 2; stroke-dasharray: 5 5; stroke-linecap: round; }
.il .metal { fill: var(--il-metal); stroke: var(--il-trait); stroke-width: 1.4; stroke-opacity: .7; }
.il .metal-clair { fill: var(--il-metal-clair); stroke: var(--il-trait); stroke-width: 1.4; stroke-opacity: .7; }
.il .piece { fill: var(--il-doux); stroke: var(--il-accent); stroke-width: 2.4; stroke-linejoin: round; }
.il .facette { fill: var(--il-doux); stroke: var(--il-accent); stroke-width: 2.4; stroke-linejoin: round; }
.il .bridge { fill: none; stroke: var(--il-accent); stroke-width: 2.4; stroke-dasharray: 2 4; }
.il .resine { fill: var(--il-gencive-rouge); opacity: .85; stroke: var(--il-trait); stroke-width: 1.4; stroke-opacity: .6; }
.il .gouttiere { fill: none; stroke: var(--il-accent); stroke-width: 3.2; stroke-opacity: .55; stroke-linecap: round; stroke-linejoin: round; }
.il .gouttiere-pleine { fill: var(--il-doux); fill-opacity: .75; stroke: var(--il-accent); stroke-width: 2.4; }
.il .fil { fill: none; stroke: var(--il-metal-fonce); stroke-width: 2.4; }
.il .fil-dentaire { fill: none; stroke: var(--il-accent); stroke-width: 2.2; }
.il .lime { fill: none; stroke: var(--il-metal-fonce); stroke-width: 2.4; stroke-linecap: round; }
.il .acces { fill: var(--il-email); stroke: var(--il-trait); stroke-width: 1.4; stroke-dasharray: 3 3; }
.il .obturation { fill: none; stroke: var(--il-accent); stroke-width: 6; stroke-linecap: round; }
.il .alveole { fill: var(--il-email); stroke: var(--il-trait); stroke-width: 1.4; stroke-opacity: .6; }
.il .caillot { fill: var(--il-carie-pulpe); fill-opacity: .8; }
.il .sinus { fill: var(--il-fond); stroke: var(--il-trait); stroke-width: 1.6; stroke-opacity: .6; }
.il .greffe { fill: var(--il-doux); stroke: var(--il-accent); stroke-width: 2; stroke-dasharray: 4 3; }
.il .cadre { fill: var(--il-fond); stroke: var(--il-ligne); stroke-width: 1.2; }
.il .separateur { stroke: var(--il-ligne); stroke-width: 1.2; stroke-dasharray: 4 6; }
.il .manche { fill: var(--il-accent); }
.il .tete { fill: var(--il-email); stroke: var(--il-trait); stroke-width: 1.6; }
.il .poils { stroke: var(--il-trait); stroke-width: 1.6; stroke-linecap: round; opacity: .7; }
.il .tige { fill: var(--il-metal); }
.il .appareil { fill: var(--il-email); stroke: var(--il-trait); stroke-width: 2; }
.il .faisceau { fill: var(--il-accent); opacity: .18; }
.il .ecran { fill: var(--il-fond); stroke: var(--il-trait); stroke-width: 2; }
.il .bridge-arcade { fill: none; stroke: var(--il-email); stroke-width: 34; stroke-linecap: round; stroke-linejoin: round; filter: none; }
.il .pastille { fill: var(--il-fond); stroke: var(--il-accent); stroke-width: 1.6; }
.il .pastille-petite { fill: var(--il-accent); stroke: var(--il-fond); stroke-width: 4; }
.il .lien-tirets, .il .ligne-temps { fill: none; stroke: var(--il-accent); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
.il .cercle-parcours { fill: none; stroke: var(--il-accent); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; }
.il .zone-danger { fill: var(--il-carie); opacity: .08; }
.il .axe { fill: none; stroke: var(--il-trait); stroke-width: 1.4; opacity: .5; }
.il .seuil { stroke: var(--il-carie); stroke-width: 1.6; stroke-dasharray: 6 5; }
.il .courbe-repas { fill: none; stroke: var(--il-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.il .courbe-grignotage { fill: none; stroke: var(--il-carie); stroke-width: 2.4; stroke-dasharray: 1 0; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.il .repere { fill: none; stroke: var(--il-texte); stroke-width: 1; opacity: .45; }
.il .point { fill: var(--il-texte); opacity: .7; }
.il .txt { fill: var(--il-texte); font-size: 15px; font-weight: 600; }
.il .txt-titre { fill: var(--il-texte); font-size: 15.5px; font-weight: 700; }
.il .txt-doux { fill: var(--il-texte); font-size: 13px; font-weight: 500; opacity: .72; }
.il .txt-acc { fill: var(--il-accent-texte, var(--il-accent)); font-size: 14px; font-weight: 700; }
.il .gouttiere-bande { fill: none; stroke: var(--il-accent); stroke-width: 34; stroke-opacity: .14; stroke-linecap: round; stroke-linejoin: round; }
.il .arcade-gencive { fill: none; stroke: var(--il-gencive); stroke-width: 58; stroke-linecap: round; stroke-linejoin: round; }
.il .arcade-dents { fill: none; stroke: var(--il-email); stroke-width: 34; stroke-linecap: round; stroke-linejoin: round; }
.il .arcade-contour { fill: none; stroke: var(--il-trait); stroke-width: 37.5; stroke-opacity: .55; stroke-linecap: round; stroke-linejoin: round; }
.il .implant-point { fill: var(--il-metal); stroke: var(--il-accent); stroke-width: 2.4; stroke-dasharray: 3 2; }

/* Téléphone : vignettes redécoupées ou dessin à faire glisser */
.il-vignettes, .il-astuce, .il-note { display: none; }
@media (max-width: 640px) {
  .il-bloc--decoupe > .il { display: none; }
  .il-vignettes { display: grid; gap: 18px 12px; }
  .il-vignettes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .il-vignettes--1 { grid-template-columns: minmax(0, 1fr); }
  .il-vignettes--2 > .il-panneau:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: 56%; }
  .il-panneau { display: grid; align-content: start; gap: 6px; min-width: 0; }
  .il-vignette { width: 100%; height: auto; overflow: hidden; }
  .il-legende { margin: 0 !important; text-align: center; font-size: 14px !important; line-height: 1.3 !important; color: var(--il-texte); }
  .il-legende b { display: block; font-weight: 700; }
  .il-legende span { display: block; margin-top: 2px; font-size: 13px; opacity: .75; }
  .il-note { display: block; margin: 14px 0 0 !important; text-align: center; font-size: 13.5px !important; line-height: 1.4 !important; font-weight: 600; color: var(--il-accent-texte, var(--il-accent)); }
  .il-glisse { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; margin: 0 -6px; padding: 0 6px 8px; }
  .il-glisse > .il { min-width: 600px; }
  .il-astuce { display: block; margin: 8px 0 0; font-size: 13px; color: var(--il-texte); opacity: .7; text-align: center; }
}

/* 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; }