@charset "UTF-8";

/* ===========================================================================
   Les Hirondelles — feuille de style unique
   ---------------------------------------------------------------------------
   Choix de conception, liés au public de l'association :

   • Fond légèrement chaud plutôt que blanc pur : réduit l'éblouissement.
   • Contrastes suffisants (WCAG AA) sans être agressifs.
   • Aucune animation automatique, aucun défilement détourné, aucun carrousel.
     Ce qui bouge tout seul gêne la lecture et peut être une source d'anxiété.
   • Espacements généreux et hiérarchie visible : la structure de la page se
     comprend d'un coup d'œil.
   • Zones cliquables larges (44 px minimum).
   • Mise en page fluide, sans point de rupture brutal.

   Sommaire
     1.  Variables
     2.  Réinitialisation et bases
     3.  Utilitaires
     4.  En-tête et navigation
     5.  Pied de page
     6.  Structure des pages
     7.  Contenu enrichi
     8.  Boutons et liens
     9.  Cartes et listes
     10. Articles et commentaires
     11. Formulaires
     12. Messages et badges
     13. Espace de rédaction
     14. Éditeur de texte
     15. Impression
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. Variables
   --------------------------------------------------------------------------- */

:root {
    /* Couleurs — teintes sourdes, jamais saturées à fond. */
    --bleu-profond:  #16404E;
    --bleu:          #24707F;
    --bleu-vif:      #1B5D6B;
    --bleu-pale:     #E2EEF1;
    --bleu-brume:    #F1F7F8;

    /* Le ruban bleu de l'autisme, qui sert de logo. Seule teinte franche du
       site : c'est un symbole, il doit se reconnaître. */
    --ruban:         #2B6FB8;
    --ruban-ombre:   #1D4F86;

    --ambre:         #B87514;
    --ambre-pale:    #FBF1DF;

    --fond:          #FAF8F4;
    --surface:       #FFFFFF;
    --surface-2:     #F4F1EB;

    --texte:         #1E2C33;
    --texte-doux:    #4E626C;
    --bordure:       #DCD8D0;
    --bordure-forte: #BDB8AE;

    --succes:        #1F6B47;
    --succes-fond:   #E6F3EC;
    --erreur:        #96281B;
    --erreur-fond:   #FBEAE7;

    /* Rythme vertical, sur une échelle simple. */
    --espace-xs: 0.375rem;
    --espace-s:  0.75rem;
    --espace-m:  1.25rem;
    --espace-l:  2rem;
    --espace-xl: 3.25rem;
    --espace-xxl: 5rem;

    --rayon:       10px;
    --rayon-petit: 6px;

    --ombre:       0 1px 2px rgba(22, 64, 78, 0.06),
                   0 4px 14px rgba(22, 64, 78, 0.06);
    --ombre-forte: 0 2px 6px rgba(22, 64, 78, 0.10),
                   0 12px 28px rgba(22, 64, 78, 0.10);

    --largeur:        1140px;
    --largeur-etroit: 760px;

    /* Longueur de ligne : au-delà de ~70 caractères, l'œil perd la ligne. */
    --mesure: 68ch;

    --police: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;

    --transition: 140ms ease-out;
}

/* Variante sombre pour les personnes sensibles à la luminosité.
   Suit simplement le réglage du système, sans bouton supplémentaire.

   Les fonds sont en bleu marine, dans la famille du ruban de la journée
   de l'autisme, plutôt qu'en gris neutre : à la demande de l'association.
   Toute la famille suit (--fond, --surface, --bordure…), sinon des cartes
   grises se détacheraient en vert sur un fond bleu. Les couleurs d'accent
   et de texte, elles, ne changent pas. */
@media (prefers-color-scheme: dark) {
    :root {
        --bleu-profond:  #A9D4DE;
        --bleu:          #6FB6C6;
        --bleu-vif:      #8CC8D6;
        --bleu-pale:     #1E3A57;
        --bleu-brume:    #17304B;

        --ruban:         #6FAEE8;
        --ruban-ombre:   #3F7FBF;

        --ambre:         #E5B063;
        --ambre-pale:    #33291A;

        --fond:          #12283F;
        --surface:       #19334E;
        --surface-2:     #1F3D5C;

        --texte:         #E6EDEF;
        --texte-doux:    #AEC0CE;
        --bordure:       #2B4665;
        --bordure-forte: #3E5C80;

        --succes:        #7CC7A0;
        --succes-fond:   #163025;
        --erreur:        #EFA79C;
        --erreur-fond:   #351C19;

        --ombre:       0 1px 2px rgba(0, 0, 0, 0.3),
                       0 4px 14px rgba(0, 0, 0, 0.25);
        --ombre-forte: 0 2px 6px rgba(0, 0, 0, 0.35),
                       0 12px 28px rgba(0, 0, 0, 0.3);
    }
}


/* ---------------------------------------------------------------------------
   2. Réinitialisation et bases
   --------------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

/* Respect du réglage système : aucune animation ni défilement animé. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font-family: var(--police);
    font-size: 1.0625rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    margin: 0 0 var(--espace-s);
    color: var(--bleu-profond);
    font-weight: 700;
    line-height: 1.25;
    text-wrap: balance;
}

h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.85rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }

p, ul, ol, blockquote, table, figure {
    margin: 0 0 var(--espace-m);
}

a {
    color: var(--bleu-vif);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--bleu-profond);
}

/* Contour de focus toujours visible et épais : la navigation au clavier
   doit rester lisible sans effort. */
