/* Polices hébergées sur le site (licence SIL Open Font License) : aucune requête vers un service tiers */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 700; font-stretch: 62% 125%; font-display: swap;
  src: url("../fonts/archivo-normal-400-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 700; font-stretch: 62% 125%; font-display: swap;
  src: url("../fonts/archivo-normal-400-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-mono-italic-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-mono-italic-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-mono-normal-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-mono-normal-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/ibm-plex-mono-normal-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/ibm-plex-mono-normal-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  /* L’échelle × L’atelier : l’échelle donne le mouvement (un point qui grandit à chaque chapitre et devient le fond du suivant),
     l’atelier donne la matière, du premier au dernier écran : une feuille posée par chapitre, annotations au crayon.
     Pas de papier quadrillé : des aplats francs. */
  --ivoire: #F2ECE2;
  --encre: #141112;
  --bordeaux: #6B1520;
  --bordeaux-clair: #C4505A;
  --sable: #E3D4BF;
  --graphite: #55524D;
  --gris: #CFC7BB;
  --filet: #D8CDBB;
  --filet-sombre: #3A352F;

  --ff: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ff-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;  /* étiquettes, cotes, annotations */
  --papier: #FBF8F2;
  --trait: #7A736A;                     /* contour des champs : sur papier ≈ 4,4:1, sur blanc cassé ≈ 4,6:1 */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);       /* interactions : part vite */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* ce qui se déplace à l’écran */
  /* Couleur d’appoint validée le 15/10/2026 : le vieux rose, de la famille du bordeaux. En touches, jamais en aplat. */
  --rose: #D4A19A;                      /* encre dessus ≈ 8,4:1 ; sur encre ≈ 8,4:1 ; sur bordeaux ≈ 5,3:1 */
  --rose-fonce: #8A4743;                /* chiffres et traits sur fond clair : ivoire ≈ 5,8:1 ; sable ≈ 4,7:1 ; papier ≈ 6,5:1 */                    /* feuille posée sur la table */
  --sh-1: 0 1px 1px rgba(46,32,14,.12), 0 3px 7px -3px rgba(46,32,14,.18), 0 20px 32px -20px rgba(46,32,14,.42);
  --sh-2: 0 1px 2px rgba(20,10,8,.18), 0 12px 24px -10px rgba(20,10,8,.32), 0 40px 70px -34px rgba(20,10,8,.55);
  --tex-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .22 0 0 0 0 .17 0 0 0 0 .1 0 0 0 .5 -.17'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  --tex-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .18 0 0 0 .35 -.13'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  --tex-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011 .028' numOctaves='4' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .92 0 0 0 0 .86 0 0 0 .2 -.1'/%3E%3C/filter%3E%3Crect width='520' height='520' filter='url(%23b)'/%3E%3C/svg%3E");
  --gut: clamp(16px, 3.9vw, 56px);      /* marge latérale du contenu */
  --edge: clamp(12px, 1.95vw, 28px);    /* marge des commandes fixes */
  --gap: clamp(16px, 1.7vw, 24px);      /* gouttière de grille */
  --pin: 100vh;                         /* longueur de défilement d’un agrandissement (75vh sur téléphone) */
  --cw: calc(100vw - 2 * var(--gut));   /* largeur utile approximative */
}

/* ---------- Thèmes de chapitre : chaque fond porte ses couleurs de texte, de filet, de bouton ---------- */
.t-ivoire, [data-t="ivoire"] {
  --cta-bg: var(--bordeaux); --cta-fg: var(--ivoire); --cta-h: #57101A; --cta-mk: var(--rose);
  --pl-bg: var(--encre); --pl-fg: var(--rose); --pl-h: #2B2527; --pl-mk: var(--rose);
  --bpt: var(--bordeaux);
  --bg: var(--ivoire); --fg: var(--encre); --fg2: var(--graphite); --rule: var(--filet);
  --acc: var(--bordeaux); --focus: var(--bordeaux); --pbg: var(--encre); --pfg: var(--ivoire); --pdot: var(--bordeaux-clair);
}
.t-bordeaux, [data-t="bordeaux"] {
  --cta-bg: var(--ivoire); --cta-fg: var(--bordeaux); --cta-h: #FFFFFF; --cta-mk: var(--bordeaux);
  --pl-bg: var(--encre); --pl-fg: var(--rose); --pl-h: #2B2527; --pl-mk: var(--rose);
  --bpt: var(--rose);
  --bg: var(--bordeaux); --fg: var(--ivoire); --fg2: var(--sable); --rule: #8F414A;
  --acc: var(--ivoire); --focus: var(--ivoire); --pbg: var(--ivoire); --pfg: var(--encre); --pdot: var(--bordeaux);
}
.t-noir, [data-t="noir"] {
  --cta-bg: var(--rose); --cta-fg: var(--encre); --cta-h: #E0B7B0; --cta-mk: var(--encre);
  --pl-bg: var(--ivoire); --pl-fg: var(--bordeaux); --pl-h: #FFFFFF; --pl-mk: var(--bordeaux);
  --bpt: var(--rose);
  --bg: var(--encre); --fg: var(--ivoire); --fg2: var(--gris); --rule: var(--filet-sombre);
  --acc: var(--bordeaux-clair); --focus: var(--sable); --pbg: var(--ivoire); --pfg: var(--encre); --pdot: var(--bordeaux);
}
.t-sable, [data-t="sable"] {
  --cta-bg: var(--bordeaux); --cta-fg: var(--ivoire); --cta-h: #57101A; --cta-mk: var(--rose);
  --pl-bg: var(--encre); --pl-fg: var(--rose); --pl-h: #2B2527; --pl-mk: var(--rose);
  --bpt: var(--bordeaux);
  --bg: var(--sable); --fg: var(--encre); --fg2: var(--graphite); --rule: #C9B697;
  --acc: var(--bordeaux); --focus: var(--bordeaux); --pbg: var(--encre); --pfg: var(--ivoire); --pdot: var(--bordeaux-clair);
}
.t-ivoire, .t-bordeaux, .t-noir, .t-sable { background: var(--bg); color: var(--fg); }
.t-ivoire { --tex: none; }
.t-sable { --tex: var(--tex-noise); }
.t-bordeaux, .t-noir { --tex: none; }
.zoom, .base, .disc, .chap, .fin { background-image: var(--tex, none); }
.t-ivoire, .t-sable { --anno: var(--bordeaux); }
.t-bordeaux, .t-noir { --anno: var(--rose); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--ivoire);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-padding-top: 84px; scroll-padding-bottom: 104px;
}
body {
  margin: 0; background: var(--ivoire); color: var(--encre);
  font-family: var(--ff); font-weight: 400; font-stretch: 100%;
  font-size: clamp(16.5px, 0.3vw + 15.2px, 18.5px); line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
}
h1, h2, h3, p, ol, ul, figure, fieldset, legend, dl, dd { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus, #6B1520); outline-offset: 3px; border-radius: 3px; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.wrap { padding-inline: var(--gut); max-width: 1600px; margin-inline: auto; }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }

.skip {
  position: fixed; z-index: 90; left: 12px; top: 12px; padding: 13px 18px; border-radius: 0;
  background: var(--encre); color: var(--rose); font: 500 14.5px/1 var(--ff-mono); letter-spacing: .02em; text-decoration: none;
  transform: translateY(-160%);
}
.skip:focus { transform: none; }

/* ---------- Typographie : une seule famille, la largeur dit l’échelle ---------- */
.k {
  font-family: var(--ff-mono); font-size: 11.5px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 500; color: var(--fg2);
}
.k b { font-family: var(--ff); }
.k b, .num { font-stretch: 62%; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.k b { color: var(--fg); font-size: 1.12em; margin-right: .15em; }
.h2 {
  font-size: clamp(40px, 5.1vw, 78px); line-height: .98; font-weight: 560; font-stretch: 108%;
  letter-spacing: -.028em; margin-top: .32em;
}
.lead {
  font-size: clamp(21px, 1.95vw, 30px); line-height: 1.24; font-weight: 400; font-stretch: 96%;
  letter-spacing: -.012em; margin-top: .65em; max-width: 21em;
}
.txt { color: var(--fg2); max-width: 34em; margin-top: 1.4em; }
.txt p + p { margin-top: .75em; }
.pt { color: var(--acc); }

/* ---------- Boutons : la piste C · Planning (html[data-btn="planning"]) ----------
   Une seule forme pour les trois : un rectangle franc, sans arrondi ni ombre, bordeaux pour l’action principale.
   Ce qui change, c’est le geste, et chaque geste vient de NUMIDE :
   Piste retenue le 15/10/2026 : C · Planning, la barre du planning validé, texte machine vieux rose sur encre ;
   au survol, une ligne vieux rose se remplit sous le bouton, comme une étape franchie.
   Mouvement (skill finitions-animation) : transitions interruptibles, entrée 220 ms, sortie 150 ms, courbe ease-out ;
   survol réservé à la souris ; appui à 0,97 ; rien ne bouge au clavier (le focus garde son contour) ;
   mouvement réduit : la couleur change, rien ne se déplace. */
.btn, .c-menu, .menu__close {
  --bh: 50px; --on: 0; --t: 150ms; --mk: var(--bpt);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--bh); margin: 0; padding: 0 24px; border: 0; border-radius: 0;
  background: var(--bg); color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--fg);
  font: 600 15.5px/1 var(--ff); font-stretch: 100%; letter-spacing: .005em;
  text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease;
}
.btn:not(.btn--ghost) { --mk: var(--cta-mk); background: var(--cta-bg); color: var(--cta-fg); box-shadow: none; }
.btn:hover, .c-menu:hover { text-decoration: none; }
:is(.btn, .c-menu, .menu__close):active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  :is(.btn, .c-menu, .menu__close):hover { --on: 1; --t: 220ms; }
}
.motion .btn.is-hint { --on: 1; --t: 260ms; }   /* démonstration du geste, une fois (utile au toucher, sans survol) */
.btn .num { font-family: inherit; font-stretch: inherit; font-size: 1em; font-weight: 500; margin-left: .3em; letter-spacing: .01em; opacity: .85; }
.btn__t { display: inline-grid; place-items: center; }
.btn__t > * { grid-area: 1 / 1; }
.btn__w, .btn__k, .btn__r { display: none; }

