/* ==========================================================================
   Mon Examen Civique — page d'accueil (refonte)
   Dépend de tokens.css. N'utilise ni Bootstrap ni Font Awesome.
   ========================================================================== */

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

body.v2 {
    margin: 0;
    position: relative;
    background: var(--v2-cream);
    color: var(--v2-ink);
    font-family: var(--v2-font-body);
    font-size: var(--v2-text-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Grain très discret : donne une texture "papier officiel" au fond crème
   sans jamais toucher à la palette (bruit neutre, opacité quasi nulle). */
body.v2::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.035;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Remonte le contenu normal au-dessus du grain (position:fixed) sans toucher
   au header, déjà positionné et empilé via son propre z-index. */
.v2-flagline,
main#contenu,
.v2-footer {
    position: relative;
    z-index: 1;
}

/* :where() ramène la spécificité à zéro — même principe que le correctif
   :where(.v2 a) ci-dessous (Phase 2H-K). Cette règle restait le défaut pour
   tout titre sans style propre, mais écrasait silencieusement margin/
   letter-spacing d'au moins 17 composants (ex. .fmv2-hero-title perdait à la
   fois son centrage et sa marge). Bug de même forme que .v2 a, découvert en
   Phase 2I-A, corrigé ici en Phase 2I-B. */
:where(.v2 h1, .v2 h2, .v2 h3) {
    font-family: var(--v2-font-title);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
}

/* :where() ramène la spécificité de ces deux règles à zéro : elles restent le
   défaut pour tout lien qui ne fixe pas sa propre couleur, mais ne peuvent
   plus jamais l'emporter sur une règle de composant (même une simple classe
   isolée). Avant ce correctif, ".v2 a"/"a:hover" (spécificité classe+élément)
   écrasait silencieusement la couleur de nombreux composants (ex. texte
   totalement invisible sur .fmv2-btn-pulse, bleu sur bleu). Bug découvert en
   Phase 2H-F, ampleur réelle confirmée et corrigé ici en Phase 2H-K. */
:where(.v2 a) {
    color: var(--v2-blue);
}

:where(.v2 a:hover) {
    color: var(--v2-blue-dark);
}

.v2 img {
    max-width: 100%;
}

/* Accès clavier : indispensable, le site actuel n'a pas de focus visible */
.v2 a:focus-visible,
.v2 button:focus-visible {
    outline: 3px solid var(--v2-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Sélecteur qualifié par body.v2 : passe devant ".v2 a" (couleur de lien par
   défaut) qui, à spécificité égale avec une simple classe, l'emportait et
   rendait ce texte invisible (bleu sur bleu). Même correctif appliqué aux
   boutons et cartes-liens ci-dessous. */
body.v2 .v2-skip {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    /* Masqué au-dessus de la page, PAS à left:-9999px : en arabe (RTL) le contenu qui
       dépasse à gauche devient défilable, et la page gagnait ~10 000 px de défilement
       horizontal sur toutes les pages. */
    transform: translateY(-150%);
    background: var(--v2-blue);
    color: #fff;
    padding: 0.75rem 1.25rem;
    z-index: 100;
}

/* Même qualification body.v2 que la règle de base : sinon (spécificité inférieure) le lien
   restait masqué au clavier — il n'apparaissait jamais au focus. */
body.v2 .v2-skip:focus {
    transform: none;
}

.v2-container {
    max-width: var(--v2-container);
    margin-inline: auto;
    padding-inline: var(--v2-pad-x);
}

/* --- Boutons -------------------------------------------------------------- */

.v2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--v2-tap);
    padding: 0.875rem 1.625rem;
    border: 1px solid transparent;
    border-radius: var(--v2-radius-sm);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--v2-duration-fast) var(--v2-ease-out),
                border-color var(--v2-duration-fast) var(--v2-ease-out),
                transform var(--v2-duration-fast) var(--v2-ease-out),
                box-shadow var(--v2-duration-fast) var(--v2-ease-out);
}

/* Micro-interaction partagée par toutes les variantes (primary/ghost/light/store) :
   légère élévation au survol, retour + ombre interne au clic (sensation de
   pression). Le focus clavier (.v2 button:focus-visible, plus haut dans ce
   fichier) reste inchangé et prioritaire sur ces états pointeur. */
.v2-btn:hover {
    transform: translateY(-1px);
}

.v2-btn:active {
    transform: translateY(0);
    box-shadow: inset 0 1px 3px rgba(23, 33, 43, 0.16);
}

.v2-btn.v2-btn--primary {
    background: var(--v2-blue);
    color: #fff;
}

.v2-btn.v2-btn--primary:hover {
    background: var(--v2-blue-dark);
    color: #fff;
}

.v2-btn.v2-btn--ghost {
    background: var(--v2-white);
    border-color: var(--v2-border-soft);
    color: var(--v2-ink);
}

.v2-btn.v2-btn--ghost:hover {
    border-color: var(--v2-ink-3);
    color: var(--v2-ink);
}

.v2-btn.v2-btn--light {
    background: #fff;
    color: var(--v2-blue);
}

/* --- Filet tricolore et en-tête ------------------------------------------ */

.v2-flagline {
    display: flex;
    height: 4px;
}

.v2-flagline span {
    flex: 1;
}

.v2-flagline span:nth-child(1) { background: var(--v2-blue); }
.v2-flagline span:nth-child(2) { background: var(--v2-sand); }
.v2-flagline span:nth-child(3) { background: var(--v2-red); }

/* --- Hero ----------------------------------------------------------------- */

.v2-hero {
    display: grid;
    grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
    padding-block: var(--v2-gap-xl) var(--v2-gap-lg);
}

.v2-hero__text {
    display: flex;
    flex-direction: column;
    gap: 1.375rem;
    align-items: flex-start;
}

/* Éditorial, pas un badge SaaS : un simple chapeau de magazine (filet + texte) */
.v2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    color: var(--v2-red);
    font-size: var(--v2-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Identité française sobre : un filet tricolore miniature (même principe que
   .v2-flagline, sans le réutiliser tel quel), réservé à deux points d'entrée
   éditoriaux — pas de bleu/blanc/rouge disséminé sur toute la page. */
.v2-triband {
    display: inline-flex;
    flex: none;
    width: 1.75rem;
    height: 3px;
    border-block: 1px solid var(--v2-border-soft);
}

.v2-triband span {
    flex: 1;
}

.v2-triband span:nth-child(1) { background: var(--v2-blue); }
.v2-triband span:nth-child(2) { background: var(--v2-border-soft); }
.v2-triband span:nth-child(3) { background: var(--v2-red); }

.v2-triband--light {
    border-color: rgba(255, 255, 255, 0.3);
}

.v2-triband--light span:nth-child(1) { background: #A9C4DC; }
.v2-triband--light span:nth-child(2) { background: var(--v2-white); }
.v2-triband--light span:nth-child(3) { background: var(--v2-red); }

.v2-hero h1 {
    font-size: var(--v2-text-4xl);
    line-height: 1.1;
}

/* Accent unique et sobre : couleur pleine + soulignement, pas de dégradé */
.v2-accent {
    color: var(--v2-red);
    text-decoration: underline;
    text-decoration-color: rgba(var(--v2-red-rgb), 0.35);
    text-decoration-thickness: 3px;
    text-underline-offset: 0.11em;
}

.v2-hero__desc {
    margin: 0;
    max-width: 32rem;
    font-size: var(--v2-text-lg);
    color: var(--v2-ink-2);
}

/* Repères chiffrés : contenu civique, mesurable — pas de storytelling gratuit */
.v2-hero__stats {
    display: flex;
    gap: 1.75rem;
    padding-block: 1rem;
    border-block: 1px solid var(--v2-border);
    width: 100%;
}

.v2-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-left: 1.75rem;
    border-left: 1px solid var(--v2-border);
}

.v2-stat:first-child {
    padding-left: 0;
    border-left: none;
}

.v2-stat__num {
    font-family: var(--v2-font-title);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--v2-blue);
    line-height: 1;
}

.v2-stat__label {
    font-size: var(--v2-text-xs);
    color: var(--v2-ink-3);
}

.v2-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.v2-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    font-size: var(--v2-text-sm);
    color: var(--v2-ink-2);
}

