/* ==========================================================================
   Structure du site public : en-tête, pied, widgets flottants
   ========================================================================== */

.site-main { min-height: 60vh; }

/* --- En-tête -------------------------------------------------------------- */

.entete { position: relative; z-index: 120; }
.entete header { position: sticky; top: 0; }

.entete__utilitaire {
    background: var(--fond-barre);
    border-bottom: 1px solid var(--bord-ligne);
}
.entete__utilitaire-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.entete__marque {
    font-family: var(--police-titre);
    font-weight: 800;
    font-size: 1.08rem;
    color: var(--texte-fort);
    white-space: nowrap;
    /* Se tronque plutôt que de pousser le bouton du menu hors de l'écran :
       sur un téléphone étroit, la barre déborderait sinon et le menu
       deviendrait inatteignable. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.entete__spacer { flex: 1; min-width: 0; }

/* Une seule hauteur et un seul galbe pour les quatre boutons de la barre
   utilitaire : ils se lisent comme une rangée, pas comme quatre pièces
   rapportées. 44 px est aussi la cible tactile recommandée. */
.entete__a11y,
.entete__adherer,
.entete__lien-sec,
.entete__avatar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    /* Interligne courte : sinon celle du texte courant fait dépasser les
       boutons qui sont des <a>, et la rangée redevient inégale. */
    line-height: 1.2;
    border-radius: var(--r-md);
    box-sizing: border-box;
}

.entete__a11y {
    border: 1.5px solid var(--bord-barre);
    background: var(--fond-carte-3);
    color: var(--violet-tres-pale);
    padding: 8px 13px;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 800;
    cursor: pointer;
    transition: border-color var(--t-rapide), color var(--t-rapide);
}
.entete__a11y:hover { border-color: var(--violet); color: var(--texte-fort); }

/* Le bouton d'adhésion est le seul appel à l'action de la barre : il porte
   un violet plus clair et un liseré interne pour ressortir du fond noir. */
.entete__adherer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 0;
    border-radius: var(--r-md);
    background: var(--violet-accent);
    color: #fff;
    font-size: .92rem;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset,
                0 8px 20px -8px rgba(139, 92, 246, .7);
}
.entete__adherer:hover { background: var(--violet); color: #fff; }

.entete__lien-sec {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1.5px solid var(--bord-barre);
    border-radius: var(--r-md);
    background: var(--fond-bouton);
    color: var(--texte-fort);
    font-size: .92rem;
    font-weight: 800;
    white-space: nowrap;
}
.entete__lien-sec:hover { border-color: var(--violet); color: var(--texte-fort); }

/* Compte connecté */
.entete__compte { position: relative; }
.entete__avatar-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 5px 14px 5px 5px;
    border: 1.5px solid var(--bord-barre);
    border-radius: var(--r-md);
    background: var(--fond-bouton);
    color: var(--texte-fort);
    font-family: inherit;
    font-size: .9rem;
    font-weight: 800;
    cursor: pointer;
}
.entete__avatar-btn:hover { border-color: var(--violet); }
.avatar {
    position: relative;
    width: 30px; height: 30px;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    background: var(--violet);
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
}
.avatar__pastille {
    position: absolute;
    top: -3px; right: -3px;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--alerte);
    border: 2px solid var(--fond-barre);
}
.entete__prenom { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Menus déroulants */
.menu-deroulant {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 230px;
    background: var(--fond-carte);
    border: 1px solid var(--bord-champ);
    border-radius: var(--r-md);
    box-shadow: var(--ombre-menu);
    padding: 8px;
    z-index: 60;
    display: flex;
    flex-direction: column;
}
.menu-deroulant[hidden] { display: none; }
.menu-deroulant a,
.menu-deroulant button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: var(--r-sm);
    background: none;
    color: var(--texte);
    font-family: inherit;
    font-size: .93rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}
.menu-deroulant a:hover,
.menu-deroulant button:hover { background: var(--fond-violet); color: var(--texte-fort); }
.menu-deroulant__danger { color: var(--danger) !important; }
.menu-deroulant__danger:hover { background: var(--danger-fond) !important; }
.menu-deroulant__sous {
    justify-content: flex-start !important;
    padding: 7px 12px 7px 24px !important;
    font-size: .88rem;
    font-weight: 600 !important;
    color: var(--texte-2) !important;
}
.menu-deroulant__sous span { color: var(--bord-clair); }
.menu-deroulant__sous:hover { color: var(--texte-fort) !important; }
.menu-deroulant form { margin: 0; }

/* Barre de navigation */
.entete__nav-barre {
    background: color-mix(in srgb, var(--fond-page) 92%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--bord-ligne);
}
.entete__nav-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.entete__logo img { height: 38px; width: auto; }
.entete__nav {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.entete__nav-spacer { width: 38px; }

/* Même hauteur que la barre au-dessus ; galbe plus discret, parce qu'une
   entrée de navigation n'est pas un bouton d'action. */
.entete__lien {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    min-height: 44px;
    line-height: 1.2;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--texte-doux);
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--t-rapide), color var(--t-rapide);
}
.entete__lien:hover { background: var(--fond-survol); color: var(--texte-fort); }
.entete__lien.is-actif { background: var(--fond-actif); color: var(--texte-fort); }
.entete__lien .chevron { font-size: .58rem; transform: translateY(1px); }

.entete__groupe { position: relative; display: inline-block; }
.entete__groupe .menu-deroulant {
    top: calc(100% + 6px);
    left: 0;
    right: auto;
    min-width: 260px;
}

.entete__burger { display: none; }