/* C · Planning : le texte machine du planning ; une ligne vieux rose se remplit au survol */
[data-btn="planning"] :is(.btn, .c-menu, .menu__close) { font: 500 14.5px/1 var(--ff-mono); letter-spacing: .02em; }
[data-btn="planning"] .btn:not(.btn--ghost) { --mk: var(--pl-mk); background: var(--pl-bg) var(--tex-ink); color: var(--pl-fg); }
[data-btn="planning"] .btn__r {
  display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--mk); pointer-events: none;
  transform: scaleX(var(--on)); transform-origin: 0 50%; transition: transform var(--t) var(--ease-out);
}

/* Mouvement réduit : aucun geste, la couleur seule répond au survol */
@media (prefers-reduced-motion: reduce) {
  :is(.btn, .c-menu, .menu__close) { --on: 0 !important; }
  @media (hover: hover) and (pointer: fine) {
    .btn:not(.btn--ghost):hover { background-color: var(--cta-h); }
    [data-btn="planning"] .btn:not(.btn--ghost):hover { background-color: var(--pl-h); }
    :is(.btn--ghost, .c-menu, .menu__close):hover { color: var(--bpt); }   /* vieux rose sur noir et bordeaux (contraste ≥ 4,5:1) */
  }
}

/* ---------- Commandes fixes : quatre coins, comme un viseur ---------- */
.c { position: absolute; z-index: 40; color: var(--fg); }
.js .c { position: fixed; }
.c-logo {
  top: var(--edge); left: var(--edge); height: 44px; display: flex; align-items: center;
  padding: 0 14px; margin-left: -8px; border-radius: 0; background: var(--bg); text-decoration: none;
}
.logo { display: block; height: 21px; }
.logo svg { display: block; height: 100%; width: auto; }
.c-logo .logo--sombre { display: none; }
.c-logo[data-t="bordeaux"] .logo--clair, .c-logo[data-t="noir"] .logo--clair { display: none; }
.c-logo[data-t="bordeaux"] .logo--sombre, .c-logo[data-t="noir"] .logo--sombre { display: block; }

.c-menu { top: var(--edge); right: var(--edge); --bh: 44px; padding: 0 16px 0 14px; font-size: 15px; }
.c-menu .num { min-width: 2.2em; font-family: var(--ff); font-size: 15px; text-align: left; }
.c-menu__bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 12px; }
.c-menu__bars i { display: block; border-radius: 50%; background: currentColor; }
.c-menu__bars i:nth-child(1) { width: 3px; height: 3px; }
.c-menu__bars i:nth-child(2) { width: 6px; height: 6px; }
.c-menu__bars i:nth-child(3) { width: 12px; height: 12px; }

.c-index { display: none; }
.c-cta { display: flex; gap: 8px; }

@media (min-width: 1024px) {
  .js .c-index {
    display: flex; align-items: center; gap: 4px; left: var(--edge); bottom: var(--edge); height: 44px;
    padding: 0 16px 0 6px; border-radius: 0; background: var(--bg); border: 1.5px solid var(--rule);
  }
  .c-index ol { display: flex; align-items: center; }
  .c-index a {
    display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 32px; height: 44px; padding: 0 6px;
    text-decoration: none; color: var(--fg2); font: 650 13.5px/1 var(--ff); font-stretch: 62%;
    font-variant-numeric: tabular-nums; border-radius: 0;
  }
  .c-index a i { display: block; width: var(--s); height: var(--s); border-radius: 50%; border: 1px solid currentColor; }
  .c-index a[aria-current] { color: var(--fg); }
  .c-index a[aria-current] i { background: currentColor; }
  .c-index a:hover { color: var(--fg); }
  .c-index__name { font-size: 13px; font-weight: 600; font-stretch: 92%; white-space: nowrap; padding-left: 8px; border-left: 1px solid var(--rule); line-height: 22px; }
  .c-cta { right: var(--edge); bottom: var(--edge); }
  .no-js .c-cta { top: calc(100vh - 48px - var(--edge)); bottom: auto; }
}
@media (max-width: 1023.98px) {
  .c-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: 1fr 1.55fr; gap: 8px;
  }
  .c-cta .btn { --bh: 48px; width: 100%; padding-inline: 12px; }
  .c-cta { background: var(--bg); box-shadow: 0 -1px 0 var(--rule); }
  @media (min-width: 600px) {
    .c-cta { background: none; box-shadow: none; }
    .c-cta { left: auto; display: flex; padding-right: var(--edge); padding-bottom: calc(var(--edge) + env(safe-area-inset-bottom)); }
    .c-cta .btn { width: auto; padding-inline: 24px; }
  }
  .c-cta .btn .num { display: none; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .logo { height: 19px; }
  .c-menu { padding: 0 14px 0 12px; }
}

/* États pilotés par le défilement : logo retiré en descendant, bouton fixe effacé au formulaire */
.js .c-logo { transition: transform .45s cubic-bezier(.3, .7, .2, 1), opacity .3s ease; }
.js .c-cta .btn { transition: transform 160ms var(--ease-out), opacity .3s ease, background-color 200ms ease, color 200ms ease; }
.js.logo-off .c-logo:not(:focus-visible) { transform: translateY(calc(-100% - var(--edge) - 8px)); }
.js.at-form .c-cta .btn:not(.btn--ghost) { transform: translateY(calc(100% + var(--edge) + 16px)); opacity: 0; visibility: hidden; transition: transform .45s cubic-bezier(.3, .7, .2, 1), opacity .3s ease, visibility 0s linear .45s; }

/* ---------- Agrandissements : une scène épinglée, un disque qui grandit (clip-path) ---------- */
.zoom { position: relative; background-color: var(--bg); overflow-x: clip; }
.pin { position: relative; }
.base { position: relative; min-height: 62vh; min-height: 62svh; background-color: var(--bg); color: var(--fg); }
#accueil .base { min-height: 100vh; min-height: 100svh; }
.seed {
  position: absolute; left: 50%; top: 50%; width: var(--d); height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border-radius: 50%; background: var(--seed);
}
.seed--ring { box-shadow: 0 0 0 1.5px var(--ringc, var(--encre)); }
.tag {
  position: absolute; left: 50%; top: 50%; z-index: 3; pointer-events: none;
  transform: translate(14px, -14px);
  font: 650 14px/1 var(--ff); font-stretch: 62%; font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--fg);
}
.tag span { display: block; transform: translateY(-100%); white-space: nowrap; }
/* Sous le point, une annotation au crayon, comme sur les feuilles de l’atelier */
.hint {
  position: absolute; left: 50%; top: calc(50% + 30px); transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 32px); text-align: center;
  font: italic 400 15px/1.5 var(--ff-mono); color: var(--anno, var(--bordeaux));
}
.hint::before { content: "↳ "; content: "↳ " / ""; font-style: normal; }
.hint b { font-weight: 500; }
.hint .m { display: none; }
.motion .hint .m { display: inline; }
.motion .hint .s { display: none; }

.disc { position: relative; min-height: 78vh; min-height: 78svh; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 120px var(--gut) clamp(96px, 13vh, 132px); background-color: var(--bg); color: var(--fg); }
.disc__in { width: 100%; container-type: inline-size; }
.disc__tag { margin-bottom: clamp(14px, 2.4vh, 26px); }
.giant {
  font-weight: 640; font-stretch: 125%; line-height: .8; letter-spacing: -.022em; white-space: nowrap;
  font-size: min(calc(var(--cw) * var(--fit)), 36vh); margin-left: -.04em;
}
@supports (width: 1cqw) { .giant { font-size: min(calc(100cqw * var(--fit)), 36vh); } }
.giant .gl { display: inline; }
.ring { display: none; }

.motion .zoom { height: calc(100vh + var(--pin)); }
@supports (height: 100lvh) { .motion .zoom { height: calc(100lvh + var(--pin)); } }
.motion .pin { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; }
.motion .base { position: absolute; inset: 0; min-height: 0; }
.motion .disc { position: absolute; inset: 0; min-height: 0; z-index: 2; clip-path: circle(var(--r0) at 50% 50%); -webkit-clip-path: circle(var(--r0) at 50% 50%); }
.motion .ring { display: block; position: absolute; inset: 0; z-index: 1; background: var(--ringc, var(--encre)); clip-path: circle(calc(var(--r0) + 1.5px) at 50% 50%); }
.motion .seed { display: none; }
/* Sur téléphone, la scène fait 100lvh : le contenu se cale sur la petite hauteur visible */
@supports (height: 100svh) {
  .motion .disc { padding-bottom: calc(100lvh - 100svh + clamp(96px, 13vh, 132px)); }
  .motion .open { bottom: calc(100lvh - 100svh + var(--edge) + 44px + clamp(28px, 6vh, 64px)); }
}
/* Ouverture : le premier point part plein écran puis se rétracte (JS) ; filet de sécurité si le script échoue */
.motion.intro #accueil .disc { clip-path: none; -webkit-clip-path: none; animation: failsafe 0s linear 4s forwards; }
@keyframes failsafe { to { clip-path: circle(var(--r0) at 50% 50%); -webkit-clip-path: circle(var(--r0) at 50% 50%); } }

/* ---------- ×1 · Ouverture ---------- */
.open {
  position: absolute; left: var(--gut); right: var(--gut);
  bottom: calc(var(--edge) + 44px + clamp(28px, 6vh, 64px));
}
.open__line { font-size: 15px; line-height: 1.45; font-weight: 600; font-stretch: 92%; letter-spacing: .01em; color: var(--fg); max-width: 60em; }
.open__line .sep { color: var(--fg2); font-weight: 400; padding: 0 .35em; }
.open__phrase {
  display: block; margin-top: 14px; max-width: 15.5em;
  font-size: clamp(30px, 3.6vw, 56px); line-height: 1.04; font-weight: 470; font-stretch: 100%; letter-spacing: -.024em;
}
.open__phrase .w { font-stretch: 125%; font-weight: 560; letter-spacing: -.03em; }

/* ---------- Chapitres ---------- */
.chap { position: relative; padding: clamp(56px, 8vw, 128px) 0 clamp(112px, 13vw, 200px); }
.chap:focus { outline: none; }
.offer { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px var(--gap); align-items: start; }
.offer__head { grid-column: 1 / 7; }
.offer__list { grid-column: 8 / 13; padding-top: 6px; }
.items { counter-reset: i; border-top: 1px solid var(--rule); margin-top: 14px; }
.items li { display: grid; grid-template-columns: 2.4em 1fr; column-gap: 12px; padding: 15px 0 16px; border-bottom: 1px solid var(--rule); }
.items li::before {
  content: counter(i, decimal-leading-zero); counter-increment: i; grid-row: span 2;
  font: 500 12px/2.15 var(--ff-mono); color: var(--fg2);
}
.t-noir .items li::before { color: var(--rose); }
.t-sable .items li::before, .t-ivoire .items li::before { color: var(--rose-fonce); }
.items__t { font-weight: 600; font-size: 1.06em; line-height: 1.35; }
.items__d { color: var(--fg2); font-size: .93em; line-height: 1.45; margin-top: 2px; }
.items__foot { margin-top: 18px; color: var(--fg2); font-size: .95em; max-width: 30em; }
.items__foot strong { color: var(--fg); font-weight: 600; }