.v2-trust li {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
}

.v2-list-reset {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Entrée en scène du texte du hero : un seul passage au chargement,
   respecté par prefers-reduced-motion (voir tokens.css). */
.v2-hero__text > * {
    animation: v2-hero-in var(--v2-duration-slow) var(--v2-ease-out) both;
}

.v2-hero__text > *:nth-child(1) { animation-delay: 0.02s; }
.v2-hero__text > *:nth-child(2) { animation-delay: 0.08s; }
.v2-hero__text > *:nth-child(3) { animation-delay: 0.14s; }
.v2-hero__text > *:nth-child(4) { animation-delay: 0.2s; }
.v2-hero__text > *:nth-child(5) { animation-delay: 0.26s; }
.v2-hero__text > *:nth-child(6) { animation-delay: 0.32s; }

@keyframes v2-hero-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.v2-hero__media {
    animation: v2-hero-in var(--v2-duration-slow) var(--v2-ease-out) 0.16s both;
}

/* --- Aperçu produit "en direct" (hero, visiteur anonyme) ------------------
   Seule surface du hero à porter une ombre marquée : elle doit lire comme
   une fenêtre d'application réelle, pas comme une carte parmi d'autres. */
.v2-demo {
    background: var(--v2-white);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-lg);
    padding: 1.75rem 1.75rem 1.5rem;
    box-shadow: 0 32px 64px -32px rgba(var(--v2-blue-rgb), 0.3), var(--v2-shadow-lift);
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}