/* Menu mobile */
.menu-mobile {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--fond-page);
    overflow-y: auto;
    padding: 16px 20px 40px;
}
.menu-mobile[hidden] { display: none; }
.menu-mobile__tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.menu-mobile__marque {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--texte-fort);
}
.menu-mobile__marque img { height: 36px; width: auto; }
.menu-mobile__marque span {
    font-family: var(--police-titre);
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.05;
}
.menu-mobile__tete button {
    width: 42px; height: 42px;
    border: 1.5px solid var(--bord-barre);
    border-radius: var(--r-sm);
    background: var(--fond-carte-3);
    color: var(--violet-tres-pale);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
}
.menu-mobile nav { display: flex; flex-direction: column; gap: 2px; }
.menu-mobile__groupe {
    display: flex;
    flex-direction: column;
    padding: 4px 0;
    border-top: 1px solid var(--bord-ligne);
}
.menu-mobile__principal {
    padding: 13px 12px;
    border-radius: var(--r-sm);
    color: var(--texte-fort);
    font-family: var(--police-titre);
    font-weight: 800;
    font-size: 1.1rem;
}
.menu-mobile__principal--separe { border-top: 1px solid var(--bord-ligne); border-radius: 0 0 var(--r-sm) var(--r-sm); }
.menu-mobile__principal:hover { background: var(--fond-survol); color: var(--texte-fort); }

.menu-mobile__enfants { display: flex; flex-direction: column; padding: 0 0 8px 16px; }
.menu-mobile__enfants a {
    padding: 9px 12px;
    border-radius: var(--r-sm);
    color: var(--texte-doux);
    font-weight: 700;
    font-size: .98rem;
}
.menu-mobile__enfants a:hover { background: var(--fond-survol); color: var(--texte-fort); }
.menu-mobile__sous {
    padding: 8px 12px !important;
    padding-left: 26px !important;
    font-size: .92rem !important;
    font-weight: 600 !important;
    color: var(--texte-2) !important;
}
.menu-mobile__sous span { color: var(--bord-clair); }

/* Le chevron « ↳ » vire au violet trop pâle sur fond clair. */
html[data-theme="clair"] .menu-deroulant__sous span,
html[data-theme="clair"] .menu-mobile__sous span { color: #7a68a8; }

.menu-mobile__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
}
.menu-mobile__cta {
    padding: 15px;
    border-radius: var(--r-md);
    background: var(--violet-accent);
    color: #fff;
    font-weight: 800;
    font-size: 1.02rem;
    text-align: center;
}
.menu-mobile__cta:hover { background: var(--violet); color: #fff; }
.menu-mobile__second {
    padding: 14px;
    border: 1.5px solid var(--bord-barre);
    border-radius: var(--r-md);
    background: var(--fond-carte-3);
    color: var(--texte-fort);
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
}
.menu-mobile__second:hover { border-color: var(--violet); color: var(--texte-fort); }

@media (max-width: 1080px) {
    .entete__nav-barre { display: none; }
    .entete__utilitaire-inner { gap: 10px; }
    .entete__marque { flex: 1; }
    .entete__spacer { display: none; }
    .entete__lien-sec, .entete__compte { display: none; }
    .entete__burger {
        display: flex;
        flex-direction: column;
        gap: 5px;
        width: 42px; height: 42px;
        align-items: center;
        justify-content: center;
        border: 1.5px solid var(--bord-barre);
        border-radius: var(--r-sm);
        background: var(--fond-bouton);
        cursor: pointer;
    }
    .entete__burger span {
        width: 18px; height: 2.5px;
        background: var(--violet-tres-pale);
        border-radius: var(--r-mini);
    }
}

@media (max-width: 560px) {
    .entete__utilitaire-inner { padding: 10px 16px; }
    .entete__marque { font-size: .98rem; }
    /* Le réglage d'accessibilité reste accessible par la pastille flottante */
    .entete__a11y { display: none; }
    .entete__adherer { padding: 10px 16px; }
}

/* --- Pied de page --------------------------------------------------------- */

.pied {
    background: var(--fond-sombre);
    color: var(--texte-2);
    margin-top: 72px;
}
.pied__inner {
    max-width: var(--largeur-max);
    margin: 0 auto;
    padding: 56px 24px 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 36px;
}
.pied__col { display: flex; flex-direction: column; gap: 4px; }
.pied__identite { gap: 14px; align-items: flex-start; }
.pied__identite img { height: 52px; width: auto; }
.pied__titre {
    font-family: var(--police-texte);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--texte-4);
    font-weight: 800;
    margin: 0 0 8px;
}
.pied__col a { color: var(--texte-doux); font-size: .95rem; padding: 5px 0; text-decoration: none; }
.pied__col a:hover { color: var(--texte-fort); text-decoration: underline; }
.pied__col p { margin: 0; }
.pied__slogan {
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--texte-fort);
}
.pied__mention { font-size: .85rem; line-height: 1.6; color: var(--texte-3); }
.pied__contact { padding: 5px 0; font-size: .95rem; line-height: 1.6; }
.pied__cookies {
    align-self: flex-start;
    margin-top: 8px;
    padding: 7px 14px;
    border: 1px solid var(--texte-2);
    border-radius: var(--r-pill);
    background: none;
    color: var(--texte-2);
    font-family: inherit;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}
.pied__cookies:hover { border-color: var(--texte-fort); color: var(--texte-fort); }

.pied__bas {
    max-width: var(--largeur-max);
    margin: 0 auto;
    padding: 20px 24px 44px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    font-size: .85rem;
    color: var(--texte-3);
}
.pied__bas p { margin: 0; }
.pied__bas a { color: var(--texte-3); font-size: .85rem; text-decoration: none; }
.pied__bas a:hover { color: var(--texte-fort); text-decoration: underline; }
.pied__legal { display: flex; gap: 18px; flex-wrap: wrap; }

/* --- Widget d'accessibilité -----------------------------------------------
   Ses règles sont dans a11y-widget.css depuis le 3 octobre 2026 : le widget
   est aussi posé dans l'administration et l'éditeur, qui ne chargent pas
   cette feuille. Une seule source, chargée partout où le widget apparaît. */

/* --- Bandeau cookies ------------------------------------------------------ */