/* ×27 · Outils maîtrisés : logos en une couleur, dans la couleur du texte, sur une ligne */
.outils { margin-top: clamp(36px, 3.4vw, 52px); max-width: 34em; }
.outils__r { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 36px; margin-top: 14px; padding: 18px 0 17px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.outil { display: flex; align-items: center; gap: 9px; color: var(--fg); }
.outil__s { width: 24px; height: 24px; fill: currentColor; flex: none; }
.outil__n { font-size: 1.12em; font-weight: 600; letter-spacing: -.012em; line-height: 24px; white-space: nowrap; }
.outils__a { margin-top: 12px; }
@media (max-width: 599.98px) {
  .outils__r { gap: 12px 18px; }
  .outil { gap: 8px; }
  .outil__s { width: 22px; height: 22px; }
  .outil__n { font-size: 1em; }
}

/* ×3 · Le Miroir, premier cas */
.case { margin-top: clamp(88px, 11vw, 168px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 44px var(--gap); align-items: start; }
.case__text { grid-column: 1 / 6; }
.case__fig { grid-column: 6 / 13; }
.h3 { font-size: clamp(30px, 3.3vw, 50px); line-height: 1.02; font-weight: 560; font-stretch: 104%; letter-spacing: -.024em; margin-top: .45em; max-width: 12em; }
.legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: 22px; border-top: 1px solid var(--rule); padding-top: 14px; }
.legend li { font-size: .92em; line-height: 1.4; color: var(--fg2); }
.legend b { display: block; color: var(--fg); font-weight: 600; font-size: 1.06em; }
.legend .num { color: var(--fg); margin-right: 6px; }
.cap { margin-top: 12px; font-size: 13px; line-height: 1.45; color: var(--fg2); font-stretch: 94%; }
.cap .num { color: var(--fg); margin-right: 6px; font-size: 14px; }
.map .cap { margin-top: 18px; }
.map .cap .anno { color: var(--rose); }

/* ×9 · Visibilité locale */
.local { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px var(--gap); align-items: start; }
.local__text { grid-column: 1 / 6; }
.local__text .offer__list { margin-top: 44px; padding-top: 0; }
.map { grid-column: 6 / 13; position: relative; margin-top: 8px; }
.map__box { position: relative; }
.calque { position: relative; padding: clamp(12px, 1.6vw, 22px); background: rgba(242,236,226,.055);
  box-shadow: inset 0 0 0 1px rgba(242,236,226,.16), 0 26px 50px -18px rgba(0,0,0,.6); transform: rotate(.6deg); }
.map svg { width: 100%; height: auto; overflow: hidden; }
.map__box { background: radial-gradient(circle closest-side at 41% 48.6%, rgba(212,161,154,.2), rgba(212,161,154,.06) 45%, rgba(212,161,154,0)); }
.map .riv { fill: none; stroke: #403A34; stroke-linecap: round; stroke-linejoin: round; }
.map .rg { fill: none; stroke: var(--rose); stroke-width: 1; vector-effect: non-scaling-stroke; transform-box: view-box; transform-origin: 204.3px 224.8px; }
.map .rg--3 { stroke-dasharray: 2 5; }
.map .me { fill: var(--ivoire); }
.map .me-ring { fill: none; stroke: var(--bordeaux-clair); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.map .sc { stroke: var(--gris); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
.ml { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none;
  font: 500 10.5px/1 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; color: #A39A8E; }
.ml--r { font: italic 400 13.5px/1 var(--ff-mono); letter-spacing: 0; text-transform: none; color: var(--rose); }
.ml--riv { font-style: normal; color: #8E857A; letter-spacing: .16em; }
.ml--l { transform: translate(0, -50%); }


/* ×81 · Avec vous */

.agency { margin-top: clamp(104px, 12vw, 184px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 44px var(--gap); align-items: start; }
.agency__text { grid-column: 1 / 6; }

.agency__items { margin-top: 26px; }
.nw { white-space: nowrap; }
.photo { grid-column: 6 / 13; margin: 10px 0 0; }
.photo__print { position: relative; background: #FDFBF7; padding: clamp(10px, 1.1vw, 16px) clamp(10px, 1.1vw, 16px) clamp(40px, 3.6vw, 54px);
  box-shadow: var(--sh-2); transform: rotate(-1deg); }
.photo__print svg { width: 100%; height: auto; }
.photo__print .tape.tl { left: -22px; top: -4px; }
.photo__print .tape.tr { right: -22px; top: -4px; }
.photo__note { position: absolute; left: clamp(12px, 1.4vw, 20px); bottom: clamp(12px, 1.2vw, 17px); font: italic 400 clamp(13px, 1vw, 15px)/1.2 var(--ff-mono); color: var(--graphite); }
.photo figcaption { margin-top: 24px; display: grid; gap: 8px; }
/* Le bureau vu d’en haut : textes de l’illustration */
.bu-main { font-family: var(--ff-mono); font-style: italic; font-size: 11px; fill: #55524D; }
.bu-crayon { font-family: var(--ff); font-weight: 600; font-size: 6.5px; letter-spacing: 1.4px; fill: #F2ECE2; }
.bu-carte { font-family: var(--ff); font-weight: 600; font-size: 10px; letter-spacing: 2.2px; fill: #F2ECE2; }
.bu-pl { font-family: var(--ff-mono); font-style: italic; font-size: 8.5px; fill: #55524D; }
.bu-num { font-family: var(--ff-mono); font-weight: 500; font-size: 9px; fill: #6B1520; }
.bu-leg { list-style: none; margin: 4px 0 2px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px;
  font: 400 13px/1.4 var(--ff-mono); color: var(--graphite); }
.bu-leg b { font-weight: 500; color: var(--bordeaux); margin-right: 8px; }
/* Le téléphone sonne une fois quand la section arrive (« Elle décroche elle-même ») ; sans mouvement, les ondes restent dessinées */
.bu-tel { transform-box: fill-box; transform-origin: 50% 50%; }
.bu-ondes path { opacity: .6; }
.motion .bu-ondes path { opacity: 0; }
.motion .photo.is-ringing .bu-tel { animation: bu-vibre 1.6s linear 1; }
.motion .photo.is-ringing .bu-ondes path { animation: bu-ondes 1.6s ease 1; }
@keyframes bu-vibre {
  0%, 24%, 50%, 74%, 100% { transform: none; }
  4%, 12%, 54%, 62% { transform: rotate(-3deg); }
  8%, 16%, 58%, 66% { transform: rotate(3deg); }
  20%, 70% { transform: rotate(-1.5deg); }
}
@keyframes bu-ondes { 0%, 50%, 100% { opacity: 0; } 6%, 22%, 56%, 72% { opacity: 1; } 32%, 82% { opacity: 0; } }

/* Où NUMIDE intervient : trois cercles. Lyon est le point, sa région le cercle plein (sur place ou en visio),
   la France le cercle pointillé (à distance). */
.zones { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px var(--gap); align-items: center;
  margin-top: clamp(48px, 6vw, 96px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--rule); }
.zones__head { grid-column: 1 / 5; }
.zones__head .h3 { max-width: 8em; }
.zones__head .txt { margin-top: 1em; max-width: 22em; }
.zones__head .anno { margin-top: 18px; max-width: 24em; }
.cercles { grid-column: 5 / 13; width: 100%; max-width: 860px; justify-self: end; margin: 0; }
.cercles svg { width: 100%; height: auto; overflow: visible; }
.cercles__narrow, .cercles__leg { display: none; }
.z-pt { fill: var(--bordeaux); }
.z-reg { fill: rgba(212,161,154,.42); stroke: var(--fg); stroke-width: 1.5; }
.z-fr { fill: none; stroke: var(--fg); stroke-width: 2.2; stroke-dasharray: 0 9; stroke-linecap: round; }
.z-lead { fill: none; stroke: var(--graphite); stroke-width: 1; }
.z-dot { fill: var(--graphite); }
.z-n { font-family: var(--ff); font-size: 30px; font-weight: 600; letter-spacing: -.02em; fill: var(--fg); }
.z-x { font-size: 15px; font-weight: 650; font-stretch: 62%; letter-spacing: .02em; fill: var(--rose-fonce); }
.z-a { font-family: var(--ff-mono); font-size: 14px; font-style: italic; fill: var(--bordeaux); }
.z-in { font-family: var(--ff); font-size: 18px; font-weight: 650; font-stretch: 62%; text-anchor: middle; fill: var(--fg); }
.z-in--pt { fill: var(--ivoire); }
/* Avec JavaScript et mouvement autorisé : une seule fois, à l’arrivée dans l’écran, chaque cercle naît du précédent, ×3 */
.z-ring { transform-box: fill-box; transform-origin: 50% 50%; }
.cercles.is-armed .z-ring, .cercles.is-armed .z-lbl { opacity: 0; }
.cercles.is-armed .z-ring { transform: scale(var(--from, .333)); }
.cercles.is-armed.is-in .z-ring, .cercles.is-armed.is-in .z-lbl { opacity: 1; transform: none;
  transition: opacity 300ms ease var(--d), transform 700ms var(--ease-out) var(--d); }
.cercles__leg { margin-top: 18px; border-top: 1px solid var(--rule); }
.cercles__leg li { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: baseline; column-gap: 10px; padding: 12px 0 13px; border-bottom: 1px solid var(--rule); }
.cercles__leg .anno { grid-column: 2; margin-top: 3px; }
.mk { align-self: center; justify-self: center; display: block; width: 16px; height: 16px; border-radius: 50%; }
.mk--pt { width: 10px; height: 10px; background: var(--bordeaux); }
.mk--reg { background: rgba(212,161,154,.42); border: 1.5px solid var(--fg); }
.mk--fr { width: 22px; height: 22px; border: 2px dotted var(--fg); }
.z-x2 { font: 650 15px/1 var(--ff); font-stretch: 62%; letter-spacing: .02em; color: var(--rose-fonce); }
.z-n2 { font-size: 22px; font-weight: 600; line-height: 1.15; letter-spacing: -.015em; }
.chap { overflow-x: clip; }   /* rien ne fait jamais défiler la page de côté */

.faq { margin-top: clamp(104px, 12vw, 184px); }
.faq__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 28px; }
.qa { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px var(--gap); padding: 26px 0 28px; border-top: 1px solid var(--rule); }
.qa:last-child { border-bottom: 1px solid var(--rule); }
.qa h3 { grid-column: 1 / 6; font-size: clamp(21px, 1.9vw, 28px); line-height: 1.18; font-weight: 560; font-stretch: 106%; letter-spacing: -.015em; }
.qa p { grid-column: 7 / 13; color: var(--fg2); max-width: 32em; }

.contact { margin-top: clamp(104px, 12vw, 184px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px var(--gap); align-items: start; }
.contact__aside { grid-column: 1 / 6; }
.contact__aside .lead { max-width: 15em; }
.contact__diag { margin-top: 18px; max-width: 24em; font-size: 16px; line-height: 1.5; color: var(--fg2); }
.contact__diag a { color: var(--acc); font-weight: 600; text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.direct { margin-top: 34px; display: grid; gap: 4px; }
.direct__k { color: var(--fg2); margin-bottom: 4px; }
.direct .tel { font-size: clamp(32px, 3.6vw, 56px); line-height: 1.04; font-weight: 560; font-stretch: 118%; letter-spacing: -.02em; text-decoration: none; justify-self: start; }
.direct .tel:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.direct .mail { font-size: 1.1em; font-weight: 600; justify-self: start; min-height: 44px; display: inline-flex; align-items: center; }
.direct .anno { margin-top: 4px; }
.ensuite { margin-top: 48px; max-width: 30em; }
.ensuite .items { margin-top: 12px; }
.form { grid-column: 6 / 13; }

/* Le formulaire : une feuille de demande, des champs francs. À côté, votre point grandit ×3 à chaque réponse obligatoire,
   de ×1 à ×81, comme les chapitres de la page ; il dit aussi ce qui manque encore. */
.demande {
  --jd: 162px;
  position: relative; color: var(--encre); --fg: var(--encre); --fg2: var(--graphite); --rule: var(--filet);
  background: var(--papier) var(--tex-paper); box-shadow: var(--sh-2);
  padding: clamp(20px, 2.6vw, 38px) clamp(18px, 2.8vw, 40px) clamp(24px, 2.8vw, 40px);
}
.demande__note { margin-top: 14px; font-size: 14.5px; line-height: 1.45; color: var(--graphite); }
.demande__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; margin-top: 22px; }
.champs { display: grid; gap: 22px; min-width: 0; }
.champ { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.champ > label, .champ > legend { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; padding: 0;
  font-weight: 600; font-size: 16.5px; line-height: 1.3; }
.champ > legend { margin-bottom: 8px; }
.opt { font: 400 12.5px/1.3 var(--ff-mono); letter-spacing: .02em; color: var(--graphite); white-space: nowrap; }
.champ input, .champ textarea {
  display: block; width: 100%; min-height: 50px; margin: 0; padding: 12px 14px; border-radius: 0;
  font: 400 17px/1.4 var(--ff); color: var(--encre); background: #FFFDF9; border: 1.5px solid var(--trait);
  transition: border-color 150ms ease;
}
.champ textarea { min-height: 112px; resize: vertical; }
.champ input:focus-visible, .champ textarea:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 2px; border-radius: 0; border-color: var(--encre); }
.aide { font-size: 14px; line-height: 1.4; color: var(--graphite); }
.choix__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.choix__o { position: relative; display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 10px 14px;
  background: #FFFDF9; border: 1.5px solid var(--trait); cursor: pointer; font-size: 16px; line-height: 1.3;
  transition: border-color 150ms ease, background-color 150ms ease; }
.choix__o input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choix__o i { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--encre); background: #FFFDF9;
  transition: background-color 150ms ease, box-shadow 150ms ease; }
.choix__o input:checked + i { background: var(--bordeaux); border-color: var(--bordeaux); box-shadow: inset 0 0 0 3px #FFFDF9; }
.choix__o:has(input:checked) { border-color: var(--bordeaux); background: #F8EAE6; }
.choix__o:has(input:focus-visible) { outline: 2px solid var(--bordeaux); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .choix__o:hover { border-color: var(--encre); } }
.demande [aria-invalid="true"] { border-color: var(--bordeaux); border-width: 2px; background: #FBF1EF; }
.choix:has(input[aria-invalid="true"]) .choix__o { border-color: var(--bordeaux); }
.form__info { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--filet); font-size: 14.5px; line-height: 1.45; color: var(--graphite); }
.form__info a { color: var(--bordeaux); font-weight: 600; }
.demande__note strong { color: var(--encre); font-weight: 600; }
.err { color: var(--bordeaux); font-size: 14px; font-weight: 600; line-height: 1.35; }
.err[hidden] { display: none; }

/* Votre point : 216 px de diamètre au bout, 8 px au départ ; ×3 à chaque réponse obligatoire (3 réponses, les cercles déjà dessinés) */
.jauge { display: none; }
.js .jauge { display: grid; grid-template-columns: var(--jd) minmax(0, 1fr); grid-template-areas: "k k" "d t" "m m";
  align-items: center; gap: 10px 22px; padding-top: 20px; border-top: 1px solid var(--filet); }
.jauge__k { grid-area: k; }
.jauge__d { grid-area: d; position: relative; width: var(--jd); height: var(--jd); }
.jauge__d svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.jauge__d circle { fill: none; stroke: #CDBFAC; stroke-width: 1; vector-effect: non-scaling-stroke; }
.jauge__d .jg-cible { stroke: var(--graphite); stroke-dasharray: 2 5; }
.jauge__pt { position: absolute; inset: 0; border-radius: 50%; background: var(--bordeaux); transform: scale(var(--s, .037037)); transition: transform 450ms var(--ease-out); }
.jauge[data-n="1"] { --s: .111111; }
.jauge[data-n="2"] { --s: .333333; }
.jauge[data-n="3"] { --s: 1; }
.jauge__txt { grid-area: t; }
.jauge__x { font: 650 clamp(38px, 3.2vw, 48px)/1 var(--ff); font-stretch: 62%; font-variant-numeric: tabular-nums; letter-spacing: .01em; color: var(--bordeaux); }
.jauge__t { margin-top: 8px; font-weight: 600; font-size: 17px; line-height: 1.3; }
.jauge__m { grid-area: m; font: 400 13px/1.5 var(--ff-mono); color: var(--graphite); }
.jauge__m:empty { display: none; }
@media (min-width: 1200px) {
  .js .demande__body { grid-template-columns: minmax(0, 1fr) var(--jd); column-gap: clamp(28px, 3vw, 44px); }
  .js .jauge { grid-column: 2; grid-row: 1; position: sticky; top: 104px; align-self: start;
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "k" "d" "t" "m"; gap: 14px; padding-top: 0; border-top: 0; }
}
@media (min-width: 1440px) { .demande { --jd: 216px; } }
.form__send { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; }
.form__send .btn { --bh: 56px; font-size: 16.5px; padding-inline: 28px; }
.form__status { font-weight: 600; color: var(--bordeaux); }
.form__status:empty { display: none; }
/* Champ piège pour les robots : hors de l’écran, ignoré par les lecteurs d’écran et le clavier */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form.is-sending button[type="submit"] { opacity: .6; pointer-events: none; }

/* Fin : retour au premier point */
.fin { position: relative; min-height: 78vh; min-height: 78svh; display: flex; flex-direction: column; }
.fin__mid { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 80px var(--gut) 40px; text-align: center; }
.fin__slogan { font-size: clamp(22px, 2.4vw, 34px); line-height: 1.15; font-weight: 500; font-stretch: 112%; letter-spacing: -.015em; }
.fin__dot { display: inline-flex; flex-direction: column; align-items: center; gap: 22px; padding: 28px 24px; text-decoration: none; border-radius: 12px; }
.fin__dot i { width: 7px; height: 7px; border-radius: 50%; background: var(--bordeaux); transition: transform .6s cubic-bezier(.3,.7,.2,1); }
.fin__dot:hover i, .fin__dot:focus-visible i { transform: scale(3); }
.fin__dot span { font-size: 13px; font-weight: 600; font-stretch: 90%; color: var(--fg2); }
.fin__dot span .num { color: var(--fg); margin-right: 6px; font-size: 14px; }
/* Bas de page : un seul bloc compact, centré, posé en bas de l’écran ; Lyon n’y est écrit qu’une fois */
.fin__info { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-block: 40px 30px; border-top: 1px solid var(--rule); text-align: center; }
.fin__logo { display: block; width: 150px; padding: 6px 0; }
.fin__logo svg { width: 100%; height: auto; }
.fin__qui { color: var(--fg2); font-size: .95em; line-height: 1.5; text-wrap: balance; }
.fin__contact { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 16px; }
.fin__pt { width: 5px; height: 5px; border-radius: 50%; background: var(--bordeaux); }
.fin__tel { font-size: 19px; line-height: 1.1; font-weight: 560; font-stretch: 112%; letter-spacing: -.01em; text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center; }
.fin__a { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.fin__legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; column-gap: 22px; font-size: 14.5px; }
/* Le geste du planning : une ligne bordeaux se remplit sous le lien au survol */
.fin__legal a { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; text-decoration: none; }
.fin__legal a::before, .fin__legal a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; pointer-events: none; }
.fin__legal a::before { height: 1px; background: var(--trait); }
.fin__legal a::after { height: 2px; background: var(--bordeaux); transform: scaleX(0); transform-origin: 0 50%; transition: transform 150ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .fin__legal a:hover::after { transform: scaleX(1); transition-duration: 220ms; } }
.fin__legal a:focus-visible::after { transform: scaleX(1); }
.fin__base { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--fg2); }
/* Sur grand écran, la dernière ligne passe au-dessus des commandes fixes du bas */
@media (min-width: 1024px) { .fin__info { padding-bottom: calc(44px + 2 * var(--edge) + 10px); } }
@media (max-width: 359.98px) { .fin__pt { display: none; } }

/* ---------- Informations légales : une feuille posée par-dessus la page ---------- */
.legal { --bg: var(--papier); width: min(900px, 100% - 32px); max-width: none; max-height: min(88vh, 1100px); max-height: min(88dvh, 1100px);
  margin: auto; padding: 0; border: 0; color: var(--encre); background: var(--papier) var(--tex-paper); box-shadow: var(--sh-2); overflow: hidden; }
.legal__head { flex: none; padding: 20px clamp(18px, 3vw, 40px) 18px; border-bottom: 1px solid var(--filet); }
.legal__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
.legal__t { font-size: clamp(28px, 3vw, 44px); line-height: 1; font-weight: 560; font-stretch: 108%; letter-spacing: -.025em; text-wrap: balance; }
.legal__body { overflow-y: auto; overscroll-behavior: contain; padding: 6px clamp(18px, 3vw, 40px) 40px; font-size: 16px; line-height: 1.6; }
.legal__body h3 { margin: 32px 0 0; font-size: 19px; line-height: 1.3; font-weight: 600; font-stretch: 104%; letter-spacing: -.01em; }
.legal__body p, .legal__body ul { margin: 10px 0 0; max-width: 66ch; }
.legal__body ul { list-style: disc; padding-left: 1.15em; }
.legal__body li + li { margin-top: 4px; }
.legal__body li::marker { color: var(--bordeaux); }
.legal__body a { color: var(--bordeaux); font-weight: 600; }
.legal__intro { margin-top: 18px !important; font: 400 13.5px/1.55 var(--ff-mono); color: var(--graphite); }
.legal__voir { margin-top: 40px !important; padding-top: 16px; border-top: 1px solid var(--filet); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.legal__voir .lbl { color: var(--graphite); }
.legal__table { margin-top: 14px; }
.legal__table table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.45; }
.legal__table th, .legal__table td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--filet); }
.legal__table thead th { padding-block: 8px; border-bottom: 1.5px solid var(--encre); font: 500 11px/1.4 var(--ff-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--graphite); }
.legal__table tbody th { font-weight: 600; }

/* ---------- Sommaire : sans JS, un bloc en fin de page ; avec JS, un disque qui s’ouvre depuis le bouton ---------- */
.menu { position: relative; padding: 72px var(--gut) 88px; }
.menu__top { display: none; }
.menu__title { margin-bottom: 18px; }
.menu__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 44px clamp(32px, 5vw, 96px); align-items: start; }
.menu__list { border-top: 1px solid var(--rule); }
.menu__list a { display: grid; grid-template-columns: 3em minmax(0, 1fr); align-items: baseline; column-gap: 14px;
  padding: 18px 0 20px; border-bottom: 1px solid var(--rule); text-decoration: none; }
.m-n { font: 500 14px/1 var(--ff-mono); letter-spacing: .04em; color: var(--rose); }
.m-t { display: block; font-size: clamp(32px, 4.2vw, 58px); line-height: 1.02; font-weight: 560; letter-spacing: -.02em;
  transition: transform 150ms var(--ease-out); }
.m-s { grid-column: 2; font-size: 15px; line-height: 1.4; color: var(--fg2); margin-top: 6px; }
.menu a[aria-current] .m-s::after { content: " · vous êtes ici"; color: var(--rose); }
.menu__more { border-top: 1px solid var(--rule); }
.menu__more a { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 58px; border-bottom: 1px solid var(--rule);
  text-decoration: none; font-size: clamp(20px, 1.7vw, 25px); font-weight: 560; letter-spacing: -.01em; }
.menu__more a::after { content: "→"; font: 400 17px/1 var(--ff-mono); color: var(--rose); transition: transform 150ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .menu__list a:hover .m-t { transform: translateX(8px); transition-duration: 220ms; }
  .menu__more a:hover::after { transform: translateX(5px); transition-duration: 220ms; }
}
.menu__contact { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.menu__contact a:not(.btn) { font-weight: 600; font-size: 17px; min-height: 44px; display: inline-flex; align-items: center; }
/* À l’ouverture, les entrées arrivent l’une après l’autre (une fois le disque ouvert) */
.motion .menu li { opacity: 0; transform: translateY(12px); transition: opacity 120ms ease, transform 120ms var(--ease-out); }
.motion .menu.is-open li { opacity: 1; transform: none;
  transition: opacity 300ms ease calc(180ms + var(--i, 0) * 50ms), transform 420ms var(--ease-out) calc(180ms + var(--i, 0) * 50ms); }
@media (max-width: 899.98px) { .menu__grid { grid-template-columns: minmax(0, 1fr); } }
.menu__close { display: none; }

.js .menu {
  position: fixed; inset: 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--edge) + 76px) var(--gut) 48px; visibility: hidden;
  clip-path: circle(0px at var(--mx, 100%) var(--my, 0%));
  transition: clip-path .62s cubic-bezier(.65, 0, .2, 1), visibility 0s linear .62s;
}
.js .menu.is-open { visibility: visible; clip-path: circle(var(--mr, 150vmax) at var(--mx, 100%) var(--my, 0%)); transition: clip-path .62s cubic-bezier(.65, 0, .2, 1), visibility 0s; }
.js .menu__top { display: block; }
.js .menu__top .c-logo, .js .menu__top .menu__close { position: fixed; }
.js .menu__close { display: inline-flex; top: var(--edge); right: var(--edge); --bh: 44px; padding: 0 16px 0 14px; font-size: 15px; }
.menu__in { max-width: 1100px; margin: 0 auto; }
.js .menu__title { margin-top: 2vh; }
html.menu-open, html.menu-open body { overflow: hidden; }


/* =========================================================================
   L’atelier dans l’échelle : objets posés sur la table, annotés au crayon
   ========================================================================= */
.lbl { font: 500 11px/1.4 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg2); }
.anno { display: block; font: italic 400 14px/1.4 var(--ff-mono); color: var(--bordeaux); }
.anno::before { content: "↳ "; content: "↳ " / ""; font-style: normal; }
.paper { background: var(--papier) var(--tex-paper); color: var(--encre); box-shadow: var(--sh-1); --fg: var(--encre); --fg2: var(--graphite); }
.sheet-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--filet);
  font: 500 11px/1.4 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); }
.sheet-label span:last-child { white-space: nowrap; }

/* ×3 · La planche de l’identité : nuancier, épure, carte de visite */
.case__text { grid-column: 1 / 5; }
.case__fig { grid-column: 5 / 13; }
.case__text .legend { margin-top: 40px; }
.planche {
  position: relative; color: var(--encre); --fg: var(--encre); --fg2: var(--graphite); --rule: #C9B697;
  background-color: var(--sable); background-image: var(--tex-noise); box-shadow: var(--sh-2); transform: rotate(-.5deg);
  padding: clamp(18px, 2.2vw, 30px) clamp(18px, 2.4vw, 34px) clamp(22px, 2.6vw, 36px);
  display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-areas: "head head" "fan side"; gap: 26px 30px;
}
.planche > .sheet-label { grid-area: head; border-color: #C9B697; }
.nuancier { grid-area: fan; position: relative; width: 300px; height: 372px; align-self: end; }
.fan { position: absolute; left: 60px; bottom: 64px; width: 0; height: 0; }
.swatch {
  position: absolute; left: -22px; bottom: -22px; width: 88px; height: 250px; padding: 8px 8px 0; background: #fff;
  box-shadow: 0 1px 2px rgba(46,32,14,.22), 0 6px 12px -6px rgba(46,32,14,.3);
  transform-origin: 22px 228px; transform: rotate(calc(var(--i) * 14deg - 10deg));
}
.swatch .nm { display: block; font: 600 12.5px/1.1 var(--ff); font-stretch: 76%; color: var(--encre); }
.swatch .hx { display: block; margin-top: 3px; font: 400 10.5px/1.2 var(--ff-mono); color: var(--graphite); }
.swatch .sw { position: absolute; left: 0; right: 0; top: 56px; bottom: 0; background: var(--c); }
.fan .rivet { position: absolute; left: -7px; bottom: -7px; z-index: 9; width: 14px; height: 14px; border-radius: 50%; background: #9A938A; box-shadow: inset 0 0 0 3px #C9C2B8; }
.nuancier__lbl { position: absolute; right: 0; bottom: 6px; color: var(--graphite); }
.planche__side { grid-area: side; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.epure { width: min(100%, 360px); background: var(--papier) var(--tex-paper); box-shadow: var(--sh-1); padding: 12px 14px 12px; transform: rotate(-1.2deg); }
.epure svg { width: 100%; height: auto; overflow: visible; }
.epure .ln { fill: none; stroke: var(--encre); stroke-width: 1; vector-effect: non-scaling-stroke; }
.epure .dash { stroke-dasharray: 3 4; stroke: var(--rose-fonce); }
.epure .fill { fill: var(--bordeaux); stroke: none; }
.epure .ep-t { font-family: var(--ff-mono); font-size: 4px; fill: var(--rose-fonce); letter-spacing: .02em; }
.epure figcaption { margin-top: 6px; color: var(--graphite); }
.cartes { display: flex; align-items: flex-start; padding: 2px 0 0; }
.carte { flex: none; width: 60%; aspect-ratio: 85 / 55; box-shadow: 0 1px 1px rgba(46,32,14,.18), 0 10px 16px -10px rgba(46,32,14,.45); }
.carte.recto { display: grid; place-items: center; background: var(--ivoire); transform: rotate(3deg); }
.carte.recto svg { width: 34%; height: auto; }
.carte.verso { position: relative; z-index: 1; margin: 30px 0 0 -18%; padding: 7% 5%; background: var(--encre); container-type: inline-size; color: var(--ivoire);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9%; text-align: center; transform: rotate(-2.5deg); }
.carte.verso svg { display: block; width: 52%; height: auto; }
.carte.verso p { font-size: clamp(10.5px, .85vw, 12.5px); line-height: 1.45; color: var(--gris); }
.carte.verso p b { color: var(--ivoire); font-weight: 600; white-space: nowrap; font-size: min(1em, 6cqw); }
.planche .anno { max-width: 24em; }

/* ×27 · Les tirages : les études de style défilent à l’horizontale, scotchées sur la table */
.tirages { margin-top: clamp(88px, 11vw, 168px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--rule); }
.tirages__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px var(--gap); align-items: end; }
.tirages__head > div:first-child { grid-column: 1 / 7; }
.tirages__head .txt { grid-column: 8 / 13; margin-top: 0; }
.tirages__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 24px; margin-top: clamp(40px, 4.4vw, 64px); }
.tirages__how { color: var(--fg); }
.no-js .tirages__how .m { display: none; }
.rangee {
  position: relative; display: flex; align-items: flex-start; gap: clamp(20px, 2.2vw, 36px);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--gut);
  margin-inline: calc(-1 * var(--gut)); padding: 30px var(--gut) 40px;
  scrollbar-width: thin; scrollbar-color: var(--graphite) transparent;
}
.js .rangee { scrollbar-width: none; }
.js .rangee::-webkit-scrollbar { display: none; }
.rangee::after { content: ""; flex: 0 0 1px; }
.rangee:focus-visible { outline: 2px solid var(--focus); outline-offset: -6px; border-radius: 6px; }
@media (pointer: fine) { .js .rangee { cursor: grab; } .js .rangee.is-drag { cursor: grabbing; scroll-snap-type: none; } }
.rangee.is-drag .print { pointer-events: none; }
.print {
  position: relative; flex: 0 0 auto; width: min(80vw, var(--w)); margin-top: var(--y, 0px); scroll-snap-align: start;
  background: #fff; padding: 10px 10px 2px; box-shadow: var(--sh-1); transform: rotate(var(--r, 0deg)); color: var(--encre);
}
.print img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: #D9D0C0; -webkit-user-drag: none; user-select: none; }
.print figcaption { padding: 14px 4px 16px; }
.print .nm { display: block; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.25; }
.print .nm b { font-weight: 650; }
.print .lbl { display: block; margin-top: 7px; color: var(--graphite); }
.print figcaption.avec-anno { padding-bottom: 0; }   /* l’annotation est dans la légende : même rendu qu’avant (16 + 14 px sous la légende) */
.print figcaption .anno { margin: 30px -4px 0; }
.tape { position: absolute; z-index: 3; width: 88px; height: 26px; background: rgba(246,241,231,.82); box-shadow: 0 1px 1px rgba(46,32,14,.12);
  clip-path: polygon(0 10%, 4% 0, 8% 12%, 12% 0, 88% 0, 92% 10%, 96% 0, 100% 12%, 100% 88%, 96% 100%, 92% 90%, 88% 100%, 12% 100%, 8% 88%, 4% 100%, 0 90%); }
.tape.tl { left: -26px; top: -6px; transform: rotate(-34deg); }
.tape.tr { right: -26px; top: -6px; transform: rotate(32deg); }
.tape.tc { left: calc(50% - 44px); top: -14px; transform: rotate(-2deg); }
.rangee__nav { display: none; }
.js .rangee__nav { display: flex; align-items: center; gap: 16px; margin-top: -4px; }
.rangee__count { font: 500 12.5px/1 var(--ff-mono); letter-spacing: .06em; color: var(--fg2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rangee__count b { font-weight: 500; color: var(--fg); }
.rangee__track { position: relative; flex: 1; height: 4px; border-radius: 2px; background: rgba(20,17,18,.13); overflow: hidden; }
.rangee__track i { position: absolute; left: 0; top: 0; bottom: 0; width: 25%; border-radius: 0; background: var(--rose-fonce); }
.rangee__btn {
  --o: 0%;
  position: relative; isolation: isolate; overflow: hidden; flex: none; display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 0;
  border: 1.5px solid var(--encre); background: transparent; color: var(--encre); cursor: pointer;
}
.rangee__btn[data-dir="-1"] { --o: 100%; }
.rangee__btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--rose);
  clip-path: circle(0 at var(--o) 50%); -webkit-clip-path: circle(0 at var(--o) 50%); transition: clip-path 150ms var(--ease-out), -webkit-clip-path 150ms var(--ease-out);
}
.rangee__btn { transition: transform 160ms var(--ease-out); }
.rangee__btn:active { transform: scale(.97); }
.rangee__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) {
  .rangee__btn:hover::before { clip-path: circle(150% at var(--o) 50%); -webkit-clip-path: circle(150% at var(--o) 50%); transition-duration: 250ms; }
}
.rangee__btn:focus-visible::before { clip-path: circle(150% at var(--o) 50%); -webkit-clip-path: circle(150% at var(--o) 50%); transition: none; }
.rangee__btn[aria-disabled="true"] { opacity: .35; cursor: default; }
.rangee__btn[aria-disabled="true"]::before { clip-path: circle(0 at var(--o) 50%); -webkit-clip-path: circle(0 at var(--o) 50%); }
html:not(.motion) .rangee__btn::before { transition: none !important; }

/* ×81 · Le planning : la méthode sur une feuille, de la plus courte à la plus longue étape */
.method { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px var(--gap); align-items: start; }
.method:focus { outline: none; }
.method__head { grid-column: 1 / 6; position: sticky; top: 110px; }
.method__head .lead { max-width: 13em; }
.planning { grid-column: 6 / 13; padding: clamp(20px, 2.4vw, 34px) clamp(20px, 2.8vw, 40px) clamp(18px, 2vw, 28px); }
.g-steps { margin-top: 6px; }
.g-step { position: relative; padding: 24px 0 26px 38px; }
.g-step::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 3px; background: var(--encre); }
.g-step:first-child::before { top: 32px; }
.g-step:last-child::before { bottom: auto; height: 32px; }
.g-step::after { content: ""; position: absolute; left: 0; top: 25px; width: 15px; height: 15px; border-radius: 50%; background: var(--papier); border: 3px solid var(--encre); }
.g-step:first-child::after { background: var(--bordeaux); border-color: var(--bordeaux); }
.g-step h3 { display: flex; align-items: baseline; gap: 12px; font: 650 clamp(21px, 1.75vw, 26px)/1.15 var(--ff); letter-spacing: -.015em; }
.g-step h3 .n { font: 500 13px/1 var(--ff-mono); letter-spacing: .02em; color: var(--graphite); }
.g-desc { margin-top: 8px; color: var(--graphite); max-width: 32em; }
.g-bar { display: inline-flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 16px; padding: 10px 16px; background: var(--encre) var(--tex-ink); color: var(--rose);
  font: 500 13.5px/1.35 var(--ff-mono); letter-spacing: .03em; }
.g-bar--long { display: flex; }
.g-step .anno { margin-top: 12px; }
.g-foot { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--filet); font-size: 14.5px; line-height: 1.5; color: var(--graphite); }
/* Le point descend d’étape en étape, au défilement (avec JavaScript et mouvement autorisé) ; il grandit en chemin */
.planning, .g-steps { position: relative; }
.g-rail { display: none; }
.planning.is-live .g-rail { display: block; position: absolute; z-index: 2; width: 3px; pointer-events: none; }
.g-rail__fill { position: absolute; inset: 0; background: var(--encre); transform-origin: 50% 0; transform: scaleY(0); }
.g-rail__dot { position: absolute; left: 1.5px; top: 0; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%;
  background: var(--bordeaux); box-shadow: 0 0 0 3px var(--papier), 0 3px 8px rgba(107,21,32,.35); will-change: transform; }
.planning.is-live .g-step::before { background: #D3C9B9; }
.planning.is-live .g-step::after { border-color: var(--graphite); background: var(--papier); transition: background-color .3s ease, border-color .3s ease; }
.planning.is-live .g-step.is-on::after { background: var(--rose); border-color: var(--encre); }
.planning.is-live .g-step h3 .n { transition: color .3s ease; }
.planning.is-live .g-step.is-on h3 .n { color: var(--bordeaux); }
.planning.is-live .g-step .anno { clip-path: inset(0 100% 0 0); transition: clip-path .9s cubic-bezier(.3, .7, .2, 1) .1s; }
.planning.is-live .g-step.is-seen .anno { clip-path: inset(0 0 0 0); }

@media (min-width: 900px) {
  /* grand écran : le nuancier à l’échelle de la planche */
  .planche { grid-template-columns: 380px minmax(0, 1fr); }
  .nuancier { width: 380px; height: 452px; }
  .fan { left: 76px; bottom: 78px; transform: scale(1.28); transform-origin: 0 0; }
}
@media (max-width: 1199.98px) {
  .case__text, .case__fig { grid-column: 1 / -1; }
  .zones__head { grid-column: 1 / -1; }
  .cercles { grid-column: 1 / -1; justify-self: start; max-width: 820px; }
  .case__text { max-width: 40em; }
}
@media (max-width: 899.98px) {
  .tirages__head > div:first-child, .tirages__head .txt { grid-column: 1 / -1; }
  .method__head, .planning { grid-column: 1 / -1; }
  .method__head { position: static; }
}
@media (max-width: 699.98px) {
  .planche { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "fan" "side"; gap: 18px; }
  .nuancier { justify-self: center; }
  .planning { margin-inline: calc(-1 * var(--gut) + 8px); }
  .g-step { padding-left: 32px; }
}
@media (max-width: 699.98px) {
  .cercles__wide { display: none; }
  .cercles__narrow { display: block; max-width: 340px; margin-inline: auto; }
  .cercles__leg { display: block; }
}
@media (max-width: 599.98px) {
  .planche { margin-inline: calc(-1 * var(--gut) + 8px); }
  .tirages__bar { flex-direction: column; }
  .rangee__nav { gap: 12px; }
  .rangee__track { display: none; }
  .rangee__count { margin-right: auto; }
  .anno { font-size: 13.5px; }
}

/* ---------- Mouvement réduit : tout est posé, rien ne bouge ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
}

/* ---------- Tablette ---------- */
@media (max-width: 1099.98px) {
  .offer__head { grid-column: 1 / 8; }
  .offer__list { grid-column: 8 / 13; }
}
@media (max-width: 899.98px) {
  .offer__head, .offer__list, .case__text, .case__fig, .local__text, .map, .agency__text, .photo, .zones__head, .cercles, .contact__aside, .form { grid-column: 1 / -1; }
  .agency__text { max-width: 40em; }
  .photo { max-width: 720px; }
  .offer, .case, .local, .agency, .contact { row-gap: 40px; }
  .map { margin-top: 0; }
  .qa h3 { grid-column: 1 / -1; }
  .qa p { grid-column: 1 / -1; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 599.98px) {
  .open { bottom: calc(64px + env(safe-area-inset-bottom) + 26px); }
  .open__line { font-size: 13.5px; }
  .open__line .sep--2 { display: none; }
  .open__what { display: block; font-weight: 500; color: var(--fg2); }
  .open__phrase { font-size: clamp(27px, 7.6vw, 34px); margin-top: 12px; }
  :root { --pin: 75vh; }
  .hint { top: calc(50% + 24px); font-size: 14px; }
  .ml--r { font-size: 12px; }
  .disc { padding-bottom: calc(64px + env(safe-area-inset-bottom) + 30px); }
  @supports (height: 100svh) {
    .motion .disc { padding-bottom: calc(100lvh - 100svh + 64px + env(safe-area-inset-bottom) + 30px); }
    .motion .open { bottom: calc(100lvh - 100svh + 64px + env(safe-area-inset-bottom) + 26px); }
  }
  .giant .gl { display: block; }
  .giant { --fit: var(--fitm) !important; line-height: .86; }
  .h2 { font-size: clamp(38px, 11vw, 46px); }
  .legend { grid-template-columns: 1fr; gap: 10px; }
  .photo__print { margin-inline: -6px; }
  .demande { margin-inline: calc(-1 * var(--gut) + 8px); }
  .bu-leg { grid-template-columns: 1fr; font-size: 12.5px; }
  .choix__o { gap: 10px; padding: 10px 12px; font-size: 15px; }
  .form__send .btn { width: 100%; }
  .menu__list a { grid-template-columns: 2.4em minmax(0, 1fr); column-gap: 8px; padding: 14px 0 16px; }
  .m-t { font-size: clamp(28px, 8.4vw, 34px); }
  .fin__maq { padding-bottom: 40px; }
  .legal { width: 100%; max-height: 100%; height: 100%; max-height: 100dvh; height: 100dvh; }
  .legal__bar { align-items: flex-start; }
  .legal__close { --bh: 44px; padding-inline: 16px; }
  .legal__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .legal__table tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--filet); }
  .legal__table tbody th, .legal__table td { display: grid; grid-template-columns: 7.6em minmax(0, 1fr); gap: 10px; padding: 4px 0; border: 0; }
  .legal__table tbody th::before, .legal__table td::before { content: attr(data-label); font: 500 10.5px/1.6 var(--ff-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--graphite); font-weight: 500; }
  .faq__head { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   Pages intérieures (informations légales, 404, confirmation d’envoi).
   Même matière que l’accueil : fond ivoire, une feuille posée, l’étiquette d’atelier, le bas de page commun.
   ========================================================================= */
.haut { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: calc(var(--edge) + env(safe-area-inset-top, 0px)) 8px;
  padding-left: max(var(--edge), env(safe-area-inset-left, 0px)); padding-right: max(var(--edge), env(safe-area-inset-right, 0px)); }
.haut__logo { display: block; width: 168px; padding: 10px 0; }
.haut__logo svg { width: 100%; height: auto; }
.haut__nav { display: flex; align-items: center; gap: 10px; }

.page { padding: clamp(28px, 6vh, 72px) var(--gut) clamp(64px, 10vh, 120px); }
/* La feuille légale, posée dans la page */
.legal.legal--page { width: min(900px, 100%); height: auto; max-height: none; overflow: visible; margin: 0 auto; background: var(--papier) var(--tex-paper); color: var(--encre); box-shadow: var(--sh-2); }
.legal--page .legal__head { padding: 20px clamp(18px, 3vw, 40px) 22px; }
.legal--page .legal__t { margin-top: 18px; font-size: clamp(32px, 4vw, 56px); }
.legal--page .legal__body { overflow: visible; padding-bottom: clamp(32px, 5vw, 56px); }
.legal__body :is(h3, li, p) { overflow-wrap: anywhere; }

/* 404 et confirmation : le premier point, un message, un geste */
.seul { min-height: 62vh; min-height: 62svh; display: grid; place-items: center; text-align: center; }
.seul__in { display: grid; justify-items: center; gap: 22px; max-width: 34em; }
.seul__pt { width: 14px; height: 14px; border-radius: 50%; background: var(--bordeaux); margin-bottom: 18px; }
.seul__t { font-size: clamp(36px, 5vw, 72px); line-height: 1; font-weight: 560; font-stretch: 108%; letter-spacing: -.028em; text-wrap: balance; }
.seul__p { color: var(--fg2); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; text-wrap: pretty; }
.seul__p a { color: var(--bordeaux); font-weight: 600; white-space: nowrap; }
.seul__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }
.motion .seul__pt { animation: seul-pt 900ms var(--ease-out) both; }
@keyframes seul-pt { from { transform: scale(.4); opacity: 0; } }

@media (max-width: 560px) {
  .haut__logo { width: 132px; }
  .haut__nav .btn--ghost { display: none; }
}
/* Sur une page, les intertitres du texte légal sont des h2 (le titre de la page est le h1) */
.legal--page .legal__body h2 { margin: 32px 0 0; font-size: 19px; line-height: 1.3; font-weight: 600; font-stretch: 104%; letter-spacing: -.01em; scroll-margin-top: 24px; }

/* =========================================================================
   Page « Diagnostic offert » : la page d'arrivée des annonces.
   Même matière que l'accueil : fond ivoire, feuilles posées, annotations au crayon, le planning validé.
   Un seul objet fort : la page écrite remise après le diagnostic (exemple sur une entreprise fictive).
   ========================================================================= */
.dg { display: block; }
.dg-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 56px var(--gap); align-items: center;
  padding-block: clamp(28px, 6vh, 72px) 0; }
.dg-hero__txt { grid-column: 1 / 7; }
.dg-hero__t { margin-top: .32em; font-size: clamp(40px, 5.1vw, 80px); line-height: .98; font-weight: 560; font-stretch: 108%;
  letter-spacing: -.028em; text-wrap: balance; }
.dg-hero .lead { max-width: 22em; }
.dg-hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.dg-hero__btns .btn { --bh: 54px; }
.dg-hero__anno { margin-top: 18px; }

/* La page remise : une feuille posée, trois priorités dans l'ordre */
.dg-page { grid-column: 8 / 13; margin: 0; box-shadow: var(--sh-2); transform: rotate(.6deg);
  padding: clamp(20px, 2.4vw, 32px) clamp(20px, 2.6vw, 36px) clamp(20px, 2.2vw, 30px); }
.dg-page__head { margin-top: 18px; }
.dg-page__qui { font: 650 clamp(21px, 1.7vw, 25px)/1.15 var(--ff); font-stretch: 104%; letter-spacing: -.015em; }
.dg-page__fictif { margin-top: 6px; font: 400 12.5px/1.4 var(--ff-mono); letter-spacing: .02em; color: var(--graphite); }
.dg-prio { margin-top: 18px; }
.dg-prio li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 18px 0 20px; border-top: 1px solid var(--filet); }
.dg-prio__n { font: 650 clamp(46px, 3.6vw, 58px)/.86 var(--ff); font-stretch: 62%; font-variant-numeric: tabular-nums; color: var(--bordeaux); }
.dg-prio__k { font: 500 11px/1.4 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); }
.dg-prio__t { margin-top: 5px; font-weight: 600; font-size: 1.02em; line-height: 1.35; }
.dg-prio__d { margin-top: 4px; color: var(--graphite); font-size: .95em; line-height: 1.45; }
.dg-prio .g-bar { margin-top: 12px; padding: 8px 12px; font-size: 13px; }
.dg-page__anno { padding-top: 14px; border-top: 1px solid var(--filet); }
/* Une seule entrée orchestrée : les trois priorités se posent l'une après l'autre */
.motion .dg-prio li { animation: dg-pose 560ms var(--ease-out) both; }
.motion .dg-prio li:nth-child(1) { animation-delay: 260ms; }
.motion .dg-prio li:nth-child(2) { animation-delay: 340ms; }
.motion .dg-prio li:nth-child(3) { animation-delay: 420ms; }
.motion .dg-page__anno { animation: dg-trait 900ms cubic-bezier(.3, .7, .2, 1) 800ms both; }
@keyframes dg-pose { from { opacity: 0; transform: translateY(10px); } }
@keyframes dg-trait { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Le déroulé : le planning de l'accueil, à l'échelle de trente minutes */
.dg-deroule { margin-top: clamp(104px, 12vw, 184px); }

/* Réservation */
.dg-resa { margin-inline: auto; }
.dg-resa:focus { outline: none; }
.dg-resa .ensuite { margin-top: 40px; }
.dg-resa .direct { margin-top: 40px; }
.dg-form { grid-column: 6 / 13; min-width: 0; }
.dg-o__quand { display: block; margin-top: 2px; font: 400 12.5px/1.3 var(--ff-mono); letter-spacing: .02em; color: var(--graphite); }

/* Après l'envoi : le point a grandi, reste le créneau */
.dg-suite { display: grid; justify-items: start; }
.dg-suite[hidden] { display: none; }
.dg-suite__pt { width: 56px; height: 56px; margin-top: 26px; border-radius: 50%; background: var(--bordeaux); }
.motion .dg-suite__pt { animation: dg-pt 700ms var(--ease-out) both; }
@keyframes dg-pt { from { transform: scale(.33); } }
.dg-suite__t { margin-top: 22px; font: 600 clamp(26px, 2.3vw, 36px)/1.1 var(--ff); font-stretch: 106%; letter-spacing: -.02em; text-wrap: balance; max-width: 18em; }
.dg-suite__t:focus { outline: none; }
.dg-suite__p { margin-top: 12px; color: var(--graphite); max-width: 32em; }
.dg-suite__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.dg-suite__btns .btn { --bh: 56px; font-size: 16.5px; padding-inline: 28px; }
.dg-suite__note { margin-top: 12px; font: 400 13px/1.5 var(--ff-mono); color: var(--graphite); }
.dg-suite__p2 { margin-top: 16px; max-width: 32em; }
.dg-suite__p2 a, .dg-suite__aide a { color: var(--bordeaux); font-weight: 600; }
.dg-suite__aide { justify-self: stretch; margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--filet); font-size: 14.5px; color: var(--graphite); }

