/*
 * Les mises en scène des chapitres d'une page de service
 * (page/scene/<variante>.html.twig). Chacune a sa forme, son fond et son
 * mouvement : la page alterne comme l'accueil. Les îles sombres reçoivent
 * .console (composants/hitech.css), qui redéfinit les jetons en blanc.
 */

/* — Socle commun — */
.chap {
    position: relative;
    padding-block: clamp(2.75rem, 5.5vw, 5rem);
    scroll-margin-block-start: var(--entete-h);
    background: var(--fond);
    color: var(--texte);
}

/* Les îles sombres gardent le fond console (hitech.css), chargé plus tôt. */
.chap.console {
    background: var(--console-fond);
    color: var(--texte);
}

/* Les fonds clairs alternent blanc et craie teintée, selon la forme. */
.chap--citation,
.chap--bento,
.chap--retourne,
.chap--chemin,
.chap--checklist {
    background:
        radial-gradient(48rem 30rem at 100% 0%, rgb(46 163 242 / 0.07), transparent 62%),
        radial-gradient(40rem 26rem at 0% 100%, rgb(55 50 255 / 0.06), transparent 62%),
        var(--craie);
}

.chap__tete {
    display: grid;
    gap: 0.75rem;
    /* Dans une colonne plus haute que lui, l'en-tête reste groupé en haut. */
    align-content: start;
    justify-items: start;
}

.chap__numero {
    font-family: var(--police-titre);
    font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem);
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--cyan);
}

.chap__titre {
    max-inline-size: 22ch;
    text-wrap: balance;
}

.chap__tarif {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem 0.4rem 0.6rem;
    border-radius: var(--rayon-plein);
    background: var(--electrique);
    color: #fff;
    font-size: var(--t-sm);
    font-weight: 600;
    box-shadow: 0 8px 22px -10px rgb(55 50 255 / 0.7);
}

.chap__tarif .picto {
    inline-size: 1.1rem;
    block-size: 1.1rem;
}

.chap .prose {
    max-inline-size: 62ch;
}

.chap__fin {
    padding-block-start: 0.25rem;
}

/* « Lire la suite » */
.chap__suite {
    border-block-start: 1px solid var(--trait);
    interpolate-size: allow-keywords;
}

.chap__suite summary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.9rem 0.2rem;
    color: var(--electrique);
    font-weight: 600;
    font-size: var(--t-sm);
    cursor: pointer;
    list-style: none;
}

.console .chap__suite summary {
    color: var(--cyan);
}

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

.chap__suite-fleche {
    display: inline-grid;
    place-items: center;
    inline-size: 1.6rem;
    block-size: 1.6rem;
    border: 1px solid currentColor;
    border-radius: 50%;
    transition: transform 0.35s var(--ease-sortie);
}

.chap__suite[open] .chap__suite-fleche {
    transform: rotate(180deg);
}

.chap__suite > .prose {
    padding-block-start: 1rem;
}

.chap__suite::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 0.45s var(--ease-sortie), content-visibility 0.45s allow-discrete;
}

.chap__suite[open]::details-content {
    block-size: auto;
}

/* Petites tuiles d'appoint, quand la forme du chapitre ne les met pas en scène. */
.mini-tuiles {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mini-tuiles li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    color: var(--texte-doux);
    font-size: var(--t-base);
}

.mini-tuiles strong {
    color: var(--texte);
}

.mini-tuiles__picto {
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: 0.6rem;
    background: rgb(55 50 255 / 0.08);
    color: var(--electrique);
}

.mini-tuiles__picto .picto {
    inline-size: 1.1rem;
    block-size: 1.1rem;
}