.cookies {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 16px;
    z-index: 210;
    width: min(760px, calc(100vw - 32px));
    background: var(--fond-carte);
    border: 1px solid var(--bord-champ);
    border-radius: var(--r-lg);
    box-shadow: 0 24px 56px -18px rgba(42, 33, 69, .4);
    padding: 18px 20px;
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}
.cookies[hidden] { display: none; }
.cookies__texte { flex: 1; min-width: 260px; margin: 0; font-size: .92rem; color: var(--texte-2); }
.cookies__texte strong { color: var(--texte); }
.cookies__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* --- Chatbot -------------------------------------------------------------
   Refait le 20 septembre 2026 sur la maquette v4. Trois principes :
     · l'en-tete tient sur deux rangs, le bandeau d'urgence occupant seul
       le second sur toute la largeur ;
     · le fil defile, le socle ne defile pas — les moyens d'agir restent au
       meme endroit du debut a la fin ;
     · une reponse se reconnait a son filet gauche avant d'etre lue : violet
       si elle cite une fiche, gris si elle n'a pas trouve, ambre si elle
       porte les numeros d'urgence.
   -------------------------------------------------------------------------- */

.chat__bouton {
    position: fixed;
    right: 16px; bottom: 16px;
    z-index: 230;
    width: 58px; height: 58px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--violet);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 14px 32px -8px rgba(125, 71, 222, .65);
    transition: background var(--t-base);
}
.chat__bouton:hover { background: var(--violet-fonce); }

/* 45rem — 720 px a taille de texte normale. Mesure a 390 px de large :
   l'en-tete en prend 142 — dont 70 pour le bandeau d'urgence, qui ne se
   negocie pas — et le socle 214 apres une reponse, 252 avec les six
   questions de depart. La lecture garde donc de 310 a 350 px.

   En rem et non en px : quand quelqu'un agrandit le texte du site, tout le
   contenu de ce panneau grandit avec lui, et une hauteur figee le rognait.

   dvh et non vh : sur telephone, 100vh vaut la hauteur SANS les barres du
   navigateur, alors qu'un element fixe vit dans la fenetre visible, plus
   courte de 85 a 110 px. Le panneau etant ancre en bas, tout le depassement
   se faisait par le haut : le nom, les trois commandes et le debut du
   bandeau 3114/119 sortaient de l'ecran. La ligne en vh reste juste avant,
   pour les navigateurs qui ignorent dvh. */
.chat {
    /* IBM Plex Mono pour ce panneau, et pour lui seul — la maquette la
       demande sur la date de relecture et l'etiquette systeme. Elle est
       auto-hebergee (fonts.css) et le navigateur ne la telecharge que si
       une regle l'utilise vraiment : elle ne part donc qu'au moment ou
       quelqu'un ouvre l'assistante et recoit une reponse. Le reste du site
       garde la chasse fixe du systeme. Pour l'etendre partout, il suffit
       de deplacer cette ligne dans tokens.css. */
    --police-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;

    position: fixed;
    right: 16px; bottom: 84px;
    z-index: 231;
    width: min(390px, calc(100vw - 32px));
    height: min(45rem, calc(100vh - 110px));
    height: min(45rem, calc(100dvh - 110px));
    display: flex;
    flex-direction: column;
    /* En hauteur : « auto » et non « hidden ». C'est le filet de securite du
       dernier recours. Quand l'en-tete, le plancher de lecture et le socle
       ne tiennent plus ensemble — telephone en paysage, texte a 150 % —, il
       faut bien que quelque chose cede : mieux vaut faire defiler le panneau
       entier que couper le bas du socle sans le dire, ce qui emportait la
       saisie et l'avertissement reglementaire.
       En largeur : « hidden », rien ne doit jamais sortir sur les cotes. */
    overflow: hidden auto;
    background: var(--fond-carte);
    border: 1px solid var(--bord-champ);
    border-radius: var(--r-lg);
    box-shadow: 0 30px 70px -20px rgba(42, 33, 69, .5);
}
.chat[hidden] { display: none; }

/* ── Texte agrandi : un panneau plus grand, pas un plein ecran ───────────
   Le widget d'accessibilite du site monte la taille du texte jusqu'a 150 %.
   Cela ne se voit pas depuis une media query — la taille vient d'un
   font-size pose sur la racine, et rem y designe toujours 16 px —, d'ou le
   drapeau data-texte-agrandi pose par a11y.js.

   Le panneau reste un panneau : prendre tout l'ecran d'un navigateur de
   bureau parce que quelqu'un a monte le texte d'un cran serait
   disproportionne. Mais il prend toute la hauteur, et il s'elargit : un
   texte plus gros a besoin de plus de largeur pour garder un nombre de
   caracteres lisible par ligne.

   32 px et non 16 : 100vw compte la barre de defilement, que le bloc de
   confinement ne compte pas. A 16, le panneau sortait de 7 px par la gauche
   sur une fenetre etroite sous Windows — invisible sur telephone, ou les
   barres sont en surimpression, ce qui rendait le defaut facile a manquer. */
html[data-texte-agrandi] .chat {
    top: 8px;
    right: 8px;
    bottom: 8px;
    left: auto;
    width: min(30rem, calc(100vw - 32px));
    height: auto;
}

/* ── Quand la place manque vraiment, le panneau prend tout ───────────────
   Ecran etroit (telephone) ou ecran court (telephone en paysage : 390 px de
   haut). Ce cas l'emporte sur le precedent, et il doit le nommer : a
   specificite egale c'est l'ordre d'ecriture qui tranche, et sans cette
   reprise le simple fait d'agrandir le texte faisait RETRECIR le panneau
   d'un telephone en paysage, jusqu'a trancher le bouton d'envoi en deux. */
@media (max-width: 520px), (max-height: 620px) {
    .chat,
    html[data-texte-agrandi] .chat {
        inset: 0;
        width: auto;
        height: auto;
        border-radius: 0;
    }
}

/* ── En-tete ─────────────────────────────────────────────────────────────
   Rang 1 : qui parle, et les trois commandes. Rang 2 : le bandeau, en
   pleine largeur grace a flex-basis 100 %. */
.chat__tete {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 10px 10px 16px;
    background: var(--fond-carte);
    border-bottom: 1px solid var(--bord-champ);
}
/* nowrap : les trois commandes restent sur le rang du nom, quelle que soit
   la largeur. C'est le nom qui cede. */
