/* InZeDoku Marketing — design tokens alignés sur l'application (encre, crème, ambre, ciel)
   et sur la structure du site InZeWishBox (même squelette, même bascule de thème, même
   sélecteur de langue). Palette échantillonnée sur les captures d'écran de l'app. */

:root {
    --brand-ink: #142c3d;
    --brand-cream: #fff6e4;
    --brand-amber: #ffbe24;
    --brand-sky: #5fd3f7;
    --brand-blue: #276db0;
    --brand-blue-soft: #4399cb;
    --brand-mint: #a6cec5;
    --brand-lavender: #98b2e3;
    --brand-rose: #fed2c6;
    --brand-rose-strong: #f06d8a;
    --brand-pink: #f48fb9;
    --brand-grey: #7a7a7a;

    /* Tuiles pastel de l'accueil */
    --pastel-yellow: #fede63;
    --pastel-pink: #fed2c6;
    --pastel-blue: #cfe3f7;
    --pastel-green: #cdeedd;
    --pastel-peach: #ffe1c4;

    --bg: #f6f4ee;
    --bg-elevated: #ffffff;
    --bg-sunken: #eeeae0;
    --bg-cream: #fff6e4;
    --border: #e3ded2;
    --border-strong: #142c3d;
    --text-primary: #142c3d;
    --text-secondary: #55697a;
    --text-tertiary: #8a9aa8;

    --accent: #276db0;
    --accent-on: #ffffff;
    --cta: #ffbe24;
    --on-cta: #142c3d;
    --cta-alt: #5fd3f7;

    --success: #0aa37f;
    --warning: #e08e0b;
    --danger: #d9534f;
    --info: #1f6feb;

    --hero-gradient: linear-gradient(160deg, #a6cec5 0%, #98b2e3 28%, #5b96bb 62%, #276db0 100%);
    --hero-text: #fff6e4;
    --hero-muted: rgba(255, 246, 228, 0.86);

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    --shadow-card: 0 1px 2px rgba(20, 44, 61, 0.05), 0 4px 12px rgba(20, 44, 61, 0.07);
    --shadow-elevated: 0 4px 12px rgba(20, 44, 61, 0.10), 0 24px 48px rgba(20, 44, 61, 0.10);
    --shadow-ink: 0 3px 0 var(--brand-ink);

    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", "Liberation Mono", monospace;
}

/* Thème sombre — UNIQUEMENT sur choix explicite via le bouton ([data-theme="dark"]).
   Le thème clair est le défaut : on ne suit pas automatiquement le sombre de l'OS.
   Comme dans l'app, le sombre n'est pas une inversion : les lavis et les cadres sont recalibrés. */
:root[data-theme="dark"] {
    --bg: #0f1b26;
    --bg-elevated: #16252f;
    --bg-sunken: #0b141c;
    --bg-cream: #1b2a36;
    --border: #253746;
    --border-strong: #6f8ea6;
    --text-primary: #f2efe6;
    --text-secondary: #a9b7c2;
    --text-tertiary: #6f8290;
    --accent: #7cc4ff;
    --on-cta: #142c3d;
    --pastel-yellow: #4a4425;
    --pastel-pink: #4a3230;
    --pastel-blue: #23364a;
    --pastel-green: #21403a;
    --pastel-peach: #4a3a2a;
    --hero-gradient: linear-gradient(160deg, #2b4a58 0%, #23406a 30%, #163c66 65%, #0f2d4f 100%);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.4), 0 24px 48px rgba(0, 0, 0, 0.35);
    --shadow-ink: 0 3px 0 #06101a;
}

/* Bouton de bascule de thème (injecté par theme.js dans le header) */
.theme-toggle {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: var(--radius-pill);
    width: 38px;
    height: 38px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: var(--space-3);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.theme-toggle:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Groupe de contrôles header (lang switcher + theme toggle) — empêche le
   décalage visuel quand la nav change de largeur entre langues. */
.header-controls {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: var(--space-3);
    flex-shrink: 0;
}
.header-controls .theme-toggle { margin-left: 0; }

/* Sélecteur de langue (dropdown injecté par lang-switcher.js) */
.lang-switcher {
    position: relative;
    display: inline-block;
}

.lang-switcher-trigger {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: var(--radius-pill);
    height: 38px;
    min-width: 76px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.lang-switcher-trigger:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.lang-switcher-trigger:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.lang-switcher .lang-flag {
    display: inline-flex;
    width: 22px;
    height: 15px;
    line-height: 1;
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}

.lang-switcher .lang-flag svg {
    width: 100%;
    height: 100%;
    display: block;
}

.lang-switcher .lang-caret {
    font-size: 10px;
    opacity: 0.65;
    margin-left: 2px;
}

.lang-switcher-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-elevated);
    padding: var(--space-1);
    list-style: none;
    margin: 0;
    z-index: 50;
}

.lang-switcher-menu li { margin: 0; }

.lang-switcher-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    color: var(--text-primary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
}

.lang-switcher-menu a:hover {
    background: var(--bg-sunken);
}

.lang-switcher-menu a.is-current {
    background: var(--bg-sunken);
    color: var(--accent);
    font-weight: 700;
}

.lang-switcher-menu .lang-code {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    min-width: 22px;
}

.lang-switcher-menu a.is-current .lang-code {
    color: var(--accent);
}

.lang-switcher-menu .lang-name {
    flex: 1;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--bg);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 120ms ease;
}

a:hover {
    border-bottom-color: var(--accent);
}

img {
    max-width: 100%;
    height: auto;
}

/* Header */

.site-header {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: saturate(140%) blur(8px);
}

.site-header-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.brand-group {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1;
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: 800;
    color: var(--text-primary);
    font-size: 18px;
    letter-spacing: -0.01em;
}

.brand:hover {
    border-bottom-color: transparent;
}

/* Le Z ambre et le e rose du logotype de l'application */
.brand .brand-z {
    color: var(--brand-amber);
}

.brand .brand-e {
    color: var(--brand-pink);
}

.brand-publisher {
    margin-left: 48px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    letter-spacing: 0.02em;
}

.brand-publisher:hover {
    color: var(--accent);
    border-bottom-color: transparent;
}

.brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: url("assets/logo.svg") center/cover no-repeat;
    /* Image-replacement : la « Z » du HTML sert de fallback texte mais
       doit être invisible quand l'image charge. */
    text-indent: -9999px;
    overflow: hidden;
    display: inline-block;
    line-height: 0;
    flex-shrink: 0;
}