:focus-visible {
    outline: 3px solid var(--bleu);
    outline-offset: 2px;
    border-radius: 3px;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

code {
    padding: 0.1em 0.35em;
    background: var(--surface-2);
    border-radius: 4px;
    font-size: 0.9em;
}

hr {
    height: 1px;
    margin: var(--espace-l) 0;
    border: 0;
    background: var(--bordure);
}

main:focus {
    outline: none;
}


/* ---------------------------------------------------------------------------
   3. Utilitaires
   --------------------------------------------------------------------------- */

.conteneur {
    width: 100%;
    max-width: var(--largeur);
    margin-inline: auto;
    padding-inline: var(--espace-m);
}

.conteneur--etroit {
    max-width: var(--largeur-etroit);
}

/* Visible uniquement pour les lecteurs d'écran. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Lien d'évitement : premier élément focalisable de la page. */
.skip-link {
    position: absolute;
    top: -100px;
    left: var(--espace-m);
    z-index: 100;
    padding: var(--espace-s) var(--espace-m);
    background: var(--bleu-profond);
    color: #FFF;
    border-radius: 0 0 var(--rayon-petit) var(--rayon-petit);
    text-decoration: none;
    transition: top var(--transition);
}

.skip-link:focus {
    top: 0;
    color: #FFF;
}

/* Champ leurre anti-robots : retiré du flux sans display:none, que
   certains robots savent détecter. */
.pot-de-miel {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.vide {
    padding: var(--espace-l);
    background: var(--surface);
    border: 1px dashed var(--bordure-forte);
    border-radius: var(--rayon);
    color: var(--texte-doux);
    text-align: center;
}

.note {
    color: var(--texte-doux);
    font-size: 0.9375rem;
}

.ligne {
    display: inline;
    margin: 0;
}


/* ---------------------------------------------------------------------------
   4. En-tête et navigation
   --------------------------------------------------------------------------- */

.entete {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--surface);
    border-bottom: 1px solid var(--bordure);
}

.entete__interieur {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espace-m);
    padding-block: var(--espace-s);
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--espace-s);
    color: var(--bleu-profond);
    text-decoration: none;
}

.logo--centre {
    justify-content: center;
    margin-bottom: var(--espace-m);
}

.logo__image {
    width: 56px;
    height: 56px;
    flex: none;
}

.logo__image--grand {
    width: 72px;
    height: 72px;
}

/* Le ruban est un trait épais, pas une surface : la boucle et les deux pans
   sont un même tracé, le pan qui passe dessous est simplement plus sombre. */
.logo__ruban {
    fill: none;
    stroke: var(--ruban);
    stroke-width: 9;
}

.logo__ruban--dessous {
    stroke: var(--ruban-ombre);
}

.logo__texte {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.logo__nom {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.logo__mention {
    color: var(--ambre);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Masqué tant que JavaScript n'a pas pris la main : sans lui, le menu reste
   simplement déployé et le bouton n'aurait servi à rien. */
.menu-bascule {
    display: none;
    align-items: center;
    gap: var(--espace-xs);
    min-height: 44px;
    margin-left: auto;
    padding: var(--espace-xs) var(--espace-s);
    background: var(--surface);
    border: 1px solid var(--bordure-forte);
    border-radius: var(--rayon-petit);
    color: var(--texte);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.menu-bascule__barres,
.menu-bascule__barres::before,
.menu-bascule__barres::after {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    content: "";
}

.menu-bascule__barres {
    position: relative;
}

.menu-bascule__barres::before { position: absolute; top: -6px; }
.menu-bascule__barres::after  { position: absolute; top: 6px; }

.navigation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espace-s);
    margin-left: auto;
}

.navigation__liste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.navigation__liste a {
    display: block;
    padding: var(--espace-s) var(--espace-m);
    border-radius: var(--rayon-petit);
    color: var(--texte);
    font-weight: 600;
    text-decoration: none;
}

.navigation__liste a:hover {
    background: var(--bleu-pale);
    color: var(--bleu-profond);
}

/* La page courante est signalée par un trait sous le libellé, pas seulement
   par une couleur : l'information ne dépend jamais de la seule couleur. */
.navigation__liste a[aria-current="page"] {
    background: var(--bleu-pale);
    color: var(--bleu-profond);
    box-shadow: inset 0 -3px 0 var(--bleu);
}

.barre-redaction {
    display: flex;
    align-items: center;
    gap: var(--espace-s);
    padding-left: var(--espace-m);
    border-left: 1px solid var(--bordure);
}

@media (max-width: 860px) {
    /* L'en-tête reçoit la classe entete--js une fois le script chargé. */
    .entete--js .menu-bascule {
        display: inline-flex;
    }

    .navigation {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        margin-left: 0;
    }

    .navigation .recherche {
        padding-block: var(--espace-s);
    }

    .navigation .recherche input[type="search"] {
        flex: 1;
        width: auto;
    }

    /* Repliée par défaut sur petit écran ; le bouton la déploie. */
    .entete--js .navigation:not(.navigation--ouverte) {
        display: none;
    }

    .navigation__liste {
        flex-direction: column;
        gap: 0;
        padding-bottom: var(--espace-s);
    }

    .navigation__liste a {
        padding: var(--espace-m);
        border-radius: 0;
        border-bottom: 1px solid var(--bordure);
    }

    .barre-redaction {
        width: 100%;
        padding-left: 0;
        padding-top: var(--espace-s);
        border-left: 0;
        border-top: 1px solid var(--bordure);
    }
}


/* ---------------------------------------------------------------------------
   5. Pied de page
   --------------------------------------------------------------------------- */

.pied {
    margin-top: var(--espace-xxl);
    background: var(--bleu-profond);
    color: #EAF3F5;
}

@media (prefers-color-scheme: dark) {
    .pied {
        background: var(--surface);
        border-top: 1px solid var(--bordure);
        color: var(--texte);
    }
}

/* Les liens du pied de page ressortent en clair sur le fond sombre.
   Les boutons en sont exclus : ils portent déjà leur propre couleur de
   texte, accordée à leur fond. Sans ce :not(), « Nous contacter » héritait
   du bleu clair des liens et devenait illisible sur son fond bleu clair. */
.pied a:not(.bouton) {
    color: #FFF;
}

@media (prefers-color-scheme: dark) {
    .pied a:not(.bouton) {
        color: var(--bleu-vif);
    }
}

.pied__interieur {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-xl);
    justify-content: space-between;
    padding-block: var(--espace-xl);
}

.pied__bloc {
    flex: 1 1 260px;
}

.pied__bloc--actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--espace-m);
}

.pied__titre {
    margin-bottom: var(--espace-s);
    font-size: 1.15rem;
    font-weight: 700;
}

.pied__ligne {
    margin-bottom: var(--espace-xs);
}

.pied__liens {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-m);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pied__bas {
    padding-block: var(--espace-m);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.9rem;
}

@media (prefers-color-scheme: dark) {
    .pied__bas {
        border-top-color: var(--bordure);
    }
}