.chat__rang {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
}
.chat__identite { flex: 1 1 auto; min-width: 0; }
.chat__nom {
    margin: 0;
    font-family: var(--police-titre);
    font-weight: 800;
    font-size: 1.02rem;
    line-height: 1.2;
    color: var(--texte-fort);
    /* Le nom vient des reglages : il peut etre long, et il ne doit pas
       pousser les commandes hors du panneau. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat__role {
    margin: 0;
    font-size: .74rem;
    line-height: 1.3;
    color: var(--texte-3);
}

/* 44 px : la hauteur de commande de l'en-tete sur tout le site, et le seuil
   de la cible tactile. Le libelle est petit, la cible ne l'est pas. */
.chat__commande {
    flex: none;
    min-width: 44px;
    height: 44px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bord-champ);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--texte-2);
    font-family: inherit;
    font-size: .76rem;
    cursor: pointer;
    transition: background var(--t-base), color var(--t-base);
}
.chat__commande:hover {
    background: var(--fond-violet);
    color: var(--texte-fort);
}
.chat__commande[aria-expanded="true"] {
    background: var(--fond-violet);
    border-color: var(--bord-violet);
    color: var(--texte-fort);
}
.chat__commande--fermer { padding: 0; font-size: .95rem; }
/* « Journal » sort en couleur : c'est la seule des trois commandes qui
   apprend quelque chose — ce qui est conserve de la conversation. « Effacer »
   et la croix defont, elles n'expliquent rien. */
.chat__commande[data-chat-note] { color: var(--violet-lien); }
.chat__commande[data-chat-note]:hover,
.chat__commande[data-chat-note][aria-expanded="true"] { color: var(--texte-fort); }

/* Bandeau d'urgence : permanent, jamais conditionne a un reperage.
   Sur 133 conversations de detresse du jeu d'evaluation, un reperage par
   mots-cles n'en leve que 14 % — l'acces au 3114 ne peut donc pas en
   dependre. Il porte aussi la transparence exigee par le reglement
   europeen sur l'IA : on lit qu'on parle a une machine avant d'ecrire. */
.chat__urgence {
    /* Plus de flex : la pastille « i » est partie, et avec elle la seule
       raison d'avoir deux colonnes. Le bandeau redevient un paragraphe, ce
       qu'il n'a jamais cesse d'etre. */
    display: block;
    margin: 0;
    padding: 9px 11px;
    border-radius: var(--r-sm);
    background: var(--fond-violet);
    font-size: .74rem;
    line-height: 1.45;
    color: var(--texte-2);
}
/* Ce qu'on lit en premier : qui repond, et ce qu'il ne peut pas faire. */
.chat__urgence-tete {
    color: var(--texte-fort);
    font-weight: 700;
}
/* Les deux numeros sortent en couleur plutot qu'en blanc : ce sont les seuls
   mots de ce bandeau sur lesquels on peut avoir a agir. Contraste mesure sur
   le fond du bandeau : 4,9:1 en sombre, 6,3:1 en clair — AA aux deux. */
.chat__urgence strong {
    color: var(--violet-lien);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Le depliant « Journal » ─────────────────────────────────────────────
   Ce qui est conserve des echanges. La politique de confidentialite porte
   le meme texte en plus complet (migration 024) : le lien y renvoie. */
.chat__note {
    flex: none;
    padding: 11px 16px 13px;
    background: var(--fond-carte-2);
    border-bottom: 1px solid var(--bord-champ);
    font-size: .74rem;
    line-height: 1.5;
    color: var(--texte-2);
}
.chat__note[hidden] { display: none; }
.chat__note p { margin: 0; }
.chat__note p + p { margin-top: 7px; }
.chat__note a { color: var(--violet-lien); }

/* ── Le fil ──────────────────────────────────────────────────────────────
   min-height: 0 est indispensable : sans lui, un enfant en flex refuse de
   passer sous la taille de son contenu et c'est le socle qui sort du
   panneau au lieu que le fil defile. */
.chat__fil {
    /* La base est 0, et non auto : avec auto, la taille de reference du fil
       est la hauteur de TOUTE la conversation, ce qui cree un deficit des la
       deuxieme reponse et ecrase le socle — les puces tombaient a zero. Avec
       0, le fil ne prend que la place libre, et ne reclame rien.
       Le plancher de 6rem, lui, grandit avec le texte : sans lui, l en-tete
       et le socle prenaient toute la hauteur quand le texte est agrandi, et
       la conversation tombait a 0 px de contenu. */
    flex: 1 1 0;
    min-height: 6rem;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--fond-page);
}

/* Sur un ecran tres court — telephone en paysage, 390 px de haut —, le
   plancher de lecture cede entierement. C'est l'ordre de priorite qui le
   veut : le fil defile de toute facon, tandis que l'en-tete porte les
   numeros d'urgence, qui doivent se lire AVANT d'ecrire, et que le socle
   porte la saisie, sans laquelle il n'y a rien a ecrire. Mesure a 844 x 390
   avec le texte a 150 % : sans cela, le plancher poussait la saisie et la
   consigne sous la ligne de flottaison. */
@media (max-height: 520px) {
    .chat__fil { min-height: 0; }
}

/* ── Telephone ET texte agrandi : les puces disparaissent ────────────────
   Sur un telephone, agrandir le texte fait exploser l en-tete : le bandeau
   d urgence passe a huit lignes. Mesure a 390 x 844 avec le texte a 150 %
   et l interligne double : l en-tete pese 451 px a lui seul, les puces 203,
   et la saisie passait sous la ligne de flottaison. En paysage (844 x 390),
   l en-tete pese 202 et il ne reste rien.

   L ordre de priorite est alors sans ambiguite : d abord le bandeau, qui
   doit se lire AVANT d ecrire et qui porte le 3114 et le 119 ; ensuite la
   saisie, sans laquelle il n y a rien a ecrire ; ensuite la lecture ; les
   puces en dernier. Ce sont elles qui cedent : on peut toujours ecrire ou
   dicter sa question, on ne peut rien faire sans champ.

   Le titre du socle part avec elles — il ne nommerait plus rien. */
