/* ==========================================================================
   o2form — design system (sobre, pro, light/dark)
   ========================================================================== */

:root {
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Inter", var(--font-sans);

    --radius: 10px;
    --radius-lg: 18px;
    --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 20px rgba(15, 23, 42, 0.06);

    --max-width: 1120px;
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;
    --space-10: 4rem;
    --space-12: 5rem;
}

/* Light theme (default) */
:root,
:root[data-theme="light"] {
    color-scheme: light;
    --bg: #ffffff;
    --bg-alt: #f8fafc;
    --surface: #ffffff;
    --border: #e2e8f0;
    --text: #0f172a;
    --text-muted: #475569;
    --accent: #0ea5e9;
    --accent-ink: #ffffff;
    --accent-hover: #0284c7;
    --focus: #2563eb;
    --success: #15803d;
    --error: #b91c1c;
}

/* Dark theme */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b1220;
    --bg-alt: #0f172a;
    --surface: #111a2e;
    --border: #1e293b;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --accent: #38bdf8;
    --accent-ink: #0b1220;
    --accent-hover: #7dd3fc;
    --focus: #60a5fa;
    --success: #4ade80;
    --error: #fca5a5;
}

*, *::before, *::after { box-sizing: border-box; }

/* ── Échelle typographique du site ────────────────────────────────────────
   Presque tout le design system est exprimé en `rem` (titres, cartes, champs,
   et jusqu'aux jetons `--space-*`) : la taille de la RACINE est donc le seul
   bouton qui réduit l'ensemble **sans déformer les proportions**. Le corps de
   page, lui, était figé à 17 px — plus gros que la référence des `rem`, d'où
   une page globalement lourde.

   87.5 % de la taille par défaut du navigateur = 14 px dans le cas courant.
   Un **pourcentage** et non des pixels : qui a grossi la police dans ses
   réglages garde son agrandissement, ce qu'un `14px` en dur écraserait.

   Pour ajuster : ce seul nombre suffit — 93.75 % rendrait 15 px, 100 % → 16 px.
   ⚠️ `admin.css` a sa propre feuille et n'est pas concerné. */
html {
    font-size: 87.5%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1; }

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }

:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
    border-radius: 4px;
}

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

.skip-link {
    position: absolute;
    top: -40px;
    left: var(--space-3);
    background: var(--accent);
    color: var(--accent-ink);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    text-decoration: none;
    z-index: 100;
}
.skip-link:focus { top: var(--space-3); }

/* ==========================================================================
   Header / Nav
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--border);
}

.nav {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}

.nav-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    letter-spacing: -0.01em;
}
.nav-brand-mark {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 14px;
    font-weight: 700;
}

.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin-left: auto; /* pousse la navigation (et le thème) à droite ; la langue reste à gauche */
}

.nav-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
    padding: var(--space-2) 0;
    border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--text); }
.nav-links a[aria-current="page"] {
    color: var(--text);
    border-bottom-color: var(--accent);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: var(--space-3);
}

/* ── Sous-menus du menu principal (US8-3-menu) ──────────────────────────────
   Les entrées viennent de l'arborescence : la profondeur est illimitée. Deux
   rendus, un seul balisage — cascade flottante sur laptop, accordéon en flux
   sur mobile (aucun panneau flottant, donc aucun débordement horizontal).
   Le contrôleur Stimulus `submenu` ne pose que `data-open` / `aria-expanded`
   et, en cascade profonde, `data-flip` quand le panneau sortirait à droite. */
.nav-links .nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
}