/* Réservation en ligne : la semaine, le jour, puis l'heure. Minimaliste : des mots, des filets, le choix en bordeaux.
   Jamais de nombre de créneaux libres, et trois heures au plus par jour (choix de la direction de NUMIDE : ne pas donner l'impression d'un agenda vide). */
.dg-cr { justify-self: stretch; display: grid; gap: 14px; margin-top: 24px; }
.dg-cr[hidden] { display: none; }
.dg-cr button { font: inherit; color: inherit; cursor: pointer; border-radius: 0; background: none; -webkit-tap-highlight-color: transparent; }
.dg-cr button:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 2px; }
.dg-cr__sem { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-inline: -12px; }
.dg-cr__semt { font: 500 12px/1.4 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); text-align: center; }
.dg-cr__nav { flex: none; display: grid; place-items: center; width: 44px; height: 36px; padding: 0; border: 0; color: var(--encre); }
.dg-cr__nav svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; }
.dg-cr__nav:disabled { color: #B9AE9C; cursor: default; }
.dg-cr__jours { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); border-bottom: 1px solid var(--filet); }
.dg-cr__j { display: flex; justify-content: center; align-items: baseline; gap: 5px; min-height: 44px; padding: 8px 2px 10px; border: 0;
  box-shadow: inset 0 -2px 0 transparent; transition: box-shadow 150ms ease, color 150ms ease; }
