/* ==================================================================
   article.css — le système de mise en page des articles du site.

   Ce bloc a d'abord vécu recopié à l'identique dans « Rene Levesque.html »,
   « Siege.html » puis « DGEQ.html », avec cette note dans chacun d'eux :

       « Le bloc est volontairement recopié plutôt que partagé — chaque
         article reste une page autonome. C'est le troisième : le jour où un
         quatrième arrive, le sortir dans assets/article.css devient le bon
         geste. »

   L'opération « Faites-nous entendre » en amène neuf d'un coup. Le geste est
   donc posé ici, le 12 septembre 2026. Le contenu qui suit est celui de
   DGEQ.html, repris sans modification : « art-* » pour l'article, « dos-* »
   pour le dossier documentaire. S'y ajoute, à la fin, la section « fne-* »
   propre à la campagne.

   Les trois pages d'origine gardent leur copie intégrée : les toucher
   n'apporterait rien et risquerait une régression sur des pages déjà
   indexées. Elles pourront basculer ici à la prochaine occasion de les
   rouvrir.

   Tout est bâti sur les jetons du thème « verre » (--or, --bleu,
   --verre-fond, --txt…) définis dans assets/verre.css : aucune couleur
   nouvelle n'est introduite. Cette feuille se charge donc APRÈS verre.css.

   Cache : Cloudflare garde les assets quatre heures. Toute modification de
   ce fichier doit s'accompagner d'un incrément du « ?v= » dans TOUTES les
   pages qui le lient — voir la liste en fin de fichier.
   ================================================================== */


/* Lien d'évitement — repris du master (z-index au-dessus de la
   navbar fixe, sinon il reste invisible au clavier). */
.lien-evitement {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 1080;
}

/* Barre de progression de lecture — reprise du master. */
#scrollProgressBar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--bleu) 0%, var(--or) 50%, var(--turquoise) 100%);
    z-index: 9999;
    transition: width .15s cubic-bezier(.4, 0, .2, 1);
}

/* ---------- Héros ---------- */
.art-hero { position: relative; padding: 8.5rem 0 3.5rem; text-align: center; }