.pied__bas p {
    margin: 0;
}


/* ---------------------------------------------------------------------------
   6. Structure des pages
   --------------------------------------------------------------------------- */

.section {
    padding-block: var(--espace-xl);
}

.section--claire {
    background: var(--bleu-brume);
}

.section__titre {
    margin-top: var(--espace-l);
    margin-bottom: var(--espace-m);
}

.section__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-s);
    margin-top: var(--espace-l);
}

.page__titre {
    margin-bottom: var(--espace-s);
}

.page__chapeau {
    max-width: var(--mesure);
    color: var(--texte-doux);
    font-size: 1.125rem;
}

/* -- Bannière d'accueil --------------------------------------------------- */

.banniere {
    position: relative;
    padding-block: var(--espace-xl);
    background: linear-gradient(170deg, var(--bleu-pale), var(--fond) 78%);
}

.banniere__titre {
    max-width: 22ch;
    font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
}

.banniere__sous-titre {
    max-width: var(--mesure);
    color: var(--texte-doux);
    font-size: 1.2rem;
}

.piliers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--espace-m);
    margin: var(--espace-l) 0;
    padding: 0;
    list-style: none;
}

.pilier {
    padding: var(--espace-m);
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-left: 4px solid var(--ambre);
    border-radius: var(--rayon);
}

.pilier__mot {
    display: block;
    margin-bottom: var(--espace-xs);
    color: var(--bleu-profond);
    font-size: 1.05rem;
    font-weight: 700;
}

.pilier__texte {
    color: var(--texte-doux);
    font-size: 0.95rem;
}

.banniere__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-s);
    margin-bottom: 0;
}

/* -- Fil d'Ariane --------------------------------------------------------- */

.fil-ariane {
    padding-block: var(--espace-s);
    background: var(--surface-2);
    font-size: 0.9375rem;
}

.fil-ariane ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.fil-ariane li + li::before {
    margin-right: var(--espace-xs);
    color: var(--texte-doux);
    content: "›";
}

.fil-ariane [aria-current] {
    color: var(--texte-doux);
}

/* -- Page d'erreur -------------------------------------------------------- */

.page-erreur {
    text-align: center;
}

.page-erreur__code {
    margin: 0;
    color: var(--bordure-forte);
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
}

.page-erreur .section__actions {
    justify-content: center;
}


/* ---------------------------------------------------------------------------
   7. Contenu enrichi (texte saisi dans l'éditeur)
   --------------------------------------------------------------------------- */

.contenu-riche {
    max-width: var(--mesure);
}

.contenu-riche > *:first-child {
    margin-top: 0;
}

.contenu-riche h2,
.contenu-riche h3,
.contenu-riche h4 {
    margin-top: var(--espace-l);
}

.contenu-riche ul,
.contenu-riche ol {
    padding-left: 1.4em;
}

.contenu-riche li {
    margin-bottom: var(--espace-xs);
}

.contenu-riche blockquote {
    margin-left: 0;
    padding: var(--espace-s) var(--espace-m);
    border-left: 4px solid var(--bleu);
    background: var(--bleu-brume);
    border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0;
    color: var(--texte-doux);
    font-style: italic;
}

.contenu-riche img {
    margin-block: var(--espace-m);
    border-radius: var(--rayon);
}

.contenu-riche figure {
    margin-inline: 0;
}

.contenu-riche figcaption {
    color: var(--texte-doux);
    font-size: 0.9rem;
    text-align: center;
}

.contenu-riche table {
    width: 100%;
    border-collapse: collapse;
}

.contenu-riche th,
.contenu-riche td {
    padding: var(--espace-s);
    border: 1px solid var(--bordure);
    text-align: left;
}

.contenu-riche th {
    background: var(--surface-2);
}

.contenu-riche .lead {
    font-size: 1.15rem;
    color: var(--texte-doux);
}

/* Encadré : le bloc « AUTISME » de la maquette et tout contenu à mettre
   en avant. */
.encadre,
.contenu-riche .encadre {
    padding: var(--espace-m) var(--espace-l);
    margin-block: var(--espace-l);
    background: var(--surface);
    border: 2px solid var(--bleu);
    border-radius: var(--rayon);
}

.encadre > *:last-child,
.contenu-riche .encadre > *:last-child {
    margin-bottom: 0;
}

/* Les variantes doivent aussi l'emporter à l'intérieur de .contenu-riche,
   dont le sélecteur est plus spécifique que la classe seule. */
.encadre--info,
.contenu-riche .encadre--info {
    border-color: var(--bordure-forte);
    background: var(--bleu-brume);
}

.encadre--important,
.contenu-riche .encadre--important {
    border-color: var(--ambre);
    background: var(--ambre-pale);
}


/* ---------------------------------------------------------------------------
   8. Boutons et liens
   --------------------------------------------------------------------------- */

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espace-xs);
    min-height: 46px;
    padding: var(--espace-s) var(--espace-l);
    border: 2px solid transparent;
    border-radius: var(--rayon-petit);
    font: inherit;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition);
}

.bouton--principal {
    background: var(--bleu-vif);
    border-color: var(--bleu-vif);
    color: #FFF;
}

.bouton--principal:hover {
    background: var(--bleu-profond);
    border-color: var(--bleu-profond);
    color: #FFF;
}

@media (prefers-color-scheme: dark) {
    .bouton--principal,
    .bouton--principal:hover {
        color: #0E1A1F;
    }
}

.bouton--secondaire {
    background: var(--surface);
    border-color: var(--bleu-vif);
    color: var(--bleu-vif);
}

.bouton--secondaire:hover {
    background: var(--bleu-pale);
    color: var(--bleu-profond);
}

.bouton--discret {
    background: transparent;
    border-color: var(--bordure-forte);
    color: var(--texte);
}

.bouton--discret:hover {
    background: var(--surface-2);
}

.bouton--large {
    width: 100%;
}

.bouton--petit {
    min-height: 38px;
    padding: var(--espace-xs) var(--espace-m);
    font-size: 0.9375rem;
}

/* Bouton qui doit ressembler à un lien : utilisé quand une action doit
   passer en POST (déconnexion, modération) sans peser visuellement. */
