/* ============================================================
   RMKF - Feuille de styles publique
   Structure reprise de la template o.rmkf.ma,
   identité visuelle de la Fédération (vert impérial / cuivre).
   ============================================================ */

:root {
    --green:        #1A6034;   /* vert du logo officiel */
    --green-deep:   #123F26;
    --green-soft:   #EBF2ED;
    --gold:         #C6A24F;   /* or de la couronne */
    --gold-soft:    #FAF5E9;
    /* Le doré --gold n'offre que 2.4:1 de contraste en texte sur fond blanc
       (WCAG AA exige 4.5:1) : c'est une couleur d'accent/fond, pas de texte.
       --gold-text est la même teinte assombrie, réservée au texte et aux
       icônes sur fond clair. */
    --gold-text:    #84630D;
    --red:          #C4443F;   /* rouge du kempoka */
    --ink:          #1F2B26;
    /* #6C7B74 d'origine ne tenait que 4.45:1 sur blanc, sous le seuil WCAG AA
       (4.5:1) : legerement assombri, difference visuellement imperceptible. */
    --muted:        #5E6C65;
    --mist:         #F7FAF8;
    --white:        #FFFFFF;
    --line:         #E9EFEB;
    --danger:       #B04A45;
    /* #B08A46 d'origine ne tenait que 2.9:1 sur le fond #FBF3E3 où ce texte
       est utilise (etiquettes "expire" / "reporte") ; assombri pour
       atteindre le seuil WCAG AA de 4.5:1. */
    --warning:      #7A5C0D;

    --font-display: 'Rajdhani', 'Tajawal', system-ui, sans-serif;
    --font-body:    'Inter', 'Tajawal', system-ui, -apple-system, sans-serif;

    --radius:    14px;
    --radius-lg: 26px;
    --shadow:    0 4px 18px rgba(18, 63, 38, .055);
    --shadow-lg: 0 14px 40px rgba(18, 63, 38, .09);
    --container: 1180px;
}

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

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

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--gold-text); }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 .5em;
    letter-spacing: -.005em;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1rem; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.skip-link {
    position: absolute; inset-inline-start: -9999px; top: 0; z-index: 999;
    background: var(--green); color: #fff; padding: 12px 18px;
}
.skip-link:focus { inset-inline-start: 0; }

/* ---------- Boutons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-display); font-weight: 600; font-size: 1rem;
    letter-spacing: .03em; text-transform: uppercase;
    padding: 13px 28px; border-radius: 100px; border: 1.5px solid var(--green);
    color: var(--green); background: transparent; cursor: pointer;
    transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
.btn:hover { background: var(--green); color: #fff; transform: translateY(-2px); }
.btn-solid { background: var(--green); color: #fff; box-shadow: var(--shadow); }
.btn-solid:hover { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
.btn-copper { background: var(--gold); border-color: var(--gold); color: #12211A; }
.btn-copper:hover { background: #8F6D11; border-color: #8F6D11; color: #fff; }
.btn-light { border-color: rgba(255,255,255,.6); color: #fff; }
.btn-light:hover { background: #fff; color: var(--green-deep); border-color: #fff; }
.btn-sm { padding: 9px 20px; font-size: .85rem; }

/* ---------- En-tête ---------- */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--gold);
}
.header-inner { display: flex; align-items: center; gap: 24px; min-height: 82px; }

.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand img {
    height: 54px; width: auto; flex-shrink: 0;
    image-rendering: -webkit-optimize-contrast;   /* réduction plus nette, sans frange */
}
.brand-text { line-height: 1.1; }
.brand-text strong {
    display: block; font-family: var(--font-display); font-size: 1.1rem;
    text-transform: uppercase; letter-spacing: .06em; color: var(--green-deep);
}

/* Bandeau du slogan : sous l'en-tête, sur toutes les tailles d'écran */
/* Bandeau institutionnel. Les deux lignes ont exactement la même taille et la
   même couleur : l'État et son ministère ne se hiérarchisent pas entre eux, et
   la mention doit rester lisible sans concurrencer le nom de la Fédération. */
/* ---------- État et tutelle, en tête du bandeau d'accueil ----------
   Ces deux lignes ne vivent que dans .official-band, sur index.php : elles
   annoncent le rattachement de la Fédération et n'ont donc de sens qu'au-dessus
   de son nom. Elles sont centrées sur les deux axes comme le reste du cadre. */
.official-band .of-etat {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center; margin: 0 0 22px;
}
/* Minuscules, avec la seule majuscule initiale : c'est la graphie des documents
   officiels, et elle se lit plus vite que des capitales sur une raison sociale
   longue. */
.official-band .of-etat p {
    margin: 0; font-family: var(--font-display); font-weight: 600;
    color: var(--gold-text); line-height: 1.45; text-transform: none;
}
.official-band .etat-royaume { font-size: 1.3rem; letter-spacing: .04em; }

/* Le nom complet du ministère fait une soixantaine de caractères : à la taille
   du Royaume il passait à la ligne, ce qui coupait une raison sociale qui ne se
   coupe pas. Il est donc réduit au strict nécessaire pour tenir d'un seul
   tenant, quelle que soit la largeur de l'écran.

   La taille suit la largeur de la fenêtre (unité vw) plutôt qu'une valeur fixe
   par palier : avec des paliers, il existe toujours une largeur intermédiaire
   juste avant le seuil suivant où le texte déborde. Les bornes du clamp()
   évitent les deux excès : illisible sur un téléphone étroit, disproportionné
   sur un grand écran. `nowrap` garantit la ligne unique, et `max-width` empêche
   que cette même consigne ne fasse déborder le bloc. */
.official-band .etat-tutelle {
    max-width: 100%;
    font-size: clamp(.68rem, 2.6vw, 1.08rem);
    letter-spacing: .02em;
    white-space: nowrap;
    margin-top: 5px;
}
/* La raison sociale arabe est bien plus courte que la française : elle tient
   sur une ligne sans être autant réduite. */
html[dir="rtl"] .official-band .of-etat p { font-family: 'Tajawal', var(--font-display); }
html[dir="rtl"] .official-band .etat-tutelle { font-size: clamp(.75rem, 2.6vw, 1.1rem); }