.v2-demo__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.v2-demo__cat {
    font-size: var(--v2-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--v2-blue);
}

.v2-demo__progress-label {
    font-size: var(--v2-text-xs);
    color: var(--v2-ink-3);
    font-variant-numeric: tabular-nums;
}

.v2-demo__rail {
    height: 6px;
    border-radius: 4px;
    background: var(--v2-rail);
    overflow: hidden;
}

.v2-demo__fill {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 4px;
    background: var(--v2-blue);
    transition: width var(--v2-duration-slow) var(--v2-ease-out);
}

.v2-demo__question {
    margin: 0;
    font-size: var(--v2-text-lg);
    font-weight: 600;
    line-height: 1.4;
    min-height: 2.8em;
}

.v2-demo__choices {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.v2-demo__choice {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6875rem 0.875rem;
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-sm);
    font-size: var(--v2-text-sm);
    color: var(--v2-ink-2);
    transition: border-color var(--v2-duration-base) var(--v2-ease-out),
                background var(--v2-duration-base) var(--v2-ease-out),
                color var(--v2-duration-base) var(--v2-ease-out);
}

.v2-demo__choice::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--v2-border-soft);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 9px 9px;
    transition: background-color var(--v2-duration-base) var(--v2-ease-out),
                border-color var(--v2-duration-base) var(--v2-ease-out);
}

.v2-demo__choice.is-selected {
    border-color: var(--v2-blue);
    background: var(--v2-blue-tint);
    color: var(--v2-ink);
}

.v2-demo__choice.is-selected::before {
    border-color: var(--v2-blue);
    background-color: var(--v2-blue);
}

.v2-demo__choice.is-correct {
    border-color: var(--v2-success);
    background: var(--v2-success-tint);
    color: var(--v2-ink);
    font-weight: 600;
}

.v2-demo__choice.is-correct::before {
    border-color: var(--v2-success);
    background-color: var(--v2-success);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 9 17 20 6'/%3E%3C/svg%3E");
}

.v2-demo__explain {
    margin: 0;
    padding-top: 0.875rem;
    border-top: 1px dashed var(--v2-border);
    font-size: var(--v2-text-xs);
    color: var(--v2-ink-3);
    min-height: 2.6em;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--v2-duration-slow) var(--v2-ease-out),
                transform var(--v2-duration-slow) var(--v2-ease-out);
}

.v2-demo--answered .v2-demo__explain {
    opacity: 1;
    transform: translateY(0);
}

/* --- Carte de progression (hero, visiteur connecté) ------------------------ */

.v2-progresscard {
    background: var(--v2-white);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-lg);
    padding: 1.375rem 1.5rem;
}

.v2-progresscard__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.875rem;
}

.v2-progresscard__cta {
    font-size: var(--v2-text-sm);
    font-weight: 600;
}

.v2-progress__row {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 0.6875rem;
}