.lien-bouton {
    padding: 0;
    background: none;
    border: 0;
    color: var(--bleu-vif);
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.lien-bouton:hover {
    color: var(--bleu-profond);
}

.lien-bouton--danger {
    color: var(--erreur);
}

.lien-discret {
    color: var(--texte-doux);
    font-size: 0.9375rem;
}

/* -- Icône crayon --------------------------------------------------------- */

.crayon {
    display: inline-flex;
    align-items: center;
    gap: var(--espace-xs);
    float: right;
    margin-left: var(--espace-m);
    padding: var(--espace-xs) var(--espace-s);
    background: var(--ambre-pale);
    border: 1px solid var(--ambre);
    border-radius: var(--rayon-petit);
    color: var(--ambre);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.crayon:hover {
    background: var(--ambre);
    color: #FFF;
}

@media (prefers-color-scheme: dark) {
    .crayon:hover {
        color: #1A1206;
    }
}

.crayon__icone {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

@media (max-width: 560px) {
    .crayon__texte {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }
}


/* -- Recherche ------------------------------------------------------------ */

.recherche__ligne {
    display: flex;
    gap: var(--espace-xs);
}

.recherche input[type="search"] {
    width: 10rem;
    min-height: 44px;
}

/* Dans l'en-tête, le champ garde la hauteur des entrées du menu. */
.navigation .recherche input[type="search"] {
    padding-block: var(--espace-xs);
}

.recherche__bouton {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: var(--espace-xs);
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--espace-s);
    background: var(--bleu-vif);
    border: 0;
    border-radius: var(--rayon-petit);
    color: #FFF;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.recherche__bouton:hover {
    background: var(--bleu-profond);
}

@media (prefers-color-scheme: dark) {
    .recherche__bouton {
        color: #0E1A1F;
    }
}

.recherche__bouton svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
}

/* Sur sa propre page, le champ prend la place et annonce ce qu'il fait. */
.recherche--page {
    margin-bottom: var(--espace-l);
}

.recherche--page input[type="search"] {
    flex: 1;
    width: auto;
}

.recherche__label {
    display: block;
    margin-bottom: var(--espace-xs);
    color: var(--bleu-profond);
    font-weight: 600;
}

.recherche__bilan {
    margin-bottom: var(--espace-m);
    color: var(--texte-doux);
}

/* Mot trouvé : surligné et en gras, l'information ne tient pas à la couleur. */
mark {
    padding: 0 2px;
    background: var(--ambre-pale);
    border-radius: 3px;
    color: inherit;
    font-weight: 700;
}

.page-erreur .recherche--page {
    max-width: 30rem;
    margin-inline: auto;
    text-align: left;
}

/* ---------------------------------------------------------------------------
   9. Cartes et listes
   --------------------------------------------------------------------------- */

.cartes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: var(--espace-m);
    margin: 0;
    padding: 0;
    list-style: none;
}

.carte {
    display: flex;
    flex-direction: column;
    padding: var(--espace-l);
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-top: 4px solid var(--bleu);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
}

.carte__titre {
    margin-bottom: var(--espace-s);
    font-size: 1.2rem;
}

.carte__titre a {
    color: var(--bleu-profond);
    text-decoration: none;
}

.carte__titre a:hover {
    text-decoration: underline;
}

.carte__texte {
    flex: 1;
    color: var(--texte-doux);
}

.carte__lien {
    align-self: flex-start;
    font-weight: 600;
}

.carte__lien::after {
    margin-left: 0.3em;
    content: "→";
}

/* -- Filtres de rubrique -------------------------------------------------- */

.filtres {
    margin-bottom: var(--espace-l);
}

.filtres__liste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.filtre {
    display: inline-block;
    min-height: 38px;
    padding: var(--espace-xs) var(--espace-m);
    background: var(--surface);
    border: 1px solid var(--bordure-forte);
    border-radius: 999px;
    color: var(--texte);
    font-size: 0.9375rem;
    text-decoration: none;
}

.filtre:hover {
    background: var(--bleu-pale);
}

.filtre--actif {
    background: var(--bleu-vif);
    border-color: var(--bleu-vif);
    color: #FFF;
    font-weight: 600;
}

@media (prefers-color-scheme: dark) {
    .filtre--actif {
        color: #0E1A1F;
    }
}

/* -- Pagination ----------------------------------------------------------- */

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace-m);
    margin-top: var(--espace-xl);
    padding-top: var(--espace-m);
    border-top: 1px solid var(--bordure);
}

.pagination__lien {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: var(--espace-xs) var(--espace-m);
    background: var(--surface);
    border: 1px solid var(--bordure-forte);
    border-radius: var(--rayon-petit);
    font-weight: 600;
    text-decoration: none;
}

.pagination__position {
    margin: 0;
    color: var(--texte-doux);
}


/* ---------------------------------------------------------------------------
   10. Articles et commentaires
   --------------------------------------------------------------------------- */

.articles {
    display: grid;
    gap: var(--espace-m);
    margin: 0;
    padding: 0;
    list-style: none;
}

.article-resume {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-l);
    padding: var(--espace-l);
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
}

.article-resume__image {
    flex: 0 0 240px;
}

.article-resume__image img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: var(--rayon-petit);
}

.article-resume__corps {
    flex: 1 1 320px;
}

.article-resume__titre {
    margin-bottom: var(--espace-xs);
    font-size: 1.35rem;
}

.article-resume__titre a {
    color: var(--bleu-profond);
    text-decoration: none;
}

.article-resume__titre a:hover {
    text-decoration: underline;
}

.article-resume__meta,
.article__meta {
    margin-bottom: var(--espace-s);
    color: var(--texte-doux);
    font-size: 0.9375rem;
}

.article-resume__texte {
    color: var(--texte);
}

.article__titre {
    margin-bottom: var(--espace-s);
}

.article__couverture {
    margin: var(--espace-l) 0;
}

.article__couverture img {
    width: 100%;
    border-radius: var(--rayon);
}