@media (max-width: 520px), (max-height: 520px) {
    html[data-texte-agrandi] .chat__socle-titre,
    html[data-texte-agrandi] .chat__suggestions { display: none; }
}

.chat__bulle {
    max-width: 82%;
    padding: 12px 14px;
    font-size: .94rem;
    line-height: 1.55;
    overflow-wrap: break-word;
}
/* Le retour a la ligne du corpus est signifiant : listes, paragraphes.
   Il descend sur le texte seul, la bulle portant desormais des boutons. */
.chat__texte { white-space: pre-wrap; }

/* ── L'accueil, et lui seul, est mis en paragraphes ──────────────────────
   Il dit deux choses distinctes — qui repond, puis comment s'en servir — et
   les deux se lisaient comme un seul pave. Un filet les separe.

   Aucune reponse ne passe par la : une reponse est une CITATION, ses
   paragraphes sont ceux du redacteur, et poser un filet entre eux ferait
   croire a une frontiere qu'il n'a pas ecrite. */
.chat__texte--paragraphes { white-space: normal; }
.chat__para { margin: 0; }
.chat__para + .chat__para {
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px solid var(--bord-champ);
}

.chat__bulle--user {
    align-self: flex-end;
    background: var(--violet);
    color: #fff;
    border-radius: var(--r-md) var(--r-md) var(--r-mini) var(--r-md);
}

/* Une carte, pas une bulle : ce que dit l'assistante est une citation, et
   le filet gauche en donne la nature avant meme la premiere ligne. */
.chat__bulle--bot {
    align-self: flex-start;
    max-width: 100%;
    background: var(--fond-carte);
    border-left: 3px solid var(--texte-3);
    border-radius: var(--r-mini) var(--r-sm) var(--r-sm) var(--r-mini);
    color: var(--texte-doux);
}
/* Violet : la reponse cite une fiche relue et signee. */
.chat__bulle--fiche { border-left-color: var(--violet-lien); }
/* Gris : l'assistante n'a pas trouve, ou ne fait que saluer. C'est une
   reponse honnete, pas une erreur — d'ou le gris et non le rouge. */
.chat__bulle--silence { border-left-color: var(--texte-3); }
/* Ambre et non rouge : les numeros d'urgence doivent se voir sans mettre
   en alarme quelqu'un qui va deja mal. */
.chat__bulle--securite { border-left-color: var(--alerte); }

/* ── La mention de relecture, en tete de reponse ─────────────────────────
   Elle fermait la reponse ; elle l'ouvre. Ce qu'elle dit — quelqu'un a relu
   ceci et l'a signe — est ce qui autorise a lire la suite, et se lisait donc
   une fois la lecture deja faite.

   Elle reste DANS le texte de la reponse : elle survit au copier-coller et a
   la lecture a voix haute, ce qu'une pastille posee a cote ne ferait pas. Le
   widget ne fait que l'habiller ; c'est composer() qui l'a deplacee.

   display: block, et surtout pas inline-flex. En inline-flex, la phrase
   devenait une boite dont chaque morceau — le texte, puis la date — etait un
   element de flex pose sur sa propre colonne : on lisait « par Yoan      19 »
   / « Baldacchino le septembre 2026 ». Le CONTENU doit rester du texte
   courant, meme quand la boite, elle, est un bandeau. */
.chat__validation {
    display: block;
    margin: 0 0 2px;
    padding: 7px 11px;
    border: 1px solid var(--succes-bord);
    border-radius: var(--r-sm);
    background: var(--succes-fond);
    color: var(--succes);
    font-size: .8rem;
    line-height: 1.45;
    /* Le texte de la reponse est en pre-wrap : sans cela, la phrase garderait
       les retours a la ligne du collage a l'interieur du bandeau. */
    white-space: normal;
}
.chat__validation::before {
    content: "✓";
    margin-right: 7px;
    font-weight: 700;
    /* Pas de pastille pleine : sur fond vert clair, la coche seule se lit
       mieux qu'un disque violet, qui appellerait une troisieme couleur. */
    color: var(--succes);
}
/* ── Le numero d'urgence, dans une reponse de detresse ───────────────────
   Ces reponses-la n'ont qu'UNE chose a y faire, et c'est appeler. Le numero
   s'y lisait au fil du texte, a la meme taille que le reste, pour quelqu'un
   qui va mal et ne lira peut-etre pas la phrase en entier.

   Ambre et non rouge, comme le filet gauche de ces bulles : il faut que le
   numero se voie sans mettre en alarme quelqu'un qui va deja mal.

   Le pave ne sort QUE dans une bulle de ton « securite » (voir
   marquerLesNumeros) : ailleurs, un chiffre reste un chiffre. */
.chat__numero {
    display: inline-block;
    margin: 0 2px;
    padding: 1px 9px 2px;
    border: 1px solid var(--alerte-bord);
    border-radius: var(--r-xs);
    background: var(--alerte-fond);
    color: var(--alerte);
    font-family: var(--police-mono);
    font-size: 1.1em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* La date ne se coupe pas en deux : « 19 » en fin de ligne et
   « septembre 2026 » a la suivante se lisent mal, a chasse fixe plus
   encore. */
.chat__date {
    font-family: var(--police-mono);
    font-size: .94em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Etiquette d'un message qui ne vient pas de l'assistante : une panne de
   reseau n'est pas une reponse, et ne doit pas etre lue comme telle. */
.chat__systeme {
    display: block;
    margin-bottom: 5px;
    font-family: var(--police-mono);
    font-size: .68rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--texte-3);
}
/* Le carre de la maquette : une marque muette, qui distingue l'etiquette du
   texte d'une reponse sans lui ajouter un mot a lire. aria-hidden par
   construction — un ::before n'est pas dans l'arbre d'accessibilite. */
.chat__systeme::before {
    content: "";
    display: inline-block;
    width: 7px; height: 7px;
    margin-right: 7px;
    vertical-align: 1px;
    border-radius: 1px;
    background: var(--texte-3);
}

.chat__points {
    display: flex;
    gap: 5px;
    align-self: flex-start;
    padding: 14px 16px;
    background: var(--fond-carte);
    border-left: 3px solid var(--violet-lien);
    border-radius: var(--r-mini) var(--r-sm) var(--r-sm) var(--r-mini);
}
.chat__points i {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--violet);
    animation: chat-clignote 1.2s infinite;
}
.chat__points i:nth-child(2) { animation-delay: .2s; }
.chat__points i:nth-child(3) { animation-delay: .4s; }
@keyframes chat-clignote { 0%, 80%, 100% { opacity: .25 } 40% { opacity: 1 } }