.site-nav {
    display: flex;
    gap: var(--space-5);
    flex-wrap: wrap;
    align-items: center;
}

.site-nav a {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    border-bottom: none;
    white-space: nowrap;
}

.site-nav a:hover {
    color: var(--text-primary);
}

/* L'allemand a des libellés plus longs : la nav se resserre pour tenir sur une ligne à 1280 px,
   et le titre du hero descend d'un cran pour éviter les phrases sur trois lignes. */
html[lang="de"] .site-nav {
    gap: var(--space-4);
}

html[lang="de"] .hero h1 {
    font-size: clamp(32px, 4.6vw, 54px);
}

@media (max-width: 860px) {
    /* Sur petit écran la nav passe sous la marque, en rangée défilante :
       on garde l'accès à toutes les sections sans menu hamburger. */
    .site-header-inner {
        flex-wrap: wrap;
        row-gap: var(--space-2);
    }
    .site-nav {
        order: 3;
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: var(--space-4);
        padding-bottom: var(--space-1);
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .site-nav::-webkit-scrollbar { display: none; }
    .brand-publisher { margin-left: 48px; }
}

/* Buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.btn:hover {
    border-bottom-color: transparent;
}

/* Pilule « Jouer » de l'application : ambre, encre, avec une tranche d'encre en dessous */
.btn-primary {
    background: var(--cta);
    color: var(--on-cta);
    border-color: var(--brand-ink);
    box-shadow: var(--shadow-ink);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 0 var(--brand-ink), var(--shadow-card);
    border-bottom-color: var(--brand-ink);
}

/* Pilule « Code » : bleu ciel */
.btn-sky {
    background: var(--cta-alt);
    color: var(--brand-ink);
    border-color: var(--brand-ink);
    box-shadow: var(--shadow-ink);
}

.btn-sky:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 0 var(--brand-ink), var(--shadow-card);
    border-bottom-color: var(--brand-ink);
}

