/*
 * Vitrine GuimbalEdu. Direction artistique : l'école guinéenne, du papier au numérique (cahier à petits
 * carreaux, cachet de l'école, stylo rouge, surligneur, tableau noir). Polices embarquées (Fraunces pour
 * les titres, Caveat pour les annotations, licence OFL : fonts/), aucune ressource externe.
 */
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("fonts/caveat.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  color-scheme: light;
  --paper: #fbf8f1;
  --paper-deep: #f3eee2;
  --card: #ffffff;
  --ink: #16213a;
  --ink-soft: #4b5568;
  --line: #e4dccb;
  --grid: rgba(37, 72, 130, 0.075);
  --brand: #1a6640;
  --brand-dark: #124a2e;
  --brand-soft: #e6f2ea;
  --red: #c8102e;
  --yellow: #fcd116;
  --flag-green: #009460;
  --stamp: #2d43a1;
  --board: #20282b;
  --chalk: #eef0ea;
  --radius: 14px;
  --shadow: 0 22px 44px -24px rgba(22, 33, 58, 0.45);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --hand: "Caveat", "Segoe Print", "Comic Sans MS", cursive;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
/* Ancres sous la barre du haut collante ; un mot trop long pour sa colonne passe à la ligne au lieu de
   pousser la page de côté */
html { scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); overflow-wrap: break-word; }
img, svg { display: block; }
/* Exposants (1er, 7e) : jamais sous 12 px, sans écarter les lignes */
sup { font-size: max(12px, 0.7em); line-height: 0; }
h1, h2, h3 { margin: 0 0 0.55em; line-height: 1.15; letter-spacing: -0.015em; }
h1, h2 { font-family: var(--serif); font-weight: 700; }
h1 { font-size: clamp(2.1rem, 5.6vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); max-width: 22em; }
h3 { font-size: 1.06rem; }
p { margin: 0 0 1em; }
a { color: var(--brand); }
[hidden] { display: none !important; }
.sprite { position: absolute; }
/* Marges de 16 px, élargies par l'encoche d'un téléphone couché (viewport-fit=cover) */
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
.narrow { max-width: 780px; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hand { font-family: var(--hand); font-weight: 600; }

/* Papier quadrillé (cahier à petits carreaux) */
.grid-paper {
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 22px 22px;
}
.section-paper, .section-paper.grid-paper { background-color: var(--paper-deep); }

/* Surligneur jaune, tracé à la main */
.marker {
  color: inherit; padding: 0 0.08em; border-radius: 0.2em;
  background: linear-gradient(100deg, transparent 0.6%, rgba(252, 209, 22, 0.62) 2%, rgba(252, 209, 22, 0.5) 96%, transparent 99%) no-repeat 0 72% / 100% 46%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Boutons */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px;
  border: 1px solid transparent; border-radius: 999px; font: inherit; font-weight: 650; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.button:hover { transform: translateY(-1px); }
/* Dans la page et les dialogues, un libellé trop long pour l'écran passe à la ligne au lieu de dépasser */
main .button, .login .button { max-width: 100%; padding-block: 8px; white-space: normal; text-align: center; }
.button-large { min-height: 52px; padding: 0 24px; font-size: 1.02rem; }
.button-primary { background: var(--ink); color: #fff; }
.button-primary:hover { background: var(--brand); }
.button-outline { background: var(--card); color: var(--ink); border-color: var(--line); }
.button-outline:hover { border-color: var(--ink); }
.module-panel .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 4px 0 0; }
.button-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.button-ghost:hover { background: var(--card); }
.button .icon { width: 18px; height: 18px; }
.button:focus-visible, .link-button:focus-visible, a:focus-visible, [role="tab"]:focus-visible, .select-trigger:focus-visible, .icon-button:focus-visible, .menu-toggle:focus-visible {
  outline: 3px solid var(--yellow); outline-offset: 2px;
}
.link-button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.icon-button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); cursor: pointer; }
.icon-button:hover { background: var(--paper-deep); color: var(--ink); }

/* Bandeau aux couleurs du drapeau, barre du haut */
.flag { display: flex; height: 4px; }
.flag i { flex: 1; }
.flag i:nth-child(1), .flag-dots i:nth-child(1) { background: var(--red); }
.flag i:nth-child(2), .flag-dots i:nth-child(2) { background: var(--yellow); }
.flag i:nth-child(3), .flag-dots i:nth-child(3) { background: var(--flag-green); }
.topbar { position: sticky; top: 0; z-index: 20; background: rgba(251, 248, 241, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topbar-inner { display: flex; align-items: center; gap: 12px; max-width: 1280px; min-height: 64px; }
/* La marque peut céder quelques pixels (texte agrandi par le téléphone) plutôt que pousser la page */
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; margin: 0; color: var(--ink); text-decoration: none; font-family: var(--serif); font-weight: 700; font-size: 1.2rem; }
.brand-name { min-width: 0; overflow: hidden; white-space: nowrap; }
.brand-mark { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--ink); color: var(--yellow); }
.menu { display: none; gap: 18px; margin-left: 4px; }
.menu a:not(.button) { color: var(--ink-soft); font-size: 0.92rem; font-weight: 550; text-decoration: none; white-space: nowrap; }
.menu a:not(.button):hover { color: var(--ink); }
.menu .menu-extra, .menu .menu-extra .button { display: none; }
.topbar-actions { display: flex; flex: none; order: 2; gap: 8px; margin-left: auto; }
.topbar .button { min-height: 38px; padding: 0 14px; font-size: 0.92rem; }
.menu-toggle {
  display: inline-grid; place-items: center; flex: none; order: 3; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer;
}
.menu-toggle:hover, .topbar.is-open .menu-toggle { background: var(--card); }
.hide-small { display: none; }
.show-small { display: inline; }