.submenu-toggle {
    background: transparent;
    border: 0;
    padding: var(--space-2) 2px;
    color: var(--text-muted);
    font: inherit;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.submenu-toggle:hover { color: var(--text); }
.nav-item[data-open="true"] > .submenu-toggle { color: var(--text); }
.submenu-toggle > [aria-hidden="true"] { font-size: 0.7em; opacity: 0.7; }

.submenu {
    list-style: none;
    margin: 0;
    padding: 4px;
    display: none;
}
.nav-item[data-open="true"] > .submenu { display: block; }

@media (min-width: 721px) {
    .submenu {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        z-index: 30;
        min-width: 200px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    }
    /* ── Pont de survol ───────────────────────────────────────────────────
       L'espace qui sépare une entrée de son panneau n'appartient à personne :
       en le traversant, le curseur quitte l'entrée sans avoir encore atteint
       le panneau, `:hover` retombe et le sous-menu se referme sous la souris.
       Ce pseudo-élément transparent le rattache au panneau — donc à l'entrée,
       dont le panneau est un descendant. Sans lui, le menu n'est utilisable
       qu'au clic (bug de recette). */
    .submenu::before {
        content: '';
        position: absolute;
        top: -6px;
        left: 0;
        right: 0;
        height: 6px;
    }

    /* Niveau 3 et au-delà : cascade latérale, retournée à gauche si le panneau
       sortirait de la fenêtre (`data-flip`, posé par le contrôleur). */
    .submenu .submenu {
        top: -5px;
        left: 100%;
        margin-left: 4px;
    }
    /* Le vide est ici horizontal : le pont bascule d'un quart de tour, et suit
       le panneau quand il se retourne. */
    .submenu .submenu::before {
        top: 0;
        bottom: 0;
        left: -4px;
        right: auto;
        width: 4px;
        height: auto;
    }
    .submenu .submenu[data-flip="true"]::before {
        left: auto;
        right: -4px;
    }
    .submenu .submenu[data-flip="true"] {
        left: auto;
        right: 100%;
        margin-left: 0;
        margin-right: 4px;
    }
    /* Le survol suffit à ouvrir ; le clic et le clavier passent par `data-open`.
       `data-hover` est posé par le contrôleur et **survit quelques dixièmes de
       seconde** à la sortie du curseur : un panneau est plus large que son
       entrée, donc en visant une de ses lignes on sort de l'entrée par le côté
       avant d'atteindre le pont. Sans ce sursis, le panneau se referme sous la
       souris (bug de recette). Le pont, lui, ne peut pas être élargi : il
       recouvrirait les entrées voisines. */
    .nav-item.has-submenu:hover > .submenu,
    .nav-item.has-submenu[data-hover="true"] > .submenu,
    .nav-item.has-submenu:focus-within > .submenu { display: block; }

    .submenu .nav-item > a,
    .submenu .submenu-toggle-label {
        flex: 1 1 auto;
        padding: 8px 10px;
        border-radius: 7px;
        border-bottom: 0;
        color: var(--text);
        font-size: 0.85rem;
    }
    .submenu .nav-item > a:hover,
    .submenu .submenu-toggle-label:hover {
        background: color-mix(in srgb, currentColor 8%, transparent);
    }
}

/* ── Sélecteur de langue (menu déroulant <details>) ── */
.lang-dropdown { position: relative; }
.lang-current {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    padding: 5px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1;
}
.lang-current::-webkit-details-marker { display: none; } /* masque le triangle natif */
.lang-current:hover { color: var(--text); border-color: var(--text-muted); }
.lang-caret { font-size: 0.7em; opacity: 0.7; transition: transform .15s; }
.lang-dropdown[open] .lang-current { color: var(--text); border-color: var(--text-muted); }
.lang-dropdown[open] .lang-caret { transform: rotate(180deg); }

.lang-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    min-width: 168px;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.lang-option {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 7px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text) !important;
    text-decoration: none;
}
.lang-option:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.lang-option.is-active { color: var(--accent) !important; font-weight: 700; cursor: default; }
.lang-option.is-active:hover { background: transparent; }

.lang-flag {
    width: 22px;
    height: 15px;
    border-radius: 3px;
    display: block;
    flex: 0 0 auto;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent);
}
.lang-flag-code {
    display: inline-grid;
    place-items: center;
    font-size: 8px;
    font-weight: 700;
    background: var(--bg-alt);
    color: var(--text);
}
.lang-code { letter-spacing: 0.02em; }

.theme-toggle {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    position: relative;
    padding: 0;
}
.theme-toggle:hover { border-color: var(--text-muted); }

.theme-toggle-icon { position: absolute; transition: opacity .15s; }
:root[data-theme="dark"] .theme-toggle-icon-sun { opacity: 1; }
:root[data-theme="dark"] .theme-toggle-icon-moon { opacity: 0; }
:root[data-theme="light"] .theme-toggle-icon-sun { opacity: 0; }
:root[data-theme="light"] .theme-toggle-icon-moon { opacity: 1; }

.nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    cursor: pointer;
    padding: 8px;
    flex-direction: column;
    justify-content: space-between;
}
.nav-toggle-bar {
    display: block;
    height: 2px;
    background: currentColor;
}

@media (max-width: 720px) {
    .nav-toggle { display: inline-flex; }
    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-5);
        display: none;
    }
    .nav-links[data-open="true"] { display: flex; }
    .nav-actions { margin-left: 0; }

    /* ── Taille du texte du burger ────────────────────────────────────────
       Les entrées héritaient des 17 px du corps de page : beaucoup pour une
       liste qui peut compter une vingtaine de lignes une fois l'arborescence
       dépliée. On descend d'un cran, et les sous-niveaux d'un cran de plus —
       la hiérarchie se lit alors à la taille, comme sur laptop.

       ⚠️ `rem` se calcule sur la RACINE (16 px), pas sur les 17 px du `body` :
       0.95rem = 15,2 px, et non 16,15.

       ⚠️ Le padding compense la réduction : une cible tactile reste à ~44 px
       de haut. Réduire la police SANS cela rapetisserait la zone à toucher,
       ce qu'on ne veut pas au doigt. */
    .nav-links > li > a,
    .nav-links .nav-item > a,
    .nav-links .submenu-toggle-label {
        font-size: 0.95rem;
        padding-top: 12px;
        padding-bottom: 12px;
    }
    /* Même spécificité que la règle ci-dessus, sinon le niveau 1 l'emporterait
       sur les sous-niveaux et toute la cascade s'afficherait à la même taille. */
    .nav-links .submenu a,
    .nav-links .submenu .submenu-toggle-label { font-size: 0.875rem; }

    /* Accordéon : les sous-menus restent dans le flux, en pleine largeur, et
       leur texte passe à la ligne — la page ne peut pas déborder en largeur,
       quelle que soit la profondeur de la branche. */
    .nav-links .nav-item { flex-wrap: wrap; width: 100%; }
    .nav-links .nav-item > a { flex: 0 1 auto; }
    /* Le chevron est la seule cible tactile de l'entrée (le libellé, lui, est
       un lien) : au doigt, il lui faut au moins 44 px de côté. */
    .nav-item.has-submenu > .submenu-toggle:not(.submenu-toggle-label) {
        margin-left: auto;
        padding: 0;
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
    }
    .submenu {
        width: 100%;
        min-width: 0;
        padding: var(--space-2) 0 var(--space-2) var(--space-3);
        border-left: 1px solid var(--border);
    }
    .submenu .nav-item { padding: 2px 0; }
    /* Langue déroulante poussée à droite, juste à gauche du burger ; déclencheur
       compact (drapeau + chevron), le code est masqué (libellé via aria-label). */
    .lang-dropdown { margin-left: auto; }
    .lang-current .lang-code { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
    padding: var(--space-12) 0 var(--space-10);
    background:
        radial-gradient(ellipse at 20% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
        var(--bg-alt);
    border-bottom: 1px solid var(--border);
}
.hero-eyebrow {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 var(--space-3);
}
.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4vw + 1rem, 3.6rem);
    line-height: 1.1;
    margin: 0 0 var(--space-4);
    letter-spacing: -0.02em;
}
.hero-lead {
    font-size: clamp(1.05rem, 0.6vw + 0.95rem, 1.25rem);
    color: var(--text-muted);
    max-width: 60ch;
    margin: 0 0 var(--space-4);
}
.hero-proof {
    font-size: 0.95rem;
    color: var(--text);
    max-width: 60ch;
    margin: 0 0 var(--space-6);
    padding-left: var(--space-3);
    border-left: 2px solid var(--accent);
}
.hero-ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
    background: var(--accent);
    color: var(--accent-ink);
}
.btn-primary:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn-ghost {
    background: transparent;
    border-color: var(--border);
    color: var(--text);
}
.btn-ghost:hover { border-color: var(--text-muted); color: var(--text); }

/* ==========================================================================
   Sections
   ========================================================================== */