.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.btn-secondary:hover {
    background: var(--bg-elevated);
    border-bottom-color: var(--border-strong);
}

/* Variante pour fond sombre / dégradé du hero */
.btn-ghost {
    background: rgba(255, 246, 228, 0.12);
    color: var(--hero-text);
    border-color: rgba(255, 246, 228, 0.7);
}

.btn-ghost:hover {
    background: rgba(255, 246, 228, 0.22);
    border-bottom-color: rgba(255, 246, 228, 0.7);
}

.btn-small {
    padding: 8px 16px;
    font-size: 14px;
}

.btn .btn-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Layout */

main {
    flex: 1;
    width: 100%;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--space-5);
}

.container-narrow {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--space-5);
}

section {
    padding: var(--space-9) 0;
    /* Un lien d'ancre s'arrête sous l'en-tête collant, pas derrière lui. */
    scroll-margin-top: 72px;
}

@media (max-width: 860px) {
    section {
        scroll-margin-top: 120px;
    }
}

@media (max-width: 720px) {
    section {
        padding: var(--space-7) 0;
    }
}

.section-eyebrow {
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin-bottom: var(--space-3);
}

.section-title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-4);
}

.section-lead {
    font-size: 18px;
    color: var(--text-secondary);
    max-width: 680px;
    margin-bottom: var(--space-6);
}

.section-lead strong,
.feature-desc strong,
.mode-desc strong,
.geo-desc strong,
.step-desc strong {
    color: var(--text-primary);
}

/* Hero — le dégradé bleu de l'application, texte crème, pilules Jouer / Code */

.hero {
    padding: var(--space-8) 0 var(--space-8);
    background: var(--hero-gradient);
    color: var(--hero-text);
    position: relative;
    overflow: hidden;
}

.hero::after {
    /* halo doux, comme la lumière en haut de l'accueil */
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, 0.22), transparent 55%);
    pointer-events: none;
}

.hero .container {
    position: relative;
    z-index: 1;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--space-7);
    align-items: center;
}

@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .hero-copy .hero-cta,
    .hero-copy .hero-trust {
        justify-content: center;
    }
}

