/* ----------------------------------------------------------- polices
   Servies par le site lui-même, et non par Google Fonts. Charger une police
   depuis un serveur tiers transmet l'adresse IP de chaque visiteur à ce
   tiers — un tribunal allemand a condamné cette pratique en 2022, et la CNIL
   recommande l'auto-hébergement. Accessoirement, cela supprime une résolution
   DNS et une poignée de main TLS avant le premier affichage.
   Jeux réduits au latin et au latin-1 : 100 Ko pour les six graisses. */
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('polices/roboto-400.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('polices/roboto-700.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('polices/roboto-900.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('polices/lato-300.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('polices/lato-400.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('polices/lato-700.woff2') format('woff2'); }

/* =====================================================================
   FNMS — site vitrine
   Charte reprise de la plaquette : bleu #273B90, cyan #22A4DE, angles vifs.
   ===================================================================== */

:root {
  --bleu:      #273B90;
  --bleu-nuit: #10193F;
  --cyan:      #22A4DE;
  --cyan-texte:#1B6E96;   /* variante lisible du cyan sur fond blanc */
  --vert:      #77B04C;
  --ciel:      #DAE8F4;
  --ciel-pale: #9FD4F0;
  --pierre:    #F5F7FB;
  --ligne:     #E4E8F2;
  --bord:      #D8DCE8;
  --texte:     #10193F;
  --texte-doux:#5A6478;
  --texte-long:#384158;
  --gris:      #6B7488;
  --lavande:   #C7D0EC;

  --colonne: 1200px;
  --sect: 96px;
}

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

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

body {
  margin: 0;
  font-family: Lato, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--texte);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-family: Roboto, "Helvetica Neue", Arial, sans-serif; }
p, ul, ol, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; }

a { color: var(--bleu); text-decoration: none; }
a:hover { color: var(--cyan-texte); }
a:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

.saut-contenu {
  position: absolute; left: -9999px; top: 0;
  background: var(--bleu); color: #fff; padding: 14px 22px; z-index: 100;
}
.saut-contenu:focus { left: 0; color: #fff; }

.colonne { max-width: var(--colonne); margin: 0 auto; padding: 0 24px; }
.section { padding: var(--sect) 0; }

/* ------------------------------------------------------------- en-tête */
.barre-utilitaire { background: var(--bleu-nuit); color: var(--lavande); font-size: 13px; letter-spacing: .04em; }
.barre-utilitaire .colonne { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; padding-bottom: 10px; gap: 20px; }
.barre-utilitaire a { color: #fff; display: inline-flex; align-items: center; gap: 8px; }
.barre-utilitaire__liens { display: flex; gap: 28px; align-items: center; }

.entete { background: #fff; border-bottom: 1px solid var(--ligne); position: sticky; top: 0; z-index: 40; }
.entete .colonne { display: flex; justify-content: space-between; align-items: center; padding-top: 18px; padding-bottom: 18px; gap: 24px; }
.entete__logo { display: block; flex-shrink: 0; }
.entete__logo img { height: 58px; width: auto; display: block; }
.entete__droite { display: flex; align-items: center; gap: 30px; }
/* Le DOM place le bouton avant la navigation (ordre de tabulation) ; l'ordre
   visuel — navigation, puis « Adhérer », puis le bouton — est rétabli ici. */
.entete__droite .nav { order: 1; }
.entete__droite .bouton--compact { order: 2; }
.entete__droite .menu-bouton { order: 3; }

.nav { display: flex; gap: 26px; font-size: 15px; font-weight: 700; }
.nav a { color: var(--texte); padding-bottom: 3px; border-bottom: 3px solid transparent; }
.nav a[aria-current="page"] { color: var(--bleu); border-bottom-color: var(--cyan); }

.bouton { display: inline-block; font-family: Roboto, sans-serif; font-weight: 700; font-size: 16px; padding: 16px 30px; border: 1px solid transparent; }
.bouton--principal { background: var(--bleu); color: #fff; }
.bouton--principal:hover { background: var(--bleu-nuit); color: #fff; }
.bouton--cyan { background: var(--cyan); color: #fff; }
.bouton--cyan:hover { background: var(--cyan-texte); color: #fff; }
.bouton--fantome { border-color: rgba(255,255,255,.45); color: #fff; }
.bouton--fantome:hover { border-color: #fff; color: #fff; }
.bouton--compact { font-size: 15px; padding: 13px 24px; }
.bouton--secondaire { background: transparent; border-color: var(--bord); color: var(--texte); }
.bouton--secondaire:hover { border-color: var(--bleu); color: var(--bleu); }

.menu-bouton { display: none; width: 46px; height: 46px; border: 1px solid var(--bord); background: #fff; color: var(--bleu); align-items: center; justify-content: center;
  /* Supprime le délai de 300 ms que Safari iOS garde pour guetter un double
     appui, et empêche le zoom accidentel sur un double appui rapide. */
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; cursor: pointer; }

/* ---------------------------------------------------------------- hero */
.hero { background: var(--bleu); color: #fff; overflow: hidden; }
.hero__grille { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; padding-top: var(--sect); }
.hero__texte { max-width: 660px; padding-bottom: var(--sect); }
.hero__etoile { width: 440px; height: auto; margin-right: -40px; flex-shrink: 0; align-self: center; }
.hero h1 { font-size: clamp(34px, 4.3vw, 62px); line-height: 1.04; font-weight: 900; letter-spacing: -.015em; margin-bottom: 24px; }
.hero__chapo { font-size: 21px; line-height: 1.55; color: #D3DAF2; font-weight: 300; margin-bottom: 38px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }

.surtitre { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ciel-pale); }
.surtitre::before { content: ""; display: block; width: 46px; height: 4px; background: var(--cyan); flex-shrink: 0; }

.citation-bandeau { border-top: 1px solid rgba(255,255,255,.16); }
.citation-bandeau p { font-family: Roboto, sans-serif; font-size: 18px; font-style: italic; text-align: center; padding: 26px 0; }

/* ------------------------------------------------------------- titres */
.titre-section { font-size: clamp(28px, 3vw, 44px); font-weight: 900; color: var(--bleu); line-height: 1.1; }
.titre-section span { display: block; width: fit-content; }
.titre-section span:last-child:not(:only-child) { font-weight: 400; }
.filet { display: block; width: 64px; height: 4px; background: var(--cyan); margin-top: 22px; }
.etiquette { font-family: Roboto, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan-texte); }

/* ------------------------------------------------------------- grilles */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 88px; align-items: start; }
.quatuor { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

/* Grille de cartes : toutes de la même hauteur, quelle que soit la longueur
   du texte. « grid-auto-rows: 1fr » égalise aussi d'une rangée à l'autre, et
   « stretch » étire chaque carte sur toute la hauteur de sa rangée. */
.cartes { display: grid; gap: 24px; align-items: stretch; grid-auto-rows: 1fr; }
.cartes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cartes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cartes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cartes > * { height: 100%; }

.puces li { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.puces li::before { content: ""; display: block; width: 8px; height: 8px; background: var(--cyan); margin-top: 9px; flex-shrink: 0; }

.encadre-question { background: var(--pierre); border-left: 5px solid var(--bleu); padding: 46px 44px; }
.encadre-question p:last-child { font-family: Roboto, sans-serif; font-size: 30px; line-height: 1.3; font-weight: 700; color: var(--bleu); }

/* --------------------------------------------------------------- ADN */
.carte-adn { padding: 40px 38px; display: flex; flex-direction: column; }
.carte-adn--pleine { background: var(--bleu); color: #fff; }
.carte-adn--vide { background: #fff; border: 1px solid var(--bord); }
.carte-adn h3 { font-family: Roboto, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 20px; }
.carte-adn--pleine h3 { color: var(--ciel-pale); }
.carte-adn--vide h3 { color: var(--cyan-texte); }
.carte-adn ul li { display: flex; gap: 12px; margin-bottom: 10px; }
.carte-adn ul li::before { content: "—"; color: var(--cyan); }
.carte-adn__chute { font-style: italic; margin-top: auto; }

/* --------------------------------------------------- groupes de travail */
.bloc-sombre { background: var(--bleu-nuit); color: #fff; }
.bloc-sombre .titre-section span:first-child { color: #fff; }
.bloc-sombre .titre-section span:last-child:not(:only-child) { color: var(--ciel-pale); }

.carte-groupe { background: #fff; padding: 38px 36px; display: flex; flex-direction: column; border-top: 5px solid var(--cyan); }
.carte-groupe__numero { font-family: Roboto, sans-serif; font-size: 42px; font-weight: 900; color: var(--cyan-texte); line-height: 1; margin-bottom: 14px; }
.carte-groupe h3 { font-size: 26px; font-weight: 700; color: var(--bleu); margin-bottom: 6px; }
.carte-groupe__soustitre { font-family: Roboto, sans-serif; font-size: 19px; color: var(--texte-doux); margin-bottom: 20px; }
.carte-groupe p { color: var(--texte-doux); margin-bottom: 22px; }
/* Le lien se cale en bas : c'est ce qui aligne les appels à l'action d'une
   carte à l'autre, même quand les descriptions n'ont pas la même longueur. */
.carte-groupe .lien-fleche { margin-top: auto; align-self: flex-start; }
.lien-fleche { font-family: Roboto, sans-serif; font-size: 15px; font-weight: 700; color: var(--bleu); display: inline-flex; align-items: center; gap: 10px; }

/* ----------------------------------------------------------- actualités */
.carte-actu { display: flex; flex-direction: column; border: 1px solid var(--bord); background: #fff; }
.carte-actu__corps { flex: 1 1 auto; display: flex; flex-direction: column; }
.carte-actu__visuel { aspect-ratio: 16 / 9; background: var(--ciel); display: flex; align-items: center; justify-content: center; }
.carte-actu__visuel img { width: 100%; height: 100%; object-fit: cover; }
.carte-actu__corps { padding: 28px 26px; }
.carte-actu__meta { font-family: Roboto, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan-texte); margin-bottom: 12px; }
.carte-actu h3 { font-size: 21px; line-height: 1.32; font-weight: 700; color: var(--texte); margin-bottom: 12px; }
.carte-actu p { color: var(--texte-doux); font-size: 16px; }

/* --------------------------------------------------------------- fil */
.fil { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 14px; color: var(--gris); }
.fil a { color: inherit; }
.hero .fil, .hero .fil a { color: var(--ciel-pale); }

/* ------------------------------------------------------------- article */
.article { display: grid; grid-template-columns: minmax(0, 720px) minmax(0, 320px); gap: 60px; align-items: start; max-width: 1100px; margin: 0 auto; padding: 60px 24px 84px; }
.article__chapeau { max-width: 1100px; margin: 0 auto; padding: 56px 24px 44px; border-bottom: 1px solid var(--ligne); }
.article__chapeau > div { max-width: 720px; }
.article h1 { font-size: clamp(30px, 3.4vw, 46px); font-weight: 900; line-height: 1.14; letter-spacing: -.012em; margin-bottom: 24px; }
.article__intro { font-size: 21px; line-height: 1.6; color: var(--texte-doux); font-weight: 300; }
.badge { background: var(--cyan); color: #fff; font-family: Roboto, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: 7px 14px; }

.corps { font-size: 18px; line-height: 1.8; color: var(--texte-long); }
.corps > * + * { margin-top: 22px; }
.bloc-h2 { font-size: 30px; font-weight: 900; color: var(--bleu); line-height: 1.2; margin-top: 40px !important; }
.bloc-citation { border-left: 5px solid var(--cyan); padding: 6px 0 6px 30px; }
.bloc-citation p { font-family: Roboto, sans-serif; font-size: 24px; line-height: 1.5; font-weight: 700; font-style: italic; color: var(--bleu); }
.bloc-liste li { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.bloc-liste li::before { content: ""; display: block; width: 8px; height: 8px; background: var(--cyan); margin-top: 12px; flex-shrink: 0; }
.bloc-encadre { background: var(--pierre); border-top: 4px solid var(--bleu); padding: 38px 40px; }
.bloc-encadre h3 { font-size: 22px; font-weight: 700; color: var(--bleu); margin-bottom: 18px; }
.bloc-encadre p { font-size: 17px; color: var(--texte-doux); }
/* Une photo en pied de page d'article ne doit pas occuper un écran entier.
   Un portrait de 1500×2000 affiché sur 760 px de large ferait un kilomètre de
   haut : on plafonne la hauteur et on recadre, plutôt que de laisser le
   lecteur défiler dans un plafond de salle. */
.bloc-image img { width: 100%; max-height: 520px; object-fit: cover; object-position: center 62%; display: block; }

/* Galerie : deux à quatre photos qui se suivent forment une rangée. C'est
   le seul rendu correct pour des portraits — seule, une photo verticale
   occupe la hauteur d'un écran entier. */
.galerie { display: grid; gap: 14px; margin: 34px 0; }
.galerie--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.galerie--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.galerie__item { margin: 0; }
.galerie__item img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 60%; display: block; }
.galerie__item figcaption { font-size: 14px; color: var(--gris); margin-top: 8px; }
.bloc-image figcaption { font-size: 15px; color: var(--gris); margin-top: 10px; }
.bloc-document { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--bord); padding: 22px 24px; }
.bloc-document__titre { font-family: Roboto, sans-serif; font-weight: 700; font-size: 18px; color: var(--bleu); }
.bloc-document__detail { font-size: 15px; color: var(--gris); }
.bloc-video { position: relative; aspect-ratio: 16 / 9; }
.bloc-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.rail { display: flex; flex-direction: column; gap: 24px; }
.rail__carte { border: 1px solid var(--bord); padding: 30px 28px; }
.rail__carte--bleu { background: var(--bleu); color: #fff; border-color: var(--bleu); }
.rail__carte h2 { font-family: Roboto, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan-texte); margin-bottom: 18px; }

/* --------------------------------------------------------- appel final */
.appel { background: var(--bleu-nuit); color: #fff; }
.appel .colonne { display: flex; justify-content: space-between; align-items: center; gap: 60px; padding-top: 62px; padding-bottom: 62px; }
.appel h2 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 900; line-height: 1.2; margin-bottom: 10px; }
.appel p { color: var(--lavande); }
.appel .bouton { flex-shrink: 0; white-space: nowrap; }

/* ------------------------------------------------------------ objectif */
.bandeau-objectif { background: var(--cyan); }
.bandeau-objectif .colonne { display: flex; align-items: center; gap: 20px; padding-top: 30px; padding-bottom: 30px; }
.bandeau-objectif .etiquette { color: #fff; flex-shrink: 0; }
.bandeau-objectif p { font-family: Roboto, sans-serif; font-size: 22px; font-weight: 700; color: #fff; }

/* ----------------------------------------------------------- pied de page */
.pied { background: var(--bleu); color: #fff; }
.pied__grille { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 48px; padding: 72px 0 52px; border-bottom: 1px solid rgba(255,255,255,.18); }
.pied h2 { font-family: Roboto, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ciel-pale); margin-bottom: 18px; }
.pied a { color: #fff; }
.pied address { font-style: normal; line-height: 1.55; }
.pied li { margin-bottom: 12px; }
.pied__marque { font-family: Roboto, sans-serif; font-size: 30px; font-weight: 900; letter-spacing: .02em; margin-bottom: 6px; }
.pied__baseline { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ciel-pale); margin-bottom: 22px; }
.pied__legal { display: flex; justify-content: space-between; align-items: center; padding: 26px 0 40px; font-size: 14px; color: var(--lavande); gap: 24px; flex-wrap: wrap; }
.pied__legal a { color: var(--lavande); }
.pied__legal ul { display: flex; gap: 26px; }
.pied__legal li { margin: 0; }

/* ------------------------------------------------------------ 404 / 500 */
.page-erreur { text-align: center; padding: 120px 24px; }
.page-erreur h1 { font-size: 44px; font-weight: 900; color: var(--bleu); margin-bottom: 16px; }
.page-erreur p { color: var(--texte-doux); margin-bottom: 32px; }

/* ============================== responsive ============================== */
@media (max-width: 1080px) {
  :root { --sect: 68px; }
  .duo, .article { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .quatuor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cartes--3, .cartes--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__etoile { display: none; }
  .nav { display: none; }
  .menu-bouton { display: flex; }
  .pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }

  /* Panneau de navigation déroulant. Il se cale sous l'en-tête, qui est en
     position sticky et sert donc de repère au positionnement absolu. */
  .nav--ouverte {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--ligne);
    box-shadow: 0 20px 38px rgba(16, 26, 64, .16);
    padding: 4px 24px 18px;
    /* Sur iPhone, 100vh vaut la hauteur écran BARRE D'ADRESSE MASQUÉE : le
       panneau dépasse alors le visible et ses derniers liens deviennent
       inatteignables. dvh suit la hauteur réellement affichée ; vh reste en
       repli pour les navigateurs qui l'ignorent. */
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  @supports (height: 100dvh) {
    .nav--ouverte { max-height: calc(100dvh - 100%); }
  }
  .nav--ouverte a {
    padding: 16px 8px;
    border-bottom: 1px solid var(--ligne);
    border-left: 3px solid transparent;
  }
  .nav--ouverte a:last-child { border-bottom: 0; }
  .nav--ouverte a[aria-current="page"] {
    border-bottom-color: var(--ligne);
    border-left-color: var(--cyan);
    background: #F7F9FE;
  }
  .menu-bouton[aria-expanded="true"] { background: var(--bleu); color: #fff; border-color: var(--bleu); }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .entete .colonne { gap: 10px; }
  /* Le nom complet de la fédération occupe deux lignes sur un téléphone et
     répète ce que dit déjà le logo, juste en dessous. */
  .barre-utilitaire .colonne > span { display: none; }
  .barre-utilitaire .colonne { justify-content: flex-end; }
  .entete__droite { gap: 10px; }
  .entete__logo img { height: 42px; }
  .bouton--compact { padding: 13px 15px; font-size: 14px; }
  .trio, .quatuor, .pied__grille { grid-template-columns: minmax(0, 1fr); }
  .cartes--2, .cartes--3, .cartes--4 { grid-template-columns: minmax(0, 1fr); }
  /* Une seule colonne : plus rien à égaliser, chaque carte reprend sa hauteur. */
  .cartes { grid-auto-rows: auto; }
  .appel .colonne { flex-direction: column; align-items: flex-start; gap: 26px; }
  .barre-utilitaire__liens span { display: none; }
  .bloc-image img { max-height: 340px; }
  /* Sur téléphone, trois portraits empilés feraient trois écrans. On les fait
     défiler horizontalement, avec calage : la rangée reste une rangée. */
  .galerie { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
             -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
  .galerie__item { flex: 0 0 74%; scroll-snap-align: center; }
  .encadre-question { padding: 30px 26px; }
  .bloc-encadre { padding: 26px 24px; }
  .pied__legal { flex-direction: column; align-items: flex-start; }
  .pied__legal ul { flex-direction: column; gap: 12px; }

  /* Cibles tactiles : un lien de 16 px de haut se rate une fois sur deux au
     pouce. On les étoffe sans changer la mise en page perçue. */
  .pied a, .pied__legal a { display: inline-block; padding: 7px 0; }
  .pied li { margin-bottom: 4px; }
  .pied__legal ul { gap: 2px; }
  .fil a, .fil > span { display: inline-block; padding: 5px 0; }
  .barre-utilitaire a { padding: 7px 0; }
}

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

/* ------------------------------------------------------------ contact */
.contact-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.contact-direct { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--ligne); }
.contact-direct h2 { font-size: 22px; font-weight: 700; color: var(--bleu); margin-bottom: 16px; }
.contact-direct p { margin-bottom: 10px; }
.contact-adresse address { font-style: normal; line-height: 1.6; color: var(--texte-doux); }

.contact-formulaire { background: var(--pierre); border: 1px solid var(--ligne); padding: 42px 40px; }
.contact-formulaire h2 { font-size: 26px; font-weight: 700; color: var(--bleu); margin-bottom: 28px; }
.contact-formulaire .champ { margin-bottom: 22px; }
.contact-formulaire label { display: block; font-family: Roboto, sans-serif; font-size: 15px; font-weight: 700; color: var(--texte); margin-bottom: 8px; }
.contact-formulaire input[type="text"],
.contact-formulaire input[type="email"],
.contact-formulaire textarea {
  width: 100%; font-family: Lato, sans-serif; font-size: 16px; color: var(--texte);
  background: #fff; border: 1px solid var(--bord); padding: 13px 14px;
}
.contact-formulaire textarea { resize: vertical; min-height: 150px; line-height: 1.55; }
.contact-formulaire input:focus-visible,
.contact-formulaire textarea:focus-visible { outline: 3px solid var(--cyan); outline-offset: 1px; border-color: var(--cyan); }
.contact-formulaire [aria-invalid="true"] { border-color: #B3261E; }
.contact-formulaire .requis { color: #B3261E; }
.contact-formulaire .erreur { color: #B3261E; font-size: 14px; margin-top: 7px; font-weight: 700; }
.contact-formulaire .aide { font-size: 14px; color: var(--gris); font-weight: 400; }
.contact-formulaire .case { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-family: Lato, sans-serif; font-size: 15px; line-height: 1.5; }
.contact-formulaire .case input { margin-top: 4px; flex-shrink: 0; width: 18px; height: 18px; }
.contact-formulaire .case .aide { display: block; margin-top: 5px; }
.contact-formulaire button { width: 100%; justify-content: center; cursor: pointer; }

/* Piège à robots : hors écran, hors tabulation, hors lecteurs d'écran. */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.msg-succes { background: #EAF6EC; border-left: 5px solid var(--vert); padding: 30px 28px; }
.msg-succes h2 { color: var(--bleu); margin-bottom: 12px; }
.msg-erreur { background: #FDECEA; border-left: 5px solid #B3261E; padding: 16px 18px; margin-bottom: 26px; font-size: 15px; }

@media (max-width: 900px) {
  .contact-grille { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .contact-formulaire { padding: 32px 24px; }
}

/* --------------------------------------------------------- consentement
   Bandeau d'information sur les cookies. Deux règles de fond :

   - « Tout accepter » et « Tout refuser » partagent la même classe, donc le
     même poids visuel. Un refus relégué en petit lien gris est un motif de
     sanction en soi, indépendamment des traceurs réellement déposés.
   - Le bandeau ne masque pas la page et ne bloque pas la lecture : c'est une
     information, pas un péage. Il est simplement posé en bas de l'écran.

   L'attribut « hidden » du HTML est respecté explicitement : le bandeau est
   rendu dans toutes les pages (donc dans le cache) et c'est le script qui
   décide de l'afficher, après avoir lu le choix déjà enregistré. */
.consentement {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  background: var(--bleu-nuit); color: #fff;
  border-top: 4px solid var(--cyan);
  box-shadow: 0 -14px 40px rgba(16, 25, 63, .28);
  max-height: 88vh; overflow-y: auto;
}
.consentement[hidden] { display: none; }

.consentement__boite {
  max-width: var(--colonne); margin: 0 auto; padding: 26px 24px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 40px; align-items: center;
}
.consentement__titre {
  grid-column: 1; margin: 0 0 6px;
  font-family: Roboto, sans-serif; font-size: 19px; font-weight: 900;
  color: #fff; letter-spacing: .2px;
}
/* Le titre reçoit le focus à l'ouverture pour que le dialogue soit annoncé,
   mais il n'est pas actionnable : dessiner un cadre autour ferait croire à un
   contrôle. Les vrais points d'entrée au clavier — les boutons — gardent, eux,
   un contour bien visible. (Recommandation ARIA APG, motif « dialog ».) */
.consentement__titre:focus { outline: none; }
.consentement__texte { grid-column: 1; grid-row: 2; }
.consentement__texte p { margin: 0 0 8px; font-size: 15px; line-height: 1.55; color: var(--lavande); }
.consentement__texte p:last-child { margin-bottom: 0; }
.consentement__texte strong { color: #fff; }
.consentement__texte a { color: var(--ciel-pale); text-decoration: underline; }
.consentement__texte a:hover { color: #fff; }

.consentement__actions {
  grid-column: 2; grid-row: 1 / span 2;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
.consentement .bouton { cursor: pointer; white-space: nowrap; font-size: 15px; padding: 14px 26px; }
.consentement .bouton--principal { background: #fff; color: var(--bleu-nuit); }
.consentement .bouton--principal:hover { background: var(--ciel); color: var(--bleu-nuit); }
.consentement .bouton--secondaire { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.consentement .bouton--secondaire:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.08); }
.consentement .bouton:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

/* Panneau de réglage fin, replié par défaut. */
.consentement__panneau {
  grid-column: 1 / -1; grid-row: 3;
  margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.18);
}
.consentement__panneau[hidden] { display: none; }
.consentement__categorie { margin-bottom: 22px; }
.consentement__categorie p { margin: 6px 0 0 30px; font-size: 14px; line-height: 1.5; color: var(--lavande); }
.consentement__depots { color: var(--ciel-pale) !important; font-style: italic; }
.consentement__bascule { display: flex; align-items: center; gap: 12px; }
.consentement__bascule input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--cyan); cursor: pointer; }
.consentement__bascule label { font-family: Roboto, sans-serif; font-size: 16px; color: #fff; cursor: pointer; }
.consentement__panneau .consentement__actions { grid-column: 1; grid-row: auto; margin-top: 4px; }

/* Contenu tiers en attente d'accord : un encart explicatif à la place de
   l'iframe, plutôt qu'un trou dans la page. */
.consentement-cadre__attente {
  background: var(--pierre); border: 1px dashed var(--bord);
  padding: 30px 26px; text-align: center;
}
.consentement-cadre__attente p { margin: 0 0 12px; font-size: 15px; color: var(--texte-long); }
.consentement-cadre__attente .bouton { cursor: pointer; }

/* Lien de réouverture du pied de page : révélé par le script seulement. */
.lien-nu {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: inherit; color: inherit; text-decoration: underline;
}
.lien-nu[hidden] { display: none; }

@media (max-width: 860px) {
  .consentement__boite { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 20px 18px; }
  .consentement__titre, .consentement__texte, .consentement__actions { grid-column: 1; }
  .consentement__titre { font-size: 18px; }
  .consentement__texte p { font-size: 14.5px; line-height: 1.5; }
  .consentement__actions { grid-row: auto; margin-top: 14px; gap: 10px; }
  .consentement__panneau { grid-row: auto; }
  .consentement .bouton { text-align: center; padding: 14px 12px; flex: 1 1 100%; }
  /* Accepter et refuser côte à côte, à largeur strictement égale : le choix
     reste symétrique, et le bandeau cesse d'avaler la moitié de l'écran. */
  .consentement__actions--principales .bouton--principal { flex: 1 1 0; min-width: 0; }
  .consentement__actions--principales .bouton--secondaire { flex: 1 1 100%; }
}


/* ====================================================================
   Reliefs sur les aplats de couleur

   Les grands blocs unis paraissent plats et un peu tristes. Plutôt que
   d'ajouter un motif, on ajoute de la LUMIÈRE : une lueur très douce en
   diagonale, qui donne du volume sans rien raconter, et un trait d'onde
   au bas des blocs, qui évoque le mouvement — c'est le sujet même de la
   fédération — sans jamais devenir un décor.

   Deux règles de discipline :
     - tout reste sous 14 % d'opacité, donc perceptible sans être vu ;
     - tout est en pseudo-élément et « pointer-events: none » : rien de
       ce qui suit ne peut intercepter un clic ni gêner un lecteur d'écran.
   ==================================================================== */

.hero, .bloc-sombre, .appel, .bandeau-objectif { position: relative; overflow: hidden; }

/* Le contenu repasse au-dessus des reliefs. */
.hero > .colonne, .hero > .citation-bandeau,
.bloc-sombre > .colonne, .appel > .colonne, .bandeau-objectif > .colonne { position: relative; z-index: 1; }

/* Lueur : deux dégradés radiaux hors cadre, l'un blanc en haut à droite,
   l'autre cyan en bas à gauche. C'est ce qui creuse l'aplat. */
.hero::before, .bloc-sombre::before, .appel::before, .bandeau-objectif::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(120% 96% at 86% -24%, rgba(255,255,255,.13), transparent 62%),
    radial-gradient(90% 80% at -12% 116%, rgba(34,164,222,.20), transparent 60%);
}
.bloc-sombre::before {
  background:
    radial-gradient(110% 90% at 92% -18%, rgba(34,164,222,.16), transparent 60%),
    radial-gradient(90% 80% at -8% 112%, rgba(255,255,255,.07), transparent 62%);
}
.appel::before {
  background:
    radial-gradient(80% 220% at 78% 50%, rgba(34,164,222,.18), transparent 58%),
    radial-gradient(70% 200% at 2% 50%, rgba(255,255,255,.06), transparent 60%);
}
/* Le bandeau cyan est déjà clair : un simple voile oblique suffit. */
.bandeau-objectif::before {
  background: linear-gradient(104deg, rgba(255,255,255,.14) 0 34%, transparent 34% 66%, rgba(16,25,63,.10) 66%);
}

/* Onde : un trait, trois passages, au bas du bloc. */
.hero::after, .bloc-sombre::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 55%; min-height: 120px; max-height: 230px;
  pointer-events: none; z-index: 0;
  /* L'onde s'efface vers le haut : sur un en-tête court, sans ce fondu, les
     courbes viennent traverser le sous-titre et l'ensemble devient bruyant. */
  -webkit-mask-image: linear-gradient(to top, #000 34%, rgba(0,0,0,.3) 72%, transparent);
          mask-image: linear-gradient(to top, #000 34%, rgba(0,0,0,.3) 72%, transparent);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 260' preserveAspectRatio='none'%3E%3Cpath d='M0,150 C240,58 480,242 720,150 S1200,58 1440,150' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3Cpath d='M0,196 C260,104 520,288 780,196 S1220,104 1440,196' fill='none' stroke='%23ffffff' stroke-width='1.5' opacity='.55'/%3E%3Cpath d='M0,242 C280,150 560,334 840,242 S1240,150 1440,242' fill='none' stroke='%23ffffff' stroke-width='1' opacity='.35'/%3E%3C/svg%3E") no-repeat center bottom;
  background-size: 100% 100%;
  opacity: .12;
}
.bloc-sombre::after { opacity: .10; transform: scaleX(-1); }

/* Sur un petit écran, la lueur suffit : l'onde y serait comprimée au point
   de ressembler à des rayures. */
@media (max-width: 680px) {
  .hero::after, .bloc-sombre::after { display: none; }
}

@media (prefers-contrast: more) {
  .hero::before, .hero::after,
  .bloc-sombre::before, .bloc-sombre::after,
  .appel::before, .bandeau-objectif::before { display: none; }
}

/* ------------------------------------------------------- annonce d'accueil

   Une fenêtre qui s'ouvre sur une information ponctuelle : assemblée
   générale, consultation, échéance. Trois partis pris.

   - Elle est rendue dans le HTML de la page, donc dans le cache, et arrive
     avec l'attribut « hidden ». C'est le script qui décide de l'afficher,
     après avoir vérifié les dates et ce que le visiteur a déjà fermé. Sans
     JavaScript, elle ne s'affiche jamais : une fenêtre qu'on ne pourrait
     pas refermer serait pire que pas de fenêtre du tout.

   - Elle se ferme de quatre façons : la croix, « Plus tard », la touche
     Échap, et un clic sur le voile. Une annonce n'est pas un péage.

   - Sur petit écran, elle cesse d'être une fenêtre centrée pour devenir une
     feuille qui monte du bas : c'est le geste attendu sur un téléphone, et
     cela évite qu'une image en portrait remplisse l'écran. */
.annonce {
  position: fixed; inset: 0; z-index: 950;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.annonce[hidden] { display: none; }
body.annonce-ouverte { overflow: hidden; }

.annonce__voile {
  position: absolute; inset: 0;
  background: rgba(16, 25, 63, .62);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  cursor: pointer;
}

.annonce__boite {
  position: relative; z-index: 1;
  width: 100%; max-width: 880px; max-height: calc(100vh - 48px);
  overflow-y: auto; overscroll-behavior: contain;
  background: #fff; color: var(--texte);
  border-top: 4px solid var(--cyan);
  box-shadow: 0 30px 80px rgba(16, 25, 63, .42);
  display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  animation: annonce-entree .28s ease-out both;
}
/* Sans image, la fenêtre n'a plus de raison d'être large : une colonne de
   texte de 880 px se lit mal, et une boîte à moitié vide se voit. */
.annonce__boite--sans-image { grid-template-columns: minmax(0, 1fr); max-width: 620px; }

/* Mode « affiche » : le visuel EST le message, il n'est donc ni recadré ni
   mis de côté. La fenêtre prend la largeur de l'affiche, et la hauteur de
   l'image est bornée pour que le bouton reste visible sans faire défiler —
   une affiche qu'il faut faire défiler pour trouver le bouton d'inscription
   ne remplit pas son office. */
.annonce__boite--affiche {
  grid-template-columns: minmax(0, 1fr);
  /* La fenêtre se règle sur l'affiche, et non l'inverse : sans cela, une
     affiche bornée en hauteur laisse deux bandes vides sur les côtés. */
  width: fit-content;
  max-width: min(560px, 92vw);
  overflow: hidden;
}
.annonce__affiche {
  background: var(--pierre);
  display: flex; align-items: center; justify-content: center;
  min-height: 0;
}
.annonce__affiche img {
  display: block; width: auto; height: auto;
  max-width: 100%;
  max-height: calc(100vh - 190px);
  object-fit: contain;
}
.annonce__boite--affiche .annonce__corps { padding: 18px 22px 20px; }
.annonce__boite--affiche .annonce__actions { margin-top: 0; }
/* Sans bouton, il ne reste que « Plus tard » : on le centre plutôt que de
   le laisser seul dans un coin. */
.annonce__boite--affiche .annonce__actions { justify-content: center; }
.annonce__boite--affiche .annonce__actions .bouton { flex: 1 1 auto; text-align: center; }

@keyframes annonce-entree {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.annonce__image { background: var(--pierre); overflow: hidden; }
.annonce__image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.annonce__corps { padding: 40px 44px 36px; min-width: 0; }

.annonce__surtitre {
  font-family: Roboto, sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cyan-texte);
  margin-bottom: 12px;
}
.annonce__titre {
  font-size: 30px; font-weight: 900; line-height: 1.15;
  letter-spacing: -.01em; color: var(--bleu-nuit);
}
.annonce__titre:focus { outline: none; }

.annonce__quand {
  display: flex; align-items: center; gap: 9px;
  margin-top: 16px; padding: 10px 14px;
  background: var(--pierre); border-left: 3px solid var(--cyan);
  font-family: Roboto, sans-serif; font-size: 15px; font-weight: 700;
  color: var(--bleu);
}
.annonce__quand svg { flex-shrink: 0; color: var(--cyan-texte); }

.annonce__texte { margin-top: 18px; }
.annonce__texte p { font-size: 16.5px; line-height: 1.6; color: var(--texte-long); margin-bottom: 10px; }
.annonce__texte p:last-child { margin-bottom: 0; }

.annonce__actions {
  margin-top: 26px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.annonce__actions .bouton { cursor: pointer; }
.annonce__plus-tard {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: Lato, "Helvetica Neue", Arial, sans-serif; font-size: 15.5px;
  color: var(--texte-doux); text-decoration: underline; text-underline-offset: 3px;
}
.annonce__plus-tard:hover { color: var(--bleu); }

.annonce__fermer {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border: 0; background: rgba(255, 255, 255, .92); color: var(--texte-doux);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.annonce__fermer:hover { background: var(--bleu-nuit); color: #fff; }
.annonce__fermer:focus-visible,
.annonce__plus-tard:focus-visible,
.annonce .bouton:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

@media (max-width: 760px) {
  .annonce { padding: 0; align-items: flex-end; }
  .annonce__boite--affiche { max-width: none; }
  .annonce__affiche img { max-height: calc(92vh - 150px); }
  .annonce__boite {
    grid-template-columns: minmax(0, 1fr);
    max-width: none; max-height: 92vh;
    animation-name: annonce-montee;
  }
  .annonce__image { max-height: 30vh; }
  .annonce__corps { padding: 26px 22px 28px; }
  .annonce__titre { font-size: 24px; }
  .annonce__actions { gap: 14px; }
  .annonce__actions .bouton { flex: 1 1 100%; text-align: center; }
}

@keyframes annonce-montee {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

/* Une fenêtre qui surgit en glissant est déjà une gêne pour qui souffre du
   mouvement : on la pose, sans transition. */
@media (prefers-reduced-motion: reduce) {
  .annonce__boite { animation: none; }
}

@media (prefers-contrast: more) {
  .annonce__voile { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(16, 25, 63, .8); }
  .annonce__boite { border: 2px solid var(--bleu-nuit); border-top-width: 4px; }
}

/* ---------------------------------------------------- gouvernance (CA)

   Une grille de portraits. Trois contraintes ont dessiné ce bloc :

   - Les fiches ont des hauteurs très inégales : certaines portent quatre
     mandats, d'autres rien. Les cartes s'alignent donc PAR LE HAUT, et non
     par le bas ni en hauteur égalisée — ce qui donnerait des blocs vides.

   - Toutes les photos n'ont pas le même format (des portraits, un carré).
     Un cadre de ratio fixe les uniformise, avec un cadrage haut : sur une
     photo en pied, c'est le visage qu'il faut garder.

   - Une personne sans photo reçoit une silhouette dessinée, pas une case
     vide ni un trou dans la grille : la rangée reste régulière. */
/* La colonne de lecture d'une page fait 880 px : c'est la bonne largeur
   pour du texte, et une largeur étriquée pour une grille de portraits. Le
   bloc s'affranchit donc de sa colonne et reprend toute la largeur utile,
   sans jamais dépasser la fenêtre. */
.gouv {
  margin-top: 12px;
  width: min(calc(var(--colonne) - 48px), calc(100vw - 48px));
  margin-left: 50%;
  transform: translateX(-50%);
}
.gouv__titre {
  font-size: 30px; font-weight: 900; line-height: 1.2;
  letter-spacing: -.01em; color: var(--bleu-nuit); margin-bottom: 12px;
}
.gouv__chapo { font-size: 17.5px; line-height: 1.6; color: var(--texte-long); max-width: 720px; }

.gouv__section { margin-top: 44px; }
.gouv__section:first-of-type { margin-top: 32px; }
.gouv__section-titre {
  font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cyan-texte); padding-bottom: 12px; margin-bottom: 28px;
  border-bottom: 1px solid var(--ligne);
}

.gouv__grille {
  display: grid; gap: 36px 28px; align-items: start;
  grid-template-columns: repeat(var(--gouv-colonnes, 3), minmax(0, 1fr));
}
.gouv__grille--2 { --gouv-colonnes: 2; }
.gouv__grille--3 { --gouv-colonnes: 3; }
.gouv__grille--4 { --gouv-colonnes: 4; }

.gouv-membre { min-width: 0; }
.gouv-membre__photo {
  aspect-ratio: 3 / 4; background: var(--pierre); overflow: hidden; margin-bottom: 14px;
}
.gouv-membre__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block;
}
.gouv-membre__silhouette { width: 100%; height: 100%; display: block; }

.gouv-membre__nom {
  font-family: Roboto, sans-serif; font-size: 17px; font-weight: 700;
  line-height: 1.25; color: var(--bleu-nuit);
}
.gouv-membre__fonction {
  font-family: Roboto, sans-serif; font-size: 14px; font-weight: 700;
  line-height: 1.35; color: var(--cyan-texte); margin-top: 3px;
}
.gouv-membre__structure {
  font-size: 14.5px; line-height: 1.45; color: var(--texte-doux); margin-top: 7px;
}
.gouv-membre__mandats {
  margin-top: 10px; padding-left: 15px; list-style: disc;
  font-size: 13.5px; line-height: 1.45; color: var(--gris);
}
.gouv-membre__mandats li { margin-bottom: 3px; }
.gouv-membre__mandats li::marker { color: var(--ciel-pale); }

/* La co-présidence, seule section à deux colonnes, mérite d'être lue en
   grand : on élargit ses fiches plutôt que d'étirer deux photos sur toute
   la largeur de la page. */
.gouv__grille--2 { max-width: 640px; gap: 40px; }
.gouv__grille--2 .gouv-membre__nom { font-size: 20px; }
.gouv__grille--2 .gouv-membre__fonction { font-size: 15px; }

@media (max-width: 980px) {
  .gouv__grille--4 { --gouv-colonnes: 3; }
}
@media (max-width: 760px) {
  .gouv__grille { gap: 28px 20px; }
  .gouv__grille--3, .gouv__grille--4 { --gouv-colonnes: 2; }
  .gouv__titre { font-size: 24px; }
  .gouv-membre__nom { font-size: 15.5px; }
  .gouv__grille--2 .gouv-membre__nom { font-size: 17px; }
  .gouv-membre__fonction { font-size: 13px; }
  .gouv-membre__structure { font-size: 13.5px; }
}
@media (max-width: 760px) {
  .gouv__grille--2 { max-width: none; gap: 22px; }
}