/* ============================================================
   FRN — « LUXE INSTITUTIONNEL »
   Couche de présentation, posée après `frn.css`.

   Principe : **rien de ce que les travaux des 29-31 octobre ont
   établi n'est touché.** Le système de design — palette recalibrée
   (#0F8FD2 / #F0BC28 / #D8232A / #085E93 / #525A67 / #7A5F01),
   emblème v2, sceau du logo, devise, boutons contextuels, adresses,
   flux RSS, PWA — reste intact. La couche s'ajoute, elle ne remplace
   rien, et se retire en supprimant un lien sur les 20 pages.

   Ce qu'elle apporte, et pourquoi :

   · **Le bandeau** — le bandeau tricolore de 30 px, dégradé saturé,
     est l'élément le moins institutionnel de la page. Il devient un
     filet de 10 px, trame de tissu conservée, filet d'encre dessous.
   · **La navigation** — un double filet, encre puis or, comme le
     bandeau d'un registre officiel.
   · **Les boutons** — l'azur saturé quitte les grandes surfaces. Le
     bouton courant devient un cartouche à l'encre, en capitales
     espacées ; sur les fonds sombres il devient d'or, parce qu'un
     cartouche d'encre y disparaîtrait. L'azur ne reste que dans les
     liens et les états actifs.
   · **Les cartes** — un filet d'encre supérieur : chaque section
     devient une planche de présentation, non une grille de boîtes.
   · **Les en-têtes de section** — un filet de séparation.
   · **Les chiffres du héros** — un filet d'or.
   · **Le pied de page** — un filet d'or, et des titres de colonne
     homogénéisés : le premier était un `h3` là où les deux autres
     étaient des `h5`, et ils ne se présentaient pas de la même façon.
   · **Le bandeau défilant** — de l'azur à l'encre : le texte blanc
     gagne en contraste.

   Les pages anglaises portent la couche comme les françaises : le
   lien est posé par `build/ajouter_institution.py` sur les deux
   langues, sans régénérer les pages EN (elles sont tenues à la main
   dans le dépôt, et leur version du 31 octobre est plus récente que
   tout générateur disponible ici).
   ============================================================ */

/* ---------- 1. LE BANDEAU : un filet, pas une bande ---------- */
.ribbon-band{
  height:10px;
  background:linear-gradient(90deg,
    var(--blue) 0 25%,
    #E4DECD 25% 50%,
    var(--gold) 50% 75%,
    var(--red) 75% 100%);
  box-shadow:0 1px 0 rgba(7,11,20,.30);
}
.ribbon-band::after{
  background:
    repeating-linear-gradient(115deg, rgba(7,11,20,.10) 0 1px, transparent 1px 26px),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(7,11,20,.10));
}

/* ---------- 2. LA NAVIGATION : le double filet ---------- */
.nav{border-bottom:0}
.nav::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--ink); border-bottom:1px solid var(--gold);
}

/* ---------- 3. LES BOUTONS : l'encre, et l'or sur le sombre ---------- */
.btn{
  --bg-btn:var(--ink); --fg-btn:var(--paper);
  border-radius:1px; box-shadow:none;
  font-size:var(--s-1); font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:.95rem 1.7rem;
}
.btn:hover{
  box-shadow:0 10px 24px -12px rgba(7,11,20,.45);
}
.btn--blue{--bg-btn:var(--ink); --fg-btn:var(--paper); border-color:var(--ink)}

/* Les variantes sont réaffirmées après la règle du bouton courant :
   celle-ci, plus tard dans la cascade, l'emportait sur elles et
   transformait les boutons fantômes en cartouches pleins. Les règles
   de contexte de `frn.css` (fond sombre) sont plus spécifiques et
   restent donc applicables. */
.btn--red{--bg-btn:var(--red-btn)}
.btn--gold{--bg-btn:var(--gold); --fg-btn:var(--ink)}
.btn--ink{--bg-btn:var(--ink); --fg-btn:var(--paper)}
.btn--hi{--bg-btn:var(--gold); --fg-btn:var(--ink); border-color:var(--gold)}
.btn--primary{--bg-btn:var(--gold); --fg-btn:var(--ink); border-color:var(--gold)}
.btn--ghost{--bg-btn:transparent; --fg-btn:var(--fg); border-color:currentColor}
.btn--ondark{--bg-btn:transparent; --fg-btn:var(--paper); border-color:rgba(255,255,255,.4)}
/* Le bouton « Connexion » de l'en-tête : une presence lisible, distincte
   du cartouche plein « Rejoignez-nous ». Comme les autres variantes, elle
   est réaffirmée ici, apres la règle du bouton courant : celle-ci, plus
   tard dans la cascade, l'emporterait sur elle. */
.btn--login{--bg-btn:transparent; --fg-btn:var(--ink); border-color:var(--line)}
.btn--login:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}

/* Sur fond sombre, l'encre disparaîtrait : le cartouche devient d'or.
   Le héros, les sections encre et bleues, le bandeau d'appel. */
.hero .btn:not(.btn--ghost),
.sec--ink .btn:not(.btn--ghost),
.sec--blue .btn:not(.btn--ghost),
.ctaband .btn:not(.btn--ghost){
  --bg-btn:var(--gold); --fg-btn:var(--ink); border-color:var(--gold);
  box-shadow:0 10px 26px -14px rgba(240,188,40,.45);
}
.hero .btn:not(.btn--ghost):hover,
.sec--ink .btn:not(.btn--ghost):hover,
.sec--blue .btn:not(.btn--ghost):hover,
.ctaband .btn:not(.btn--ghost):hover{
  box-shadow:0 14px 30px -14px rgba(240,188,40,.6);
}
.hero .btn:not(.btn--ghost)::after,
.sec--ink .btn:not(.btn--ghost)::after,
.sec--blue .btn:not(.btn--ghost)::after,
.ctaband .btn:not(.btn--ghost)::after{background:var(--ink)}
.hero .btn:not(.btn--ghost):hover::after,
.sec--ink .btn:not(.btn--ghost):hover::after,
.sec--blue .btn:not(.btn--ghost):hover::after,
.ctaband .btn:not(.btn--ghost):hover::after{opacity:.08}

/* Entre 1 080 px (le menu se replie) et 1 440 px, la barre de navigation
   est à l'étroit : les capitales espacées élargissent les cartouches de
   l'en-tête et la rangée déborde. On resserre les deux boutons du
   bandeau — le cartel n'en reste pas moins lisible. */
@media (max-width:1400px){
  .nav__cta .btn--sm{letter-spacing:.04em; padding:.62rem .8rem}
}
/* Entre la plage où le menu se replie en tirette et le plein écran, le
   nom complet à côté du sigle fait double emploi avec l'emblème : on ne
   garde que « FRN ». Le sigle et le nom sont de toute façon écrits sur
   la page d'accueil et dans le pied de page.

   La plage est étendue à 1 599 px : au-delà, la rangée de boutons de
   l'en-tête — dont le bouton « Connexion » — n'a plus la place, et la
   barre deborderait de la fenetre. */
@media (max-width:1599px){
  .brand__txt span{display:none}
}

/* ---------- 4. LE BANDEAU DÉFILANT : l'encre, plus l'azur ---------- */
.ticker{background:var(--ink); color:rgba(255,255,255,.8)}
.ticker__track span{color:rgba(255,255,255,.8)}

/* ---------- 5. LES CARTES : un filet d'encre en tête ---------- */
.plate{border-top:2px solid var(--ink)}
.sec--ink .plate{border-top-color:var(--gold)}
.sec--blue .plate{border-top-color:var(--gold)}

/* ---------- 6. LES EN-TÊTES DE SECTION : un filet de séparation ---------- */
.sechead{border-bottom:1px solid var(--line); padding-bottom:1.5rem}
.sec--ink .sechead{border-bottom-color:var(--line-inv)}
.sec--blue .sechead{border-bottom-color:rgba(255,255,255,.18)}

/* ---------- 7. LES CHIFFRES DU HÉROS : un filet d'or ---------- */
.statstrip{border-top-color:rgba(240,188,40,.38)}
.statstrip b{letter-spacing:-.04em}

/* ---------- 8. LE PIED DE PAGE : le colophon ---------- */
.foot{border-top:3px solid var(--gold)}
.foot h3{
  font-family:var(--mono); font-size:var(--s-1); letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); margin-bottom:.9rem;
}
.social a:hover{background:var(--gold); border-color:var(--gold); color:var(--ink)}
/* ---------- 9. LE SOMMAIRE : L'ACCUEIL COMME PORTE D'ENTRÉE ---------- */
/* Le bandeau tricolore se prolonge en or sous le sommaire : les deux
   filets font corps, comme sur une couverture de registre officiel. */
.gateway{
  background:var(--paper);
  border-bottom:3px solid var(--gold);
  padding-block:1.1rem;
}
.gateway .wrap{
  display:flex; align-items:baseline; gap:1.4rem; flex-wrap:wrap;
}
.gateway__k{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-ink); flex:none;
}
.gateway__list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem .55rem;
}
.gateway__list a{
  display:inline-block; font-family:var(--mono); font-size:.64rem;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  color:var(--ink); border:1px solid var(--line); border-radius:999px;
  padding:.34rem .72rem; background:var(--white);
  transition:border-color .2s, color .2s, background .2s;
}
.gateway__list a:hover{
  border-color:var(--ink); background:var(--ink); color:var(--paper);
}
.gateway__list a:focus-visible{
  outline:2px solid var(--ink); outline-offset:2px;
}
@media (max-width:760px){
  .gateway .wrap{gap:.7rem}
  .gateway__list{gap:.4rem}
  .gateway__list a{font-size:.6rem; padding:.3rem .6rem}
}