.hero h1 {
    font-size: clamp(34px, 5vw, 58px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0 0 var(--space-5);
    color: var(--hero-text);
}

.hero h1 .accent {
    color: var(--brand-amber);
}

/* Ligne tournante du hero : six phrases s'enchaînent en fondu, en alternant sudoku et
   calcudoku, synchronisées avec les captures empilées dans le téléphone (mêmes durées,
   mêmes délais). Grille empilée : la hauteur est celle de la phrase la plus haute, donc
   aucun saut de mise en page. 6 × 3 s = 18 s — 0,8 s de fondu entrant, 2,2 s pleinement
   visible, 0,8 s de fondu sortant qui chevauche l'entrée de la phrase suivante. */
.rotating-line {
    display: grid;
}

.rotating-line .word {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(8px);
    animation: heroRotate 18s ease-in-out infinite;
}

.rotating-line .word:nth-child(1) { animation-delay: 0s; }
.rotating-line .word:nth-child(2) { animation-delay: 3s; }
.rotating-line .word:nth-child(3) { animation-delay: 6s; }
.rotating-line .word:nth-child(4) { animation-delay: 9s; }
.rotating-line .word:nth-child(5) { animation-delay: 12s; }
.rotating-line .word:nth-child(6) { animation-delay: 15s; }

@keyframes heroRotate {
    0%      { opacity: 0; transform: translateY(8px); }
    4.44%   { opacity: 1; transform: translateY(0); }
    16.67%  { opacity: 1; transform: translateY(0); }
    21.11%  { opacity: 0; transform: translateY(-8px); }
    100%    { opacity: 0; transform: translateY(-8px); }
}

/* Les captures du téléphone suivent exactement la même cadence que les phrases. */
.phone-slides {
    display: grid;
}

.phone-slides .slide {
    grid-area: 1 / 1;
    opacity: 0;
    animation: heroFade 18s ease-in-out infinite;
}

.phone-slides .slide:nth-child(1) { animation-delay: 0s; }
.phone-slides .slide:nth-child(2) { animation-delay: 3s; }
.phone-slides .slide:nth-child(3) { animation-delay: 6s; }
.phone-slides .slide:nth-child(4) { animation-delay: 9s; }
.phone-slides .slide:nth-child(5) { animation-delay: 12s; }
.phone-slides .slide:nth-child(6) { animation-delay: 15s; }

@keyframes heroFade {
    0%      { opacity: 0; }
    4.44%   { opacity: 1; }
    16.67%  { opacity: 1; }
    21.11%  { opacity: 0; }
    100%    { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .rotating-line .word,
    .phone-slides .slide { animation: none; opacity: 0; }
    .rotating-line .word:first-child,
    .phone-slides .slide:first-child { opacity: 1; transform: none; }
}

.hero p.lead {
    font-size: clamp(17px, 2vw, 20px);
    color: var(--hero-muted);
    max-width: 600px;
    margin: 0 0 var(--space-6);
}

.hero p.lead strong {
    color: var(--hero-text);
}

@media (max-width: 900px) {
    .hero p.lead { margin-left: auto; margin-right: auto; }
}

/* Badge crème cerné d'encre — la pilule de l'application */
.hero-badge {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-5);
    padding: 8px 18px;
    background: var(--brand-cream);
    color: var(--brand-ink);
    border: 2px solid var(--brand-ink);
    border-radius: var(--radius-pill);
    font-size: clamp(13px, 1.4vw, 15px);
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    box-shadow: var(--shadow-ink);
}

.hero-badge .badge-sep {
    opacity: 0.45;
}

/* Deux publics, deux pilules crème : seul pour le plaisir, en classe pour apprendre */
.hero-audience {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-5);
}

.hero-audience .chip {
    font-size: 14px;
    padding: 6px 14px;
    background: var(--brand-cream);
    color: var(--brand-ink);
    border-color: var(--brand-ink);
}

@media (max-width: 900px) {
    .hero-audience { justify-content: center; }
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.hero-trust {
    margin-top: var(--space-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    color: var(--hero-muted);
    font-size: 14px;
}

.hero-trust span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hero-note {
    margin-top: var(--space-4);
    font-size: 13px;
    color: var(--hero-muted);
}

.hero-note a {
    color: var(--hero-text);
    text-decoration: underline;
}

/* Capture d'écran dans un « téléphone » : cadre d'encre, coins ronds */
.hero-visual {
    display: flex;
    justify-content: center;
}

.phone {
    width: min(100%, 300px);
    border-radius: var(--radius-xl);
    border: 3px solid var(--brand-ink);
    overflow: hidden;
    box-shadow: var(--shadow-elevated), 0 6px 0 var(--brand-ink);
    background: var(--brand-ink);
    transform: rotate(-2deg);
}

.phone img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 900px) {
    .phone { transform: none; width: min(100%, 260px); }
}

@media (prefers-reduced-motion: reduce) {
    .phone { transform: none; }
}

/* Modes — cartes avec capture d'écran */

.modes {
    background: var(--bg-elevated);
}

.mode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.mode-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
}

.mode-shot {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: top;
    display: block;
    border-radius: var(--radius-md);
    border: 2px solid var(--brand-ink);
    margin-bottom: var(--space-4);
}

.mode-title {
    font-weight: 800;
    font-size: 18px;
    margin-bottom: var(--space-2);
}

.mode-title small {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
    margin-bottom: 2px;
}

.mode-desc {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.55;
    flex: 1;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--space-3);
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 700;
    background: var(--bg-cream);
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    white-space: nowrap;
}

.chip-soft {
    background: var(--bg-sunken);
    border-color: var(--border);
    color: var(--text-secondary);
}

/* Plateaux — cinq cartes avec dessin vectoriel */

.geo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.geo-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: center;
}