.section-title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1.5vw + 1rem, 2.2rem);
    margin: 0 0 var(--space-3);
    letter-spacing: -0.015em;
}
.section-intro {
    color: var(--text-muted);
    max-width: 70ch;
    margin: 0 0 var(--space-8);
}

.services { padding: var(--space-10) 0; }

.cards {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-card);
}
.card h2,
.card h3 {
    margin: 0 0 var(--space-2);
    font-size: 1.15rem;
}
.card p { margin: 0; color: var(--text-muted); }

/* Card with a call to action (home rubriques) */
.card-link { display: flex; flex-direction: column; }
.card-link p { margin-bottom: var(--space-4); }
.card-cta {
    margin-top: auto;
    font-weight: 600;
    text-decoration: none;
    color: var(--accent);
}
/* Toute la carte est cliquable, avec **un seul** lien dans le DOM : la pastille
   couvre la carte (qui est en `position: relative`). Les lecteurs d'écran n'ont
   donc qu'une cible à annoncer, et la souris toute la surface. */
.card-link { position: relative; }
.card-cta::after { content: ''; position: absolute; inset: 0; }
.card-cta:hover { color: var(--accent-hover); }

/* Highlight block (competitive advantage) */
.highlight {
    margin-top: var(--space-8);
    padding: var(--space-6);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-lg);
    background: var(--bg-alt);
}
.highlight-title { margin: 0 0 var(--space-3); font-size: 1.3rem; }
.highlight p { margin: 0; color: var(--text-muted); max-width: 75ch; }
.highlight-ai { margin-top: var(--space-3) !important; }

.section-cta { margin-top: var(--space-8); }

/* ==========================================================================
   References (logo gallery)
   ========================================================================== */

.references { padding: var(--space-10) 0; }

.logo-gallery {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.logo-card {
    display: grid;
    place-items: center;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    min-height: 120px;
    box-shadow: var(--shadow-card);
}
.logo-card img {
    max-width: 100%;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.75;
    transition: filter .15s, opacity .15s;
}
.logo-card:hover img,
.logo-card:focus-within img {
    filter: grayscale(0);
    opacity: 1;
}

/* ==========================================================================
   Contact page
   ========================================================================== */

.contact { padding: var(--space-10) 0; }
.contact-grid {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: minmax(200px, 1fr) 2fr;
}
@media (max-width: 720px) {
    .contact-grid { grid-template-columns: 1fr; }
}
.contact-info dl { margin: 0; }
.contact-info dt {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: var(--space-4);
}
.contact-info dt:first-child { margin-top: 0; }
.contact-info dd { margin: var(--space-1) 0 0; font-size: 1.1rem; }

.form { display: grid; gap: var(--space-4); }
.form-row { display: grid; gap: var(--space-2); }
.form-row label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
}
.form-row input,
.form-row textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 1rem;
}
.form-row input:focus,
.form-row textarea:focus {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-color: var(--focus);
}
.form-row ul { color: var(--error); margin: 0; padding-left: 1rem; font-size: 0.9rem; }

.form-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.flash {
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-5) auto 0;
    max-width: var(--max-width);
    width: calc(100% - 2 * var(--space-5));
}
.flash-success { background: color-mix(in srgb, var(--success) 18%, var(--bg-alt)); color: var(--success); }
.flash-error { background: color-mix(in srgb, var(--error) 18%, var(--bg-alt)); color: var(--error); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    border-top: 1px solid var(--border);
    padding: var(--space-6) 0;
    color: var(--text-muted);
    background: var(--bg-alt);
    font-size: 0.95rem;
}
.site-footer .container { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; }
.site-footer p { margin: 0; }
.footer-contact a { color: var(--text-muted); text-decoration: none; }
.footer-contact a:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Page publique d'un contenu (US8-4) — rendu simple, lisible.
   ========================================================================== */
/* La fiche vit sur la **grille du site** : même conteneur que l'en-tête et le
   pied de page, donc son titre s'aligne sur le logo et la navigation. Une
   colonne étroite et centrée flottait au milieu de la fenêtre, sans rapport
   avec le reste — décalée de 180 px vers l'intérieur, elle se lisait comme une
   page « trop étroite » quelle que soit sa largeur.

   Ce n'est pas pour autant un bloc de 1120 px de texte : chaque type de contenu
   garde SA mesure ci-dessous, et tous partent du même bord gauche. */