.art-titre {
    font-weight: 800; line-height: 1.08; letter-spacing: -.02em;
    font-size: clamp(2.1rem, 4.6vw, 3.9rem);
    margin: 0 auto 1.25rem; max-width: 22ch; color: #F4F8FF;
}
.art-titre .accent {
    background: linear-gradient(100deg, var(--or) 0%, var(--turquoise) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.art-chapeau {
    max-width: 46rem; margin: 0 auto 2rem;
    font-size: clamp(1.02rem, 1.9vw, 1.2rem); line-height: 1.75; color: #CFDAE9;
}
.art-meta {
    display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: center;
    font-size: .88rem; color: var(--txt-doux); margin-bottom: 2rem;
}
.art-meta span { display: inline-flex; align-items: center; gap: .45rem; }
.art-meta i { color: var(--or); }

/* ---------- Corps : sommaire collant + article ---------- */
.art-shell { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 1200px) {
    .art-shell { grid-template-columns: 17rem 1fr; gap: 3rem; align-items: start; }
}

.art-toc { display: none; }
@media (min-width: 1200px) {
    .art-toc {
        display: block; position: sticky; top: 6.5rem;
        padding: 1.5rem 1.25rem; max-height: calc(100vh - 9rem); overflow-y: auto;
    }
}
.art-toc h2 {
    font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--txt-doux); margin: 0 0 1rem;
}
/* Le sommaire est scindé en deux parties : l'article et le dossier.
   Le second h3 se décolle du premier groupe pour que la coupure se
   voie sans trait de séparation supplémentaire. */
.art-toc h3 {
    font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--or); margin: 0 0 .55rem;
}
.art-toc h3 + ol { margin-bottom: 1.4rem; }
.art-toc ol + h3 { margin-top: .2rem; }
.art-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.art-toc li { counter-increment: toc; }
.art-toc a {
    display: flex; gap: .6rem; padding: .42rem .55rem; border-radius: 9px;
    font-size: .88rem; line-height: 1.4; color: var(--txt-doux); text-decoration: none;
    border-left: 2px solid transparent; transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.art-toc a::before {
    content: counter(toc, decimal-leading-zero);
    font-size: .72rem; font-weight: 800; color: rgba(255, 255, 255, .28); padding-top: .12rem;
}
.art-toc a:hover { color: var(--txt); background: rgba(255, 255, 255, .05); }
.art-toc a.actif {
    color: #F4F8FF; background: rgba(255, 255, 255, .07);
    border-left-color: var(--or); font-weight: 600;
}
.art-toc a.actif::before { color: var(--or); }

/* ---------- Sections de l'article ---------- */
.art-corps { max-width: 46rem; }
@media (min-width: 1200px) { .art-corps { max-width: 48rem; } }

/* scroll-margin-top : sans cela, l'ancre passe SOUS la barre fixe. */
.art-sec { scroll-margin-top: 6.5rem; margin-bottom: 3.25rem; }
.art-sec > h2 {
    font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 800; line-height: 1.25;
    color: #F4F8FF; margin: 0 0 1.1rem;
}
.art-sec > h2 .art-num {
    display: block; font-size: .74rem; font-weight: 800; letter-spacing: .16em;
    text-transform: uppercase; color: var(--or); margin-bottom: .5rem;
}
.art-sec h3 { font-size: 1.1rem; font-weight: 700; color: #EAF1FA; margin: 1.75rem 0 .75rem; }
.art-sec p { line-height: 1.85; color: #CFDAE9; margin: 0 0 1.1rem; font-size: 1.02rem; }
.art-sec p:last-child { margin-bottom: 0; }
.art-sec strong { color: #F2F6FC; font-weight: 700; }
.art-sec em { color: #DCE6F4; }

/* Liens dans le texte : soulignés, pour rester repérables sans la couleur.
   .dos-appel est exclu : c'est un bloc-bouton, pas un lien de lecture. */
.art-sec a:not(.btn-or):not(.btn-bleu):not(.btn-fantome):not(.dos-appel):not(.dos-volet) {
    color: var(--or); text-decoration: underline; text-underline-offset: .18em;
    text-decoration-color: rgba(255, 216, 102, .45); transition: color .2s ease, text-decoration-color .2s ease;
}
.art-sec a:not(.btn-or):not(.btn-bleu):not(.btn-fantome):not(.dos-appel):not(.dos-volet):hover {
    color: var(--turquoise); text-decoration-color: currentColor;
}
.art-lien-ext { font-size: .78em; opacity: .75; }

/* ---------- Listes ---------- */
.art-puces { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.art-puces li {
    position: relative; padding: .3rem 0 .3rem 1.85rem;
    line-height: 1.75; color: #CFDAE9;
}
.art-puces li::before {
    content: ""; position: absolute; left: .35rem; top: 1rem;
    width: .45rem; height: .45rem; border-radius: 50%;
    background: var(--or); box-shadow: 0 0 0 3px rgba(255, 216, 102, .14);
}
/* Crochet en caractère Unicode et non en icône Font Awesome : le kit du
   site est chargé en JavaScript (remplacement SVG), les pseudo-éléments
   ::before ne peuvent donc pas s'appuyer sur sa police. */
.art-puces.coches li::before {
    content: "\2713"; font-weight: 700;
    left: .1rem; top: .3rem; width: auto; height: auto; border-radius: 0;
    background: none; box-shadow: none; color: var(--turquoise); font-size: 1rem;
}
/* Croix sobre plutôt que rouge : ce ne sont pas des erreurs, ce sont
   des bornes assumées. */
.art-puces.limites li::before {
    content: "\2715"; font-weight: 700;
    left: .1rem; top: .35rem; width: auto; height: auto; border-radius: 0;
    background: none; box-shadow: none; color: var(--txt-doux); font-size: .95rem;
}

/* ---------- Encadré citation ---------- */
.art-cite { position: relative; padding: 2rem 2.25rem; margin: 0 0 1.5rem; }
.art-cite::before {
    content: ""; position: absolute; left: 0; top: 1.5rem; bottom: 1.5rem;
    width: 3px; border-radius: 3px;
    background: linear-gradient(to bottom, var(--or), transparent);
}
.art-cite .art-cite-txt {
    font-size: clamp(1.1rem, 2.2vw, 1.4rem); font-weight: 300; font-style: italic;
    line-height: 1.65; color: #E6EEF9; margin: 0 0 1.25rem;
}
.art-cite figcaption {
    display: flex; align-items: flex-start; gap: .7rem;
    font-size: .9rem; line-height: 1.6; color: var(--txt-doux); margin: 0;
}
.art-cite figcaption i { color: var(--or); padding-top: .18rem; }
.art-cite figcaption cite { font-style: italic; color: #DCE6F4; }

/* ---------- Phrase-clé mise en exergue ---------- */
.art-cle {
    display: block; padding: 1.35rem 1.5rem; margin: 0 0 1.4rem;
    border-radius: 14px; border: 1px solid rgba(255, 216, 102, .3);
    background: linear-gradient(135deg, rgba(255, 216, 102, .1), rgba(85, 230, 200, .05));
    font-size: 1.1rem; font-weight: 700; line-height: 1.6; color: #F4F8FF;
}

/* ---------- Encadré d'avertissement (nuance éditoriale) ---------- */
.art-note {
    display: flex; gap: 1rem; padding: 1.25rem 1.4rem; margin: 0 0 1.4rem;
    border-radius: 14px; border: 1px solid var(--verre-bord);
    border-left: 3px solid var(--bleu); background: rgba(61, 139, 255, .07);
}
.art-note i { color: var(--bleu); font-size: 1.1rem; padding-top: .18rem; }
.art-note p { margin: 0; font-size: .96rem; line-height: 1.75; color: #CFDAE9; }

/* ---------- Deux cartes en vis-à-vis ---------- */
.art-duo { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 0 0 1.4rem; }
@media (min-width: 768px) { .art-duo { grid-template-columns: repeat(2, 1fr); } }
.art-carte { padding: 1.35rem 1.5rem; border-radius: 16px; border: 1px solid var(--verre-bord); background: var(--verre-fond); }
.art-carte .art-etiq {
    display: inline-flex; align-items: center; gap: .45rem; margin-bottom: .7rem;
    font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.art-carte.or { border-color: rgba(255, 216, 102, .3); }
.art-carte.or .art-etiq { color: var(--or); }
.art-carte.bleu { border-color: rgba(61, 139, 255, .35); }
.art-carte.bleu .art-etiq { color: var(--bleu); }
.art-carte p { margin: 0; font-size: .96rem; line-height: 1.7; color: #CFDAE9; }
.art-carte strong { display: block; color: #F2F6FC; margin-bottom: .3rem; }
/* Le strong en bloc n'a de sens que pour le chapeau d'une carte : dans
   une liste à puces, il couperait chaque phrase en deux et laisserait
   la ponctuation orpheline sur sa propre ligne. */
.art-carte .art-puces { margin-bottom: 0; }
.art-carte .art-puces strong { display: inline; margin-bottom: 0; }

/* ---------- Constat chiffré ---------- */
.art-chiffres {
    display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 0 0 1.4rem;
}
@media (min-width: 640px) { .art-chiffres { grid-template-columns: repeat(3, 1fr); } }
.art-chiffre {
    padding: 1.35rem 1.25rem; border-radius: 16px; text-align: center;
    border: 1px solid var(--verre-bord); background: var(--verre-fond);
}
.art-chiffre b {
    display: block; font-size: clamp(1.5rem, 3.6vw, 2.05rem); font-weight: 800;
    line-height: 1.1; color: #F4F8FF; letter-spacing: -.01em;
}
.art-chiffre.saillant b {
    background: linear-gradient(100deg, var(--or) 0%, var(--turquoise) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.art-chiffre span {
    display: block; margin-top: .5rem;
    font-size: .82rem; line-height: 1.5; color: var(--txt-doux);
}

/* ---------- Étapes numérotées ---------- */
.art-etapes { list-style: none; counter-reset: etape; margin: 0 0 1.4rem; padding: 0; }
.art-etapes li {
    counter-increment: etape; position: relative;
    display: flex; align-items: flex-start; gap: 1rem;
    padding: 1rem 1.25rem; margin-bottom: .7rem;
    border-radius: 14px; border: 1px solid var(--verre-bord); background: var(--verre-fond);
    line-height: 1.65; color: #CFDAE9;
    transition: border-color .25s ease, transform .25s ease;
}
.art-etapes li:hover { border-color: var(--verre-bord-actif); transform: translateX(4px); }
.art-etapes li::before {
    content: counter(etape); flex: 0 0 2rem;
    width: 2rem; height: 2rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .95rem; color: #16223A;
    background: linear-gradient(135deg, var(--or), var(--or-fonce));
}
/* PROPRE À CET ARTICLE — le cercle fermé de la notoriété. La liste
   n'a pas de début ni de fin : les puces sont des flèches plutôt que
   des rangs, pour que rien ne suggère une progression. */
.art-etapes.boucle li::before {
    content: "\21BB"; font-size: 1.15rem;
    background: none; border: 1px solid rgba(255, 216, 102, .45); color: var(--or);
}

/* ---------- Pastilles ---------- */
.art-jetons { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.4rem; }
.art-jetons span {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .5rem 1rem; border-radius: 50px;
    background: var(--verre-fond); border: 1px solid var(--verre-bord);
    font-size: .9rem; color: #DCE6F4;
}
.art-jetons i { color: var(--or); font-size: .82rem; }

/* ---------- Questions ---------- */
.art-test { display: grid; grid-template-columns: 1fr; gap: .8rem; margin: 0 0 1.4rem; }
@media (min-width: 768px) { .art-test { grid-template-columns: repeat(2, 1fr); } }
.art-test .q {
    position: relative; overflow: hidden;
    padding: 1.1rem 1.25rem 1.1rem 3rem; border-radius: 14px;
    border: 1px solid var(--verre-bord); background: var(--verre-fond);
    font-size: .95rem; line-height: 1.6; color: #E4EDF8; font-weight: 600;
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.art-test .q::before {
    content: "\3f"; position: absolute; left: 1rem; top: 1.05rem;
    width: 1.4rem; height: 1.4rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .82rem; font-weight: 800; color: var(--nuit); background: var(--turquoise);
}
.art-test .q:hover {
    border-color: var(--verre-bord-actif); transform: translateY(-3px);
    box-shadow: 0 18px 38px rgba(2, 8, 18, .45);
}

/* ---------- Sources ---------- */
.art-sources { list-style: none; margin: 0; padding: 0; }
.art-sources li {
    display: flex; gap: .85rem; padding: .85rem 0;
    font-size: .93rem; line-height: 1.65; color: #CFDAE9;
}
.art-sources li + li { border-top: 1px dashed rgba(255, 255, 255, .12); }
.art-sources i { color: var(--or); flex: 0 0 1.1rem; padding-top: .22rem; text-align: center; }

/* ---------- Bandeau de fin ---------- */
.art-fin { margin-top: 1rem; }

/* ==================================================================
   PARTIE II — DOSSIER DOCUMENTAIRE (classes « dos-* »).
   La partie I argumente, la partie II administre la preuve : le
   vocabulaire visuel change donc légèrement (pièces numérotées,
   tableaux, états, chronologie) sans sortir des jetons du thème.
   Tout ce qui n'existe pas encore doit se voir comme tel — d'où les
   états « .attente » et « .aucune » : un dossier qui laisse croire
   qu'une réponse existe alors qu'elle est attendue se détruit
   lui-même dès la première vérification.
   ================================================================== */

/* Appel vers le dossier, placé sous l'introduction de l'article. */
.dos-appel {
    display: block; text-align: center; text-decoration: none;
    padding: 1.6rem 1.5rem; margin: 0 0 1.4rem; border-radius: 18px;
    border: 1px solid rgba(255, 216, 102, .38);
    background: linear-gradient(135deg, rgba(255, 216, 102, .13), rgba(61, 139, 255, .09));
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.dos-appel:hover, .dos-appel:focus-visible {
    border-color: rgba(255, 216, 102, .75); transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(2, 8, 18, .45);
}
.dos-appel .dos-appel-etiq {
    display: block; font-size: .72rem; font-weight: 800; letter-spacing: .16em;
    text-transform: uppercase; color: var(--or); margin-bottom: .55rem;
}
.dos-appel .dos-appel-titre {
    display: block; font-size: clamp(1.1rem, 2.4vw, 1.35rem); font-weight: 800;
    line-height: 1.35; color: #F4F8FF; margin-bottom: .5rem;
}
.dos-appel .dos-appel-sous {
    display: block; font-size: .93rem; line-height: 1.65; color: #CFDAE9;
    max-width: 34rem; margin: 0 auto;
}
.dos-appel i { margin-left: .5rem; color: var(--or); }

/* Ouverture de la partie II. */
.dos-bandeau {
    padding: 2.1rem 1.85rem; margin: 0 0 2.5rem; border-radius: 18px;
    border: 1px solid var(--verre-bord); border-top: 3px solid var(--or);
    background: var(--verre-fond);
}
.dos-bandeau .dos-surtitre {
    display: block; font-size: .74rem; font-weight: 800; letter-spacing: .18em;
    text-transform: uppercase; color: var(--or); margin-bottom: .7rem;
}
.dos-bandeau h2 {
    font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 800; line-height: 1.2;
    color: #F4F8FF; margin: 0 0 .9rem;
}
.dos-bandeau p { margin: 0 0 .9rem; line-height: 1.8; color: #CFDAE9; font-size: 1rem; }
.dos-bandeau p:last-child { margin-bottom: 0; }

/* Encadré de cadrage — ce que le dossier ne prétend pas. Bordure or et
   non bleue : c'est une mise en garde de l'auteur, pas une note de bas
   de page. */
.dos-cadre {
    padding: 1.4rem 1.55rem; margin: 0 0 1.4rem; border-radius: 16px;
    border: 1px solid rgba(255, 216, 102, .32); border-left: 3px solid var(--or);
    background: rgba(255, 216, 102, .07);
}
.dos-cadre > strong {
    display: block; font-size: 1.02rem; line-height: 1.55; color: #F4F8FF; margin-bottom: .8rem;
}
.dos-cadre p { margin: 0 0 .7rem; font-size: .96rem; line-height: 1.75; color: #CFDAE9; }
.dos-cadre ol, .dos-cadre ul { margin: 0; padding-left: 1.3rem; color: #CFDAE9; }
.dos-cadre li { line-height: 1.7; padding: .18rem 0; font-size: .96rem; }

/* Tableaux du dossier — toujours dans un conteneur qui défile seul :
   sur téléphone, la page ne doit jamais partir de travers. */
.dos-tableau {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin: 0 0 1.4rem; border-radius: 14px; border: 1px solid var(--verre-bord);
    background: var(--verre-fond);
}
.dos-tableau table { width: 100%; min-width: 34rem; border-collapse: collapse; margin: 0; }
.dos-tableau caption {
    caption-side: top; text-align: left; padding: .9rem 1.1rem 0;
    font-size: .8rem; line-height: 1.5; color: var(--txt-doux);
}
.dos-tableau th, .dos-tableau td {
    padding: .8rem 1.1rem; text-align: left; vertical-align: top;
    font-size: .92rem; line-height: 1.6;
}
.dos-tableau thead th {
    font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--or); border-bottom: 1px solid var(--verre-bord); white-space: nowrap;
}
.dos-tableau tbody td { color: #CFDAE9; border-bottom: 1px dashed rgba(255, 255, 255, .1); }
.dos-tableau tbody tr:last-child td { border-bottom: 0; }
.dos-tableau tbody th {
    color: #F2F6FC; font-weight: 700;
    border-bottom: 1px dashed rgba(255, 255, 255, .1);
}
.dos-tableau tbody tr:last-child th { border-bottom: 0; }

/* Étiquette de pièce — « PIÈCE DGEQ-01 ». */
.dos-piece {
    display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .8rem;
    padding: .34rem .85rem; border-radius: 50px;
    border: 1px solid rgba(255, 216, 102, .4); background: rgba(255, 216, 102, .1);
    font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--or);
}

/* Niveaux de preuve — la mécanique la plus importante du dossier : le
   lecteur doit distinguer d'un coup d'œil un texte officiel d'une
   analyse. Les cinq niveaux sont fermés : on n'en invente pas un
   sixième pour faire passer une affirmation. */
.dos-niveaux { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.1rem; }
.dos-niveau {
    display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
    padding: .2rem .65rem; border-radius: 5px;
    font-size: .67rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.dos-niveau.officiel { color: var(--or); border: 1px solid rgba(255, 216, 102, .5); background: rgba(255, 216, 102, .1); }
.dos-niveau.ecrit { color: var(--turquoise); border: 1px solid rgba(85, 230, 200, .5); background: rgba(85, 230, 200, .1); }
.dos-niveau.fait { color: var(--bleu); border: 1px solid rgba(61, 139, 255, .55); background: rgba(61, 139, 255, .12); }
.dos-niveau.analyse { color: #DCE6F4; border: 1px solid var(--verre-bord); background: rgba(255, 255, 255, .05); }
.dos-niveau.ouverte { color: var(--txt-doux); border: 1px dashed rgba(255, 255, 255, .3); background: none; }

/* Légende des niveaux : le même jeton, mais suivi de sa définition. */
.dos-legende { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.dos-legende li {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .7rem;
    padding: .5rem 0; font-size: .93rem; line-height: 1.6; color: #CFDAE9;
}
.dos-legende li + li { border-top: 1px dashed rgba(255, 255, 255, .1); }
/* Largeur fixe pour le jeton : sans elle, les définitions les plus
   longues passent à la ligne et la colonne de gauche cesse d'exister. */
@media (min-width: 576px) {
    .dos-legende .dos-niveau { flex: 0 0 9.2rem; justify-content: center; }
    .dos-legende li > span:last-child { flex: 1; }
}

/* États — un dossier se lit à ses états autant qu'à ses pièces. */
.dos-etat {
    display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
    padding: .22rem .7rem; border-radius: 50px;
    font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.dos-etat.recu { color: var(--turquoise); border: 1px solid rgba(85, 230, 200, .45); background: rgba(85, 230, 200, .1); }
.dos-etat.attente { color: var(--or); border: 1px solid rgba(255, 216, 102, .45); background: rgba(255, 216, 102, .09); }
.dos-etat.aucune { color: var(--txt-doux); border: 1px solid var(--verre-bord); background: rgba(255, 255, 255, .04); }

/* Chronologie. */
.dos-chrono {
    list-style: none; margin: 0 0 1.4rem; padding: 0 0 0 1.6rem;
    border-left: 2px solid rgba(255, 255, 255, .14);
}
.dos-chrono li { position: relative; padding: 0 0 1.5rem; }
.dos-chrono li:last-child { padding-bottom: 0; }
.dos-chrono li::before {
    content: ""; position: absolute; left: -2rem; top: .4rem;
    width: .7rem; height: .7rem; border-radius: 50%;
    background: var(--or); box-shadow: 0 0 0 3px rgba(255, 216, 102, .16);
}
.dos-chrono li.futur::before { background: transparent; border: 2px solid rgba(255, 216, 102, .5); box-shadow: none; }
.dos-chrono time {
    display: block; font-size: .74rem; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: var(--or); margin-bottom: .35rem;
}
.dos-chrono strong { display: block; color: #F2F6FC; margin-bottom: .3rem; }
.dos-chrono p { margin: 0; font-size: .94rem; line-height: 1.7; color: #CFDAE9; }

/* Matrice des compétences. */
.dos-matrice { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 0 0 1.4rem; }
@media (min-width: 768px) { .dos-matrice { grid-template-columns: repeat(2, 1fr); } }
.dos-autorite {
    padding: 1.3rem 1.45rem; border-radius: 16px;
    border: 1px solid var(--verre-bord); background: var(--verre-fond);
}
.dos-autorite h3 {
    display: flex; align-items: center; gap: .6rem;
    font-size: 1rem; font-weight: 800; color: #F4F8FF; margin: 0 0 .7rem;
}
.dos-autorite h3 i { color: var(--or); font-size: .95rem; }
.dos-autorite p { margin: 0 0 .6rem; font-size: .92rem; line-height: 1.7; color: #CFDAE9; }
.dos-autorite p:last-child { margin-bottom: 0; }
.dos-autorite .dos-hors {
    padding-top: .6rem; border-top: 1px dashed rgba(255, 255, 255, .12);
    font-size: .86rem; color: var(--txt-doux);
}

/* Index des volets. */
.dos-volets { display: grid; grid-template-columns: 1fr; gap: .7rem; margin: 0 0 1.4rem; }
@media (min-width: 640px) { .dos-volets { grid-template-columns: repeat(2, 1fr); } }
.art-sec a.dos-volet {
    display: flex; align-items: flex-start; gap: .85rem;
    padding: .9rem 1.1rem; border-radius: 14px; text-decoration: none;
    border: 1px solid var(--verre-bord); background: var(--verre-fond);
    transition: border-color .25s ease, transform .25s ease;
}
.art-sec a.dos-volet:hover { border-color: var(--verre-bord-actif); transform: translateX(4px); }
.dos-volet b {
    flex: 0 0 1.9rem; height: 1.9rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .82rem; font-weight: 800; color: #16223A;
    background: linear-gradient(135deg, var(--or), var(--or-fonce));
}
.dos-volet span { font-size: .93rem; line-height: 1.55; color: #E4EDF8; font-weight: 600; }
.dos-volet span em { display: block; font-style: normal; font-weight: 400; font-size: .85rem; color: var(--txt-doux); margin-top: .15rem; }

/* ---------- Mode contraste : le verre coûte du contraste ---------- */
.theme-verre body.high-contrast .art-cite,
.theme-verre body.high-contrast .art-cle,
.theme-verre body.high-contrast .art-note,
.theme-verre body.high-contrast .art-carte,
.theme-verre body.high-contrast .art-chiffre,
.theme-verre body.high-contrast .art-etapes li,
.theme-verre body.high-contrast .art-jetons span,
.theme-verre body.high-contrast .art-test .q,
.theme-verre body.high-contrast .art-toc {
    background: #000 !important; border-color: #ff0 !important;
    box-shadow: none !important; color: #fff !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.theme-verre body.high-contrast .art-titre .accent,
.theme-verre body.high-contrast .art-chiffre.saillant b,
.theme-verre body.high-contrast .art-sec > h2 .art-num,
.theme-verre body.high-contrast .art-meta i,
.theme-verre body.high-contrast .art-jetons i,
.theme-verre body.high-contrast .art-sources i,
.theme-verre body.high-contrast .art-cite figcaption i,
.theme-verre body.high-contrast .art-note i,
.theme-verre body.high-contrast .art-carte .art-etiq,
.theme-verre body.high-contrast .art-toc a.actif {
    color: #ff0 !important; -webkit-text-fill-color: #ff0 !important; background: none !important;
}
.theme-verre body.high-contrast .art-sec a { color: #ff0 !important; }
.theme-verre body.high-contrast .art-puces li::before { background: #ff0 !important; }
.theme-verre body.high-contrast .art-puces.coches li::before,
.theme-verre body.high-contrast .art-puces.limites li::before { color: #ff0 !important; background: none !important; }
.theme-verre body.high-contrast .art-etapes li::before,
.theme-verre body.high-contrast .art-test .q::before { background: #ff0 !important; color: #000 !important; }
.theme-verre body.high-contrast .art-etapes.boucle li::before { background: none !important; color: #ff0 !important; border-color: #ff0 !important; }
.theme-verre body.high-contrast .art-cite::before { background: #ff0 !important; }
/* Partie II — mêmes règles : fond noir, bordure jaune, aucun verre. */
.theme-verre body.high-contrast .dos-appel,
.theme-verre body.high-contrast .dos-bandeau,
.theme-verre body.high-contrast .dos-cadre,
.theme-verre body.high-contrast .dos-tableau,
.theme-verre body.high-contrast .dos-autorite,
.theme-verre body.high-contrast .dos-volet,
.theme-verre body.high-contrast .dos-piece,
.theme-verre body.high-contrast .dos-niveau,
.theme-verre body.high-contrast .dos-etat {
    background: #000 !important; border-color: #ff0 !important;
    box-shadow: none !important; color: #fff !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.theme-verre body.high-contrast .dos-appel .dos-appel-etiq,
.theme-verre body.high-contrast .dos-bandeau .dos-surtitre,
.theme-verre body.high-contrast .dos-tableau thead th,
.theme-verre body.high-contrast .dos-chrono time,
.theme-verre body.high-contrast .dos-autorite h3 i,
.theme-verre body.high-contrast .dos-piece,
.theme-verre body.high-contrast .dos-niveau,
.theme-verre body.high-contrast .dos-etat { color: #ff0 !important; }
.theme-verre body.high-contrast .dos-chrono li::before,
.theme-verre body.high-contrast .dos-volet b { background: #ff0 !important; color: #000 !important; border-color: #ff0 !important; }
.theme-verre body.high-contrast .dos-chrono { border-left-color: #ff0 !important; }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
    .art-etapes li, .art-test .q { transition: none !important; }
    .art-etapes li:hover, .art-test .q:hover { transform: none !important; }
    #scrollProgressBar { transition: none !important; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 767.98px) {
    .art-hero { padding: 7rem 0 2.5rem; }
    .art-cite { padding: 1.5rem 1.35rem; }
    .art-sec { margin-bottom: 2.5rem; }
}

/* Actions courtes de la barre — « Nous contacter », « Se connecter » et
   les bascules de langue. Bloc recopié tel quel de Site1.Master : à
   partir de lg, là où les entrées se disputent la largeur, elles
   deviennent des boutons-icônes ; sous 992px le menu est déplié en
   liste et garde les libellés complets. Le nom accessible vient de
   aria-label : il est annoncé dans les deux cas. */
.nav-icone {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 50px;
    padding: .25rem .85rem !important;
    margin-left: .5rem;
    transition: background .2s ease, border-color .2s ease;
}

    .nav-icone:hover,
    .nav-icone:focus-visible {
        background: rgba(255,255,255,.14);
        border-color: rgba(255,255,255,.75);
    }

    /* Le code de langue ne sert qu'en mode icône : deux globes identiques
       côte à côte ne se distingueraient pas l'un de l'autre. */
    .nav-icone .code-langue {
        display: none;
        font-size: .74rem;
        font-weight: 700;
        letter-spacing: .06em;
    }

@media (min-width: 992px) {
    .nav-icone {
        justify-content: center;
        min-width: 2.5rem;
        height: 2.5rem;
        padding: 0 .75rem !important;
        margin-left: .4rem;
    }

        .nav-icone i {
            font-size: 1.05rem;
        }

        /* Le libellé sort de l'affichage mais reste dans le document :
           un lecteur d'écran qui ignorerait aria-label le lit quand même. */
        .nav-icone .libelle {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        .nav-icone .code-langue {
            display: inline;
        }

        /* Contact : l'enveloppe se suffit, pas de code à afficher. */
        .nav-icone.icone-seule {
            padding: 0 !important;
        }
}

/* ==================================================================
   FNE-* — OPÉRATION « FAITES-NOUS ENTENDRE » (12 septembre 2026)

   Composants propres à la campagne. Ils ne remplacent pas « art-* » ni
   « dos-* » : une page de campagne reste un article, avec son héros, son
   sommaire et ses sections. Ne vivent ici que les objets que le dossier
   DGEQ n'avait pas besoin d'exprimer :

     .fne-bandeau    état global de l'opération, en tête de page
     .fne-compteurs  les trois compteurs distincts, chacun daté et sourcé
     .fne-echeance   compte à rebours — factuel, donc souvent « non confirmé »
     .fne-lettre     texte intégral d'une demande, tel qu'envoyé
     .fne-grille     navigation entre les pages de l'opération
     .fne-regles     ce qu'on dit / ce qu'on ne dit pas
     .fne-registre   registre maître FNE-2026

   Une seule couleur s'ajoute aux jetons de verre.css : --fne-alerte, le
   rouge sobre des états « sans réponse » et « à corriger ». Elle est
   déclarée ici, et nulle part ailleurs.
   ================================================================== */

.theme-verre {
    --fne-alerte: #FF8C8C;
    --fne-alerte-fond: rgba(255, 140, 140, .1);
    --fne-alerte-bord: rgba(255, 140, 140, .45);
}

/* --- États supplémentaires, dans la grammaire de .dos-etat --------- */
.dos-etat.silence,
.fne-etat.silence {
    color: var(--fne-alerte);
    border: 1px solid var(--fne-alerte-bord);
    background: var(--fne-alerte-fond);
}
.dos-etat.envoyee,
.fne-etat.envoyee {
    color: var(--bleu);
    border: 1px solid rgba(61, 139, 255, .55);
    background: rgba(61, 139, 255, .12);
}
.fne-etat {
    display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
    padding: .22rem .7rem; border-radius: 50px;
    font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.fne-etat.attente { color: var(--or); border: 1px solid rgba(255, 216, 102, .45); background: rgba(255, 216, 102, .09); }
.fne-etat.aucune  { color: var(--txt-doux); border: 1px solid var(--verre-bord); background: rgba(255, 255, 255, .04); }
.fne-etat.recue   { color: var(--turquoise); border: 1px solid rgba(85, 230, 200, .45); background: rgba(85, 230, 200, .1); }

/* --- Bandeau d'état de l'opération -------------------------------- */
.fne-bandeau {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem;
    margin: 0 0 1.8rem;
    padding: .9rem 1.2rem;
    border: 1px solid var(--verre-bord);
    border-left: 3px solid var(--or);
    border-radius: 14px;
    background: var(--verre-fond);
    backdrop-filter: blur(var(--flou));
    font-size: .9rem;
    color: var(--txt-doux);
}
.fne-bandeau strong { color: var(--txt); font-weight: 700; }
.fne-bandeau .fne-bandeau-maj {
    margin-left: auto;
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--txt-doux);
}
@media (max-width: 640px) {
    .fne-bandeau .fne-bandeau-maj { margin-left: 0; }
}

/* --- Compteurs : un chiffre ne vaut que par sa source -------------- */
.fne-compteurs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
    margin: 1.6rem 0 1.2rem;
}
.fne-compteur {
    display: flex; flex-direction: column; gap: .35rem;
    padding: 1.15rem 1.25rem;
    border: 1px solid var(--verre-bord);
    border-radius: 16px;
    background: var(--verre-fond);
    backdrop-filter: blur(var(--flou));
}
.fne-compteur .fne-valeur {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 2.3rem; font-weight: 800; line-height: 1;
    color: var(--or);
}
.fne-compteur.indetermine .fne-valeur { color: var(--txt-doux); font-size: 1.5rem; }
.fne-compteur .fne-libelle {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700; font-size: .95rem; color: var(--txt);
}
.fne-compteur .fne-precision { font-size: .85rem; color: var(--txt-doux); }
.fne-compteur .fne-source {
    margin-top: auto; padding-top: .55rem;
    border-top: 1px dashed rgba(255, 255, 255, .14);
    font-size: .74rem; color: var(--txt-doux);
}
.fne-compteur .fne-source strong { color: var(--txt); font-weight: 700; }

/* --- Échéances et compte à rebours --------------------------------- */
.fne-echeances {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1rem;
    margin: 1.6rem 0;
}
.fne-echeance {
    padding: 1.15rem 1.25rem;
    border: 1px solid var(--verre-bord);
    border-radius: 16px;
    background: var(--verre-fond);
    backdrop-filter: blur(var(--flou));
}
.fne-echeance.non-confirmee { border-style: dashed; }
.fne-echeance h3 {
    font-size: 1.02rem; margin: 0 0 .3rem; color: var(--txt);
}
.fne-echeance .fne-rebours {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 1.6rem; font-weight: 800; color: var(--or);
    margin: .3rem 0;
}
.fne-echeance.non-confirmee .fne-rebours { font-size: 1.05rem; color: var(--txt-doux); }
.fne-echeance p { font-size: .87rem; color: var(--txt-doux); margin: .3rem 0 0; }

/* --- Lettre : une demande publiée telle qu'envoyée ------------------ */
.fne-lettre {
    margin: 1.5rem 0;
    padding: 1.5rem 1.7rem;
    border: 1px solid var(--verre-bord);
    border-radius: 16px;
    background: rgba(255, 255, 255, .03);
    font-size: .93rem;
    line-height: 1.75;
}
.fne-lettre .fne-lettre-tete {
    margin: 0 0 1.1rem; padding-bottom: .9rem;
    border-bottom: 1px solid var(--verre-bord);
    font-size: .82rem; color: var(--txt-doux);
}
.fne-lettre .fne-lettre-tete div { margin: .15rem 0; }
.fne-lettre .fne-lettre-tete strong {
    display: inline-block; min-width: 7.5rem;
    color: var(--txt); font-weight: 700;
}
.fne-lettre p { margin: 0 0 .9rem; }
.fne-lettre ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.fne-lettre ol li { margin: 0 0 .55rem; }
.fne-lettre .fne-lettre-pied {
    margin-top: 1.1rem; padding-top: .9rem;
    border-top: 1px solid var(--verre-bord);
    font-size: .82rem; color: var(--txt-doux);
}

/* --- Grille de navigation de l'opération ---------------------------- */
.fne-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 1rem;
    margin: 1.6rem 0;
}
.fne-carte {
    display: flex; flex-direction: column; gap: .45rem;
    padding: 1.2rem 1.3rem;
    border: 1px solid var(--verre-bord);
    border-left: 3px solid var(--bleu);
    border-radius: 16px;
    background: var(--verre-fond);
    backdrop-filter: blur(var(--flou));
    text-decoration: none; color: inherit;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
a.fne-carte:hover, a.fne-carte:focus-visible {
    transform: translateY(-3px);
    border-left-color: var(--or);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
    color: inherit;
}
.fne-carte .fne-carte-etiq {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
    font-weight: 800; color: var(--or);
}
.fne-carte .fne-carte-titre {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700; font-size: 1.02rem; color: var(--txt); line-height: 1.4;
}
.fne-carte .fne-carte-txt { font-size: .87rem; color: var(--txt-doux); }
.fne-carte .fne-carte-fleche { margin-top: auto; color: var(--txt-doux); font-size: .85rem; }

/* --- Ce qu'on dit / ce qu'on ne dit pas ----------------------------- */
.fne-regles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}
.fne-regle {
    padding: 1.15rem 1.25rem;
    border: 1px solid var(--verre-bord);
    border-radius: 16px;
    background: var(--verre-fond);
}
.fne-regle.oui { border-left: 3px solid var(--turquoise); }
.fne-regle.non { border-left: 3px solid var(--fne-alerte); }
.fne-regle h3 {
    display: flex; align-items: center; gap: .5rem;
    font-size: .95rem; margin: 0 0 .7rem;
}
.fne-regle.oui h3 { color: var(--turquoise); }
.fne-regle.non h3 { color: var(--fne-alerte); }
.fne-regle ul { list-style: none; margin: 0; padding: 0; }
.fne-regle li {
    position: relative; padding-left: 1.2rem; margin: 0 0 .55rem;
    font-size: .9rem; color: var(--txt-doux);
}
.fne-regle li::before {
    content: ''; position: absolute; left: 0; top: .55rem;
    width: .4rem; height: .4rem; border-radius: 50%;
    background: currentColor; opacity: .55;
}

/* --- Registre maître ------------------------------------------------ */
.fne-registre td code,
.fne-registre th code {
    font-size: .82rem; color: var(--or); background: none; padding: 0;
}
.fne-registre .fne-vide {
    text-align: center; color: var(--txt-doux); font-style: italic;
}

/* --- Impression : le dossier de presse doit sortir sur papier ------- */
@media print {
    header, footer, .verre-aurores, .verre-grain, #scrollProgressBar,
    .art-toc, .parcours-suite, .verre-cta, .lien-evitement { display: none !important; }
    .theme-verre, .theme-verre body { background: #fff !important; color: #000 !important; }
    .art-shell, .art-corps, .main-content { display: block !important; max-width: none !important; }
    .art-sec, .fne-compteur, .fne-lettre, .fne-echeance, .dos-tableau, .fne-carte {
        background: none !important; border-color: #999 !important;
        color: #000 !important; break-inside: avoid;
    }
    .art-titre, .art-chapeau, .art-sec h2, .art-sec h3, .art-sec p, .art-sec li,
    .fne-compteur .fne-libelle, .fne-compteur .fne-valeur, .fne-lettre {
        color: #000 !important;
    }
    .dos-tableau table, .dos-tableau th, .dos-tableau td { border-color: #999 !important; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; word-break: break-all; }
}

/* ==================================================================
   PAGES QUI LIENT CETTE FEUILLE — à mettre à jour avec le « ?v= »
   lors de toute modification (cache Cloudflare : 4 h) :

     FaitesNousEntendre.html
     ReglesDuDebat.html
     CriteresDebats.html
     PourquoiNousEntendre.html
     SiNousNeSommesPasInvites.html
     ApresLeDebat.html
     DossierDePresse.html
     TrousseCandidats.html
     VideosCitoyennes.html
     RegistreFNE.html
   ================================================================== */