@import 'tailwindcss';

@source '../views';
@source '../../app';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';

@theme {
    /* Typographie : UNE SEULE famille sur tout le site, titres compris.
       --font-serif est conserve comme ALIAS vers la meme pile : si une vue
       future emploie encore « font-serif », elle rendra du sans plutot que de
       ressusciter un Georgia dont on ne veut plus. */
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-serif: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

    /*
     * Palette sémantique, bascule clair/sombre par variables (voir plus bas).
     * Direction artistique validée : navy profond + liseré tricolore saturé.
     */
    --color-page: #ffffff;      /* fond de page */
    --color-surface: #ffffff;   /* cartes, en-têtes, champs */
    --color-paper: #f4f6f8;     /* fonds secondaires */
    --color-paper-2: #eaeff4;
    --color-title: #0d1b2a;     /* navy de la charte (titres) */
    --color-title-2: #123a63;
    --color-ink: #1a2b3f;       /* texte courant */
    --color-muted: #5b6b7d;
    --color-line: #dbe2ea;

    /* Fonds constants (identiques dans les deux thèmes) */
    --color-navy: #0d1b2a;
    --color-navy-2: #123a63;
    --color-navy-3: #0d1b2a;

    /* Boutons & surfaces interactives primaires, s'éclaircit en sombre */
    --color-primary: #0d1b2a;

    /* Accents républicains, éclaircis en sombre pour le contraste des textes/liens */
    --color-rep-blue: #000091;
    --color-rep-red: #e30613;

    /* Vert « en vigueur / action ». Fonce en clair : le vert vif historique (#10b981)
       ne tenait qu'a 2,3:1 sur son propre fond teinte (echec AA). */
    --color-ok: #047857;

    /* Sémantique, niveaux d'alerte du module Urgence */
    --color-alert-info: #0a6c74;
    --color-alert-vigilance: #b45309;
    --color-alert-action: #b45309;
    --color-alert-urgence: #c2410c;
    --color-alert-critique: #b00020;
}