.etiquette {
    display: inline-block;
    margin-bottom: var(--espace-xs);
    padding: 2px var(--espace-s);
    background: var(--ambre-pale);
    border-radius: 999px;
    color: var(--ambre);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bandeau-brouillon {
    padding: var(--espace-s) var(--espace-m);
    margin-bottom: var(--espace-m);
    background: var(--ambre-pale);
    border-left: 4px solid var(--ambre);
    border-radius: var(--rayon-petit);
    font-weight: 600;
}

/* -- Commentaires --------------------------------------------------------- */

.commentaires {
    margin: 0 0 var(--espace-l);
    padding: 0;
    list-style: none;
}

.commentaire {
    padding: var(--espace-m);
    margin-bottom: var(--espace-s);
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
}

/* Un message de l'association se distingue par une bordure marquée, pas
   seulement par le badge. */
.commentaire--equipe {
    border-left: 4px solid var(--bleu);
    background: var(--bleu-brume);
}

.commentaire__entete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--espace-s);
}

.commentaire__auteur {
    margin: 0;
    font-weight: 700;
}

.commentaire__date {
    margin: 0;
    color: var(--texte-doux);
    font-size: 0.875rem;
}

.commentaire__corps {
    margin-top: var(--espace-xs);
}

.commentaire__corps p:last-child {
    margin-bottom: 0;
}

.commentaire__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-m);
    margin: var(--espace-s) 0 0;
}

/* Les réponses sont décalées, avec un trait de rattachement. */
.commentaires--reponses {
    margin: var(--espace-s) 0 0;
    padding-left: var(--espace-m);
    border-left: 2px solid var(--bordure);
}

@media (max-width: 560px) {
    .commentaires--reponses {
        padding-left: var(--espace-s);
    }
}

.rappel-reponse {
    padding: var(--espace-s) var(--espace-m);
    background: var(--bleu-pale);
    border-radius: var(--rayon-petit);
    font-size: 0.9375rem;
}


/* ---------------------------------------------------------------------------
   11. Formulaires
   --------------------------------------------------------------------------- */

.formulaire-bloc {
    padding: var(--espace-l);
    margin-top: var(--espace-l);
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
}

.formulaire-bloc__titre {
    margin-top: 0;
}

.formulaire {
    max-width: var(--largeur-etroit);
}

.formulaire--large {
    max-width: none;
}

.champ {
    display: flex;
    flex-direction: column;
    gap: var(--espace-xs);
    margin-bottom: var(--espace-m);
}

.champ label,
.champ__label {
    display: block;
    color: var(--bleu-profond);
    font-weight: 600;
}

.champ__aide {
    display: block;
    color: var(--texte-doux);
    font-size: 0.875rem;
    font-weight: 400;
}

.requis {
    color: var(--erreur);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="datetime-local"],
input[type="file"],
input[type="search"],
select,
textarea {
    width: 100%;
    min-height: 46px;
    padding: var(--espace-s);
    background: var(--surface);
    border: 2px solid var(--bordure-forte);
    border-radius: var(--rayon-petit);
    color: var(--texte);
    font: inherit;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--bleu);
    outline: 3px solid var(--bleu-pale);
    outline-offset: 0;
}

.champs-deux {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--espace-m);
}

.champ--case {
    flex-direction: row;
    align-items: center;
    gap: var(--espace-s);
}

.champ--case input {
    width: 22px;
    height: 22px;
    min-height: 0;
    flex: none;
    accent-color: var(--bleu-vif);
}

.champ--case label {
    font-weight: 400;
}

.formulaire__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-s);
    margin-bottom: 0;
}

.formulaire__actions--barre {
    padding-top: var(--espace-m);
    margin-top: var(--espace-l);
    border-top: 1px solid var(--bordure);
}

.bloc-reglages {
    padding: var(--espace-m) var(--espace-l);
    margin: var(--espace-l) 0;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--surface);
}

.bloc-reglages legend {
    padding-inline: var(--espace-s);
    color: var(--bleu-profond);
    font-weight: 700;
}

.apercu-image img {
    max-width: 320px;
    margin-bottom: var(--espace-s);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-petit);
}

/* -- Page de connexion ---------------------------------------------------- */

.page-connexion__cadre {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--espace-m);
    background: linear-gradient(170deg, var(--bleu-pale), var(--fond) 70%);
}

.carte-connexion {
    width: 100%;
    max-width: 420px;
    padding: var(--espace-xl) var(--espace-l);
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-forte);
}

.carte-connexion__titre {
    margin-bottom: var(--espace-xs);
    text-align: center;
}

.carte-connexion__texte {
    margin-bottom: var(--espace-l);
    color: var(--texte-doux);
    text-align: center;
}

.carte-connexion__retour {
    margin: var(--espace-m) 0 0;
    text-align: center;
}


/* ---------------------------------------------------------------------------
   12. Messages et badges
   --------------------------------------------------------------------------- */

.messages {
    padding-top: var(--espace-m);
}

.message {
    padding: var(--espace-s) var(--espace-m);
    margin-bottom: var(--espace-s);
    border-radius: var(--rayon-petit);
    border-left: 4px solid;
    font-weight: 500;
}

/* Chaque type porte un symbole en plus de sa couleur. */
.message::before {
    margin-right: var(--espace-xs);
    font-weight: 700;
}

.message--success {
    background: var(--succes-fond);
    border-color: var(--succes);
    color: var(--succes);
}

.message--success::before { content: "✓"; }

.message--error {
    background: var(--erreur-fond);
    border-color: var(--erreur);
    color: var(--erreur);
}

.message--error::before { content: "!"; }

.message--info {
    background: var(--bleu-pale);
    border-color: var(--bleu);
    color: var(--bleu-profond);
}

.message--info::before { content: "i"; }