/* Les deux colonnes « titre collé / contenu » partagent cette grille. */
.manifeste,
.colonnes,
.empile,
.chemin-chap,
.console-chap,
.checklist {
    display: grid;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

@media (min-width: 62rem) {
    .manifeste,
    .colonnes,
    .empile,
    .chemin-chap,
    .checklist {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    }

    .console-chap {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    }

    /* Colonnes : le titre seul à gauche laissait un grand vide ; le texte prend plus de place. */
    .colonnes {
        grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
        gap: clamp(2rem, 4vw, 3.5rem);
    }

    .manifeste__gauche,
    .colonnes__gauche,
    .empile__intro,
    .chemin-chap__intro {
        position: sticky;
        inset-block-start: calc(var(--entete-h) + 2rem);
    }
}

/* — Manifeste : le texte se colore au rythme de la lecture — */
.manifeste__droite {
    display: grid;
    gap: 1.75rem;
}

.manifeste__accroche {
    /* À la taille du reste du chapitre (demande de la rédaction) : l'accroche se distingue par sa couleur, pas par sa taille. */
    font-size: var(--t-base);
    line-height: 1.72;
    letter-spacing: -0.01em;
    color: var(--texte);
    text-wrap: pretty;
}

.manifeste__accroche strong {
    color: var(--electrique);
    font-weight: 600;
}

/* — Citation — */
.citation {
    position: relative;
    display: grid;
    gap: 2rem;
    justify-items: center;
    max-inline-size: 60rem;
    text-align: center;
}

.citation .chap__tete {
    justify-items: center;
}

.citation__texte {
    position: relative;
    margin: 0;
    font-family: var(--police-titre);
    font-size: clamp(1.4rem, 1.05rem + 1.3vw, 2.2rem);
    font-weight: 400;
    line-height: 1.3;
    text-wrap: balance;
}

/* Les guillemets géants, en contour cyan, derrière le texte. */
.citation__texte::before {
    content: "“";
    position: absolute;
    inset-block-start: -0.55em;
    inset-inline-start: 50%;
    translate: -50% 0;
    z-index: -1;
    font-size: 5em;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px rgb(46 163 242 / 0.45);
}

.citation__suite {
    display: grid;
    gap: 1.25rem;
    justify-items: center;
    text-align: start;
}

/* — Colonnes — */
.colonnes__gauche {
    display: grid;
    gap: 1.5rem;
}

.colonnes__trait {
    display: block;
    inline-size: 2px;
    block-size: 6rem;
    background: linear-gradient(var(--cyan), transparent);
    box-shadow: 0 0 12px rgb(46 163 242 / 0.6);
}

.colonnes__droite {
    display: grid;
    gap: 1.5rem;
}

.colonnes__accroche {
    font-size: var(--t-md);
    color: var(--texte);
}

/* — Île sombre — */
.sombre-chap {
    display: grid;
    gap: 1.5rem;
    max-inline-size: 58rem;
}


.sombre-chap__accroche {
    font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.4rem);
    line-height: 1.55;
    color: #fff;
}

/* — Titre géant qui glisse — */
.chap--geant {
    overflow: clip;
}

.geant__bande {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    inline-size: max-content;
    margin-block-end: clamp(1.5rem, 3vw, 2.25rem);
    font-family: var(--police-titre);
    font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3.5rem);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    will-change: transform;
}

.geant__bande span {
    color: rgb(15 8 65 / 0.88);
}

.geant__bande span:nth-of-type(even) {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--electrique);
}

.geant__bande i {
    inline-size: 0.22em;
    block-size: 0.22em;
    background: var(--cyan);
    box-shadow: 0 0 20px var(--cyan);
}

.geant__corps {
    display: grid;
    gap: 2rem;
}

@media (min-width: 62rem) {
    .geant__corps {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    }
}

.geant__texte {
    display: grid;
    gap: 1.5rem;
}

.geant__accroche {
    font-size: var(--t-md);
    color: var(--texte);
}

/* — Bento — */
.bento {
    display: grid;
    gap: clamp(2rem, 4vw, 3rem);
}

.bento__intro {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 62rem) {
    .bento__intro {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        align-items: end;
    }
}

.bento__grille {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 48rem) {
    .bento__grille {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: minmax(11rem, auto);
    }

    .bento__case--vedette {
        grid-column: span 2;
        grid-row: span 2;
    }

    /* Combler chaque grille, quel que soit le nombre de cases. */
    .bento__grille--3 .bento__case:not(.bento__case--vedette),
    .bento__grille--4 .bento__case:nth-child(2),
    .bento__grille--6 .bento__case:nth-child(n + 6),
    .bento__grille--6 .bento__case:nth-child(5),
    .bento__grille--7 .bento__case:nth-child(7) {
        grid-column: span 2;
    }

    /* Cinq cases : la vedette et quatre petites remplissent déjà la grille. */
}

.bento__case {
    position: relative;
    display: grid;
    align-content: start;
    gap: 0.6rem;
    padding: 1.4rem;
    border: 1px solid rgb(15 8 65 / 0.08);
    border-radius: var(--rayon-lg);
    background: #fff;
    box-shadow: 0 18px 40px -32px rgb(15 8 65 / 0.4);
    transition: transform 0.45s var(--ease-sortie), box-shadow 0.45s var(--ease-sortie), border-color 0.45s var(--ease-sortie);
}

