@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;

    --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;

        --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__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 {
    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 {
        width: 100%;
        margin-left: 0;
    }

    /* 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%);
    }
}


/* ---------------------------------------------------------------------------
   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"],
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. Impression
   --------------------------------------------------------------------------- */

@media print {
    .entete,
    .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;
    }
}