.content-page {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-6) var(--space-5) var(--space-10);
}

/* Le titre porte la page : il doit rester la voix la plus forte, y compris
   face aux titres du plan de cours (rédigés en markdown, plus bas). */
.content-page > h1 {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.75rem, 3vw + 1.1rem, 2.4rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

/* Le chapeau est l'argument de la fiche, pas une légende : on lui donne le
   corps d'une phrase qu'on lit, et une largeur de lecture confortable. */
.content-lead {
    margin: 0 0 var(--space-6);
    /* En `ch` et non en `rem` : une largeur de lecture se mesure en CARACTÈRES.
       Ici, suivre la taille du texte est le comportement voulu — contrairement
       à la largeur de page ci-dessus. */
    max-width: 62ch;
    font-size: 1.1rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.content-block { margin-bottom: var(--space-6); }
.content-block-label { color: var(--text-muted); font-size: 1rem; margin-bottom: var(--space-2); }

/* ── Faits d'une fiche (US2-4) : durée, pré-requis, tarif, contact… ────────
   Une **table de spécifications**, pas une carte. Une fiche de formation se lit
   comme un programme : on y cherche une ligne précise (« combien de temps ? »,
   « combien ça coûte ? »), et des filets guident l'œil mieux qu'un cadre autour
   de l'ensemble.

   Ce choix règle aussi le thème sombre : l'ancienne carte s'appuyait sur un
   fond (`--bg-alt`) qui, en sombre, se distingue à peine de la page — le cadre
   flottait sans rien délimiter. Des filets n'ont pas ce problème : ils tiennent
   à la couleur de bordure, lisible dans les deux thèmes.

   Deux colonnes **même au doigt** : les valeurs sont courtes (« 3 jours »,
   « 1 500 € HT »), les empiler doublait la hauteur du bloc pour rien. */
.content-facts {
    /* Pleine largeur de la grille : les filets courent d'un bord à l'autre,
       jusque sous la fin du menu. Un trait qui s'arrête avant le bord donne
       l'impression d'un tableau tronqué.

       Les valeurs restent lisibles malgré la largeur parce qu'elles sont
       COURTES et alignées à gauche, juste après leur libellé : l'espace gagné
       se répartit à droite, il n'éloigne rien. */
    display: grid;
    /* Colonne des libellés volontairement ÉTROITE : les valeurs réelles font
       souvent deux ou trois lignes (une durée détaillée, des pré-requis en
       liste), et c'est à elles qu'il faut la largeur. Un libellé qui passe sur
       deux lignes ne gêne pas — il est discret par construction.

       Le plancher n'est pas arbitraire : c'est le **mot le plus long** d'un
       libellé, qui ne se coupe pas. Mesuré à 72 px (« financement ») pour les
       libellés français ; 6rem en laisse pour l'espagnol (« participantes »),
       plus long. En deçà, le mot déborderait dans la colonne voisine. */
    grid-template-columns: minmax(5rem, 6rem) 1fr;
    margin: 0 0 var(--space-8);
    padding: 0;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: none;
}
/* Mentions légales : mêmes filets, autre mesure.

   La colonne des libellés ci-dessus a été calibrée sur le mot le plus long
   d'une FICHE (« financement », 72 px). Les mentions légales ont des libellés
   d'une tout autre longueur — « TVA intracommunautaire », « Directeur de la
   publication », « Immatriculation » — que cette mesure coupe en plein mot via
   le `overflow-wrap: anywhere` prévu comme filet de sécurité. On élargit donc
   la colonne ICI, sans toucher au composant là où il a été mesuré.

   Et sous 480 px, on empile : l'argument « deux colonnes même au doigt » vaut
   pour des valeurs courtes, pas pour une adresse de greffe suivie d'un numéro
   RCS. Empiler y gagne toute la largeur de l'écran. */
.content-facts.legal-facts { grid-template-columns: minmax(8rem, 14rem) 1fr; }
@media (max-width: 30rem) {
    .content-facts.legal-facts { grid-template-columns: 1fr; }
    .content-facts.legal-facts dt { padding-bottom: 0; border-bottom: 0; }
    .content-facts.legal-facts dd { padding-top: var(--space-1); }
}

.content-facts dt,
.content-facts dd {
    margin: 0;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border);
    /* PAS de `align-self: start` : les deux cellules doivent occuper toute la
       hauteur de la ligne, sinon leurs filets s'arrêtent à des hauteurs
       différentes dès qu'un libellé passe sur deux lignes. Le texte se cale en
       haut de lui-même. */
}
.content-facts dt {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.45;
    /* Filet de sécurité : un libellé traduit plus long que prévu se coupe au
       lieu de déborder sur la valeur. */
    overflow-wrap: anywhere;
}
/* L'écart entre les colonnes se prend ICI, et non en `padding-right` du
   libellé ni en `column-gap` : l'un comme l'autre couperaient le filet en deux
   segments au milieu de chaque ligne. Les deux bordures se touchent, le trait
   traverse la ligne d'un bord à l'autre. */
.content-facts dd {
    padding-left: var(--space-4);
    font-weight: 500;
    overflow-wrap: anywhere;
}

/* Le contact est le seul geste proposé par la fiche : c'est la seule ligne
   qui porte la couleur. */
.content-facts a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.content-facts a:hover { color: var(--accent-hover); }

/* Passé l'étroitesse du téléphone, la place ne manque plus : on rend aux
   libellés de quoi tenir sur une ligne. */
@media (min-width: 40rem) {
    /* 11rem : juste de quoi tenir « Solutions de financement » sur une ligne,
       pas davantage. */
    .content-facts { grid-template-columns: minmax(7rem, 11rem) 1fr; }
}
/* Le corps de page est de la PROSE : sa largeur se mesure en caractères, pas en
   pixels de grille. Elle reste bornée — au-delà, l'œil perd le début de la ligne
   suivante en revenant à la marge — mais assez large pour ne pas renvoyer à la
   ligne au milieu de la page : un plan de cours est fait de listes courtes, qui
   supportent une mesure plus longue qu'un texte suivi. */
.content-body {
    max-width: 95ch;
    line-height: 1.7;
}
.content-body h1, .content-body h2, .content-body h3 { margin: var(--space-5) 0 var(--space-2); }
.content-body p, .content-body ul, .content-body ol, .content-body pre, .content-body blockquote { margin: var(--space-3) 0; }
.content-body ul, .content-body ol { padding-left: 1.5rem; }
.content-body pre { padding: var(--space-3); overflow-x: auto; border-radius: var(--radius); background: color-mix(in srgb, currentColor 6%, transparent); }
.content-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.content-body :not(pre) > code { padding: 0.1em 0.35em; border-radius: 4px; background: color-mix(in srgb, currentColor 8%, transparent); font-size: 0.9em; }

/* ── Typographie enrichie du corps de contenu ─────────────────────────────── */
.content-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.content-body a:hover { color: var(--accent-hover); }
.content-body img { max-width: 100%; height: auto; border-radius: var(--radius); }
.content-body hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-5) 0; }
.content-body blockquote { padding: var(--space-2) var(--space-4); border-left: 3px solid var(--border); color: var(--text-muted); }
.content-body blockquote > :first-child { margin-top: 0; }
.content-body blockquote > :last-child { margin-bottom: 0; }
/* Le plan de cours est rédigé en markdown : ses `#` sont des titres de section
   DANS la page, pas des titres de page. On les ramène sous le titre principal,
   sinon deux voix se disputent l'ouverture. */