.bento__case:hover {
    transform: translateY(-4px);
    border-color: rgb(46 163 242 / 0.5);
    box-shadow: 0 0 0 4px rgb(46 163 242 / 0.1), 0 26px 50px -30px rgb(15 8 65 / 0.5);
}

.bento__picto {
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: 0.8rem;
    background: rgb(55 50 255 / 0.08);
    color: var(--electrique);
}

.bento__picto .picto {
    inline-size: 1.4rem;
    block-size: 1.4rem;
}

.bento__titre {
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: var(--t-base);
    line-height: 1.25;
}

.bento__texte {
    color: var(--texte-doux);
    font-size: var(--t-sm);
}

/* La case vedette : aplat électrique tramé, grand pictogramme. */
.bento__case--vedette {
    align-content: end;
    padding: clamp(1.6rem, 3vw, 2.4rem);
    border-color: transparent;
    background:
        radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.16) 1px, transparent 1.5px) 0 0 / 20px 20px,
        radial-gradient(30rem 20rem at 100% 0%, rgb(46 163 242 / 0.7), transparent 65%),
        var(--electrique);
    color: #fff;
    box-shadow: 0 30px 60px -30px rgb(55 50 255 / 0.8);
}

.bento__case--vedette .bento__picto {
    position: absolute;
    inset-block-start: 1.5rem;
    inset-inline-end: 1.5rem;
    inline-size: 4.5rem;
    block-size: 4.5rem;
    border-radius: 1.2rem;
    background: rgb(255 255 255 / 0.14);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25);
}

.bento__case--vedette .bento__picto .picto {
    inline-size: 2.2rem;
    block-size: 2.2rem;
}

.bento__case--vedette .bento__titre {
    font-size: var(--t-xl);
}

.bento__case--vedette .bento__texte {
    color: rgb(255 255 255 / 0.85);
    font-size: var(--t-base);
    max-inline-size: 36ch;
}

/* — Volets dépliants — */
.deplie {
    display: grid;
    gap: clamp(2rem, 4vw, 3rem);
}

.deplie__intro {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 62rem) {
    .deplie__intro {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        align-items: end;
    }
}

.deplie__volets {
    display: flex;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
    block-size: clamp(22rem, 46vh, 28rem);
}

.deplie__volet {
    position: relative;
    flex: 1 1 0;
    min-inline-size: 0;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 0.75rem;
    padding: 1.25rem;
    overflow: hidden;
    border: 1px solid rgb(15 8 65 / 0.1);
    border-radius: var(--rayon-lg);
    background: #fff;
    cursor: pointer;
    transition: flex-grow 0.7s var(--ease-sortie), background-color 0.5s var(--ease-sortie), color 0.5s var(--ease-sortie), border-color 0.5s var(--ease-sortie);
}

.deplie__numero {
    color: var(--electrique);
    font-size: var(--t-xs);
}

.deplie__picto {
    display: grid;
    place-items: center;
    inline-size: 2.6rem;
    block-size: 2.6rem;
    border-radius: 0.8rem;
    background: rgb(55 50 255 / 0.08);
    color: var(--electrique);
}

.deplie__picto .picto {
    inline-size: 1.35rem;
    block-size: 1.35rem;
}

/* Replié, le titre se lit de bas en haut, comme un dos de classeur. */
.deplie__titre {
    align-self: end;
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: var(--t-base);
    line-height: 1.2;
    writing-mode: vertical-rl;
    rotate: 180deg;
    white-space: nowrap;
}

.deplie__texte {
    max-block-size: 0;
    opacity: 0;
    font-size: var(--t-sm);
    line-height: 1.55;
    transition: opacity 0.3s ease;
}

/* Déplié : au survol, au focus, ou le premier volet quand rien n'est survolé. */
.deplie__volet:is(:hover, :focus-visible, :focus-within),
.deplie__volets:not(:hover):not(:focus-within) .deplie__volet:first-child {
    flex-grow: 4.5;
    border-color: transparent;
    background:
        radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.14) 1px, transparent 1.5px) 0 0 / 18px 18px,
        var(--electrique);
    color: #fff;
    outline: none;
}

.deplie__volet:is(:hover, :focus-visible, :focus-within) .deplie__titre,
.deplie__volets:not(:hover):not(:focus-within) .deplie__volet:first-child .deplie__titre {
    writing-mode: horizontal-tb;
    rotate: none;
    white-space: normal;
    font-size: var(--t-lg);
}