.geo-card img {
    width: 132px;
    height: 132px;
    display: block;
    margin: 0 auto var(--space-3);
}

.geo-title {
    font-weight: 800;
    margin-bottom: var(--space-1);
}

.geo-size {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: var(--space-2);
}

.geo-desc {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
}

/* Deux cartes larges (multidoku, fenêtres bonus) */
.option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.option-card {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--space-4);
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.option-card img {
    width: 120px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: 50% 45%;
    border-radius: var(--radius-md);
    border: 2px solid var(--brand-ink);
    display: block;
}

.option-title {
    font-weight: 800;
    margin-bottom: var(--space-1);
}

.option-desc {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 480px) {
    .option-card { grid-template-columns: 1fr; }
    .option-card img { width: 100%; aspect-ratio: 16 / 10; }
}

/* Photo de classe — cadre d'encre comme le téléphone du hero, recadrée en bandeau */
.classe-photo {
    margin: 0 0 var(--space-6);
}

.classe-photo picture,
.classe-photo img {
    display: block;
    width: 100%;
}

.classe-photo img {
    aspect-ratio: 2 / 1;
    object-fit: cover;
    object-position: center 42%;
    border-radius: var(--radius-xl);
    border: 3px solid var(--brand-ink);
    box-shadow: var(--shadow-elevated), 0 6px 0 var(--brand-ink);
}

.classe-photo figcaption {
    margin-top: var(--space-4);
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary);
}

@media (max-width: 720px) {
    .classe-photo img { aspect-ratio: 4 / 3; }
}

/* Steps */

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-5);
    margin-top: var(--space-6);
    counter-reset: stepc;
}

.step {
    counter-increment: stepc;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    position: relative;
}

.step::before {
    content: counter(stepc);
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    background: var(--brand-amber);
    color: var(--brand-ink);
    border: 2px solid var(--brand-ink);
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 0 0 4px var(--bg);
}

.step-title {
    font-weight: 700;
    margin-bottom: var(--space-2);
    padding-right: 56px;
    /* au moins la hauteur de la pastille numérotée, pour que la description commence dessous */
    min-height: 40px;
}

.step-desc {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.55;
}

/* Features grid */

.features {
    background: var(--bg-elevated);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-5);
    margin-top: var(--space-6);
}

.feature {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.feature-icon {
    font-size: 28px;
    line-height: 1;
    margin-bottom: var(--space-3);
}

.feature-title {
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.feature-desc {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.55;
}

/* Liste numérotée à l'intérieur d'une carte feature */
.feature-list {
    margin: var(--space-3) 0;
    padding-left: var(--space-5);
    line-height: 1.5;
}

.feature-list li {
    margin-bottom: var(--space-2);
}

.feature-list li:last-child {
    margin-bottom: 0;
}

/* Code de partie — la pilule crème de l'écran de jeu */
.gamecode {
    font-family: var(--font-mono);
    font-size: 0.9em;
    font-weight: 700;
    background: var(--bg-cream);
    color: var(--text-primary);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-pill);
    padding: 1px 10px;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* Touche de clavier */
.kbd {
    font-family: var(--font-mono);
    font-size: 0.85em;
    font-weight: 700;
    background: var(--bg-cream);
    color: var(--text-primary);
    border: 1.5px solid var(--border-strong);
    border-bottom-width: 3px;
    border-radius: var(--radius-sm);
    padding: 0 6px;
    white-space: nowrap;
}

/* Recette — un exemple de réglage, avec la capture et le code */
.recipe {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: var(--space-6);
    align-items: center;
    margin-top: var(--space-7);
    background: var(--bg-cream);
    border: 2px solid var(--brand-ink);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-ink);
}

.recipe h3 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-2);
}

.recipe p {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.6;
}

.recipe-settings {
    list-style: none;
    padding: 0;
    margin: var(--space-4) 0;
    display: grid;
    gap: 6px;
}

.recipe-settings li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
}

.recipe-settings li:last-child {
    border-bottom: none;
}

.recipe-settings li span:first-child {
    color: var(--text-secondary);
}

.recipe-settings li span:last-child {
    font-weight: 700;
    text-align: right;
}