.content-body h1 { font-size: 1.35rem; letter-spacing: -0.01em; }
.content-body h2 { font-size: 1.15rem; }
.content-body h3 { font-size: 1rem; }
.content-body h1, .content-body h2 { line-height: 1.25; }

/* Tableaux GFM */
.content-body table { border-collapse: collapse; width: 100%; margin: var(--space-4) 0; display: block; overflow-x: auto; }
.content-body th, .content-body td { border: 1px solid var(--border); padding: var(--space-2) var(--space-3); text-align: left; }
.content-body thead th { background: var(--bg-alt); }
.content-body tbody tr:nth-child(even) td { background: color-mix(in srgb, currentColor 3%, transparent); }

/* Listes de tâches GFM (barré + cases) */
.content-body ul:has(> li > input[type="checkbox"]) { list-style: none; padding-left: 0.5rem; }
.content-body li > input[type="checkbox"] { margin-right: 0.5rem; }
.content-body del { color: var(--text-muted); }

/* ── Coloration syntaxique (tempest/highlight, spans .hl-*) ────────────────── */
/* Palette pilotée par variables → bascule clair/sombre via [data-theme]. */
:root[data-theme="light"] {
    --hl-comment: #6e7781;
    --hl-keyword: #cf222e;
    --hl-type:    #953800;
    --hl-func:    #8250df;
    --hl-string:  #0a3069;
    --hl-number:  #0550ae;
    --hl-var:     #0550ae;
    --hl-tag:     #116329;
    --hl-add:     #116329;
    --hl-del:     #82071e;
}
:root[data-theme="dark"] {
    --hl-comment: #8b949e;
    --hl-keyword: #ff7b72;
    --hl-type:    #ffa657;
    --hl-func:    #d2a8ff;
    --hl-string:  #a5d6ff;
    --hl-number:  #79c0ff;
    --hl-var:     #79c0ff;
    --hl-tag:     #7ee787;
    --hl-add:     #7ee787;
    --hl-del:     #ffa198;
}
.content-body pre .hl-comment,
.content-body pre .hl-gutter,
.content-body pre .hl-blur,
.content-body pre .hl-passive { color: var(--hl-comment); }
.content-body pre .hl-keyword { color: var(--hl-keyword); }
.content-body pre .hl-type,
.content-body pre .hl-qualified { color: var(--hl-type); }
.content-body pre .hl-function,
.content-body pre .hl-property { color: var(--hl-func); }
.content-body pre .hl-string,
.content-body pre .hl-value,
.content-body pre .hl-literal { color: var(--hl-string); }
.content-body pre .hl-number { color: var(--hl-number); }
.content-body pre .hl-variable,
.content-body pre .hl-attribute { color: var(--hl-var); }
.content-body pre .hl-tag { color: var(--hl-tag); }
.content-body pre .hl-addition { color: var(--hl-add); }
.content-body pre .hl-deletion { color: var(--hl-del); }
.content-body pre .hl-em { font-style: italic; }
.content-body pre .hl-strong { font-weight: 700; }