.deplie__volet:is(:hover, :focus-visible, :focus-within) .deplie__texte,
.deplie__volets:not(:hover):not(:focus-within) .deplie__volet:first-child .deplie__texte {
    max-block-size: 12rem;
    opacity: 0.9;
    transition: opacity 0.4s ease 0.25s;
}

.deplie__volet:is(:hover, :focus-visible, :focus-within) :is(.deplie__picto, .deplie__numero),
.deplie__volets:not(:hover):not(:focus-within) .deplie__volet:first-child :is(.deplie__picto, .deplie__numero) {
    color: #fff;
    background-color: rgb(255 255 255 / 0.14);
}

.deplie__volet:is(:hover, :focus-visible, :focus-within) .deplie__numero,
.deplie__volets:not(:hover):not(:focus-within) .deplie__volet:first-child .deplie__numero {
    background: none;
}

@media (max-width: 47.99rem) {
    .deplie__volets {
        flex-direction: column;
        block-size: auto;
    }

    /* Empilés, les volets prennent leur hauteur naturelle : tous ouverts. */
    .deplie__volets .deplie__volet,
    .deplie__volets:not(:hover):not(:focus-within) .deplie__volet:first-child {
        flex: none;
        overflow: visible;
    }

    .deplie__volet {
        grid-template-rows: auto;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
    }

    .deplie__numero {
        display: none;
    }

    .deplie__titre,
    .deplie__volet .deplie__titre {
        writing-mode: horizontal-tb;
        rotate: none;
        white-space: normal;
        align-self: center;
    }

    .deplie__texte,
    .deplie__volet .deplie__texte {
        grid-column: 1 / -1;
        max-block-size: none;
        opacity: 0.9;
    }
}

/* — Console : les atouts en liste sur une carte sombre — */
.console-chap__intro {
    display: grid;
    gap: 1.25rem;
}

.terminal {
    overflow: hidden;
    border: 1px solid rgb(46 163 242 / 0.3);
    border-radius: var(--rayon-lg);
    background: rgb(4 2 20 / 0.7);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.03), 0 40px 80px -40px rgb(0 0 0 / 0.9), 0 0 60px -20px rgb(46 163 242 / 0.35);
}

/* Spécificité relevée : la remise à zéro des listes (ol[role=list]) l'emportait. */
.terminal .terminal__lignes {
    display: grid;
    gap: 1.1rem;
    margin: 0;
    padding: 1.4rem 1.4rem 1.6rem;
    list-style: none;
}

.terminal__ligne {
    display: grid;
    gap: 0.3rem;
}

.terminal__commande {
    color: var(--cyan);
    font-size: var(--t-base);
    font-weight: 600;
}

.terminal__sortie {
    grid-column: 1;
    color: var(--texte-doux);
    font-size: var(--t-sm);
    line-height: 1.55;
    transition: opacity 0.3s ease;
}


/* — Cartes à retourner — */
.retourne {
    display: grid;
    gap: clamp(2rem, 4vw, 3rem);
}

.retourne__intro {
    display: grid;
    gap: 1.25rem;
    max-inline-size: 48rem;
}