.recipe-visual {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-4);
    align-items: end;
}

.recipe-visual .shot {
    width: 100%;
    max-width: 260px;
    border-radius: var(--radius-lg);
    border: 3px solid var(--brand-ink);
    display: block;
    justify-self: end;
}

.recipe-qr {
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
}

.recipe-qr img {
    width: 120px;
    height: 120px;
    display: block;
    margin: 0 auto var(--space-2);
    border-radius: var(--radius-md);
    border: 2px solid var(--brand-ink);
    background: #fff;
    padding: 6px;
}

@media (max-width: 900px) {
    .recipe { grid-template-columns: 1fr; }
    .recipe-visual { grid-template-columns: 1fr; justify-items: center; }
    .recipe-visual .shot { justify-self: center; }
}

/* Liste de résolution et chemin du joueur — deux feuilles telles que l'application les imprime */
.solve-intro {
    max-width: 800px;
    margin-top: var(--space-7);
}

.solve-intro p {
    font-size: 15px;
    line-height: 1.6;
    margin-top: var(--space-3);
}

.solve-sheets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-5);
    align-items: start;
    margin-top: var(--space-5);
}

.solve-sheets > * {
    min-width: 0;
}

.solve-card-title {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: var(--space-2);
}

.solve-card-desc {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: var(--space-4);
}

.solve-sheet {
    background: var(--bg-elevated);
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    box-shadow: var(--shadow-ink);
}

.solve-sheet-title {
    font-weight: 800;
    font-size: 15px;
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
}

.solve-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: solve;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.solve-list > li {
    counter-increment: solve;
    position: relative;
    padding: 5px 0 5px 2.6em;
}

.solve-list > li::before {
    content: counter(solve) ".";
    position: absolute;
    left: 0;
    top: 5px;
    color: var(--text-tertiary);
    font-weight: 700;
}

.solve-list strong {
    color: var(--text-primary);
}

.solve-list ul {
    list-style: none;
    padding: 0;
    margin: 2px 0 0;
}

.solve-list ul li {
    position: relative;
    padding-left: 1.2em;
}

.solve-list ul li::before {
    content: "–";
    position: absolute;
    left: 0;
    color: var(--text-tertiary);
}

.solve-sheet-foot {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-tertiary);
}

.solve-sheet-foot.is-verdict {
    color: var(--text-secondary);
    font-weight: 600;
}

.solve-list .is-error {
    color: var(--danger);
    font-weight: 800;
}

/* Fiches — code + QR à scanner depuis l'application */
.fiche-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.fiche {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: center;
}

.fiche img {
    width: 148px;
    height: 148px;
    display: block;
    margin: 0 auto var(--space-3);
    border-radius: var(--radius-md);
    border: 2px solid var(--brand-ink);
    background: #fff;
    padding: 6px;
    image-rendering: pixelated;
}

.fiche-title {
    font-weight: 800;
    margin-bottom: var(--space-1);
}

.fiche-meta {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
}

.fiche .gamecode,
.recipe-qr .gamecode {
    /* Les codes longs (réglages de tables, fractions) se replient sur leurs tirets
       plutôt que de déborder de la carte. */
    font-size: 12px;
    white-space: normal;
    overflow-wrap: anywhere;
    display: inline-block;
    max-width: 100%;
    border-radius: var(--radius-md);
    line-height: 1.5;
}

/* Documentation — deux cartes de téléchargement */
.doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-5);
    margin-top: var(--space-6);
}

.doc-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.doc-icon {
    font-size: 36px;
    line-height: 1;
}

.doc-title {
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.01em;
}

.doc-meta {
    font-size: 13px;
    color: var(--text-tertiary);
    font-weight: 600;
}

.doc-desc {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.55;
    flex: 1;
}

.doc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Pricing / versions */

.pricing-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-5);
    margin-top: var(--space-6);
}

.price-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
}

.price-card.highlighted {
    border: 2px solid var(--brand-ink);
    box-shadow: var(--shadow-elevated);
    position: relative;
    overflow: hidden;
}