.badge {
    display: inline-block;
    padding: 1px var(--espace-s);
    border: 1px solid;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

.badge--admin {
    background: var(--bleu-vif);
    border-color: var(--bleu-vif);
    color: #FFF;
}

.badge--editeur {
    background: var(--bleu-pale);
    border-color: var(--bleu);
    color: var(--bleu-profond);
}

.badge--blogueur {
    background: var(--ambre-pale);
    border-color: var(--ambre);
    color: var(--ambre);
}

@media (prefers-color-scheme: dark) {
    .badge--admin {
        color: #0E1A1F;
    }
}

.pastille {
    display: inline-block;
    min-width: 22px;
    padding: 0 6px;
    background: var(--erreur);
    border-radius: 999px;
    color: #FFF;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

@media (prefers-color-scheme: dark) {
    .pastille {
        color: #2A0E0A;
    }
}


/* ---------------------------------------------------------------------------
   13. Espace de rédaction
   --------------------------------------------------------------------------- */

.admin-nav {
    background: var(--bleu-profond);
}

@media (prefers-color-scheme: dark) {
    .admin-nav {
        background: var(--surface-2);
        border-bottom: 1px solid var(--bordure);
    }
}

.admin-nav__liste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-nav__liste a {
    display: inline-flex;
    align-items: center;
    gap: var(--espace-xs);
    min-height: 48px;
    padding: 0 var(--espace-m);
    color: #D7E7EB;
    font-weight: 600;
    text-decoration: none;
}

@media (prefers-color-scheme: dark) {
    .admin-nav__liste a {
        color: var(--texte-doux);
    }
}

.admin-nav__liste a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #FFF;
}

.admin-nav__actif {
    background: var(--fond);
    color: var(--bleu-profond) !important;
    box-shadow: inset 0 -3px 0 var(--ambre);
}

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--espace-m);
    margin: var(--espace-l) 0;
    padding: 0;
    list-style: none;
}

.stat {
    padding: var(--espace-m);
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    text-align: center;
}

.stat--alerte {
    border-color: var(--ambre);
    background: var(--ambre-pale);
}

.stat__valeur {
    display: block;
    color: var(--bleu-profond);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

.stat__libelle {
    color: var(--texte-doux);
    font-size: 0.9375rem;
}

.actions-rapides {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-s);
    margin-bottom: var(--espace-l);
}

/* -- Tableaux ------------------------------------------------------------- */

/* Les tableaux défilent dans leur propre cadre : la page elle-même ne part
   jamais en défilement horizontal. */
.tableau-defilant {
    overflow-x: auto;
    margin-bottom: var(--espace-l);
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
}

.tableau {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.tableau th,
.tableau td {
    padding: var(--espace-s) var(--espace-m);
    border-bottom: 1px solid var(--bordure);
    text-align: left;
    vertical-align: top;
}

.tableau thead th {
    background: var(--surface-2);
    color: var(--bleu-profond);
    white-space: nowrap;
}

.tableau tbody tr:last-child th,
.tableau tbody tr:last-child td {
    border-bottom: 0;
}

.tableau__note {
    display: block;
    color: var(--texte-doux);
    font-size: 0.8125rem;
}

.tableau__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-s);
    align-items: center;
}

.tableau__ordre {
    display: flex;
    gap: var(--espace-s);
}

.tableau__ordre .lien-bouton {
    font-size: 1.1rem;
    text-decoration: none;
}

.ligne--inactive {
    opacity: 0.62;
}

.etat {
    display: inline-block;
    padding: 1px var(--espace-s);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
}

.etat--published {
    background: var(--succes-fond);
    color: var(--succes);
}

.etat--draft {
    background: var(--surface-2);
    color: var(--texte-doux);
}

.etat--programme {
    background: var(--ambre-pale);
    color: var(--ambre);
}

/* -- Modération ----------------------------------------------------------- */

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

.moderation__item {
    padding: var(--espace-l);
    margin-bottom: var(--espace-m);
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
}

.moderation__entete {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--espace-s);
}

.moderation__auteur {
    margin: 0;
    font-weight: 700;
}

.moderation__email,
.moderation__date {
    color: var(--texte-doux);
    font-size: 0.875rem;
    font-weight: 400;
}

.moderation__date {
    margin: 0;
}

.moderation__contexte {
    margin: var(--espace-xs) 0 var(--espace-s);
    color: var(--texte-doux);
    font-size: 0.9375rem;
}

.moderation__texte {
    padding: var(--espace-s) var(--espace-m);
    margin: 0 0 var(--espace-m);
    background: var(--bleu-brume);
    border-left: 3px solid var(--bordure-forte);
    border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0;
}

.moderation__texte p:last-child {
    margin-bottom: 0;
}

.moderation__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espace-m);
}


/* ---------------------------------------------------------------------------
   14. Éditeur de texte
   --------------------------------------------------------------------------- */

.editeur {
    margin-bottom: var(--espace-m);
}

.editeur__barre {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-xs);
    padding: var(--espace-xs);
    background: var(--surface-2);
    border: 2px solid var(--bordure-forte);
    border-bottom: 0;
    border-radius: var(--rayon-petit) var(--rayon-petit) 0 0;
}

.editeur__groupe {
    display: flex;
    gap: 2px;
    padding-right: var(--espace-xs);
    border-right: 1px solid var(--bordure);
}

.editeur__groupe--fin {
    padding-right: 0;
    border-right: 0;
    margin-left: auto;
}

.editeur__barre button {
    min-width: 40px;
    min-height: 40px;
    padding: 0 var(--espace-s);
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-petit);
    color: var(--texte);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

.editeur__barre button:hover {
    background: var(--bleu-pale);
    border-color: var(--bleu);
}

.editeur__barre button[aria-pressed="true"] {
    background: var(--bleu-vif);
    border-color: var(--bleu-vif);
    color: #FFF;
}

.editeur__zone {
    min-height: 320px;
    max-width: none;
    padding: var(--espace-m);
    background: var(--surface);
    border: 2px solid var(--bordure-forte);
    border-radius: 0 0 var(--rayon-petit) var(--rayon-petit);
    overflow-wrap: break-word;
}

.editeur__zone:focus {
    border-color: var(--bleu);
    outline: 3px solid var(--bleu-pale);
}

.editeur__source {
    width: 100%;
    font-family: "Cascadia Mono", Consolas, "Liberation Mono", monospace;
    font-size: 0.875rem;
    line-height: 1.6;
}

/* Quand l'éditeur visuel est actif, le textarea passe en second plan et
   ne réapparaît qu'avec le bouton « Code HTML ». */
.editeur--visuel .editeur__source {
    display: none;
}

.editeur--visuel.editeur--source .editeur__source {
    display: block;
    border-radius: 0 0 var(--rayon-petit) var(--rayon-petit);
    border-top: 0;
}

.editeur--visuel.editeur--source .editeur__zone {
    display: none;
}

.editeur__aide {
    margin: var(--espace-xs) 0 0;
    color: var(--texte-doux);
    font-size: 0.875rem;
}

/* Indication d'envoi en cours d'une image. */
.editeur__zone [data-envoi-en-cours] {
    opacity: 0.5;
    outline: 2px dashed var(--bleu);
}