.retourne__aide {
    color: var(--electrique);
    font-size: var(--t-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.retourne__grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Des lignes pleines : 6 ou 9 cartes en trois colonnes, 4, 7 ou 8 en quatre
   (sinon 5 + 1 laissait une carte seule sur sa ligne). */
@media (min-width: 48rem) {
    .retourne__grille:has(> :nth-child(6):last-child),
    .retourne__grille:has(> :nth-child(9):last-child) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .retourne__grille:has(> :nth-child(4):last-child),
    .retourne__grille:has(> :nth-child(7):last-child),
    .retourne__grille:has(> :nth-child(8):last-child) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.retourne__carte {
    position: relative;
    block-size: 15rem;
    perspective: 900px;
    cursor: pointer;
    outline: none;
}

.retourne__face {
    position: absolute;
    inset: 0;
    display: grid;
    gap: 0.6rem;
    padding: 1.4rem;
    border-radius: var(--rayon-lg);
    backface-visibility: hidden;
    transition: transform 0.75s cubic-bezier(0.3, 1.3, 0.5, 1);
}

.retourne__face--recto {
    grid-template-rows: auto 1fr auto;
    border: 1px solid rgb(15 8 65 / 0.08);
    background: #fff;
    box-shadow: 0 18px 40px -30px rgb(15 8 65 / 0.45);
}

.retourne__numero {
    color: var(--electrique);
    font-size: var(--t-xs);
}

.retourne__picto {
    display: grid;
    place-items: center;
    align-self: center;
    justify-self: start;
    inline-size: 3.5rem;
    block-size: 3.5rem;
    border-radius: 1rem;
    background: rgb(55 50 255 / 0.08);
    color: var(--electrique);
}

.retourne__picto .picto {
    inline-size: 1.8rem;
    block-size: 1.8rem;
}

.retourne__titre {
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: var(--t-md);
    line-height: 1.2;
}

.retourne__tourner {
    position: absolute;
    inset-block-start: 1.1rem;
    inset-inline-end: 1.2rem;
    color: var(--texte-tres-doux);
    font-size: 1.1rem;
}

.retourne__face--verso {
    align-content: center;
    background:
        radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.14) 1px, transparent 1.5px) 0 0 / 18px 18px,
        var(--electrique);
    color: #fff;
    transform: rotateY(180deg);
    box-shadow: 0 24px 50px -24px rgb(55 50 255 / 0.8);
}

.retourne__face--verso .retourne__titre {
    font-size: var(--t-base);
}

.retourne__texte {
    font-size: var(--t-sm);
    line-height: 1.55;
    color: rgb(255 255 255 / 0.9);
}

.retourne__texte a {
    color: #fff;
}

.retourne__carte:is(:hover, :focus-visible, :focus-within) .retourne__face--recto {
    transform: rotateY(-180deg);
}

.retourne__carte:is(:hover, :focus-visible, :focus-within) .retourne__face--verso {
    transform: rotateY(0deg);
}

/* — Rail horizontal, en console — */
.chap--rail {
    padding-block: 0;
}

.rail--scene .rail__entete {
    display: grid;
    gap: 1rem;
}

.rail-scene__accroche {
    color: var(--texte-doux);
}

.rail-scene__carte {
    position: relative;
    display: grid;
    align-content: start;
    gap: 0.9rem;
    inline-size: clamp(17rem, 26vw, 22rem);
    flex: none;
    padding: clamp(1.5rem, 2.5vw, 2rem);
    border-radius: var(--rayon-lg);
    background: rgb(255 255 255 / 0.04);
    box-shadow: 0 30px 60px -40px rgb(0 0 0 / 0.9);
}

.rail-scene__numero {
    color: var(--cyan);
    font-size: var(--t-xs);
}

.rail-scene__picto {
    display: grid;
    place-items: center;
    inline-size: 3.25rem;
    block-size: 3.25rem;
    border-radius: 1rem;
    background: rgb(46 163 242 / 0.14);
    color: var(--cyan);
    box-shadow: 0 0 24px -4px rgb(46 163 242 / 0.6);
}

.rail-scene__picto .picto {
    inline-size: 1.7rem;
    block-size: 1.7rem;
}

.rail-scene__titre {
    font-size: var(--t-lg);
    color: #fff;
}

.rail-scene__texte {
    color: var(--texte-doux);
    font-size: var(--t-sm);
    line-height: 1.6;
}

.rail-scene__fin {
    display: grid;
    gap: 1.25rem;
}

.rail-scene__fin:has(*) {
    padding-block-end: clamp(3rem, 6vw, 5rem);
}

/* — Pile de cartes collantes (.empile : .pile est déjà un utilitaire du site) — */
.empile__intro {
    display: grid;
    gap: 1.25rem;
}

.empile__droite {
    display: grid;
    gap: 1.5rem;
}

.empile__cartes {
    display: grid;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.empile__carte {
    position: sticky;
    inset-block-start: calc(var(--entete-h) + 2rem + var(--rang) * 1rem);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.5rem 1.25rem;
    align-content: center;
    min-block-size: 14rem;
    padding: clamp(1.6rem, 3vw, 2.4rem);
    overflow: hidden;
    border: 1px solid rgb(15 8 65 / 0.08);
    border-radius: var(--rayon-lg);
    background: #fff;
    box-shadow: 0 -10px 30px -20px rgb(15 8 65 / 0.25), 0 30px 60px -40px rgb(15 8 65 / 0.5);
    will-change: transform;
}

/* Un liseré de couleur différent à chaque carte : électrique, cyan, encre. */
.empile__carte::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 4px;
    background: var(--electrique);
}

.empile__carte:nth-child(3n + 2)::before {
    background: var(--cyan);
}

.empile__carte:nth-child(3n)::before {
    background: var(--encre);
}

.empile__numero {
    position: absolute;
    inset-block-end: -0.15em;
    inset-inline-end: 0.15em;
    font-family: var(--police-titre);
    font-size: clamp(5rem, 3rem + 6vw, 8rem);
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgb(55 50 255 / 0.18);
}

.empile__picto {
    grid-row: span 2;
    display: grid;
    place-items: center;
    inline-size: 3.5rem;
    block-size: 3.5rem;
    border-radius: 1rem;
    background: rgb(55 50 255 / 0.08);
    color: var(--electrique);
}

.empile__picto .picto {
    inline-size: 1.8rem;
    block-size: 1.8rem;
}

.empile__titre {
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: var(--t-lg);
    line-height: 1.2;
}

.empile__texte {
    position: relative;
    color: var(--texte-doux);
    max-inline-size: 46ch;
}

@media (prefers-reduced-motion: reduce) {
    .empile__carte {
        position: relative;
        inset-block-start: auto;
    }
}

/* — Chemin d'étapes — */
.chemin-chap__intro {
    display: grid;
    gap: 1.25rem;
}

ol.chemin[role="list"] {
    position: relative;
    display: grid;
    gap: clamp(1.75rem, 4vw, 2.75rem);
    margin: 0;
    padding: 0.5rem 0 0.5rem 4rem;
    list-style: none;
}

.chemin__rail {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 1.2rem;
    inline-size: 2px;
    background: rgb(15 8 65 / 0.1);
}

.chemin__trace {
    position: absolute;
    inset: 0;
    background: linear-gradient(var(--electrique), var(--cyan));
    box-shadow: 0 0 12px rgb(46 163 242 / 0.7);
    transform-origin: top;
}

.chemin__etape {
    position: relative;
    display: grid;
    gap: 0.4rem;
    opacity: 0.45;
    transition: opacity 0.5s var(--ease-sortie);
}

.chemin__etape.est-atteinte {
    opacity: 1;
}

.chemin__noeud {
    position: absolute;
    inset-block-start: -0.2rem;
    inset-inline-start: -4rem;
    display: grid;
    place-items: center;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    border: 2px solid rgb(15 8 65 / 0.15);
    border-radius: 50%;
    background: var(--craie);
    color: var(--texte-doux);
    font-weight: 600;
    font-size: var(--t-sm);
    transition: all 0.45s var(--ease-sortie);
}

.chemin__etape.est-atteinte .chemin__noeud {
    border-color: var(--cyan);
    background: var(--electrique);
    color: #fff;
    box-shadow: 0 0 0 6px rgb(46 163 242 / 0.18), 0 8px 20px -6px rgb(55 50 255 / 0.7);
}

.chemin__titre {
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: var(--t-lg);
    line-height: 1.2;
}

.chemin__texte {
    color: var(--texte-doux);
    max-inline-size: 52ch;
}

/* — Frise (onglets) — */
.frise-chap {
    display: grid;
    gap: 1.75rem;
}

.frise-chap__accroche {
    font-size: var(--t-md);
}

/* — Checklist — */
.checklist__intro {
    display: grid;
    gap: 1.25rem;
}

.checklist__cadre {
    display: grid;
    gap: 1.25rem;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border: 1px solid rgb(15 8 65 / 0.08);
    border-radius: var(--rayon-lg);
    background: #fff;
    box-shadow: 0 30px 60px -40px rgb(15 8 65 / 0.45);
}

.checklist__liste {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.checklist__point {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.9rem;
    align-items: center;
    padding: 0.85rem 0.25rem;
    border-block-end: 1px dashed rgb(15 8 65 / 0.12);
    font-size: var(--t-md);
}

.checklist__point:last-child {
    border-block-end: 0;
}

.checklist__case {
    inline-size: 1.7rem;
    block-size: 1.7rem;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.checklist__case rect {
    stroke: rgb(55 50 255 / 0.35);
    stroke-width: 1.6;
    fill: rgb(55 50 255 / 0.04);
}

.checklist__case path {
    stroke: var(--electrique);
    stroke-width: 2.4;
    stroke-dasharray: 16;
}

/* La coche se trace quand le point traverse l'écran (là où le navigateur sait lier une animation au défilement). */
@supports (animation-timeline: view()) {
    .checklist__case path {
        stroke-dashoffset: 16;
        animation: coche linear both;
        animation-timeline: view();
        animation-range: entry 60% cover 35%;
    }

    .checklist__case rect {
        animation: case-cochee linear both;
        animation-timeline: view();
        animation-range: entry 60% cover 35%;
    }
}

@keyframes coche {
    to { stroke-dashoffset: 0; }
}

@keyframes case-cochee {
    to { fill: rgb(46 163 242 / 0.14); stroke: var(--cyan); }
}

/* — Bandeau d'atouts entre deux chapitres : une ligne discrète, pas un titre — */
.scene__bandeau {
    padding-block: clamp(0.7rem, 1.3vw, 1.05rem);
}

.scene__bandeau .bandeau__element {
    font-size: clamp(0.95rem, 0.8rem + 0.55vw, 1.4rem);
}

/* — Dock de navigation — */
.dock {
    position: fixed;
    inset-block-end: max(1rem, env(safe-area-inset-bottom));
    inset-inline-start: 50%;
    z-index: calc(var(--z-entete) - 1);
    display: flex;
    align-items: center;
    gap: 1rem;
    max-inline-size: calc(100% - 2rem);
    padding: 0.55rem 0.6rem 0.55rem 1rem;
    overflow: hidden;
    border: 1px solid rgb(46 163 242 / 0.3);
    border-radius: var(--rayon-plein);
    background: rgb(7 3 32 / 0.86);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: #fff;
    box-shadow: 0 20px 50px -20px rgb(7 3 32 / 0.8), 0 0 30px -10px rgb(46 163 242 / 0.4);
    translate: -50% 160%;
    opacity: 0;
    transition: translate 0.55s var(--ease-sortie), opacity 0.4s var(--ease-sortie);
}

.dock.est-visible {
    translate: -50% 0;
    opacity: 1;
}

.dock__courant {
    display: inline-flex;
    align-items: baseline;
    gap: 0.6rem;
    min-inline-size: 0;
}

.dock__numero {
    color: var(--cyan);
    font-size: var(--t-xs);
}

.dock__titre {
    max-inline-size: 22ch;
    overflow: hidden;
    font-size: var(--t-sm);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dock__points {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0.35rem 0.5rem;
    border-radius: var(--rayon-plein);
    background: rgb(255 255 255 / 0.06);
    list-style: none;
}

.dock__points a {
    display: block;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: var(--rayon-plein);
    background: rgb(255 255 255 / 0.3);
    transition: inline-size 0.4s var(--ease-sortie), background-color 0.3s var(--ease-sortie);
}

.dock__points a:hover {
    background: #fff;
}

.dock__points a[aria-current="true"] {
    inline-size: 1.4rem;
    background: var(--cyan);
    box-shadow: 0 0 10px var(--cyan);
}

.dock__jauge {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 2px;
}

.dock__jauge span {
    display: block;
    block-size: 100%;
    background: var(--cyan);
    transform: scaleX(0);
    transform-origin: left;
}

@media (max-width: 34rem) {
    .dock__titre {
        max-inline-size: 11ch;
    }
}

/* — Fin de page : FAQ et encarts — */
.fin-scene__cadre {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

@media (min-width: 62rem) {
    .fin-scene__cadre:has(.fin-scene__faq) {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    }

    .fin-scene__cadre:not(:has(.fin-scene__faq)) .fin-scene__encarts {
        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    }
}

.fin-scene__encarts {
    display: grid;
    gap: 1.25rem;
}

.scene__introduction {
    padding-block: 3rem 0;
}

@media (prefers-reduced-motion: reduce) {
    .retourne__face,
    .deplie__volet,
    .dock {
        transition: none;
    }
}

/* La phrase qui annonce une liste (« Vos collaborateurs apprennent à : »). */
.chap__amorce {
    color: var(--texte);
    font-weight: 600;
}

/*
 * Sommaire latéral (grand écran) : une colonne de traits fins contre le bord
 * droit. Le chapitre en cours a le trait long et coloré ; au survol des
 * traits (pas avant : les titres cachés ne captent ni la souris ni les clics)
 * ou au clavier, les titres glissent sur un voile clair, lisible sur les
 * sections claires comme sur les îles sombres, et restent ouverts tant qu'on
 * les survole. Sur téléphone, le dock prend le relais.
 */
.sommaire-cote {
    display: none;
}

@media (min-width: 64rem) {
    .sommaire-cote {
        position: fixed;
        inset-block-start: 50%;
        inset-inline-end: 0.9rem;
        z-index: calc(var(--z-entete) - 1);
        display: block;
        translate: 0.75rem -50%;
        opacity: 0;
        pointer-events: none;
        transition: translate 0.5s var(--ease-sortie), opacity 0.4s var(--ease-sortie);
    }

    .sommaire-cote.est-visible {
        translate: 0 -50%;
        opacity: 1;
    }

    /* Seuls les traits captent la souris : le reste du sommaire laisse passer vers la page. */
    .sommaire-cote.est-visible .sommaire-cote__trait {
        pointer-events: auto;
    }

    .sommaire-cote__liste {
        display: grid;
        justify-items: end;
        gap: 0.1rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .sommaire-cote__lien {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        color: var(--encre);
        text-decoration: none;
    }

    .sommaire-cote__titre {
        display: inline-flex;
        align-items: baseline;
        gap: 0.5rem;
        max-inline-size: 17rem;
        padding: 0.3rem 0.7rem;
        overflow: hidden;
        border-radius: var(--rayon-plein);
        background: rgb(255 255 255 / 0.86);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        box-shadow: 0 6px 18px -10px rgb(15 8 65 / 0.35);
        font-size: 0.78rem;
        line-height: 1.2;
        white-space: nowrap;
        text-overflow: ellipsis;
        opacity: 0;
        translate: 0.5rem 0;
        pointer-events: none;
        transition: opacity 0.3s var(--ease-sortie), translate 0.35s var(--ease-sortie);
    }

    .sommaire-cote__numero {
        font-size: 0.68rem;
        color: var(--accent);
    }

    /* Le trait : gris moyen, lisible sur clair comme sur sombre. */
    /* Sa zone de survol déborde (rembourrage transparent) jusqu'au titre et entre les traits, sans trou. */
    .sommaire-cote__trait {
        flex: none;
        box-sizing: content-box;
        inline-size: 0.9rem;
        block-size: 2px;
        padding: 0.45rem 0 0.45rem 0.7rem;
        border-radius: 2px;
        background-color: rgb(140 140 165 / 0.6);
        background-clip: content-box;
        transition: inline-size 0.4s var(--ease-sortie), background-color 0.3s var(--ease-sortie);
    }

    .sommaire-cote__lien[aria-current="true"] .sommaire-cote__trait {
        inline-size: 1.9rem;
        background-color: var(--accent);
        filter: drop-shadow(0 0 5px rgb(113 34 246 / 0.6));
    }

    .sommaire-cote__lien:has(:hover) .sommaire-cote__trait {
        inline-size: 1.5rem;
        background-color: var(--accent);
    }

    .sommaire-cote.est-visible:is(:has(.sommaire-cote__trait:hover), :has(.sommaire-cote__titre:hover), :has(:focus-visible)) .sommaire-cote__titre {
        opacity: 1;
        translate: 0 0;
        pointer-events: auto;
    }

    .sommaire-cote__lien[aria-current="true"] .sommaire-cote__titre {
        font-weight: 600;
    }

    .sommaire-cote__lien:focus-visible {
        outline: none;
    }

    .sommaire-cote__lien:focus-visible .sommaire-cote__titre {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    /* Sur grand écran, le sommaire latéral remplace le dock. */
    .dock {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sommaire-cote,
    .sommaire-cote__titre,
    .sommaire-cote__trait {
        transition: none;
    }
}

/*
 * Bento à plusieurs vedettes (imposé par la page) : une rangée de grandes
 * cases bleues, puis les autres en petites cases blanches.
 */
.bento__trio,
.bento__petites {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bento__trio .bento__case--vedette {
    align-content: start;
    gap: 0.9rem;
    min-block-size: 17rem;
}

/* Le pictogramme reprend sa place en tête : les titres des trois cases
   s'alignent alors sur la même ligne, quelle que soit la longueur du texte. */
.bento__trio .bento__case--vedette .bento__picto {
    position: static;
    inline-size: 3.75rem;
    block-size: 3.75rem;
    margin-block-end: 0.4rem;
}

.bento__trio .bento__case--vedette .bento__titre {
    font-size: var(--t-lg);
}

.bento__petites {
    margin-block-start: 1rem;
}

@media (min-width: 48rem) {
    .bento__trio {
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        grid-auto-flow: column;
    }

    .bento__petites {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* — Encadré : le chapitre tel qu'il est écrit, dans un cadre blanc à droite — */
.chap--encadre {
    background:
        radial-gradient(48rem 30rem at 100% 0%, rgb(46 163 242 / 0.07), transparent 62%),
        radial-gradient(40rem 26rem at 0% 100%, rgb(55 50 255 / 0.06), transparent 62%),
        var(--craie);
}

.encadre__cadre {
    gap: 0;
    font-size: 0.95rem;
}

.encadre__cadre > h3 {
    margin-block: 1.75rem 0.5rem;
    font-family: var(--police-texte);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
}

.encadre__cadre > h3:first-child {
    margin-block-start: 0;
}

.encadre__cadre > h3:not(:first-child) {
    padding-block-start: 1.75rem;
    border-block-start: 1px solid rgb(15 8 65 / 0.08);
}