@layer base {
    /* Thème sombre automatique, palette de la maquette validée */
    @media (prefers-color-scheme: dark) {
        :root {
            --color-ok: #10b981;
            --color-page: #0d1b2a;
            --color-surface: #101f31;
            --color-paper: #0e1b2b;
            --color-paper-2: #16273c;
            --color-title: #eef3f9;
            --color-title-2: #9fc0e6;
            --color-ink: #d5e0ec;
            --color-muted: #8fa0b4;
            --color-line: #22364e;
            --color-rep-blue: #8ea2ff;
            --color-rep-red: #ff5a64;
            --color-primary: #1d4d80;
        }
    }

    /* Thème choisi explicitement dans le mode accessibilité : il prime
       toujours sur la préférence du système, dans les deux sens. */
    :root[data-theme="clair"] {
        --color-ok: #047857;
        --color-page: #ffffff;
        --color-surface: #ffffff;
        --color-paper: #f4f6f8;
        --color-paper-2: #eaeff4;
        --color-title: #0d1b2a;
        --color-title-2: #1b3a5c;
        --color-ink: #1f2937;
        --color-muted: #5b6b7c;
        --color-line: #dfe5ec;
        --color-rep-blue: #000091;
        --color-rep-red: #e30613;
        --color-primary: #0d1b2a;
    }
    :root[data-theme="sombre"] {
        --color-ok: #10b981;
        --color-page: #0d1b2a;
        --color-surface: #101f31;
        --color-paper: #0e1b2b;
        --color-paper-2: #16273c;
        --color-title: #eef3f9;
        --color-title-2: #9fc0e6;
        --color-ink: #d5e0ec;
        --color-muted: #8fa0b4;
        --color-line: #22364e;
        --color-rep-blue: #8ea2ff;
        --color-rep-red: #ff5a64;
        --color-primary: #1d4d80;
    }
    /* Contraste renforcé : noir et blanc francs, liserés nets. */
    :root[data-theme="contraste"] {
        --color-ok: #10b981;
        --color-page: #000000;
        --color-surface: #0b0b0b;
        --color-paper: #101010;
        --color-paper-2: #1a1a1a;
        --color-title: #ffffff;
        --color-title-2: #ffe600;
        --color-ink: #ffffff;
        --color-muted: #e0e0e0;
        --color-line: #ffffff;
        --color-rep-blue: #7cc4ff;
        --color-rep-red: #ff7a7a;
        --color-primary: #ffe600;
    }
    :root[data-theme="contraste"] a { text-decoration: underline; }

    /* Confort de lecture : taille et graisse pilotées par le lecteur. */
    :root { --a11y-scale: 1; }
    html { font-size: calc(100% * var(--a11y-scale)); }
    :root[data-gras="1"] body { font-weight: 600; }
    :root[data-gras="1"] p,
    :root[data-gras="1"] li { font-weight: 600; }
    :root[data-interlignage="1"] p,
    :root[data-interlignage="1"] li { line-height: 2; }
    :root[data-justif="0"] .text-justify { text-align: left !important; }
    :root[data-anim="0"] .reveal,
    :root[data-anim="0"] .reveal-scale { opacity: 1 !important; transform: none !important; transition: none !important; }

    /* Police adaptée aux lecteurs dyslexiques : Verdana (formes larges, jambages
       ouverts, disponible partout sans téléchargement) prime sur la police du
       site. Les études ne montrent pas d'avantage des polices « spéciales
       dyslexie » sur une humaniste large et bien espacée. */
    :root[data-police="1"] body,
    :root[data-police="1"] h1,
    :root[data-police="1"] h2,
    :root[data-police="1"] h3,
    :root[data-police="1"] h4 { font-family: Verdana, 'DejaVu Sans', var(--font-sans); }

    /* Espacement lettres/mots : valeurs du critère WCAG 1.4.12. */
    :root[data-espacement="1"] body { letter-spacing: .12em; word-spacing: .16em; }

    /* Liens toujours soulignés : la couleur ne peut pas rester le seul signal. */
    :root[data-liens="1"] a { text-decoration: underline; }

    /* Back-office : la colonne latérale fixe décale le contenu de toutes les
       pages admin d'un coup — aucun écran à modifier individuellement. */
    @media (min-width: 64rem) {
        body:has([data-admin-sidebar]) { padding-left: 14rem; }
        body:has([data-admin-sidebar]) > header,
        body:has([data-admin-sidebar]) > footer { display: none; }
    }

    /* Cibles tactiles : 44 px sur écran tactile pour les commandes du panneau. */
    @media (pointer: coarse) {
        [data-a11y-panel] button,
        [data-a11y-panel] label,
        [data-a11y-toggle] { min-height: 44px; min-width: 44px; }
    }

    html { color-scheme: light dark; }

    body {
        background: var(--color-page);
        color: var(--color-ink);
        -webkit-font-smoothing: antialiased;
        font-feature-settings: 'kern';
    }
    h1, h2, h3, h4 {
        font-family: var(--font-sans);
        text-wrap: balance;
    }
    a { text-underline-offset: 2px; }
    :focus-visible {
        outline: 2px solid var(--color-rep-blue);
        outline-offset: 2px;
        border-radius: 2px;
    }
}

