/* =====================================================================
   ESS — Layout: header/nav, footer, footer accessibility controls
   ===================================================================== */

/* ---- Accessibility controls (relocated to footer bottom bar) -------- */
.a11y-group { display: flex; align-items: center; gap: var(--sp-2); }
.a11y-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: var(--r-sm); font-weight: var(--fw-medium);
  color: #93b0c8;
}
.a11y-btn:hover { color: #fff; }
.a11y-btn.is-active { background: rgba(255,255,255,.16); color: #fff; }
.a11y-btn .ico { width: 15px; height: 15px; }
.footer-a11y { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-xs); }
.footer-a11y__label { color: #93b0c8; text-transform: uppercase; letter-spacing: .08em; font-weight: var(--fw-semi); }
.footer-a11y .a11y-group + .a11y-btn { border-left: 1px solid rgba(255,255,255,.18); padding-left: var(--sp-3); }

/* ---- Header -------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-line);
}
.header__inner {
  display: flex; align-items: center; gap: var(--sp-5);
  min-height: var(--header-h);
}
.brand { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.brand img { height: 46px; width: auto; }
.brand__txt { display: none; }

/* Primary nav */
.main-nav { margin-inline: auto; }
.main-nav ul { display: flex; align-items: center; gap: var(--sp-2); }
.main-nav a {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 0.6em 0.85em; border-radius: var(--r-md);
  color: var(--c-ink); font-weight: var(--fw-medium); font-size: var(--fs-sm);
}
.main-nav a:hover { background: var(--c-mist); color: var(--c-blue); }
.main-nav a[aria-current="page"] { color: var(--c-blue); font-weight: var(--fw-semi); }
.main-nav a[aria-current="page"]::after {
  content:""; display:block;
}
.main-nav .has-caret .ico { width: 14px; height: 14px; opacity: .7; }

/* Dropdown */
.nav-item { position: relative; }
.dropdown {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 240px; background: #fff;
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  box-shadow: var(--sh-md); padding: var(--sp-2);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: all var(--dur-fast) var(--ease); z-index: 20;
}
/* Invisible bridge over the 6px seam so the menu stays open while the
   pointer travels from the trigger down into the panel. */
.dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { display: block; padding: 0.6em 0.8em; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--c-slate); }
.dropdown a:hover { background: var(--c-mist); color: var(--c-blue); }

/* Header actions */
.header__actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.icon-btn {
  width: 42px; height: 42px; border-radius: var(--r-pill);
  display: grid; place-items: center; color: var(--c-ink);
  border: 1px solid var(--c-line);
}
.icon-btn:hover { border-color: var(--c-blue); color: var(--c-blue); background: var(--c-mist); }
.icon-btn .ico { width: 20px; height: 20px; }

.lang-toggle {
  display: inline-flex; border: 1px solid var(--c-line); border-radius: var(--r-pill); overflow: hidden;
}
.lang-toggle button { padding: 0.4em 0.75em; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--c-slate); }
.lang-toggle button.is-active { background: var(--c-blue); color: #fff; }

.burger { display: none; }

@media (max-width: 1040px) {
  .main-nav, .header__actions .btn, .header__actions .search-open { display: none; }
  .burger { display: grid; }
}

/* ---- Mobile menu (off-canvas) -------------------------------------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 150;
  visibility: hidden; pointer-events: none;
}
.mobile-menu.is-open { visibility: visible; pointer-events: auto; }
.mobile-menu__scrim {
  position: absolute; inset: 0; background: rgba(0,51,95,0.5);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.mobile-menu.is-open .mobile-menu__scrim { opacity: 1; }
.mobile-menu__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(88vw, 380px);
  background: #fff; box-shadow: var(--sh-lg);
  transform: translateX(100%); transition: transform var(--dur) var(--ease);
  display: flex; flex-direction: column; padding: var(--sp-5); overflow-y: auto;
}
.mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); }
.mobile-menu__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.mobile-nav a { display: block; padding: 0.85em 0.5em; border-bottom: 1px solid var(--c-line); font-weight: var(--fw-medium); color: var(--c-ink); }
.mobile-nav a:hover { color: var(--c-blue); }
.mobile-nav__sub { padding-left: 1.25em !important; font-weight: var(--fw-regular) !important; color: var(--c-slate) !important; }
.mobile-nav__sub::before { content: "› "; color: var(--c-blue); }
.mobile-menu__cta { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); }

/* ---- Page hero (generic interior) ---------------------------------- */
.page-hero { background: var(--c-mist); border-bottom: 1px solid var(--c-line); padding-block: clamp(2.5rem,2rem+3vw,4.5rem); }
.page-hero .breadcrumb { margin-bottom: var(--sp-4); }
.page-hero h1 { max-width: 18ch; }
.page-hero .lead { margin-top: var(--sp-4); max-width: 60ch; }

/* ---- Footer — modèle Open Society Foundations ----------------------
   Ce qui rend leur pied de page balayable, et qui est repris ici :

     · UNE SEULE TAILLE de texte dans le plan du site (14 px), avec un
       interligne large (~30 px). L'ancien pied de page mélangeait un <h4>
       en capitales, des liens 14 px, un paragraphe et une adresse : quatre
       échelles pour trois niveaux d'information.
     · Le titre de rubrique se distingue par la COULEUR, jamais par la
       graisse ni les capitales. On balaie une couleur bien plus vite qu'un
       contraste de poids, et rien n'a besoin d'être gras.
     · Des bandes séparées par des filets fins, dans un ordre fixe :
       mis en avant → plan du site → partenaires → utilitaire.

   Le vert #9be870 est celui qui servait déjà aux icônes d'adresse : 8,65:1
   sur --c-blue-900, donc AA confortable (le --c-green de la charte n'y
   donne que 4,84:1 — juste au seuil, et terne sur ce bleu).
   ------------------------------------------------------------------- */
.site-footer { background: var(--c-blue-900); color: #c6d8e8; }
.site-footer a { color: inherit; }

/* Filet entre les blocs mis en avant et le plan du site. Entre le plan du
   site et la barre utilitaire, c'est la bande blanche des partenaires qui
   fait la séparation — un filet de plus y serait redondant. */
.footer-map { border-top: 1px solid rgba(255, 255, 255, 0.14); }

/* ---- 1. Blocs mis en avant ---------------------------------------- */
.footer-hi {
  display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}
/* Sur les pages qui ont déjà leur action, seule la newsletter reste : elle
   ne doit pas s'étaler sur toute la largeur pour autant. */
.footer-hi--single { grid-template-columns: minmax(0, 640px); }
.footer-hi__title {
  font-size: var(--fs-h3); font-weight: var(--fw-regular);
  line-height: 1.15; letter-spacing: -0.01em;
  color: #9be870;
}
.footer-hi__title a:hover { color: #fff; }
.footer-hi p {
  font-size: var(--fs-sm); line-height: 1.65; color: #a9c2d8;
  margin-top: var(--sp-3); max-width: 46ch;
}
.footer-hi__more { margin-top: var(--sp-4); color: #fff; font-weight: var(--fw-regular); }
.footer-hi__more:hover { color: #9be870; }
.footer-newsletter { margin-top: var(--sp-4); }
.footer-newsletter .search { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); }
.footer-newsletter .search input { color: #fff; }
.footer-newsletter .search input::placeholder { color: #8fb0cc; }
.footer-newsletter .checkbox { color: #fff; margin-top: var(--sp-3); font-size: var(--fs-sm); }
.footer-newsletter .checkbox a { color: var(--c-on-blue); text-decoration: underline; }
.footer-newsletter .form-msg { margin-top: var(--sp-2); font-size: var(--fs-xs); }

/* ---- 2. Plan du site ----------------------------------------------- */
.footer-map {
  display: grid; gap: var(--sp-6) var(--sp-7);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-block: clamp(2.5rem, 2rem + 3vw, 4rem);
}
.footer-map__list { list-style: none; padding: 0; margin: 0; }
/* Interligne 2.15 sur 14px ≈ 30px : c'est la valeur d'Open Society, et c'est
   l'air entre les lignes qui fait le balayage, pas la taille du texte. */
.footer-map__list a { font-size: var(--fs-sm); line-height: 2.15; display: inline-block; }
/* Le soulignement n'apparaît qu'au survol, et il est réservé PAR AVANCE
   (bordure transparente au repos) : sans cela chaque ligne se décalerait
   d'un pixel au passage de la souris. */
.footer-map__list a:not(.footer-map__title) {
  color: #c6d8e8; border-bottom: 1px solid transparent;
}
.footer-map__list a:not(.footer-map__title):hover { color: #fff; border-bottom-color: #fff; }
/* Le titre de rubrique : même taille, même interligne, couleur différente. */
.footer-map__title { color: #9be870; margin-bottom: var(--sp-2); }
.footer-map__title:hover { color: #fff; }
.footer-map__list + .footer-map__list { margin-top: var(--sp-6); }

.footer-map__col--id { color: #93b0c8; font-size: var(--fs-sm); }
.footer__brand-card {
  background: #fff; border-radius: var(--r-md); padding: var(--sp-4);
  display: inline-flex; width: fit-content; margin-bottom: var(--sp-4);
}
.footer__brand-card img { height: 52px; width: auto; }
.footer-addr { font-style: normal; display: grid; gap: var(--sp-2); font-size: var(--fs-sm); color: #a9c2d8; }
.footer-addr span { display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
.footer-addr .ico { width: 16px; height: 16px; color: #9be870; flex: none; margin-top: 2px; }
.footer-map__copy { margin-top: var(--sp-5); font-size: var(--fs-xs); line-height: 1.6; }

/* ---- 3. Partenaires (bande blanche : logos officiels en couleurs) --- */
.footer-partners { background: #fff; padding-block: var(--sp-5); }
.partner-strip { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(var(--sp-5), 4vw, var(--sp-8)); }
.partner-chip {
  background: rgba(255,255,255,0.9); border-radius: var(--r-sm);
  padding: 6px 12px; font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--c-blue-900);
}
.partner-label { color: var(--c-slate); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; font-weight: var(--fw-semi); }
.partner-logo { display: inline-flex; align-items: center; }
.partner-logo img { width: auto; display: block; }
.partner-logo--mtess img { height: 54px; }  /* round crest, needs size to read */
.partner-logo--pnud  img { height: 56px; }  /* tall portrait lockup */
.partner-logo--eu    img { height: 38px; }  /* landscape flag */

/* ---- 4. Barre utilitaire ------------------------------------------- */
.footer-util {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-6);
  padding-block: var(--sp-5);
}
.footer-util .footer-a11y { margin-left: auto; }
.socials { display: flex; gap: var(--sp-2); }
.socials a {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  display: grid; place-items: center; background: rgba(255,255,255,0.08); color: #fff;
  transition: background var(--dur-fast) var(--ease);
}
.socials a:hover { background: var(--c-sky); }
.socials .ico { width: 18px; height: 18px; }
.footer-totop {
  display: inline-flex; align-items: center; gap: 8px;
  color: #fff; font-size: var(--fs-sm); flex: none;
}
.footer-totop:hover { color: #9be870; }
.footer-totop .ico { width: 16px; height: 16px; }

@media (max-width: 900px) {
  .footer-hi { grid-template-columns: 1fr; }
  .footer-map { grid-template-columns: 1fr 1fr; }
}

/* ---- Header account chip + dropdown (logged-in) ------------------- */
.acct { position: relative; }
.acct__btn {
  display: flex; align-items: center; gap: .5rem; cursor: pointer; font-family: inherit;
  background: none; border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: .3rem .55rem .3rem .35rem; color: var(--c-ink); transition: background var(--dur-fast);
}
.acct__btn:hover { background: var(--c-mist); }
.acct__av {
  width: 32px; height: 32px; border-radius: var(--r-pill); background: var(--c-blue); color: #fff;
  display: grid; place-items: center; font-weight: var(--fw-bold); font-size: .78rem; flex: none;
}
.acct__name { font-weight: var(--fw-semi); font-size: .9rem; }
.acct__btn .ico { width: 15px; height: 15px; color: var(--c-slate); }
.acct__menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px; z-index: 1000;
  background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-md);
  box-shadow: var(--sh-md); padding: .35rem;
}
.acct__menu a, .acct__menu button {
  display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; cursor: pointer;
  padding: .6rem .7rem; border: 0; background: none; text-decoration: none; font-family: inherit;
  color: var(--c-ink); font-size: .9rem; border-radius: var(--r-sm);
}
.acct__menu a:hover, .acct__menu button:hover { background: var(--c-mist); }
.acct__menu .ico { width: 18px; height: 18px; color: var(--c-slate); }
.acct__menu button[data-logout-ext] { color: var(--c-wine); border-top: 1px solid var(--c-line); margin-top: .2rem; }
.acct__menu button[data-logout-ext] .ico { color: var(--c-wine); }
@media (max-width: 900px) { .acct__name { display: none; } }