/* ── Outils sous une reponse : deplier, ecouter ─────────────────────────── */
.chat__outils {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.chat__outil {
    padding: 5px 11px;
    border: 1px solid var(--bord-violet);
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--violet-lien);
    font-family: inherit;
    font-size: .78rem;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}
.chat__outil:hover { background: var(--fond-violet); }
.chat__outil.est-actif {
    background: var(--violet);
    border-color: var(--violet);
    color: #fff;
}
/* Le libelle change quand la partie repliee pose des conditions : il devient
   long, et il doit pouvoir tenir sur deux lignes sans casser la barre. */
.chat__outil--deplier { max-width: 100%; }

/* ── Les deux sorties d'une panne ────────────────────────────────────────
   Un message du systeme n'est pas une reponse : il n'y a rien a y ecouter,
   il y a quelque chose a y FAIRE. « Reessayer » refait la demande,
   « Page Contact » passe a un humain. Ils remplacent « Ecouter », qui
   faisait lire une panne par la voix de l'assistante — exactement ce que
   l'etiquette « pas de Lea » venait de dementir.

   Gris et non violet : ces bulles-la portent le filet gris, et leurs boutons
   ne doivent pas etre plus engageants que ceux d'une vraie reponse. */
.chat__outil--reprise,
.chat__outil--contact {
    border-color: var(--bord-champ);
    color: var(--texte-2);
}
.chat__outil--reprise:hover,
.chat__outil--contact:hover {
    background: var(--fond-carte-2);
    color: var(--texte-fort);
}
.chat__outil--reprise:disabled { opacity: .45; cursor: not-allowed; }
/* « Page Contact » est un lien : c'est une navigation, et il doit pouvoir
   s'ouvrir dans un onglet. Il emprunte l'habillage du bouton, pas sa nature. */
.chat__outil--contact {
    display: inline-block;
    text-decoration: none;
}

/* ── Le socle ────────────────────────────────────────────────────────────
   Il ne defile pas : ce qu'on peut demander et ou l'ecrire restent au meme
   endroit du debut a la fin de la conversation. */
/* Le socle peut retrecir — mais par les puces seules : le titre, la saisie
   et la consigne sont en flex: none, si bien que ce qui est sacrifie en
   premier est ce qui coute le moins.

   PAS de min-height: 0 ici. Il supprimerait la taille minimale automatique
   du contenu, et flexbox reduirait alors le socle SOUS ce que ses enfants
   exigent : passee la marge des puces, la saisie et la consigne etaient
   rognees en silence. Sans lui, le socle s'arrete a sa taille minimale —
   titre, saisie, consigne, puces a zero — et le debordement eventuel fait
   defiler le panneau entier (voir .chat) au lieu d'etre coupe. */
.chat__socle {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 12px 10px;
    background: var(--fond-carte);
    border-top: 1px solid var(--bord-champ);
}
.chat__socle-titre {
    flex: none;
    margin: 0;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--texte-3);
}

/* 8,6rem — 138 px a taille de texte normale : la hauteur qui contient a la
   fois les six questions de depart (132 px sur trois rangs) et le pire des
   jeux de deux suggestions que le corpus sache produire (135 px, mesure sur
   les 138 jeux possibles).

   En rem et non en px : les puces sont en rem, et un plafond fige les
   tronquait des le premier cran d'agrandissement — 112,5 %, soit sous le
   seuil qui allume data-texte-agrandi. Le plafond suit donc le texte.

   Le 21vh prend le relais sur ecran court : quand la place manque, elle se
   prend sur les suggestions et non sur la lecture. */
.chat__suggestions {
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: min(8.6rem, 21vh);
    overflow-y: auto;
}
.chat__suggestions[hidden] { display: none; }
.chat__suggestions button {
    min-height: 40px;
    padding: 6px 13px;
    max-width: 100%;
    border: 1px solid var(--bord-violet);
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--violet-lien);
    font-family: inherit;
    font-size: .82rem;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}
.chat__suggestions button:hover:not(:disabled) { background: var(--fond-violet); }
.chat__suggestions button:disabled { opacity: .45; cursor: not-allowed; }

.chat__form { flex: none; display: flex; gap: 6px; align-items: flex-end; }
.chat__form textarea {
    min-height: 48px;
    max-height: 110px;
    padding: 13px 14px;
    resize: none;
    border-radius: var(--r-sm);
    background: var(--fond-carte-2);
}
.chat__micro,
.chat__envoyer {
    flex: none;
    width: 48px; height: 48px;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    cursor: pointer;
}
.chat__micro {
    border: 1px solid var(--bord-violet);
    background: transparent;
    color: var(--violet-lien);
}
.chat__micro:hover:not(:disabled) { background: var(--fond-violet); }
.chat__micro:disabled { opacity: .4; cursor: not-allowed; }
.chat__micro.est-actif {
    background: var(--violet);
    border-color: var(--violet);
    color: #fff;
    animation: chat-ecoute 1.4s ease-in-out infinite;
}
.chat__envoyer {
    border: 0;
    background: var(--violet);
    color: #fff;
}
.chat__envoyer:hover { background: var(--violet-fonce); }
/* La couleur du dessin change avec le fond : en mode clair, --bord-violet
   est un lavande pale sur lequel une fleche blanche ne se voit plus. */