/* Ouverture */
.hero { position: relative; padding: 44px 0 64px; overflow: hidden; overflow: clip; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.flag-dots { display: inline-flex; gap: 3px; }
.flag-dots i { width: 8px; height: 8px; border-radius: 50%; }
.lead { max-width: 37em; font-size: 1.12rem; color: var(--ink-soft); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 30px; }
.band { padding-top: 20px; border-top: 1px dashed var(--line); }
.counters { display: flex; flex-wrap: wrap; gap: 14px 32px; margin: 0 0 8px; padding: 0; list-style: none; }
.counters li { display: flex; flex-direction: column; }
.counters strong { font-family: var(--serif); font-size: 1.9rem; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
.counters span { font-size: 0.92rem; color: var(--ink-soft); }
.band-note { margin: 0; font-size: 0.82rem; color: var(--ink-soft); }
.notice { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font-weight: 550; }
.notice::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 0.55em; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(200, 16, 46, 0.14); }

/* Le bulletin posé sur le cahier, tamponné et annoté */
.desk { position: relative; justify-self: center; width: min(100%, 400px); margin: 0; }
.doc { position: relative; padding: 20px 20px 16px; border-radius: 6px; background: var(--card); box-shadow: var(--shadow), 0 0 0 1px rgba(22, 33, 58, 0.06); transform: rotate(-1.6deg); font-size: 0.85rem; }
.doc-head { margin-bottom: 8px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); text-align: center; }
.doc-head p { margin: 0; }
.doc-state { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.doc-state span { display: block; font-weight: 500; letter-spacing: 0.04em; text-transform: none; font-style: italic; }
.doc-school { margin-top: 6px !important; font-family: var(--serif); font-size: 1.05rem; font-weight: 700; }
.doc-title { font-weight: 700; }
.doc-student { color: var(--ink-soft); }
.doc-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.doc-table th { padding: 6px 0; font-size: 0.75rem; font-weight: 700; text-align: left; text-transform: uppercase; color: var(--ink-soft); }
.doc-table td { padding: 5px 0; border-top: 1px solid var(--line); }
.doc-table th:not(:first-child), .doc-table td:not(:first-child) { width: 4.2em; text-align: right; }
.doc-result { display: grid; gap: 5px; margin-top: 12px; padding: 10px 12px; border: 1.5px solid var(--ink); border-radius: 6px; }
.doc-result p { display: flex; justify-content: space-between; margin: 0; }
.doc-result strong { font-family: var(--serif); }
.doc-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 0.75rem; color: var(--ink-soft); }
.doc-qr { width: 38px; height: 38px; fill: var(--ink); }
.stamp { position: absolute; right: 26px; bottom: -34px; width: 108px; height: 108px; color: var(--stamp); opacity: 0.78; mix-blend-mode: multiply; transform: rotate(-16deg); }
.stamp text { font-family: system-ui, sans-serif; }
.annotation { display: flex; align-items: center; gap: 8px; margin: 18px 0 0 10px; font-family: var(--hand); font-size: 1.4rem; font-weight: 600; line-height: 1; color: var(--red); transform: rotate(-2deg); }
.annotation-arrow { width: 42px; height: 28px; flex: none; fill: none; stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transform: scaleY(-1); }
.desk figcaption { margin-top: 18px; text-align: center; font-size: 0.82rem; color: var(--ink-soft); }
.shine { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; border-radius: inherit; background: linear-gradient(110deg, transparent 40%, rgba(252, 209, 22, 0.4) 50%, transparent 60%) no-repeat 150% 0 / 250% 100%; }
.chaos { display: none; }
.scrap {
  position: absolute; left: 50%; top: 42%; width: 130px; margin: -34px 0 0 -65px; padding: 10px 10px 12px; border-radius: 3px;
  background: #fffdf4; box-shadow: 0 10px 18px -10px rgba(22, 33, 58, 0.45); font-family: var(--hand); font-size: 1.05rem; color: var(--ink);
  opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r));
}
.scrap b { display: block; font-weight: 600; line-height: 1.1; }
.scrap i { display: block; height: 2px; margin-top: 8px; border-radius: 2px; background: rgba(37, 72, 130, 0.22); }
.scrap i:nth-of-type(2) { width: 75%; }
.scrap i:nth-of-type(3) { width: 55%; }

/* Sections */
/* Une scène qui bouge (fiche distribuée, cachet qui tombe) ne fait jamais glisser la page de côté */
.section { padding: 64px 0; overflow-x: clip; }
.section-tight { padding: 28px 0; }
.kicker { display: inline-block; margin-bottom: 10px; font-family: var(--hand); font-size: 1.5rem; font-weight: 600; line-height: 1; color: var(--red); transform: rotate(-2deg); }
.section-lead { max-width: 44em; margin-bottom: 30px; color: var(--ink-soft); font-size: 1.05rem; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.card { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.card h3 { display: flex; align-items: center; gap: 10px; }
.card h3 .icon { color: var(--brand); }

/* Avant, après */
.compare { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 26px; }
.compare-head { display: none; }
.compare-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.compare-row h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--serif); font-size: 1.2rem; }
.compare-row h3 .icon { width: 24px; height: 24px; color: var(--ink-soft); }
.before { margin: 0; padding: 12px 14px; border-radius: 10px; font-family: var(--hand); font-size: 1.28rem; line-height: 1.25; color: #5c6476;
  background-color: var(--paper); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 16px 16px; }
.before s { text-decoration: none; background: linear-gradient(var(--red), var(--red)) no-repeat 0 55% / 100% 2px; }
.after { display: flex; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--brand-soft); font-weight: 550; }
.after .icon { margin-top: 2px; color: var(--brand); stroke-width: 3; }