.price-card.highlighted::before {
    content: attr(data-ribbon);
    position: absolute;
    top: 34px;
    right: -44px;
    background: var(--brand-amber);
    color: var(--brand-ink);
    padding: 5px 44px;
    transform: rotate(35deg);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.price-name {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
}

.price-amount {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-1);
}

.price-amount small {
    font-size: 0.5em;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0;
}

.price-cycle {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: var(--space-5);
}

.price-cycle strong {
    color: var(--text-primary);
}

.price-features {
    list-style: none;
    padding: 0;
    flex: 1;
    margin-bottom: var(--space-5);
}

.price-features li {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 15px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.price-features li:last-child {
    border-bottom: none;
}

.price-features li::before {
    content: "✓";
    color: var(--success);
    font-weight: 800;
    flex-shrink: 0;
}

.price-features li.is-limit::before {
    content: "◔";
    color: var(--warning);
}

/* Tier comparison table (gamme gratuite) */

.tier-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
}

.tier-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.tier-table th,
.tier-table td {
    padding: 12px 18px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.tier-table th {
    background: var(--bg-sunken);
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.tier-table tbody tr:last-child td {
    border-bottom: none;
}

.tier-table tbody tr:hover {
    background: var(--bg-sunken);
}

.tier-table td:first-child {
    font-weight: 700;
}

.tier-table td:last-child {
    font-weight: 800;
    color: var(--accent);
    white-space: nowrap;
    text-align: right;
}

.tier-table td .chip {
    font-size: 11px;
}

/* Deux colonnes côte à côte (gamme gratuite + hors gratuité) */
.two-col {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    gap: var(--space-5);
    align-items: start;
    margin-top: var(--space-7);
}

/* min-width: 0 sur les enfants : sans cela, la table (th en nowrap) impose sa largeur
   minimale à la colonne et fait déborder la page sur mobile. */
.two-col > * {
    min-width: 0;
}

@media (max-width: 900px) {
    .two-col { grid-template-columns: minmax(0, 1fr); }
}

.aside-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.aside-card h4 {
    font-size: 15px;
    font-weight: 800;
    margin-bottom: var(--space-3);
}

.aside-card ul {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 8px;
}

.aside-card li {
    font-size: 14px;
    color: var(--text-secondary);
    display: flex;
    gap: 8px;
    line-height: 1.5;
}

.aside-card li::before {
    content: "◔";
    color: var(--warning);
    font-weight: 800;
    flex-shrink: 0;
}

.aside-card p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-top: var(--space-3);
}

/* Encadré */
.callout {
    background: var(--bg-cream);
    border: 2px solid var(--brand-ink);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-primary);
    box-shadow: var(--shadow-ink);
}

.callout strong { font-weight: 800; }

/* FAQ */

details.faq {
    border-bottom: 1px solid var(--border);
    padding: var(--space-4) 0;
}

details.faq summary {
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

details.faq summary::-webkit-details-marker {
    display: none;
}

details.faq summary::after {
    content: "+";
    font-size: 22px;
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: transform 200ms ease;
}

details.faq[open] summary::after {
    content: "−";
}

details.faq[open] summary {
    margin-bottom: var(--space-3);
}

details.faq p {
    color: var(--text-secondary);
    line-height: 1.6;
}

details.faq p + p {
    margin-top: var(--space-3);
}

/* CTA band — ambre comme le bouton Jouer */

.cta-band {
    background: var(--brand-amber);
    color: var(--brand-ink);
    text-align: center;
    padding: var(--space-8) 0;
}

.cta-band h2 {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-4);
}

.cta-band p {
    color: rgba(20, 44, 61, 0.78);
    margin-bottom: var(--space-5);
    font-size: 17px;
}

.cta-band p a {
    color: var(--brand-ink);
    text-decoration: underline;
}

.cta-band .hero-cta {
    justify-content: center;
}

.cta-band .btn-ink {
    background: var(--brand-ink);
    color: var(--brand-cream);
    border-color: var(--brand-ink);
    box-shadow: 0 3px 0 rgba(20, 44, 61, 0.35);
}

.cta-band .btn-ink:hover {
    transform: translateY(-1px);
    border-bottom-color: var(--brand-ink);
}