.v2-progress__label {
    display: flex;
    justify-content: space-between;
    font-size: var(--v2-text-sm);
}

.v2-progress__rail {
    height: 8px;
    border-radius: 4px;
    background: var(--v2-rail);
    overflow: hidden;
}

.v2-progress__fill {
    /* <span> est inline par défaut : "width" n'a aucun effet sans ce display,
       ce qui laissait la barre de progression visuellement toujours vide. */
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--v2-blue);
    transition: width var(--v2-duration-slow) var(--v2-ease-out);
}

.v2-progress__fill--low {
    background: var(--v2-red);
}

/* --- Sections ------------------------------------------------------------- */

.v2-section {
    padding-block: 0 var(--v2-gap-lg);
}

.v2-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--v2-gap-sm);
    margin-bottom: var(--v2-gap);
}

.v2-section h2 {
    font-size: var(--v2-text-2xl);
}

.v2-grid {
    display: grid;
    gap: var(--v2-gap);
}

.v2-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v2-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.125rem; }
.v2-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.v2-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }

/* Cartes de titres */

.v2-tile {
    display: flex;
    flex-direction: column;
    gap: 0.6875rem;
    background: var(--v2-white);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius);
    padding: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.v2-tile:hover {
    transform: translateY(-3px);
    border-color: var(--v2-border-soft);
    box-shadow: var(--v2-shadow-lift);
}

.v2-tile:active {
    transform: translateY(-1px);
}

.v2-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 0.75rem;
    background: var(--v2-blue-tint-2);
    color: var(--v2-blue);
    transition: transform 0.2s ease;
}

.v2-tile:hover .v2-tile__icon {
    transform: scale(1.08);
}

.v2-tile__icon--alt {
    background: var(--v2-red-tint);
    color: var(--v2-red);
}

.v2-tile__icon--neutral {
    background: var(--v2-sand);
    color: var(--v2-ink-2);
}

.v2-tile__title {
    font-size: var(--v2-text-xl);
    font-weight: 600;
}

.v2-tile__desc {
    font-size: var(--v2-text-sm);
    color: var(--v2-ink-2);
    margin: 0;
}

/* Navigation éditoriale des thèmes — index à filets, pas des cartes photo */

.v2-index {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-block: 1px solid var(--v2-border);
}

.v2-index__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.75rem 1.375rem 1.5rem;
    border-left: 1px solid var(--v2-border);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
}

.v2-index__item:first-child {
    border-left: none;
    padding-left: 0;
}

.v2-index__item::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: var(--v2-blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--v2-duration-base) var(--v2-ease-out);
}

.v2-index__item:hover::after,
.v2-index__item:focus-visible::after {
    transform: scaleX(1);
}

.v2-index__num {
    font-family: var(--v2-font-title);
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--v2-border-soft);
    transition: color var(--v2-duration-base) var(--v2-ease-out);
}

.v2-index__item:hover .v2-index__num {
    color: var(--v2-blue);
}

.v2-index__body {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.v2-index__name {
    font-size: var(--v2-text-lg);
    font-weight: 600;
    color: var(--v2-ink);
}

.v2-index__hint {
    font-size: var(--v2-text-xs);
    color: var(--v2-ink-3);
}

.v2-index__arrow {
    margin-top: auto;
    color: var(--v2-ink-3);
    transition: transform var(--v2-duration-base) var(--v2-ease-out),
                color var(--v2-duration-base) var(--v2-ease-out);
}

.v2-index__item:hover .v2-index__arrow {
    transform: translateX(4px);
    color: var(--v2-blue);
}

/* Parcours ("Comment ça marche") : une séquence reliée par un filet, pas une
   grille de cartes — chaque étape et chaque filet se révèlent l'un après
   l'autre au défilement (delais croissants ci-dessous, ordre des enfants). */

.v2-path {
    display: flex;
    align-items: flex-start;
}

.v2-path__step {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    flex: 1 1 0;
    min-width: 0;
    padding-right: 1.25rem;
}

.v2-path__line {
    flex: 1 1 auto;
    align-self: flex-start;
    height: 1px;
    min-width: 1.5rem;
    max-width: 4.5rem;
    margin-top: 1.15rem;
    background: var(--v2-border-soft);
    transform-origin: left;
    opacity: 1;
}

.v2-path__num {
    font-family: var(--v2-font-title);
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--v2-blue);
    line-height: 1;
}