@layer components {
    /*
     * Liseré tricolore, signature graphique.
     * Couleurs volontairement FIXES (saturées) dans les deux thèmes.
     */
    .tricolore {
        height: 3px;
        background: linear-gradient(90deg,
            #2b4fd6 0 33.33%,
            #ffffff 33.33% 66.66%,
            #e30613 66.66% 100%);
    }
    .tricolore-tick {
        display: inline-block;
        width: 34px;
        height: 3px;
        border-radius: 2px;
        background: linear-gradient(90deg,
            #2b4fd6 0 33%, #ffffff 33% 66%, #e30613 66% 100%);
    }

    /* Hero, reprend exactement le cover de la maquette validée (deux thèmes) */
    .hero-cover {
        background:
            radial-gradient(120% 120% at 88% -10%, rgba(0, 0, 145, .30), transparent 55%),
            linear-gradient(160deg, #061627 0%, #0a2647 48%, #123a63 100%);
    }

    .prose-legal { max-width: 68ch; line-height: 1.7; }
    .prose-legal p { margin-bottom: 1rem; }

    /* ---- Justification du texte courant ----
       Les paragraphes et les éléments de liste des zones de contenu sont
       justifiés des deux côtés, avec césure pour éviter les blancs excessifs.
       Le mode accessibilité peut repasser tout le site en alignement à gauche. */
    .prose-legal p,
    .prose-legal li,
    .texte-justifie p,
    .texte-justifie li {
        text-align: justify;
        hyphens: auto;
        -webkit-hyphens: auto;
    }
    /* Jamais de justification sur les libellés courts et les tableaux. */
    .prose-legal .encart-titre,
    .prose-legal figcaption,
    .texte-justifie th,
    .texte-justifie td { text-align: left; hyphens: manual; }

    .link-blue { color: var(--color-rep-blue); text-decoration: underline; }
    .link-blue:hover { opacity: .8; }

    /* ---- Animations (langage NegoCoach) ----
       Progressive enhancement : le contenu est VISIBLE par défaut. L'animation
       ne s'active que si JS a posé `.js` sur <html> (voir layout). Ainsi, si
       l'IntersectionObserver ne se déclenche jamais, rien ne reste caché. */
    .js .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
        will-change: opacity, transform;
    }
    /* Une fois l'animation jouée, on retire transform ET will-change : tous deux
       créent un contexte d'empilement qui emprisonnerait les pop-up des
       références sous les cartes de la colonne latérale. */
    .js .reveal.is-visible { opacity: 1; transform: none; will-change: auto; }

    .js .reveal-scale {
        opacity: 0;
        transform: scale(.97);
        transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
    }
    .js .reveal-scale.is-visible { opacity: 1; transform: none; will-change: auto; }

    .lift { transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s ease, border-color .3s ease, background-color .3s ease; }
    .lift:hover {
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--color-rep-red) 50%, var(--color-line));
        background-color: color-mix(in srgb, var(--color-rep-red) 14%, var(--color-surface));
        box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--color-rep-red) 45%, rgba(7, 27, 51, .25));
    }

    @media (prefers-reduced-motion: reduce) {
        .reveal, .reveal-scale { opacity: 1 !important; transform: none !important; }
        .lift, .lift:hover { transform: none !important; }
    }

    /* ---- Références juridiques justifiées (chip + pop-up) ---- */
    .ref-chip {
        position: relative;
        /* Au survol, le chip crée un contexte d'empilement prioritaire : son
           pop-up passe ainsi devant les cartes de la colonne latérale. */
        z-index: 1;
        display: inline-flex;
        align-items: baseline;
        gap: .25rem;
        padding: 0 .4rem;
        border-radius: .375rem;
        background: color-mix(in srgb, var(--color-rep-blue) 9%, transparent);
        color: var(--color-rep-blue);
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
        cursor: help;
    }
    .ref-chip:hover, .ref-chip:focus-visible {
        background: color-mix(in srgb, var(--color-rep-blue) 16%, transparent);
    }
    /* Référence absente du corpus : jamais de pop-up inventé */
    .ref-chip--unknown {
        background: color-mix(in srgb, var(--color-muted) 12%, transparent);
        color: var(--color-muted);
        cursor: default;
        border-bottom: 1px dashed var(--color-muted);
    }

    /* ---- Maillage interne : lien vers la fiche d'un terme cité ---- */
    .gloss-link {
        color: inherit;
        text-decoration: none;
        border-bottom: 1px dotted color-mix(in srgb, var(--color-rep-blue) 55%, transparent);
        transition: color .15s, border-color .15s;
    }
    .gloss-link:hover, .gloss-link:focus-visible {
        color: var(--color-rep-blue);
        border-bottom-color: var(--color-rep-blue);
    }

    .ref-pop {
        position: absolute;
        left: -0.5rem; /* aligné sur le chip : ne déborde jamais à gauche */
        bottom: calc(100% + 10px);
        transform: translateY(4px);
        width: min(24rem, calc(100vw - 2rem));
        padding: .9rem 1rem;
        border-radius: .65rem;
        border: 1px solid var(--color-line);
        background: var(--color-surface);
        color: var(--color-ink);
        box-shadow: 0 18px 45px -12px rgba(2, 8, 20, .45);
        opacity: 0;
        visibility: hidden;
        /* display:none au repos : un pop-up invisible (visibility) compte quand
           meme dans la largeur de defilement, et faisait deborder les pages du
           corpus a 320 px (reflow WCAG 1.4.10). La transition d'opacite est
           perdue a l'ouverture, arbitrage assume au profit du reflow. */
        display: none;
        transition: opacity .22s ease, transform .22s cubic-bezier(.2, .7, .2, 1);
        z-index: 90;
        white-space: normal;
        text-align: left;
        font-weight: 400;
    }
    .ref-pop::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 1.5rem;
        border: 7px solid transparent;
        border-top-color: var(--color-surface);
    }
    /* Uniquement au survol souris, et au focus CLAVIER (focus-visible ne se
       déclenche pas sur un clic souris, donc le pop-up ne « colle » jamais). */
    .ref-chip:hover,
    .ref-chip:focus-visible { z-index: 80; }
    .ref-chip:hover .ref-pop,
    .ref-chip:focus-visible .ref-pop {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    @media (prefers-reduced-motion: reduce) {
        .ref-pop { transition: none; }
    }
}