.dg-cr__jw { font: 500 11.5px/1 var(--ff-mono); letter-spacing: .04em; color: var(--graphite); }
.dg-cr__jn { font: 600 18px/1 var(--ff); font-stretch: 62%; font-variant-numeric: tabular-nums; }
.dg-cr__j[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--bordeaux); color: var(--bordeaux); }
.dg-cr__j[aria-pressed="true"] .dg-cr__jw { color: var(--bordeaux); }
.dg-cr__j:disabled { color: #B9AE9C; cursor: default; }
.dg-cr__j:disabled .dg-cr__jw { color: #B9AE9C; }
.dg-cr__heures { display: flex; flex-wrap: wrap; gap: 8px; min-height: 42px; padding-top: 4px; }
.dg-cr__b { min-width: 84px; min-height: 42px; padding: 0 14px; border: 1px solid var(--trait);
  font: 500 15px/1 var(--ff-mono); font-variant-numeric: tabular-nums; letter-spacing: .01em;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, transform 160ms var(--ease-out); }
.dg-cr__b:active { transform: scale(.97); }
.dg-cr__b[aria-pressed="true"] { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--ivoire); }
@media (hover: hover) and (pointer: fine) {
  .dg-cr__nav:not(:disabled):hover { color: var(--bordeaux); }
  .dg-cr__j:not(:disabled):not([aria-pressed="true"]):hover { box-shadow: inset 0 -2px 0 var(--filet); }
  .dg-cr__b:not([aria-pressed="true"]):hover { border-color: var(--encre); }
}
.motion .dg-cr__b { animation: dg-pose 240ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
.dg-cr__vide { font-size: 15px; color: var(--graphite); align-self: center; }
.dg-cr__choix { display: grid; gap: 14px; padding-top: 16px; border-top: 1px solid var(--filet); }
.dg-cr__rappel { font-size: 15.5px; line-height: 1.4; color: var(--graphite); }
.dg-cr__rappel b { color: var(--encre); font-weight: 600; }
.dg-cr__choix .form__send { margin-top: 0; }
.dg-cr .btn[aria-disabled="true"] { opacity: .45; }
.dg-cr__aucun { font-size: 14px; line-height: 1.45; color: var(--graphite); max-width: 32em; }
.dg-suite__p strong { color: var(--encre); font-weight: 600; }

/* En-tête : sur téléphone, le bouton dit l'essentiel */
.dg-court { display: none; }

/* Barre de réservation, sur téléphone seulement, entre la première promesse et le formulaire */
.dg-barre { display: none; }
@media (max-width: 699.98px) {
  .js .dg-barre {
    position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px;
    padding-block: 10px calc(10px + env(safe-area-inset-bottom, 0px));
    padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px));
    background: var(--ivoire); border-top: 1px solid var(--filet);
    transform: translateY(110%); visibility: hidden; transition: transform 150ms var(--ease-out), visibility 0s linear 150ms;
  }
  .js .dg-barre.is-on { transform: none; visibility: visible; transition: transform 220ms var(--ease-out); }
  .dg-barre .btn { --bh: 48px; padding-inline: 18px; }
}