.cta-band .btn-secondary {
    border-color: var(--brand-ink);
    color: var(--brand-ink);
}

.cta-band .btn-secondary:hover {
    background: rgba(255, 246, 228, 0.45);
    border-bottom-color: var(--brand-ink);
}

/* Vie privée — 2 colonnes : (1) garanties pleine hauteur, (2) paire empilée */
.charter-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    align-items: stretch;
}

.charter-col-stack {
    display: grid;
    gap: var(--space-5);
    align-content: start;
}

.charter-col {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-top: 3px solid var(--brand-amber);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-card);
}

.charter-col-title {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-4);
}

.charter-item {
    margin-bottom: var(--space-4);
}

.charter-item:last-child {
    margin-bottom: 0;
}

.charter-item strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.charter-item p {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.55;
}

.charter-guarantees {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-3);
}

.charter-guarantees li {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.55;
}

/* Emojis en pastille ronde crème devant titres, principes et garanties. */
.charter-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6em;
    height: 1.6em;
    margin-right: 0.4em;
    border-radius: 50%;
    background: var(--pastel-blue);
    font-size: 0.95em;
    line-height: 1;
    vertical-align: -0.35em;
}

.charter-col-title .charter-emoji {
    font-size: 1.05em;
    vertical-align: -0.4em;
}

/* Variante « barré » — superpose une croix rouge sur l'emoji (ex. 📡 barré = aucun réseau). */
.charter-emoji--barred {
    position: relative;
}

.charter-emoji--barred::before,
.charter-emoji--barred::after {
    content: "";
    position: absolute;
    left: 12%;
    top: 42%;
    width: 76%;
    height: 2.5px;
    background: var(--danger);
    border-radius: 2px;
    transform-origin: center;
}

.charter-emoji--barred::before {
    transform: rotate(-45deg);
}

.charter-emoji--barred::after {
    transform: rotate(45deg);
}

@media (max-width: 900px) {
    .charter-cols {
        grid-template-columns: 1fr;
    }
}

/* Footer */

.site-footer {
    border-top: 1px solid var(--border);
    padding: var(--space-7) 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.site-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--space-5);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-5);
    align-items: center;
}

.site-footer a {
    color: var(--text-secondary);
    border-bottom: none;
    margin: 0 var(--space-3);
}

.site-footer a:hover {
    color: var(--text-primary);
}

.site-footer nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: var(--space-2);
}

@media (max-width: 720px) {
    .site-footer-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .site-footer nav {
        justify-content: center;
    }
    .site-footer a {
        display: inline-block;
        margin: 0 var(--space-2);
    }
}

/* Utilities */

.muted {
    color: var(--text-secondary);
}

.center {
    text-align: center;
}

.section-header {
    text-align: center;
    margin-bottom: var(--space-2);
}

.section-header .section-lead {
    margin-left: auto;
    margin-right: auto;
}

.sub-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-2);
}

.mt-7 { margin-top: var(--space-7); }
.mt-5 { margin-top: var(--space-5); }
.mb-5 { margin-bottom: var(--space-5); }
.small { font-size: 14px; }

/* Fallback banner — shown when user hits a non-translated language URL */
.fallback-banner {
    background: #fef3c7;
    border-bottom: 1px solid #f59e0b;
    color: #78350f;
    padding: 10px 16px;
    font-size: 0.92rem;
    text-align: center;
}
.fallback-banner strong { font-weight: 600; }

/* Pages secondaires (confidentialité) */
.prose {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-5);
}

.prose h1 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: var(--space-3);
}

.prose h2 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: var(--space-7) 0 var(--space-3);
}

.prose p,
.prose li {
    color: var(--text-secondary);
    line-height: 1.7;
}

.prose p + p {
    margin-top: var(--space-3);
}

.prose ul {
    padding-left: var(--space-5);
    margin: var(--space-3) 0;
    display: grid;
    gap: 6px;
}

.prose strong {
    color: var(--text-primary);
}

.prose .updated {
    font-size: 14px;
    color: var(--text-tertiary);
    margin-bottom: var(--space-6);
}