.chat__envoyer:disabled {
    background: var(--bord-violet);
    color: var(--texte-2);
    cursor: not-allowed;
}

/* Le halo reprend --violet (#7d47de) decompose : une ombre portee ne sait pas
   lire une variable de couleur avec une opacite, et color-mix() n'est pas
   partout. Si le violet du site change, cette valeur est a changer ici. */
@keyframes chat-ecoute {
    0%, 100% { box-shadow: 0 0 0 0 rgba(125, 71, 222, .45); }
    50%      { box-shadow: 0 0 0 7px rgba(125, 71, 222, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .chat__micro.est-actif { animation: none; }
    .chat__points i { animation: none; opacity: .6; }
}

/* ── La ligne de consigne ────────────────────────────────────────────────
   Au repos l'avertissement ; pendant la dictee, ce qui se passe. Le second
   prend la place du premier au lieu de s'ajouter : le socle ne grandit pas
   au moment precis ou quelqu'un parle.
   Si :has() manque, les deux s'affichent — verbeux, jamais casse. */
.chat__consigne-zone { flex: none; min-height: 1.05em; }
.chat__consigne,
.chat__etat {
    margin: 0;
    font-size: .72rem;
    line-height: 1.45;
    color: var(--texte-3);
}
.chat__etat:empty { display: none; }
.chat__consigne-zone:has(.chat__etat:not(:empty)) .chat__consigne { display: none; }

/* En plein ecran il y a de quoi montrer davantage de questions : le plafond
   de 138 px etait calcule pour un panneau de 390 x 720 a taille normale. */
/* Mesure a 390 x 844 avec le texte a 150 % : a 34dvh, les six puces
   prenaient 263 px — un tiers du panneau — pendant que la conversation
   restait a son plancher de 144. Les puces sont un confort, la lecture est
   l'objet : leur plafond est donc borne en pixels ET en part d'ecran, et il
   reste modeste. Ce qui ne tient pas defile, avec une barre visible. */
@media (max-width: 520px), (max-height: 620px) {
    .chat__suggestions { max-height: min(200px, 26dvh); }
}
html[data-texte-agrandi] .chat__suggestions { max-height: min(240px, 24dvh); }

/* ── Les barres de defilement du panneau se voient ───────────────────────
   Sur macOS, iOS et Android, une barre de defilement est posee en
   surimpression et disparait au repos : rien n'indiquait qu'une liste de
   puces avait une suite. Les declarer ici les rend permanentes, y compris
   sur ces systemes, et c'est la seule chose qui distingue une liste courte
   d'une liste tronquee.

   --violet-lien et non --bord-violet : le contraste de --bord-violet avec
   le fond tombe sous 3:1 dans les deux themes, et une barre qu'on ne
   distingue pas ne signale rien. --violet-lien tient 5,6:1 en sombre et
   7,3:1 en clair.

   Les deux ecritures cohabitent a dessein : Chrome et Firefox appliquent
   les proprietes standard, Safari d'avant 18.2 ne connait que les ::-webkit-. */
.chat,
.chat__fil,
.chat__suggestions {
    scrollbar-width: thin;
    scrollbar-color: var(--violet-lien) transparent;
}
.chat::-webkit-scrollbar,
.chat__fil::-webkit-scrollbar,
.chat__suggestions::-webkit-scrollbar { width: 9px; }
.chat::-webkit-scrollbar-track,
.chat__fil::-webkit-scrollbar-track,
.chat__suggestions::-webkit-scrollbar-track { background: transparent; }
.chat::-webkit-scrollbar-thumb,
.chat__fil::-webkit-scrollbar-thumb,
.chat__suggestions::-webkit-scrollbar-thumb {
    background: var(--violet-lien);
    border: 2px solid transparent;
    background-clip: content-box;
    border-radius: var(--r-pill);
}
.chat::-webkit-scrollbar-thumb:hover,
.chat__fil::-webkit-scrollbar-thumb:hover,
.chat__suggestions::-webkit-scrollbar-thumb:hover {
    background: var(--violet);
    background-clip: content-box;
}

/* --- Carte actualité ------------------------------------------------------ */

.carte-actu {
    display: flex;
    flex-direction: column;
    background: var(--fond-carte);
    border: 1.5px solid var(--bord-carte);
    border-radius: var(--r-lg);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.carte-actu:hover {
    transform: translateY(-3px);
    box-shadow: var(--ombre-carte);
    color: inherit;
}
.carte-actu__media { position: relative; }
.carte-actu__media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.carte-actu__avenir {
    position: absolute;
    top: 12px; left: 12px;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    background: var(--alerte-fond);
    border: 1px solid var(--alerte-bord);
    color: var(--alerte);
    font-size: .78rem;
    font-weight: 800;
}
.carte-actu__corps { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.carte-actu__meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.carte-actu__type {
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--fond-violet-2);
    color: var(--violet-lien);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 800;
    font-size: .76rem;
}
.carte-actu__date { color: var(--texte-3); font-size: .85rem; font-weight: 600; }
.carte-actu__titre {
    font-family: var(--police-titre);
    font-weight: 800;
    font-size: 1.12rem;
    line-height: 1.3;
    color: var(--texte);
}
.carte-actu__extrait { font-size: .93rem; line-height: 1.6; color: var(--texte-2); }
.carte-actu__lire {
    margin-top: auto;
    padding-top: 6px;
    font-size: .9rem;
    font-weight: 700;
    color: var(--violet-lien);
}

/* Sur l'accueil la carte est plus compacte : ni badge « À venir », ni lien. */
.b-eventsteaser .carte-actu__titre { font-size: 1.08rem; }
.b-eventsteaser .carte-actu__extrait { line-height: 1.55; }

/* ==========================================================================
   Pages de contenu, actualités, fil d'Ariane
   ========================================================================== */

.page-entete { padding-top: 44px; padding-bottom: 0; }
.page-titre {
    font-size: clamp(2rem, 4.2vw, 2.9rem);
    line-height: 1.08;
    letter-spacing: -.015em;
}

/* Badge et introduction de l'en-tête, composés dans l'éditeur. Même pastille
   que la bannière d'accueil, pour que les deux en-têtes se répondent. */
.page-entete__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 7px 14px;
    background: var(--fond-carte);
    border: 1px solid var(--bord-violet-2);
    border-radius: var(--r-pill);
    color: var(--violet-lien-hover);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.page-entete__intro {
    max-width: 62ch;
    margin: 14px 0 0;
    color: var(--texte-2);
    font-size: 1.06rem;
    line-height: 1.65;
}
.page-contenu { margin-top: 44px; }

/* Fil d'Ariane */
.fil-ariane { margin-bottom: 1rem; font-size: .88rem; }
.fil-ariane ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    margin: 0;
}
.fil-ariane li { display: flex; align-items: center; gap: 6px; margin: 0; }
.fil-ariane a { color: var(--texte-3); }
.fil-ariane a:hover { color: var(--violet-lien-hover); text-decoration: underline; }
.fil-ariane__sep { color: var(--violet-pale); }
.fil-ariane [aria-current="page"] { color: var(--violet-lien); font-weight: 700; }

/* Sous-rubriques */
.page-sousrubriques {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 1.4rem;
}
.page-sousrubriques__label { font-size: .9rem; color: var(--texte-3); }
.pilule {
    padding: 7px 15px;
    border: 1.5px solid var(--bord-violet);
    border-radius: var(--r-pill);
    background: var(--fond-carte);
    color: var(--violet-lien);
    font-size: .9rem;
    font-weight: 600;
}
.pilule:hover { background: var(--fond-violet-2); border-color: var(--violet); }

/* La grille « À lire aussi » sous une actualité. La page de liste, elle, a
   son propre habillage dans actualites.css, chargé par elle seule. */
.actus-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
    margin-top: 28px;
}

/* Détail actualité */
.actu-entete { padding-top: 36px; }
.lien-retour { color: var(--texte-3); font-size: .92rem; }
.lien-retour:hover { color: var(--violet-lien-hover); text-decoration: underline; }
.actu-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: .88rem;
    color: var(--texte-3);
    margin: 1rem 0;
}
.actu-image {
    width: 100%;
    aspect-ratio: 16 / 8;
    object-fit: cover;
    border-radius: var(--r-lg);
    margin-top: 1.5rem;
}
.actu-autres { margin-top: 64px; }
.actu-autres h2 { font-size: 1.5rem; }