/* ---------------------------------------------------------------------------
   15. Bandeau d'actualités
   ---------------------------------------------------------------------------
   Une barre sombre sous l'en-tête, avec les brèves de l'association.

   Sans JavaScript, les brèves s'affichent à la suite : la barre grandit un
   peu, mais tout est lisible. Le script ajoute la classe bandeau--rotatif,
   qui n'en montre qu'une à la fois et fait apparaître les commandes.

   Aucun défilement continu : du texte qui glisse est pénible à lire, et la
   règle WCAG 2.2.2 impose de pouvoir l'arrêter. On alterne donc les brèves,
   avec un bouton pause, et l'on ne bouge pas du tout si le système demande
   de réduire les animations.
   --------------------------------------------------------------------------- */

/* Hauteur d'une ligne du bandeau. Toute la mécanique en dépend : la fenêtre
   fait cette hauteur, la pile fait N+1 fois cette hauteur. */
:root {
    --bandeau-ligne: 28px;
}

.bandeau {
    background: #0C1D2E;
    border-bottom: 1px solid rgba(111, 182, 198, 0.28);
    box-shadow: 0 2px 12px rgba(36, 112, 127, 0.18);
    color: #D7E4E8;
}

.bandeau__interieur {
    display: flex;
    align-items: center;
    gap: var(--espace-s);
    padding-block: var(--espace-xs);
}

.bandeau__etiquette {
    flex: none;
    color: var(--bleu-vif);
    font-size: 0.8125rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

@media (prefers-color-scheme: light) {
    .bandeau__etiquette {
        color: #7FC6D6;
    }
}

/* -- La fenêtre d'une ligne ----------------------------------------------- */

.bandeau__fenetre {
    flex: 1 1 auto;
    height: var(--bandeau-ligne);
    min-width: 0;
    overflow: hidden;
    position: relative;
}

.bandeau__pile {
    display: flex;
    flex-direction: column;
}

.bandeau__item {
    height: var(--bandeau-ligne);
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bandeau__item > a,
.bandeau__item > span {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    font-size: 0.9375rem;
    text-decoration: none;
}

.bandeau__item > a:hover {
    color: var(--bleu-vif);
    text-decoration: underline;
}

/* -- L'animation ----------------------------------------------------------
   Chaque brève reste immobile pendant les trois quarts de son temps
   d'affichage : on lit un texte fixe, le mouvement ne sert qu'à passer à la
   suivante. C'est ce qui rend ce bandeau lisible là où un défilement continu
   ne le serait pas.

   Une série de keyframes par nombre de brèves, la position d'arrêt dépendant
   de la hauteur totale de la pile. Cinq suffisent : le bandeau n'affiche
   jamais plus de six brèves. */

.bandeau__fenetre--n2 .bandeau__pile { animation: bandeau-2 10s ease infinite; }
.bandeau__fenetre--n3 .bandeau__pile { animation: bandeau-3 15s ease infinite; }
.bandeau__fenetre--n4 .bandeau__pile { animation: bandeau-4 20s ease infinite; }
.bandeau__fenetre--n5 .bandeau__pile { animation: bandeau-5 25s ease infinite; }
.bandeau__fenetre--n6 .bandeau__pile { animation: bandeau-6 30s ease infinite; }

@keyframes bandeau-2 {
    0%       { transform: translateY(0); }
    37.5%    { transform: translateY(0); }
    50%      { transform: translateY(-33.3333%); }
    87.5%    { transform: translateY(-33.3333%); }
    100%     { transform: translateY(-66.6667%); }
}

@keyframes bandeau-3 {
    0%       { transform: translateY(0); }
    25%      { transform: translateY(0); }
    33.3333% { transform: translateY(-25%); }
    58.3333% { transform: translateY(-25%); }
    66.6667% { transform: translateY(-50%); }
    91.6667% { transform: translateY(-50%); }
    100%     { transform: translateY(-75%); }
}

@keyframes bandeau-4 {
    0%       { transform: translateY(0); }
    18.75%   { transform: translateY(0); }
    25%      { transform: translateY(-20%); }
    43.75%   { transform: translateY(-20%); }
    50%      { transform: translateY(-40%); }
    68.75%   { transform: translateY(-40%); }
    75%      { transform: translateY(-60%); }
    93.75%   { transform: translateY(-60%); }
    100%     { transform: translateY(-80%); }
}

@keyframes bandeau-5 {
    0%       { transform: translateY(0); }
    15%      { transform: translateY(0); }
    20%      { transform: translateY(-16.6667%); }
    35%      { transform: translateY(-16.6667%); }
    40%      { transform: translateY(-33.3333%); }
    55%      { transform: translateY(-33.3333%); }
    60%      { transform: translateY(-50%); }
    75%      { transform: translateY(-50%); }
    80%      { transform: translateY(-66.6667%); }
    95%      { transform: translateY(-66.6667%); }
    100%     { transform: translateY(-83.3333%); }
}

@keyframes bandeau-6 {
    0%       { transform: translateY(0); }
    12.5%    { transform: translateY(0); }
    16.6667% { transform: translateY(-14.2857%); }
    29.1667% { transform: translateY(-14.2857%); }
    33.3333% { transform: translateY(-28.5714%); }
    45.8333% { transform: translateY(-28.5714%); }
    50%      { transform: translateY(-42.8571%); }
    62.5%    { transform: translateY(-42.8571%); }
    66.6667% { transform: translateY(-57.1429%); }
    79.1667% { transform: translateY(-57.1429%); }
    83.3333% { transform: translateY(-71.4286%); }
    95.8333% { transform: translateY(-71.4286%); }
    100%     { transform: translateY(-85.7143%); }
}

/* Le survol suspend le défilement, comme sur le bandeau de référence : on ne
   veut pas qu'une brève s'échappe au moment où l'on va cliquer dessus. */
.bandeau:hover .bandeau__pile,
.bandeau:focus-within .bandeau__pile,
.bandeau--fige .bandeau__pile {
    animation-play-state: paused;
}

/* -- Bouton pause --------------------------------------------------------- */

.bandeau__pause {
    flex: none;
    min-width: 30px;
    min-height: 30px;
    padding: 0 var(--espace-xs);
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--rayon-petit);
    color: inherit;
    font: inherit;
    line-height: 1;
    cursor: pointer;
}

.bandeau__pause:hover {
    background: rgba(255, 255, 255, 0.20);
}

/* -- Mouvement réduit -----------------------------------------------------
   Réglage système « réduire les animations » : plus rien ne bouge. Les
   brèves s'affichent alors les unes à la suite des autres, sur une ou
   plusieurs lignes. */

@media (prefers-reduced-motion: reduce) {
    .bandeau__fenetre {
        height: auto;
        overflow: visible;
    }

    .bandeau__pile {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0 var(--espace-l);
        animation: none !important;
    }

    .bandeau__item {
        width: auto;
        max-width: 100%;
    }

    .bandeau__item--doublon,
    .bandeau__pause {
        display: none;
    }
}


/* ---------------------------------------------------------------------------
   16. Agenda et calendrier
   --------------------------------------------------------------------------- */

.agenda {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: var(--espace-xl);
    align-items: start;
}

@media (max-width: 980px) {
    .agenda {
        grid-template-columns: 1fr;
        gap: var(--espace-l);
    }
}

/* -- Navigation de mois --------------------------------------------------- */

.calendrier__navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace-m);
    margin-bottom: var(--espace-s);
}