/* Tablette et téléphone */
@media (max-width: 1099.98px) {
  .dg-hero__txt { grid-column: 1 / 8; }
  .dg-page { grid-column: 8 / 13; }
}
@media (max-width: 899.98px) {
  .dg-hero__txt, .dg-page, .dg-form { grid-column: 1 / -1; }
  .dg-page { max-width: 560px; }
}
@media (max-width: 599.98px) {
  .dg-hero { row-gap: 44px; }
  .dg-hero__btns .btn { flex: 1 1 100%; }
  .dg-page { transform: none; margin-inline: calc(-1 * var(--gut) + 8px); }
  .dg-prio li { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; }
  .dg-long { display: none; }
  .dg-court { display: inline; }
}
.dg-deroule .method__head { top: 40px; }
.dg-suite > .sheet-label { justify-self: stretch; }
/* ---------- Cookies : rien n’est chargé avant le choix ; « Non. » et « Oui. » ont le même poids ---------- */
.ck { position: fixed; z-index: 50; }
.ck[hidden] { display: none; }
.ck p { margin: 0; }
.no-js .fin__legal li:has([data-ck-ouvrir]) { display: none; }
.fin__legal button { position: relative; display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 500; cursor: pointer; }
.fin__legal button::before, .fin__legal button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; pointer-events: none; }
.fin__legal button::before { height: 1px; background: var(--trait); }
.fin__legal button::after { height: 2px; background: var(--bordeaux); transform: scaleX(0); transform-origin: 0 50%; transition: transform 150ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .fin__legal button:hover::after { transform: scaleX(1); transition-duration: 220ms; } }
.fin__legal button:focus-visible::after { transform: scaleX(1); }