.v2-path__title {
    font-size: var(--v2-text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--v2-ink);
}

.v2-path__desc {
    margin: 0;
    font-size: var(--v2-text-sm);
    color: var(--v2-ink-2);
    max-width: 15rem;
}

.v2-path > *:nth-child(1) { animation-delay: 0s; }
.v2-path > *:nth-child(2) { animation-delay: 0.07s; }
.v2-path > *:nth-child(3) { animation-delay: 0.14s; }
.v2-path > *:nth-child(4) { animation-delay: 0.21s; }
.v2-path > *:nth-child(5) { animation-delay: 0.28s; }
.v2-path > *:nth-child(6) { animation-delay: 0.35s; }
.v2-path > *:nth-child(7) { animation-delay: 0.42s; }

@keyframes v2-path-line-in {
    from { opacity: 0; transform: scaleX(0); }
    to   { opacity: 1; transform: scaleX(1); }
}

@supports (animation-timeline: view()) {
    .v2-path__line {
        opacity: 0;
        animation: v2-path-line-in linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 28%;
    }

    @media (prefers-reduced-motion: reduce) {
        .v2-path__line {
            animation: none;
            opacity: 1;
            transform: none;
        }
    }
}

/* Étapes (badge numéroté générique, réutilisé ailleurs que dans le parcours) */

.v2-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 0.5625rem;
    background: var(--v2-blue);
    color: #fff;
    font-size: var(--v2-text-sm);
    font-weight: 700;
}

/* Programmes ("Trois titres, trois programmes") : intro éditoriale à gauche,
   liste numérotée à droite — composition asymétrique, distincte de l'index
   des 5 thèmes (symétrique) et de la liste des guides (pleine largeur). */

.v2-programs {
    display: grid;
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.v2-programs__intro h2 {
    font-size: var(--v2-text-2xl);
    line-height: 1.2;
    margin-bottom: 0.875rem;
}

.v2-programs__lead {
    margin: 0 0 1.125rem;
    font-size: var(--v2-text-sm);
    color: var(--v2-ink-2);
}

.v2-programs__link {
    font-size: var(--v2-text-sm);
    font-weight: 600;
    text-decoration: none;
}

.v2-programs__list {
    display: flex;
    flex-direction: column;
}

.v2-program {
    display: flex;
    align-items: baseline;
    gap: 1.5rem;
    padding-block: 1.5rem;
    border-top: 1px solid var(--v2-border);
    text-decoration: none;
    color: inherit;
}

.v2-programs__list .v2-program:last-child {
    border-bottom: 1px solid var(--v2-border);
}

.v2-program__num {
    flex: none;
    font-family: var(--v2-font-title);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--v2-border-soft);
    transition: color var(--v2-duration-base) var(--v2-ease-out);
}

.v2-program:hover .v2-program__num {
    color: var(--v2-blue);
}

.v2-program__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.v2-program__name {
    font-family: var(--v2-font-title);
    font-size: var(--v2-text-lg);
    font-weight: 600;
    color: var(--v2-ink);
}

.v2-program__desc {
    font-size: var(--v2-text-sm);
    color: var(--v2-ink-2);
}

.v2-program__arrow {
    flex: none;
    align-self: center;
    color: var(--v2-ink-3);
    transition: transform var(--v2-duration-base) var(--v2-ease-out),
                color var(--v2-duration-base) var(--v2-ease-out);
}

.v2-program:hover .v2-program__arrow {
    transform: translateX(4px);
    color: var(--v2-blue);
}

/* Guides officiels : index éditorial pleine largeur (chip + titre + flèche),
   fonction différente des programmes — pas une nouvelle grille de cartes. */

.v2-guidelist {
    display: flex;
    flex-direction: column;
}

.v2-guiderow {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding-block: 1.25rem;
    border-top: 1px solid var(--v2-border);
    text-decoration: none;
    color: inherit;
}

.v2-guidelist .v2-guiderow:last-child {
    border-bottom: 1px solid var(--v2-border);
}

.v2-guiderow .v2-chip {
    flex: none;
}

