/* Pilotaj — refonte du 03/10/2026 : identité commune, fond noir profond, portrait en particules (public/hero.js).
   1. hero figé (buste à droite, réagit à la souris et au défilement)  2. rendez-vous  3. agents  4. parcours « Méthode »
   (public/story.js)  5. questions  6. appel final  + pied de page. Polices existantes : Inter Tight, Outfit, Geist Mono. */
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 300 500; font-display: swap; src: url(/assets/fonts/inter-tight.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: "Outfit"; font-style: normal; font-weight: 300 600; font-display: swap; src: url(/assets/fonts/outfit.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: "Geist Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/assets/fonts/geist-mono.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; }

/* ---------- Identité : couleurs, polices, espacements ---------- */
:root {
  --bg: #08090B;          /* fond principal */
  --bg-2: #0C0D10;        /* page qui monte par-dessus le hero */
  --surface: #111216;     /* cartes */
  --surface-2: #16171C;   /* champs, cases */
  --surface-3: #1E2026;
  --text: #F5F5F2;        /* titres */
  --text-2: #B9B6B0;      /* textes secondaires (contraste 9:1) */
  --text-3: #8F8C87;      /* légendes (contraste 5,7:1) */
  --line: rgba(245, 245, 242, .08);
  --line-2: rgba(245, 245, 242, .14);
  --line-3: rgba(245, 245, 242, .24);
  --accent: #F0421C;      /* orange Pilotaj */
  --accent-2: #FF6A43;    /* orange lisible en texte sur le noir */
  --accent-btn: #DF340F;  /* boutons à texte blanc : contraste 4,5:1 */
  --accent-hover: #C92E0C;
  --g: #2FBF6E; --o: #F2A23A; --r: #EF4B37;   /* système de contrôle : vert, orange, rouge */
  --hero: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --sans: "Outfit", -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
  --maxw: 1240px;
  --gut: clamp(20px, 4vw, 56px);
  --pad-x: max(var(--gut), calc((100% - var(--maxw)) / 2));
  --hd-h: 68px;
  --hp: 0;
  /* anciens noms, encore utilisés par le parcours (story.js / styles du parcours) */
  --black: var(--bg); --on-dark: var(--text); --on-dark-muted: var(--text-3); --dline: var(--line); --dline-2: var(--line-2);
  --ink: #08090B; --sky: #5AA9DA;
  /* téléphone et tablette (spec-mobile §3.1) : feuille alternée, facture d'exemple (seule surface claire) */
  --pj-sheet: #0B0D11; --pj-paper: #F2F1EC; --pj-ink-on-paper: #1A1B1F; --gp: 20px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hd-h) + 18px); background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
.mono { font-family: var(--mono); letter-spacing: .02em; }
.muted { color: var(--text-3); }
.small { font-size: 14px; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 6px; }
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--text); color: var(--ink); font: 500 14px var(--sans); text-decoration: none; transform: translateY(-160%); transition: transform .2s; }
.skip-link:focus { transform: none; }

/* ---------- Boutons, liens, feux ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-radius: 999px; padding: 16px 26px; font: 600 14px/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .15s, background .2s, border-color .2s, color .2s, box-shadow .2s; white-space: nowrap; }
.btn:active { transform: scale(.98); }
.btn-accent { background: var(--accent-btn); color: #fff; box-shadow: 0 10px 30px -12px rgba(240, 66, 28, .55); }
.btn-accent:hover { background: var(--accent-hover); }
.btn-line { border-color: var(--line-3); color: var(--text); background: transparent; }
.btn-line:hover { background: var(--text); color: var(--ink); border-color: var(--text); }
.btn-sm { padding: 11px 18px; font-size: 12px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-ghost-sm { align-self: flex-start; background: none; border: 1px solid var(--line-2); color: var(--text-2); border-radius: 999px; padding: 9px 15px; font: 500 13px var(--sans); cursor: pointer; transition: border-color .2s, color .2s; }
.btn-ghost-sm:hover { border-color: var(--accent); color: var(--accent-2); }
.arrows { display: inline-flex; gap: 2px; }
.arrows i { width: 0; height: 0; border-left: 6px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; opacity: .35; animation: arrow 1.2s infinite; }
.arrows i:nth-child(2) { animation-delay: .15s; } .arrows i:nth-child(3) { animation-delay: .3s; }
@keyframes arrow { 0%, 100% { opacity: .3; } 40% { opacity: 1; } }
.link { background: none; border: 0; color: var(--text-3); cursor: pointer; font: inherit; font-size: 13.5px; padding: 6px 0; }
.link:hover { color: var(--accent-2); }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot.g { background: var(--g); } .dot.o { background: var(--accent); } .dot.r { background: var(--r); }
.lamps { display: inline-flex; gap: 4px; }
.lamps i { width: 7px; height: 7px; border-radius: 50%; }
.lamps .g { background: #22A55B; } .lamps .o { background: #F28A1E; } .lamps .r { background: #E0301E; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 500 20px/1 var(--hero); letter-spacing: -.02em; color: var(--text); }

/* Lampe = couleur + symbole (✓ exécute, ! vérifie, ■ décide) : jamais la couleur seule */
.lamp { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; flex: none; border: 1px solid currentColor; background: color-mix(in srgb, currentColor 14%, transparent); box-shadow: 0 0 14px -2px currentColor; }
.lamp svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lamp svg .fill { fill: currentColor; stroke: none; }
.lamp.g { color: var(--g); } .lamp.o { color: var(--o); } .lamp.r { color: var(--r); }
.lights-band { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 26px; font-size: 14.5px; color: var(--text-2); }
.lb { display: inline-flex; align-items: center; gap: 10px; }
.lb b { color: var(--text); font-weight: 600; }

.kicker { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .18em; color: var(--accent-2); margin-bottom: 20px; }
.kicker::before { content: ""; width: 7px; height: 7px; background: var(--accent); }

/* ---------- En-tête ---------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; border-bottom: 1px solid transparent; transition: background .3s, border-color .3s, backdrop-filter .3s; }
.site-header.scrolled, .site-header.open { background: rgba(8, 9, 11, .84); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: var(--line); }
/* Sans JS (nav.js ne pose jamais .scrolled) : fond plein, le logo et « Menu » ne s'écrivent pas sur le texte */
html:not(.js) .site-header { background: rgba(8, 9, 11, .94); border-bottom-color: var(--line); }
.hd-in { height: var(--hd-h); padding: 0 var(--pad-x); display: flex; align-items: center; gap: 28px; }
.hd-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.lang-switch { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line-2); border-radius: 999px; }
.lang-switch a { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--text-2); padding: 8px 11px; border-radius: 999px; transition: background .2s, color .2s; }
.lang-switch a:hover { color: var(--text); background: rgba(245, 245, 242, .08); }
.lang-switch a[aria-current] { background: var(--text); color: var(--ink); }
.hd-cta { flex: none; }
.hd-menu { display: none; height: 44px; min-width: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text); cursor: pointer; flex: none; align-items: center; justify-content: center; gap: 10px; font: 500 15px var(--sans); }
.hd-menu-t { display: none; }
.hd-menu-i { position: relative; width: 18px; height: 12px; }
.hd-menu-i i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .25s, top .25s; }
.hd-menu-i i:first-child { top: 2px; } .hd-menu-i i:last-child { top: 9px; }
.site-header.open .hd-menu-i i:first-child { top: 5.5px; transform: rotate(45deg); }
.site-header.open .hd-menu-i i:last-child { top: 5.5px; transform: rotate(-45deg); }

/* ---------- Menu à sous-rubriques (public/nav.js) : 5 titres (4 qui déroulent + Offres, lien direct) ; tablette et ordinateur = panneaux déroulants placés
   sous l'en-tête (nav.js les garde dans l'écran) ; téléphone = plein écran en accordéon (plus bas) ---------- */