/* Une journée */
.day .scene { display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: 0 1px 0 var(--line); }
.scene-top { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 8px; }
.figure { width: 76px; height: 76px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.scene-time { display: flex; flex-direction: column; margin: 0 0 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
.scene-time .hand { font-size: 1.9rem; line-height: 1; letter-spacing: 0; text-transform: none; color: var(--red); }
.mini { margin-top: auto; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font-size: 0.86rem; }
.mini-center { display: grid; place-items: center; padding: 4px; border: 0; background: none; }
.mini-head { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 8px; font-size: 0.8125rem; font-weight: 650; color: var(--ink-soft); }
.mini-grades { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.mini-grades li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 6px; background: var(--card); }
.mini-grades b { min-width: 3ch; font-family: var(--hand); font-size: 1.25rem; line-height: 1; text-align: right; color: var(--red); }
.mini-chip { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 4px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark); font-size: 0.8rem; font-weight: 650; }
.mini-chip .icon { width: 14px; height: 14px; stroke-width: 3; }
.feature-phone { width: 156px; padding: 12px 10px 14px; border-radius: 24px; background: var(--ink); }
.fp-screen { display: flex; align-items: flex-end; height: 124px; padding: 8px; overflow: hidden; border-radius: 8px; background: #d7e6dc; }
.sms { margin: 0; padding: 6px 8px; border-radius: 8px 8px 8px 2px; background: var(--card); font-size: 0.75rem; line-height: 1.35; }
.sms b { display: block; font-size: 0.75rem; color: var(--brand); }
.fp-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 10px; }
.fp-keys i { height: 10px; border-radius: 4px; background: #34405c; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 64px; }
.bars i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: var(--ink); transform-origin: bottom; }
.bars i:last-child { background: var(--brand); }
.cash-total { display: flex; align-items: baseline; gap: 6px; margin: 10px 0 0; }
.cash-total b { font-family: var(--serif); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.scene-note { margin: 14px 0 0; font-size: 0.8rem; color: var(--ink-soft); }

/* Modules en onglets */
/* Colonnes en minmax(0, 1fr) : un libellé long (« conformité ») se coupe au lieu d'élargir la grille ;
   une colonne d'onglets au téléphone, comme à côté du panneau sur grand écran */
.modules { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 28px; }
.module-tabs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.module-tabs [role="tab"] {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease;
}
.module-tabs [role="tab"] > span { min-width: 0; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
.module-tabs [role="tab"] .icon { color: var(--ink-soft); }
.module-tabs [role="tab"] small { display: none; }
.module-tabs [role="tab"] strong { font-weight: 650; }
.module-tabs [role="tab"]:hover { border-color: var(--ink-soft); }
.module-tabs [role="tab"][aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.module-tabs [role="tab"][aria-selected="true"] .icon { color: var(--yellow); }
.module-panel { min-width: 0; padding: 22px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.panel-lead { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; line-height: 1.3; }
.ticks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ticks li { position: relative; padding-left: 30px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 0.25em; width: 18px; height: 18px; border-radius: 50%; background: var(--brand-soft); }
.ticks li::after { content: ""; position: absolute; left: 8px; top: 0.5em; width: 6px; height: 9px; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(40deg); }

/* Le tableau noir */
.chalkboard {
  position: relative; color: var(--chalk);
  background: radial-gradient(1200px 500px at 15% 0%, rgba(255, 255, 255, 0.06), transparent 60%), radial-gradient(900px 400px at 90% 100%, rgba(255, 255, 255, 0.05), transparent 60%), var(--board);
  border-top: 10px solid #6b4a2b; border-bottom: 10px solid #6b4a2b;
}
.chalkboard h2 { color: #fff; }
.kicker-chalk { color: var(--yellow); }
.chalk-underline { padding-bottom: 0.12em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 60 2, 120 11, 180 5 S 270 4, 298 7' fill='none' stroke='%23fcd116' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100% / 100% 0.32em; }
.chalk-list { display: grid; gap: 14px; margin: 24px 0 0; padding: 0; list-style: none; }
.chalk-list li { display: flex; gap: 14px; }
.chalk-list .icon { width: 36px; height: 36px; padding: 7px; border: 1.5px dashed rgba(238, 240, 234, 0.55); border-radius: 50%; color: var(--yellow); }
.chalk-list p { margin: 0; color: rgba(238, 240, 234, 0.86); }
.chalk-list strong { color: #fff; }
.verify { justify-self: center; width: min(100%, 300px); margin: 0; }
.device { padding: 12px; border-radius: 30px; background: #0f1416; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08), 0 28px 50px -20px rgba(0, 0, 0, 0.7); }
.verify-screen { position: relative; padding: 26px 18px; border-radius: 20px; background: var(--card); color: var(--ink); text-align: center; }
.verify-screen .ok-state { position: relative; }
.verify-badge { display: inline-grid; place-items: center; width: 58px; height: 58px; margin-bottom: 12px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.verify-badge .icon { width: 30px; height: 30px; }
.verify-title { margin: 0 0 4px; font-family: var(--serif); font-size: 1.2rem; font-weight: 700; color: var(--brand); }
.verify-text { font-size: 0.9rem; color: var(--ink-soft); }
.verify-facts { margin: 16px 0 0; border-top: 1px solid var(--line); font-size: 0.86rem; text-align: left; }
.verify-facts div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.verify-facts dt { color: var(--ink-soft); }
.verify-facts dd { margin: 0; font-weight: 650; text-align: right; }
.verify figcaption { margin-top: 14px; text-align: center; font-size: 1.4rem; color: var(--yellow); }
.scan-state { display: none; position: absolute; inset: 0; z-index: 1; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; border-radius: 20px; background: var(--card); }
.scan-title { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 650; color: var(--ink-soft); }
.qr-frame { position: relative; width: 150px; height: 150px; padding: 12px; border: 2px dashed var(--line); border-radius: 12px; }
.qr { width: 100%; height: 100%; fill: var(--ink); }
.scan-beam { position: absolute; left: 6px; right: 6px; top: 10px; height: 3px; border-radius: 3px; background: var(--red); box-shadow: 0 0 14px 3px rgba(200, 16, 46, 0.45); }

/* Témoignages (notes scotchées) et logos */
.testimonial { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; margin: 0; padding: 26px 22px 20px; border-radius: 4px; background: #fffdf4; box-shadow: var(--shadow); transform: rotate(-0.8deg); }
.testimonial:nth-child(2n) { transform: rotate(0.9deg); }
.testimonial::before { content: ""; position: absolute; top: -10px; left: 50%; width: 86px; height: 22px; margin-left: -43px; background: rgba(252, 209, 22, 0.55); transform: rotate(-3deg); }
.testimonial blockquote { margin: 0; font-family: var(--serif); font-size: 1.12rem; line-height: 1.4; }
.testimonial figcaption { font-size: 0.9rem; color: var(--ink-soft); }
.testimonial figcaption strong { display: block; color: var(--ink); }
.logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 44px; margin: 0; padding: 0; list-style: none; }
.logos img { max-width: 140px; max-height: 48px; object-fit: contain; filter: grayscale(1); opacity: 0.75; transition: filter 0.2s, opacity 0.2s; }
.logos img:hover { filter: none; opacity: 1; }

/* Badges des espaces */
.badges { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.badge { position: relative; padding: 28px 20px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.badge::before { content: ""; position: absolute; top: 10px; left: 50%; width: 36px; height: 6px; margin-left: -18px; border-radius: 6px; background: var(--paper-deep); box-shadow: inset 0 1px 2px rgba(22, 33, 58, 0.2); }
.badge:hover { transform: translateY(-3px) rotate(-0.6deg); box-shadow: var(--shadow); }
.badge-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 12px; border-radius: 12px; background: var(--paper-deep); color: var(--ink); }
.badge h3 { font-family: var(--serif); font-size: 1.15rem; }
.badge p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }

/* Mise en service : frise */
.timeline { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 28px 0 32px; padding: 0; list-style: none; counter-reset: step; }
.timeline li { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); counter-increment: step; }
.timeline li p { margin: 0; }
.step-icon { position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--yellow); }
.step-icon::after { content: counter(step); position: absolute; right: -6px; top: -6px; display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid var(--card); border-radius: 50%; background: var(--red); color: #fff; font-size: 0.75rem; font-weight: 700; }
.assurance { align-items: start; }
.data-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.data-list li { display: flex; gap: 12px; }
.data-list p { margin: 0; font-size: 0.95rem; }
.data-list .icon { margin-top: 2px; color: var(--brand); }

/* Installer : téléchargement, étapes numérotées, avertissement de Windows annoté (surligneur sur l'écran bleu) */
.download { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 8px; margin: 4px 0 26px; }
.download-meta { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }
.download-soon { margin: 0; padding: 10px 14px; border: 1px dashed var(--line); border-radius: 10px; background: var(--paper); color: var(--ink-soft); }
.download-sum { font-size: 0.85rem; color: var(--ink-soft); }
.download-sum summary { cursor: pointer; }
.download-sum p { margin: 6px 0 0; }
.download-sum code { overflow-wrap: anywhere; }
.install-steps { display: grid; gap: 16px; margin: 0 0 22px; padding: 0; list-style: none; counter-reset: install; }
.install-steps li { position: relative; padding-left: 42px; counter-increment: install; }
.install-steps li::before { content: counter(install); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--yellow); font-size: 0.88rem; font-weight: 700; }
.install-steps p { margin: 0; }
.installs code { padding: 1px 6px; border-radius: 5px; background: var(--paper-deep); font-size: max(12px, 0.88em); overflow-wrap: anywhere; }
.installs .ticks { margin-bottom: 22px; }
.installs .hint { margin-top: -6px; }
.address { font-weight: 650; overflow-wrap: anywhere; }
.install-note { display: flex; gap: 12px; max-width: 52em; margin: 26px 0 0; color: var(--ink-soft); }
.install-note .icon { margin-top: 2px; color: var(--brand); }
.install-note strong { color: var(--ink); }
.smartscreen { max-width: 380px; margin: 16px 0 4px; transform: rotate(-0.8deg); }
.ss-window { padding: 18px 20px 16px; border-radius: 4px; background: #0f5ba7; color: #fff; font-family: "Segoe UI", system-ui, sans-serif; box-shadow: var(--shadow); }
.ss-window p { margin: 0 0 8px; }
.ss-title { font-size: 1.12rem; font-weight: 600; }
.ss-text { font-size: 0.8rem; opacity: 0.88; }
.ss-more { padding: 16px 0 0 4px; font-size: 0.8rem; text-decoration: underline; }
.ss-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 30px; }
.ss-button { padding: 4px 12px; border: 1px solid rgba(255, 255, 255, 0.8); font-size: 0.8rem; }
.circled { position: relative; display: inline-block; }
.circled::after {
  content: ""; position: absolute; inset: -7px -15px -6px -14px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 48' preserveAspectRatio='none'%3E%3Cpath d='M66 5C32 2 6 10 5 24C4 38 34 45 64 44C94 43 116 35 115 22C114 10 92 3 50 7' fill='none' stroke='%23fcd116' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.circled::before { content: attr(data-n); position: absolute; left: -10px; top: -30px; font-family: var(--hand); font-size: 1.55rem; font-weight: 600; line-height: 1; color: var(--yellow); }

/* Et si… et demande de démo */
.split-top { align-items: start; }
.questions { display: grid; gap: 14px; margin: 18px 0 22px; padding: 0; list-style: none; font-size: 1.12rem; font-weight: 550; }
.questions li { display: flex; align-items: baseline; gap: 12px; }
.hand-check { font-family: var(--hand); font-size: 1.8rem; line-height: 0.8; color: var(--red); transform: rotate(-8deg); }
.price { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; color: var(--ink-soft); }
.direct { margin-top: 26px; padding-top: 22px; border-top: 1px dashed var(--line); }
.direct p { margin: 0 0 12px; font-weight: 650; }
.direct-links { display: flex; flex-wrap: wrap; gap: 10px; }
/* Introduction, fiche et ardoise « Après votre demande » : l'ardoise suit la fiche sur téléphone et comble
   la colonne de gauche sous l'introduction sur grand écran */
.split-demo { grid-template-areas: "intro" "card" "next"; }
.split-demo .demo-intro { grid-area: intro; }
.split-demo .demo-card { grid-area: card; }
.split-demo .demo-next { grid-area: next; }
/* L'ardoise de l'écolier : cadre de bois, craie, numéros à la main */
.slate {
  position: relative; padding: 24px 24px 26px; border: 10px solid #6b4a2b; border-radius: 18px; color: var(--chalk);
  background: radial-gradient(520px 220px at 12% 0%, rgba(255, 255, 255, 0.07), transparent 65%), radial-gradient(420px 200px at 100% 100%, rgba(255, 255, 255, 0.05), transparent 60%), var(--board);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.05);
}
.slate h3 { display: inline-block; margin: 0 0 18px; padding-bottom: 0.1em; font-family: var(--hand); font-size: 1.75rem; font-weight: 600; line-height: 1; color: var(--yellow); transform: rotate(-1.5deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 60 2, 120 11, 180 5 S 270 4, 298 7' fill='none' stroke='%23fcd116' stroke-width='3' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E") no-repeat 0 100% / 100% 0.28em; }
.slate-steps { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: slate; }
.slate-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; counter-increment: slate; }
.slate-steps li::before {
  content: counter(slate); display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px dashed rgba(238, 240, 234, 0.55); border-radius: 50%;
  font-family: var(--hand); font-size: 1.6rem; font-weight: 600; line-height: 1; color: var(--yellow);
}
.slate-steps p { margin: 0; font-size: 0.97rem; color: rgba(238, 240, 234, 0.82); }
.slate-steps strong { display: block; margin-bottom: 2px; font-size: 1.04rem; color: #fff; }

/* Fiche de demande : page de cahier (marge rouge, parties numérotées dans la marge) ; la réponse
   choisie est entourée au stylo rouge ; la demande reçue revient tamponnée */
.demo-card {
  --margin: 32px; --pad: 16px;
  position: relative; border-radius: 6px;
  background: #fffdf6 linear-gradient(90deg, transparent calc(var(--margin) - 1px), rgba(200, 16, 46, 0.5) calc(var(--margin) - 1px) var(--margin), transparent var(--margin));
  box-shadow: 0 0 0 1px rgba(22, 33, 58, 0.06), var(--shadow);
}
.demo-form, .demo-receipt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 26px var(--pad) 24px calc(var(--margin) + var(--pad)); }
.demo-form[hidden], .demo-receipt[hidden] { display: none; }
.demo-form h3, .demo-receipt h3 { margin: 0; font-family: var(--serif); font-size: 1.45rem; line-height: 1.2; }
.form-intro { margin: -10px 0 0; font-size: 0.92rem; color: var(--ink-soft); }
.demo-part { position: relative; display: grid; gap: 14px; min-width: 0; margin: 0; padding: 0; border: 0; }
.demo-part > legend {
  float: left; display: flex; align-items: center; gap: 12px; width: 100%; padding: 0;
  font-family: var(--serif); font-size: 1.08rem; font-weight: 700;
}
.demo-part > legend::after { content: ""; flex: 1; border-bottom: 1px dashed var(--line); }
.demo-number {
  position: absolute; left: calc(-1 * var(--margin) - var(--pad)); width: var(--margin);
  font-family: var(--hand); font-size: 1.9rem; font-weight: 600; line-height: 1; text-align: center; color: var(--red); transform: rotate(-6deg);
}
.field { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field > label, .choices > legend { display: block; font-size: 0.9rem; font-weight: 650; }
.field-label, .login-form label { display: grid; gap: 6px; font-size: 0.9rem; font-weight: 650; }
.choices > legend { float: left; width: 100%; padding: 0; }
.demo-form input:not([type="radio"]), .demo-form textarea, .login-form input, .select-trigger {
  width: 100%; min-height: 46px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; font-size: max(16px, 1rem); font-weight: 400;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.demo-form input:not([type="radio"]), .demo-form textarea { background: var(--card); }
.demo-form input:focus, .demo-form textarea:focus, .login-form input:focus { outline: none; border-color: var(--ink); background: var(--card); box-shadow: 0 0 0 3px rgba(252, 209, 22, 0.45); }
.demo-form input::placeholder, .demo-form textarea::placeholder { color: #9aa1ae; }
.demo-form textarea { min-height: 84px; resize: vertical; }
.demo-form .is-invalid input, .demo-form .is-invalid textarea, .demo-form .is-invalid .phone-field, .login-form [aria-invalid="true"] { border-color: var(--red); }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.optional { font-weight: 400; color: var(--ink-soft); }
.field-hint { margin: 0; font-size: 0.82rem; color: var(--ink-soft); }
.field-error { margin: 0; font-size: 0.85rem; font-weight: 650; color: var(--red); }
.form-error { margin: 0; font-weight: 650; color: var(--red); }
.form-done { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-dark); font-weight: 650; }
.form-privacy { margin: -6px 0 0; font-size: 0.82rem; text-align: center; color: var(--ink-soft); }
.button[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* Choix en un geste : étiquettes ; la choisie, entourée au stylo rouge (tracé à main levée) */
.chips { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 7px 15px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); font-size: 0.94rem; font-weight: 550; color: var(--ink-soft); transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.chip:hover span { border-color: var(--ink-soft); color: var(--ink); }
.chip input:focus-visible + span { outline: 3px solid var(--yellow); outline-offset: 2px; }
.chip input:checked + span { border-color: transparent; background: transparent; font-weight: 700; color: var(--ink); }
.chip input:checked + span::after {
  content: ""; position: absolute; inset: -6px -9px -5px -7px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 48' preserveAspectRatio='none'%3E%3Cpath d='M66 5C32 2 6 10 5 24C4 38 34 45 64 44C94 43 116 35 115 22C114 10 92 3 50 7' fill='none' stroke='%23c8102e' stroke-width='2.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.demo-form .is-invalid .chip span { border-color: rgba(200, 16, 46, 0.55); }

/* Téléphone : indicatif de la Guinée devant, barré dès qu'un autre indicatif est tapé */
.phone-field { display: flex; align-items: stretch; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--card); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.phone-field:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(252, 209, 22, 0.45); }
.demo-form .phone-field input { min-width: 0; border: 0; border-radius: 0; box-shadow: none; }
.phone-prefix { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-right: 1px solid var(--line); background: var(--paper); font-weight: 650; color: var(--ink-soft); font-variant-numeric: tabular-nums; transition: opacity 0.15s ease; }
.phone-field.is-international .phone-prefix { opacity: 0.45; text-decoration: line-through; }

/* « Fait à …, le … » à l'encre bleue : la ville se recopie pendant la saisie (décoratif) */
.demo-signature { margin: -4px 4px -6px 0; text-align: right; font-family: var(--hand); font-size: 1.35rem; font-weight: 600; line-height: 1.1; color: var(--stamp); transform: rotate(-1.5deg); }
.demo-signature [data-signature-city]:empty::before { content: "………………"; color: rgba(45, 67, 161, 0.35); }

/* Demande reçue : cachet, ce que l'équipe a reçu, le numéro où elle rappelle */
.demo-receipt { gap: 16px; padding-top: 30px; }
.demo-receipt h3:focus { outline: none; }
.demo-receipt .receipt-stamp { justify-self: start; display: grid; gap: 2px; max-width: none; margin: 0 0 4px; padding: 8px 16px; font-size: 1rem; }
.receipt-stamp small { font-size: 0.68rem; letter-spacing: 0.08em; }
.receipt-callback { margin: -6px 0 0; font-weight: 550; }
.receipt-callback span { white-space: nowrap; }
.receipt-lines { display: grid; margin: 0; border-top: 1px dashed var(--line); }
.receipt-lines div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.receipt-lines dt { flex: none; color: var(--ink-soft); }
.receipt-lines dd { margin: 0; font-weight: 650; text-align: right; }
.receipt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; }
.receipt-again { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--ink-soft); }
.receipt-again:hover { color: var(--ink); }
.receipt-again .icon { width: 16px; height: 16px; }

/* Liste déroulante (comme FormSelect de l'application) */
.select { position: relative; }
.select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer; }
.select-trigger .icon { width: 18px; height: 18px; color: var(--ink-soft); transition: transform 0.2s ease; }
.select-trigger[aria-expanded="true"] { border-color: var(--ink); background: var(--card); box-shadow: 0 0 0 3px rgba(252, 209, 22, 0.45); }
.select-trigger[aria-expanded="true"] .icon { transform: rotate(180deg); }
.select-value[data-empty] { color: var(--ink-soft); }
.select-list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); max-height: 260px; margin: 0; padding: 6px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 18px 36px -16px rgba(22, 33, 58, 0.4); list-style: none; outline: none;
}
.select-list [role="option"] { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 8px; cursor: pointer; }
.select-list [role="option"].is-active { background: var(--paper-deep); }
.select-list [role="option"][aria-selected="true"] { font-weight: 650; }
.select-list [role="option"][aria-selected="true"]::after { content: ""; width: 6px; height: 11px; margin-right: 4px; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(40deg) translateY(-2px); }

/* Questions fréquentes */
/* Questions : fiches bristol posées sur la table (en-tête sous un trait rouge, lignes bleues), la
   réponse au verso, sa réponse courte tamponnée comme le cachet de l'école ; texte calé sur les lignes */
.fiches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 28px 24px; margin: 0; padding: 0; list-style: none; }
.fiche { --tilt: -0.8deg; perspective: 1400px; transform: rotate(var(--tilt)); transition: transform 0.25s ease; }
.fiche:nth-child(3n + 2) { --tilt: 0.7deg; }
.fiche:nth-child(3n) { --tilt: -0.3deg; }
.fiche:nth-child(4n) { --tilt: 1deg; }
.fiche:hover, .fiche:focus-within { transform: rotate(0deg) translateY(-3px); }
.fiche-inner { display: grid; height: 100%; }
.fiche-face {
  --rule: 26px;
  grid-area: 1 / 1; display: flex; flex-direction: column; min-height: 236px; margin: 0; padding: 0 20px 16px; border: 0; border-radius: 4px;
  font: inherit; text-align: left; color: var(--ink);
  background: #fffdf6 repeating-linear-gradient(transparent 0 calc(var(--rule) - 1px), rgba(45, 67, 161, 0.15) calc(var(--rule) - 1px) var(--rule));
  box-shadow: 0 1px 0 rgba(22, 33, 58, 0.05), 0 16px 30px -20px rgba(22, 33, 58, 0.5);
}
.fiche-verso { visibility: hidden; }
.fiche.is-flipped .fiche-recto { visibility: hidden; }
.fiche.is-flipped .fiche-verso { visibility: visible; }
.fiche-recto { position: relative; cursor: pointer; }
/* Point d'interrogation au stylo rouge dans le blanc de la fiche (décoratif, sans texte pour les lecteurs d'écran) */
.fiche-recto::after {
  content: "?"; content: "?" / ""; position: absolute; right: 24px; bottom: 18px; font-family: var(--hand); font-size: 5.2rem; font-weight: 600; line-height: 1;
  color: var(--red); opacity: 0.13; transform: rotate(10deg); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease;
}
.fiche-recto:hover::after { opacity: 0.32; transform: rotate(0deg) scale(1.05); }
.fiche-recto:focus-visible, .fiche-back:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.fiche-verso:focus { outline: none; }
.fiche-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; height: calc(var(--rule) * 2); margin: 0 -20px; padding: 0 20px;
  border-bottom: 2px solid rgba(200, 16, 46, 0.55); border-radius: 4px 4px 0 0; background: #fffdf6;
}
.fiche-label { font-family: var(--hand); font-size: 1.4rem; font-weight: 600; line-height: 1; color: var(--red); }
.fiche-question { display: block; padding-top: var(--rule); font-family: var(--serif); font-size: 1.22rem; font-weight: 700; line-height: var(--rule); }
.fiche-turn { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: var(--rule); font-family: var(--hand); font-size: 1.3rem; font-weight: 600; line-height: var(--rule); color: var(--ink-soft); }
.fiche-turn .icon { width: 17px; height: 17px; transition: transform 0.3s ease; }
.fiche-recto:hover .fiche-turn { color: var(--red); }
.fiche-recto:hover .fiche-turn .icon { transform: rotate(-50deg); }
.fiche-answer { padding-top: var(--rule); font-size: 0.95rem; line-height: var(--rule); color: var(--ink-soft); }
.fiche-answer p { margin: 0; }
.fiche-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin-top: auto; padding-top: var(--rule); font-size: 0.86rem; font-weight: 650; }
.fiche-back, .fiche-chat { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; color: var(--ink-soft); text-decoration: none; cursor: pointer; }
.fiche-back:hover { color: var(--ink); }
.fiche-chat { color: var(--brand); }
.fiche-chat:hover { text-decoration: underline; }
.fiche-back .icon, .fiche-chat .icon { width: 16px; height: 16px; }
/* Cachet : double cadre à l'encre bleue, grain d'encre irrégulier (bruit en masque) */
.fiche-stamp, .receipt-stamp {
  flex: none; max-width: 62%; padding: 5px 10px; border: 2.5px solid currentColor; border-radius: 5px;
  font: 800 0.75rem/1.15 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: 0.1em; text-align: center; text-transform: uppercase;
  color: var(--stamp); opacity: 0.86; mix-blend-mode: multiply; transform: rotate(-7deg);
  box-shadow: inset 0 0 0 2px #fffdf6, inset 0 0 0 3.5px currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 2.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 2.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
/* Fiche vierge : la question qui manque, à écrire soi-même */
.fiche-blank .fiche-face { background-color: rgba(255, 253, 246, 0.55); box-shadow: none; outline: 2px dashed rgba(22, 33, 58, 0.2); outline-offset: -2px; }
.fiche-blank .fiche-head { background: transparent; }
.fiche-blank .fiche-question { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--hand); font-size: 1.65rem; font-weight: 600; color: var(--stamp); }
.fiche-blank .fiche-question .icon { width: 20px; height: 20px; }
.fiche-blank .fiche-hint { margin: 0; font-size: 0.95rem; line-height: var(--rule); color: var(--ink-soft); }
.fiche-blank .button { align-self: flex-start; margin-top: auto; }

/* Pied de page */
.footer { position: relative; padding: 48px 0 max(24px, env(safe-area-inset-bottom)); background: var(--ink); color: rgba(255, 255, 255, 0.78); font-size: 0.95rem; }
.footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--red) 33.3%, var(--yellow) 33.3% 66.6%, var(--flag-green) 66.6%); }
.footer a, .footer .link-button { color: rgba(255, 255, 255, 0.88); text-decoration: none; }
.footer a:hover, .footer .link-button:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.footer nav, .footer-grid > div { display: grid; align-content: start; gap: 8px; }
.brand-footer { color: #fff; }
.contacts { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.contacts li { display: flex; align-items: center; gap: 10px; }
.contacts .icon { width: 18px; height: 18px; color: var(--yellow); }
.copyright { margin-top: 30px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.85rem; }

/* Accès à l'espace d'une école */
.login { width: min(440px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 18px; box-shadow: var(--shadow); }
.login::backdrop { background: rgba(22, 33, 58, 0.55); backdrop-filter: blur(2px); }
.login-form { display: grid; gap: 14px; padding: 24px; }
.login-head { display: flex; align-items: center; gap: 12px; }
.login-head .badge-icon { margin: 0; }
.login-head h2 { flex: 1; margin: 0; font-size: 1.35rem; }
.school-field { display: flex; flex-wrap: wrap; align-items: stretch; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.school-field input { flex: 1 1 7em; min-width: 0; border: 0; border-radius: 0; }
.school-field input:focus { box-shadow: none; }
.school-field:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(252, 209, 22, 0.45); }
.school-field span { display: flex; flex: 1 1 auto; align-items: center; min-width: 0; min-height: 36px; padding: 0 12px; background: var(--paper-deep); color: var(--ink-soft); font-weight: 400; overflow-wrap: anywhere; }
.hint { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }

/* Le guide du fondateur : couverture en relief, livre feuilletable, demande de téléchargement */
.guide-section { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-deep) 100%); }
.documents { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 12px; }
.document { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
.book-cover {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; justify-self: center; width: 220px; aspect-ratio: 148 / 210;
  padding: 22px 20px 20px; border: 0; border-radius: 4px 10px 10px 4px; background: var(--ink); color: #fff; text-align: left; cursor: pointer;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0, rgba(255, 255, 255, 0.08) 10px, transparent 18px), radial-gradient(260px 200px at 80% 10%, rgba(252, 209, 22, 0.16), transparent 70%);
  box-shadow: 6px 6px 0 -1px #f3eee2, 7px 7px 0 0 var(--line), 12px 12px 0 -1px #f3eee2, 13px 13px 0 0 var(--line), 0 30px 40px -20px rgba(22, 33, 58, 0.6);
  transform: perspective(900px) rotateY(-14deg) rotateX(2deg); transition: transform 0.35s ease;
}
.book-cover:hover, .book-cover:focus-visible { transform: perspective(900px) rotateY(-4deg) rotateX(0deg) translateY(-4px); }
.cover-flag { display: flex; height: 5px; margin: -22px -20px 0; border-radius: 4px 10px 0 0; overflow: hidden; }
.cover-flag i { flex: 1; }
.cover-flag i:nth-child(1) { background: var(--red); }
.cover-flag i:nth-child(2) { background: var(--yellow); }
.cover-flag i:nth-child(3) { background: var(--flag-green); }
.cover-brand { margin-top: 18px; font-family: var(--serif); font-weight: 700; font-size: 0.95rem; color: var(--yellow); }
.cover-title { font-family: var(--serif); font-weight: 700; font-size: 1.45rem; line-height: 1.12; }
.cover-label { font-family: var(--hand); font-size: 1.3rem; color: rgba(255, 255, 255, 0.82); }
.document-text h3 { font-family: var(--serif); font-size: 1.6rem; }
.document-text p { color: var(--ink-soft); }
.document-text .actions { margin: 20px 0 12px; }
.document-note { margin: 0; font-size: 0.9rem; }
.trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.book { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #12161f; color: #fff; }
.book::backdrop { background: rgba(10, 14, 22, 0.8); }
.book[open] { display: flex; flex-direction: column; }
.book-bar { display: flex; align-items: center; gap: 14px; padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.book-title { flex: 1; min-width: 0; margin: 0; overflow: hidden; font-family: var(--serif); font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.book-count { margin: 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.7); font-variant-numeric: tabular-nums; white-space: nowrap; }
.book-actions { display: flex; align-items: center; gap: 8px; }
.book-actions .button { min-height: 38px; padding: 0 14px; }
.icon-button-light { color: rgba(255, 255, 255, 0.8); }
.icon-button-light:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.book-stage { position: relative; display: flex; flex: 1; align-items: center; justify-content: center; min-height: 0; padding: 12px calc(56px + env(safe-area-inset-right)) 12px calc(56px + env(safe-area-inset-left)); touch-action: pan-y; user-select: none; }
/* Pas de filter ici : il aplatirait la 3D de la feuille qui tourne (verso invisible) */
.book-spread { display: flex; perspective: 2400px; cursor: pointer; }
.book-page { position: relative; background: #fff; transform-style: preserve-3d; box-shadow: 0 24px 40px -16px rgba(0, 0, 0, 0.6); }
.book-page canvas { display: block; }
.book-page.is-empty { background: transparent; box-shadow: none; }
/* Pliure au dos du livre, par-dessus la page */
.book-page-left:not(.is-empty)::after, .book-page-right:not(.is-empty)::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.book-page-left:not(.is-empty)::after { background: linear-gradient(to left, rgba(0, 0, 0, 0.16), transparent 5%); }
.book-page-right:not(.is-empty)::after { background: linear-gradient(to right, rgba(0, 0, 0, 0.16), transparent 5%); }
.book-leaf { position: absolute; inset: 0; z-index: 2; transform-style: preserve-3d; will-change: transform; }
.book-face { position: absolute; inset: 0; overflow: hidden; background: #fff; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.book-face::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.12), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.08)); pointer-events: none; }
.book-face-back { transform: rotateY(180deg); }
.book-face.is-blank { background: var(--paper); }
.book-nav { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; }
.book-nav:hover:not(:disabled) { background: rgba(255, 255, 255, 0.22); }
.book-nav:disabled { opacity: 0.25; cursor: default; }
.book-nav:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.book-prev { left: calc(8px + env(safe-area-inset-left)); }
.book-next { right: calc(8px + env(safe-area-inset-right)); }
.book-status { position: absolute; inset: auto 0 50%; margin: 0; text-align: center; color: rgba(255, 255, 255, 0.75); }
.book-hint { margin: 0; padding: 8px 16px max(14px, env(safe-area-inset-bottom)); text-align: center; font-size: 0.82rem; color: rgba(255, 255, 255, 0.55); }

/* Angle du trait autour d'une réponse choisie, animable */
@property --sweep { syntax: "<angle>"; inherits: false; initial-value: 360deg; }

/* Mouvement : joué une fois, quand la scène entre à l'écran (classe .motion posée par la page) ;
   sans mouvement (téléphone qui en demande moins, script absent), l'état final s'affiche directement */
@media (prefers-reduced-motion: no-preference) {
  .motion .chaos { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
  .motion [data-scene="hero"] .doc { opacity: 0.2; transform: rotate(-1.6deg) scale(0.92); filter: blur(2px); }
  .motion [data-scene="hero"] tbody tr, .motion [data-scene="hero"] .reveal, .motion [data-scene="hero"] .doc-foot { opacity: 0; transform: translateY(6px); }
  .motion [data-scene="hero"] .stamp { opacity: 0; transform: rotate(-16deg) scale(1.9); }
  .motion [data-scene="hero"] .annotation span, .motion [data-scene="hero"] figcaption { opacity: 0; }
  .motion [data-scene="hero"] .annotation-arrow path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .motion [data-scene="hero"].is-visible .scrap { animation: gather 2.5s cubic-bezier(0.55, 0, 0.3, 1) var(--d) both; }
  .motion [data-scene="hero"].is-visible .doc { animation: settle 0.9s ease-out 1.7s both; }
  .motion [data-scene="hero"].is-visible .shine { animation: shine 1.2s ease-in-out 2.3s both; }
  .motion [data-scene="hero"].is-visible tbody tr { animation: rise 0.35s ease-out calc(2.4s + var(--i) * 0.12s) both; }
  .motion [data-scene="hero"].is-visible .reveal-1 { animation: rise 0.45s ease-out 3.2s both; }
  .motion [data-scene="hero"].is-visible .reveal-2 { animation: rise 0.45s ease-out 3.45s both; }
  .motion [data-scene="hero"].is-visible .reveal-3 { animation: rise 0.45s ease-out 3.7s both; }
  .motion [data-scene="hero"].is-visible .doc-foot { animation: rise 0.45s ease-out 3.9s both; }
  .motion [data-scene="hero"].is-visible .stamp { animation: stamp 0.55s cubic-bezier(0.3, 0, 0.2, 1.4) 4.2s both; }
  .motion [data-scene="hero"].is-visible .annotation-arrow path { animation: draw 0.6s ease-out 4.8s both; }
  .motion [data-scene="hero"].is-visible .annotation-arrow path + path { animation-delay: 5.3s; animation-duration: 0.25s; }
  .motion [data-scene="hero"].is-visible .annotation span { animation: rise 0.5s ease-out 5.1s both; }
  .motion [data-scene="hero"].is-visible figcaption { animation: rise 0.5s ease-out 5.4s both; }
  .motion .pulse-once { animation: pulse 1.2s ease-out 5.6s 1; }

  .motion [data-scene="strike"] .before s { background-size: 0% 2px; }
  .motion [data-scene="strike"] .after { opacity: 0; transform: translateX(-10px); }
  .motion [data-scene="strike"].is-visible .before s { background-size: 100% 2px; transition: background-size 0.8s ease-in-out 0.3s; }
  .motion [data-scene="strike"].is-visible .after { opacity: 1; transform: none; transition: opacity 0.5s ease-out 1s, transform 0.5s ease-out 1s; }

  .motion .figure > * { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .motion .is-visible .figure > * { animation: draw 0.9s ease-out both; }
  .motion .is-visible .figure > :nth-child(2) { animation-delay: 0.2s; }
  .motion .is-visible .figure > :nth-child(3) { animation-delay: 0.4s; }
  .motion .is-visible .figure > :nth-child(4) { animation-delay: 0.55s; }
  .motion .is-visible .figure > :nth-child(5) { animation-delay: 0.7s; }
  .motion .scene .mini-chip, .motion [data-scene="grades"] .mini-grades b { opacity: 0; }
  .motion [data-scene="grades"].is-visible .mini-grades b { animation: pop 0.3s ease-out calc(0.9s + var(--i) * 0.35s) both; }
  .motion [data-scene="grades"].is-visible .mini-chip { animation: rise 0.4s ease-out 2.5s both; }
  .motion [data-scene="sms"] .sms { opacity: 0; transform: translateY(24px); }
  .motion [data-scene="sms"].is-visible .feature-phone { animation: buzz 0.22s ease-in-out 0.9s 4; }
  .motion [data-scene="sms"].is-visible .sms { animation: rise 0.5s ease-out 1.8s both; }
  .motion [data-scene="cash"] .bars i { transform: scaleY(0); }
  .motion [data-scene="cash"].is-visible .bars i { animation: grow 0.5s ease-out calc(0.6s + var(--i) * 0.12s) both; }
  .motion [data-scene="cash"].is-visible .mini-chip { animation: rise 0.4s ease-out 2.6s both; }

  .motion [data-scene="verify"] .scan-state { display: flex; }
  .motion [data-scene="verify"] .ok-state { opacity: 0; }
  .motion [data-scene="verify"].is-visible .scan-beam { animation: scan 1s ease-in-out 0.3s 2 alternate both; }
  .motion [data-scene="verify"].is-visible .scan-state { animation: vanish 0.3s ease-in 2.4s both; }
  .motion [data-scene="verify"].is-visible .ok-state { animation: rise 0.4s ease-out 2.6s both; }
  .motion [data-scene="verify"].is-visible .verify-badge { animation: pop 0.45s ease-out 2.8s both; }

  .motion .module-panel:not([hidden]) { animation: rise-in 0.35s ease-out both; }

  /* Fiches : distribuées sur la table quand elles entrent à l'écran (une rangée de gauche à droite) ;
     retournées en 3D, la face visible change à mi-course */
  .motion .fiche:not(.is-visible) { opacity: 0; }
  .motion .fiche.is-visible { animation: deal 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) calc(var(--n) * 90ms) backwards; }
  .motion .fiche-inner { transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.45, 0, 0.55, 1); }
  .motion .fiche-face { -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: visibility 0s linear 0.3s; }
  .motion .fiche-verso { transform: rotateY(180deg); }
  .motion .fiche.is-flipped .fiche-inner { transform: rotateY(180deg); }
  .motion .fiche.is-flipped .fiche-stamp { animation: stamp-small 0.5s cubic-bezier(0.3, 0, 0.2, 1.4) 0.45s both; }

  /* Demande : le trait s'enroule autour de la réponse choisie ; la fiche reçue se tamponne */
  .motion .chip input:checked + span::after {
    -webkit-mask: conic-gradient(from -100deg, #000 var(--sweep), transparent 0); mask: conic-gradient(from -100deg, #000 var(--sweep), transparent 0);
    animation: encircle 0.45s ease-out both;
  }
  .motion .demo-receipt:not([hidden]) { animation: rise-in 0.35s ease-out both; }
  .motion .demo-receipt:not([hidden]) .receipt-stamp { animation: stamp-small 0.5s cubic-bezier(0.3, 0, 0.2, 1.4) 0.3s both; }

  .motion [data-reveal], .motion [data-reveal-children] > * { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; transition-delay: calc(var(--n, 0) * 90ms); }
  .motion [data-reveal].is-visible, .motion [data-reveal-children].is-visible > * { opacity: 1; transform: none; }

  @supports (animation-timeline: view()) {
    .motion .hero-text { animation: drift linear both; animation-timeline: view(); animation-range: exit 0% exit 90%; }
  }

  @keyframes gather {
    0% { opacity: 0; transform: translate(calc(var(--x) * 1.15), calc(var(--y) * 1.15)) rotate(var(--r)); }
    12% { opacity: 1; }
    32% { transform: translate(var(--x), calc(var(--y) + 10px)) rotate(calc(var(--r) * 0.5)); }
    55% { opacity: 1; transform: translate(calc(var(--x) * 0.96), calc(var(--y) - 8px)) rotate(calc(var(--r) * 1.2)); }
    100% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.25); }
  }
  @keyframes settle { to { opacity: 1; transform: rotate(-1.6deg); filter: none; } }
  @keyframes shine { 0% { opacity: 1; background-position: 150% 0; } 100% { opacity: 0; background-position: -50% 0; } }
  @keyframes stamp { 0% { opacity: 0; transform: rotate(-16deg) scale(1.9); } 70% { opacity: 0.9; transform: rotate(-16deg) scale(0.94); } 100% { opacity: 0.78; transform: rotate(-16deg) scale(1); } }
  @keyframes rise { to { opacity: 1; transform: none; } }
  @keyframes stamp-small { 0% { opacity: 0; transform: rotate(-7deg) scale(2.1); } 70% { opacity: 0.92; transform: rotate(-7deg) scale(0.94); } 100% { opacity: 0.86; transform: rotate(-7deg) scale(1); } }
  @keyframes deal { from { opacity: 0; transform: translate(-24px, -36px) rotate(calc(var(--tilt) - 9deg)); } to { opacity: 1; transform: rotate(var(--tilt)); } }
  @keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes pop { 0% { opacity: 0; transform: scale(0.5); } 70% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: none; } }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes encircle { from { --sweep: 0deg; } to { --sweep: 360deg; } }
  @keyframes grow { to { transform: scaleY(1); } }
  @keyframes buzz { 0%, 100% { transform: none; } 25% { transform: translateX(-3px) rotate(-2deg); } 75% { transform: translateX(3px) rotate(2deg); } }
  @keyframes scan { from { top: 10px; } to { top: calc(100% - 13px); } }
  @keyframes vanish { to { opacity: 0; visibility: hidden; } }
  @keyframes drift { to { transform: translateY(-40px); opacity: 0.55; } }
  @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(22, 33, 58, 0.35); } 100% { box-shadow: 0 0 0 14px rgba(22, 33, 58, 0); } }
}

@media (max-width: 639px) {
  .motion .chaos { transform: scale(0.68); }
  .stamp { width: 90px; height: 90px; right: 14px; bottom: -28px; }
  /* Barre du haut au téléphone : la marque, « Mon espace » et le menu ; « Demander une démo » passe dans le menu */
  .topbar-inner { gap: 8px; }
  .topbar-actions { gap: 6px; }
  .topbar .button { padding: 0 12px; }
  .topbar.is-open .menu .menu-extra { display: flex; }
  .menu .menu-extra .menu-demo { display: inline-flex; }
}
/* Petit téléphone : la marque sans son pictogramme ; sous 360 px, « Accéder à mon espace » passe aussi dans le menu */
@media (max-width: 479px) {
  .topbar .brand-mark { display: none; }
}
/* Sans le cadenas de « Mon espace », la barre tient aussi avec le texte agrandi du téléphone (112 %) */
@media (max-width: 419px) {
  .topbar-actions .button-ghost .icon { display: none; }
}
@media (max-width: 359px) {
  .topbar-actions { display: none; }
  .menu-toggle { margin-left: auto; }
  .menu .menu-extra .menu-login { display: inline-flex; }
}
@media (min-width: 480px) {
  .module-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module-panel { padding: 24px; }
}
@media (min-width: 640px) {
  .document { grid-template-columns: 260px minmax(0, 1fr); }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-row { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .demo-card { --margin: 44px; --pad: 26px; }
  .hide-small { display: inline; }
  .button.hide-small { display: inline-flex; }
  .show-small { display: none; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compare-row { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .compare-row h3 { grid-column: 1 / -1; }
}
/* « Mon espace » en court tant que la barre manque de place (polices larges de Linux comprises) : jusqu'à
   768 px, et à côté du menu des sections à partir de 1280 px */
@media (min-width: 640px) and (max-width: 767px) {
  .topbar .button-ghost .hide-small { display: none; }
  .topbar .button-ghost .show-small { display: inline; }
}
@media (min-width: 1280px) {
  .menu { display: flex; }
  .menu-toggle { display: none; }
  .topbar .button-ghost .hide-small { display: none; }
  .topbar .button-ghost .show-small { display: inline; }
}
/* Menu du téléphone et de la tablette : les sections sous la barre, en lignes de cahier ; deux ou trois
   colonnes dès que la largeur le permet (téléphone couché) */
@media (max-width: 1279px) {
  .topbar.is-open .menu {
    position: absolute; top: calc(100% + 1px); left: 0; right: 0; z-index: 1;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 0 28px; align-content: start;
    max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); margin: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 4px max(16px, env(safe-area-inset-right)) 18px max(16px, env(safe-area-inset-left));
    background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 26px 30px -26px rgba(22, 33, 58, 0.5);
  }
  .menu a:not(.button) {
    display: flex; align-items: center; min-height: 48px; border-bottom: 1px dashed var(--line);
    color: var(--ink); font-size: 1.02rem; font-weight: 600; white-space: normal;
  }
  .menu .menu-extra { grid-column: 1 / -1; flex-wrap: wrap; gap: 10px; padding-top: 18px; }
  .menu .menu-extra .button { min-height: 48px; padding: 0 20px; font-size: 1rem; }
}
@media (min-width: 980px) {
  .hero { padding: 76px 0 96px; }
  .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 64px; }
  .split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 64px; }
  .split-demo { grid-template-areas: "intro card" "next card"; grid-template-rows: auto 1fr; row-gap: 36px; }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .badges { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .section { padding: 92px 0; }
  .footer-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); }
  .compare-head { display: grid; grid-template-columns: 200px repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0 18px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
  .compare-head span:first-child { grid-column: 2; }
  .compare-row { grid-template-columns: 200px repeat(2, minmax(0, 1fr)); gap: 16px; align-items: center; }
  .compare-row h3 { grid-column: auto; }
  .modules { grid-template-columns: 330px minmax(0, 1fr); align-items: start; }
  .module-tabs { grid-template-columns: minmax(0, 1fr); }
  .module-tabs [role="tab"] { padding: 14px 16px; font-size: 1rem; }
  .module-tabs [role="tab"] small { display: block; margin-top: 2px; font-size: 0.82rem; color: var(--ink-soft); }
  .module-tabs [role="tab"][aria-selected="true"] small { color: rgba(255, 255, 255, 0.72); }
  .module-panel { padding: 32px 36px; }
  .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Écran tactile (pointer: coarse, comme la variante touch: de l'application) : cibles de 44 px, liens du
   menu et du pied de page compris ; l'ordinateur garde sa mise en page */
@media (pointer: coarse) {
  .button, .topbar .button, .book-actions .button { min-height: 44px; }
  .brand { min-height: 44px; }
  .icon-button { width: 44px; height: 44px; }
  .chip span { min-height: 44px; }
  .module-tabs [role="tab"] { min-height: 48px; }
  .download-sum summary { padding: 12px 0; }
  .receipt-again { min-height: 44px; }
  .fiche-foot { padding-top: 0; row-gap: 0; }
  .fiche-back, .fiche-chat { align-items: flex-end; min-height: calc(var(--rule) * 2); line-height: var(--rule); }
  .fiche-back .icon, .fiche-chat .icon { margin-bottom: calc((var(--rule) - 16px) / 2); }
  .select-list [role="option"] { min-height: 44px; }
  .footer nav, .footer .footer-actions { gap: 0; }
  .footer nav a, .footer-actions a, .footer-actions .link-button { display: flex; align-items: center; min-height: 44px; }
  .contacts { gap: 0; }
  .contacts a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (pointer: coarse) and (min-width: 1280px) {
  .menu a:not(.button) { display: inline-flex; align-items: center; min-height: 44px; }
}
/* Téléphone couché : la consigne du livre laisse sa hauteur aux pages */
@media (orientation: landscape) and (max-height: 500px) {
  .book-hint { display: none; }
}

/* Téléchargement secondaire (APK Android sous les étapes de l'écran d'accueil) */
.download-secondary { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); }
.download-lead { margin: 0 0 10px; color: var(--ink-soft); }