.v2-guiderow__title {
    flex: 1;
    min-width: 0;
    font-family: var(--v2-font-title);
    font-size: var(--v2-text-lg);
    font-weight: 600;
    color: var(--v2-ink);
}

.v2-guiderow__arrow {
    flex: none;
    color: var(--v2-ink-3);
    transition: transform var(--v2-duration-base) var(--v2-ease-out),
                color var(--v2-duration-base) var(--v2-ease-out);
}

.v2-guiderow:hover .v2-guiderow__arrow {
    transform: translateX(4px);
    color: var(--v2-blue);
}

/* Bandeau sombre */

.v2-band {
    background: var(--v2-blue-deep);
    color: #fff;
    border-radius: var(--v2-radius-lg);
    padding: 2.375rem 2.625rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--v2-gap-lg);
    margin-bottom: var(--v2-gap-lg);
}

.v2-band h2 {
    font-size: var(--v2-text-3xl);
    line-height: 1.22;
}

.v2-band__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.5625rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #A9C4DC;
    margin-bottom: 0.6875rem;
}

.v2-band p {
    margin: 0.6875rem 0 0;
    max-width: 38rem;
    color: #D3E0EB;
}

/* Guides */

body.v2 .v2-guide {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    background: var(--v2-white);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius);
    padding: 1.375rem;
    text-decoration: none;
    color: var(--v2-ink);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.v2-guide:hover {
    transform: translateY(-3px);
    box-shadow: var(--v2-shadow-lift);
    color: var(--v2-ink);
}

.v2-guide:active {
    transform: translateY(-1px);
}

.v2-chip {
    align-self: flex-start;
    padding: 0.3125rem 0.625rem;
    border-radius: 0.5rem;
    background: var(--v2-blue-tint);
    color: var(--v2-ink-2);
    font-size: 0.75rem;
    font-weight: 600;
}

.v2-guide__title {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
}

.v2-meta {
    font-size: var(--v2-text-xs);
    color: var(--v2-ink-3);
}

/* Application mobile */

.v2-app {
    background: var(--v2-white);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-lg);
    padding: 2.25rem 2.625rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--v2-gap-xl);
    margin-bottom: var(--v2-gap-lg);
}

.v2-app__text {
    flex: 1 1 22rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    align-items: flex-start;
}

.v2-app__text h2 {
    font-size: var(--v2-text-3xl);
    line-height: 1.2;
}

.v2-btn.v2-store {
    background: var(--v2-blue-deep);
    color: #fff;
    border-color: var(--v2-blue-deep);
    transition: background-color var(--v2-duration-base) var(--v2-ease-out),
                border-color var(--v2-duration-base) var(--v2-ease-out),
                transform var(--v2-duration-fast) var(--v2-ease-out),
                box-shadow var(--v2-duration-fast) var(--v2-ease-out);
}

.v2-btn.v2-store:hover {
    background: var(--v2-ink);
    border-color: var(--v2-ink);
    color: #fff;
}

.v2-app img {
    width: 290px;
    height: auto;
    display: block;
}

/* Boutons de store désactivés tant que les apps ne sont pas publiées (voir
   commentaire dans home_v2.html pour réactiver les vrais liens). */
.v2-btn.v2-store.v2-store--soon {
    opacity: 0.85;
    cursor: default;
    box-shadow: none;
}

.v2-btn.v2-store.v2-store--soon:hover {
    background: var(--v2-blue-deep);
    border-color: var(--v2-blue-deep);
    transform: none;
}

.v2-app__media {
    position: relative;
}

.v2-app__soon-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: var(--v2-red);
    color: var(--v2-white);
    font-size: var(--v2-text-xs);
    font-weight: 600;
    padding: 0.3125rem 0.75rem;
    border-radius: var(--v2-radius-pill);
    box-shadow: var(--v2-shadow-lift);
    z-index: 1;
}

.v2-app__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
    padding: 0.375rem 0.875rem;
    background: var(--v2-sand);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-pill);
    font-size: var(--v2-text-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--v2-blue);
}

.v2-app__eyebrow-dots {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--v2-red);
    flex-shrink: 0;
}

.v2-app__highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
}