.calendrier__mois {
    margin: 0;
    font-size: 1.35rem;
    text-align: center;
    text-transform: capitalize;
}

.calendrier__fleche {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    background: var(--surface);
    border: 1px solid var(--bordure-forte);
    border-radius: var(--rayon-petit);
    font-size: 1.1rem;
    text-decoration: none;
}

.calendrier__fleche:hover {
    background: var(--bleu-pale);
}

.calendrier__retour {
    margin-bottom: var(--espace-s);
    font-size: 0.9375rem;
    text-align: center;
}

/* -- Grille --------------------------------------------------------------- */

.calendrier {
    width: 100%;
    min-width: 560px;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

.calendrier th {
    padding: var(--espace-xs);
    background: var(--surface-2);
    border: 1px solid var(--bordure);
    color: var(--texte-doux);
    font-size: 0.8125rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.calendrier__case {
    height: 104px;
    padding: var(--espace-xs);
    border: 1px solid var(--bordure);
    background: var(--surface);
    vertical-align: top;
}

/* Les jours des mois voisins restent visibles mais s'effacent. */
.calendrier__case--hors {
    background: var(--fond);
}

.calendrier__case--hors .calendrier__numero {
    opacity: 0.45;
}

/* Aujourd'hui est signalé par un cadre, pas seulement par une couleur. */
.calendrier__case--aujourdhui {
    box-shadow: inset 0 0 0 2px var(--bleu);
}

.calendrier__numero {
    display: block;
    margin-bottom: 2px;
    font-size: 0.8125rem;
    font-weight: 700;
    text-align: right;
}

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

.calendrier__evenement {
    display: block;
    margin-bottom: 2px;
    padding: 2px var(--espace-xs);
    background: var(--bleu-brume);
    border-left: 3px solid var(--bordure-forte);
    border-radius: 3px;
    color: var(--texte);
    font-size: 0.75rem;
    line-height: 1.35;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendrier__evenement:hover {
    background: var(--bleu-pale);
    color: var(--bleu-profond);
}

.calendrier__heure {
    font-weight: 700;
}

.calendrier__article {
    color: var(--ambre);
}

/* -- Couleurs de rubrique -------------------------------------------------
   La couleur passe par une bordure, jamais par le fond du texte : le
   contraste du libellé reste ainsi garanti quelle que soit la rubrique.
   Elle est toujours doublée du nom de la rubrique dans la légende. */

.cat-reunion    { border-left-color: #2E6FA8; }
.cat-sortie     { border-left-color: #2E7D5B; }
.cat-atelier    { border-left-color: #B87514; }
.cat-temps-fort { border-left-color: #8A4B8F; }
.cat-formation  { border-left-color: #1F7A85; }
.cat-defaut     { border-left-color: var(--bordure-forte); }

.calendrier__legende {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-s) var(--espace-m);
    margin: var(--espace-m) 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
    color: var(--texte-doux);
}

.calendrier__legende li {
    display: flex;
    align-items: center;
    gap: var(--espace-xs);
}

.puce {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border-left-width: 12px;
    border-left-style: solid;
}

/* -- Prochains rendez-vous ------------------------------------------------ */

.agenda__prochains .section__titre {
    margin-top: 0;
}

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

.prochain {
    padding: var(--espace-m);
    margin-bottom: var(--espace-s);
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-left: 4px solid var(--bleu);
    border-radius: var(--rayon);
}

.prochain__date {
    margin: 0 0 2px;
    color: var(--texte-doux);
    font-size: 0.875rem;
    text-transform: capitalize;
}

.prochain__titre {
    margin: 0 0 var(--espace-xs);
    font-size: 1.05rem;
}

.prochain__titre a {
    color: var(--bleu-profond);
    text-decoration: none;
}

.prochain__titre a:hover {
    text-decoration: underline;
}

.prochain__lieu {
    margin: 0 0 var(--espace-xs);
    color: var(--texte-doux);
    font-size: 0.9rem;
}

.prochain__texte {
    margin: 0;
    font-size: 0.9375rem;
}

.prochain__article {
    margin: var(--espace-xs) 0 0;
    font-size: 0.9375rem;
}

/* -- Fiche d'un événement ------------------------------------------------- */

.fiche-evenement {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--espace-m);
    margin: var(--espace-l) 0;
    padding: var(--espace-m) var(--espace-l);
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
}

.fiche-evenement dt {
    color: var(--texte-doux);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fiche-evenement dd {
    margin: 2px 0 0;
    font-size: 1.05rem;
}


/* ---------------------------------------------------------------------------
   17. Impression
   --------------------------------------------------------------------------- */

@media print {
    .entete,
    .bandeau,
    .pied,
    .admin-nav,
    .crayon,
    .formulaire-bloc,
    .skip-link,
    .pagination,
    .filtres,
    .section__actions {
        display: none !important;
    }

    body {
        background: #FFF;
        color: #000;
        font-size: 11pt;
    }

    .section {
        padding-block: 0;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        word-break: break-all;
    }
}