/* Oui ou non : un point qui s’étire en une seule ligne ; la réponse en deux mots égaux */
.ck--d { right: var(--edge); bottom: var(--edge); width: min(700px, calc(100vw - 2 * var(--edge))); }
body:has(.c-cta) .ck--d { bottom: calc(var(--edge) + 62px); }
.ck--d .ck__fond { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; background: var(--encre) var(--tex-ink); color: var(--ivoire); }
.ck--d .ck__q { display: grid; align-content: center; gap: 5px; min-width: 0; padding: 14px 18px 14px 22px; }
.ck--d .ck__t { font: 600 17px/1.2 var(--ff); letter-spacing: -.01em; text-align: center; }
.ck--d .ck__p { font: italic 400 12px/1.45 var(--ff-mono); color: var(--rose); text-wrap: pretty; }
.ck--d .ck__p::before { content: "↳ "; content: "↳ " / ""; font-style: normal; }
.ck--d .ck__p a { color: var(--ivoire); font-style: normal; font-weight: 500; text-decoration: underline; text-decoration-color: var(--rose); text-underline-offset: 3px; white-space: nowrap; }
.ck--d .ck__p a:focus-visible { outline: 2px solid var(--ivoire); outline-offset: 2px; }
.ck--d .ck__r { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 1px solid var(--filet-sombre); }
.ck--d .ck__mot { --on: 0; position: relative; display: grid; place-items: center; min-width: 92px; min-height: 76px; margin: 0; padding: 0 16px; border: 0; background: none; color: var(--ivoire); font: 650 26px/1 var(--ff); font-stretch: 125%; letter-spacing: -.03em; cursor: pointer; transition: transform 160ms var(--ease-out); }
.ck--d .ck__mot + .ck__mot { border-left: 1px solid var(--filet-sombre); }
.ck--d .ck__mot .pt { color: var(--bordeaux-clair); }
.ck--d .ck__mot::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 24px; height: 3px; background: var(--rose); transform: scaleX(var(--on)); transform-origin: 0 50%; transition: transform 150ms var(--ease-out); }
.ck--d .ck__mot:active { transform: scale(.96); }
.ck--d .ck__mot:focus-visible { outline: 2px solid var(--ivoire); outline-offset: -6px; }
.ck--d .ck__mot:focus-visible::after { --on: 1; transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .ck--d .ck__mot:hover { --on: 1; } .ck--d .ck__mot:hover::after { transition-duration: 220ms; } }
.ck--d .ck__l { display: block; overflow: hidden; padding-block: .08em .12em; }
.ck--d .ck__w { display: block; }
.ck--d .ck__w .pt { display: inline-block; }
/* Entrée : un point bordeaux se pose, s’étire en ligne en devenant noir encre ; la question s’écrit, puis « Non. » et « Oui. » montent ensemble et leurs points tombent */
.js .ck--d .ck__fond { clip-path: inset(calc(50% - 7px) calc(100% - 36px) calc(50% - 7px) 22px round 7px); background-color: var(--bordeaux); visibility: hidden; opacity: 0;
  transition: clip-path 240ms var(--ease-out), opacity 200ms ease, visibility 0s linear 240ms; }