/* --- Contact -------------------------------------------------------------- */

.contact-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 22px;
    align-items: start;
    margin-top: 24px;
}
.contact-form { display: flex; flex-direction: column; gap: 18px; padding: 28px; }
.contact-form__ligne {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}
.contact-consent {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--texte-2);
}
.contact-consent input { flex-shrink: 0; margin-top: 2px; }
.contact-form .btn { align-self: flex-start; }

.contact-succes { text-align: center; padding: 36px; border-color: var(--succes-bord); }
.contact-succes__coche {
    display: grid; place-items: center;
    width: 52px; height: 52px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--succes-fond);
    color: var(--succes);
    font-size: 1.5rem;
}

.contact-aside { display: flex; flex-direction: column; gap: 18px; }
.contact-aside h2 { margin: 0 0 12px; font-size: 1.2rem; }
/* Encart violet : il reste sombre en mode clair, donc il pose sa propre
   couleur de texte au lieu de l'hériter de la page. */
.contact-aside__violet { background: var(--fond-panneau); border-color: transparent; color: #fff; }
.contact-aside__violet p { color: var(--texte-doux); }
.contact-dl {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: .95rem;
}
.contact-dl dt {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--texte-4);
    font-weight: 800;
}
.contact-dl dd { margin: 2px 0 0; color: var(--texte-doux); }
.contact-aside__note { display: flex; gap: 14px; background: var(--fond-violet-2); }
.contact-aside__note p { margin: 0; font-size: .92rem; color: var(--texte-2); }
.contact-aside__i {
    flex-shrink: 0;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px var(--bord-violet-2);
    color: var(--violet-lien);
    font-weight: 700;
}


/* --- En-tête de page illustrée -----------------------------------------------
   Adhésion et annuaire : le texte d'introduction et son illustration se
   partagent la largeur, puis s'empilent quand la place manque. */

.tete-illustree {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}
.tete-illustree__texte { min-width: 0; }
.tete-illustree__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--r-xl);
    box-shadow: var(--ombre-carte);
}

@media (max-width: 860px) {
    .tete-illustree { grid-template-columns: 1fr; gap: 24px; }
    /* L'illustration passe sous le texte : on lit le titre avant de la voir. */
    .tete-illustree__image { aspect-ratio: 16 / 9; }
}

/* L'illustration de la page Contact ouvre la colonne de droite. */
.contact-aside__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--r-lg);
}

/* Les pages que l’assistante nomme deviennent cliquables : le nom de la page
   vient du modèle, l’adresse vient du serveur. Le lien doit se voir sans
   dépendre de la couleur seule — un simple changement de teinte ne suffit pas
   pour qui distingue mal les couleurs. */
.chat__lien {
    color: var(--violet-lien);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    border-radius: var(--r-mini);
}

.chat__lien:hover,
.chat__lien:focus-visible {
    color: var(--violet-lien-hover);
    text-decoration-thickness: 2px;
}

.chat__lien:focus-visible {
    outline: 2px solid var(--violet-accent);
    outline-offset: 2px;
}

/* Dans une bulle, le gras porte souvent le nom de la page : le lien en hérite
   et reste gras, sans qu’il faille le redire. */
.chat__bulle--bot strong .chat__lien { font-weight: inherit; }

/* Présidence et services, dans la colonne de droite de la page de contact. */
.contact-national { list-style: none; margin: 0; padding: 0; }
.contact-national > li + li {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--bord-ligne);
}
.contact-national__objet { font-weight: 700; margin: 0 0 2px; }
.contact-national__nom { margin: 0 0 2px; color: var(--texte-2); }
.contact-national p { margin: 0; font-size: .9rem; }