/* ── Encadrés « alertes » (callouts) ──────────────────────────────────────── */
.content-body .callout {
    margin: var(--space-4) 0;
    padding: var(--space-3) var(--space-4);
    border-left: 4px solid var(--callout-accent);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--callout-accent) 10%, var(--surface));
}
.content-body .callout > :first-child { margin-top: 0; }
.content-body .callout > :last-child { margin-bottom: 0; }
.content-body .callout-title {
    margin: 0 0 var(--space-2);
    font-weight: 700;
    color: var(--callout-accent);
}
.content-body .callout-note      { --callout-accent: #3b82f6; }
.content-body .callout-tip       { --callout-accent: #10b981; }
.content-body .callout-important { --callout-accent: #8b5cf6; }
.content-body .callout-warning   { --callout-accent: #f59e0b; }
.content-body .callout-caution   { --callout-accent: #ef4444; }

/* Bandeau d'aperçu (brouillon) — page de contenu vue depuis l'admin (US8-4). */
.preview-banner {
    background: #fde68a;
    color: #713f12;
    text-align: center;
    padding: var(--space-2) var(--space-4);
    font-weight: 600;
}

/* ==========================================================================
   Gabarit d'une page de contenu (US8-3-menu, session 2)
   ========================================================================== */

/* Chapeau : le résumé qu'on retrouve dans la carte du parent, repris ici en
   tête de page — d'où une typographie de chapô, distincte du corps. */
.content-lead {
    margin: 0 0 var(--space-6);
    max-width: 70ch;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--text-muted);
}

/* Enfants directs d'une rubrique : mêmes cartes que la home (`.cards`,
   `.card-link`), donc même grille responsive — rien à réinventer. */
.content-children { margin-top: var(--space-8); }
.rubrique-empty { color: var(--text-muted); }