.js .ck--d.is-on .ck__fond { clip-path: inset(0 0 0 0 round 0); background-color: var(--encre); visibility: visible; opacity: 1;
  transition: opacity 160ms ease, clip-path 720ms var(--ease-in-out) 320ms, background-color 420ms ease 620ms, visibility 0s; }
.js .ck--d .ck__q > * { opacity: 0; transform: translateX(-10px); transition: opacity 100ms ease, transform 100ms ease; }
.js .ck--d.is-on .ck__q > * { opacity: 1; transform: none; transition: opacity 360ms ease, transform 460ms var(--ease-out); }
.js .ck--d.is-on .ck__t { transition-delay: 860ms; }
.js .ck--d.is-on .ck__p { transition-delay: 940ms; }
.js .ck--d .ck__w { transform: translateY(110%); transition: transform 100ms ease; }
.js .ck--d.is-on .ck__w { transform: none; transition: transform 640ms var(--ease-out) 960ms; }
.js .ck--d.is-on .ck__mot + .ck__mot .ck__w { transition-delay: 1030ms; }
.js .ck--d .ck__w .pt { opacity: 0; transform: translateY(-.8em) scale(.4); transition: opacity 100ms ease, transform 100ms ease; }
.js .ck--d.is-on .ck__w .pt { opacity: 1; transform: none; transition: opacity 200ms ease 1380ms, transform 520ms var(--ease-out) 1380ms; }
/* Bandeau ouvert : la page s’allonge de sa hauteur et le focus s’arrête au-dessus ; au téléphone, la barre fixe passe dessous et sort du parcours clavier */
html.ck-ouvert { scroll-padding-bottom: calc(var(--ck-h, 0px) + 20px); }
html.ck-ouvert body { padding-bottom: max(var(--ck-h, 0px), calc(64px + env(safe-area-inset-bottom, 0px))); }
@media (max-width: 599.98px) {
  html.ck-ouvert .c-cta { visibility: hidden; }
  .ck--d, body:has(.c-cta) .ck--d { left: 0; right: 0; bottom: 0; width: auto; }
  .ck--d .ck__fond { grid-template-columns: minmax(0, 1fr); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .ck--d .ck__q { padding: 14px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px)); }
  .ck--d .ck__p { font-size: 11.5px; }
  .ck--d .ck__r { border-left: 0; border-top: 1px solid var(--filet-sombre); }
  .ck--d .ck__mot { min-width: 0; min-height: 52px; font-size: 24px; }
  .ck--d .ck__mot::after { bottom: 10px; }
  .js .ck--d .ck__fond { clip-path: inset(calc(50% - 7px) calc(100% - 30px) calc(50% - 7px) 16px round 7px); }
}
@media (prefers-reduced-motion: reduce) {
  .js .ck--d .ck__fond, .js .ck--d.is-on .ck__fond { clip-path: none; background-color: var(--encre); }
  .js .ck--d.is-on .ck__fond { transition: opacity 300ms ease, visibility 0s; }
  .js .ck--d .ck__q > *, .js .ck--d .ck__w, .js .ck--d .ck__w .pt { transform: none; }
  .js .ck--d.is-on .ck__w { transition: none; }
}