@layer components {
    /* ---------------------------------------------------------------
       Lecture d'un article de code : le gras porte l'idée, un surlignage
       discret guide l'oeil. Les panneaux d'analyse n'utilisent jamais de
       fond clair fixe : ils reprennent les couleurs du thème (clair ET
       sombre) et se distinguent par un liseré et un intitulé colorés.
       --------------------------------------------------------------- */
    .texte-loi strong {
        font-weight: 700;
        color: var(--color-title);
        background: linear-gradient(transparent 62%, color-mix(in srgb, var(--color-rep-blue) 22%, transparent) 62%);
        padding: 0 .05em;
    }
    .panneau {
        border: 1px solid var(--color-line);
        border-left-width: 3px;
        border-radius: .5rem;
        background: var(--color-surface);
        padding: 1.15rem 1.25rem;
    }
    .panneau strong { font-weight: 700; color: var(--color-title); }
    .panneau--essentiel { border-left-color: var(--color-rep-blue); background: var(--color-paper); }
    .panneau--force    { border-left-color: var(--color-ok); }
    .panneau--faiblesse{ border-left-color: #f59e0b; }
    .panneau--strategie{ border-left-color: var(--color-rep-red); }
    .panneau-titre {
        font-size: .95rem;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }
    .panneau--force .panneau-titre    { color: var(--color-ok); }
    .panneau--faiblesse .panneau-titre{ color: #d97706; }
    .panneau--strategie .panneau-titre{ color: var(--color-rep-red); }
    .panneau--essentiel .panneau-titre{ color: var(--color-rep-blue); }
}

@layer components {
    /* Pastilles d'état : lisibles en thème clair comme en thème sombre. */
    .pastille {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        border-radius: 9999px;
        padding: .15rem .6rem;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .02em;
        border: 1px solid;
    }
    .pastille--vigueur {
        color: var(--color-ok);
        border-color: color-mix(in srgb, var(--color-ok) 45%, transparent);
        background: color-mix(in srgb, var(--color-ok) 12%, transparent);
    }
    .pastille--attente {
        color: #d97706;
        border-color: color-mix(in srgb, #f59e0b 45%, transparent);
        background: color-mix(in srgb, #f59e0b 12%, transparent);
    }
    .encart-attente {
        border: 1px solid color-mix(in srgb, #f59e0b 45%, transparent);
        border-left-width: 3px;
        border-radius: .5rem;
        background: color-mix(in srgb, #f59e0b 10%, transparent);
        color: var(--color-ink);
    }
}

@layer components {
    /* ---------------------------------------------------------------
       Encarts colorés : jamais de fond clair figé. Le fond reste celui
       du thème, très légèrement teinté ; seuls le liseré et l'intitulé
       portent la couleur. Lisible en clair comme en sombre.
       --------------------------------------------------------------- */
    .encart {
        border: 1px solid var(--color-line);
        border-left-width: 3px;
        border-radius: .5rem;
        background: var(--color-paper);
        color: var(--color-ink);
    }
    .encart-titre {
        font-size: .7rem;
        font-weight: 800;
        letter-spacing: .07em;
        text-transform: uppercase;
    }
    .encart--action     { border-left-color: var(--color-ok); background: color-mix(in srgb, var(--color-ok) 7%, var(--color-paper)); }
    .encart--action .encart-titre { color: var(--color-ok); }
    .encart--interdit   { border-left-color: var(--color-rep-red); background: color-mix(in srgb, var(--color-rep-red) 7%, var(--color-paper)); }
    .encart--interdit .encart-titre { color: var(--color-rep-red); }
    .encart--info       { border-left-color: var(--color-rep-blue); background: color-mix(in srgb, var(--color-rep-blue) 7%, var(--color-paper)); }
    .encart--info .encart-titre { color: var(--color-rep-blue); }
    .encart--alerte     { border-left-color: #f59e0b; background: color-mix(in srgb, #f59e0b 8%, var(--color-paper)); }
    .encart--alerte .encart-titre { color: #d97706; }
}

@layer components {
    /* ---------------------------------------------------------------
       Logo : deux fichiers, un par fond. La bascule suit la préférence
       du système ET le thème choisi dans le mode accessibilité.
       --------------------------------------------------------------- */
    .logo-sombre { display: none; }
    @media (prefers-color-scheme: dark) {
        .logo-clair  { display: none; }
        .logo-sombre { display: inline-block; }
    }
    :root[data-theme="clair"] .logo-clair   { display: inline-block; }
    :root[data-theme="clair"] .logo-sombre  { display: none; }
    :root[data-theme="sombre"] .logo-clair  { display: none; }
    :root[data-theme="sombre"] .logo-sombre { display: inline-block; }
    :root[data-theme="contraste"] .logo-clair  { display: none; }
    :root[data-theme="contraste"] .logo-sombre { display: inline-block; }
}

@layer components {
    /* ---------------------------------------------------------------
       Lecture des textes officiels : le gras porte la règle, le bleu
       clair porte les renvois. Rien n'est ajouté au texte, seule la
       typographie guide l'œil.
       --------------------------------------------------------------- */
    :root { --color-fluo: #2b7fff; }
    @media (prefers-color-scheme: dark) { :root { --color-fluo: #7cc4ff; } }
    :root[data-theme="clair"]     { --color-fluo: #2b7fff; }
    :root[data-theme="sombre"]    { --color-fluo: #7cc4ff; }
    :root[data-theme="contraste"] { --color-fluo: #ffe600; }

    /* Renvoi vers un autre article : bleu clair, discret mais repérable. */
    .mot-cle {
        color: var(--color-fluo);
        font-weight: 600;
        white-space: nowrap;
    }
    .mot-cle--lien {
        text-decoration: none;
        border-bottom: 1px solid color-mix(in srgb, var(--color-fluo) 45%, transparent);
        border-radius: 2px;
        padding: 0 .1em;
        background: color-mix(in srgb, var(--color-fluo) 8%, transparent);
        transition: background .15s ease;
    }
    .mot-cle--lien:hover,
    .mot-cle--lien:focus-visible {
        background: color-mix(in srgb, var(--color-fluo) 20%, transparent);
    }

    /* Locutions de régime et chiffres : gras, avec un surlignage très léger. */
    .mot-fort { font-weight: 700; color: var(--color-title); }
    .mot-fort--chiffre {
        background: linear-gradient(transparent 62%, color-mix(in srgb, var(--color-fluo) 28%, transparent) 62%);
        padding: 0 .08em;
    }

    /* Accordéons de la page article : titre cliquable sobre, contenu aéré. */
    .accordeon > summary {
        cursor: pointer;
        list-style: none;
        display: flex;
        align-items: center;
        gap: .6rem;
    }
    .accordeon > summary::-webkit-details-marker { display: none; }
    .accordeon > summary::before {
        content: "▸";
        color: var(--color-fluo);
        font-size: .8em;
        transition: transform .2s ease;
    }
    .accordeon[open] > summary::before { transform: rotate(90deg); }
}

/* ---------------------------------------------------------------------------
   Panneaux « partie législative » / « partie réglementaire ».

   Le lecteur doit savoir en permanence dans quelle partie du code il se trouve.
   D'où un encadré léger et une couleur d'accroche distincte pour chacune :
   bleu pour la loi, rouge pour son application réglementaire. Le fond reste
   celui de la page, l'encadré ne doit pas produire de bloc blanc.
   --------------------------------------------------------------------------- */
.panneau-partie {
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;
    border-top-width: 3px;
    padding: 1rem 1.15rem 1.15rem;
    background: color-mix(in srgb, var(--color-surface) 55%, transparent);
}

.panneau-partie__entete { margin-bottom: 0.85rem; }

.panneau-partie__titre {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}

.panneau-partie__soustitre {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--color-muted);
}

.panneau-loi { border-top-color: var(--color-rep-blue); }
.panneau-loi .panneau-partie__titre { color: var(--color-rep-blue); }

.panneau-reglement { border-top-color: var(--color-rep-red); }
.panneau-reglement .panneau-partie__titre { color: var(--color-rep-red); }

/* Puces de l'explicatif : même code couleur que les panneaux. */
.panneau-partie__puce {
    display: inline-block;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.panneau-loi__puce {
    color: var(--color-rep-blue);
    background: color-mix(in srgb, var(--color-rep-blue) 12%, transparent);
}
.panneau-reglement__puce {
    color: var(--color-rep-red);
    background: color-mix(in srgb, var(--color-rep-red) 12%, transparent);
}

/* ── Survol du menu public : zoom progressif et fond rouge en fondu ──
   Demande DA : au survol, les entrées du menu montent doucement vers un
   rouge « Urgence dirigeant » fondu à 50 %, avec un léger zoom. Désactivé
   quand les animations sont coupées (préférence système ou panneau a11y). */
[data-nav] > summary,
[data-nav] li > a,
nav[aria-label="Navigation principale"] > a {
    transition: background-color .35s ease, color .35s ease, transform .35s ease;
}
[data-nav] > summary:hover,
[data-nav] li > a:hover,
nav[aria-label="Navigation principale"] > a:hover {
    background-color: color-mix(in srgb, var(--color-rep-red) 50%, transparent);
    color: #fff;
    transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
    [data-nav] > summary, [data-nav] li > a, nav[aria-label="Navigation principale"] > a { transition: none; }
    [data-nav] > summary:hover, [data-nav] li > a:hover, nav[aria-label="Navigation principale"] > a:hover { transform: none; }
}
:root[data-anim="0"] [data-nav] > summary,
:root[data-anim="0"] [data-nav] li > a,
:root[data-anim="0"] nav[aria-label="Navigation principale"] > a { transition: none; }
:root[data-anim="0"] [data-nav] > summary:hover,
:root[data-anim="0"] [data-nav] li > a:hover,
:root[data-anim="0"] nav[aria-label="Navigation principale"] > a:hover { transform: none; }

/* Alpine : les éléments x-cloak restent invisibles avant l'hydratation. */
[x-cloak] { display: none !important; }

/* ── Titres de sections (accueil) : majuscules + soulignement coloré animé ── */
.titre-section { position: relative; padding-bottom: .5rem; }
.titre-section::after {
    content: ''; position: absolute; left: 0; bottom: 0; height: 4px; width: 3.5rem;
    border-radius: 2px; background: var(--titre-couleur, var(--color-rep-blue));
    transition: width .6s cubic-bezier(.2, .7, .2, 1);
}
.js .reveal .titre-section::after, .titre-section:hover::after { width: 7rem; }
@media (prefers-reduced-motion: reduce) { .titre-section::after { transition: none; } }

/* ═══════════════════════════════════════════════════════════════════
   MOTION DESIGN — la signature du site : sobre, tricolore, réactive.
   Tout s'éteint avec prefers-reduced-motion ou le levier d'accessibilité
   (:root[data-anim="0"]).
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Transitions de page : fondu doux (View Transitions natives) ── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: .16s; }
::view-transition-new(root) { animation-duration: .22s; }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ── 2. Onde tricolore au clic ─────────────────────────────────────── */
.onde-clic {
    position: absolute; border-radius: 9999px; pointer-events: none;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--color-rep-blue) 35%, transparent) 0%,
        color-mix(in srgb, var(--color-rep-red) 18%, transparent) 55%,
        transparent 70%);
    transform: scale(0); opacity: .9;
    animation: onde-clic .55s ease-out forwards;
}
@keyframes onde-clic {
    to { transform: scale(2.6); opacity: 0; }
}

/* ── 3. Enfoncement tactile ────────────────────────────────────────── */
button:active, a.lift:active, .lift:active { transform: scale(.975); }
button, .lift { transition-property: transform, box-shadow, border-color, background-color, color, opacity; transition-duration: .18s; }

/* ── 4. Barre de progression de lecture (fiches longues) ───────────── */
#barre-lecture {
    position: fixed; top: 0; left: 0; height: 3px; width: 100%;
    transform-origin: 0 50%; transform: scaleX(0); z-index: 60;
    background: linear-gradient(90deg, var(--color-rep-blue) 0 33%, #fff 33% 66%, var(--color-rep-red) 66% 100%);
    pointer-events: none;
}

/* ── 5. Apparitions en cascade sur les grilles révélées ────────────── */
.js .reveal-cascade > * { opacity: 0; transform: translateY(14px); }
.js .reveal-cascade.est-visible > * {
    opacity: 1; transform: none;
    transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
}
.js .reveal-cascade.est-visible > *:nth-child(1) { transition-delay: 0s; }
.js .reveal-cascade.est-visible > *:nth-child(2) { transition-delay: .06s; }
.js .reveal-cascade.est-visible > *:nth-child(3) { transition-delay: .12s; }
.js .reveal-cascade.est-visible > *:nth-child(4) { transition-delay: .18s; }
.js .reveal-cascade.est-visible > *:nth-child(5) { transition-delay: .24s; }
.js .reveal-cascade.est-visible > *:nth-child(n+6) { transition-delay: .3s; }

/* ── 6. Focus clavier : anneau bleu net, cohérent partout ──────────── */
:focus-visible {
    outline: 2px solid var(--color-rep-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Interrupteur général ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .onde-clic { animation: none; display: none; }
    button:active, a.lift:active, .lift:active { transform: none; }
    .js .reveal-cascade > * { opacity: 1; transform: none; transition: none; }
    #barre-lecture { display: none; }
}
:root[data-anim="0"] .onde-clic { animation: none; display: none; }
:root[data-anim="0"] button:active, :root[data-anim="0"] .lift:active { transform: none; }
:root[data-anim="0"] .reveal-cascade > * { opacity: 1 !important; transform: none !important; transition: none !important; }
:root[data-anim="0"] #barre-lecture { display: none; }