.main-nav { flex: 1; display: flex; justify-content: center; }
.main-nav ul { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.main-nav a {
    font-size: .93rem; font-weight: 500; color: var(--ink);
    padding: 6px 0; position: relative;
}
.main-nav a::after {
    content: ''; position: absolute; inset-inline-start: 0; bottom: 0;
    width: 0; height: 2px; background: var(--gold); transition: width .25s;
}
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { width: 100%; }
.main-nav a[aria-current="page"] { color: var(--green); font-weight: 600; }

.header-tools { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

.lang-switch { display: flex; gap: 2px; background: var(--mist); border-radius: 100px; padding: 4px; }
.lang-switch a {
    font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    padding: 5px 11px; border-radius: 100px; color: var(--muted);
}
.lang-switch a.active { background: var(--green); color: #fff; }

/* ---------- BOUTON D'ACCES A L'ADMINISTRATION ----------
   Meme hauteur et meme rayon que le selecteur de langue, dont il est le
   voisin : les deux doivent se lire comme une seule barre d'outils, non
   comme deux elements empiles au hasard.

   Contour plutot qu'aplat vert : c'est un acces de service, il ne doit pas
   attirer l'oeil autant que la navigation du site. */
.btn-admin {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: 100px;
    border: 1px solid var(--line); background: #fff;
    font-size: .78rem; font-weight: 600; letter-spacing: .04em;
    color: var(--muted); text-decoration: none; white-space: nowrap;
    transition: border-color .18s, color .18s;
}
.btn-admin:hover { border-color: var(--green); color: var(--green-deep); }
.btn-admin-icone { font-size: .9rem; line-height: 1; }

/* Sous 900 px, le libelle disparait et le cadenas suffit : entre le logo, la
   langue et le bouton de menu, la barre n'a plus la place d'un mot de plus. */
@media (max-width: 900px) {
    .btn-admin { padding: 8px 11px; }
    .btn-admin-texte { display: none; }
}

.nav-toggle {
    display: none; width: 48px; height: 48px; border: 2px solid var(--green);
    background: #fff; border-radius: 12px; cursor: pointer; padding: 0;
    align-items: center; justify-content: center;
    box-shadow: var(--shadow);
    transition: background .16s ease, border-color .16s ease;
}
/* BOUTON DANS L'IDENTITÉ VISUELLE : le vert du logo (7.9:1 sur blanc) pour le contour et les
   barres, la même ombre verte et le même arrondi que les cartes du site, l'or de la couronne
   au survol et au clavier. Plus visible que l'ancien trait fin de 2 px, sans sortir de la charte. */
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
    display: block; width: 26px; height: 3px; border-radius: 2px;
    background: var(--green); position: relative;
}
.nav-toggle:hover { border-color: var(--gold); }
.nav-toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.nav-toggle span::before, .nav-toggle span::after { content: ''; position: absolute; }
.nav-toggle span::before { top: -8px; }
.nav-toggle span::after  { top: 8px; }
/* Menu ouvert : bouton plein vert, barres blanches - l'état se lit d'un coup d'œil. */
.nav-toggle[aria-expanded="true"] { background: var(--green); border-color: var(--green); }
.nav-toggle[aria-expanded="true"] span,
.nav-toggle[aria-expanded="true"] span::before,
.nav-toggle[aria-expanded="true"] span::after { background: #fff; }

/* ---------- Accroche de section ---------- */
.eyebrow {
    display: inline-block; font-family: var(--font-display); font-weight: 600;
    text-transform: uppercase; letter-spacing: .16em; font-size: .78rem;
    color: var(--gold-text); margin-bottom: 16px;
}
.eyebrow::before {
    content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--gold); vertical-align: middle; margin-inline-end: 10px;
}

/* ---------- Bandeau officiel (logo + texte AR / EN) ---------- */
/* Ruban pleine largeur : sort volontairement du .container pour toucher
   les deux bords de la page, avec un double filet doré horizontal. */
.official-band {
    width: 100%; margin-top: 0; padding: 40px 24px;
    text-align: center; border-top: 3px double var(--gold); border-bottom: 3px double var(--gold);
    background: linear-gradient(180deg, #fff 0%, var(--mist) 100%);
}
.official-band img { height: 216px; width: auto; margin: 0 auto 26px; }
/* Le bandeau porte, de haut en bas : l'État, le ministère de tutelle, le logo,
   le nom de la Fédération et sa devise. Seul le nom fédéral est en vert et en
   grand ; les trois autres mentions sont dorées et l'encadrent. */
.official-band .of-ar {
    font-family: 'Tajawal', var(--font-display); direction: rtl;
    color: var(--green-deep); font-size: 2.5rem; font-weight: 700; line-height: 1.45;
    margin: 0;
}
.official-band .of-divider {
    display: flex; align-items: center; gap: 10px; margin: 18px auto; max-width: 220px;
}
.official-band .of-divider::before,
.official-band .of-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--line);
}
.official-band .of-divider span {
    width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex-shrink: 0;
}
.official-band .of-en {
    direction: ltr; font-family: var(--font-display); font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em; font-size: 1.9rem;
    color: var(--green-deep); margin: 0; line-height: 1.3;
}
/* Devise : même corps et même or que les lignes institutionnelles du haut de
   page, de sorte que les trois mentions dorées forment une seule famille
   visuelle autour du nom fédéral, qui reste seul en vert et en grand. */
.official-band .of-devise {
    font-family: var(--font-display); font-size: 1.3rem; font-weight: 600;
    color: var(--gold-text); letter-spacing: .03em; margin: 16px 0 0; line-height: 1.45;
}
@media (max-width: 640px) {
    .official-band { margin-top: 0; padding: 30px 12px; }
    .official-band img { height: 140px; }
    .official-band .of-ar { font-size: 1.55rem; }
    .official-band .of-en { font-size: 1.15rem; }

    /* Les trois mentions dorées sur mobile. La couleur et la police sont
       redonnées explicitement plutôt que laissées à l'héritage : une règle
       ajoutée plus tard dans la feuille, ou un style de navigateur mobile,
       les ferait retomber en noir et en police système sans qu'on s'en
       aperçoive au premier coup d'oeil. Trois lignes de rappel coûtent moins
       cher qu'un bandeau dépareillé sur la moitié des visites. */
    .official-band .of-etat p,
    .official-band .of-devise {
        font-family: var(--font-display);
        font-weight: 600;
        color: var(--gold-text);
    }
    .official-band .of-etat { margin-bottom: 16px; }
    .official-band .etat-royaume { font-size: 1.15rem; letter-spacing: .03em; }
    /* Le padding réduit ci-dessus rend 12 px de large de chaque côté : c'est ce
       qui permet de remonter le plancher du ministère sans qu'il déborde sur un
       téléphone étroit. */
    .official-band .etat-tutelle { font-size: clamp(.72rem, 3vw, 1rem); }
    .official-band .of-devise { font-size: 1.1rem; margin-top: 14px; }
}

/* Téléphones les plus étroits : sous 360 px, la ligne du ministère atteint la
   largeur utile et se couperait malgré `nowrap`, qui la ferait alors déborder
   hors du cadre. On la redescend d'un cran plutôt que de risquer le
   débordement. */
@media (max-width: 360px) {
    .official-band { padding: 26px 8px; }
    .official-band .etat-royaume { font-size: 1.05rem; }
    .official-band .etat-tutelle { font-size: .62rem; }
    .official-band .of-devise { font-size: 1rem; }
}

/* ---------- Sections ---------- */
.section { padding: 88px 0; }
.section-mist { background: var(--mist); }
.section-tight { padding: 56px 0; }

.section-head { max-width: 640px; margin: 0 auto 52px; text-align: center; }
.section-head h1,
.section-head h2 { color: var(--green-deep); font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin: 0 0 .4em; }
.section-head p { color: var(--muted); margin: 0; }

.section-head-row {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 20px; margin-bottom: 44px; flex-wrap: wrap;
}
.section-head-row h2 { margin: 0; color: var(--green-deep); }
.section-head-row p { color: var(--muted); margin: 6px 0 0; }
.see-all { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .88rem; }

/* Page d'en-tête intérieure */
.page-head {
    background: var(--green-deep); color: #fff; padding: 66px 0 74px;
    position: relative; overflow: hidden;
}
.page-head::after {
    content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%;
    background: rgba(191,145,26,.20); inset-inline-end: -120px; top: -160px;
}
/* Bandeau de page avec action a droite. En dessous de 720 px, la colonne
   passe sous le titre : un bouton comprime a cote d'un titre long devient
   illisible avant de devenir inutilisable. */
.page-head-row { display: flex; align-items: center; justify-content: space-between;
                 gap: 20px; flex-wrap: wrap; }
.page-head-row > div { flex: 1; min-width: 260px; }
.page-head-action { white-space: nowrap; flex-shrink: 0; }
.page-head .page-head-action { background: var(--gold); border-color: var(--gold); color: #12211A; }
.page-head .page-head-action:hover { background: #fff; border-color: #fff; }

@media (max-width: 720px) {
    .page-head-row { align-items: flex-start; }
    .page-head-action { width: 100%; text-align: center; }
}

.page-head .eyebrow { color: #EBD494; }
.page-head .eyebrow::before { background: #EBD494; }
.page-head h1 { color: #fff; margin: 0; font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.page-head p { color: rgba(255,255,255,.78); max-width: 60ch; margin: 14px 0 0; }
.page-head .container { position: relative; z-index: 1; }

/* ---------- Grille de missions ---------- */
/* CINQ tuiles par rangée : les dix missions tiennent ainsi en deux rangées
   pleines, sans orpheline en fin de grille. Le pas est réduit et les cartes
   resserrées, faute de quoi cinq colonnes donneraient des tuiles trop étroites
   pour leur texte. */
.mission-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.mission {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 26px 20px; transition: transform .25s, box-shadow .25s, border-color .25s;
}
/* Titre et description resserrés à proportion de la colonne. */
.mission h3 { font-size: 1.02rem; }
.mission p  { font-size: .89rem; line-height: 1.6; }
.mission:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }

/* Tuile non cliquable : page absente du menu public, ou mission sans page
   dédiée. AUCUN grisage : ce sont toutes des missions que la Fédération exerce,
   et un demi-ton laisserait croire à un service en panne. Seul l'effet de survol
   est neutralisé, pour ne pas promettre un clic qui n'aura pas lieu. */
.mission-static { cursor: default; }
.mission-static:hover { transform: none; box-shadow: none; border-color: var(--line); }
.mission .ico {
    width: 56px; height: 56px; border-radius: 50%; background: var(--green-soft);
    display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
    font-size: 1.5rem;
}
.mission .ico img { width: 30px; height: 30px; display: block; }
.mission h3 { color: var(--green-deep); margin-bottom: 8px; }
.mission p { color: var(--muted); font-size: .95rem; margin: 0; }

/* ---------- Bloc « La Fédération » ---------- */
.about { max-width: 800px; }
.about h2 { color: var(--green-deep); }
.about p { color: var(--muted); font-size: 1.02rem; }
.about .btn { margin-top: 12px; }

/* ---------- Cartes (événements, articles, clubs, personnes) ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.card-grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    overflow: hidden; display: flex; flex-direction: column;
    transition: transform .25s, box-shadow .25s;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
a.card { color: inherit; }
a.card:hover { color: inherit; }

.card-img {
    height: 178px; background: linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-family: var(--font-display); font-size: 2rem; letter-spacing: .06em;
    position: relative;
}
.card-img.copper { background: linear-gradient(135deg, var(--gold) 0%, #8F6D11 100%); }
/* Logo de club en CARRE (1:1). object-fit:contain et non cover : un logo
   recadre perd son texte ou sa bordure, alors qu'une photo supporte le
   recadrage. Le fond blanc evite qu'un logo transparent se fonde dans le
   degrade vert du cadre. */
.card-img.logo-club { aspect-ratio: 1 / 1; height: auto; background: #fff; padding: 14px; }
.card-img.logo-club img { width: 100%; height: 100%; object-fit: contain; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 24px 26px 28px; flex: 1; }
.card-body h3 { color: var(--green-deep); margin-bottom: 8px; font-size: 1.15rem; }
.card-body p { color: var(--muted); font-size: .93rem; margin: 0 0 6px; }

.tag {
    display: inline-block; font-family: var(--font-display); font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em; font-size: .72rem;
    color: var(--gold-text); background: var(--gold-soft);
    padding: 5px 12px; border-radius: 100px; margin-bottom: 12px;
}
.tag-green { color: var(--green); background: var(--green-soft); }
.tag-muted { color: var(--muted); background: var(--mist); }

.meta { font-size: .85rem; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Personnes (bureau, arbitres) */
/* Photo des membres du bureau en CARRE (1:1). aspect-ratio plutot qu'une
   hauteur fixe : la vignette suit la largeur de sa colonne et reste carree a
   toutes les tailles d'ecran, alors qu'une hauteur figee s'etirait ou
   s'ecrasait selon la mise en page. */
.person-photo {
    aspect-ratio: 1 / 1; background: var(--green-soft);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 2.6rem; color: var(--green);
    letter-spacing: .04em; overflow: hidden;
}
.person-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Vue « portrait entier » : l'image est affichee en entier, sans recadrage.
   Le carre est conserve, le vide est comble par le fond. Utile pour les
   photos verticales que le cadrage carre ampute du menton ou du front. */
/* La regle « .entier » a ete retiree avec le bouton de bascule des portraits :
   plus rien ne l'activait. Les portraits sont desormais cadres en remplissant
   le cercle, choix unique et previsible. */

.bureau-bascule { text-align: center; margin: 0 0 26px; }

/* ---------- Recherche ---------- */
.searchbar { display: flex; gap: 10px; max-width: 520px; margin: 0 auto 44px; }
.searchbar input {
    flex: 1; padding: 14px 18px; border: 1px solid var(--line); border-radius: 100px;
    font-family: var(--font-body); font-size: .95rem; background: #fff;
}
.searchbar input:focus { border-color: var(--green); outline: none; }

/* ---------- Vérification de licence ---------- */
.verify-panel {
    background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    padding: 44px; max-width: 680px; margin-inline: auto;
}
.verify-panel h2 { color: var(--green-deep); }
.verify-panel > p { color: var(--muted); }
.verify-form { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap;
               align-items: flex-end; }
/* Le « min-width: 220px » d'origine valait pour un champ unique. Il est
   reporte sur le conteneur des chiffres : applique aux deux champs, il
   forcait le prefixe a la meme largeur que la saisie, alors qu'il ne
   compte que neuf caracteres. */
.verify-form input {
    padding: 15px 20px; border: 1px solid var(--line);
    border-radius: 100px; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .04em;
}
.verify-form > .btn { flex: 0 0 auto; }
.verify-form input:focus { border-color: var(--green); outline: none; }

.result {
    margin: 20px 0 4px; border-radius: var(--radius); padding: 24px 26px;
    border-inline-start: 5px solid var(--muted); background: var(--mist);
}
.result strong { font-family: var(--font-display); font-size: 1.25rem; display: block; margin-bottom: 6px; }
.result.valid     { border-color: var(--green);  background: var(--green-soft); }
.result.valid strong    { color: var(--green-deep); }
.result.expired   { border-color: var(--warning); background: #FBF3E3; }
.result.expired strong  { color: var(--warning); }
.result.suspended { border-color: var(--gold); background: var(--gold-soft); }
.result.suspended strong{ color: var(--gold-text); }
.result.invalid   { border-color: var(--danger); background: #FBEDEC; }
.result.invalid strong  { color: var(--danger); }

.result-lines { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 26px; margin-top: 14px; }
.result-lines div { font-size: .92rem; }
.result-lines span { display: block; text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; color: var(--muted); }

/* ---------- Programme annuel ---------- */
.year-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; justify-content: center; }
.month-row { display: grid; grid-template-columns: 160px 1fr; gap: 32px; margin-bottom: 34px; align-items: start; }
.month-label {
    font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em;
    color: var(--gold-text); font-size: 1.05rem; font-weight: 600; padding-top: 10px;
}
.month-items { border-inline-start: 2px solid var(--line); padding-inline-start: 28px; }
.prog-item {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 18px 22px; margin-bottom: 12px;
}
.prog-item h3 { font-size: 1.05rem; margin-bottom: 4px; color: var(--green-deep); }
.prog-item p { margin: 0; color: var(--muted); font-size: .9rem; }

/* ---------- Article ---------- */
.article { max-width: 760px; margin-inline: auto; }
.article h1 { color: var(--green-deep); }
.article-body { font-size: 1.03rem; line-height: 1.85; white-space: pre-line; color: #22302B; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.contact-info { background: var(--green-deep); color: #fff; padding: 48px 44px; }
.contact-info h3 { color: #fff; }
.contact-info .eyebrow { color: #EBD494; }
.contact-info .eyebrow::before { background: #EBD494; }
.contact-info ul { list-style: none; padding: 0; margin: 28px 0 0; }
.contact-info li { display: flex; gap: 14px; margin-bottom: 22px; align-items: flex-start; }
.contact-info li .ico { flex: 0 0 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; }
.contact-info li span { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.6); }
.contact-info li a { color: #fff; }
.contact-info li a:hover { color: #EBD494; }

.contact-form { background: #fff; padding: 48px 44px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 7px; }
.field input, .field textarea, .field select {
    width: 100%; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px;
    font-family: var(--font-body); font-size: .96rem; background: #fff; color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--green); outline: none; }
.field textarea { min-height: 140px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.notice { border-radius: 12px; padding: 14px 18px; margin-bottom: 22px; font-size: .93rem; }
.notice-ok  { background: var(--green-soft); color: var(--green-deep); }
.notice-err { background: #FBEDEC; color: var(--danger); }

/* ---------- Appel à l'action ---------- */
.cta-band { background: var(--green); color: #fff; border-radius: var(--radius-lg); padding: 52px 56px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta-band h2 { color: #fff; margin: 0 0 6px; }
.cta-band p { color: rgba(255,255,255,.8); margin: 0; max-width: 56ch; }

/* ---------- Pied de page ---------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.72); padding: 72px 0 0; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; gap: 48px; padding-bottom: 48px; }
.site-footer h4 {
    color: #fff; font-family: var(--font-display); text-transform: uppercase;
    letter-spacing: .1em; font-size: .92rem; margin-bottom: 20px;
}
.site-footer a { color: rgba(255,255,255,.72); }
.site-footer a:hover { color: #EBD494; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 11px; font-size: .93rem; }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.footer-brand img { height: 62px; width: auto; }
.footer-brand strong { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; color: #fff; font-size: 1.05rem; }
.footer-about { font-size: .93rem; max-width: 46ch; }
/* ---------- RESEAUX SOCIAUX ----------
   Icones en SVG integre : le trace suit la couleur du texte (currentColor),
   il suffit donc de changer celle du lien au survol pour que l'icone suive,
   sans regle supplementaire. */
.social { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.social a {
    width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.85); transition: background .18s, color .18s, transform .18s;
}
.social a svg { width: 19px; height: 19px; display: block; }
.social a:hover { background: var(--gold); color: #fff; transform: translateY(-2px); }
/* Contour visible au clavier : sans lui, on ne sait plus ou l'on est en
   parcourant le pied de page a la touche de tabulation. */
.social a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .social a:hover { transform: none; } }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.12); padding: 22px 0 28px;
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .85rem;
}

/* ---------- États vides ---------- */
.empty {
    grid-column: 1 / -1; text-align: center; color: var(--muted);
    background: var(--mist); border-radius: var(--radius-lg); padding: 48px 24px;
}

/* ---------- RTL ---------- */
[dir="rtl"] body { font-family: 'Tajawal', var(--font-body); }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .btn, [dir="rtl"] .eyebrow, [dir="rtl"] .tag { font-family: 'Tajawal', var(--font-display); letter-spacing: 0; }
[dir="rtl"] .month-label { letter-spacing: 0; }

/* ---------- Responsive ---------- */
/* Les cinq colonnes ne tiennent que sur un grand écran : on descend par
   paliers plutôt que de laisser les tuiles se comprimer jusqu'à l'illisible. */
@media (max-width: 1280px) {
    .mission-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1100px) {
    .mission-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
    .mission-grid, .card-grid { grid-template-columns: repeat(2, 1fr); }
    .card-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .nav-toggle { display: flex; }
    /* La navigation devient un panneau fixe hors flux : la marque reprend
       la marge automatique pour renvoyer langue et bouton menu à droite. */
    .brand { margin-inline-end: auto; }
    .main-nav {
        position: fixed; inset: 82px 0 auto; background: #fff; border-bottom: 1px solid var(--line);
        transform: translateY(-140%); transition: transform .3s ease; box-shadow: var(--shadow-lg);
        flex: none; display: block;
    }
    .main-nav.open { transform: translateY(0); }
    .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 12px 24px 24px; }
    .main-nav li { border-bottom: 1px solid var(--line); }
    .main-nav a { display: block; padding: 14px 0; }
    .main-nav a::after { display: none; }
    .header-tools .btn { display: none; }
    .header-tools { gap: 10px; }
    .brand-text strong { font-size: 1rem; }
}

@media (max-width: 480px) {
    .header-inner { gap: 12px; min-height: 72px; }
    .container.header-inner { padding-inline: 16px; }
    .brand { gap: 8px; }
    .brand img { height: 42px; }
    .brand-text strong { font-size: .92rem; }
    .lang-switch { padding: 3px; }
    .lang-switch a { padding: 5px 8px; font-size: .68rem; }
    .nav-toggle { width: 44px; height: 44px; border-radius: 10px; }
    .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { width: 24px; }
    .main-nav { inset: 72px 0 auto; }
}

@media (max-width: 640px) {
    .section { padding: 60px 0; }
    .mission-grid, .card-grid, .card-grid-4 { grid-template-columns: 1fr; }
    .month-row { grid-template-columns: 1fr; gap: 12px; }
    .month-items { border-inline-start: 0; padding-inline-start: 0; }
    .verify-panel, .contact-info, .contact-form { padding: 30px 24px; }
    .footer-grid { grid-template-columns: 1fr; gap: 34px; }
    .cta-band { padding: 36px 28px; }
    .field-row, .result-lines { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Partenaires ---------- */
/* ---------- PARTENAIRES ----------
   La grille etait figee a CINQ colonnes. Avec trois partenaires, deux cases
   vides restaient a droite ; avec sept, le sixieme et le septieme se
   retrouvaient seuls sur une deuxieme rangee, deux fois plus etroits que la
   place disponible.

   Une disposition FLEXIBLE, et non une grille : les partenaires se partagent
   la largeur quel qu'en soit le nombre, une seule rangee tant que la place le
   permet, davantage ensuite.

   Deux bornes encadrent l'etirement :
     - plancher a 170 px, en deca duquel un logo et son intitule ne se lisent
       plus ; c'est lui qui declenche le passage a la ligne ;
     - plafond a 320 px, sans lequel deux partenaires occuperaient chacun
       pres de 600 px, ce qui donne des cartes vides et disproportionnees.

   justify-content: center centre la DERNIERE rangee. Avec sept partenaires,
   le septieme ne reste pas seul et decale a gauche : il se place au milieu,
   ce qui se lit comme une composition et non comme un reste. */
.partner-grid {
    display: flex; flex-wrap: wrap; gap: 22px; justify-content: center;
}
.partner {
    flex: 1 1 170px; max-width: 320px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    min-height: 128px; padding: 20px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 10px; text-align: center;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.partner:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--gold); }
.partner img { max-height: 64px; width: auto; object-fit: contain; }
.partner span {
    font-family: var(--font-display); font-weight: 600; color: var(--green-deep);
    font-size: .92rem; line-height: 1.25;
}
.partner .initials {
    width: 56px; height: 56px; border-radius: 50%; background: var(--green-soft);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 1.2rem; color: var(--green);
}
/* Aucun palier de largeur n'est necessaire : auto-fit recalcule le nombre de
   colonnes a chaque taille d'ecran. Sur telephone, le plancher de 170 px
   laisse deux colonnes, puis une seule sur les appareils les plus etroits. */

/* ---------- Liens légaux du pied de page ---------- */
.footer-legal-links { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------- Pages légales ---------- */
.legal-body { font-size: .97rem; line-height: 1.75; color: #22302B; }
.legal-body h2 {
    color: var(--green-deep); font-size: 1.15rem; margin: 34px 0 10px;
    padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body ul { padding-inline-start: 20px; }
.legal-body li { margin-bottom: 7px; }
.legal-table { width: 100%; border-collapse: collapse; font-size: .88rem; margin: 14px 0; }
.legal-table th, .legal-table td { border: 1px solid var(--line); padding: 9px 11px; text-align: start; vertical-align: top; }
.legal-table th { background: var(--green-soft); color: var(--green-deep); }
.legal-note {
    background: var(--gold-soft); border-inline-start: 4px solid var(--gold);
    border-radius: 8px; padding: 12px 16px; font-size: .9rem;
}
.legal-maj { margin-top: 34px; font-size: .85rem; color: var(--muted); }
.legal-avert {
    margin-top: 14px; background: var(--mist); border-radius: 10px;
    padding: 14px 18px; font-size: .87rem; color: var(--muted);
}
@media (max-width: 640px) {
    .footer-legal-links { gap: 12px; }
    .legal-table { font-size: .8rem; }
}

/* ============================================================
   PRÉSENTATION PUBLIQUE - mot du président, histoire, galerie
   ============================================================ */

/* Mot du président : portrait à côté du texte, l'un sous l'autre sur
   mobile. Le portrait reste visible au défilement sur grand écran. */
/* ============================================================
   MOT DU PRESIDENT
   ------------------------------------------------------------
   Une page de LECTURE : bandeau sobre, portrait a cote du texte,
   colonne de texte bornee en largeur.
   ============================================================ */

/* Bandeau propre a cette page : pas de cercle decoratif ni de fond
   colore, qui feraient concurrence a un texte qu'on vient lire. */
.mot-entete { text-align: center; padding: 56px 20px 40px;
              background: linear-gradient(180deg, #fff 0%, var(--mist) 100%);
              border-bottom: 1px solid var(--line); }
.mot-entete h1 { margin: 10px 0 0; color: var(--green-deep); }
.mot-filet { display: flex; align-items: center; justify-content: center;
             gap: 12px; max-width: 220px; margin: 18px auto 0; }
.mot-filet span { flex: 1; height: 1px;
                  background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.mot-filet i { width: 7px; height: 7px; background: var(--gold);
               transform: rotate(45deg); display: block; }

/* Le portrait suit le defilement : sur un texte long, le visage de
   l'auteur reste presente pendant toute la lecture. */
.mot-president { display: grid; grid-template-columns: 240px minmax(0, 1fr);
                 gap: 48px; align-items: start; max-width: 1000px; margin: 0 auto; }
.mot-aside { position: sticky; top: 100px; }
.mot-portrait { margin: 0; }
.mot-portrait img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
                    border-radius: 16px; box-shadow: var(--shadow); display: block; }
.mot-initiales { width: 100%; aspect-ratio: 3 / 4; border-radius: 16px;
                 background: var(--green-soft); box-shadow: var(--shadow);
                 display: flex; align-items: center; justify-content: center;
                 font-family: var(--font-display); font-size: 3.4rem; font-weight: 700;
                 color: var(--green); }
.mot-portrait figcaption { margin-top: 14px; text-align: center; line-height: 1.5;
                           padding-top: 12px; border-top: 2px solid var(--gold); }
.mot-portrait figcaption strong { display: block; font-size: 1.02rem; color: var(--green-deep); }
.mot-portrait figcaption span { display: block; font-size: .86rem; color: var(--muted); }


/* ---------- POLICE ARABE DU MOT DU PRESIDENT ----------
   « Arabswell » n'est pas servie par Google Fonts : les fichiers sont deposes
   avec le site, dans assets/fonts/. Le .woff est cite en premier car il pese
   moitie moins que le .ttf (35 Ko contre 71) ; le .ttf sert de repli aux rares
   navigateurs qui l'ignorent.

   La police ne comporte qu'une graisse. On ne declare donc PAS d'intervalle
   400-700 : le navigateur croirait disposer d'un gras reel et n'appliquerait
   pas son gras synthetique, laissant les titres sans relief. */
@font-face {
    font-family: 'Arabswell';
    src: url('../fonts/Arabswell.woff') format('woff'),
         url('../fonts/Arabswell.ttf')  format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;   /* le texte reste lisible pendant le chargement */
}

.mot-texte, .texte-long { font-size: 1.04rem; line-height: 1.95; max-width: 74ch; }

/* Le mot du President en arabe : police dediee, corps legerement augmente et
   interligne plus genereux. L'arabe se lit mal serre, et cette police-ci est
   plus fine que Tajawal. */
/* Selecteurs volontairement precis : une regle plus loin dans la feuille fixe
   deja la taille de la citation d'accueil, et a specificite egale c'est la
   derniere qui l'emporte. On passe donc devant plutot que de deplacer le bloc. */
html[lang="ar"] .mot-texte,
html[lang="ar"] .accueil-president .ap-texte blockquote,
[dir="rtl"] .mot-texte,
[dir="rtl"] .accueil-president .ap-texte blockquote {
    font-family: 'Arabswell', 'Tajawal', var(--font-body);
    font-size: 1.18rem;
    line-height: 2.15;
    letter-spacing: 0;
}
.mot-texte { position: relative; }
/* Guillemet ouvrant en filigrane : marque le registre du texte sans
   alourdir la page d'une image supplémentaire. */
.mot-texte::before { content: '\201C'; position: absolute; inset-inline-start: -34px; top: -22px;
                     font-family: Georgia, serif; font-size: 78px; color: var(--gold); opacity: .22;
                     line-height: 1; pointer-events: none; }

/* ---------- LECTEUR D'IMAGES ----------
   Fond tres sombre plutot que noir pur : le noir absolu fait paraitre les zones
   sombres des photos comme des trous dans l'ecran. */
.visionneuse { position: fixed; inset: 0; z-index: 2000; background: rgba(10,16,13,.96);
               display: flex; align-items: center; justify-content: center; }
.visionneuse[hidden] { display: none; }

.visionneuse-barre { position: absolute; top: 0; inset-inline: 0; display: flex;
                     align-items: center; justify-content: space-between; gap: 16px;
                     padding: 14px 20px; color: #fff;
                     background: linear-gradient(180deg, rgba(0,0,0,.55), transparent);
                     border-bottom: 2px solid var(--gold); }
.visionneuse-marque { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.visionneuse-marque img { height: 34px; width: auto; display: block; }
.visionneuse-marque span { font-family: var(--font-display); font-weight: 700;
                           letter-spacing: .08em; font-size: .95rem; }
.visionneuse-album { flex: 1; text-align: center; font-family: var(--font-display);
                     font-weight: 600; font-size: 1.05rem; color: var(--gold);
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visionneuse-outils { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.visionneuse-compteur { font-size: .85rem; opacity: .8; }

.visionneuse-btn { background: rgba(255,255,255,.12); border: 0; color: #fff;
                   width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
                   font-size: 1.1rem; line-height: 1; }
.visionneuse-btn:hover { background: rgba(255,255,255,.24); }

.visionneuse-image { max-width: 88vw; max-height: 78vh; object-fit: contain;
                     border-radius: 6px; box-shadow: 0 18px 50px rgba(0,0,0,.5); }

.visionneuse-nav { position: absolute; top: 50%; transform: translateY(-50%);
                   background: rgba(255,255,255,.10); border: 0; color: #fff;
                   width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
                   font-size: 2rem; line-height: 1; }
.visionneuse-nav:hover { background: rgba(255,255,255,.22); }
.visionneuse-prec { inset-inline-start: 18px; }
.visionneuse-suiv { inset-inline-end: 18px; }

/* La vignette est un <button> : on lui retire l'apparence de bouton. */
button.galerie-item { padding: 0; border: 1px solid var(--line); background: #fff;
                      cursor: zoom-in; display: block; width: 100%; }

@media (max-width: 640px) {
    .visionneuse-marque span { display: none; }   /* le logo suffit */
    .visionneuse-album { font-size: .92rem; }
    .visionneuse-nav { width: 42px; height: 42px; font-size: 1.5rem; }
    .visionneuse-prec { inset-inline-start: 6px; }
    .visionneuse-suiv { inset-inline-end: 6px; }
    .visionneuse-image { max-width: 94vw; }
}

/* ---------- FICHE PUBLIQUE D'UNE ASSOCIATION ----------
   Page ouverte par le QR de l'autocollant. Le bandeau d'affiliation vient en
   premier et se lit d'un coup d'oeil : c'est la question de celui qui se tient
   devant la salle. */
.club-atteste { display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
                background: var(--green-soft); border: 1px solid var(--line);
                border-inline-start: 6px solid var(--green); border-radius: 14px;
                padding: 20px 24px; margin-bottom: 30px; }
.club-atteste-marque { width: 84px; height: 84px; flex-shrink: 0; background: #fff;
                       border: 1px solid var(--line); border-radius: 12px;
                       display: flex; align-items: center; justify-content: center; padding: 8px; }
.club-atteste-marque img { max-width: 100%; max-height: 100%; object-fit: contain; }
.club-initiales { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
                  color: var(--green); }
.club-atteste-titre { margin: 0 0 4px; font-family: var(--font-display); font-weight: 700;
                      font-size: 1.15rem; color: var(--green-deep); }
.club-atteste-num { margin: 0; color: var(--muted); font-size: .92rem; }

.club-fiche { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.club-fiche h2 { font-size: 1.05rem; margin: 0 0 12px; color: var(--green-deep); }
.club-fiche h2 + * { margin-top: 0; }
.club-fiche > div > h2:not(:first-child) { margin-top: 26px; }

.club-liste { list-style: none; padding: 0; margin: 0 0 6px; }
.club-liste li { padding: 7px 0; border-bottom: 1px solid var(--line); }
.club-liste li:last-child { border-bottom: 0; }

.club-horaires { width: 100%; border-collapse: collapse; }
/* padding logique : en arabe, la colonne des jours passe a droite et
   l'espacement doit suivre, sinon les heures viennent coller au texte. */
.club-horaires th { text-align: start; padding: 8px; padding-inline: 0 12px; font-weight: 600;
                    color: var(--green-deep); border-bottom: 1px solid var(--line);
                    white-space: nowrap; }
.club-horaires td { padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.hint-public { font-size: .84rem; color: var(--muted); margin-top: 10px; font-style: italic; }

@media (max-width: 860px) {
    .club-fiche { grid-template-columns: 1fr; gap: 26px; }
}

/* Grille de saisie des horaires, cote espace club : les en-tetes de ligne et de
   colonne sont des boutons, on leur retire l'apparence de bouton. */
.grille-horaires .lien-ligne,
.grille-horaires .lien-colonne { background: none; border: 0; padding: 0; cursor: pointer;
                                 font: inherit; color: var(--green); font-weight: 600; }
.grille-horaires .lien-ligne:hover,
.grille-horaires .lien-colonne:hover { text-decoration: underline; }
.grille-horaires input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }

.empty-note { color: var(--muted); font-style: italic; padding: 28px 0; }

/* Galerie : grille auto-ajustée, sans nombre de colonnes figé. */
.galerie-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; }
.galerie-item { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px;
                overflow: hidden; box-shadow: var(--shadow); transition: transform .18s ease; }
.galerie-item:hover { transform: translateY(-3px); }
.galerie-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.galerie-item figcaption { padding: 13px 15px 15px; line-height: 1.55; }
.galerie-item figcaption strong { display: block; font-size: .97rem; }
.galerie-item figcaption span { display: block; font-size: .87rem; color: var(--muted); margin-top: 3px; }
.galerie-item figcaption time { display: block; font-size: .78rem; color: var(--muted); margin-top: 6px; }

@media (max-width: 820px) {
    .mot-president { grid-template-columns: 1fr; gap: 24px; }
    .mot-portrait { position: static; max-width: 240px; margin-inline: auto; }
    .mot-texte::before { display: none; }
}

/* ============================================================
   MOT DU PRÉSIDENT SUR LA PAGE D'ACCUEIL
   Extrait encadré, portrait à côté. La page complète reste
   accessible mais ne figure pas dans le menu.
   ============================================================ */
.accueil-president { display: grid; grid-template-columns: 220px 1fr; gap: 34px; align-items: center; }
.accueil-president .ap-portrait { margin: 0; }
.accueil-president .ap-portrait img {
    width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
    border-radius: 16px; box-shadow: var(--shadow); display: block;
}
.accueil-president .ap-texte blockquote {
    margin: 12px 0 16px; padding: 0; border: 0; position: relative;
    font-size: 1.06rem; line-height: 1.95; color: var(--ink); max-width: 70ch;
}
/* Guillemet en filigrane : signale une citation sans ajouter d'image. */
.accueil-president .ap-texte blockquote::before {
    content: '\201C'; position: absolute; inset-inline-start: -30px; top: -18px;
    font-family: Georgia, serif; font-size: 66px; color: var(--gold); opacity: .2;
    line-height: 1; pointer-events: none;
}
.accueil-president .ap-signature { margin: 0 0 16px; line-height: 1.5; }
.accueil-president .ap-signature strong { display: block; font-size: 1.02rem; }
.accueil-president .ap-signature span { display: block; font-size: .9rem; color: var(--muted); }

@media (max-width: 820px) {
    .accueil-president { grid-template-columns: 1fr; gap: 22px; }
    .accueil-president .ap-portrait { max-width: 200px; }
    .accueil-president .ap-texte blockquote::before { display: none; }
}

/* Le bouton « Vérifier une licence » a été retiré de l'en-tête : la
   navigation reste consacrée à l'identité de la Fédération, et le service
   est proposé par l'appel à l'action de la page d'accueil. */

/* ---------- PROGRAMME ANNUEL : VUE COMPACTE ----------
   Une ligne par activite, alignee en colonnes : date, intitule, lieu. Le
   regard descend la colonne des dates sans avoir a relire chaque bloc. */
.month-items.compact { display: flex; flex-direction: column; gap: 0; }
.prog-ligne { display: grid; grid-template-columns: 110px 1fr auto auto;
              gap: 12px; align-items: baseline; padding: 9px 0;
              border-bottom: 1px solid var(--line); }
.prog-ligne:last-child { border-bottom: 0; }
.prog-date { font-family: var(--font-display); font-weight: 600; font-size: .88rem;
             color: var(--green); white-space: nowrap; }
.prog-titre { font-weight: 600; color: var(--ink); }
.prog-lieu { font-size: .85rem; color: var(--muted); white-space: nowrap; }
.prog-lieu::before { content: '📍 '; }

@media (max-width: 640px) {
    /* En colonne unique, la date reste en tete : c'est l'element de reperage. */
    .prog-ligne { grid-template-columns: 1fr; gap: 2px; padding: 10px 0; }
    .prog-lieu { white-space: normal; }
}

/* ---------- EVENEMENTS : VUE ETENDUE ---------- */
.event-details { list-style: none; padding: 0; margin: 12px 0 0; }
.event-details li { padding: 5px 0; font-size: .89rem; color: var(--muted);
                    border-top: 1px solid var(--line); }
.event-details li:first-child { border-top: 0; }

/* Carte du dernier evenement : pleine largeur, image a gauche sur grand ecran. */
.card-large { display: grid; grid-template-columns: minmax(0, 320px) 1fr; align-items: stretch; }
.card-large .card-img { height: 100%; min-height: 200px; }
@media (max-width: 720px) {
    .card-large { grid-template-columns: 1fr; }
    .card-large .card-img { min-height: 170px; }
}


/* ============================================================
   PROGRAMME ANNUEL - PRESENTATION SOIGNEE
   ------------------------------------------------------------
   Le programme est adopte en assemblee : il est traite ici comme un
   document officiel et non comme une liste. D'ou l'en-tete a filet dore,
   les mois numerotes en chiffres romains, et une ligne de temps verticale
   qui donne a la saison son unite.
   ============================================================ */

/* ---------- En-tete ---------- */
.prog-entete { text-align: center; padding: 64px 24px 52px;
               background: linear-gradient(180deg, #fff 0%, var(--mist) 100%);
               border-bottom: 1px solid var(--line); }
.prog-eyebrow { display: block; font-size: .76rem; letter-spacing: .22em;
                text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.prog-titre-page { font-family: var(--font-display); font-size: 2.1rem; font-weight: 600;
                   letter-spacing: .14em; text-transform: uppercase;
                   color: var(--green-deep); margin: 0; }
/* La saison est le vrai sujet de la page : elle est plus grande que le titre. */
.prog-saison { font-family: var(--font-display); font-size: 3.4rem; font-weight: 700;
               line-height: 1.1; color: var(--gold-text); margin-top: 4px; letter-spacing: .04em; }

/* Filet centre a losange : le meme motif que le bandeau d'accueil, pour que
   les deux pages se reconnaissent comme d'une meme main. */
.prog-filet { display: flex; align-items: center; justify-content: center;
              gap: 12px; max-width: 260px; margin: 20px auto 18px; }
.prog-filet span { flex: 1; height: 1px; background: linear-gradient(90deg,
                   transparent, var(--gold), transparent); }
.prog-filet i { width: 8px; height: 8px; background: var(--gold);
                transform: rotate(45deg); display: block; }

.prog-soustitre { max-width: 60ch; margin: 0 auto; color: var(--muted); }

/* ---------- Barre de navigation ---------- */
.prog-conteneur { max-width: 940px; }
.prog-barre { display: flex; align-items: center; justify-content: space-between;
              gap: 18px; flex-wrap: wrap; margin-bottom: 38px; }
.prog-saisons { display: flex; gap: 6px; flex-wrap: wrap; }
/* Onglets discrets : un souligne dore plutot qu'un bouton plein, qui
   concurrencerait le titre juste au-dessus. */
.prog-onglet { padding: 7px 14px; border-radius: 6px; text-decoration: none;
               font-size: .9rem; font-weight: 600; color: var(--muted);
               border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.prog-onglet:hover { color: var(--green-deep); }
.prog-onglet.actif { color: var(--green-deep); border-bottom-color: var(--gold); }

/* ---------- Ligne de temps ----------
   Un filet vertical relie les mois : la saison se lit comme une progression,
   non comme une suite de blocs sans rapport. */
.prog-timeline { position: relative; padding-inline-start: 34px; }
.prog-timeline::before { content: ''; position: absolute; inset-block: 12px 12px;
                         inset-inline-start: 11px; width: 1px;
                         background: linear-gradient(180deg, var(--gold), var(--line)); }

.prog-mois { margin-bottom: 42px; }
.prog-mois:last-child { margin-bottom: 0; }

.prog-mois-tete { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px;
                  position: relative; }
/* Le chiffre romain s'assoit sur la ligne de temps : c'est lui qui marque
   l'etape, d'ou sa pastille pleine. */
.prog-romain { position: absolute; inset-inline-start: -34px; top: 2px;
               width: 24px; height: 24px; border-radius: 50%;
               background: var(--green); color: #fff;
               display: flex; align-items: center; justify-content: center;
               font-family: var(--font-display); font-size: .68rem; font-weight: 700;
               letter-spacing: .02em; }
.prog-mois-tete h2 { font-family: var(--font-display); font-size: 1.32rem; font-weight: 600;
                     letter-spacing: .1em; text-transform: uppercase;
                     color: var(--green-deep); margin: 0; }
.prog-annee { font-size: .82rem; color: var(--muted); letter-spacing: .08em; }
.prog-encours { margin-inline-start: auto; font-size: .68rem; letter-spacing: .12em;
                text-transform: uppercase; color: var(--gold-text); font-weight: 700;
                border: 1px solid var(--gold); border-radius: 100px; padding: 3px 11px; }

/* ---------- Les activites ---------- */
.prog-liste { list-style: none; margin: 0; padding: 0; }
.prog-entree { display: grid; grid-template-columns: 120px 1fr auto; gap: 16px;
               align-items: baseline; padding: 11px 0;
               border-bottom: 1px solid var(--line); position: relative; }
.prog-entree:last-child { border-bottom: 0; }

/* Petite puce creuse alignee sur la colonne des dates : elle guide l'oeil
   sans peser, la ou une icone repetee douze fois deviendrait bruyante. */
.prog-puce { position: absolute; inset-inline-start: -27px; top: 18px;
             width: 7px; height: 7px; border-radius: 50%;
             border: 1.5px solid var(--gold); background: #fff; }

.prog-quand { font-family: var(--font-display); font-weight: 600; font-size: .92rem;
              color: var(--green); white-space: nowrap; }
.prog-quand em { font-style: normal; color: var(--muted); font-weight: 500; }
.prog-quoi { font-size: 1.02rem; color: var(--ink); }
.prog-ou { font-size: .86rem; color: var(--muted); text-align: end; white-space: nowrap; }

.prog-etat { display: inline-block; margin-inline-start: 8px; padding: 2px 9px;
             border-radius: 100px; font-size: .72rem; font-weight: 600;
             text-transform: uppercase; letter-spacing: .05em; }
.prog-etat.realise { background: var(--green-soft); color: var(--green-deep); }
.prog-etat.reporte { background: #FBF3E3; color: var(--warning); }

/* Mois ecoule : attenue sans etre efface. Le programme reste consultable en
   entier, mais l'attention va d'abord a ce qui reste a venir. */
.prog-mois.passe { opacity: .62; }
.prog-mois.passe .prog-romain { background: var(--muted); }
/* Mois en cours : le seul a porter un fond, pour se retrouver d'un regard. */
.prog-mois.courant { background: #FCFDFC; border-inline-start: 3px solid var(--gold);
                     margin-inline-start: -20px; padding: 14px 18px 4px 17px;
                     border-radius: 0 10px 10px 0; }
.prog-mois.courant .prog-romain { background: var(--gold); inset-inline-start: -31px; }

.prog-pied { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--line);
             font-size: .84rem; color: var(--muted); font-style: italic; text-align: center; }

@media (max-width: 720px) {
    .prog-entete { padding: 44px 20px 36px; }
    .prog-titre-page { font-size: 1.5rem; }
    .prog-saison { font-size: 2.3rem; }
    /* En colonne unique, le lieu passe sous l'intitule et s'aligne a gauche :
       le laisser a droite creerait une colonne vide sur trois lignes. */
    .prog-entree { grid-template-columns: 1fr; gap: 3px; padding: 12px 0; }
    .prog-ou { text-align: start; white-space: normal; }
    .prog-timeline { padding-inline-start: 26px; }
    .prog-romain { inset-inline-start: -26px; width: 20px; height: 20px; font-size: .6rem; }
    .prog-puce { inset-inline-start: -20px; top: 19px; }
    .prog-mois.courant { margin-inline-start: -12px; padding-inline: 12px 10px; }
}

/* Impression : le programme se distribue en reunion. On retire les fonds et
   les attenuations, qui gaspillent l'encre et effacent les mois passes. */
@media print {
    .prog-entete { background: none; padding: 20px 0; }
    .prog-mois.passe { opacity: 1; }
    .prog-mois.courant { background: none; }
    .prog-barre, .prog-pied { display: none; }
    .prog-mois { break-inside: avoid; }
}

/* ---------- Demande d'affiliation ---------- */
.aff-etapes { list-style: none; counter-reset: none; margin: 0 0 30px; padding: 0;
              display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.aff-etapes li { background: var(--mist); border: 1px solid var(--line); border-radius: 12px;
                 padding: 16px 18px; font-size: .9rem; color: var(--muted); line-height: 1.6; }
.aff-etapes strong { display: block; font-family: var(--font-display); font-size: 1.3rem;
                     color: var(--gold-text); margin-bottom: 4px; }
.aff-formulaire { position: relative; }
.aff-note { font-size: .85rem; color: var(--muted); font-style: italic; margin-top: 14px; }

/* Accuse de reception : volontairement large et calme. La personne vient de
   franchir un pas, la page doit le lui confirmer sans ambiguite. */
.aff-recu { text-align: center; background: var(--green-soft); border: 1px solid var(--line);
            border-radius: 16px; padding: 44px 28px; }
.aff-recu-marque { width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 50%;
                   background: var(--green); color: #fff; font-size: 1.9rem;
                   display: flex; align-items: center; justify-content: center; }
.aff-recu h2 { margin: 0 0 10px; color: var(--green-deep); }
.aff-recu p { max-width: 52ch; margin: 0 auto; color: var(--muted); }

/* ---------- Bureau directeur sur l'accueil ---------- */
.bureau-apercu { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.bureau-vignette { margin: 0; text-align: center; }
.bureau-portrait { aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden;
                   background: var(--green-soft); border: 3px solid #fff;
                   box-shadow: var(--shadow); display: flex; align-items: center;
                   justify-content: center; margin-bottom: 14px; }
.bureau-portrait img { width: 100%; height: 100%; object-fit: cover; }
.bureau-portrait span { font-family: var(--font-display); font-size: 2rem; font-weight: 700;
                        color: var(--green); }
.bureau-vignette figcaption strong { display: block; font-size: 1rem; color: var(--ink); }
.bureau-vignette figcaption span { display: block; font-size: .84rem; color: var(--muted);
                                   margin-top: 2px; }

@media (max-width: 860px) {
    .aff-etapes { grid-template-columns: 1fr; }
    .bureau-apercu { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

/* ---------- VERIFICATION : CHAMP UNIQUE ----------
   Le numero s'ecrit d'un seul tenant, il se saisit dans un seul champ. La
   chasse fixe aligne les caracteres et rend la relecture plus sure : sur un
   numero, une confusion entre deux chiffres n'a pas de rattrapage. */
.verify-champ { flex: 1 1 260px; min-width: 220px; }
.verify-champ input {
    width: 100%; font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 1.05rem; letter-spacing: .1em; text-transform: uppercase;
}
.verify-legende { display: block; font-size: .72rem; letter-spacing: .08em;
                  text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.verify-aide { font-size: .85rem; color: var(--muted); margin-top: 12px; }

@media (max-width: 560px) {
    .verify-champ { flex: 1 1 100%; }
    .verify-form > .btn { width: 100%; }
}


/* ============================================================
   SITE PUBLIC - MOBILE : PLEINE LARGEUR, AUCUN DEFILEMENT LATERAL
   ------------------------------------------------------------
   Regle unique : rien ne depasse la largeur de l'ecran. Un
   defilement horizontal sur telephone masque une partie du
   contenu sans qu'on s'en apercoive, et fait glisser la page
   entiere au moindre geste un peu oblique.
   ============================================================ */
@media (max-width: 820px) {

    /* Garde-fou general. overflow-x: clip plutot que hidden : hidden sur
       <html> desactive le defilement fluide (position: sticky) sur plusieurs
       navigateurs, clip ne coupe que le debordement lateral. */
    html { overflow-x: clip; }
    body { max-width: 100%; overflow-x: clip; }

    /* Le conteneur reprend toute la largeur, avec une gouttiere mesuree. */
    .container { width: 100%; max-width: 100%; padding-inline: 16px; }

    /* Un mot tres long (adresse, courriel, numero) elargissait son bloc au
       lieu d'aller a la ligne. */
    p, li, h1, h2, h3, td, th, dd, .card, .prog-titre { overflow-wrap: anywhere; }

    /* Cercle decoratif du bandeau : 420 px poses en debordement a droite.
       Sur un ecran de 360 px, il elargissait la page a lui seul. */
    .page-head { overflow: hidden; }
    .page-head::after { width: 240px; height: 240px; inset-inline-end: -100px; top: -110px; }

    /* Images, cadres et tableaux ne depassent jamais leur conteneur. */
    img, iframe, video, svg, table { max-width: 100%; height: auto; }

    /* Tableaux : defilement CONFINE dans leur cadre, jamais sur la page. */
    .table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* Le tableau des mentions legales n'a pas de cadre de defilement : il est
       donc RESSERRE pour tenir dans la largeur, plutot que d'y ajouter un
       cadre qui obligerait a faire glisser un contenu pourtant court. */
    .legal-table { font-size: .78rem; table-layout: fixed; width: 100%; }
    .legal-table th, .legal-table td { padding: 6px 7px; white-space: normal;
                                       overflow-wrap: anywhere; }

    /* Blocs a largeur minimale imposee : elle cesse de s'appliquer. */
    .page-head-row > div { min-width: 0; }
    .page-head-action { white-space: normal; }
    .verify-champ { min-width: 0; }
    input, select, textarea { max-width: 100%; }

    /* Grilles : une seule colonne sous 560 px, deux au-dessus. */
    .result-lines { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .container { padding-inline: 13px; }
    .mission-grid, .card-grid, .card-grid-4 { grid-template-columns: 1fr; }
    .bureau-apercu { grid-template-columns: repeat(2, 1fr); }
    /* Le pied de page empile ses colonnes plutot que de les comprimer. */
    .footer-grid { grid-template-columns: 1fr; }
}

/* Jour en cours dans les horaires du club : « est-ce ouvert aujourd'hui ? »
   est la question posee devant une vitrine, elle ne doit pas demander de
   compter les lignes du tableau. */
.club-horaires tr.jour-courant th { color: var(--green-deep); font-weight: 700; }
.club-horaires tr.jour-courant td { color: var(--ink); }
.pastille-aujourdhui { display: inline-block; margin-inline-start: 8px; padding: 1px 9px;
                       border-radius: 100px; background: var(--green-soft);
                       color: var(--green-deep); font-size: .68rem; font-weight: 700;
                       text-transform: uppercase; letter-spacing: .05em; }


/* ============================================================
   PAGE BUREAU - PRESIDENT EN TETE, MEMBRES CENTRES
   ============================================================ */

/* Bloc du President : portrait a gauche, texte a droite, en pleine largeur.
   Il ne concourt pas avec les autres membres, il les introduit. */
.bureau-president {
    display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 32px;
    align-items: center; background: var(--mist); border: 1px solid var(--line);
    border-radius: 18px; padding: 30px; margin-bottom: 40px;
}
.bp-portrait {
    aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden;
    background: var(--green-soft); border: 4px solid #fff; box-shadow: var(--shadow);
    display: flex; align-items: center; justify-content: center;
}
.bp-portrait img { width: 100%; height: 100%; object-fit: cover; }
.bp-portrait span { font-family: var(--font-display); font-size: 3.4rem; font-weight: 700;
                    color: var(--green); }
.bp-texte h2 { margin: 8px 0 10px; color: var(--green-deep); }
.bp-texte p { color: var(--muted); max-width: 62ch; }
.bp-actions { margin-top: 18px; }

/* Membres du bureau : grille CENTREE. Avec cinq ou sept membres, la derniere
   rangee se place au milieu au lieu de rester calee a gauche - c'est ce qui
   donne a la page sa symetrie, quel que soit l'effectif du bureau. */
.bureau-membres { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; }
.bureau-membre { flex: 1 1 260px; max-width: 320px; }

@media (max-width: 760px) {
    /* En colonne, le portrait est borne et centre : etire sur toute la largeur
       d'un telephone, il occuperait un ecran entier a lui seul. */
    .bureau-president { grid-template-columns: 1fr; gap: 20px; padding: 22px 18px;
                        text-align: center; }
    .bp-portrait { width: 190px; margin: 0 auto; }
    .bp-texte p { margin-inline: auto; }
    .bureau-membre { flex-basis: 100%; max-width: 100%; }
}


/* ============================================================
   ASSOCIATIONS AFFILIEES - VUE UNIQUE
   ------------------------------------------------------------
   Un bloc par association, contenant TOUTE son information
   publique. Les blocs s'empilent : la page se parcourt d'un seul
   defilement, et le navigateur y trouve n'importe quel mot avec
   Ctrl+F, ce qui remplace avantageusement la barre de recherche
   qui obligeait a recharger la page.
   ============================================================ */
.clubs-compte { color: var(--muted); margin: 0 0 22px; font-size: .92rem; }

.clubs-liste { display: flex; flex-direction: column; gap: 22px; }

.club-bloc { background: #fff; border: 1px solid var(--line); border-radius: 16px;
             padding: 24px 26px; box-shadow: var(--shadow); }

/* ---------- En-tete : logo, ville, nom, affiliation ---------- */
.cb-entete { display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
             padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.cb-logo { width: 84px; height: 84px; flex-shrink: 0; border-radius: 14px;
           background: #fff; border: 1px solid var(--line); display: flex;
           align-items: center; justify-content: center; overflow: hidden; }
/* contain et non cover : un logo rogne perd son sens, la ou une photo
   supporte le recadrage. */
.cb-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.cb-logo span { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700;
                color: var(--green); }
.cb-titre { flex: 1; min-width: 0; }
.cb-titre h2 { margin: 6px 0 4px; font-size: 1.25rem; color: var(--green-deep); }
.cb-affiliation { margin: 0; font-size: .86rem; color: var(--green); }
.cb-affiliation span { color: var(--muted); }

/* ---------- Trois colonnes egales ----------
   Coordonnees, encadrement, horaires : trois informations de meme rang,
   trois colonnes de meme largeur. Elles s'empilent des que la place manque. */
.cb-corps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
            padding-top: 18px; }
.cb-bloc h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
              color: var(--muted); margin: 0 0 10px; font-family: var(--font-display); }
.cb-vide { font-size: .85rem; color: var(--muted); font-style: italic; margin: 0; }

@media (max-width: 900px) {
    .cb-corps { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 620px) {
    .cb-corps { grid-template-columns: 1fr; gap: 18px; }
    .club-bloc { padding: 18px 16px; }
    .cb-entete { gap: 14px; }
    .cb-logo { width: 62px; height: 62px; }
    .cb-titre h2 { font-size: 1.1rem; }
}


/* ---------- MOT DU PRESIDENT : TELEPHONE ---------- */
@media (max-width: 820px) {
    .mot-entete { padding: 36px 16px 26px; }

    /* Le portrait passe AU-DESSUS du texte et cesse de suivre le
       defilement : colle en haut d'un petit ecran, il mangerait un tiers
       de la surface de lecture a chaque instant. */
    .mot-president { grid-template-columns: 1fr; gap: 26px; }
    .mot-aside { position: static; }
    /* Borne de largeur : etire sur toute la largeur, le portrait occuperait
       un ecran entier avant qu'on atteigne la premiere ligne du texte. */
    .mot-portrait { max-width: 190px; margin-inline: auto; }

    /* Le guillemet en filigrane debordait a gauche du texte : il rentre
       dans la colonne, ou la gouttiere ne fait plus que 13 px. */
    .mot-texte::before { inset-inline-start: -6px; top: -14px; font-size: 54px; }
    /* Entre 620 et 820 px, le portrait est deja passe au-dessus mais la
       colonne occupe toute la largeur : jusqu'a 80 caracteres par ligne,
       au-dela de quoi l'oeil perd le debut de la ligne suivante. La borne
       de 68ch la ramene dans la plage confortable, et centre le bloc. */
    .mot-texte { padding-top: 14px; max-width: 68ch; margin-inline: auto; }

}


/* Invite a imprimer le formulaire officiel, sur l'ecran de confirmation. */
.aff-recu-note { max-width: 56ch; margin: 18px auto 0; font-size: .9rem;
                 color: var(--muted); }


/* ---------- CHAMP MOT DE PASSE AVEC OEIL DE REVELATION ----------
   L'oeil est POSE SUR le champ, non accole a cote : accole, il volerait de
   la largeur a la saisie, deja etroite sur un telephone. */
.champ-mdp { position: relative; }
/* Reserve la place de l'oeil pour que le texte ne passe jamais dessous. */
.champ-mdp input { width: 100%; padding-inline-end: 46px; }
.mdp-oeil {
    position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; border: 0; background: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    /* Couleur d'accent plutot que gris : l'oeil doit se remarquer sans qu'on
       le cherche, c'est la seule commande posee a l'interieur d'un champ.

       Vert federal et non or : l'or ne donne que 2.88:1 sur fond blanc, sous
       le seuil de 3:1 en deca duquel un trace fin devient difficile a
       distinguer. Le vert atteint 9.04:1. */
    color: var(--green); border-radius: 8px; padding: 0;
    transition: color .15s, background .15s;
}
.mdp-oeil svg { width: 21px; height: 21px; display: block; }
.mdp-oeil:hover { color: var(--green-deep); background: var(--mist); }
/* Mot de passe visible : l'oeil barre passe au vert, signe que quelque chose
   est en cours et non au repos. */
.mdp-oeil[aria-pressed="true"] { color: var(--green-deep); }
/* Contour au clavier : sans lui, on ne sait plus ou l'on se trouve en
   parcourant le formulaire a la tabulation. */
.mdp-oeil:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }