/* Tookui — site vitrine. Couleurs et relief du thème « Tookui » de l'app (contours de 2 px, ombre décalée
   vers le bas, arrondis), cf. app/docs/identite.md ; un peu de matière en plus (grain, carnet, tampons). */

/* Polices hébergées sur le site (sous-ensemble latin de Google Fonts, licence SIL OFL) : rien n'est chargé chez Google */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../assets/polices/figtree.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: italic; font-weight: 500; font-display: swap; src: url('../assets/polices/figtree-italique.woff2') format('woff2'); }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 500 900; font-display: swap; src: url('../assets/polices/rubik.woff2') format('woff2'); }
@font-face { font-family: 'Rubik'; font-style: italic; font-weight: 800; font-display: swap; src: url('../assets/polices/rubik-italique.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/polices/fredoka.woff2') format('woff2'); }

:root {
  --encre: #1B2B4D;
  --encre-2: #475569;
  --attenue: #64748B;
  --fond: #F4F7FB;
  --blanc: #FFFFFF;
  --ligne: #DCE3EE;
  --ligne-douce: #EDF1F7;
  --marine: #2C4B84;
  --marine-nuit: #1F3866;
  --jaune: #FFC845;
  --jaune-doux: #FFF1C9;
  --vert: #22A06B;
  --vert-texte: #17784F;
  --vert-fond: #DDF3E9;
  --rouge: #B42F34;
  --soir: #4C7BD9;
  --bleu-clair: #CFE0FF;

  --relief: 0 4px 0 var(--encre);
  --relief-fort: 0 7px 0 var(--encre);
  --arrondi: 22px;
  --titres: 'Rubik', system-ui, sans-serif;
  --texte: 'Figtree', system-ui, sans-serif;
  --gouttiere: clamp(16px, 4vw, 40px);
  --courbe: clamp(28px, 4vw, 64px);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .17 0 0 0 0 .3 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; overflow-x: clip; }
body {
  margin: 0; background: var(--fond); color: var(--encre);
  font: 400 17px/1.55 var(--texte); -webkit-font-smoothing: antialiased;
}
/* Le grain, sur toute la page, pour casser l'effet « trop propre » */
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 90;
  background-image: var(--grain); opacity: .07; mix-blend-mode: multiply;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titres); font-weight: 800; letter-spacing: -0.025em; line-height: 1; margin: 0; }
p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--jaune); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 var(--gouttiere); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--blanc); padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border: 2px solid var(--encre); border-radius: 14px;
  font: 700 17px/1 var(--texte); text-decoration: none; white-space: nowrap;
  box-shadow: var(--relief); transition: transform .12s, box-shadow .12s, background .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--encre); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--encre); }
.btn--primaire { background: var(--marine); color: var(--blanc); }
.btn--jaune { background: var(--jaune); color: var(--encre); }
.btn--grand { padding: 18px 28px; font-size: 18px; border-radius: 16px; }
.btn--petit { padding: 10px 16px; font-size: 15px; border-radius: 12px; }
.btn--plein { width: 100%; }
.lien-discret { font-weight: 600; text-decoration: none; padding: 8px 4px; }
.lien-discret:hover { color: var(--marine); text-decoration: underline; text-underline-offset: 4px; }
.lien-fleche { font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--jaune); padding-bottom: 2px; }
.lien-fleche span { display: inline-block; transition: transform .2s; }
.lien-fleche:hover span { transform: translateY(3px); }

/* ---------- Barre du haut ---------- */
.topbar { position: sticky; top: 0; z-index: 50; background: rgba(244, 247, 251, .9); backdrop-filter: blur(10px); border-bottom: 2px solid transparent; transition: border-color .2s; }
.topbar.est-defile { border-bottom-color: var(--encre); }
.topbar__in { display: flex; align-items: center; gap: 28px; height: 72px; }
/* Le nom « tookui » est plus bas que le milieu du fichier (la mascotte dépasse en haut) : on remonte le logo
   pour aligner le nom sur la ligne du menu */
.topbar__logo img { height: 40px; width: auto; transform: translateY(-11%); }
.nom { font-family: 'Fredoka', var(--texte); font-weight: 600; letter-spacing: -.005em; }
.topbar__nav { display: flex; gap: 24px; margin-right: auto; }
.topbar__nav a { text-decoration: none; font-weight: 600; font-size: 15px; color: var(--encre-2); position: relative; }
.topbar__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; border-radius: 2px; background: var(--jaune); transform: scaleX(0); transition: transform .2s; }
.topbar__nav a:hover { color: var(--encre); }
.topbar__nav a:hover::after { transform: scaleX(1); }
.topbar__actions { display: flex; align-items: center; gap: 14px; }
.topbar__menu, .menu-mobile { display: none; }

/* ---------- Titres ---------- */
.section { padding: clamp(80px, 11vw, 140px) 0; position: relative; }
.titre-section { font-size: clamp(38px, 5.6vw, 72px); max-width: 14ch; }
.intro-section { margin-top: 22px; color: var(--encre-2); font-size: 19px; max-width: 48ch; }
.intro-section a { font-weight: 700; }

/* ============ ACCUEIL ============ */
/* L'accueil tient dans le premier écran : tailles et marges suivent aussi la hauteur de la fenêtre */
.hero { padding: clamp(18px, 4vh, 56px) 0 clamp(44px, 7vh, 90px); }
.hero__in { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(28px, 4vw, 56px); align-items: center; min-height: calc(100svh - 72px - clamp(62px, 11vh, 146px)); }
.hero h1 { font-size: clamp(42px, min(6.1vw, 10.5vh), 86px); font-weight: 900; letter-spacing: -0.04em; line-height: .95; }
.cuit { color: var(--marine); white-space: nowrap; }
.hero__chapo { margin-top: clamp(14px, 3.4vh, 30px); font-size: clamp(17px, 2.3vh, 20px); color: var(--encre-2); max-width: 42ch; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 28px; margin-top: clamp(18px, 3.8vh, 34px); }
.hero__note { margin-top: clamp(12px, 2.8vh, 26px); font-size: 15px; color: var(--attenue); }