.pj-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.pj-gt { position: relative; display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 13px; border: 0; border-radius: 999px; background: none; color: var(--text-2); font: 400 15px/1 var(--sans); cursor: pointer; text-decoration: none; white-space: nowrap; transition: color .2s, background .2s; }
.pj-gt:hover, .pj-g.open > .pj-gt { color: var(--text); background: rgba(245, 245, 242, .06); }
.pj-g.cur > .pj-gt { color: var(--text); }
.pj-g.cur > .pj-gt::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
.pj-gn, .pj-gd { display: none; }
.pj-pm, .pj-chev { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .25s; opacity: .7; flex: none; }
.pj-g.open > .pj-gt .pj-pm, .lang-mini.open .pj-chev { transform: translateY(1px) rotate(-135deg); }
.pj-direct .pj-gt .pj-arr { display: none; }
/* Flèche des sous-rubriques : un trait + une pointe */
.pj-arr { position: relative; display: block; width: 14px; height: 10px; flex: none; color: var(--text-3); transition: transform .2s, color .2s; }
.pj-arr::before { content: ""; position: absolute; left: 0; right: 1px; top: 4.25px; height: 1.5px; background: currentColor; }
.pj-arr::after { content: ""; position: absolute; right: 1px; top: 1.5px; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
/* Panneau : sous l'en-tête, à gauche = --pl (nav.js), largeur min(720 px, écran − 32 px) */
.pj-p { position: absolute; top: calc(var(--hd-h) - 4px); left: var(--pl, 16px); width: var(--pw, min(720px, calc(100vw - 32px))); z-index: 2; visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility 0s .2s; }
.pj-g.open > .pj-p { visibility: visible; opacity: 1; transform: none; transition: opacity .22s, transform .22s; }
html:not(.js) .pj-g:hover > .pj-p, html:not(.js) .pj-g:focus-within > .pj-p { visibility: visible; opacity: 1; transform: none; left: auto; }
.pj-pin { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 20px; padding: 20px; background: linear-gradient(180deg, #121318 0%, #0D0E11 100%); border: 1px solid var(--line-2); border-radius: 22px; box-shadow: 0 34px 80px -28px rgba(0, 0, 0, .95), 0 0 0 1px rgba(0, 0, 0, .4); }
.pj-ph { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; border-radius: 16px; background: radial-gradient(120% 90% at 0% 100%, rgba(240, 66, 28, .16), transparent 60%), var(--surface); border: 1px solid var(--line); overflow: hidden; }
.pj-ph > span.mono { font-size: 12px; letter-spacing: .14em; color: var(--accent-2); }
.pj-ph b { font: 400 30px/1 var(--hero); letter-spacing: -.035em; color: var(--text); }
.pj-ph small { font-size: 14px; line-height: 1.45; color: var(--text-2); }
.pj-ph .lamps { margin-top: auto; padding-top: 18px; }
.pj-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; align-content: start; }
.pj-items a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; min-height: 72px; padding: 13px 14px; border-radius: 14px; border: 1px solid transparent; text-decoration: none; transition: background .2s, border-color .2s; }
.pj-items a:hover, .pj-items a:focus-visible { background: var(--surface-2); border-color: var(--line-2); }
.pj-items a:hover .pj-arr, .pj-items a:focus-visible .pj-arr { transform: translateX(3px); color: var(--accent-2); }
.pj-items b { grid-column: 1; font-weight: 500; font-size: 15.5px; line-height: 1.3; color: var(--text); }
.pj-items small { grid-column: 1; margin-top: 3px; font-size: 13.5px; line-height: 1.4; color: var(--text-3); }
.pj-items .pj-arr { grid-column: 2; grid-row: 1 / span 2; }
.pj-items a[aria-current] b::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.pj-foot { display: flex; align-items: center; gap: 14px; }
.pj-foot-cta, .pj-mail { display: none !important; }
/* Voile sous un panneau ouvert (tablette, ordinateur) */
.pj-veil { position: fixed; inset: 0; z-index: 59; background: rgba(0, 0, 0, .42); opacity: 0; visibility: hidden; transition: opacity .22s, visibility 0s .22s; }
html.pj-dd-open .pj-veil { opacity: 1; visibility: visible; transition: opacity .22s; }
/* Choix de langue compact (tablette, pilotaj.mu) */
.lang-mini { display: none; position: relative; }
.lang-mini-b { display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 13px; border: 1px solid var(--line-2); border-radius: 999px; background: none; color: var(--text); font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.lang-mini-p { position: absolute; top: calc(100% + 10px); right: 0; z-index: 3; min-width: 168px; list-style: none; margin: 0; padding: 6px; background: #121318; border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .9); visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .2s, visibility 0s .2s; }
.lang-mini.open .lang-mini-p { visibility: visible; opacity: 1; transform: none; transition: opacity .2s, transform .2s; }
.lang-mini-p a { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--text-2); text-decoration: none; font-size: 15px; }
.lang-mini-p a:hover { background: var(--surface-2); color: var(--text); }
.lang-mini-p a[aria-current] { color: var(--text); }
.lang-mini-p a[aria-current]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ---------- 1. HERO (figé pendant que la suite monte par-dessus) ---------- */
.hero { position: sticky; top: 0; z-index: 0; height: 100svh; min-height: 640px; overflow: hidden; color: var(--text); background: radial-gradient(60% 75% at 74% 42%, #15161A 0%, #0B0C0F 55%, var(--bg) 100%); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(245, 245, 242, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(245, 245, 242, .035) 1px, transparent 1px); background-size: 96px 96px; -webkit-mask-image: radial-gradient(80% 80% at 50% 40%, #000 30%, transparent 85%); mask-image: radial-gradient(80% 80% at 50% 40%, #000 30%, transparent 85%); opacity: calc(1 - var(--hp)); }
.hero-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(34% 30% at 76% 92%, rgba(240, 66, 28, .16), transparent 70%), radial-gradient(22% 24% at 92% 70%, rgba(240, 106, 43, .08), transparent 70%); opacity: calc(1 - var(--hp)); }
.bust { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; touch-action: pan-y; }
/* Ordinateur : le portrait s'affiche tout de suite en image fixe (capture du moteur, préchargée), à sa place exacte
   (position et hauteur posées par hero.js ; sans lui, calée à droite sur toute la hauteur) ; le portrait 3D la remplace
   au premier dessin. Elle reste sans WebGL ou si le contexte est perdu. Téléphone : voir plus bas (.hero-visual). */
@media (min-width: 761px) and (min-height: 601px) {
  .hero:not(.bust-ready) .bust, .no-webgl .bust { background: url(/assets/portrait.webp) var(--fb-x, 100%) var(--fb-y, 0) / auto var(--fb-h, 100%) no-repeat; }
}
/* Tablettes et petits portables : le portrait y est moins haut, la même image en 640 px suffit (159 Ko au lieu de 272) */
@media (min-width: 761px) and (max-width: 1100px) and (min-height: 601px) {
  .hero:not(.bust-ready) .bust, .no-webgl .bust { background-image: url(/assets/portrait-t.webp); }
}
.hero-in { position: relative; z-index: 3; height: 100%; display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); align-items: center; padding: calc(var(--hd-h) + 20px) var(--pad-x) 56px; pointer-events: none; opacity: calc(1 - var(--hp) * 1.5); transform: translateY(calc(var(--hp) * -60px)); }
.hero-in a, .hero-a { pointer-events: auto; }
.hero-a { grid-column: 1; grid-row: 1; max-width: 600px; }
/* Zone du portrait : toute la hauteur du hero et jusqu'au bord droit de l'écran (l'épaule sort du cadre, comme sur l'affiche) */
.hero-visual { grid-column: 2; grid-row: 1; align-self: stretch; margin: calc(-20px - var(--hd-h)) calc(-1 * max(var(--gut), (100vw - var(--maxw)) / 2)) -56px 0; --fit-h: 1; --fit-y: .5; --fit-r: .02; --fit-wmax: 1.3; --fit-text: 1; }
h1 { font: 400 clamp(52px, 6.2vw, 108px)/.94 var(--hero); letter-spacing: -.048em; }
.hero .sub { margin-top: 26px; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: var(--text-2); max-width: 32em; }
.hero-actions { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.hero-micro { font-size: 14px; color: var(--text-3); max-width: 22em; text-wrap: balance; } /* jamais un mot seul à la ligne (EN : « …you can / automate. ») */
/* Les 3 feux du hero : une règle fine sur toute la largeur du texte, trois colonnes égales, un repère de couleur au
   début de chacune ; symbole dans une colonne de 22 px, nom et action alignés à sa droite. */
.hero-control { margin-top: 44px; }
.hc-title { margin: 0 0 14px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.hc-lights { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-2); }
.hc { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 18px 16px 0 0; }
.hc::before { content: ""; position: absolute; left: 0; top: -1px; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.hc.g { color: var(--g); } .hc.o { color: var(--o); } .hc.r { color: var(--r); }
.hc-t b { display: block; font-size: 14px; line-height: 22px; font-weight: 600; color: var(--text); }
.hc-t span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--text-2); }
/* Colonne de texte étroite (tablettes, petits portables) : les 3 feux en petit tableau, comme sur téléphone */
.hero-a { container-type: inline-size; }
@container (max-width: 540px) {
  .hc-lights { grid-template-columns: 1fr; }
  .hc { grid-template-columns: 22px 62px minmax(0, 1fr); align-items: center; padding: 11px 0; }
  .hc + .hc { border-top: 1px solid var(--line); }
  .hc::before { width: 22px; }
  .hc + .hc::before { display: none; }
  .hc-t { display: contents; }
  .hc-t span { margin-top: 0; }
}

/* ---------- La suite monte par-dessus le hero ---------- */
.over { position: relative; z-index: 2; }

/* ---------- 2. RENDEZ-VOUS ---------- */
.frame { position: relative; }
.rdv-page { background: var(--bg-2); border-radius: 28px 28px 0 0; border-top: 1px solid var(--line-2); box-shadow: 0 -40px 90px rgba(0, 0, 0, .65); padding: clamp(64px, 8vw, 120px) var(--pad-x) clamp(72px, 9vw, 130px); }
/* « L'agenda d'abord » (spec-mobile C7) : DOM titre → agenda → objectif ; même rendu qu'avant sur ordinateur */
.rdv-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head book" "more book"; grid-template-rows: auto 1fr; column-gap: clamp(32px, 5vw, 80px); align-items: start; }
.rdv-head { grid-area: head; }
.rdv-more { grid-area: more; }
.booking { grid-area: book; }
.rdv-title { font: 400 clamp(40px, 4.6vw, 72px)/1 var(--hero); letter-spacing: -.045em; }
.rdv-lead { margin-top: 22px; color: var(--text-2); font-size: 17px; max-width: 34em; }
.bk-host { display: flex; align-items: center; gap: 14px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.bk-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--line-2); color: var(--text); display: grid; place-items: center; font: 500 15px var(--hero); letter-spacing: .02em; flex: none; }
.bk-host b { display: block; color: var(--text); font-weight: 600; }
.bk-host small { color: var(--text-3); font-size: 13.5px; }
.bk-head { padding: clamp(22px, 3vw, 32px) clamp(22px, 3vw, 36px) 20px; border-bottom: 1px solid var(--line); }
.bk-title { font: 400 24px/1.15 var(--hero); letter-spacing: -.03em; margin: 0 0 14px; }
.bk-facts { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14.5px; color: var(--text-2); }
.bk-facts li { display: flex; align-items: flex-start; gap: 11px; }
.bk-facts li[hidden] { display: none; }
.bk-facts li::before { content: ""; width: 18px; height: 18px; flex: none; margin-top: 2px; background: var(--text-3); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.i-clock { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.i-video { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='6' width='12' height='12' rx='2'/%3E%3Cpath d='M15 10l6-3v10l-6-3'/%3E%3C/svg%3E"); }
.i-cal { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); color: var(--accent-2); font-weight: 600; }
.i-cal::before { background: var(--accent-2) !important; }
.i-globe { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'/%3E%3C/svg%3E"); }
.i-globe b { font-weight: 500; color: var(--text); }
.rdv-checks { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14.5px; color: var(--text-2); }
.rdv-checks li { display: inline-flex; align-items: center; gap: 9px; }
.rdv-checks li::before { content: "✓"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(240, 66, 28, .5); color: var(--accent-2); font-size: 12px; font-weight: 700; }
.rdv-noscript { margin: 0 0 18px; color: var(--text-2); }

.booking { background: linear-gradient(180deg, var(--surface) 0%, #0E0F12 100%); border: 1px solid var(--line-2); border-radius: 24px; box-shadow: 0 40px 100px -50px rgba(0, 0, 0, .9); min-width: 0; }
/* Sous l'en-tête fixe (boutons « Réserver », changement d'étape) : html a déjà scroll-padding-top = en-tête + 18 px ;
   −10 px ici → le haut de la carte à 8 px sous l'en-tête (les jours tombent dans l'écran, spec-mobile C1) */
#booking, .book-pane { scroll-margin-top: -10px; }
/* Tablette et ordinateur : la carte est encore décalée par son apparition (.reveal, 28 px ou 14 px) quand le bouton
   « Réserver » calcule le défilement ; +18 px la gardent sous l'en-tête fixe, révélée ou non */
@media (min-width: 761px) and (min-height: 601px) {
  #booking { scroll-margin-top: 18px; }
}
/* Téléphone : même raison (apparition de 14 px) ; le haut de la carte tombe 8 px sous l'en-tête (spec-mobile C1) */
@media (max-width: 760px), (max-height: 600px) {
  #booking { scroll-margin-top: 4px; }
}
.bk-main { padding: clamp(22px, 3vw, 36px); min-width: 0; } /* sinon la rangée des jours élargit la carte au-delà de l'écran */
.bk-h { font: 400 24px/1.2 var(--hero); letter-spacing: -.02em; margin-bottom: 18px; }
.bk-h:focus { outline: none; }
.book-pane { display: flex; flex-direction: column; gap: 16px; }
.back { align-self: flex-start; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.book-pane label { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--text-2); font-weight: 500; position: relative; }
.book-pane em { color: var(--text-3); font-style: normal; font-weight: 400; }
.req { color: var(--accent-2); font-style: normal; }
.book-pane input:not([type=checkbox]), .book-pane textarea { background: #0B0C0F; border: 1px solid var(--line-3); border-radius: 12px; padding: 14px 15px; color: var(--text); font: 15.5px var(--sans); width: 100%; transition: border-color .2s, box-shadow .2s; }
.book-pane ::placeholder { color: #6F6C67; }
.book-pane textarea { resize: vertical; min-height: 104px; }
.book-pane input:focus, .book-pane textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(240, 66, 28, .2); }
.book-pane .invalid, .roles.invalid { border-color: var(--r) !important; box-shadow: 0 0 0 3px rgba(239, 75, 55, .15) !important; }
.guests { display: flex; flex-direction: column; gap: 8px; }
.guests:empty { display: none; }
.guest-row { display: flex; gap: 8px; }
.guest-row button { border: 0; background: none; color: var(--text-3); font-size: 22px; cursor: pointer; width: 40px; }
.guest-row button:hover { color: var(--text); }
.roles { border: 1px solid transparent; border-radius: 12px; padding: 4px 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.roles legend { font-size: 14px; font-weight: 500; color: var(--text-2); margin-bottom: 8px; padding: 0; }
.check { flex-direction: row !important; align-items: center; gap: 12px !important; cursor: pointer; font-weight: 400 !important; color: var(--text) !important; }
.check input[type=checkbox] { accent-color: var(--accent); width: 18px; height: 18px; flex: none; margin: 0; }
.check.other input:not([type=checkbox]) { flex: 1; }
.consent { align-items: flex-start; font-size: 13.5px !important; color: var(--text-2) !important; }
.consent input { margin-top: 2px !important; }
.phone-in { display: flex; align-items: stretch; }
.phone-in b { display: grid; place-items: center; padding: 0 13px; border: 1px solid var(--line-3); border-right: 0; border-radius: 12px 0 0 12px; background: var(--surface-3); color: var(--text); font-size: 14px; }
.phone-in b + input { border-radius: 0 12px 12px 0 !important; }
.company .hint { color: var(--text-3); font-weight: 400; font-size: 12.5px; }
.suggest { position: absolute; top: calc(100% - 22px); left: 0; right: 0; z-index: 10; list-style: none; margin: 0; padding: 6px; background: #121318; border: 1px solid var(--line-3); border-radius: 12px; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .8); max-height: 280px; overflow: auto; }
.suggest li { padding: 10px 12px; border-radius: 8px; cursor: pointer; font-weight: 400; font-size: 14px; color: var(--text); display: flex; justify-content: space-between; gap: 12px; }
.suggest li small { color: var(--text-3); font: 12px var(--mono); white-space: nowrap; }
.suggest li:hover, .suggest li[aria-selected="true"] { background: var(--surface-3); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-err { color: #FF7A66; font-size: 14px; }
.form-err:empty { display: none; }
.legal { font-size: 12.5px; color: var(--text-3); text-align: center; }
.legal a { color: var(--text-2); }
/* Les 12 jours visibles d'un coup (2 rangées), sans bande à faire défiler ; marge pour l'anneau de focus */
.days { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 8px; padding: 3px; margin: -3px; }
.day { min-width: 0; border: 1px solid var(--line-2); border-radius: 14px; padding: 11px 8px; text-align: center; cursor: pointer; background: #0B0C0F; color: var(--text); font: inherit; transition: border-color .15s, background .15s, color .15s; }
.day small { display: block; font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.day b { display: block; font: 400 22px var(--hero); margin: 3px 0; }
.day span { font-size: 11px; color: var(--text-3); }
.day:hover { border-color: var(--line-3); }
.day[aria-selected="true"] { border-color: var(--text); background: var(--text); color: var(--ink); }
.day[aria-selected="true"] small, .day[aria-selected="true"] span { color: #55524D; }
.times { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; min-height: 160px; align-content: start; }
.time { border: 1px solid var(--line-2); border-radius: 10px; padding: 13px 6px; background: #0B0C0F; color: var(--text); font: 500 14px var(--mono); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.time:hover { border-color: var(--accent); color: var(--accent-2); background: rgba(240, 66, 28, .06); }
.times .note { grid-column: 1 / -1; color: var(--text-2); font-size: 14.5px; padding: 14px 0 4px; }
.times .note a { color: var(--accent-2); }
.times .btn-line, .times .btn-accent { grid-column: 1 / -1; justify-self: start; min-height: 44px; } /* agenda injoignable : « Laisser mes coordonnées » et « Réessayer » sur toute la ligne (sinon 1 case de 104 px : texte qui déborde) */
.skeleton { height: 46px; border-radius: 10px; background: linear-gradient(90deg, #14151A 0%, #1C1E23 50%, #14151A 100%); background-size: 200% 100%; animation: sk 1.2s infinite; }
/* Pendant le chargement (app.js) : 12 jours fantômes (mêmes lignes vides qu'un vrai jour : même hauteur à tous les
   formats) et 15 heures fantômes de la taille d'un bouton d'heure : la carte ne grandit pas à l'arrivée des créneaux */
.day.skeleton, .day.skeleton:hover { height: auto; border-color: transparent; cursor: default; }
@keyframes sk { to { background-position: -200% 0; } }
#stepC { align-items: flex-start; padding-top: 6px; }
#stepC p { color: var(--text-2); }
#done-text b { color: var(--text); }
.done-lamp { width: 18px; height: 18px; border-radius: 50%; background: var(--g); box-shadow: 0 0 24px var(--g); }

/* ---------- Sections ---------- */
/* overflow: clip (pas hidden) : la section ne devient pas un conteneur de défilement, les titres et graphiques
   « position: sticky » collent bien à l'écran (questions, IA durable) ; les anciens Safari gardent hidden */
.section { position: relative; background: var(--bg); color: var(--text); padding: clamp(96px, 12vw, 160px) var(--pad-x); border-top: 1px solid var(--line); overflow: hidden; overflow: clip; }
.section-head { max-width: 760px; margin-bottom: clamp(44px, 5vw, 64px); position: relative; z-index: 1; }
h2 { font: 400 clamp(42px, 5.2vw, 84px)/.98 var(--hero); letter-spacing: -.045em; }
.section .sub { color: var(--text-2); font-size: 18px; margin-top: 22px; max-width: 38em; }
.art { fill: none; stroke: currentColor; stroke-width: .7; }
.art .fill { fill: currentColor; stroke: none; }

/* ---------- 3. AGENTS : grille de cartes ---------- */
.agents { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; position: relative; z-index: 1; }
.agent-card { display: flex; flex-direction: column; gap: 18px; padding: 26px 26px 30px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(180deg, var(--surface) 0%, #0D0E11 100%); transition: border-color .3s, transform .3s; }
.agent-card:hover { border-color: var(--line-3); transform: translateY(-3px); }
.agent-card:last-child:nth-child(3n+1) { grid-column: 2; } /* 7 agents (France) : le dernier, seul sur sa ligne, est centré */
.ac-top { display: flex; align-items: flex-start; justify-content: space-between; }
.agent-art { width: 64px; height: 64px; color: var(--text); transition: transform .6s cubic-bezier(.2, .8, .2, 1), color .3s; }
.agent-card:hover .agent-art { transform: rotate(30deg) scale(1.04); color: var(--accent-2); }
.ac-n { font-size: 12px; letter-spacing: .14em; color: var(--text-3); }
.agent-card h3 { font: 400 26px/1.1 var(--hero); letter-spacing: -.03em; }
.ac-tasks { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--text-2); }
.ac-tasks li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: baseline; }
.ac-tasks li::before { content: ""; width: 6px; height: 6px; background: var(--accent); transform: translateY(-2px); }

/* ---------- 4. PARCOURS : une facture, de la boîte mail au feu vert (public/story.js) ----------
   Par défaut (sans JS, mouvement réduit, économie de données, impression) : 5 panneaux fixes.
   html.story-live : scène épinglée pilotée par le défilement. html.story-stills : même scène, images fixes. */
.story { --vh: 360vh; position: relative; background: var(--black); color: var(--on-dark); border-top: 1px solid var(--dline); }
.skip { position: absolute; left: 28px; top: 28px; z-index: 30; padding: 10px 16px; border-radius: 999px; background: var(--on-dark); color: var(--ink); font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; opacity: 0; pointer-events: none; }
.skip:focus { opacity: 1; pointer-events: auto; }
.story-anchor { position: absolute; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; }
.story .kicker { margin-bottom: 16px; }
.story-ch h3 { font: 400 clamp(40px, 5vw, 88px)/.96 var(--hero); letter-spacing: -.045em; max-width: 11em; color: var(--on-dark); text-wrap: balance; }
.story-p { margin-top: 24px; font-size: 17px; line-height: 1.55; color: var(--text-2); max-width: 30em; }
.story-end { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }

/* Panneaux fixes (mode par défaut) */
.story-stage { padding: 14px; }
.story-canvas, .story-imgs, .story-veil, .story-rule, .story-status, .story-nav, .story-pins, .story-cue { display: none; }
.story-meta { display: flex; gap: 14px; flex-wrap: wrap; padding: 26px 18px 18px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); }
.story-meta small { font-size: 10px; }
.story-copy { display: grid; gap: 14px; }
.story-ch { position: relative; min-height: 86svh; border-radius: 30px; overflow: hidden; display: flex; align-items: flex-end; background: radial-gradient(60% 75% at 62% 45%, #131418 0%, #0B0C0F 55%, #08090B 100%); }
.story-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-txt { position: relative; width: 100%; padding: 30vh clamp(24px, 5vw, 96px) clamp(32px, 6vw, 80px); background: linear-gradient(to top, rgba(5,5,5,.9) 0%, rgba(5,5,5,.6) 45%, transparent); }

/* Scène épinglée (animée ou images fixes) */
.story-live .story { height: calc(var(--vh) + 100svh); }
.story-live .story-anchor { top: calc(var(--p) * var(--vh) + 1px); }
.story-live .story-stage { position: sticky; top: 0; height: 100svh; }
.story-live .story-box { position: relative; height: 100%; border-radius: 30px; overflow: hidden; isolation: isolate; background: radial-gradient(60% 75% at 62% 45%, #131418 0%, #0B0C0F 55%, #08090B 100%); }
.story-live .story-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.story-live .story-veil { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top right, rgba(5,5,5,.82) 0%, rgba(5,5,5,.5) 28%, rgba(5,5,5,0) 55%); }
.story-live .story-pic { display: none; }
.story-live .story-copy { display: block; position: absolute; z-index: 4; left: clamp(24px, 5vw, 96px); bottom: 10svh; width: min(700px, 54%); }
.story-live .story-ch { position: absolute; left: 0; bottom: 0; width: 100%; min-height: 0; display: block; border-radius: 0; overflow: visible; background: none; opacity: 0; transform: translateY(22px); filter: blur(6px); pointer-events: none; transition: opacity .35s, transform .35s, filter .35s; }
.story-live .story-ch.visible { opacity: 1; transform: none; filter: none; pointer-events: auto; transition: opacity .6s cubic-bezier(.2,.8,.2,1) .1s, transform .6s cubic-bezier(.2,.8,.2,1) .1s, filter .6s .1s; }
.story-live .story-txt { padding: 0; background: none; }
.story-live .story-end { opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .5s; pointer-events: none; }
.story-live .story.cta-on .story-end { opacity: 1; transform: none; pointer-events: auto; }

/* Filet de progression + libellés du haut */
.story-live .story-rule { display: block; position: absolute; z-index: 3; left: 32px; right: 32px; top: 84px; height: 1px; background: var(--dline); }
.story-rule i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.story-live .story-meta { position: absolute; z-index: 3; left: 32px; top: 98px; padding: 0; flex-direction: column; gap: 6px; }
.story-live .story-status { display: flex; position: absolute; z-index: 3; right: 32px; top: 98px; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark); font-variant-numeric: tabular-nums; }
.story-status i { width: 7px; height: 7px; border-radius: 50%; background: #8A8480; transition: background .4s, box-shadow .4s; }
.story-status[data-s="1"] i { background: var(--sky); box-shadow: 0 0 10px var(--sky); }
.story-status[data-s="2"] i { background: var(--on-dark); box-shadow: 0 0 10px rgba(237,238,237,.6); }
.story-status[data-s="3"] i { background: var(--o); box-shadow: 0 0 12px var(--o); }
.story-status[data-s="4"] i { background: var(--g); box-shadow: 0 0 12px var(--g); }
.story-counter { margin-left: 6px; padding-left: 14px; border-left: 1px solid var(--dline-2); color: var(--on-dark-muted); }

/* Étapes (à droite) */
.story-live .story-nav { display: block; position: absolute; z-index: 5; right: 32px; top: 50%; transform: translateY(-50%); width: 180px; }
.story-nav ol { list-style: none; margin: 0; padding: 0; }
.story-nav a { position: relative; display: flex; align-items: center; gap: 12px; height: 44px; text-decoration: none; color: var(--on-dark); opacity: .6; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; transition: opacity .3s, padding .3s; }
.story-nav a::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--dline-2); }
.story-nav a i { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.story-nav a b { font-weight: 400; }
.story-nav a:hover { opacity: .75; }
.story-nav a.on { opacity: 1; padding-left: 10px; }
.story-nav a.on i { transform: scaleX(1); }
.story-nav a.on span { color: var(--accent); }
.story-nav a:focus-visible, .story-cta:focus-visible, .skip:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* Étiquettes accrochées à l'image (positionnées par story.js) */
.story-live .story-pins { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pin { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(8,9,11,.74); border: 1px solid var(--dline-2); font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark); white-space: nowrap; opacity: 0; transition: opacity .35s; will-change: transform; }
.pin.on { opacity: 1; }
.pin.field { translate: calc(-100% - 14px) -50%; }
.pin.gate { translate: 14px -50%; }
.pin.gate.center { translate: -50% -50%; }
.pin i { font-style: normal; font-weight: 700; color: var(--g); }
.pin.warn { border-color: rgba(242,138,30,.55); }
.pin.warn i { color: var(--o); }

/* « Défilez » */
.story-live .story-cue { display: flex; position: absolute; z-index: 3; right: 32px; bottom: 28px; align-items: center; gap: 12px; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-muted); transition: opacity .4s; }
.story-cue span { position: relative; width: 40px; height: 1px; background: var(--dline-2); overflow: hidden; }
.story-cue i { position: absolute; inset: 0; background: var(--on-dark); transform-origin: left; transform: scaleX(0); }
.story.cta-on .story-cue { opacity: 0; }

/* Images fixes épinglées (sans WebGL, appareil trop lent) : fondu enchaîné par chapitre */
.story-stills .story-canvas { display: none; }
.story-stills .story-imgs { display: block; position: absolute; inset: 0; }
.story-still { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; }
.story-still img { width: 100%; height: 100%; object-fit: cover; }
.story[data-ch="0"] .story-still:nth-child(1), .story[data-ch="1"] .story-still:nth-child(2), .story[data-ch="2"] .story-still:nth-child(3),
.story[data-ch="3"] .story-still:nth-child(4), .story[data-ch="4"] .story-still:nth-child(5) { opacity: 1; }
.story-stills .story-pins { display: none; }




/* Légende des feux dans l'étape 04 du parcours (mots + symboles) */
.story-legend { margin-top: 22px; gap: 10px 22px; font-size: 14px; }
.story-live .story-legend { max-width: 40em; display: grid; grid-template-columns: repeat(3, minmax(0, auto)); gap: 10px 22px; }
.story-live .story-legend .lb { align-items: flex-start; }
.story-live .story-legend .lb b { display: block; font-size: 13px; }
html.menu-open { overflow: hidden; } /* menu ouvert sur téléphone : la page ne défile pas derrière */

/* ---------- 5. QUESTIONS : accordéons (details/summary natifs) ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-grid .section-head { position: sticky; top: calc(var(--hd-h) + 32px); margin-bottom: 0; }
.faq { border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; font: 400 21px/1.35 var(--hero); letter-spacing: -.015em; color: var(--text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: #fff; }
.faq summary i { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-3); transition: border-color .2s, background .2s; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--accent-2); transform: translate(-50%, -50%); transition: transform .25s; }
.faq summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] summary i { border-color: var(--accent); background: rgba(240, 66, 28, .1); }
.faq details[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq summary:focus-visible { outline-offset: 6px; }
.faq details p { color: var(--text-2); padding: 0 56px 28px 0; max-width: 62ch; font-size: 16.5px; }

/* ---------- 6. APPEL FINAL ---------- */
.final { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 30px; padding-top: clamp(120px, 14vw, 190px); padding-bottom: clamp(120px, 14vw, 190px); }
.final > * { position: relative; z-index: 1; }
.final .kicker { margin-bottom: -8px; }
.final h2 { font-size: clamp(46px, 7vw, 116px); max-width: 12em; }
.final-band { justify-content: center; }
.final-glow { position: absolute !important; inset: 0; z-index: 0 !important; pointer-events: none; background: radial-gradient(38% 46% at 50% 100%, rgba(240, 66, 28, .2), transparent 70%), radial-gradient(1.4px 1.4px at 20% 30%, rgba(245, 245, 242, .5), transparent), radial-gradient(1.2px 1.2px at 76% 22%, rgba(245, 245, 242, .4), transparent), radial-gradient(1.6px 1.6px at 64% 78%, rgba(255, 106, 67, .6), transparent), radial-gradient(1.2px 1.2px at 34% 84%, rgba(255, 106, 67, .5), transparent), radial-gradient(1px 1px at 86% 60%, rgba(245, 245, 242, .35), transparent); }
.facts { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.facts li { padding: 4px 18px; }
.facts li + li { border-left: 1px solid var(--line-2); }
.final-small { max-width: 560px; font-size: 13.5px; color: var(--text-3); }

/* ---------- Pied de page + partenaire ---------- */
.footer { position: relative; background: var(--bg); color: var(--text); padding: 72px var(--pad-x) 30px; border-top: 1px solid var(--line); }
.partner { margin-bottom: 56px; }
.partner-note { margin: -6px 0 16px; color: var(--text-2); font-size: 14.5px; }
.partner-card { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 24px 28px; border: 1px solid var(--line-2); border-radius: 20px; background: linear-gradient(135deg, rgba(245, 245, 242, .04), transparent); }
.partner-co { display: block; font: 400 28px/1.1 var(--hero); letter-spacing: -.03em; margin-bottom: 4px; }
.partner-card span { color: var(--text-2); }
.partner-links { display: flex; gap: 10px; flex-wrap: wrap; }
.partner-links a { text-decoration: none; border: 1px solid var(--line-2); border-radius: 999px; padding: 11px 16px; font-size: 13px; }
.partner-links a:hover { border-color: var(--accent); color: var(--accent-2); }
.ft-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 2.5fr) repeat(var(--cols, 1), minmax(0, 1fr)); gap: 40px 48px; align-items: start; }
.ft-brand .logo { height: 26px; }
.ft-tag { margin: 20px 0 12px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.ft-about { margin: 0; max-width: 36ch; color: var(--text-2); font-size: 15px; line-height: 1.6; }
.ft-h { display: flex; align-items: center; height: 26px; margin: 0 0 14px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.ft-col a { display: block; width: fit-content; padding: 7px 0; color: var(--text-2); text-decoration: none; font-size: 15px; transition: color .2s; }
.ft-col a:hover, .ft-col a[aria-current] { color: var(--text); }
.ft-col a.ft-cta { color: var(--text); }
.ft-cta span { display: inline-block; margin-left: 4px; color: var(--accent-2); transition: transform .2s; }
.ft-cta:hover span { transform: translateX(3px); }
.ft-bottom { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 32px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 12.5px; }
.ft-bottom p { margin: 0; }
.ft-ex { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 28px; } /* 5 rubriques (Offres comprise) : 3 + 2 */
.ft-g { margin: 0 0 4px; font: 500 12px/1.4 var(--mono); letter-spacing: .1em; color: var(--text); }
.ft-col .ft-ex a { padding: 5px 0; font-size: 14.5px; }
.ft-legal { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.ft-legal a { color: var(--text-3); text-decoration: none; padding-block: 8px; margin-block: -8px; transition: color .2s; }
.ft-legal a:hover { color: var(--text); }

/* ---------- 5. IA DURABLE (accueil) : texte et 3 points à gauche, courbe de principe à droite ---------- */
.pj-du-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.pj-du-text .sub { margin-top: 22px; }
.pj-du-points { list-style: none; margin: 36px 0 0; padding: 0; border-top: 1px solid var(--line-2); }
.pj-du-points li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.pj-du-ic { width: 44px; height: 44px; color: var(--text-2); }
.pj-du-points h3 { font: 400 21px/1.2 var(--hero); letter-spacing: -.02em; color: var(--text); }
.pj-du-points p { margin-top: 6px; color: var(--text-2); font-size: 15.5px; line-height: 1.55; }
.pj-more { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding: 10px 0 6px; color: var(--text); text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--accent); }
.pj-more span { color: var(--accent-2); transition: transform .2s; }
.pj-more:hover span { transform: translateX(4px); }
.faq .faq-more { margin-top: 14px; } /* FAQ de l'accueil : « Voir nos offres » sous la réponse « Combien ça coûte ? » */
/* Courbe : axes nommés, aucune graduation ; se dessine à l'apparition (mouvement réduit : déjà dessinée) */
.pj-chart { margin: 0; padding: clamp(18px, 2.4vw, 32px); border: 1px solid var(--line-2); border-radius: 24px; background: radial-gradient(70% 60% at 78% 88%, rgba(47, 191, 110, .09), transparent 70%), radial-gradient(50% 50% at 12% 18%, rgba(240, 66, 28, .08), transparent 70%), linear-gradient(180deg, var(--surface) 0%, #0D0E11 100%); }
.pj-chart-svg { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; overflow: visible; }
.pj-chart-svg .lbl, .pj-chart-svg .pj-n { font-size: 10.5px; } /* tablette, ordinateur : ≈ 16 px à l'écran */
.pj-chart-svg .ax { fill: none; stroke: rgba(245, 245, 242, .3); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.pj-chart-svg .lbl { fill: var(--text-2); font-family: var(--sans); font-weight: 500; }
.pj-chart-svg .lbl.st { fill: var(--text); font-weight: 600; }
.pj-chart-svg .lbl.ex { fill: var(--text-3); font-weight: 400; }
.pj-chart-svg .la { fill: none; stroke: #8F8C87; stroke-width: 2; stroke-dasharray: 5 6; stroke-linecap: round; }
.pj-chart-svg .lb { fill: none; stroke: url(#pjg); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.55, .1, .25, 1) .2s; }
.pj-chart-svg .pj-n { fill: #08090B; font-family: var(--sans); font-weight: 700; }
.pj-chart-svg .mstone, .pj-chart-svg .ex { transition: opacity .45s calc(.6s + var(--k, 3) * .4s); }
.js .pj-chart:not(.drawn) .lb { stroke-dashoffset: 1; }
.js .pj-chart:not(.drawn) .mstone, .js .pj-chart:not(.drawn) .ex { opacity: 0; }
.pj-legend { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; line-height: 1.4; color: var(--text-2); }
.pj-legend li { display: inline-flex; align-items: center; gap: 10px; }
.sw-a, .sw-b { flex: none; width: 26px; }
.sw-a { height: 0; border-top: 2px dashed #8F8C87; }
.sw-b { height: 3px; border-radius: 3px; background: linear-gradient(90deg, #F0421C, #F2A23A 45%, #2FBF6E 70%); }
.pj-note { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--text-3); }
/* « Une vraie solution » */
.pj-solution { position: relative; z-index: 1; margin-top: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 28px 64px; padding: clamp(26px, 3.4vw, 44px); border: 1px solid var(--line-2); border-radius: 26px; background: linear-gradient(135deg, rgba(245, 245, 242, .035), transparent 60%); }
.pj-sol-h .kicker { margin-bottom: 14px; }
.pj-sol-h h3 { font: 400 clamp(28px, 2.6vw, 40px)/1.06 var(--hero); letter-spacing: -.035em; text-wrap: balance; }
.pj-solution ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; }
.pj-solution li { padding-top: 16px; border-top: 1px solid var(--line-2); }
.pj-solution b { display: block; font-weight: 500; font-size: 16.5px; line-height: 1.3; color: var(--text); }
.pj-solution li span { display: block; margin-top: 6px; color: var(--text-2); font-size: 15px; line-height: 1.5; }

/* ---------- Lecteur vidéo commun (film de l'accueil, page Médias ; comportement public/video.js) ----------
   La balise <video> est sous l'affiche (lien « Lire la vidéo ») jusqu'au clic, puis l'affiche disparaît. */
.vid-stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line-2); border-radius: 24px; background: #000; box-shadow: 0 40px 100px -50px rgba(0, 0, 0, .95); }
.vid-face { position: absolute; inset: 0; z-index: 1; display: block; }
.vid-pic { display: block; width: 100%; height: 100%; }
.vid-poster { display: block; width: 100%; height: 100%; object-fit: cover; }
.vid-stage > .vid-dur { z-index: 2; pointer-events: none; } /* hors du lien : le nom du lien reste « Lire la vidéo : titre » */
.vid-v { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
[data-player].playing .vid-face, [data-player].playing .vid-stage > .vid-dur { display: none; }

/* ---------- 2. LE FILM (accueil, 04/10/2026) : film 2 en grand, juste sous le hero ; c'est la « page 2 » qui monte
   sur le hero (coins arrondis, ombre), le RDV suit sans rupture. 16:9 sur ordinateur et tablette, 9:16 sur téléphone.
   Le lecteur tient dans la hauteur de l'écran sous l'en-tête. ---------- */
.pj-film { position: relative; background: radial-gradient(55% 40% at 50% 100%, rgba(240, 66, 28, .11), transparent 72%), var(--bg-2); border-radius: 28px 28px 0 0; border-top: 1px solid var(--line-2); box-shadow: 0 -40px 90px rgba(0, 0, 0, .65); padding: clamp(64px, 7.5vw, 112px) var(--pad-x) clamp(72px, 8vw, 120px); }
.pj-film-anchor { position: absolute; left: 0; top: 0; } /* ancien lien « /#methode » (parcours d'une facture) */
.pj-film-head { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 22px clamp(32px, 5vw, 88px); align-items: end; margin-bottom: clamp(30px, 3.6vw, 48px); }
.pj-film-h .kicker { margin-bottom: 18px; }
.pj-film-h h2 { font-size: clamp(40px, 4.3vw, 66px); line-height: 1; text-wrap: balance; }
.pj-film-sub { color: var(--text-2); font-size: 17px; line-height: 1.6; max-width: 34em; }
.pj-film-side .pj-more { margin-top: 16px; }
.pj-film-player { position: relative; max-width: min(100%, calc((100svh - var(--hd-h) - 72px) * 16 / 9)); margin: 0 auto; }
.pj-film-player .vid-stage { border-radius: 26px; box-shadow: 0 50px 120px -50px rgba(0, 0, 0, .95), 0 0 140px -50px rgba(240, 66, 28, .45); }
.pj-film-player .vid-face::after { content: ""; position: absolute; inset: auto 0 0; height: 32%; pointer-events: none; background: linear-gradient(transparent, rgba(8, 9, 11, .45)); }
.pj-film-player .vid-play { z-index: 1; width: 96px; height: 96px; margin: -48px 0 0 -48px; background: var(--accent-btn); border-color: transparent; box-shadow: 0 0 0 12px rgba(240, 66, 28, .16), 0 24px 60px -12px rgba(240, 66, 28, .6); }
.pj-film-player .vid-play svg { width: 32px; height: 32px; margin-left: 5px; }
.pj-film-player .vid-face:hover .vid-play, .pj-film-player .vid-face:focus-visible .vid-play { background: var(--accent-hover); }
.pj-film-player .vid-dur { right: 18px; bottom: 18px; }
.pj-film + .rdv-page { border-radius: 0; box-shadow: none; border-top: 1px solid var(--line); }

/* ---------- 6. POUR ALLER PLUS LOIN (accueil) : vidéo en ligne + 3 guides ---------- */
.pj-explorer { background: var(--bg-2); }
.pj-ex-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "video guides" "video links"; grid-template-rows: auto 1fr; gap: 18px clamp(32px, 4vw, 56px); align-items: start; }
.pj-ex-grid.no-video { grid-template-columns: 1fr; grid-template-areas: "guides" "links"; }
.pj-ex-video { grid-area: video; display: block; color: var(--text); text-decoration: none; }
.pj-ex-pic, .rc-pic { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; border: 1px solid var(--line-2); background: #111216; }
.pj-ex-pic img, .rc-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.pj-ex-video:hover img, .rc:hover .rc-pic img { transform: scale(1.035); }
.vid-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; display: grid; place-items: center; border-radius: 50%; background: rgba(8, 9, 11, .58); border: 1px solid rgba(245, 245, 242, .4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .25s, background .25s, border-color .25s; }
.vid-play svg { width: 26px; height: 26px; margin-left: 4px; fill: #fff; }
.pj-ex-video:hover .vid-play, .vid-face:hover .vid-play, .vid-face:focus-visible .vid-play, .rc:hover .vid-play { transform: scale(1.06); background: var(--accent-btn); border-color: transparent; }
.vid-dur { position: absolute; right: 14px; bottom: 14px; padding: 6px 10px; border-radius: 999px; background: rgba(8, 9, 11, .74); font-size: 12.5px; color: var(--text); }
.pj-ex-vt { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.pj-ex-vt .mono { font-size: 12.5px; letter-spacing: .06em; color: var(--text-3); }
.pj-ex-vt b { font: 400 28px/1.12 var(--hero); letter-spacing: -.03em; }
.pj-ex-guides { grid-area: guides; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.pj-ex-guides a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; min-height: 96px; padding: 18px 4px; border-bottom: 1px solid var(--line-2); color: var(--text); text-decoration: none; }
.pj-ex-guides .mono { font-size: 12.5px; letter-spacing: .08em; color: var(--accent-2); }
.pj-ex-guides b { margin-top: 6px; font: 400 23px/1.2 var(--hero); letter-spacing: -.02em; }
.pj-ex-guides .pj-arr { grid-column: 2; grid-row: 1 / span 2; }
.pj-ex-guides a:hover .pj-arr { transform: translateX(4px); color: var(--accent-2); }
.no-video .pj-ex-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.pj-ex-links { grid-area: links; display: flex; flex-wrap: wrap; gap: 4px 32px; }

/* ---------- Apparition au défilement (légère, une seule fois) ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0ms); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Éléments propres au téléphone et à la tablette (spec-mobile) : absents de l'ordinateur ---------- */
.pj-h1b, .pj-demo, .pj-trail, .pj-next, .pj-bar, .pj-steps, .pj-bk-av, .pj-bk-host, .pj-ac-sum, .pj-ac-toggle, .pj-ac-book, .pj-scene, .pj-st-ctrl, .pj-count, .pj-other-l { display: none; }
.pj-ac-body { display: contents; }
/* Titre visible du parcours : seulement en mode « stories » ; ailleurs, lu par les lecteurs d'écran seulement */
.pj-st-head { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pj-st-head .kicker, .pj-st-hint { display: none; }

/* ---------- Grand écran ---------- */
@media (min-width: 1700px) {
  :root { --maxw: 1440px; }
}

/* ---------- Tablette ---------- */
@media (max-width: 1099.98px) {
  .agents { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-card:last-child:nth-child(3n+1) { grid-column: auto; }
  .agent-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); }
  .ft-grid { grid-template-columns: minmax(0, 2.4fr) repeat(var(--cols, 1), minmax(0, 1fr)); }
  .ft-brand { grid-column: 1 / -1; }
}
@media (max-width: 899.98px) {
  .pj-film-head { grid-template-columns: minmax(0, 1fr); }
  .faq-grid { grid-template-columns: 1fr; }
  .faq-grid .section-head { position: static; margin-bottom: 36px; }
}

/* =====================================================================================================================
   TÉLÉPHONE (P = (max-width: 760px), (max-height: 600px) ; spec-mobile du 04/10/2026) : une vraie page d'arrivée.
   Pas de portrait ni de WebGL ; hero = titre, « L'humain garde toujours la main », bouton qui tombe sur
   l'agenda, prochain créneau libre, démo « Votre agent IA… en service » à trois feux. Puis des « feuilles » sombres à
   coins arrondis qui se superposent ; barre « Réserver » en bas ; appel final en panneau orange.
   ===================================================================================================================== */
@media (max-width: 760px), (max-height: 600px) {
  :root { --hd-h: 60px; --gp: 20px; }
  body { font-size: 16px; }

  /* En-tête : logo (lampes qui s'allument une fois), bouton « Menu » ; pas de bouton RDV (barre du bas) */
  .site-header.scrolled, .site-header.open { background: rgba(8, 9, 11, .94); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header.open { background: var(--bg); }
  .hd-in { padding: 0 var(--gp); }
  .js .hd-cta, .hd-cta { display: none; }
  .logo { font-size: 19px; padding-block: 13px; margin-block: -13px; } /* zone de toucher de 44 px, même place */
  .ft-brand .logo { height: auto; padding-block: 13px; margin-block: -13px; }
  .site-header .logo .lamps i { animation: pj-lamp .9s cubic-bezier(.2, .8, .2, 1) both; }
  .site-header .logo .lamps i:nth-child(2) { animation-delay: .18s; }
  .site-header .logo .lamps i:nth-child(3) { animation-delay: .36s; }
  .site-header .logo .lamps .g { color: #22A55B; } .site-header .logo .lamps .o { color: #F28A1E; } .site-header .logo .lamps .r { color: #E0301E; }

  /* Hero */
  .hero { position: relative; top: auto; height: auto; min-height: 0; background: radial-gradient(120% 70% at 100% 0%, #1B1210 0%, #0C0D10 42%, var(--bg) 100%); }
  .hero::before { background-size: 48px 48px; -webkit-mask-image: radial-gradient(90% 60% at 80% 10%, #000 20%, transparent 80%); mask-image: radial-gradient(90% 60% at 80% 10%, #000 20%, transparent 80%); }
  .hero-glow { background: radial-gradient(70% 34% at 90% 96%, rgba(240, 66, 28, .2), transparent 70%); }
  .bust, .hero-visual, .hero-control { display: none !important; }
  .pj-trail { display: block; position: absolute; z-index: 1; right: 6px; top: calc(var(--hd-h) - 14px); width: min(52vw, 280px); height: auto; pointer-events: none; opacity: .8; transform-origin: 90% 10%; animation: pj-drift 14s ease-in-out infinite alternate; -webkit-mask-image: linear-gradient(200deg, #000 35%, transparent 80%); mask-image: linear-gradient(200deg, #000 35%, transparent 80%); }
  .hero-in { display: block; height: auto; max-width: 600px; margin: 0 auto; padding: calc(var(--hd-h) + 16px) var(--gp) 48px; opacity: 1; transform: none; pointer-events: auto; }
  .hero-a { max-width: none; container-type: normal; }
  .hero-lead { position: relative; }
  .hero-lead h1 { font: 300 clamp(44px, 14.5vw, 64px)/.92 var(--hero); letter-spacing: -.05em; }
  .pj-h1b { display: block; margin-top: 12px; font: 300 clamp(19px, 5.4vw, 24px)/1.25 var(--hero); letter-spacing: -.025em; color: var(--text); }
  .pj-h1b span { color: var(--text-2); }
  .hero .sub { margin-top: 14px; max-width: 30em; font-size: 16px; line-height: 1.5; }
  .hero .sub .sub-2 { display: none; }
  .hero-actions { margin-top: 20px; flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-cta { width: 100%; min-height: 56px; }
  .hero-micro { max-width: none; text-align: center; font-size: 13.5px; }
  .pj-next-hero { justify-content: center; margin-top: 8px; }

  /* Démo « Votre agent IA… en service » : trois voies fixes, une par feu */
  .pj-demo { display: block; position: relative; z-index: 2; margin: 16px 0 0; padding: 10px 8px 8px; border: 1px solid transparent; border-radius: 22px; background: linear-gradient(180deg, rgba(20, 21, 26, .92), rgba(13, 14, 17, .92)) padding-box, linear-gradient(135deg, rgba(240, 66, 28, .6), rgba(245, 245, 242, .1) 42%, rgba(47, 191, 110, .55)) border-box; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
  .pj-demo-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; padding: 0 8px 8px; font-size: 14px; color: var(--text-2); }
  .pj-demo-who { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pj-demo-who b { color: var(--text); font-weight: 600; transition: opacity .22s; }
  .pj-demo-who b.out { opacity: 0; }
  .pj-live { flex: none; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; letter-spacing: .04em; color: var(--g); }
  /* « ● En service » = bouton pause / lecture de la démo (ui.js, WCAG 2.2.2) : même dessin, 44 px au doigt */
  /* (:where = spécificité nulle : la pastille posée sur le bord de la carte, plus bas, garde sa position et son cadre) */
  :where(button.pj-live) { position: relative; margin: 0; padding: 0; border: 0; background: none; line-height: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  button.pj-live::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; margin-top: -22px; }
  .pj-demo[data-paused] .pj-live { color: var(--text-2); border-color: var(--line-3); }
  .pj-demo[data-paused] .pj-live i { background: var(--text-3); animation: none; }
  .pj-live i, .pj-next i, .pj-bar-n i { width: 7px; height: 7px; border-radius: 50%; background: var(--g); box-shadow: 0 0 0 0 rgba(47, 191, 110, .5); animation: pj-pulse 2.2s infinite; flex: none; }
  .pj-lanes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .pj-lane { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "l a k" "l b x"; column-gap: 10px; align-items: center; height: 56px; padding: 0 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(245, 245, 242, .025); overflow: hidden; transition: box-shadow .5s, border-color .5s; }
  .pj-lane::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: currentColor; }
  .pj-lane.g { color: var(--g); } .pj-lane.o { color: var(--o); } .pj-lane.r { color: var(--r); }
  .pj-lane .lamp { grid-area: l; }
  .pj-lane-a { grid-area: a; align-self: end; min-width: 0; font-size: 15px; line-height: 1.25; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pj-lane-b { grid-area: b; align-self: start; min-width: 0; font-size: 13px; line-height: 1.35; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pj-lane-k { grid-area: k; align-self: end; justify-self: end; font-size: 12px; line-height: 1.25; letter-spacing: .04em; }
  .pj-lane-x { grid-area: x; align-self: start; justify-self: end; font-size: 12.5px; line-height: 1.35; white-space: nowrap; }
  .pj-lane.reading .lamp { border-style: dashed; box-shadow: none; background: none; animation: pj-spin 1.1s linear infinite; }
  .pj-lane.reading .lamp svg { opacity: 0; }
  .pj-lane.reading .pj-lane-a { color: var(--text-3); font-weight: 500; }
  .pj-lane.reading .pj-lane-b { color: transparent; border-radius: 4px; background: linear-gradient(90deg, rgba(245, 245, 242, .05) 0%, rgba(245, 245, 242, .16) 50%, rgba(245, 245, 242, .05) 100%) 0 50% / 200% 9px no-repeat; animation: pj-sweep .7s linear; }
  .pj-lane.lit { border-color: color-mix(in srgb, currentColor 55%, transparent); box-shadow: inset 0 0 22px -10px currentColor; }
  /* Voie active : c'est elle que décrit le verbe de l'en-tête (souligné de sa couleur) */
  .pj-demo[data-on="g"] .pj-lane.g, .pj-demo[data-on="o"] .pj-lane.o, .pj-demo[data-on="r"] .pj-lane.r { border-color: color-mix(in srgb, currentColor 38%, transparent); background: color-mix(in srgb, currentColor 6%, rgba(245, 245, 242, .02)); }
  .pj-demo-who b { text-decoration: underline 2px; text-decoration-color: var(--g); text-underline-offset: 5px; transition: opacity .22s, text-decoration-color .3s; }
  .pj-demo[data-on="o"] .pj-demo-who b { text-decoration-color: var(--o); }
  .pj-demo[data-on="r"] .pj-demo-who b { text-decoration-color: var(--r); }
  .pj-demo-ex { margin: 8px 0 0; text-align: center; font-size: 12px; letter-spacing: .06em; color: var(--text-3); }

  /* Prochain créneau libre : hauteur réservée, rien ne bouge quand il arrive */
  .pj-next { display: flex; align-items: center; gap: 8px; min-height: 20px; font-size: 13.5px; line-height: 20px; color: var(--text-2); visibility: hidden; }
  .pj-next.on { visibility: visible; }
  .pj-next b { color: var(--text); font-weight: 500; white-space: nowrap; }

  /* Feuilles : chaque grande section monte sur la précédente, coins arrondis, fond sombre alterné */
  .rdv-page, .js .story, html:not(.js) .story, .pj-durable, .pj-explorer, .final { position: relative; margin-top: -28px; border-radius: 28px 28px 0 0; border-top: 1px solid var(--line-2); }
  /* Contenu limité à 600 px, centré (iPad mini en portrait, téléphones couchés) */
  :root { --pj-px: max(var(--gp), calc((100% - 600px) / 2)); }
  .section { padding: 54px var(--pj-px) 58px; }
  .section-head { margin-bottom: 22px; }
  h2 { font-size: clamp(34px, 10vw, 44px); line-height: 1; letter-spacing: -.04em; text-wrap: balance; }
  .section .sub { margin-top: 16px; font-size: 16px; }
  .kicker { margin-bottom: 16px; }

  /* Le film : première feuille sur le hero, titre et phrase puis le film en 9:16 (tient dans l'écran sous l'en-tête) */
  .pj-film, .pj-film + .rdv-page { position: relative; margin-top: -28px; border-radius: 28px 28px 0 0; border-top: 1px solid var(--line-2); box-shadow: 0 -30px 60px rgba(0, 0, 0, .5); }
  .pj-film { background: radial-gradient(90% 30% at 50% 100%, rgba(240, 66, 28, .12), transparent 72%), var(--pj-sheet); padding: 44px var(--pj-px) 64px; }
  .pj-film-head { display: block; max-width: 600px; margin: 0 auto 22px; }
  .pj-film-h .kicker { margin-bottom: 14px; }
  .pj-film-h h2 { font-size: clamp(34px, 10vw, 44px); }
  .pj-film-sub { margin-top: 14px; font-size: 15.5px; line-height: 1.55; }
  .pj-film-side .pj-more { margin-top: 10px; }
  .pj-film-player { max-width: calc(min(100svh - var(--hd-h) - 48px, 700px) * 9 / 16); }
  .pj-film-player .vid-stage { aspect-ratio: 9 / 16; border-radius: 20px; }
  .pj-film-player .vid-play { width: 84px; height: 84px; margin: -42px 0 0 -42px; box-shadow: 0 0 0 10px rgba(240, 66, 28, .16), 0 20px 50px -12px rgba(240, 66, 28, .6); }
  .pj-film-player .vid-play svg { width: 28px; height: 28px; }
  .pj-film-player .vid-dur { right: 14px; bottom: 14px; }

  /* Rendez-vous : titre, agenda, puis l'objectif de l'appel */
  .rdv-page { background: var(--pj-sheet); padding: 44px var(--pj-px) 56px; box-shadow: 0 -30px 60px rgba(0, 0, 0, .5); }
  .rdv-grid { display: flex; flex-direction: column; align-items: stretch; max-width: 600px; margin: 0 auto; }
  .rdv-head { margin-bottom: 20px; }
  .rdv-title { font-size: clamp(34px, 10vw, 44px); }
  .rdv-more { margin-top: 22px; }
  .rdv-lead { margin-top: 0; font-size: 15px; }
  .rdv-more .bk-host { display: none; } /* l'en-tête de la carte le porte déjà */
  .rdv-checks { flex-direction: column; gap: 10px; margin-top: 18px; font-size: 15px; color: var(--text); }
  .rdv-checks li::before { border-color: rgba(47, 191, 110, .55); color: var(--g); }
  .booking { border-radius: 22px; }
  .bk-head { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 16px 16px 14px; }
  .pj-bk-av { display: grid; position: relative; width: 44px; height: 44px; font-size: 14px; }
  .pj-bk-av::after { content: ""; position: absolute; right: 0; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--g); border: 2px solid var(--surface); }
  .bk-title { margin: 1px 0 2px; font: 600 17px/1.25 var(--sans); letter-spacing: 0; }
  .pj-bk-host { display: block; font-size: 13.5px; line-height: 1.35; color: var(--text-2); }
  .bk-facts { gap: 0; margin-top: 6px; font: 12.5px/1.5 var(--mono); color: var(--text-3); }
  .bk-facts li { gap: 0; }
  .bk-facts li::before { display: none; }
  .bk-facts .i-clock::after, .bk-facts .i-video::after { content: "·"; margin: 0 7px; }
  /* « 30 min · Visio Google Meet » puis le fuseau seul dessous : jamais un « · » en fin de ligne */
  .bk-facts .i-video::after { content: none; }
  .bk-facts .i-globe { flex-basis: 100%; }
  .pj-hide-p, .pj-tz-l { display: none; }
  .i-globe b { font-weight: 400; color: var(--text-2); }
  .bk-facts .i-cal { flex-basis: 100%; gap: 9px; margin-top: 10px; padding: 9px 12px; border-radius: 12px; background: rgba(240, 66, 28, .08); border: 1px solid rgba(240, 66, 28, .32); font: 600 14px/1.35 var(--sans); color: var(--text); }
  .bk-facts .i-cal::before { display: block; width: 16px; height: 16px; margin-top: 1px; }
  .bk-main { padding: 16px 14px 18px; }
  .bk-h { margin-bottom: 14px; font: 600 15px/1.3 var(--sans); letter-spacing: 0; }
  #stepB .bk-h, #stepC .bk-h { font: 400 24px/1.15 var(--hero); letter-spacing: -.02em; }
  .book-pane { gap: 14px; }
  .times { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-height: 0; }
  .time { min-height: 48px; padding: 0 4px; font-size: 15px; }
  .times .note { font-size: 14.5px; }
  .back { min-height: 44px; padding: 0; font-size: 14.5px; }
  .btn-ghost-sm { min-height: 44px; padding: 0 16px; font-size: 14px; }
  #confirm { min-height: 56px; }
  .guest-row button { width: 44px; height: 48px; }

  /* Agents : une liste dépliable (nom + tâches en une ligne ; « + » déplie les tâches et le lien de réservation) */
  .agents { display: block; max-width: 600px; margin: 0 auto; border-top: 1px solid var(--line-2); }
  .agent-card { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) 44px; grid-template-areas: "art name tg" "art sum tg" "body body body"; column-gap: 14px; align-items: center; padding: 13px 0; gap: 0 14px; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; background: none; }
  .agent-card:hover { transform: none; border-color: var(--line-2); }
  .agent-card:last-child:nth-child(odd) { grid-column: auto; justify-self: stretch; width: auto; }
  .ac-top { grid-area: art; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface); }
  .ac-n { display: none; }
  .agent-art { width: 32px; height: 32px; }
  .agent-card h3 { grid-area: name; align-self: end; font: 400 22px/1.15 var(--hero); letter-spacing: -.025em; }
  .pj-ac-sum { display: block; grid-area: sum; align-self: start; margin-top: 3px; font-size: 13.5px; line-height: 1.35; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pj-ac-toggle { display: block; grid-area: tg; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-3); border-radius: 50%; color: var(--text); cursor: pointer; background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat; transition: background-color .25s, border-color .25s, color .25s; }
  .pj-ac-toggle::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 74px; } /* toute la ligne se touche */
  .agent-card.open .pj-ac-toggle { color: var(--ink); background-color: var(--text); border-color: var(--text); background-size: 14px 1.5px, 0 0; }
  .agent-card.open .agent-art { transform: rotate(18deg); color: var(--accent-2); }
  .agent-card.open .pj-ac-sum { visibility: hidden; }
  .pj-ac-body { display: block; grid-area: body; }
  .js .agent-card:not(.open) .pj-ac-body { display: none; }
  .agent-card .ac-tasks { padding: 12px 0 2px 62px; border-top: 0; font-size: 15px; }
  .pj-ac-book { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 4px 0 0 62px; color: var(--accent-2); font-weight: 500; text-decoration: none; }
  html:not(.js) .pj-ac-toggle, html:not(.js) .pj-ac-sum { display: none; }

  /* Questions */
  .faq summary { min-height: 60px; gap: 16px; padding: 14px 0; font-size: 18px; }
  .faq summary i { width: 28px; height: 28px; transition: transform .25s, border-color .2s, background .2s; }
  .faq details[open] summary i { transform: rotate(180deg); }
  .faq details p { padding: 0 0 22px; font-size: 16px; }

  /* Appel final : panneau orange, bouton encre */
  .final { gap: 18px; align-items: stretch; text-align: left; padding: 56px var(--pj-px) 60px; background: radial-gradient(70% 45% at 85% 0%, rgba(255, 255, 255, .16), transparent 70%), var(--accent-btn); color: #fff; border-top: 0; }
  .final > * { max-width: 600px; width: 100%; margin-inline: auto; }
  .final-glow, .final-band { display: none !important; }
  .final .kicker { order: 1; margin: 0 auto; color: #fff; }
  .final .kicker::before { background: #fff; }
  .final h2 { order: 2; font: 300 clamp(40px, 12vw, 52px)/.98 var(--hero); letter-spacing: -.045em; color: #fff; }
  .final .final-cta { order: 4; min-height: 56px; background: #08090B; color: #fff; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6); }
  .final .final-cta:hover { background: #000; }
  .pj-next-final { order: 5; color: #fff; justify-content: center; }
  .pj-next-final b { color: #fff; }
  .final .facts { order: 6; flex-direction: column; gap: 0; margin: 4px auto 0; border-top: 1px solid rgba(255, 255, 255, .3); font: 400 16px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: #fff; }
  .final .facts li { display: flex; align-items: center; gap: 14px; padding: 13px 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .3); }
  .final .facts li::before { content: "✓"; display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #fff; font-size: 13px; font-weight: 700; }
  .final-small { order: 7; font-size: 14px; color: #fff; }
  .final :focus-visible { outline-color: #fff; } /* l'anneau orange se perdait sur le panneau orange (blanc : 4,5:1) */
}
/* Téléphone court (Safari réel ≈ 664 px, navigateur Facebook, iPhone SE) : la 1re phrase et la petite ligne sous le
   bouton s'effacent ; bouton et trois feux de la démo tiennent dans l'écran */
@media (max-width: 760px) and (max-height: 779px) {
  .hero .sub, .hero-micro { display: none; }
  .hero-lead h1 { font-size: clamp(40px, 12.5vw, 54px); }
  .pj-h1b { margin-top: 10px; }
  .hero-actions { margin-top: 18px; }
  .pj-lane { height: 52px; }
}
/* Téléphone couché (P-couché) : hero en 2 colonnes (texte et bouton à gauche, démo à droite), en-tête de 52 px,
   stories en 2 colonnes, heures en 5 colonnes */
@media (max-height: 600px) and (orientation: landscape) {
  :root { --hd-h: 52px; --gp: max(20px, env(safe-area-inset-left), env(safe-area-inset-right)); }
  .hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: center; max-width: 980px; padding: calc(var(--hd-h) + 14px) var(--gp) 44px; }
  .hero-lead h1 { font-size: clamp(34px, 5vw, 44px); }
  .pj-h1b { margin-top: 8px; font-size: 18px; }
  .hero .sub, .hero-micro { display: none; }
  .hero-actions { margin-top: 14px; }
  .pj-next-hero { justify-content: flex-start; }
  .pj-demo { margin: 0; }
  .pj-lane { height: 46px; }
  .pj-trail { width: 220px; }
  .times { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 359.98px) {
  :root { --gp: 16px; }

  .pj-demo-hd { font-size: 13.5px; }
  .pj-lane-a { font-size: 14.5px; }
  .pj-lane-b { font-size: 12.5px; }
  /* Carte RDV : « 30 min » / « Visio Google Meet » / fuseau, une ligne chacun, sans séparateur orphelin */
  .bk-facts .i-clock::after { content: none; }
  .bk-facts .i-video { flex-basis: 100%; }
}
@media (max-width: 389.98px) {
  body[data-ui="en"] .bk-facts .i-clock::after { content: none; }
  body[data-ui="en"] .bk-facts .i-video { flex-basis: 100%; }
}
/* Téléphone (< 500 px de large) */
@media (max-width: 499.98px) {
  .pj-demo { margin-top: 24px; }
}
/* Démo étroite (carte ≤ 460 px : téléphone en portrait, colonne de droite du téléphone couché) : chaque voie sur trois
   lignes de toute la largeur (« Vert · L'agent exécute », la tâche, le motif) : plus rien de coupé par « … » dès
   360 px ; « En service » en pastille posée sur le bord de la carte (l'en-tête garde toute la largeur) */
@media (max-width: 760px), (max-height: 600px) {
  .pj-demo { container: pjdemo / inline-size; }
}
@media (max-width: 499.98px), (max-height: 600px) and (orientation: landscape) and (max-width: 1060px) {
  .pj-demo { padding-top: 14px; }
}
@container pjdemo (max-width: 460px) {
  .pj-demo-hd { padding: 0 8px 8px; }
  .pj-live { position: absolute; z-index: 1; top: -12px; right: 16px; padding: 4px 10px 4px 9px; border: 1px solid rgba(47, 191, 110, .4); border-radius: 999px; background: #0F1114; font-size: 12px; line-height: 14px; }
  .pj-lane { grid-template-columns: 32px auto minmax(0, 1fr); grid-template-areas: "l k x" "l a a" "l b b"; column-gap: 0; row-gap: 1px; align-content: center; height: 64px; padding: 0 12px; }
  .pj-lane .lamp { align-self: center; }
  .pj-lane-k { align-self: end; justify-self: start; font-size: 12px; line-height: 14px; } /* ≥ 12 px (spec §3.2, C5) */
  .pj-lane-x { align-self: end; justify-self: start; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 12px; line-height: 14px; }
  .pj-lane-x::before { content: "·"; margin: 0 6px; }
  .pj-lane-a { align-self: auto; line-height: 1.22; }
  .pj-lane-b { align-self: auto; line-height: 1.3; }
  @media (max-height: 779px) {
    .pj-lane { height: 58px; row-gap: 0; }
  }
  @media (max-height: 600px) {
    .pj-lane { height: 54px; }
  }
}
/* Écrans de 320 px (carte ≤ 300 px) : un peu plus de place pour le texte */
@container pjdemo (max-width: 300px) {
  .pj-lane { grid-template-columns: 28px auto minmax(0, 1fr); padding: 0 8px 0 10px; }
  .pj-lane-b { font-size: 12px; }
}

/* ---------- Tablette : titres du menu dans l'en-tête (pas de burger), sur une ligne ---------- */
@media (min-width: 761px) and (max-width: 1099.98px) and (min-height: 601px) {
  .hd-in { gap: 12px; }
  .hd-nav { gap: 10px; }
  .pj-gt { gap: 7px; padding: 0 7px; font-size: 14px; }
  .hd-cta { padding: 10px 14px; font-size: 14px; letter-spacing: 0; text-transform: none; }
}
/* Tablette : pied de page plus compact (logo, Contact et Langues sur une ligne ; Navigation en 5 colonnes dessous) :
   la page reste sous 8 000 px à 768 × 1024 malgré des liens de 44 px au doigt */
@media (min-width: 761px) and (max-width: 1099.98px) and (min-height: 601px) {
  .ft-grid { grid-template-columns: minmax(0, 1.7fr) repeat(var(--cols, 1), minmax(0, 1fr)); gap: 36px 40px; }
  .ft-brand { grid-column: auto; }
  .ft-explore { grid-column: 1 / -1; order: 1; }
  .ft-ex { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 20px; } /* 5 rubriques (Offres comprise) */
  .footer { padding-top: 56px; }
  .partner { margin-bottom: 44px; }
  .partner-card { padding: 20px 24px; gap: 14px 20px; }
  .partner-links a { padding: 11px 13px; }
  .ft-bottom { margin-top: 40px; }
}
@media (pointer: coarse) and (min-width: 761px) and (min-height: 601px) {
  .lang-switch a { position: relative; }
  .lang-switch a::after { content: ""; position: absolute; left: 0; right: 0; top: -9px; bottom: -9px; } /* 45 px au doigt, même dessin */
  .ft-col a, .ft-col .ft-ex a { display: flex; align-items: center; min-height: 44px; padding-block: 0; }
  .ft-legal a { display: inline-flex; align-items: center; min-height: 44px; margin-block: 0; padding-block: 0; }
}
@media (min-width: 761px) and (max-width: 999.98px) and (min-height: 601px) {
  .hd-nav .lang-switch { display: none; }
  .lang-mini { display: block; }
  /* 5 titres (Offres, 04/10/2026) + langue + « Pran rendez-vous » sur une ligne dès 761 px (pilotaj.mu) */
  .hd-in { gap: 8px; }
  .hd-nav { gap: 6px; }
  .pj-gt { gap: 5px; padding: 0 4px; font-size: 13.5px; }
  .lang-mini-b { gap: 7px; padding: 0 10px; letter-spacing: .06em; }
  .hd-cta { padding: 10px 12px; }
}
@media (max-width: 1099.98px) {
  .pj-du-grid { grid-template-columns: 1fr; }
  .pj-chart { max-width: 640px; }
  .pj-solution { grid-template-columns: 1fr; }
  .pj-ex-grid { grid-template-columns: 1fr; grid-template-areas: "video" "guides" "links"; }
  .no-video .pj-ex-guides { grid-template-columns: 1fr; }
}
@media (min-width: 900px) and (max-width: 1099.98px) {
  .pj-du-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
  .pj-ex-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "video guides" "video links"; }
}

/* ---------- Téléphone : menu plein écran, chaque titre déroule ses sous-titres (accordéon, un seul ouvert) ---------- */
@media (max-width: 760px), (max-height: 600px) {
  .hd-in { gap: 10px; }
  /* Bouton « Menu » (pilule, 44 px) : le mot + un rond crème ; « Fermer » + croix quand le menu est ouvert */
  .hd-menu { display: inline-flex; margin-left: auto; gap: 10px; padding: 0 5px 0 16px; border-color: var(--line-3); font: 500 15px var(--sans); }
  .hd-menu-t { display: inline; }
  .hd-mc, .site-header.open .hd-mo { display: none; }
  .site-header.open .hd-mc { display: inline; }
  .hd-menu-i { width: 32px; height: 32px; border-radius: 50%; background: var(--text); color: var(--ink); }
  .hd-menu-i i { left: 9px; right: 9px; }
  .hd-menu-i i:first-child { top: 12.5px; } .hd-menu-i i:last-child { top: 18px; }
  .site-header.open .hd-menu-i i:first-child, .site-header.open .hd-menu-i i:last-child { top: 15.25px; }
  /* Téléphone couché : « Prochain créneau libre : » sur une ligne, la date centrée dessous (jamais coupé en deux) */
  .pj-foot .pj-next { justify-content: center; flex-wrap: wrap; column-gap: 8px; row-gap: 0; }
  .hd-nav { position: absolute; top: var(--hd-h); left: 0; right: 0; height: calc(100vh - var(--hd-h)); height: calc(100dvh - var(--hd-h)); margin: 0; flex-direction: column; align-items: stretch; gap: 0; overflow: hidden; background: var(--bg); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .25s, transform .25s, visibility 0s .25s; }
  .hd-nav::before { content: ""; position: absolute; right: -25%; bottom: -12%; width: 90%; height: 55%; background: radial-gradient(closest-side, rgba(240, 66, 28, .16), transparent); pointer-events: none; }
  .site-header.open .hd-nav { visibility: visible; opacity: 1; transform: none; transition: opacity .25s, transform .25s; }
  .pj-menu { position: relative; flex: 1 1 auto; min-height: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 0 20px 12px; overflow-y: auto; overscroll-behavior: contain; }
  .pj-g { border-bottom: 1px solid var(--line); }
  .pj-gt { display: grid; grid-template-columns: 30px minmax(0, 1fr) 44px; grid-template-rows: auto auto; column-gap: 8px; align-items: center; width: 100%; height: auto; min-height: 84px; padding: 16px 0; border-radius: 0; background: none !important; color: var(--text); text-align: left; white-space: normal; }
  .pj-g.cur > .pj-gt::after { display: none; }
  .pj-gn { display: block; grid-column: 1; grid-row: 1; align-self: start; padding-top: 9px; font-size: 12.5px; letter-spacing: .08em; color: var(--accent-2); }
  .pj-gl { grid-column: 2; grid-row: 1; font: 300 clamp(28px, 8.4vw, 34px)/1.05 var(--hero); letter-spacing: -.035em; }
  .pj-gd { display: block; grid-column: 2; grid-row: 2; margin-top: 5px; font-size: 15px; line-height: 1.35; color: var(--text-2); }
  .pj-pm { grid-column: 3; grid-row: 1 / span 2; position: relative; width: 44px; height: 44px; border: 1px solid var(--line-3); border-radius: 50%; transform: none !important; opacity: 1; transition: background .25s, border-color .25s; }
  .pj-pm::before, .pj-pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -.75px 0 0 -7px; background: var(--text); transition: transform .25s, background .25s; }
  .pj-pm::after { transform: rotate(90deg); }
  .pj-g.open > .pj-gt .pj-pm { background: var(--text); border-color: var(--text); }
  .pj-g.open > .pj-gt .pj-pm::before, .pj-g.open > .pj-gt .pj-pm::after { background: var(--ink); }
  .pj-g.open > .pj-gt .pj-pm::after { transform: rotate(0deg); }
  .pj-direct .pj-gt .pj-arr { display: block; grid-column: 3; grid-row: 1 / span 2; justify-self: center; width: 18px; color: var(--text); }
  .pj-p { position: static; width: auto; display: grid; grid-template-rows: 0fr; visibility: visible; opacity: 1; transform: none; transition: grid-template-rows .25s cubic-bezier(.2, .8, .2, 1); }
  .pj-g.open > .pj-p { grid-template-rows: 1fr; transition: grid-template-rows .25s cubic-bezier(.2, .8, .2, 1); }
  .pj-pin { display: block; min-height: 0; overflow: hidden; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; visibility: hidden; transition: visibility 0s .25s; }
  .pj-g.open > .pj-p .pj-pin { visibility: visible; transition: none; }
  .pj-ph { display: none; }
  .pj-items { grid-template-columns: 1fr; gap: 0; padding: 0 0 14px 38px; }
  .pj-items li { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
  .pj-g.open .pj-items li { opacity: 1; transform: none; transition: opacity .25s calc(60ms + var(--i) * 40ms), transform .25s calc(60ms + var(--i) * 40ms); }
  .pj-items a { min-height: 60px; padding: 11px 2px; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
  .pj-items a:hover, .pj-items a:focus-visible { background: none; border-color: var(--line); }
  .pj-items b { font-size: 17px; font-weight: 600; }
  .pj-items small { font-size: 14px; color: var(--text-2); }
  .pj-foot { position: relative; flex: none; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-2); background: var(--bg); }
  .pj-foot-cta { display: inline-flex !important; width: 100%; min-height: 56px; font-size: 17px; letter-spacing: 0; text-transform: none; }
  .pj-foot .lang-switch { align-self: stretch; }
  .pj-foot .lang-switch a { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 42px; font-size: 12.5px; }
  .pj-mail { display: flex !important; align-items: center; justify-content: center; min-height: 40px; font-size: 14px; color: var(--text-3); text-decoration: none; }
  .lang-mini { display: none !important; }
  .pj-veil { display: none; }
  /* Sections nouvelles de l'accueil */
  .pj-du-points { margin-top: 24px; }
  .pj-du-points li { grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding: 16px 0; }
  .pj-du-points h3 { font-size: 19px; }
  .pj-du-points p { font-size: 15px; line-height: 1.5; }
  .pj-du-grid { gap: 24px; }
  .pj-ex-grid { row-gap: 14px; }
  .pj-more { margin-top: 18px; min-height: 44px; }
  .pj-solution { margin-top: 24px; }
  .pj-ex-guides a { min-height: 72px; padding: 12px 4px; }
  .pj-du-ic { width: 36px; height: 36px; }
  .pj-chart { padding: 16px 12px; border-radius: 20px; }
  .pj-chart-svg .lbl { font-size: 13.5px; } /* ≥ 12 px à l'écran dès 340 px de large */
  .pj-chart-svg .pj-n { font-size: 12px; }
  .pj-solution { padding: 22px 20px; gap: 18px; }
  .pj-solution ul { gap: 14px 16px; }
  .pj-solution li span { display: none; } /* téléphone : les titres seuls, en 2 × 2 */

  .pj-ex-guides b { font-size: 21px; }
  .pj-ex-vt { margin-top: 12px; }
  .pj-ex-vt b { font-size: 22px; }
  .vid-play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
}
/* Courbe « IA durable » sous 500 px (SVG de moins de 340 px de large) : libellés ≥ 14 px et numéros ≥ 12,7 px à
   l'écran dès 375 px ; « Exceptions » poussé à droite pour ne pas toucher la courbe (anglais) */
@media (max-width: 499.98px) {
  .pj-chart-svg .lbl { font-size: 15.5px; }
  .pj-chart-svg .pj-n { font-size: 14px; }
  .pj-chart-svg .lbl.ex { transform: translateX(12px); }
}
/* Menu téléphone, écran court : les 5 titres (Offres compris) tiennent au-dessus du bloc du bas, sans défiler.
   Safari réel ≈ 664 px (iPhone 12 à 15), iPhone SE / 8 (667), Android 360 × 640, navigateurs intégrés ; mesuré sur
   les 4 variantes, accueil compris (sa ligne « Prochain créneau libre » rallonge le bloc du bas). */
@media (max-width: 760px) and (max-height: 839.98px) {
  .pj-gt { min-height: 0; padding: 12px 0; row-gap: 0; }
  .pj-gn { padding-top: 7px; }
  .pj-gl { font-size: clamp(26px, 7.4vw, 30px); }
  .pj-gd { margin-top: 4px; font-size: 14px; line-height: 1.3; }
}
@media (max-width: 760px) and (max-height: 699.98px) {
  .pj-mail { display: none !important; } /* petit écran : le bouton et les langues d'abord */
}
/* Très court (iPhone SE 1re génération, téléphone couché) : les titres seuls */
@media (max-width: 760px) and (max-height: 600px), (max-height: 600px) and (orientation: landscape) {
  .pj-gd { display: none; }
  .pj-gt { min-height: 56px; padding: 10px 0; row-gap: 0; grid-template-rows: auto; }
  .pj-gn { padding-top: 0; align-self: center; }
}
@media (max-height: 600px) and (orientation: landscape) {
  .hd-nav { flex-direction: row; }
  .pj-foot { width: min(340px, 44%); justify-content: flex-end; border-top: 0; border-left: 1px solid var(--line-2); }
}
@media (max-width: 350px) {
  .pj-gl { font-size: 26px; }
  .pj-items { padding-left: 30px; }
}

/* ---------- Parcours sur téléphone / écran en portrait ---------- */
@media (max-width: 760px), (max-aspect-ratio: 20/21) {
  .story { --vh: 320vh; }
  .story-stage { padding: 8px; }
  .story-ch, .story-live .story-box { border-radius: 22px; }
  .story-ch { min-height: 88svh; }
  .story-txt { padding: 40vh 20px calc(28px + env(safe-area-inset-bottom)); }
  .story-live .story-rule, .story-counter, .story-live .story-cue { display: none; }
  .story-live .story-nav { left: 20px; right: 20px; top: 66px; width: auto; transform: none; }
  .story-nav ol { display: flex; gap: 4px; }
  .story-nav li { flex: 1; }
  .story-nav a { height: 22px; padding: 0 !important; opacity: .3; }
  .story-nav a span, .story-nav a b { display: none; }
  .story-nav a::before, .story-nav a i { height: 2px; background-color: rgba(237,238,237,.35); }
  .story-nav a i { background: var(--accent); }
  .story-nav a.done { opacity: .6; }
  .story-nav a.done i { transform: scaleX(1); background: var(--on-dark); }
  .story-live .story-meta { left: 20px; top: 96px; font-size: 10px; gap: 4px; }
  .story-meta small { font-size: 9.5px; }
  .story-live .story-status { right: 20px; top: 96px; font-size: 10px; }
  .story-live .story-veil { background: linear-gradient(to top, rgba(5,5,5,.94) 0%, rgba(5,5,5,.8) 30%, rgba(5,5,5,0) 50%); }
  .story-live .story-copy { left: 20px; right: 20px; width: auto; bottom: calc(26px + env(safe-area-inset-bottom)); }
  .story-ch h3 { font-size: clamp(32px, 9.4vw, 44px); }
  .story-p { margin-top: 14px; font-size: 15.5px; }
  .story-end { margin-top: 18px; }
  .story-end .btn { width: 100%; }
  .story-still img, .story-pic img { object-position: 50% 0; }
  .facts { flex-direction: column; gap: 8px; }
  .facts li + li { border-left: 0; }
}
/* Pied de page sur téléphone : logo et phrase, rubriques repliables (Navigation, Langues : ui.js ; ouvertes sans JS),
   Contact toujours visible ; carte du partenaire (pilotaj.mu) visible, compacte ; marge basse pour la barre « Réserver » */
@media (max-width: 760px), (max-height: 600px) {
  .footer { padding: 40px var(--gp) calc(100px + env(safe-area-inset-bottom)); }
  .footer > * { max-width: 600px; margin-inline: auto; }
  .partner { margin-bottom: 36px; }
  .partner-card { padding: 18px; gap: 14px; border-radius: 18px; }
  .partner-co { font-size: 24px; }
  .partner-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; }
  .ft-grid { grid-template-columns: 1fr; gap: 0; }
  .ft-brand { padding-bottom: 20px; }
  .ft-col { border-top: 1px solid var(--line); }
  .ft-col:last-child { border-bottom: 1px solid var(--line); }
  .ft-h { display: flex; align-items: center; height: auto; min-height: 56px; margin: 0; font-size: 12.5px; letter-spacing: .06em; }
  .ft-tg { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
  .ft-tg i { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-3); color: var(--text); background: linear-gradient(currentColor, currentColor) center / 11px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 11px no-repeat; transition: transform .25s; }
  .ft-tg[aria-expanded="true"] i { transform: rotate(180deg); background-size: 11px 1.5px, 0 0; }
  .ft-col.shut .ft-body { display: none; }
  .ft-ex { grid-template-columns: 1fr 1fr; gap: 16px 20px; padding-bottom: 18px; }
  .ft-col a, .ft-col .ft-ex a { display: flex; align-items: center; min-height: 44px; padding: 0; }
  .ft-col > a:last-child, .ft-col .ft-body > a:last-child { margin-bottom: 10px; }
  .ft-bottom { flex-direction: column; gap: 4px; margin-top: 18px; }
  .ft-legal a { display: inline-flex; align-items: center; min-height: 44px; margin-block: 0; padding-block: 0; }
}
@media (max-width: 380px) {
  .story-live .story-meta, .story-live .story-status, .story-meta small { letter-spacing: .06em; }
}
@media (max-width: 340px) {
  .story-live .story-meta { max-width: 170px; }
}
@media (max-width: 760px) and (max-height: 740px) {
  .story-live .story-legend { display: none; } /* écran court : la phrase explique déjà les feux, la scène reste lisible */
}
@media (max-width: 760px) and (max-height: 620px) {
  .story-live .story-ch[data-i="5"] .story-p { display: none; } /* iPhone SE : le titre suffit, le bouton reste au-dessus du pli */
}
@media (max-height: 600px) and (orientation: landscape) {
  .story-live .story-nav, .story-counter, .story-live .story-cue { display: none; }
  .story-live .story-ch[data-i="5"] .story-p { display: none; }
  .story-live .story-end { margin-top: 14px; }
  .story-live .story-end .btn { width: auto; }
  .story-ch h3 { font-size: 30px; }
  .story-p { margin-top: 12px; font-size: 15px; }
  .story-live .story-copy { bottom: 22px; }
}
/* =====================================================================================================================
   TÉLÉPHONE ET TABLETTE (tout sauf l'ordinateur D = (min-width: 1100px) and (min-height: 601px))
   ===================================================================================================================== */
@media (max-width: 1099.98px), (max-height: 600px) {
  /* Casse normale (spec-mobile §1.2-6) : boutons, sur-titres, repères ; l'ordinateur garde ses majuscules */
  .btn, .kicker, .lang-switch a, .lang-mini-b, .hc-title, .skip, .story-meta, .story-status, .story-nav a, .pin, .story-cue, .facts, .ft-tag, .ft-h, .day small { text-transform: none; }
  .btn { letter-spacing: 0; font-size: 16px; }
  .kicker { letter-spacing: .04em; font-size: 13px; }
  .ft-tag, .ft-h, .hc-title { letter-spacing: .04em; font-size: 12.5px; }
  .story-meta, .story-status { letter-spacing: .03em; }
  /* Apparitions : translation seule, jamais d'écran à moitié vide (opacité toujours à 1) */
  .js .reveal { opacity: 1; transform: translateY(14px); transition: transform .5s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0ms); }
  .js .reveal.in { transform: none; }

  /* Agenda : 12 jours = 2 rangées de 6, toujours ; étapes 1-2-3 */
  .days { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .day { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 64px; padding: 6px 0; border-radius: 12px; }
  .day small, .day span { font-size: 12px; line-height: 1.2; letter-spacing: 0; }
  .day b { font-size: 20px; margin: 1px 0; line-height: 1.1; }
  .times .skeleton { height: 48px; } /* = .time (min-height 48 px) */
  .pj-steps { display: flex; justify-content: space-between; gap: 12px; list-style: none; margin: 0; padding: 0 16px; border-bottom: 1px solid var(--line); }
  .pj-steps li { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px; min-height: 42px; font-size: 13px; color: var(--text-3); box-shadow: inset 0 -2px 0 transparent; transition: color .25s, box-shadow .25s; }
  .pj-steps i { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-3); font: 500 11px/1 var(--mono); font-style: normal; }
  #booking[data-step="A"] .pj-steps [data-s="A"], #booking[data-step="B"] .pj-steps [data-s="B"], #booking[data-step="C"] .pj-steps [data-s="C"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
  #booking[data-step="A"] .pj-steps [data-s="A"] i, #booking[data-step="B"] .pj-steps [data-s="B"] i, #booking[data-step="C"] .pj-steps [data-s="C"] i { background: var(--accent-btn); border-color: var(--accent-btn); color: #fff; }
  #booking[data-step="B"] .pj-steps [data-s="A"] i, #booking[data-step="C"] .pj-steps [data-s="A"] i, #booking[data-step="C"] .pj-steps [data-s="B"] i { background: var(--text); border-color: var(--text); color: var(--ink); }

  /* Formulaire : champs en 16 px (pas de zoom sur iPhone), « Vous êtes ? » en pastilles, compteur du besoin */
  .book-pane input:not([type=checkbox]), .book-pane textarea { font-size: 16px; min-height: 48px; }
  .roles { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .roles legend { width: 100%; }
  .roles .check { position: relative; gap: 0 !important; }
  .roles .check input[type=checkbox] { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .roles .check > span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-3); border-radius: 999px; background: #0B0C0F; font-size: 15px; line-height: 1.25; transition: background .2s, color .2s, border-color .2s; }
  .roles .check input:checked + span { background: var(--text); border-color: var(--text); color: var(--ink); }
  .roles .check input:focus-visible + span { outline: 2px solid var(--accent-2); outline-offset: 2px; }
  .roles .check.other { flex-wrap: wrap; gap: 8px !important; width: 100%; }
  .roles .check.other input[type=checkbox] { width: auto; height: 44px; right: auto; aspect-ratio: auto; }
  .roles .check.other .pj-other-l { display: inline-flex; }
  .roles .check.other #role-other-on { width: 100%; max-width: 260px; }
  .roles .check.other #role-other { flex: 1 1 100%; }
  .roles .check.other #role-other-on:not(:checked) ~ #role-other { display: none; }
  .pj-count { display: block; margin-top: -2px; font-size: 13px; font-weight: 400; color: var(--text-3); }
  .pj-count.ok { color: var(--g); }
}

/* =====================================================================================================================
   TABLETTE (T) : proche de l'ordinateur (portrait 3D gardé, menu dans l'en-tête), sans bandes vides
   ===================================================================================================================== */
@media (min-width: 761px) and (max-width: 1099.98px) and (min-height: 601px) {
  /* Hauteur au moins celle d'avant, mais jamais plus petite que son contenu : sur iPad couché (1024 × 768), le 3e feu
     ne passe plus sous la section RDV (le portrait suit : hero.js lit la taille du hero) */
  .hero { height: auto; min-height: max(600px, min(calc(100svh - 96px), 920px)); }
  .hero-in { height: auto; min-height: inherit; padding-top: calc(var(--hd-h) + 12px); padding-bottom: 40px; }
  .pj-next-hero { display: flex; align-items: center; gap: 8px; min-height: 20px; margin-top: 16px; font-size: 14px; line-height: 20px; color: var(--text-2); visibility: hidden; }
  .pj-next-hero.on { visibility: visible; }
  .pj-next-hero b { color: var(--text); font-weight: 500; }
  .pj-next-hero i { width: 7px; height: 7px; border-radius: 50%; background: var(--g); animation: pj-pulse 2.2s infinite; flex: none; }
  .hero-control { margin-top: 32px; }
  /* RDV : 2 colonnes (titre et objectif à gauche, agenda à droite) ; heures en 4 colonnes, 5 dès 1000 px */
  .rdv-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); column-gap: 28px; }
  .rdv-title { font-size: clamp(38px, 5vw, 56px); }
  .rdv-checks { flex-direction: column; gap: 10px; }
  .bk-head { padding: 20px 20px 16px; }
  .bk-main { padding: 18px 18px 22px; }
  .times { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .time { min-height: 48px; padding: 0 4px; }
  /* Agents : cartes horizontales (dessin à gauche, nom et tâches à droite), 2 colonnes (3 dès 900 px) ; une carte
     seule en dernière rangée s'étale sur toute la largeur */
  .agent-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "top name" "top tasks"; column-gap: 18px; row-gap: 12px; align-items: start; padding: 22px 22px 24px; }
  .agent-card .ac-top { grid-area: top; }
  .agent-card .ac-n { display: none; }
  .agent-card .agent-art { width: 52px; height: 52px; }
  .agent-card h3 { grid-area: name; align-self: center; font-size: 24px; }
  .agent-card .pj-ac-body { display: block; grid-area: tasks; }
  .agent-card .ac-tasks { padding-top: 12px; gap: 6px; font-size: 14.5px; }
  .agent-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: stretch; width: auto; }
  .section { padding-top: 72px; padding-bottom: 80px; }
  .pj-solution { margin-top: 40px; }
  .section-head { margin-bottom: 36px; }
  .faq summary { padding: 20px 0; font-size: 19px; }
  /* Pour aller plus loin : vidéo et guides côte à côte dès la tablette */
  .pj-ex-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "video guides" "video links"; }
  .pj-ex-guides a { min-height: 80px; }
  .pj-chart { max-width: 560px; }
  /* Durable (761–899) : points en 3 colonnes sous le texte */
  .pj-solution li span { display: block; }
  /* Lisibilité ≥ 12 px à l'écran : étiquettes de la courbe (SVG réduit à ≈ 300 px à 768), langues, faits de l'appel final */
  .pj-chart-svg .lbl, .pj-chart-svg .pj-n { font-size: 14px; }
  .lang-mini-b, .hd-nav .lang-switch a { font-size: 12.5px; letter-spacing: .04em; }
  .facts { font-size: 13px; letter-spacing: .02em; }
}
/* Tablette en portrait (761–899) : « IA durable » et questions aussi sur 2 colonnes (page ≤ 8 000 px à 768 × 1 024) */
@media (min-width: 761px) and (max-width: 899.98px) and (min-height: 601px) {
  .pj-du-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
  .pj-du-text h2 { font-size: 44px; }
  .pj-chart { position: sticky; top: calc(var(--hd-h) + 24px); }
  .faq-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px; }
  .faq-grid .section-head { position: sticky; top: calc(var(--hd-h) + 32px); margin-bottom: 0; }
  .faq-grid h2 { font-size: 40px; }
}
@media (min-width: 900px) and (max-width: 1099.98px) and (min-height: 601px) {
  .agents { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agent-card { grid-template-columns: 44px minmax(0, 1fr); padding: 20px; }
  .agent-card .agent-art { width: 44px; height: 44px; }
  .agent-card h3 { font-size: 22px; }
}
@media (min-width: 1000px) and (max-width: 1099.98px) and (min-height: 601px) {
  .times { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* =====================================================================================================================
   PARCOURS EN « STORIES » (html.story-cards : téléphone et tablette ; sans JS : même rendu, le rail glisse au doigt)
   Même DOM que les autres modes ; chaque étape porte sa scène HTML/CSS et son état : plus de décalage texte / état.
   ===================================================================================================================== */
@media (max-width: 1099.98px), (max-height: 600px) {
  html:is(.story-cards, :not(.js)) .story { height: auto; padding: 44px var(--gp) 52px; background: var(--pj-sheet); }
  html:is(.story-cards, :not(.js)) .story-anchor { top: 0; }
  html:is(.story-cards, :not(.js)) .pj-st-head { position: static; width: auto; height: auto; margin: 0 auto 22px; max-width: 600px; overflow: visible; clip: auto; white-space: normal; }
  html:is(.story-cards, :not(.js)) .pj-st-head .kicker { display: inline-flex; }
  html:is(.story-cards, :not(.js)) .pj-st-hint { display: block; margin-top: 12px; font-size: 14.5px; color: var(--text-3); }
  html:is(.story-cards, :not(.js)) .story-stage { position: static; height: auto; padding: 0; max-width: 600px; margin: 0 auto; }
  html:is(.story-cards, :not(.js)) .story-box { position: relative; display: flex; flex-direction: column; height: auto; border: 1px solid var(--line-2); border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, #121318 0%, #0C0D10 100%); box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9); }
  html:is(.story-cards, :not(.js)) :is(.story-canvas, .story-imgs, .story-veil, .story-rule, .story-pins, .story-status, .story-cue, .story-pic) { display: none !important; }
  /* 5 segments de progression en haut de la carte (cibles de 44 px) */
  html:is(.story-cards, :not(.js)) .story-nav { order: 0; display: block; position: static; width: auto; padding: 0 12px; transform: none; }
  html:is(.story-cards, :not(.js)) .story-nav ol { display: flex; gap: 4px; }
  html:is(.story-cards, :not(.js)) .story-nav li { flex: 1; }
  html:is(.story-cards, :not(.js)) .story-nav a { display: block; position: relative; height: 44px; padding: 0 !important; opacity: 1; }
  html:is(.story-cards, :not(.js)) .story-nav a::before, html:is(.story-cards, :not(.js)) .story-nav a i { top: 20px; height: 3px; border-radius: 3px; }
  html:is(.story-cards, :not(.js)) .story-nav a::before { background: rgba(245, 245, 242, .14); }
  html:is(.story-cards, :not(.js)) .story-nav a i { background: var(--accent); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
  html:is(.story-cards, :not(.js)) .story-nav a.done i { transform: scaleX(1); background: rgba(245, 245, 242, .55); }
  html:is(.story-cards, :not(.js)) .story-nav a.on i { transform: scaleX(1); background: var(--accent); }
  html:is(.story-cards, :not(.js)) .story-nav a span, html:is(.story-cards, :not(.js)) .story-nav a b { display: none; }
  html:is(.story-cards, :not(.js)) .story-meta { order: 1; position: static; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 0 16px 10px; font-size: 12px; color: var(--text-3); }
  html:is(.story-cards, :not(.js)) .story-meta small { font-size: 12px; }
  /* Rail horizontal aimanté : une étape par écran, toutes à la hauteur de la plus haute */
  html:is(.story-cards, :not(.js)) .story-copy { order: 2; position: relative; display: flex; align-items: stretch; width: auto; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  html:is(.story-cards, :not(.js)) .story-copy::-webkit-scrollbar { display: none; }
  html:is(.story-cards, :not(.js)) .story-copy:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -3px; border-radius: 18px; }
  html:is(.story-cards, :not(.js)) .story-ch { position: relative; flex: 0 0 100%; display: flex; flex-direction: column; align-items: stretch; min-height: 0; border-radius: 0; overflow: visible; background: none; opacity: 1; transform: none; filter: none; scroll-snap-align: start; scroll-snap-stop: always; }
  html:is(.story-cards, :not(.js)) .story-txt { position: static; padding: 18px 16px 6px; background: none; }
  html:is(.story-cards, :not(.js)) .story .kicker { margin-bottom: 10px; }
  html:is(.story-cards, :not(.js)) .story-ch h3 { max-width: none; font: 400 clamp(26px, 7.4vw, 32px)/1.08 var(--hero); letter-spacing: -.03em; }
  html:is(.story-cards, :not(.js)) .story-p { margin-top: 10px; font-size: 15px; line-height: 1.5; }
  html:is(.story-cards, :not(.js)) .story-legend { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; font-size: 14px; }
  html:is(.story-cards, :not(.js)) .story-end { margin-top: 16px; flex-direction: column; align-items: stretch; gap: 12px; opacity: 1; transform: none; pointer-events: auto; }
  html:is(.story-cards, :not(.js)) .story-end .btn { width: 100%; min-height: 56px; }
  html:is(.story-cards, :not(.js)) .pj-scene { display: flex; }
  html:is(.story-cards, :not(.js)) .pj-st-ctrl { order: 3; display: flex; align-items: center; gap: 10px; padding: 10px 16px 18px; }
  .pj-st-b { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-3); border-radius: 50%; background: none; color: var(--text); cursor: pointer; transition: border-color .2s, opacity .2s; }
  .pj-st-b:first-child .pj-arr { transform: rotate(180deg); }
  .pj-st-b .pj-arr { color: var(--text); }
  .pj-st-b:disabled { opacity: .35; cursor: default; }
  .pj-st-ctrl .pj-more { margin: 0 0 0 auto; padding: 10px 0 6px; font-size: 15px; }

  /* Scènes (dessins HTML/CSS, aria-hidden) : grille fine, facture claire SANS montant, feux = couleur + symbole + mot */
  .pj-scene { position: relative; height: 240px; margin: 2px 12px 0; border-radius: 18px; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; background: radial-gradient(70% 80% at 50% 40%, rgba(245, 245, 242, .05), transparent 70%), linear-gradient(rgba(245, 245, 242, .03) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(245, 245, 242, .03) 1px, transparent 1px) 0 0 / 24px 24px, #0A0B0E; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; gap: 18px; padding: 34px 14px 14px; }
  /* Parcours animé (story-live, posé au chargement sur grand écran) puis iPad tourné en portrait : le dessin WebGL
     reste seul, les scènes HTML des stories ne s'empilent pas dessous */
  html.story-live .pj-scene { display: none; }
  .pj-state { position: absolute; z-index: 3; right: 10px; top: 10px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: rgba(8, 9, 11, .78); border: 1px solid var(--line-2); font: 12px/1.2 var(--mono); color: var(--text); }
  .pj-state i { width: 7px; height: 7px; border-radius: 50%; background: #8A8480; }
  .pj-state[data-s="1"] i { background: var(--sky); box-shadow: 0 0 8px var(--sky); }
  .pj-state[data-s="2"] i { background: var(--text); box-shadow: 0 0 8px rgba(245, 245, 242, .6); }
  .pj-state[data-s="3"] i { background: var(--o); box-shadow: 0 0 8px var(--o); }
  .pj-state[data-s="4"] i { background: var(--g); box-shadow: 0 0 8px var(--g); }
  .pj-inv { position: relative; flex: none; width: 128px; height: 168px; padding: 12px 11px; border-radius: 7px; background: var(--pj-paper); color: var(--pj-ink-on-paper); box-shadow: 0 22px 40px -14px rgba(0, 0, 0, .8); overflow: hidden; font-family: var(--sans); transition: transform .5s, box-shadow .5s; }
  .pj-inv-h { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
  .pj-inv-h b { font: 600 13px/1 var(--hero); letter-spacing: -.02em; }
  .pj-inv-h span { font: 9px/1 var(--mono); color: #6A6760; }
  .pj-inv-ln { display: block; margin-top: 8px; }
  .pj-inv-ln i { display: block; height: 4px; margin-top: 5px; border-radius: 2px; background: #D9D6CF; }
  .pj-inv-ln i:first-child { width: 72%; } .pj-inv-ln i:last-child { width: 48%; }
  .pj-inv-f { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
  .pj-inv-f li { display: grid; grid-template-columns: auto minmax(14px, 1fr); align-items: center; gap: 6px; padding: 4px 5px; border-radius: 4px; border: 1px solid transparent; font: 8.5px/1.1 var(--mono); color: #57544E; white-space: nowrap; }
  .pj-inv-f li span { overflow: hidden; text-overflow: ellipsis; }
  .pj-inv-f li i { height: 5px; border-radius: 3px; background: #BCB8B0; }
  .pj-inv-wm { position: absolute; right: -10px; bottom: 22px; transform: rotate(-24deg); font: 700 21px/1 var(--hero); letter-spacing: .1em; text-transform: uppercase; color: rgba(26, 27, 31, .09); pointer-events: none; }
  /* 01 Recevoir : la pile, les quatre façons d'arriver */
  .pj-pile { position: relative; flex: none; }
  .pj-pile::before, .pj-pile::after { content: ""; position: absolute; inset: 0; border-radius: 7px; background: #D8D5CE; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .7); }
  .pj-pile::before { transform: rotate(-8deg) translate(-8px, 6px); opacity: .55; }
  .pj-pile::after { transform: rotate(5deg) translate(6px, 4px); opacity: .75; }
  .pj-pile .pj-inv { z-index: 1; transform: rotate(-2deg); }
  .pj-entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
  .pj-entries li { display: flex; align-items: center; gap: 8px; padding: 6px 11px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(8, 9, 11, .6); font-size: 12px; color: var(--text-2); white-space: nowrap; } /* « E-mail » jamais coupé en « E- / mail » (320 px) */
  .pj-entries li::before { content: ""; width: 10px; height: 1.5px; background: var(--accent-2); box-shadow: -3px 0 0 -0px transparent; }
  /* 02 Lire : trois zones entourées, reliées à trois étiquettes */
  .pj-inv.read .pj-inv-f li { border-color: rgba(240, 66, 28, .75); background: rgba(240, 66, 28, .08); }
  .pj-tags { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
  .pj-tags li { position: relative; display: grid; gap: 6px; width: max-content; min-width: 132px; max-width: 100%; padding: 8px 12px; border: 1px solid rgba(240, 66, 28, .55); border-radius: 12px; background: rgba(240, 66, 28, .07); }
  .pj-tags li::before { content: ""; position: absolute; right: 100%; top: 50%; width: 18px; border-top: 1px dashed rgba(240, 66, 28, .7); }
  .pj-tags span { font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pj-tags i { height: 4px; border-radius: 2px; background: rgba(245, 245, 242, .55); width: 80%; }
  .pj-tags li:nth-child(2) i { width: 60%; } .pj-tags li:nth-child(3) i { width: 44%; }
  /* 03 Vérifier : la facture recule, trois portes */
  .pj-scene.s3 { flex-direction: column; align-items: stretch; gap: 8px; padding: 40px 14px 14px; }
  .pj-chip { position: absolute; left: 12px; top: 10px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 8px; background: rgba(245, 245, 242, .06); border: 1px solid var(--line-2); font-size: 12px; color: var(--text-2); }
  .pj-chip i { width: 10px; height: 12px; border-radius: 2px; background: var(--pj-paper); opacity: .8; }
  .pj-gates { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 8px; width: 100%; max-width: 360px; }
  .pj-gates li { display: flex; align-items: center; gap: 11px; min-height: 46px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(245, 245, 242, .03); font-size: 14px; line-height: 1.3; color: var(--text); }
  .pj-gates li.o { border-color: rgba(242, 162, 58, .6); background: rgba(242, 162, 58, .08); }
  .pj-gates li.r { border-color: rgba(239, 75, 55, .6); background: rgba(239, 75, 55, .08); }
  /* 04 Trier : un vrai feu tricolore, la lampe de la facture allumée */
  .pj-scene.s4 { gap: 14px; }
  .pj-scene.s4 .pj-chip { position: static; flex: none; }
  .pj-light { flex: none; display: grid; gap: 10px; padding: 12px 10px; border-radius: 30px; background: linear-gradient(180deg, #1A1B20, #111216); border: 1px solid var(--line-2); box-shadow: inset 0 2px 10px rgba(0, 0, 0, .6); }
  .pj-bulb { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(245, 245, 242, .03); }
  .pj-bulb .lamp { width: 30px; height: 30px; opacity: .3; box-shadow: none; }
  .pj-bulb .lamp svg { width: 15px; height: 15px; }
  .pj-bulb.on .lamp { opacity: 1; box-shadow: 0 0 22px 2px currentColor; background: color-mix(in srgb, currentColor 22%, transparent); }
  .pj-light-k { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .pj-light-k li { display: flex; flex-direction: column; justify-content: center; height: 42px; opacity: .55; }
  .pj-light-k li.on { opacity: 1; }
  .pj-light-k b { font-size: 13px; font-weight: 600; }
  .pj-light-k li.g b { color: var(--g); } .pj-light-k li.o b { color: var(--o); } .pj-light-k li.r b { color: var(--r); }
  .pj-light-k small { font-size: 12px; color: var(--text-2); }
  /* 05 Valider : la facture passe au vert, tampon, une règle de plus */
  .pj-inv.ok { box-shadow: 0 0 0 2px var(--g), 0 22px 50px -16px rgba(47, 191, 110, .45); }
  .pj-stamp { position: absolute; z-index: 2; left: calc(50% - 112px); top: 92px; padding: 4px 10px; border: 2px solid var(--g); border-radius: 6px; transform: rotate(-12deg); background: rgba(242, 241, 236, .9); font-size: 13px; font-weight: 500; color: #1F8A4E; }
  .pj-ok .lamp { width: 52px; height: 52px; box-shadow: 0 0 30px 4px rgba(47, 191, 110, .5); }
  .pj-ok .lamp svg { width: 26px; height: 26px; stroke-width: 1.9; }
  .pj-learned { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-size: 12px; color: var(--g); }
  .pj-scene.s5 { padding-bottom: 30px; }
}
/* Téléphone en portrait : la carte garde la hauteur de l'étape la plus longue (05) ; dans les étapes plus courtes, la
   scène grandit au lieu de laisser un vide entre le texte et les flèches (le dessin reste centré dans la scène) */
@media (max-width: 760px) and (min-height: 601px) {
  html:is(.story-cards, :not(.js)) .pj-scene { flex: 1 0 auto; height: auto; min-height: 240px; }
  /* 02 Lire : « Fournisseur · BRN » (Maurice) tient dans son étiquette dès 320 px */
  .pj-scene.s2 { gap: 10px; }
  .pj-tags li { width: 140px; padding: 8px; }
  .pj-tags span { font-size: 11.5px; }
}
/* Tablette : chaque étape en 2 colonnes (scène à gauche, texte à droite), ≈ 560 px */
@media (min-width: 761px) and (max-width: 1099.98px) and (min-height: 601px) {
  html:is(.story-cards, :not(.js)) .story { padding: 96px var(--pad-x) 104px; }
  html:is(.story-cards, :not(.js)) .pj-st-head, html:is(.story-cards, :not(.js)) .story-stage { max-width: 980px; }
  html:is(.story-cards, :not(.js)) .pj-st-head h2 { font-size: clamp(42px, 5.6vw, 60px); }
  html:is(.story-cards, :not(.js)) .story-ch { flex-direction: row; align-items: center; gap: 8px; }
  html:is(.story-cards, :not(.js)) .pj-scene { flex: 0 0 50%; height: 320px; margin: 4px 0 4px 14px; }
  html:is(.story-cards, :not(.js)) .story-txt { flex: 1; padding: 12px 22px; }
  html:is(.story-cards, :not(.js)) .story-ch h3 { font-size: clamp(30px, 3.6vw, 36px); }
  html:is(.story-cards, :not(.js)) .story-p { font-size: 16px; }
  html:is(.story-cards, :not(.js)) .story-end { flex-direction: row; flex-wrap: wrap; align-items: center; }
  html:is(.story-cards, :not(.js)) .story-end .btn { width: auto; }
  .pj-inv { transform: scale(1.12); }
  .pj-pile .pj-inv { transform: rotate(-2deg) scale(1.12); }
}

/* =====================================================================================================================
   BARRE « RÉSERVER » (téléphone, toutes les pages ; public/ui.js)
   ===================================================================================================================== */
@media (max-width: 760px), (max-height: 600px) {
  .pj-bar { display: block; position: fixed; z-index: 55; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); visibility: hidden; transform: translateY(calc(100% + 28px + env(safe-area-inset-bottom))); transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s .3s; }
  .pj-bar.on { visibility: visible; transform: none; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
  .pj-bar-in { display: flex; align-items: center; gap: 8px; max-width: 600px; height: 60px; margin: 0 auto; padding: 0 6px 0 18px; border: 1px solid var(--line-2); border-radius: 999px; background: #15161B; box-shadow: 0 20px 44px -14px rgba(0, 0, 0, .95), 0 0 0 1px rgba(0, 0, 0, .5); }
  .pj-bar-slot, .pj-bar-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; color: var(--text); text-align: left; font: inherit; overflow: hidden; }
  .pj-bar-n, .pj-bar-m { max-width: 100%; min-width: 0; }
  .pj-bar-m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pj-bar-d2 { display: none; }
  .pj-bar-slot { cursor: pointer; }
  .pj-bar-slot[hidden], .pj-bar-info[hidden] { display: none; }
  .pj-bar-t { max-width: 100%; font: 600 14px/1.25 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pj-bar-n { display: flex; align-items: center; gap: 7px; margin-top: 2px; font: 12.5px/1.25 var(--mono); color: var(--text-2); white-space: nowrap; }
  .pj-bar-n b { font-weight: 400; color: var(--text); }
  .pj-bar-m { font-size: 12.5px; line-height: 1.25; color: var(--text-3); }
  .pj-bar-cta { flex: none; gap: 10px; min-height: 48px; padding: 0 18px; font-size: 16px; box-shadow: none; }
  .pj-bar-cta .pj-arr { color: #fff; }
  /* « Pran rendez-vous » est plus long : la ligne du créneau suffit, sans flèche dans le bouton */
  body[data-ui="mfe"] .pj-bar-slot .pj-bar-t, body[data-ui="mfe"] .pj-bar-cta .pj-arr { display: none; }
  body[data-ui="mfe"] .pj-bar-cta { padding: 0 16px; }
  .pj-bar-n b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 379.98px) {
  .pj-bar-slot .pj-bar-t { display: none; }
  .pj-bar-in { padding-left: 14px; }
  .pj-bar-cta { padding: 0 14px; }
  .pj-bar-cta .pj-arr { display: none; }
  /* « Pran rendez-vous » : le créneau garde toute sa date et son heure ; « Appel découverte » seul en titre */
  body[data-ui="mfe"] .pj-bar-cta { padding: 0 12px; font-size: 15px; }
  body[data-ui="mfe"] .pj-bar-n { gap: 0; }
  body[data-ui="mfe"] .pj-bar-n i { display: none; }
  body[data-ui="mfe"] .pj-bar-d { display: none; }
  body[data-ui="mfe"] .pj-bar-d2 { display: inline; }
}
/* 320 px, « Pran rendez-vous » : sans le jour de la semaine (« 5 oct. · 09:30 »), l'heure n'est plus coupée par « … » ;
   le nom du bouton garde la date complète (ui.js) */
@media (max-width: 359.98px) {
  body[data-ui="mfe"] .pj-bar-n .pj-wd { display: none; }
}
@media (max-height: 600px) and (orientation: landscape) {
  .pj-bar { left: auto; width: 380px; }
}

/* Téléphone couché : stories en 2 colonnes (scène à gauche, texte à droite), courbe moins haute */
@media (max-height: 600px) and (orientation: landscape) {
  html:is(.story-cards, :not(.js)) .story-ch { flex-direction: row; align-items: center; }
  html:is(.story-cards, :not(.js)) .pj-scene { flex: 0 0 48%; height: 230px; margin: 4px 0 4px 12px; }
  html:is(.story-cards, :not(.js)) .story-txt { flex: 1; padding: 8px 16px; }
  html:is(.story-cards, :not(.js)) .story-ch h3 { font-size: 24px; }
  .pj-chart { max-width: 440px; }
}

/* Agenda sur les écrans les plus étroits : 6 colonnes de jours d'au moins 44 px jusqu'à 320 px de large */
@media (max-width: 400px) {
  .days { gap: 4px; }
  .bk-main { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 359.98px) {
  .rdv-page { padding-left: 10px; padding-right: 10px; }
  .bk-main { padding: 14px 6px 16px; }
  .days { gap: 3px; }
  .pj-steps { gap: 8px; padding: 0 12px; }
  .pj-steps li { gap: 5px; font-size: 12px; }
}

/* ---------- Mouvements (figés en mouvement réduit, plus bas) ---------- */
@keyframes pj-lamp { 0% { opacity: .12; box-shadow: none; } 55% { opacity: 1; box-shadow: 0 0 12px 1px currentColor; } 100% { opacity: 1; box-shadow: 0 0 0 0 transparent; } }
@keyframes pj-drift { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(-10px, 10px) rotate(-4deg); } }
@keyframes pj-pulse { 0% { box-shadow: 0 0 0 0 rgba(47, 191, 110, .55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(47, 191, 110, 0); } }
@keyframes pj-spin { to { transform: rotate(360deg); } }
@keyframes pj-sweep { from { background-position: 100% 50%; } to { background-position: -100% 50%; } }

@media print {
  .site-header, .skip-link, .pj-bar, .pj-st-ctrl, .pj-trail { display: none !important; }
  html:is(.story-cards, :not(.js)) .story-copy { display: block !important; overflow: visible !important; }
  .hero { position: relative; height: auto; }
  .story, .story-live .story { height: auto; }
  .story-live .story-stage { position: static; height: auto; }
  .story-canvas, .story-imgs, .story-nav, .story-pins, .story-cue, .story-rule, .story-veil, .skip { display: none !important; }
  .story-live .story-copy { position: static; width: auto; }
  .story-live .story-meta { position: static; padding: 0 0 16px; }
  .story-live .story-status { display: none !important; }
  .story-live .story-ch, .story-live .story-end { position: static; opacity: 1; transform: none; filter: none; margin-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
  .js .pj-chart:not(.drawn) .lb { stroke-dashoffset: 0; }
  .js .pj-chart:not(.drawn) .mstone, .js .pj-chart:not(.drawn) .ex { opacity: 1; }
}