.v2-app__highlight {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    background: var(--v2-blue-tint);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-sm);
    font-size: var(--v2-text-sm);
    font-weight: 600;
    color: var(--v2-blue);
}

.v2-app__highlight-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    border-radius: var(--v2-radius-sm);
    background: var(--v2-blue);
    color: var(--v2-white);
}

.v2-app__highlight-icon--red {
    background: var(--v2-red);
}

.v2-app__caption {
    font-size: var(--v2-text-xs);
    color: var(--v2-ink-3);
    font-style: italic;
}

.v2-app__trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.875rem;
    padding-top: 1.25rem;
    margin-top: 1.25rem;
    border-top: 1px solid var(--v2-border);
    font-size: var(--v2-text-xs);
    color: var(--v2-ink-3);
}

.v2-app__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
}

.v2-app__trust-item--main {
    color: var(--v2-ink-2);
    font-weight: 500;
}

.v2-app__trust-item--main svg {
    color: var(--v2-blue);
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .v2-app__highlights { grid-template-columns: minmax(0, 1fr); }
    .v2-app__trust { justify-content: flex-start; }
}

/* Partenaires */

.v2-partner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 76px;
    padding: 0.75rem;
    background: var(--v2-white);
    border: 1px solid var(--v2-border);
    border-radius: 0.875rem;
}

.v2-partner img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Pied de page */

.v2-footer {
    background: var(--v2-white);
    border-top: 1px solid var(--v2-border);
    padding-block: 2.125rem;
    margin-top: var(--v2-gap-lg);
}

.v2-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--v2-gap-lg);
}

.v2-footer__brand {
    max-width: 24rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.v2-footer__brand img {
    height: 60px;
    width: auto;
    /* .v2-footer__brand est un flex column (align-items:stretch par défaut) :
       sans ça, l'image est étirée à la largeur du conteneur au lieu de
       garder sa taille intrinsèque. */
    align-self: flex-start;
}

.v2-footer__brand p {
    margin: 0;
    font-size: var(--v2-text-xs);
    color: var(--v2-ink-3);
}

.v2-footer__cols {
    display: flex;
    flex-wrap: wrap;
    gap: 3.5rem;
}

.v2-footer__col {
    display: flex;
    flex-direction: column;
    gap: 0.5625rem;
    font-size: var(--v2-text-xs);
}

.v2-footer__col strong {
    font-size: var(--v2-text-xs);
    color: var(--v2-ink);
}

.v2-footer__col a {
    color: var(--v2-ink-2);
    text-decoration: none;
}

.v2-footer__col a:hover {
    text-decoration: underline;
}

/* --- Révélation au défilement (CSS scroll-driven animations) -------------
   Progressive enhancement : sans support, les éléments restent simplement
   visibles (état par défaut), aucune dépendance JS. */
@supports (animation-timeline: view()) {
    .v2-reveal {
        animation: v2-reveal-in linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 28%;
    }

    .v2-grid > .v2-reveal:nth-child(2) { animation-delay: 0.05s; }
    .v2-grid > .v2-reveal:nth-child(3) { animation-delay: 0.1s; }
    .v2-grid > .v2-reveal:nth-child(4) { animation-delay: 0.15s; }
    .v2-grid > .v2-reveal:nth-child(5) { animation-delay: 0.2s; }
    .v2-grid > .v2-reveal:nth-child(6) { animation-delay: 0.25s; }

    /* `animation-duration` ne pilote rien sur une timeline liée au scroll :
       sa progression dépend uniquement de la position de défilement, jamais
       du temps. La règle globale prefers-reduced-motion (tokens.css, qui ne
       réduit que la durée) est donc sans effet ici ; on neutralise
       explicitement l'animation elle-même pour ce cas précis. */
    @media (prefers-reduced-motion: reduce) {
        .v2-reveal {
            animation: none;
            opacity: 1;
            transform: none;
        }
    }
}

@keyframes v2-reveal-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Impression / export PDF : la mise en page n'est jamais défilée, donc la
   progression de l'animation liée au scroll resterait figée à 0. On force
   l'état final pour ne jamais imprimer une section vide. */
@media print {
    .v2-reveal {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* --- Adaptations tablette et mobile -------------------------------------- */

@media (max-width: 1080px) {
    /* Hero mobile : le produit interactif doit apparaître tôt, pas après
       tout le texte marketing (identité + promesse + CTA, puis la démo,
       puis les repères chiffrés). Réordonnancement visuel pur : le DOM et
       l'ordre de lecture au clavier/lecteur d'écran restent inchangés. */
    .v2-hero {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 1.75rem;
    }
    .v2-hero__text { display: contents; }
    .v2-hero__text > .v2-eyebrow     { order: 1; }
    .v2-hero__text > h1              { order: 2; }
    .v2-hero__text > .v2-hero__desc  { order: 3; }
    .v2-hero__text > .v2-actions     { order: 4; }
    .v2-hero__media                  { order: 5; }
    .v2-hero__text > .v2-hero__stats { order: 6; }
    .v2-hero__text > .v2-trust       { order: 7; }

    .v2-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .v2-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .v2-index { grid-template-columns: minmax(0, 1fr); }
    .v2-index__item {
        flex-direction: row;
        align-items: center;
        gap: 1.25rem;
        border-left: none;
        border-top: 1px solid var(--v2-border);
        padding: 1.25rem 0;
        overflow: visible;
    }
    .v2-index__item:first-child { border-top: none; }
    .v2-index__body { flex: 1; }

    .v2-programs { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}

@media (max-width: 640px) {
    .v2-hero__stats { gap: 1.125rem; }
    .v2-stat { padding-left: 1.125rem; }
    .v2-demo { padding: 1.375rem 1.375rem 1.125rem; }

    /* Densité mobile : la page ne doit pas s'allonger uniquement parce que
       les sections desktop sont empilées — on resserre l'espacement entre
       sections sans retirer de contenu (voir aussi .v2-hero gap ci-dessus). */
    .v2-hero { gap: 1.375rem; padding-block: var(--v2-gap-lg) 1.75rem; }
    .v2-section { padding-block: 0 1.75rem; }
    .v2-section__head { margin-bottom: 1.125rem; }
    .v2-band,
    .v2-app { margin-bottom: 1.75rem; }
}

@media (max-width: 720px) {
    .v2-grid--3,
    .v2-grid--4 { grid-template-columns: minmax(0, 1fr); }
    .v2-grid--5,
    .v2-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v2-band,
    .v2-app { padding: 1.5rem; }
    .v2-actions .v2-btn { flex: 1 1 100%; }
    .v2-app img { width: 100%; max-width: 290px; margin-inline: auto; }

    /* Parcours vertical : le filet horizontal devient un court trait vertical
       aligné sous le numéro (pas d'écrasement de la timeline horizontale). */
    .v2-path { flex-direction: column; gap: 1.375rem; }
    .v2-path__step { padding-right: 0; }
    .v2-path__line {
        width: 1px;
        min-width: 0;
        max-width: none;
        height: 1.25rem;
        margin: 0 0 0 0.95rem;
        animation: none !important;
        opacity: 1;
        transform: none;
    }

    .v2-program { align-items: flex-start; gap: 1rem; }

    .v2-guiderow { align-items: flex-start; gap: 0.875rem; }
}

/* --- Utilitaires --------------------------------------------------------- */

.v2-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- CTA final (remplace l'ancienne section "Nos centres partenaires") --- */

.v2-finalcta {
    text-align: center;
    padding: var(--v2-gap-xl) var(--v2-pad-x);
    border-radius: var(--v2-radius-lg);
    background: linear-gradient(135deg, var(--v2-blue-tint) 0%, var(--v2-red-tint) 100%);
    border: 1px solid var(--v2-border-soft);
}

.v2-finalcta__title {
    font-family: var(--v2-font-title);
    font-weight: 700;
    font-size: var(--v2-text-2xl);
    color: var(--v2-blue);
    margin-bottom: 0.625rem;
}

.v2-finalcta__text {
    color: var(--v2-ink-2);
    font-size: var(--v2-text-base);
    max-width: 480px;
    margin: 0 auto 1.5rem;
    line-height: 1.6;
}

.v2-finalcta__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.875rem;
}

@media (max-width: 640px) {
    .v2-finalcta__actions { flex-direction: column; align-items: stretch; }
    .v2-finalcta__actions .v2-btn { width: 100%; text-align: center; }
}