/* La scène : vraie capture + carte de génération + tampon + mascotte */
.scene { position: relative; padding: 10px 0 34px 30px; }
.fenetre { background: var(--blanc); border: 2px solid var(--encre); border-radius: 18px; box-shadow: var(--relief-fort); overflow: hidden; }
.fenetre__barre { display: flex; align-items: center; gap: 6px; padding: 9px 14px; border-bottom: 2px solid var(--encre); background: var(--blanc); }
.fenetre__barre i { flex: none; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--encre); }
.fenetre__barre i:nth-child(1) { background: #F5A3A6; } .fenetre__barre i:nth-child(2) { background: var(--jaune); } .fenetre__barre i:nth-child(3) { background: #9EDCC0; }
/* L'adresse reste au centre de la barre malgré les trois ronds à gauche */
.fenetre__barre span { margin: 0 auto; translate: -22px 0; font-size: 12px; font-weight: 600; color: var(--attenue); background: var(--fond); padding: 3px 18px; border-radius: 8px; }
.fenetre__image { position: relative; overflow: hidden; height: 460px; background: #F4F7FB; }
.fenetre--hero { transform: rotate(1.6deg); transform-origin: 30% 80%; }

/* ---------- L'écran Planning de l'app, recréé ----------
   Valeurs reprises de l'app (WeekGrid.tsx, planningUi.ts, thème Tookui) : grille 170 px + 7 jours + 104 px,
   services de 58 px, pastilles arrondies à 10 px, contours de 2 px. Dessiné à sa vraie taille (1088 px)
   puis réduit par site.js pour tenir dans le cadre. */
.ap {
  --ap-encre: #1B2B4D; --ap-attenue: #64748B; --ap-ligne: #DCE3EE;
  position: absolute; top: 0; left: 0; width: 1088px; padding: 22px 24px 30px; background: #F4F7FB;
  color: var(--ap-encre); font: 400 14px/1.3 var(--texte); transform-origin: 0 0; transform: scale(var(--k, .6));
}
.ap-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.ap-sem { font-size: 14px; color: var(--ap-attenue); margin: 0 0 4px 56px; }
.ap-titre { display: flex; align-items: center; gap: 14px; }
.ap-titre b { font: 800 31px/1 var(--titres); letter-spacing: -.01em; white-space: nowrap; }
.ap-fleche { width: 42px; height: 42px; border: 2px solid var(--ap-encre); border-radius: 12px; box-shadow: 0 3px 0 var(--ap-encre); background: #fff; display: grid; place-items: center; font: 700 20px/1 var(--texte); }
.ap-droite { display: flex; align-items: center; gap: 12px; }
.ap-seg { display: flex; padding: 4px; border: 2px solid var(--ap-encre); border-radius: 30px; background: #fff; }
.ap-seg span { padding: 8px 13px; border-radius: 22px; font-weight: 700; font-size: 14px; }
.ap-seg .on { background: #FFC845; }
.ap-btn { border: 2px solid var(--ap-encre); border-radius: 14px; padding: 12px 18px; font-weight: 800; font-size: 15px; box-shadow: 0 4px 0 var(--ap-encre); background: #fff; white-space: nowrap; }
.ap-btn--gen { background: #2C4B84; color: #fff; }
.ap.en-cours .ap-btn--gen { background: #6B80A8; }
.ap-ligne2 { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
.ap-filtre { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ap-attenue); }
.ap-filtre .ap-seg span { display: inline-flex; align-items: center; gap: 7px; color: var(--ap-encre); }
.ap-filtre i { width: 10px; height: 10px; border-radius: 3px; border: 1.5px solid var(--ap-encre); background: var(--c); }
.ap-ligne3 { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; min-height: 38px; }
.ap-badges { display: flex; gap: 10px; }
.ap-badge { display: inline-flex; align-items: center; gap: 7px; border: 2px solid var(--ap-encre); border-radius: 30px; padding: 7px 13px; font-size: 13px; font-weight: 600; background: #fff; opacity: 0; transform: scale(.6); }
.ap-badge--vert { background: #DDF3E9; }
.ap-badge i { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--ap-encre); display: grid; place-items: center; font: 800 12px/1 var(--texte); font-style: normal; }
.ap-badge .ok { background: #22A06B; color: #fff; }
.ap-badge .attention { background: #FFC845; }
.ap.fini .ap-badge { animation: ap-pop .4s cubic-bezier(.3, 1.5, .5, 1) both; }
.ap.fini .ap-badge:nth-child(2) { animation-delay: .12s; } .ap.fini .ap-badge:nth-child(3) { animation-delay: .24s; } .ap.fini .ap-badge:nth-child(4) { animation-delay: .36s; }
.ap-legende { display: flex; gap: 16px; font-size: 13px; color: var(--ap-encre); }
.ap-legende span { display: inline-flex; align-items: center; gap: 6px; }
.ap-legende i { width: 11px; height: 11px; border-radius: 3px; border: 1.5px solid var(--ap-encre); background: var(--c); }

.ap-grille { display: grid; grid-template-columns: 170px repeat(7, minmax(0, 1fr)) 104px; margin-top: 14px; background: #fff; border: 2px solid var(--ap-encre); border-radius: 22px; box-shadow: 0 4px 0 var(--ap-encre); overflow: hidden; }
.ap-th { font-size: 13px; font-weight: 700; padding: 12px 8px; border-bottom: 2px solid var(--ap-encre); }
.ap-th:first-child { padding-left: 16px; }
.ap-th:last-child { text-align: right; padding-right: 18px; }
.ap-eq { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 12px 16px 6px; border-bottom: 2px solid var(--ap-ligne); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ap-attenue); }
.ap-eq i { width: 10px; height: 10px; border-radius: 3px; border: 1.5px solid var(--ap-encre); background: var(--c); }
.ap-qui, .ap-c, .ap-h { min-height: 58px; border-bottom: 2px solid var(--ap-ligne); }
.ap-qui { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 16px; }
.ap-av { flex: none; width: 32px; height: 32px; border-radius: 11px; border: 2px solid var(--ap-encre); background: var(--c); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 12px; }
.ap-qui strong { display: block; font-size: 14px; }
.ap-qui small { display: block; font-size: 12px; color: var(--ap-attenue); }
.ap-c { padding: 6px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.ap-c.ferme { background: repeating-linear-gradient(135deg, #F4F7FB 0 7px, #F6EBDB 7px 14px); }
.ap-chip { display: flex; align-items: center; border: 2px solid var(--ap-encre); border-radius: 10px; padding: 6px 9px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.ap-chip.m { background: #FFE7A3; }
.ap-chip.s { background: #4C7BD9; color: #fff; }
.ap-chip.pose { animation: ap-pop .5s cubic-bezier(.3, 1.5, .5, 1) both; }
.ap-repos { padding: 6px 9px; font-size: 12px; font-weight: 600; color: #A8B3C4; }
.ap-repos.pose { animation: ap-fondu .5s both; }
.ap-vide { text-align: center; font-size: 12px; font-weight: 600; color: #CBD5E1; }
.ap-h { display: flex; align-items: center; justify-content: flex-end; padding-right: 14px; }
.ap-h span { width: 76px; text-align: center; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; border: 2px solid var(--ap-encre); border-radius: 10px; padding: 4px 6px; background: #F4F7FB; transition: color .3s; }
.ap-h span.au-dessus { color: #8A5A00; }
@keyframes ap-pop { 0% { transform: scale(.3); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes ap-fondu { from { opacity: 0; } }

.carte-gen {
  position: absolute; left: -66px; bottom: -6px; width: 250px; background: var(--blanc);
  border: 2px solid var(--encre); border-radius: 18px; box-shadow: var(--relief-fort); overflow: hidden;
  transform: rotate(-2.5deg); z-index: 3; transition: transform .3s;
}
.carte-gen__tete { display: flex; align-items: center; gap: 9px; padding: 9px 12px; background: var(--jaune); border-bottom: 2px solid var(--encre); font: 800 15px/1 var(--titres); }
.carte-gen__tete img { width: 26px; height: 26px; }
.carte-gen__tete img { border-radius: 8px; }
.carte-gen__corps { padding: 9px 12px 2px; font-size: 12px; }
.carte-gen__etape-titre { color: var(--attenue); font-weight: 600; }
.carte-gen__etape { font-weight: 600; margin: 1px 0 7px; min-height: 2.6em; }
.carte-gen__ligne { display: flex; justify-content: space-between; color: var(--attenue); font-weight: 600; }
.carte-gen__ligne b { color: var(--encre); }
.carte-gen__barre { height: 11px; margin: 5px 0 8px; border: 2px solid var(--encre); border-radius: 8px; overflow: hidden; background: var(--fond); }
.carte-gen__barre i { display: block; height: 100%; width: 0; background: var(--marine); }
.carte-gen__duree { display: flex; justify-content: space-between; padding: 6px 10px; background: var(--fond); border-radius: 10px; color: var(--attenue); font-weight: 600; }
.carte-gen__duree b { color: var(--encre); }
.carte-gen .btn { margin: 9px 12px 12px; width: calc(100% - 24px); padding: 11px 16px; font-size: 15px; }
.carte-gen.en-cours .btn { opacity: .55; pointer-events: none; }

/* Le tampon « tout cuit » */
.tampon {
  position: absolute; right: -34px; top: -26px; z-index: 4; width: 124px; height: 124px; border-radius: 50%;
  display: grid; place-content: center; text-align: center; color: var(--marine);
  border: 5px double var(--marine); font: 900 25px/0.92 var(--titres); text-transform: uppercase; letter-spacing: .02em;
  background: rgba(255, 255, 255, .86); transform: rotate(-14deg) scale(2.2); opacity: 0; pointer-events: none;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .5);
}
.tampon::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; border: 2px solid currentColor; }
.scene.fini .tampon { animation: tamponne .35s cubic-bezier(.2, 1.6, .5, 1) forwards; }
@keyframes tamponne { to { transform: rotate(-14deg) scale(1); opacity: 1; } }

/* ---------- Mascotte ----------
   Emplacement unique : les futures animations (content, concentré, inquiet, endormi) remplaceront
   l'image ; `data-humeur` dit laquelle jouer. En attendant, un léger mouvement. */
.mascotte { position: absolute; pointer-events: none; }
.mascotte img { width: 100%; }
.mascotte--hero { width: clamp(84px, 13vh, 116px); right: -16px; bottom: 0; z-index: 5; }
.vapeur { position: absolute; left: 30%; top: -34%; width: 40%; overflow: visible; opacity: 0; transition: opacity .4s; }
.vapeur path { fill: none; stroke: var(--marine); stroke-width: 3; stroke-linecap: round; opacity: .55; animation: vapeur 1.6s ease-in-out infinite; }
.vapeur path:nth-child(2) { animation-delay: .4s; } .vapeur path:nth-child(3) { animation-delay: .8s; }
@keyframes vapeur { 0% { transform: translateY(8px); opacity: 0; } 40% { opacity: .7; } 100% { transform: translateY(-10px); opacity: 0; } }
.mascotte[data-humeur="concentre"] .vapeur { opacity: 1; }
.mascotte[data-humeur="attend"] img { animation: respire 3.6s ease-in-out infinite; transform-origin: 50% 100%; }
.mascotte[data-humeur="concentre"] img { animation: concentre .45s ease-in-out infinite; transform-origin: 50% 100%; }
.mascotte[data-humeur="content"] img { animation: saute .7s cubic-bezier(.3, 1.6, .5, 1) 1, respire 3.6s ease-in-out .7s infinite; transform-origin: 50% 100%; }
@keyframes respire { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.972) translateY(1px); } }
@keyframes concentre { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes saute { 0% { transform: translateY(0); } 40% { transform: translateY(-22px) rotate(-4deg); } 100% { transform: translateY(0); } }

/* ============ BANDEAU QUI DÉFILE ============ */
.defile-cadre { overflow: hidden; padding: 30px 0; margin: -40px 0 -30px; position: relative; z-index: 6; }
.defile { background: var(--encre); color: var(--fond); border-block: 2px solid var(--encre); overflow: hidden; transform: rotate(-1.4deg); margin: -10px -20px 0; position: relative; z-index: 6; }
.defile__piste { display: flex; align-items: center; gap: 28px; width: max-content; padding: 20px 0; animation: defile 38s linear infinite; }
.defile span { font: 800 clamp(22px, 2.8vw, 36px)/1 var(--titres); letter-spacing: -0.02em; white-space: nowrap; }
.defile span:nth-of-type(3n+2) { color: var(--jaune); font-style: italic; }
.defile i { font: 400 clamp(22px, 2.8vw, 36px)/1 var(--titres); font-style: normal; color: rgba(255, 255, 255, .35); }
@keyframes defile { to { transform: translateX(-50%); } }

/* ============ CORVÉES ============ */
/* Fixe pendant le défilement : la hauteur de la section donne la durée de l'arrêt */
.corvees { position: relative; height: 240vh; }
.corvees__fixe { position: sticky; top: 72px; height: calc(100svh - 72px); display: flex; align-items: center; overflow: hidden; }
.corvees__fixe > .wrap { width: 100%; }
.corvees__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.carnet {
  position: relative; background: #FFFDF6; border: 2px solid var(--encre); border-radius: 10px 10px 18px 18px;
  box-shadow: var(--relief-fort); padding: 46px 34px 30px 64px; transform: rotate(1.8deg);
  background-image: linear-gradient(90deg, transparent 46px, rgba(180, 47, 52, .35) 46px 48px, transparent 48px);
}
.carnet__spirale { position: absolute; top: -14px; left: 26px; right: 26px; height: 26px; background: radial-gradient(circle at 50% 50%, var(--fond) 5px, var(--encre) 5.5px 7.5px, transparent 8px) 0 0/30px 26px repeat-x; }
.carnet__titre { font: 700 20px/1.2 var(--titres); color: var(--encre); margin-bottom: 8px; }
.carnet__liste { list-style: none; margin: 0; padding: 0; }
/* Chaque ligne du carnet porte sa propre réglure ; le trait qui raye suit le texte, même sur deux lignes */
.carnet__liste li { min-height: 46px; padding: 10px 0; display: flex; align-items: center; border-bottom: 2px solid rgba(76, 123, 217, .22); font: 600 clamp(16px, 1.6vw, 20px)/1.35 var(--texte); }
.carnet__liste li span {
  background: linear-gradient(var(--marine), var(--marine)) 0 56% / 0% 3px no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .5s cubic-bezier(.6, 0, .3, 1), color .3s .3s;
}
.carnet__liste li.raye span { background-size: 100% 3px; color: var(--attenue); }

.chrono { display: flex; align-items: center; gap: 18px; margin-top: clamp(22px, 4vh, 40px); padding: 14px 20px 14px 14px; max-width: 520px; background: var(--jaune); border: 2px solid var(--encre); border-radius: 20px; box-shadow: var(--relief); }
.chrono__cadran { flex: none; background: var(--encre); color: var(--jaune); border-radius: 13px; padding: 10px 14px; font: 800 clamp(30px, 3.2vw, 42px)/1 var(--titres); letter-spacing: -.02em; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 3px var(--encre), inset 0 0 0 5px var(--jaune); }
.chrono__texte { font-size: 15px; color: var(--encre-2); }
.chrono__texte strong { display: block; font: 700 17px/1.2 var(--titres); color: var(--encre); margin-bottom: 3px; }

/* ============ SOUS LA TOQUE ============ */
.toque { background: var(--marine); color: var(--blanc); border: 2px solid var(--encre); border-radius: var(--courbe); margin-inline: clamp(6px, 1.4vw, 22px); }
.toque__titre { list-style: none; }
.toque__titre + .chapitre { min-height: 62vh; justify-content: flex-start; padding-top: 40px; }
.toque { padding-top: clamp(56px, 7vw, 96px); }
.toque .titre-section { font-size: clamp(34px, 3.7vw, 54px); max-width: 14ch; }
.toque__in { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(30px, 5vw, 70px); margin-top: 24px; position: relative; }
.toque__chapitres { list-style: none; margin: 0; padding: 0; }
/* Un chapitre par hauteur d'écran : quand il passe au milieu, l'écran de droite change */
.chapitre { min-height: calc(100svh - 72px); display: flex; flex-direction: column; justify-content: center; opacity: .35; transition: opacity .4s; }
.chapitre.est-active { opacity: 1; }
.chapitre h3 { font-size: clamp(30px, 3.4vw, 46px); margin-bottom: 16px; }
.chapitre p { font-size: 18px; color: rgba(255, 255, 255, .82); max-width: 38ch; }
.toque__ecran { position: relative; }
/* L'écran se fige entier sous la barre du haut : sa largeur est limitée pour que sa hauteur tienne dans la fenêtre */
.fenetre--toque {
  position: sticky; top: 104px; margin-left: auto; color: var(--encre); box-shadow: 0 9px 0 var(--encre);
  width: min(100%, calc((100svh - 72px - 100px - 40px) * 1.6));
}
.toque__vues { position: relative; aspect-ratio: 16 / 10; background: var(--fond); container-type: inline-size; }
.vue { position: absolute; inset: 0; margin: 0; opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .45s, transform .45s; pointer-events: none; }
.vue.est-active { opacity: 1; transform: none; pointer-events: auto; }
.vue img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
/* Le calque zoomé au survol d'un repère (site.js › zoom) */
.vue__zoom { position: absolute; inset: 0; }

/* Repères : un cadre jaune qui pulse autour de ce qu'on montre, le numéro posé sur son coin */
.repere { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border: 3px solid var(--jaune); border-radius: 10px; cursor: zoom-in; }
.cible { cursor: zoom-in; }
.cible { position: relative; outline: 3px solid var(--jaune); outline-offset: 5px; border-radius: 12px; }
.repere, .cible { animation: cadre 2.2s ease-out infinite; }
@keyframes cadre { 0% { box-shadow: 0 0 0 0 rgba(255, 200, 69, .65); } 70%, 100% { box-shadow: 0 0 0 14px rgba(255, 200, 69, 0); } }
.repere b, .cible::before {
  position: absolute; top: -16px; left: -16px; z-index: 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--jaune); border: 2px solid var(--encre); box-shadow: 0 2px 0 var(--encre); font: 800 14px/1 var(--titres); color: var(--encre);
}
.cible::before { content: attr(data-n); top: -21px; left: -21px; }
/* L'encart qui ressort : il grandit, passe devant et porte une ombre */
.repere, .cible { transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), box-shadow .3s; }
.repere__loupe { position: absolute; inset: 0; border-radius: 7px; background-repeat: no-repeat; opacity: 0; transition: opacity .2s; }
.repere.allume { z-index: 5; animation: none; transform: scale(var(--s, 1.3)); box-shadow: 0 16px 34px rgba(12, 23, 48, .45); background: #fff; }
.repere.allume .repere__loupe { opacity: 1; }
.repere.allume b { transform: scale(calc(1 / var(--s, 1.3))); transform-origin: 0 0; }
.cible.allume { z-index: 5; animation: none; transform: scale(1.06); box-shadow: 0 16px 34px rgba(12, 23, 48, .35); }
.cible.allume:not(.bl-verdict) { background: #fff; }
.auto.cible.allume { transform: scale(1.1); transform-origin: 100% 100%; }
.repere.allume b, .cible.allume::before { background: var(--blanc); }
.legende { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 8px; }
.legende li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; color: rgba(255, 255, 255, .9); cursor: default; }
.legende b { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--jaune); color: var(--encre); border: 2px solid var(--encre); font: 800 12px/1 var(--titres); }

/* Le bilan de la semaine, recréé (fenêtre de l'app), réduit par site.js pour tenir entier */
/* Derrière le bilan : l'accueil de l'app, flouté et assombri, comme quand la fenêtre est ouverte */
.vue--bilan { overflow: hidden; }
.bl-fond { position: absolute; inset: -14px; background: url("../assets/captures/accueil.jpg") top left / cover; filter: blur(4px); }
.bl-fond::after { content: ''; position: absolute; inset: 0; background: rgba(27, 43, 77, .38); }
.bl { position: absolute; left: 50%; top: 50%; width: 600px; background: #fff; border: 2px solid var(--encre); border-radius: 22px; box-shadow: 0 6px 0 var(--encre); padding: 20px 24px 24px; color: var(--encre); transform: translate(-50%, -50%) scale(var(--kb, .8)); }
.bl p { margin: 0; }
.bl-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.bl-tete b { font: 800 22px/1 var(--titres); }
.bl-x { width: 34px; height: 34px; border: 2px solid var(--encre); border-radius: 10px; display: grid; place-items: center; font: 700 20px/1 var(--texte); }
.bl-verdict { display: flex; gap: 14px; align-items: center; background: #DDF3E9; border-radius: 16px; padding: 14px 16px; }
.bl-verdict strong { display: block; font: 800 24px/1.1 var(--titres); margin-bottom: 4px; }
.bl-verdict p { font-size: 13.5px; color: var(--encre-2); }
.bl-ico { flex: none; width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--encre); display: grid; place-items: center; font: 800 14px/1 var(--texte); }
.bl-ico--ok { background: #22A06B; color: #fff; }
.bl-ico--warn { background: #FFC845; }
.bl-etiq { margin: 18px 0 9px !important; font: 800 12px/1 var(--texte); letter-spacing: .06em; text-transform: uppercase; color: var(--attenue); }
.bl-q { display: flex; gap: 12px; align-items: flex-start; background: #F4F7FB; border-radius: 14px; padding: 11px 14px; }
.bl-q + .bl-q { margin-top: 8px; }
.bl-q strong, .bl-note strong { display: block; font-size: 14.5px; margin-bottom: 2px; }
.bl-q p, .bl-note p { font-size: 13px; color: var(--encre-2); line-height: 1.4; }
.bl-det { margin-left: auto; font-weight: 700; font-size: 12px; color: var(--marine); white-space: nowrap; }
.bl-note { display: flex; gap: 12px; align-items: flex-start; border: 2px solid var(--ligne); border-radius: 14px; padding: 12px 14px; }

/* La carte « Génération automatique », recréée par-dessus la vue du mois (tailles en % de l'écran) */
.auto { position: absolute; right: 3%; bottom: 5%; width: 50%; background: #fff; border: 2px solid var(--encre); border-radius: 18px; box-shadow: 0 4px 0 var(--encre); padding: 2cqw 2.2cqw; color: var(--encre); font-size: 1.45cqw; line-height: 1.35; }
.auto p { margin: .6em 0 .9em; color: var(--encre-2); }
.auto-tete { display: flex; justify-content: space-between; align-items: center; }
.auto-tete strong { font: 800 1.45em/1 var(--titres); }
.auto-bascule { width: 3em; height: 1.7em; border-radius: 1em; border: 2px solid var(--encre); background: var(--vert); position: relative; }
.auto-bascule i { position: absolute; right: .15em; top: 50%; translate: 0 -50%; width: 1.15em; height: 1.15em; border-radius: 50%; background: #fff; border: 2px solid var(--encre); }
.auto-ligne { display: flex; justify-content: space-between; align-items: center; gap: 1em; font-weight: 600; }
.auto-ligne + .auto-ligne { margin-top: .6em; }
.auto-ligne > span:first-child { color: var(--attenue); white-space: nowrap; }
.auto-ligne b { white-space: nowrap; }
.auto-seg { display: flex; padding: .2em; border: 2px solid var(--encre); border-radius: 2em; }
.auto-seg i { font-style: normal; padding: .3em .7em; border-radius: 2em; white-space: nowrap; }
.auto-seg .on { background: var(--jaune); }

/* ============ L'ÉQUIPE ============ */
/* Toute la section tient dans un écran : tailles et marges suivent la hauteur de la fenêtre */
.equipe { padding: clamp(28px, 5vh, 64px) 0; }
.equipe__in { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 6vw, 90px); align-items: center; min-height: calc(100svh - 72px - 2 * clamp(28px, 5vh, 64px)); }
.equipe .titre-section { font-size: clamp(34px, min(4.6vw, 8.5vh), 64px); }
.equipe .intro-section { margin-top: clamp(10px, 2vh, 20px); font-size: clamp(16px, 2.3vh, 19px); }
.echange { display: grid; gap: clamp(8px, 1.3vh, 12px); margin-top: clamp(16px, 3vh, 30px); max-width: 470px; }
.bulle { display: flex; align-items: center; gap: 12px; padding: clamp(8px, 1.3vh, 12px) 16px; background: var(--blanc); border: 2px solid var(--encre); border-radius: 18px; box-shadow: var(--relief); font-size: 15px; opacity: 0; transform: translateY(16px); }
.bulle--g { border-bottom-left-radius: 4px; margin-right: 48px; }
.bulle--d { border-bottom-right-radius: 4px; margin-left: 48px; justify-content: flex-end; text-align: right; background: var(--bleu-clair); }
.bulle--patron { background: var(--vert-fond); }
.echange.joue .bulle { animation: bulle .5s cubic-bezier(.3, 1.4, .5, 1) forwards; }
.echange.joue .bulle:nth-child(2) { animation-delay: .9s; }
.echange.joue .bulle:nth-child(3) { animation-delay: 1.8s; }
@keyframes bulle { to { opacity: 1; transform: none; } }
.avatar { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--c); color: var(--blanc); font: 700 12px/31px var(--texte); text-align: center; font-style: normal; border: 2px solid var(--encre); }
.coche { flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--vert); border: 2px solid var(--encre); position: relative; }
.coche::after { content: ''; position: absolute; left: 8px; top: 3px; width: 7px; height: 13px; border: solid var(--blanc); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.equipe__plus { margin-top: clamp(14px, 2.6vh, 28px); color: var(--encre-2); max-width: 48ch; font-size: clamp(15px, 2.1vh, 17px); }
/* Carrousel de situations : les diapos se superposent dans la même case, la plus haute donne la hauteur */
.carrousel { display: grid; position: relative; max-width: 520px; }
.diapo { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.diapo.est-active { opacity: 1; visibility: visible; transition: opacity .35s; }
.diapo { display: flex; flex-direction: column; }
.bulle--tookui { border-bottom-right-radius: 4px; margin-left: 48px; justify-content: flex-end; text-align: right; background: var(--jaune-doux); }
.bulle--tookui img { flex: none; width: 34px; height: 34px; border-radius: 10px; }
/* Flèches fines de chaque côté des bulles (hauteur réglée par site.js), points discrets dessous */
.carrousel__fleche { position: absolute; top: var(--milieu, 70%); translate: 0 -50%; z-index: 2; width: 32px; height: 48px; padding: 0; border: 0; background: none; color: var(--attenue); font: 300 44px/1 var(--titres); opacity: .6; transition: opacity .2s, color .2s; }
.carrousel__fleche:hover { opacity: 1; color: var(--encre); }
.carrousel__fleche--g { left: -40px; }
.carrousel__fleche--d { right: -40px; }
.carrousel__points { grid-area: 2 / 1; display: flex; justify-content: center; gap: 6px; margin-top: clamp(12px, 2vh, 18px); max-width: 470px; }
.carrousel__points button { width: 7px; height: 7px; padding: 0; border-radius: 4px; border: 0; background: rgba(27, 43, 77, .22); transition: width .3s, background .3s; }
.carrousel__points button[aria-selected="true"] { width: 20px; background: var(--marine); }

.telephones { position: relative; height: 640px; }
.tel { position: absolute; width: 285px; padding: 10px; background: var(--encre); border-radius: 44px; box-shadow: 0 10px 0 rgba(27, 43, 77, .25); }
.tel img { border-radius: 34px; width: 100%; }
.tel--1 img { aspect-ratio: 600 / 1220; object-fit: cover; object-position: top; }
.tel--1 { left: 0; top: 40px; transform: rotate(-7deg); }
.tel--2 { right: 0; top: 70px; transform: rotate(5deg); z-index: 2; }
.autocollant { position: absolute; z-index: 3; background: var(--jaune); border: 2px solid var(--encre); border-radius: 50px; padding: 12px 20px; font: 800 16px/1 var(--titres); box-shadow: var(--relief); white-space: nowrap; }
.autocollant--tel { left: 30%; bottom: 30px; transform: rotate(-6deg); }

/* ============ PRIX ============ */
.prix { padding: clamp(36px, 7vh, 80px) 0; background: var(--blanc); border: 2px solid var(--encre); border-radius: var(--courbe); margin-inline: clamp(6px, 1.4vw, 22px); }
.prix__in { display: grid; grid-template-columns: 1fr 420px; gap: clamp(40px, 6vw, 90px); align-items: center; }
/* Comparaison : une barre fixe pour Tookui, une qui grandit avec l'équipe pour un logiciel facturé à l'employé */
.compare { margin-top: clamp(20px, 3.5vh, 36px); max-width: 520px; }
.compare__label { display: flex; align-items: baseline; gap: 8px; font-weight: 600; color: var(--encre-2); }
.compare__label output { font: 800 26px/1 var(--titres); color: var(--encre); }
.compare__ligne { display: grid; grid-template-columns: 150px 1fr 64px; align-items: center; gap: 12px; margin-top: 12px; font-size: 15px; }
.compare__nom { font-weight: 600; color: var(--encre-2); }
.compare__ligne--tookui .compare__nom { color: var(--encre); font-size: 18px; }
.compare__barre { height: 16px; border-radius: 8px; background: var(--ligne-douce); overflow: hidden; }
.compare__barre i { display: block; height: 100%; border-radius: 8px; background: #A8B3C4; transition: width .35s cubic-bezier(.3, .8, .3, 1); }
.compare__ligne--tookui .compare__barre i { background: var(--marine); }
.compare__ligne b { font: 800 18px/1 var(--titres); text-align: right; font-variant-numeric: tabular-nums; }
.compare__note { margin-top: 10px; font-size: 13px; color: var(--attenue); }
input[type="range"] { width: 100%; margin: 14px 0 8px; appearance: none; background: transparent; height: 28px; }
input[type="range"]::-webkit-slider-runnable-track { height: 10px; border-radius: 6px; background: linear-gradient(var(--marine), var(--marine)) 0/var(--rempli, 16%) 100% no-repeat, var(--blanc); border: 2px solid var(--encre); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: var(--blanc); border: 2px solid var(--encre); }
input[type="range"]::-moz-range-progress { height: 6px; background: var(--marine); border-radius: 6px; }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: var(--jaune); border: 2px solid var(--encre); box-shadow: 0 3px 0 var(--encre); cursor: grab; }
input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--jaune); border: 2px solid var(--encre); cursor: grab; }

/* Le ticket de caisse, avec ses bords dentelés */
.ticket-ombre { position: relative; transform: rotate(-1.5deg); }
/* Le contour suit les dents du ticket (haut et bas) : des ombres nettes de 2 px tout autour, puis le relief */
.ticket-contour { filter: drop-shadow(2px 0 0 var(--encre)) drop-shadow(-2px 0 0 var(--encre)) drop-shadow(0 2px 0 var(--encre)) drop-shadow(0 -2px 0 var(--encre)) drop-shadow(0 6px 0 rgba(27, 43, 77, .9)); }
.ticket {
  position: relative; background: #FFFDF6; padding: clamp(24px, 4vh, 34px) 28px clamp(22px, 3.6vh, 30px);
  -webkit-mask: radial-gradient(circle 9px at 50% 0, transparent 8.5px, #000 9px) 0 0/24px 51% repeat-x, radial-gradient(circle 9px at 50% 100%, transparent 8.5px, #000 9px) 0 100%/24px 51% repeat-x;
  mask: radial-gradient(circle 9px at 50% 0, transparent 8.5px, #000 9px) 0 0/24px 51% repeat-x, radial-gradient(circle 9px at 50% 100%, transparent 8.5px, #000 9px) 0 100%/24px 51% repeat-x;
  font-family: var(--texte);
}
.ticket__haut { display: flex; justify-content: space-between; font: 700 12px/1 var(--texte); text-transform: uppercase; letter-spacing: .1em; color: var(--attenue); padding-bottom: clamp(10px, 1.8vh, 16px); border-bottom: 2px dashed var(--ligne); margin-bottom: clamp(12px, 2vh, 18px); }
.bascule { display: flex; gap: 4px; padding: 4px; background: var(--fond); border: 2px solid var(--encre); border-radius: 14px; }
.bascule button { flex: 1; border: 0; background: transparent; padding: 10px 12px; border-radius: 10px; font-weight: 700; font-size: 15px; }
.bascule button[aria-checked="true"] { background: var(--encre); color: var(--blanc); }
.ticket__prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-top: clamp(12px, 2.4vh, 22px); }
.ticket__prix s { font: 700 22px/1 var(--titres); color: var(--attenue); text-decoration-color: var(--rouge); text-decoration-thickness: 3px; }
.ticket__montant { font: 900 clamp(52px, 8vh, 72px)/.9 var(--titres); letter-spacing: -.04em; }
.ticket__periode { font-weight: 700; color: var(--encre-2); }
.ticket__offert { display: inline-block; margin-top: 10px; background: var(--vert-fond); color: var(--vert-texte); font-weight: 800; font-size: 14px; padding: 5px 10px; border-radius: 8px; }
.ticket__lignes { list-style: none; padding: clamp(10px, 1.8vh, 16px) 0 0; margin: clamp(12px, 2vh, 18px) 0 clamp(14px, 2.4vh, 22px); border-top: 2px dashed var(--ligne); display: grid; gap: clamp(5px, 1vh, 9px); font-size: 14.5px; }
.ticket__lignes li { display: flex; gap: 8px; }
.ticket__lignes li span:first-child { flex: none; }
.ticket__lignes li::after { content: ''; order: 1; flex: 1; border-bottom: 2px dotted var(--ligne); transform: translateY(-5px); }
.ticket__lignes li span:last-child { order: 2; font-weight: 700; }
.ticket__note { margin-top: 14px; font-size: 13px; color: var(--attenue); text-align: center; }
/* Tampon « parrainage » posé à cheval sur le bord du ticket */
.tampon--parrain { position: absolute; right: -54px; bottom: -34px; top: auto; left: auto; width: 112px; height: 112px; font-size: 21px; opacity: 1; transform: rotate(14deg); border-width: 4px; pointer-events: auto; cursor: help; background: rgba(255, 255, 255, .9); }
.tampon--parrain small { display: block; font: 800 10px/1 var(--texte); letter-spacing: .12em; margin-bottom: 4px; }


/* ============ QUESTIONS ============ */

.questions__in { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(36px, 6vw, 90px); align-items: start; }
.questions__in > div:first-child { position: sticky; top: 110px; }
.faq { display: grid; gap: 12px; }
.faq details { background: var(--blanc); border: 2px solid var(--encre); border-radius: 18px; transition: box-shadow .2s, transform .2s; }
.faq details[open] { box-shadow: var(--relief); transform: translateY(-2px); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 60px 20px 24px; font: 700 19px/1.3 var(--titres); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 18px; top: 50%; translate: 0 -50%; width: 30px; height: 30px; border-radius: 10px; border: 2px solid var(--encre); display: grid; place-items: center; font: 700 19px/1 var(--texte); transition: rotate .2s, background .2s; }
.faq details[open] summary::after { rotate: 45deg; background: var(--jaune); }
.faq details p { padding: 0 24px 22px; color: var(--encre-2); }

/* ============ DERNIER APPEL ============ */
.final { position: relative; background: var(--encre); color: var(--blanc); overflow: hidden; border-radius: var(--courbe) var(--courbe) 0 0; text-align: center; }
/* Le passe : un rail en haut, les bons de la semaine accrochés, qui se balancent doucement */
.passe { position: relative; display: flex; justify-content: center; gap: clamp(10px, 2.4vw, 34px); padding-top: 26px; }
.passe__rail { position: absolute; left: 6%; right: 6%; top: 22px; height: 6px; border-radius: 3px; background: linear-gradient(#C9D2E0, #8C99AE); }
.bon { position: relative; width: clamp(62px, 7vw, 88px); padding: clamp(10px, 2vh, 16px) 6px clamp(6px, 1.4vh, 10px); background: #FFFDF6; color: var(--encre); border-radius: 0 0 6px 6px; transform-origin: 50% -8px; animation: balance 4s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); font-size: 12px; box-shadow: 0 6px 0 rgba(0, 0, 0, .25); }
.bon::before { content: ''; position: absolute; left: 50%; top: -9px; translate: -50% 0; width: 16px; height: 14px; border-radius: 3px; background: #C9D2E0; border: 2px solid #8C99AE; }
.bon b { display: block; font: 800 18px/1 var(--titres); margin-bottom: 4px; }
.bon span { display: block; font-weight: 600; color: var(--attenue); }
.bon i { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-top: 6px; border-radius: 6px; background: var(--vert); color: #fff; font: 800 12px/1 var(--texte); font-style: normal; }
.bon--ferme { background: repeating-linear-gradient(135deg, #FFFDF6 0 6px, #F6EBDB 6px 12px); }
@keyframes balance { 0%, 100% { rotate: -2.5deg; } 50% { rotate: 2.5deg; } }
.final__in { display: grid; justify-items: center; padding-block: clamp(10px, 2vh, 30px) clamp(48px, 8vh, 96px); }
/* La mascotte en blanc sur le bleu nuit, avec sa vapeur */
.final .mascotte { position: relative; width: clamp(76px, 13vh, 124px); margin-top: clamp(18px, 3.4vh, 34px); }
.final .mascotte img { filter: brightness(0) invert(1); }
.final .mascotte .vapeur { opacity: 1; }
.final .mascotte .vapeur path { stroke: var(--jaune); }
.final h2 { margin-top: clamp(10px, 2vh, 18px); font-size: clamp(40px, min(6.4vw, 10.5vh), 92px); font-weight: 900; letter-spacing: -.035em; line-height: .95; }
.final p { margin: clamp(12px, 2.4vh, 22px) auto 0; font-size: clamp(17px, 2.4vh, 20px); color: rgba(255, 255, 255, .78); max-width: 44ch; }
.final__cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 30px; margin-top: clamp(18px, 3.4vh, 32px); }
.lien-final { font-weight: 700; text-decoration: none; color: var(--blanc); border-bottom: 2px solid var(--jaune); padding-bottom: 2px; }
.final p strong { color: var(--blanc); font-weight: 700; }
.final p.final__note { margin-top: clamp(10px, 2vh, 18px); font-size: 14px; color: rgba(255, 255, 255, .55); }
.final .btn { box-shadow: 0 5px 0 #0C1730; border-color: #0C1730; }

/* ============ PAGE D'ESSAI ============ */
.essai { padding: clamp(28px, 6vh, 72px) 0 clamp(48px, 8vh, 96px); }
.essai__in { display: grid; grid-template-columns: 1fr 400px; gap: clamp(36px, 6vw, 96px); align-items: center; }
.essai h1 { font-size: clamp(44px, min(6vw, 10vh), 84px); font-weight: 900; letter-spacing: -0.04em; line-height: .95; }
.essai__chapo { margin-top: clamp(16px, 3vh, 28px); font-size: 20px; color: var(--encre-2); max-width: 40ch; }
.essai__parrain { display: inline-block; margin-bottom: 20px; padding: 8px 14px; background: var(--jaune-doux); border: 2px solid var(--encre); border-radius: 12px; font-weight: 600; }
.essai__ticket .ticket { padding-bottom: 28px; }
.etapes { padding-top: 0; }
.etapes .titre-section, .apres .titre-section { max-width: none; }
.etapes__liste { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: etape; }
.etapes__liste li { position: relative; background: var(--blanc); border: 2px solid var(--encre); border-radius: 20px; box-shadow: var(--relief); padding: 26px 22px 24px; }
.etapes__num { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px; border-radius: 50%; background: var(--jaune); border: 2px solid var(--encre); font: 800 18px/1 var(--titres); }
.etapes__liste h3 { font-size: 22px; line-height: 1.1; margin-bottom: 8px; }
.etapes__liste p { font-size: 15px; color: var(--encre-2); }
.apres { padding: clamp(44px, 8vh, 88px) 0; background: var(--blanc); border: 2px solid var(--encre); border-radius: var(--courbe); margin-inline: clamp(6px, 1.4vw, 22px); }
.apres__choix { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 36px; }
.apres__carte { border: 2px dashed var(--encre); border-radius: 20px; padding: 26px 26px 24px; }
.apres__carte--suite { border-style: solid; background: var(--jaune-doux); box-shadow: var(--relief); }
.apres__carte h3 { font-size: 26px; margin-bottom: 10px; }
.apres__carte p { color: var(--encre-2); }
.apres__carte b { color: var(--encre); }
.apres__cta { margin-top: 36px; text-align: center; }
.page-essai .pied { margin-top: clamp(40px, 6vh, 80px); }

/* ============ PAGES LÉGALES ET 404 ============ */
.legal { max-width: 820px; padding-block: clamp(40px, 7vh, 80px) clamp(60px, 9vh, 110px); }
.legal h1 { font-size: clamp(36px, 5vw, 56px); }
.legal__maj { margin-top: 10px; color: var(--attenue); font-size: 14px; }
.legal__brouillon { display: inline-block; margin-bottom: 22px; padding: 6px 12px; border-radius: 10px; background: var(--jaune-doux); border: 2px dashed var(--encre); font-weight: 700; font-size: 14px; }
.legal h2 { margin: 40px 0 12px; font-size: 24px; letter-spacing: -.01em; }
.legal p, .legal li { color: var(--encre-2); }
.legal p + p { margin-top: 10px; }
.legal ul { padding-left: 20px; display: grid; gap: 6px; margin: 10px 0 0; }
.legal a { color: var(--marine); font-weight: 600; }
.legal strong { color: var(--encre); }
.a-completer { background: var(--jaune); color: var(--encre); padding: 0 4px; border-radius: 4px; font-weight: 600; }
.erreur { display: grid; justify-items: center; align-content: center; text-align: center; min-height: calc(100svh - 72px - 94px); padding-block: clamp(40px, 8vh, 100px); }
.erreur .mascotte { position: relative; width: 120px; }
.erreur__code { margin-top: 24px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--attenue); font-size: 13px; }
.erreur h1 { margin-top: 10px; font-size: clamp(40px, 6vw, 72px); }
.erreur__texte { margin-top: 16px; font-size: 19px; color: var(--encre-2); }
.erreur__cta { justify-content: center; }

/* ---------- Pied de page ---------- */
.pied { background: #142240; color: rgba(255, 255, 255, .75); padding: 32px 0; font-size: 14px; }
.pied__in { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.pied img { height: 30px; width: auto; }
.pied nav { display: flex; gap: 22px; flex-wrap: wrap; margin-right: auto; }
.pied a { text-decoration: none; }
.pied a:hover { color: var(--blanc); text-decoration: underline; }

/* ---------- Apparition au défilement ---------- */
.revele { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .3, 1); }
.revele.visible { opacity: 1; transform: none; }

/* Écran moyen : la carte de génération reste dans la colonne du planning, sans mordre sur le texte */
@media (max-width: 1280px) { .carte-gen { left: -14px; } }

/* ---------- Tablette ---------- */
@media (max-width: 1060px) {
  .essai__in, .apres__choix { grid-template-columns: 1fr; }
  .essai__ticket { max-width: 420px; }
  .etapes__liste { grid-template-columns: 1fr 1fr; }
  .corvees { height: auto; padding: 80px 0; }
  .corvees__fixe { position: static; height: auto; overflow: visible; }
  .topbar__nav { display: none; }
  .hero__in, .corvees__in, .equipe__in, .prix__in, .questions__in { grid-template-columns: 1fr; }
  .scene { max-width: 680px; }
  .questions__in > div:first-child { position: static; }
  .toque__in { grid-template-columns: 1fr; }
  .toque__ecran { order: -1; position: sticky; top: 76px; z-index: 2; }
  .fenetre--toque { position: static; }
  .chapitre { min-height: 60vh; }
  .fenetre--toque { width: 100%; }
  .telephones { max-width: 560px; margin: 0 auto; width: 100%; }
  .ticket { max-width: 460px; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 640px) {
  .etapes__liste { grid-template-columns: 1fr; }
  .essai__chapo { font-size: 18px; }
  body { font-size: 16px; }
  .topbar__in { height: 64px; gap: 12px; }
  .topbar__logo img { height: 34px; transform: none; }
  .topbar__actions .lien-discret { display: none; }
  .topbar__actions { margin-left: auto; }
  .topbar__actions .btn--petit { padding: 9px 12px; font-size: 14px; }
  .topbar__menu { display: grid; gap: 5px; place-content: center; width: 42px; height: 42px; border: 2px solid var(--encre); border-radius: 12px; background: var(--blanc); }
  .topbar__menu span { width: 16px; height: 2px; background: var(--encre); border-radius: 2px; transition: transform .2s; }
  .topbar__menu[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .topbar__menu[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .menu-mobile:not([hidden]) { display: grid; padding: 8px var(--gouttiere) 18px; border-bottom: 2px solid var(--encre); }
  .menu-mobile a { padding: 12px 0; font-weight: 700; text-decoration: none; border-bottom: 1.5px solid var(--ligne); }

  .hero__chapo { font-size: 18px; }
  .scene { padding: 0 0 200px; }
  .fenetre--hero { transform: rotate(1deg); }
  .carte-gen { left: 0; bottom: 0; width: 236px; }
  .tampon { top: 30%; right: 4%; }
  .mascotte--hero { width: 86px; right: 4px; bottom: 6px; }
  .tampon { width: 112px; height: 112px; font-size: 22px; top: 34%; right: 2%; }

  .carnet { padding: 40px 18px 22px 54px; transform: rotate(1deg); background-image: linear-gradient(90deg, transparent 38px, rgba(180, 47, 52, .35) 38px 40px, transparent 40px); }
  .chrono { gap: 14px; }

  .chapitre { min-height: 70vh; }
  .chapitre p { font-size: 16px; }

  .bulle--g { margin-right: 18px; } .bulle--d, .bulle--tookui { margin-left: 18px; }
  .carrousel__fleche { display: none; }
  .equipe__in { min-height: 0; }
  .telephones { height: 470px; }
  .tel { width: 205px; border-radius: 34px; padding: 8px; }
  .tel img { border-radius: 27px; }
  .tel--1 { top: 30px; }
  .autocollant--tel { left: 12%; bottom: 0; font-size: 14px; }

  .ticket { padding: 30px 20px 26px; }
  .ticket__montant { font-size: 62px; }
  .tampon--parrain { width: 92px; height: 92px; font-size: 17px; right: -8px; bottom: -30px; }
  .faq summary { font-size: 17px; padding: 18px 56px 18px 18px; }
  .bon:nth-child(n+6) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .defile__piste { animation: none; }
}