/* ==========================================================================
   OUESTAF — Design system (style IOM : moderne, arrondi maîtrisé, léger relief)
   Angles ~10px · ombres douces · bleu institutionnel · imagerie.
   ========================================================================== */

/* ----------------------------------------------------------------- Tokens */
:root {
  --blue:        #005D9E;
  --blue-dark:   #00457E;
  --blue-hover:  #006DB8;
  --blue-soft:   #E6EFF8;
  --sky:         #007BC2;
  --gold:        #FFB800;
  --gold-dark:   #D99B00;
  --gold-text:   #9A6200;
  --gold-soft:   #FEF9C3;
  --red:         #D8232A;
  --red-soft:    #FBEAEB;

  /* Couleurs d'identite des partenaires — hors charte OUESTAF, elles
     reprennent le logo de chaque organisation et ne doivent pas etre
     alignees sur les tokens ci-dessus. */
  --weworld-orange: #E98B00;   /* echantillonne sur Weworld-cercle-orange.png */
  --green:          #1F8A4C;   /* accent WiLDAF-AO */

  --ink:   #12233F;
  --text:  #3A4759;
  --muted: #6A7788;
  --faint: #97A2B0;

  --bg:      #FFFFFF;
  --grey:    #F4F7FB;
  --grey-2:  #E9EEF5;
  /* Fond chaud, reserve a la rupture editoriale des actualites. */
  --warm:    #FEF9F3;
  --border:  #DEE5EE;

  --radius:    10px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(18,35,63,.06);
  --shadow-md: 0 8px 24px rgba(18,35,63,.09);
  --shadow-lg: 0 18px 44px rgba(18,35,63,.16);

  --maxw: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --font: 'Lato', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-title: 'Roboto Slab', Georgia, serif;
  --ease: cubic-bezier(.22,.61,.36,1);
  /* Courbe longue, relevee sur le menu mobile de WeWorld : le mouvement part
     vite et s arrete tres lentement. C est elle qui donne la sensation de
     glisse, plus que la duree. */
  --glisse: cubic-bezier(.45,.85,0,1);
}

/* -------------------------------------------------------------- Reset base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
[id] { scroll-margin-top: 90px; }
body {
  margin: 0; font-family: var(--font); color: var(--text); background: var(--warm);
  line-height: 1.62; font-size: 17px; overflow-x: clip;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4, h5, h6, .section-title, .page-hero h1, .landing-main h1 { font-family: var(--font-title); }
h1,h2,h3,h4 { color: var(--ink); line-height: 1.18; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.015em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: 3px; }

.skip-link { position: absolute; left: 12px; top: -80px; z-index: 999; background: var(--blue); color: #fff; padding: 11px 18px; border-radius: var(--radius-sm); font-weight: 700; transition: top .2s var(--ease); }
.skip-link:focus { top: 12px; }
.is-hidden { display: none !important; }

/* --------------------------------------------------------------- Layout */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding: clamp(50px, 7vw, 92px) 0; }
/* Une seule teinte de fond sur tout le portail, celle des actualites. Les
   modificateurs restent declares : ils sont poses par les widgets Elementor et
   par la maquette, et les retirer du balisage n'apporterait rien. Ils ne
   distinguent simplement plus rien. */
.section--soft,
.section--tint,
.section--warm { background: var(--warm); }
.section-head { max-width: 760px; margin-bottom: 42px; }
.section-head.center { margin-inline: auto; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: 13px; }
.eyebrow::before { content: ""; width: 26px; height: 3px; background: var(--gold); border-radius: 2px; }
.section-head.center .eyebrow { justify-content: center; }
.section-title { font-size: clamp(1.65rem, 3.2vw, 2.4rem); }
.section-sub { font-size: 1.08rem; color: var(--muted); margin: 8px 0 0; }
.material-symbols-outlined { font-variation-settings: 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; }

/* --------------------------------------------------------------- Buttons */
.btn {
  --bg: var(--blue); --fg: #fff; --bd: var(--blue);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--bg); color: var(--fg); border: 1.5px solid var(--bd);
  padding: 12px 22px; font-weight: 700; font-size: 1rem; border-radius: var(--radius-sm);
  transition: transform .16s var(--ease), box-shadow .2s var(--ease), background .16s, border-color .16s;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); background: var(--blue-hover); border-color: var(--blue-hover); color: #fff; }
.btn:active { transform: translateY(0); }
.btn .material-symbols-outlined { font-size: 20px; }
.btn--gold { --bg: var(--gold); --fg: var(--ink); --bd: var(--gold); }
.btn--gold:hover { background: #E09E00; border-color: #E09E00; color: var(--ink); }
.btn--ghost { --bg: transparent; --fg: #fff; --bd: rgba(255,255,255,.65); }
.btn--ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; box-shadow: none; }
.btn--outline { --bg: transparent; --fg: var(--blue); --bd: var(--blue); box-shadow: none; border-width: 2px; }
.btn--outline:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn--sm { padding: 8px 15px; font-size: .9rem; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--blue); }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-arrow .material-symbols-outlined { font-size: 20px; transition: transform .16s var(--ease); }
.link-arrow:hover .material-symbols-outlined { transform: translateX(3px); }

/* --------------------------------------------------------------- Topbar */
.topbar { background: #001d4b; color: #fff; font-size: .85rem; overflow-x: auto; scrollbar-width: none; display: none; }
.topbar::-webkit-scrollbar { display: none; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 38px; padding: 4px 48px; }
.topbar a { color: inherit; white-space: nowrap; }
.topbar-l, .topbar-r { display: flex; align-items: center; gap: 12px; }
.topbar-label { opacity: .8; }
.topbar-sep { opacity: .5; margin: 0 2px; }
.topbar-link { display: inline-flex; align-items: center; gap: 4px; transition: color .18s; }
.topbar-link:hover { color: var(--gold); }
.topbar-ico { font-size: 16px; }
.topbar-link--don { color: var(--gold); font-weight: 700; }

@media (min-width: 1024px) { .topbar { display: block; } }

/* --------------------------------------------------------------- Header/Nav */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.94); backdrop-filter: saturate(150%) blur(10px); border-bottom: 1px solid var(--border); transition: box-shadow .25s var(--ease); }
.site-header.scrolled { box-shadow: var(--shadow-sm); }
/* Le menu passait a la ligne : cinq entrees, trois logos, la recherche et le
   selecteur de pays ne tiennent pas ensemble sous 1400px. On reprend un peu
   de marge sur les cotes, la recherche s'efface plus tot, et le tiroir prend
   la main des 1200px plutot que de laisser une barre serree. */
.site-header .nav { max-width: 1440px; width: 100%; margin-inline: auto; padding-inline: clamp(16px, 2.4vw, 34px); display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
.brand-group { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; }
.brand-tag { font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.header-partner-logo { display: inline-flex; align-items: center; transition: opacity .18s var(--ease), transform .18s var(--ease); }
.header-partner-logo:hover { opacity: .85; transform: translateY(-1px); }
.header-partner-logo img { height: 34px; width: auto; object-fit: contain; }

.nav-links { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; margin-inline: auto; }
.nav-end { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.nav-item { position: relative; display: inline-block; }
.nav-link-main { white-space: nowrap; display: flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; font-size: .88rem; padding: 7px 11px; border-radius: var(--radius-sm); position: relative; transition: color .18s, background .18s; cursor: pointer; text-decoration: none; }
.nav-link-main::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 3px; height: 2px; background: var(--gold); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease); }
.nav-link-main:hover { color: var(--blue); background: var(--grey); }
.nav-link-main:hover::after, .nav-link-main.active::after { transform: scaleX(1); }

/* Dropdown Menu styling */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: max-content;
  min-width: 170px;
  max-width: 260px;
  white-space: nowrap;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(9, 30, 66, .14), 0 2px 10px rgba(9, 30, 66, .08);
  border: 1px solid var(--border);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.96);
  transform-origin: top left;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  z-index: 120;
}
.nav-dropdown::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 26px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: rotate(45deg);
}
.nav-item:last-child .nav-dropdown {
  left: auto;
  right: 0;
  transform-origin: top right;
}
.nav-item:last-child .nav-dropdown::before {
  left: auto;
  right: 26px;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.nav-dropdown a {
  display: block;
  padding: 9px 16px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: background .18s, color .18s;
}
.nav-dropdown a:hover {
  background: var(--grey);
  color: var(--blue);
}
.nav-caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 5px;
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  transition: transform .22s var(--ease);
  opacity: 0.7;
}
.nav-item:hover .nav-caret {
  transform: rotate(180deg);
  opacity: 1;
}
/* Le bouton de depliage et son conteneur ne servent qu au panneau mobile. Sur
   grand ecran le survol suffit : le bouton disparait, le conteneur s efface. */
.nav-expand { display: none; }
.nav-dropdown-list { display: block; }

.nav-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-country-select { background-color: transparent; border: 0; border-radius: 0; color: var(--blue); font: inherit; font-weight: 800; font-size: .85rem; padding: 6px 22px 6px 2px; cursor: pointer; outline: none; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23005D9E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; background-size: 12px; }
.nav-country-select:focus, .nav-country-select:focus-visible { outline: none; }
.nav-country-select option { color: var(--ink); background: #fff; }
.lang-select { background-color: transparent; border: 0; border-radius: 0; color: var(--blue); font: inherit; font-weight: 800; font-size: .85rem; padding: 6px 22px 6px 2px; cursor: pointer; outline: none; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23005D9E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; background-size: 12px; }
.lang-select:focus, .lang-select:focus-visible { outline: none; }
.lang-select option { color: var(--ink); background: #fff; }
.nav-toggle { display: none; border: 1px solid var(--border); background: #fff; border-radius: var(--radius-sm); width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--blue); }
.nav-toggle .material-symbols-outlined { font-size: 26px; }

/* --------------------------------------------------------------- Hero (portail) */
.hero { position: relative; color: #fff; overflow: hidden; background: #0a0f18; }
.hero-slider { min-height: clamp(560px, 78vh, 760px); }
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transform: scale(1.05);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-slide.is-prev {
  opacity: 0;
  z-index: 1;
  transform: scale(0.96);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-slide.is-active {
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
  transform: scale(1);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Chemin relatif A CETTE FEUILLE (assets/css/), pas a la page : sous WordPress
   la page n'est pas a la racine du theme. */
#hero-slide-1 { background-image: url('../images/hero-reception.jpg'); }
.hero-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.42) 52%, rgba(0,0,0,.12) 100%); }
.hero-slide-inner { position: relative; z-index: 1; width: 100%; padding-block: clamp(48px, 7vw, 92px); }
.hero .eyebrow { color: #fff; }
.hero h1 { color: #fff; font-size: clamp(2rem, 4.6vw, 3.4rem); max-width: 18ch; }
.hero-sub { font-size: clamp(1.02rem, 1.4vw, 1.2rem); color: #e6ecf7; max-width: 54ch; margin-bottom: 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* Points indicateurs */
.hero-dots { position: absolute; z-index: 3; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
.hero-dot {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.6);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: width .3s var(--ease), border-color .2s;
  overflow: hidden;
}

.hero-dot:hover {
  border-color: #fff;
}

.hero-dot.is-active {
  width: 36px;
  background: rgba(255, 255, 255, 0.25);
  border-color: transparent;
}

/* Barre de chargement interne de la capsule active */
.hero-dot::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--gold);
  border-radius: 999px;
}

.hero-dot.is-active.animate::after {
  animation: dotProgressTime 6s linear forwards;
}

.hero-dot.is-active.paused::after {
  animation-play-state: paused;
}

@keyframes dotProgressTime {
  from { width: 0%; }
  to { width: 100%; }
}

/* Layout du Hero Slide (avec grille pour le dernier contenu média) */
.hero-slide-inner {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

/* Dernier contenu média dans le Hero (Style créatif, sans bordure & épuré) */
.hero-latest {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  width: 100%;
  max-width: 480px;
  justify-self: end;
  margin-right: -15px;
  position: relative;
}

/* Toute la carte est un lien vers l'actualite. */
.hero-latest-lien {
  display: flex; flex-direction: column; flex: 1;
  color: inherit; text-decoration: none;
}
.hero-latest-lien:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; border-radius: var(--radius-lg); }

.hero-latest:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 32px 72px rgba(0, 0, 0, 0.45);
}

.hero-latest-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.hero-latest-media img,
.hero-latest-media video {
  position: absolute; inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.hero-latest:hover .hero-latest-media img,
.hero-latest:hover .hero-latest-media video {
  transform: scale(1.08);
}

/* Désactive l'animation du chargement des dots si réduction des mouvements demandée */
@media (prefers-reduced-motion: reduce) {
  .hero-dot.is-active::after { display: none !important; }
}

/* Animations de révélation créatives personnalisées par diapositive */

/* ================== DIAPOSITIVE 1 : Portail (Effet Vertical + Horizontal) ================== */
.hero-slide:nth-child(1) .hero-content {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.4s ease-in, transform 0.4s ease-in;
}
.hero-slide:nth-child(1).is-active .hero-content {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-slide:nth-child(1).is-prev .hero-content {
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.hero-slide:nth-child(1) .hero-latest {
  opacity: 0;
  transform: translateX(45px) scale(0.96);
  transition: opacity 0.4s ease-in, transform 0.4s ease-in;
}
.hero-slide:nth-child(1).is-active .hero-latest {
  opacity: 1;
  transform: translateX(0) scale(1);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.15s;
}
.hero-slide:nth-child(1).is-prev .hero-latest {
  opacity: 0;
  transform: translateX(-45px) scale(0.96);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* ================== DIAPOSITIVE 2 : Sensibilisation (Effet Entrée Latérale Gauche + Montée) ================== */
.hero-slide:nth-child(2) .hero-content {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.4s ease-in, transform 0.4s ease-in;
}
.hero-slide:nth-child(2).is-active .hero-content {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-slide:nth-child(2).is-prev .hero-content {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.hero-slide:nth-child(2) .hero-latest {
  opacity: 0;
  transform: translateY(45px) rotate(1deg);
  transition: opacity 0.4s ease-in, transform 0.4s ease-in;
}
.hero-slide:nth-child(2).is-active .hero-latest {
  opacity: 1;
  transform: translateY(0) rotate(0);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.15s;
}
.hero-slide:nth-child(2).is-prev .hero-latest {
  opacity: 0;
  transform: translateY(-45px) rotate(-1deg);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* ================== DIAPOSITIVE 3 : Assistance (Effet Chute Haute + Zoom Central) ================== */
.hero-slide:nth-child(3) .hero-content {
  opacity: 0;
  transform: translateY(-35px);
  transition: opacity 0.4s ease-in, transform 0.4s ease-in;
}
.hero-slide:nth-child(3).is-active .hero-content {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-slide:nth-child(3).is-prev .hero-content {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.hero-slide:nth-child(3) .hero-latest {
  opacity: 0;
  transform: scale(0.86) rotate(-2deg);
  transition: opacity 0.4s ease-in, transform 0.4s ease-in;
}
.hero-slide:nth-child(3).is-active .hero-latest {
  opacity: 1;
  transform: scale(1) rotate(0);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.15s;
}
.hero-slide:nth-child(3).is-prev .hero-latest {
  opacity: 0;
  transform: scale(0.92) rotate(2deg);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.hero-latest-media .type-pill {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-weight: 700;
  font-size: 0.72rem;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  backdrop-filter: blur(4px);
}

.hero-latest-media .play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px rgba(245, 179, 1, 0.4);
  transition: transform 0.3s var(--ease), background-color 0.3s, color 0.3s, box-shadow 0.3s;
}

.hero-latest-media .play span {
  font-size: 26px;
}

.hero-latest:hover .play {
  transform: scale(1.12);
  background: #fff;
  color: var(--blue);
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.5);
}

.hero-latest-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}

.hero-latest-body .kicker {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hero-latest-body h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero-latest-body p {
  margin: 0;
  font-size: 0.88rem;
  color: #c9d7ef;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 1;
}

.hero-latest-body .link-arrow {
  margin-top: 4px;
  color: #fff;
  font-weight: 700;
  font-size: 0.84rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}

.hero-latest-body .link-arrow:hover {
  color: var(--gold);
}

.hero-latest-body .link-arrow span {
  font-size: 16px;
  transition: transform 0.2s var(--ease);
}

.hero-latest-body .link-arrow:hover span {
  transform: translateX(4px);
}

/* --------------------------------------------------------------- Landing (accueil pays) */
/* L'accueil garde exactement son apparence : c'est la mecanique qui change, et
   seulement sur telephone. Sur grand ecran, tout tient sur une page comme
   avant — rien ne defile, rien ne se colle, rien ne floute. */
.landing { position: relative; min-height: 100dvh; display: flex; flex-direction: column; color: #fff; background: var(--blue-dark); overflow: hidden; }
.landing-bg { position: absolute; inset: 0; z-index: 0; background: #0a1a3a center/cover no-repeat; }
.landing-bg::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.82); }

/* Le regroupement de la marque et de l'accroche ne sert qu'au collage sur
   telephone. Ailleurs il s'efface : ses deux enfants redeviennent enfants
   directs de la page, et la composition d'origine est rendue telle quelle. */
.landing-entete { display: contents; }

.landing-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px var(--gutter); }
.landing-top-actions { display: flex; align-items: center; gap: 16px; }
.landing-top-actions a { color: #fff; font-weight: 700; font-size: .95rem; text-decoration: none; }
.landing-top-actions a:hover { color: var(--gold); }

/* L'accroche et la grille se partagent la hauteur restante, l'une par le bas,
   l'autre par le haut : elles se rejoignent au milieu de l'ecran, comme
   lorsqu'elles ne formaient qu'un seul bloc centre. */
.landing-intro { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; padding: 40px var(--gutter) 0; }
.landing-intro .eyebrow { color: #fff; justify-content: center; }
.landing-intro h1 { color: #fff; font-size: clamp(2.2rem, 5.4vw, 4rem); max-width: 16ch; margin: 6px 0 14px; }
.landing-choose { margin: 40px 0 22px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .85rem; color: #b9c8e4; }

.landing-main { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; padding: 0 var(--gutter) 64px; }

/* Telephone : l'accroche se colle en haut et les pays passent entierement
   dessous. La page doit donc defiler, ce qu'elle ne faisait pas — d'ou le
   retrait de `overflow: hidden`, qui aurait empeche tout collage. */
@media (max-width: 760px) {
  .landing { display: block; overflow: visible; }

  /* Le fond ne defile plus avec le contenu : la carte reste en place pendant
     que les pays passent devant.

     Sa hauteur est celle de la fenetre la plus grande, barre d adresse
     repliee : un element fixe se cale sur la fenetre de mise en page, qui ne
     grandit pas quand la barre disparait. Avec `inset: 0`, il restait une
     bande en bas ou l on voyait le bleu de la page — le defaut signale. */
  .landing-bg {
    position: fixed;
    inset: 0 0 auto;
    height: 100vh;
    height: 100lvh;
  }

  .landing-entete {
    display: block;
    position: sticky; top: 0; z-index: 3;
    /* Aucune couleur ajoutee : au repos, l'en-tete garde la transparence
       d'origine. Le flou n'arrive qu'une fois la page defilee, c'est-a-dire
       quand il y a quelque chose derriere a brouiller. */
    transition: backdrop-filter .28s var(--ease), -webkit-backdrop-filter .28s var(--ease);
  }
  .landing-entete.est-defile {
    -webkit-backdrop-filter: blur(18px) saturate(120%);
            backdrop-filter: blur(18px) saturate(120%);
  }

  .landing-intro { flex: none; padding-bottom: 0; }

  /* Le defilement s arrete au dernier pays : la page ne va pas plus loin que
     la grille. Les premiers passent bien entierement sous l en-tete, mais on
     ne descend pas jusqu a les faire tous disparaitre — arriver au bout sur un
     ecran vide n a pas de sens. */
  .landing-main { flex: none; padding-bottom: 40px; }
}

/* Mouvement reduit : le collage reste, le flou ne s anime plus. Il ne porte
   aucune information, seulement de la matiere. */
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .landing-entete { transition: none; }
}

.country-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; width: 100%; max-width: 940px; margin: 0 auto; }
.country-btn { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 0 1 175px; min-width: 150px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius); padding: 22px 14px; color: #fff; font-weight: 700; backdrop-filter: blur(4px); transition: transform .18s var(--ease), background .18s, border-color .18s, box-shadow .2s; }
.country-btn:hover { transform: translateY(-5px); background: #fff; color: var(--blue); border-color: #fff; box-shadow: var(--shadow-lg); }
.country-btn .flag { font-size: 2.6rem; line-height: 1; }
/* Le drapeau est une image SVG (l'emoji ne sert que de repli) : on lui
   redonne la présence qu'avait l'emoji dans la carte pays. */
.country-btn .flag .country-flag-img { width: 54px; height: 36px; border-radius: 3px; }
.country-btn .cname { font-size: 1rem; }
.country-btn .cgo { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; color: #c3d0e8; }
.country-btn:hover .cgo { color: var(--blue); }
.landing-foot { position: relative; z-index: 2; text-align: center; padding: 18px; font-size: .82rem; color: #aebbd4; border-top: 1px solid rgba(255,255,255,.12); }

/* --------------------------------------------------- Page d'accès rapide */
/* Page d'atterrissage du QR code. Elle ne ressemble volontairement pas au
   reste du site : une seule colonne étroite, pas de menu, pas de pied de page
   à quatre colonnes. On la lit debout, souvent dans l'urgence, souvent sur un
   téléphone d'entrée de gamme — la hiérarchie y compte plus que la richesse.

   L'ordre suit celui du besoin : appeler, puis les numéros courts, puis les
   trois gestes à faire, puis où aller. */

.ar {
  max-width: 560px;
  margin: 0 auto;
  padding: 30px var(--gutter) 44px;
}

/* --- Titre & Hero -------------------------------------------------------- */
.ar-hero {
  margin-bottom: 24px;
}
.ar-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.ar-kicker {
  margin: 0;
  font-size: .92rem;
  color: var(--muted);
  font-weight: 600;
}
.ar-country-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--grey);
  border: 1px solid var(--grey-2);
  font-size: .8rem;
  font-weight: 700;
  color: var(--ink);
}
.ar-country-chip .country-flag-img {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
.ar-titre {
  margin: 0 0 18px;
  font-size: clamp(1.48rem, 5.5vw, 1.85rem);
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -.01em;
}



/* --- Le bouton d'appel --------------------------------------------------- */
/* Le seul élément de la page à porter un aplat plein : c'est le geste qu'on
   veut voir avant d'avoir fini de lire. Le dégradé descend vers le doré foncé
   de la charte — la même couleur que les boutons d'appel du portail, à une
   échelle qui la rend impossible à manquer. */
.ar-appel {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; margin-bottom: 22px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--gold), #E09E00);
  color: var(--ink); text-decoration: none;
  box-shadow: 0 8px 20px rgba(224, 158, 0, .28);
  transition: transform .18s var(--ease), box-shadow .2s;
}
.ar-appel:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(224, 158, 0, .36); }
.ar-appel:active { transform: translateY(0); }
.ar-appel-ico { flex-shrink: 0; display: grid; place-items: center; }
.ar-appel-ico .material-symbols-outlined { font-size: 28px; color: var(--ink); }
.ar-appel-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ar-appel-texte strong { font-size: 1.06rem; line-height: 1.25; color: var(--ink); }
.ar-appel-texte span { font-size: .84rem; opacity: .92; line-height: 1.3; color: #2d3748; }
.ar-appel-fleche { margin-left: auto; flex-shrink: 0; opacity: .85; color: var(--ink); }

/* --- Blocs --------------------------------------------------------------- */
.ar-bloc { margin-bottom: 22px; }
.ar-bloc-titre {
  margin: 0 0 10px;
  font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted);
}

/* --- Numéros d'urgence --------------------------------------------------- */
/* Des codes à trois chiffres : en pastilles, ils tiennent sur deux lignes là
   où une liste en aurait pris cinq. Le numéro d'abord, en gros — c'est lui
   qu'on cherche, le nom du service ne fait que confirmer. */
.ar-urgences {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 8px;
}
.ar-urgence {
  display: flex; align-items: baseline; gap: 9px;
  padding: 11px 13px; height: 100%;
  border: 1px solid var(--red-soft); border-radius: var(--radius);
  background: var(--red-soft); color: var(--ink); text-decoration: none;
  transition: border-color .16s, background .16s;
}
.ar-urgence:hover { border-color: var(--red); background: #fff; }
.ar-urgence-num { flex-shrink: 0; font-size: 1.12rem; font-weight: 800; color: var(--red); }
.ar-urgence-nom { font-size: .78rem; color: var(--text); line-height: 1.3; }

/* --- Les trois premiers pas ---------------------------------------------- */
.ar-etapes {
  margin-bottom: 22px; padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--blue-soft);
}
.ar-etapes-titre {
  margin: 0 0 14px;
  font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--blue);
}
.ar-etapes-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ar-etape { display: flex; align-items: flex-start; gap: 12px; }
.ar-etape-num {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blue); color: #fff;
  font-size: .82rem; font-weight: 800;
}
.ar-etape-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ar-etape-texte strong { font-size: .95rem; color: var(--ink); line-height: 1.3; }
.ar-etape-texte span { font-size: .84rem; color: var(--text); line-height: 1.4; }

/* --- Rubriques ----------------------------------------------------------- */
/* Sur cette page seulement, les cartes deviennent des lignes : sans cadre ni
   ombre, séparées par un filet. Trois cartes empilées font trois boîtes qui se
   disputent l'attention ; trois lignes se lisent d'un regard. */
.ar .qa-grid { grid-template-columns: 1fr; gap: 0; }
.ar .qa-card {
  border: 0; border-radius: 0; box-shadow: none; background: transparent;
  padding: 14px 0; gap: 13px;
  border-bottom: 1px solid var(--grey-2);
}
.ar .qa-card:hover { transform: none; box-shadow: none; background: var(--grey); }
.ar .qa-ico { width: 40px; height: 40px; }
.ar .qa-ico .material-symbols-outlined { font-size: 22px; }
.ar .qa-card h3 { font-size: 1rem; }
.ar .qa-card p { font-size: .85rem; line-height: 1.4; }

.ar-autres-titre {
  margin: 20px 0 8px;
  font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted);
}
.ar-autres { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.ar-autre {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--grey-2); border-radius: var(--radius);
  color: var(--ink); text-decoration: none; font-size: .88rem; font-weight: 700;
  transition: border-color .16s, background .16s;
}
.ar-autre:hover { border-color: var(--sky); background: var(--grey); }
.ar-autre .material-symbols-outlined { font-size: 19px; color: var(--blue); flex-shrink: 0; }
.ar-autre span { flex: 1 1 auto; min-width: 0; }
.ar-autre .material-symbols-outlined:last-child { color: var(--faint); font-size: 18px; }

/* --- Vers le portail & Pied compact -------------------------------------- */
.ar-pied {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--grey-2);
}

.ar-portail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blue-dark);
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none;
  box-shadow: none;
  transition: color .18s;
}

.ar-portail:hover {
  color: var(--blue);
  background: transparent;
  box-shadow: none;
  transform: none;
}

.ar-portail:hover .ar-portail-titre {
  text-decoration: underline;
}

.ar-portail:active {
  transform: none;
}

.ar-portail .material-symbols-outlined {
  font-size: 21px;
  color: var(--blue-dark);
  flex-shrink: 0;
  transition: transform .18s ease, color .18s ease;
}

.ar-portail:hover .material-symbols-outlined {
  color: var(--blue);
  transform: translate(2px, -2px);
}

.ar-pied-financement {
  margin: 0 0 8px;
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.45;
}

.ar-pied-partenaires {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: .8rem;
  line-height: 1.4;
}

.ar-pied-partenaires a {
  font-weight: 700;
  color: #475569;
  text-decoration: none;
  transition: color .15s;
}

.ar-pied-partenaires a:hover {
  color: var(--blue);
  text-decoration: underline;
}

.ar-sep {
  color: var(--faint);
  font-size: .75rem;
  user-select: none;
}

@media (max-width: 380px) {
  .ar-autres { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- Quick access */
.qa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 18px; }
.qa-card { display: flex; gap: 15px; align-items: center; text-align: left; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .22s, border-color .18s; }
.qa-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--sky); }
.qa-ico { flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); }
.qa-ico .material-symbols-outlined { font-size: 26px; }
.qa-card h3 { font-size: 1.02rem; margin: 0 0 3px; }
.qa-card p { font-size: .88rem; color: var(--muted); margin: 0; }
.qa-card .go { margin-left: auto; color: var(--faint); transition: transform .18s, color .18s; }
.qa-card:hover .go { color: var(--blue); transform: translateX(3px); }

/* --------------------------------------------------------------- Info cards */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 24px; }
.info-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px 28px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; transition: transform .2s var(--ease), box-shadow .22s; }
.info-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--blue); }
.info-card.accent-yellow::before { background: var(--gold); }
.info-card.accent-red::before { background: var(--red); }
.info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.info-ico { width: 54px; height: 54px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); margin-bottom: 16px; }
.info-card.accent-yellow .info-ico { background: var(--gold-soft); color: var(--gold-text); }
.info-card.accent-red .info-ico { background: var(--red-soft); color: var(--red); }
.info-ico .material-symbols-outlined { font-size: 29px; }
.info-card h3 { font-size: 1.25rem; }
.info-card > p { color: var(--muted); font-size: .97rem; }
.info-points { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--border); display: grid; gap: 9px; }
.info-points li { display: flex; gap: 9px; align-items: flex-start; font-size: .93rem; color: var(--text); }
.info-points .material-symbols-outlined { font-size: 20px; color: var(--blue); flex-shrink: 0; }

/* --------------------------------------------------------------- Legal (tabs) */
.legal-wrap { display: grid; grid-template-columns: 260px 1fr; gap: 26px; align-items: start; }
.legal-tabs { display: flex; flex-direction: column; gap: 8px; }
.legal-tab { display: flex; align-items: center; gap: 11px; text-align: left; width: 100%; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 15px; font-weight: 700; color: var(--ink); box-shadow: var(--shadow-sm); transition: .18s; }
.legal-tab .flag { font-size: 1.2rem; }
.legal-tab:hover { border-color: var(--sky); }
.legal-tab.active { background: var(--blue); color: #fff; border-color: var(--blue); box-shadow: var(--shadow-md); }
.legal-panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-sm); min-height: 240px; }
.legal-panel .panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.legal-panel .panel-head .flag { font-size: 2rem; }
.legal-panel .panel-head h3 { margin: 0; font-size: 1.4rem; }
.legal-items { display: grid; gap: 14px; }
.legal-item { border-left: 4px solid var(--blue); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 8px 0 8px 16px; }
.legal-item h4 { margin: 0 0 4px; font-size: 1.05rem; color: var(--ink); }
.legal-item p { margin: 0; font-size: .95rem; color: var(--muted); }
.fade-swap { animation: fadeUp .3s var(--ease); }

/* --------------------------------------------------------------- Services */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 26px; }
.svc-card { position: relative; background: #fff; border-radius: 10px; padding: 40px 26px 34px; box-shadow: 0 0 20px rgba(0,0,0,.10); text-align: center; overflow: hidden; display: flex; flex-direction: column; align-items: center; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.svc-card:hover { transform: translateY(-6px); box-shadow: 0 14px 34px rgba(0,0,0,.14); }
.svc-card::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 54px; height: 4px; background: var(--blue); border-radius: 3px 3px 0 0; transition: width .28s var(--ease); }
.svc-card:hover::after { width: 108px; }
.svc-ico { width: 90px; height: 90px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; background: rgba(0,93,158,.10); color: var(--blue); transition: transform .2s var(--ease); }
.svc-card:hover .svc-ico { transform: scale(1.06); }
.svc-ico .material-symbols-outlined { font-size: 44px; }
.svc-card h3 { font-size: 1.2rem; font-weight: 800; margin: 0; }
.svc-card p { color: var(--muted); margin: 12px auto 0; font-size: .95rem; max-width: 34ch; line-height: 1.6; }

/* --------------------------------------------------------------- Media library */
.media-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; max-width: none; }
.media-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.media-filter { border: 1px solid var(--border); background: #fff; color: var(--ink); font-weight: 700; font-size: .9rem; padding: 9px 16px; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); transition: .18s; }
.media-filter:hover { border-color: var(--sky); }
.media-filter.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 24px; }
.media-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: 0 0 20px rgba(0,0,0,.10); display: flex; flex-direction: column; color: inherit; transition: transform .2s var(--ease), box-shadow .22s; }
.media-card:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(0,0,0,.14); }
.media-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--blue); }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
/* Couverture de repli, pour les supports sans vignette. */
.media-thumb-vide { display: grid; place-items: center; width: 100%; height: 100%; color: rgba(255,255,255,.9); }
.media-thumb-vide .material-symbols-outlined { font-size: 56px; }
.media-card:hover .media-thumb img { transform: scale(1.04); }
.media-dur { position: absolute; bottom: 10px; right: 10px; background: rgba(11,20,40,.82); color: #fff; font-size: .72rem; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.media-play { position: absolute; inset: 0; margin: auto; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--blue); display: grid; place-items: center; opacity: 0; transition: opacity .2s; }
.media-card:hover .media-play { opacity: 1; }
.media-body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; text-align: left; }
.media-meta { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; font-size: .82rem; color: var(--muted); font-weight: 600; }
.media-meta .material-symbols-outlined { font-size: 16px; color: var(--blue); }
.media-body h3 { font-size: 1.12rem; line-height: 1.35; margin: 0; color: var(--ink); font-weight: 800; transition: color .15s; }
/* Les textes viennent de WeWorld : leur longueur est libre. Sans bornage,
   une description bavarde étire sa carte et casse l'alignement de toute la
   grille. On fige donc le nombre de lignes, le détail restant lisible dans
   la modale. */
.media-body h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.03em; }
.media-sub-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.media-card:hover .media-body h3 { color: var(--blue); }
.media-card.is-hidden { display: none; }
@media (max-width: 560px) { .media-head { flex-direction: column; align-items: flex-start; } }

/* --------------------------------------------------------------- Stats */
.stats { background: linear-gradient(180deg, var(--blue-dark), var(--blue)); color: #fff; }
.stats .section-title { color: #fff; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { text-align: center; padding: 10px 26px; }
.stat + .stat { border-left: 1px solid rgba(255,255,255,.16); }
.stat-ico { color: var(--gold); margin-bottom: 14px; }
.stat-ico .material-symbols-outlined { font-size: 30px; font-variation-settings: 'wght' 300, 'opsz' 40; }
.stat-num { display: inline-block; font-size: clamp(2.3rem, 4.2vw, 3.4rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.stat-num::after { content: ""; display: block; width: 32px; height: 3px; background: var(--gold); border-radius: 2px; margin: 16px auto 13px; }
.stat-lbl { color: #c1d0ea; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
@media (max-width: 720px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .stat + .stat { border-left: 0; }
  .stat:nth-child(even) { border-left: 1px solid rgba(255,255,255,.16); }
}

/* --------------------------------------------------------------- Contacts */
/* Les trois colonnes n'ont pas la meme longueur : les institutions
   publiques sont deux fois plus nombreuses que les numeros d'urgence.
   Sans align-items: start, les deux cartes courtes s'etirent a la
   hauteur de la plus longue et se terminent par un grand vide blanc. */
.contacts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 24px; align-items: start; }
.contact-col { background: #fff; border-radius: var(--radius-lg); padding: 26px; box-shadow: 0 0 20px rgba(0,0,0,.10); }
.contact-col > h3 { display: flex; align-items: center; gap: 10px; font-size: 1.14rem; padding-bottom: 14px; border-bottom: 2px solid var(--grey-2); }
.contact-col > h3 .material-symbols-outlined { font-size: 24px; color: var(--blue); }
.contact-col.urgent > h3 .material-symbols-outlined { color: var(--red); }
.contact-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 4px; }
/* Le bouton d'appel ne se comprime pas. Dans une colonne etroite, il
   ecrasait le nom de l'institution jusqu'a un mot par ligne. On laisse
   donc la ligne se plier : sous 160px de texte disponible, le numero
   passe dessous au lieu de voler la place. */
.contact-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 0; border-bottom: 1px solid var(--grey-2); }
.contact-item:last-child { border-bottom: 0; }
.contact-item { align-items: flex-start; }
/* Le nom et son repere s'empilent : les institutions publiques portent un
   role et une adresse, la ligne d'urgence ne porte qu'un nom. */
/* La base est volontairement courte : flex-wrap decide de plier la ligne
   sur la taille de base, pas sur la taille apres compression. Avec une
   base auto, un nom long faisait passer le numero a la ligne meme quand
   la place existait. */
.contact-item .ci-main { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.contact-item .ci-sub { line-height: 1.35; }
.contact-call { margin-top: 1px; }
.contact-item .ci-name { font-weight: 700; color: var(--ink); font-size: .96rem; }
.contact-item .ci-sub { font-size: .82rem; color: var(--muted); }
.contact-call { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; background: var(--blue-soft); color: var(--blue); font-weight: 800; font-size: .85rem; padding: 8px 13px; border-radius: 999px; transition: .18s; }
.contact-call:hover { background: var(--blue); color: #fff; }
.contact-col.urgent .contact-call { background: var(--red-soft); color: var(--red); }
.contact-col.urgent .contact-call:hover { background: var(--red); color: #fff; }
.contact-call .material-symbols-outlined { font-size: 17px; }

/* --------------------------------------------------------------- Feedback */
.fb-wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: 40px; align-items: start; }
.fb-card { background: #fff; border-radius: var(--radius-lg); padding: 32px; box-shadow: 0 0 20px rgba(0,0,0,.10); }
.fb-rate-label { font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.stars { display: flex; gap: 5px; margin-bottom: 22px; }
.stars button { border: 0; background: transparent; color: var(--faint); padding: 0; line-height: 0; transition: transform .14s var(--ease), color .14s; }
.stars button .material-symbols-outlined { font-size: 37px; }
.stars button:hover { transform: scale(1.12); }
.stars button.on .material-symbols-outlined { color: var(--gold); font-variation-settings: 'FILL' 1; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: .85rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; font: inherit; color: var(--ink); background: var(--grey); transition: border-color .18s, box-shadow .18s, background .18s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--sky); background: #fff; box-shadow: 0 0 0 3px rgba(0,123,194,.30); }
.field textarea { resize: vertical; min-height: 120px; }
.fb-success { display: none; align-items: center; gap: 10px; background: #E6EFF8; border: 1px solid #A9CBE7; color: var(--blue); border-radius: var(--radius-sm); padding: 14px 16px; font-weight: 700; margin-top: 12px; }
.fb-success.show { display: flex; animation: fadeUp .3s var(--ease); }
.fb-aside { display: grid; gap: 16px; }
.fb-aside .fb-quote { background: var(--blue); color: #fff; border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-md); }
.fb-aside .fb-quote .material-symbols-outlined { font-size: 32px; color: var(--gold); }
.fb-aside .fb-quote p { font-size: 1.1rem; font-weight: 600; margin: 8px 0 0; }
.fb-mini { display: flex; gap: 14px; align-items: center; background: #fff; border-radius: var(--radius); padding: 18px; box-shadow: 0 0 20px rgba(0,0,0,.10); }
.fb-mini .material-symbols-outlined { font-size: 30px; color: var(--blue); flex-shrink: 0; }
.fb-mini h4 { margin: 0 0 2px; font-size: 1rem; } .fb-mini p { margin: 0; font-size: .88rem; color: var(--muted); }

/* --------------------------------------------------------------- Footer */
.site-footer { background: var(--blue-dark); color: #c3d0e8; padding: 58px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 34px; }
.footer-brand p { margin: 14px 0 0; max-width: 36ch; font-size: .92rem; }

/* ------------------------------------------------------- Reseaux sociaux */
/* Les marques ne sont pas dans la police d icones du portail — un sous-ensemble
   de 66 glyphes, aucun logo de reseau dedans. Elles sont donc dessinees dans le
   document, en formes simples plutot qu en traces recopies : un trace de
   memoire se casse sans qu on le voie, une forme geometrique se verifie a l oeil.

   Les liens visent l accueil en attendant les vraies adresses ; ils portent
   data-reseau pour qu on les retrouve d un coup le jour ou elles arrivent. */
.footer-social { margin-top: 26px; }
.footer-social h4 { margin-bottom: 12px; }
.footer-social-list { display: flex; flex-wrap: wrap; gap: 10px; }
.social-link {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 2px;
  color: rgba(255, 255, 255, .82);
  transition: background .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .18s var(--ease);
}
.social-link:hover,
.social-link:focus-visible {
  background: var(--gold); border-color: var(--gold);
  color: #fff; transform: translateY(-2px);
}
.social-link svg { display: block; }
.footer-col h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a { color: #c3d0e8; font-size: .92rem; }
.footer-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.16); margin-top: 40px; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 14px 32px; justify-content: space-between; align-items: flex-start; font-size: .84rem; }
.footer-copy { white-space: nowrap; }
.footer-legal { margin: 0; font-size: .74rem; line-height: 1.55; color: rgba(195, 208, 232, .72); max-width: 640px; text-align: left; }
.footer-flags { display: flex; gap: 6px; font-size: 1.1rem; margin-top: 14px; }

/* --------------------------------------------------------------- Animations */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .07s; }
[data-reveal][data-delay="2"] { transition-delay: .14s; }
[data-reveal][data-delay="3"] { transition-delay: .21s; }
[data-reveal][data-delay="4"] { transition-delay: .28s; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------- Mobile menu */
.nav-scrim { position: fixed; inset: 0; background: rgba(11,20,40,.5); opacity: 0; visibility: hidden; transition: .25s; z-index: 90; }
.nav-scrim.show { opacity: 1; visibility: visible; }

.nav-mobile-country { display: none; }

/* --------------------------------------------------------------- Responsive */
@media (max-width: 1240px) { .brand-tag { display: none; } }
@media (max-width: 1024px) { .hero-slider { min-height: clamp(520px, 64vh, 620px); } }
@media (max-width: 1000px) {
  .hero-slider { min-height: 880px; }
  .hero-slide-inner { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 36px); padding-top: 40px; padding-bottom: 64px; }
  .hero-latest { max-width: 440px; width: 100%; justify-self: center; margin-right: 0; }
  .legal-wrap { grid-template-columns: 1fr; }
  .legal-tabs { flex-direction: row; flex-wrap: wrap; }
  .legal-tab { flex: 1 1 140px; }
  .fb-wrap { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .country-grid { max-width: 560px; }
}
@media (max-width: 1200px) {
  /* backdrop-filter fait de .site-header un bloc conteneur pour ses
     descendants en position:fixed — au meme titre que transform ou filter.
     Le tiroir, qui vit dans l'en-tete, se calait donc sur lui et non sur la
     fenetre : il suivait le moindre deplacement de l'en-tete, ce qui sur
     telephone arrive des que la barre d'adresse se replie. Invisible sur
     ordinateur, ou l'en-tete colle a zero en permanence.

     Le flou n'est que decoratif, et le fond est deja opaque a 94% : on s'en
     passe la ou le tiroir existe. */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* Le menu n'est plus un tiroir latéral mais un panneau plein écran, posé
     sous l'en-tête — qui reste visible, avec son bouton devenu une croix. Le
     tiroir prenait 82 % de la largeur et laissait une bande morte à gauche ;
     à cette taille, autant prendre l'écran.

     Il apparaît en fondu, sans glissement : c'est le parti de WeWorld, et il
     évite au panneau de partir d'un bord alors qu'il n'en occupe aucun.
     `visibility` est retardée à la fermeture, le temps que le fondu s'achève,
     sinon le panneau disparaît d'un coup. */
  /* L'en-tete passe de collant a fixe pendant l'ouverture. Le corps est fige
     en position pour retenir le doigt, et un element collant n'a alors plus
     rien ou s'accrocher : il retombe a sa place dans le document, c'est-a-dire
     hors de l'ecran des que la page etait defilee. Il restait une bande de
     contenu visible entre le haut de l'ecran et le panneau — l'erreur signalee. */
  body.menu-ouvert .site-header {
    position: fixed; top: 0; left: 0; right: 0;
    background: #fff;
    border-bottom-color: transparent;
    box-shadow: none;
  }

  /* Le panneau se deroule depuis le bas de l'en-tete au lieu d'apparaitre en
     fondu : le decoupage s'ouvre du haut vers le bas, et l'oeil lit un en-tete
     qui se deplie plutot qu'un panneau qui se superpose. Aucune ligne ne les
     separe — la bordure et l'ombre de l'en-tete s'effacent le temps de
     l'ouverture, le blanc est continu de l'un a l'autre. */
  .nav-links {
    position: fixed;
    inset: var(--entete-hauteur, 68px) 0 0;
    width: auto; height: auto;
    background: #fff;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 18px 0 46px;
    z-index: 95;
    /* Le panneau garde son defilement pour lui : sans cela, arriver en bout de
       liste relance celui de la page derriere. */
    overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .5s var(--glisse), visibility 0s linear .5s;
  }
  .nav-links.open {
    visibility: visible;
    clip-path: inset(0 0 0 0);
    transition: clip-path .5s var(--glisse), visibility 0s;
  }
  .nav-links a::after { display: none; }
  .nav-toggle { display: inline-flex; }

  /* Les rubriques montent l'une après l'autre. Le décalage est court — il ne
     s'agit pas de faire attendre, mais de donner une direction au mouvement. */
  .nav-item {
    display: block; width: 100%;
    border-bottom: 1px solid var(--border);
    opacity: 0; transform: translateY(16px);
    transition: opacity .55s var(--glisse), transform .55s var(--glisse);
  }
  .nav-links.open .nav-item { opacity: 1; transform: none; }
  /* La tete du panneau occupe le premier rang : l echelle des retards commence
     donc au troisieme enfant, pour que la premiere rubrique parte sans attendre. */
  .nav-links.open .nav-item:nth-child(3) { transition-delay: .06s; }
  .nav-links.open .nav-item:nth-child(4) { transition-delay: .12s; }
  .nav-links.open .nav-item:nth-child(5) { transition-delay: .18s; }
  .nav-links.open .nav-item:nth-child(6) { transition-delay: .24s; }
  .nav-links.open .nav-item:nth-child(7) { transition-delay: .30s; }

  /* Le libellé occupe toute la rangée, le bouton se superpose à droite : ainsi
     le lien reste cliquable sur sa longueur, et le dépliage garde sa propre
     cible sans que l'un mange l'autre. */
  .nav-link-main {
    padding: 20px var(--gutter);
    font-size: 1.12rem; font-weight: 700;
    letter-spacing: -.01em;
    border-radius: 0;
    display: flex; align-items: center;
  }
  .nav-link-main:hover { background: transparent; color: var(--blue); }
  .nav-caret { display: none; }

  /* La rangee est une grille de deux colonnes : le libelle a gauche, le bouton
     a droite, le sous-menu sous les deux. Le bouton epouse ainsi la hauteur de
     la rangee sans qu on ait a la deviner — un positionnement absolu aurait
     demande une hauteur ecrite en dur, fausse des que le libelle passe a la
     ligne. */
  .nav-item { display: grid; grid-template-columns: 1fr auto; }
  .nav-link-main { grid-column: 1; }
  .nav-expand { grid-column: 2; }
  .nav-dropdown { grid-column: 1 / -1; }

  .nav-expand {
    display: grid; place-items: center;
    width: 60px; padding: 0 var(--gutter) 0 0;
    box-sizing: content-box;
    border: 0; background: none; color: var(--blue); cursor: pointer;
  }
  /* Le signe est dessiné plutôt que pris dans la police d'icônes : celle-ci est
     un sous-ensemble de 66 glyphes, et un signe absent s'afficherait en toutes
     lettres. Deux traits croisés font un plus ; le trait vertical pivote d'un
     quart de tour et il ne reste qu'un moins. */
  .nav-expand-signe { position: relative; width: 17px; height: 17px; display: block; }
  .nav-expand-signe::before,
  .nav-expand-signe::after {
    content: ""; position: absolute; inset: 50% 0 auto;
    height: 2px; background: currentColor; border-radius: 2px;
    transform: translateY(-50%);
    transition: transform .5s var(--glisse);
  }
  .nav-expand-signe::after { transform: translateY(-50%) rotate(90deg); }
  .nav-item.is-open .nav-expand-signe::after { transform: translateY(-50%) rotate(0deg); }

  /* La hauteur s'anime par la rangée de grille, de 0fr à 1fr : c'est la seule
     façon d'aller jusqu'à la hauteur réelle du contenu sans la coder en dur.
     D'où le conteneur intérieur — une grille à une rangée n'en veut qu'un. */
  .nav-dropdown {
    position: static; visibility: visible; box-shadow: none; border: none;
    background: transparent; margin: 0; padding: 0; min-width: 0; max-width: none;
    display: grid; grid-template-rows: 0fr;
    opacity: 0; overflow: hidden;
    transform: none;
    transition: grid-template-rows .8s var(--glisse), opacity .45s var(--glisse);
  }
  .nav-dropdown::before { display: none; }
  .nav-item.is-open > .nav-dropdown { grid-template-rows: 1fr; opacity: 1; }
  /* Aucun rembourrage sur le conteneur : min-height ramene sa hauteur minimale
     a zero mais pas son rembourrage, qui laisserait la rangee ouverte de
     quelques pixels une fois repliee. L air du bas est donc porte par le
     dernier lien. */
  .nav-dropdown-list { min-height: 0; padding: 0; }
  .nav-dropdown-list > a:last-child { padding-bottom: 24px; }
  .nav-dropdown a {
    padding: 11px var(--gutter);
    font-size: .98rem; font-weight: 500; color: var(--text);
  }
  .nav-dropdown a:hover { background: transparent; color: var(--blue); }

  /* Le survol ne doit plus rien déclencher : au doigt, il se confond avec
     l'appui, et le sous-menu s'ouvrirait sans qu'on l'ait demandé. */
  .nav-item:hover > .nav-dropdown,
  .nav-item:focus-within > .nav-dropdown { opacity: 0; }
  .nav-item.is-open:hover > .nav-dropdown,
  .nav-item.is-open:focus-within > .nav-dropdown { opacity: 1; }
}

/* Mouvement reduit : le panneau et l accordeon prennent leur etat final sans
   transition. Le menu reste entierement utilisable — c est le mouvement qui
   disparait, pas la fonction. */
@media (max-width: 1200px) and (prefers-reduced-motion: reduce) {
  .nav-links,
  body.menu-ouvert .site-header,
  .nav-links .nav-item,
  .nav-links .nav-dropdown,
  .nav-expand-signe::before,
  .nav-expand-signe::after {
    transition-duration: .01ms;
    transition-delay: 0s;
  }

  .nav-mobile-country { display: flex; flex-direction: column; gap: 8px; padding: 16px 14px; border-top: 1px solid var(--border); margin-top: 12px; }
  .nav-mobile-country-label { font-size: 0.82rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
  .nav-mobile-country-select { padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--grey); font-family: inherit; font-size: 0.95rem; color: var(--ink); outline: none; cursor: pointer; }
}
@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .tb-contacts-text { display: none; }
  .hero-actions .btn { flex: 1 1 100%; }
  .country-grid { max-width: 360px; }
  
  .hero-latest-body { padding: 16px 20px; gap: 6px; }
  .hero-latest-body h3 { font-size: 1rem; }
  .hero-latest-body p { font-size: 0.84rem; }
}

/* --------------------------------------------------------------- Droits (Cadre Juridique) */
.droits-section { background: #fff; padding: 64px 48px; }
.droits-inner { max-width: var(--maxw); margin: 0 auto; }
.droits-header { text-align: center; margin-bottom: 40px; }
.droits-label { font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.droits-title { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 900; color: var(--ink); margin: 10px 0 14px; line-height: 1.2; }
.droits-desc { font-size: 1.05rem; color: var(--muted); max-width: 680px; margin: 0 auto; line-height: 1.6; }

.droits-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; align-items: start; }
.droits-main { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 24px; }
/* Les cartes viennent des textes legaux saisis : leur nombre depend donc de
   la base. Avec une seule fiche, auto-fit lui donne toute la largeur et la
   carte prend des airs de banniere ; on la borne pour qu'elle reste une carte. */
.droits-main:has(.droits-card:only-child) .droits-card { max-width: 520px; }

/* Carte service : blanche, centrée, icône ronde en haut, ombre douce, trait vert */
.droits-card { position: relative; background: #fff; padding: 40px 26px 34px; border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,.10); text-align: center; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.droits-card:hover { transform: translateY(-6px); box-shadow: 0 14px 34px rgba(0,0,0,.14); }
.droits-card::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 54px; height: 4px; background: var(--blue); border-radius: 3px 3px 0 0; transition: width .28s var(--ease); }
.droits-card:hover::after { width: 108px; }
.droits-card-head { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 16px; }
.droits-icon { width: 90px; height: 90px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform .2s var(--ease); }
.droits-card:hover .droits-icon { transform: scale(1.06); }
.droits-icon--blue { background: rgba(0,93,158,.10); }
.droits-icon--blue .material-symbols-outlined { font-size: 44px; color: var(--blue); }
.droits-icon--yellow { background: rgba(255,184,0,.16); }
.droits-icon--yellow .material-symbols-outlined { font-size: 44px; color: #B37400; }
.droits-card-title { font-size: 1.2rem; font-weight: 800; color: var(--ink); line-height: 1.3; margin: 0; }
/* La portee du texte : communautaire ou nationale. C'est la premiere chose
   qu'un lecteur a besoin de savoir devant une reference de loi. */
.droits-card-scope { display: block; margin-top: 8px; font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }

/* Ces deux cartes sont un apercu du cadre legal, pas le texte lui-meme :
   elles doivent rester plus courtes que le panneau de conseils qui les
   accompagne, sinon la colonne de droite parait tronquee. Le resume est
   donc borne a trois lignes — la suite se lit dans la section en dessous,
   vers laquelle le lien renvoie. */
#droits-cards .droits-card { padding: 28px 24px 26px; }
#droits-cards .droits-icon { width: 62px; height: 62px; }
#droits-cards .droits-icon .material-symbols-outlined { font-size: 30px; }
#droits-cards .droits-card-head { gap: 12px; margin-bottom: 10px; }
#droits-cards .droits-card-title { font-size: 1.05rem; }
#droits-cards .droits-card-text {
  margin: 10px auto 16px;
  font-size: .9rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.droits-card-text { font-size: .95rem; color: var(--muted); line-height: 1.6; margin: 12px auto 20px; max-width: 34ch; }
.droits-card-foot { display: flex; justify-content: center; }
.droits-link { color: var(--blue); font-weight: 700; font-size: .9rem; display: inline-flex; align-items: center; gap: 6px; transition: color .18s; }
.droits-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.droits-link .material-symbols-outlined { font-size: 18px; transition: transform .18s var(--ease); }
.droits-link:hover .material-symbols-outlined { transform: translateX(3px); }

.droits-side-card { background: var(--blue-dark); color: #fff; padding: 32px 26px; border-radius: 14px; display: flex; flex-direction: column; justify-content: center; position: sticky; top: 90px; }
.droits-side-icon { font-size: 38px; color: var(--gold); display: block; margin-bottom: 10px; }
.droits-side-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 18px; color: #fff; }
.droits-side-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.droits-side-item { display: flex; gap: 12px; align-items: flex-start; font-size: .88rem; opacity: .92; line-height: 1.45; }
.droits-side-item .material-symbols-outlined { font-size: 20px; color: var(--gold); flex-shrink: 0; margin-top: 1px; }
.droits-side-btn { display: block; text-align: center; text-decoration: none; margin-top: 24px; width: 100%; padding: 12px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 10px; color: #fff; font-weight: 700; font-size: .88rem; transition: background .2s, border-color .2s; }
.droits-side-btn:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.35); }

@media (max-width: 1200px) {
  .droits-grid { grid-template-columns: 1fr; }
  .droits-main { grid-template-columns: 1fr; }
  .droits-section { padding: 48px 24px; }
  .droits-side-card { position: static; }
}
@media (max-width: 560px) {
  .droits-section { padding: 36px 16px; }
  .droits-card-head { gap: 12px; }
  .droits-icon { width: 42px; height: 42px; }
  .droits-card { padding: 20px 18px; }
  .droits-side-card { padding: 24px 18px; }
}

/* --------------------------------------------------------------- Procédures & Services */
.proc-section { background: #f8f9fa; padding: 64px 48px; border-top: 1px solid var(--border); }
.proc-inner { max-width: var(--maxw); margin: 0 auto; }
.proc-head { margin-bottom: 32px; }
.proc-label { font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.proc-title { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 900; color: var(--ink); margin: 8px 0 0; }

.proc-steps-title { font-size: 1.1rem; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; margin: 0 0 20px; }
.proc-steps-title .material-symbols-outlined { color: var(--blue); font-size: 24px; }

.proc-timeline { position: relative; padding-left: 28px; }
.proc-timeline::before { content: ""; position: absolute; left: 19px; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, transparent, var(--border) 10%, var(--border) 90%, transparent); }

.proc-step { position: relative; margin-bottom: 24px; display: flex; align-items: flex-start; gap: 16px; }
.proc-step-num { position: absolute; left: -28px; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; flex-shrink: 0; z-index: 1; }
.proc-step--active .proc-step-num { background: var(--blue); color: #fff; border: 4px solid #f8f9fa; box-shadow: 0 2px 8px rgba(0,93,158,.2); }
.proc-step:not(.proc-step--active) .proc-step-num { background: var(--grey-2); color: var(--muted); border: 4px solid #f8f9fa; }

.proc-step-card { flex: 1; padding: 16px; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.proc-step-name { font-size: .95rem; font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.proc-step-desc { font-size: .85rem; color: var(--muted); margin: 0; line-height: 1.5; }

.proc-docs { margin-top: 20px; padding: 16px; background: rgba(0,93,158,.04); border: 1px solid rgba(0,93,158,.15); border-radius: 10px; }
.proc-docs h4 { font-size: .9rem; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 6px; margin: 0 0 10px; }
.proc-docs h4 .material-symbols-outlined { font-size: 18px; color: var(--blue); }
.proc-docs ul { list-style: disc; padding-left: 20px; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.proc-docs li { font-size: .85rem; color: var(--muted); }

@media (max-width: 1200px) {
  .proc-section { padding: 48px 24px; }
}
@media (max-width: 560px) {
  .proc-section { padding: 36px 16px; }
  .proc-step-card { padding: 12px; }
}

/* --------------------------------------------------------------- Vision + Impact */
.vi-section .container { max-width: 1400px; }
.vi-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: stretch; }

.vision-card { background: #fff; border-radius: 0; box-shadow: 0 0 20px rgba(0,0,0,.10); padding: 44px 48px; }
.vision-label { font-size: .82rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; }
.vision-title { font-size: clamp(1.35rem, 2.3vw, 1.85rem); font-weight: 800; color: var(--blue); line-height: 1.4; margin: 0 0 30px; }
.vision-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 32px; }
.vision-item { display: flex; align-items: flex-start; gap: 14px; }
.vision-item.accent-yellow { --accent: var(--gold); }
.vision-item.accent-green  { --accent: var(--green); }
.vision-item.accent-red    { --accent: var(--red); }
.vision-ico { width: 62px; height: 62px; border-radius: 50%; background: var(--blue-soft); display: grid; place-items: center; flex-shrink: 0; color: var(--blue); transition: background .28s var(--ease), color .28s var(--ease); }
.vision-ico .material-symbols-outlined { font-size: 32px; }
.vision-item:hover .vision-ico { background: var(--accent); color: #fff; }
.vision-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.vision-desc { font-weight: 700; color: var(--ink); font-size: 1rem; line-height: 1.3; }
.vision-arrow { position: relative; display: block; height: 3px; width: 42px; background: var(--accent); border-radius: 2px; margin-top: 16px; transition: width .4s var(--ease); }
.vision-arrow::after { content: ""; position: absolute; right: -1px; top: 50%; width: 9px; height: 9px; border-top: 3px solid var(--accent); border-right: 3px solid var(--accent); transform: translateY(-50%) rotate(45deg); }
.vision-item:hover .vision-arrow { width: 100%; }
.vision-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.impact-card { background: linear-gradient(160deg, var(--blue-dark), var(--blue)); color: #fff; border-radius: var(--radius-lg); box-shadow: 0 0 20px rgba(0,0,0,.12); padding: 34px 30px; display: flex; flex-direction: column; }
.impact-title { color: #fff; font-size: 1.35rem; margin: 0 0 26px; }
.impact-card .stats-grid { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
.impact-card .stat { padding: 0; text-align: left; }
.impact-card .stats-grid .stat { border-left: 0; }
.impact-card .stat-ico { margin-bottom: 8px; }
.impact-card .stat-ico .material-symbols-outlined { font-size: 26px; }
.impact-card .stat-num { font-size: clamp(1.7rem, 2.4vw, 2.1rem); }
.impact-card .stat-num::after { margin: 11px 0 9px; }
.impact-card .stat-lbl { font-size: .72rem; letter-spacing: .08em; }

@media (max-width: 900px) {
  .vi-grid { grid-template-columns: 1fr; }
  .vision-items { grid-template-columns: 1fr; }
  .vision-item { align-items: center; }
  .vision-card { padding: 30px 24px; }
}

/* --------------------------------------------------------------- Partenaires & financements */
/* Dernière section avant le pied de page, et la seule qui touche un bloc
   sombre : l'espacement courant d'une section suffit entre deux fonds clairs,
   pas contre un aplat bleu qui referme la page. Les logos s'y retrouvaient
   collés au bord. */
#partners { padding-bottom: clamp(56px, 7vw, 88px); }
.partners-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 48px; }
.partner-card { display: inline-flex; align-items: center; justify-content: center; color: inherit; transition: opacity .2s var(--ease), transform .2s var(--ease); }
.partner-card:hover { transform: translateY(-2px); opacity: .85; }
/* Quatre logos larges et un logo haut : celui de l'Union européenne empile le
   drapeau et la mention de cofinancement, ce qui le rend presque carré. La
   case est donc dimensionnée pour lui — sinon il déborde, et il débordait
   depuis toujours ; seul le recadrage du bandeau mobile l'a rendu visible.

   Les bornes de l'image sont en pixels, pas en pourcentage : sur un élément de
   grille centré, `max-height: 100%` ne se résout pas de façon fiable — c'est
   précisément ce qui laissait passer le dépassement. Les deux dimensions
   viennent d'une même paire de variables, pour que la case et son contenu ne
   puissent pas se désaccorder. */
.partner-logo {
  --case-largeur: 150px;
  --case-hauteur: 104px;
  width: var(--case-largeur); height: var(--case-hauteur);
  display: grid; place-items: center; flex-shrink: 0;
}
.partner-logo img {
  max-width: var(--case-largeur); max-height: var(--case-hauteur);
  object-fit: contain;
}
/* Sur grand écran les quatre logos tiennent côte à côte : la piste ne sert à
   rien et la copie ne doit pas doubler la rangée. */
.partners-track { display: contents; }
.partner-card--copie { display: none; }

/* --------------------------------------------------------------- Barre de recherche (nav) */
.nav-search { display: flex; align-items: center; height: 38px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: #fff; }
.nav-search .material-symbols-outlined { font-size: 18px; color: var(--muted); margin-left: 10px; }
.nav-search input { border: 0; outline: none; padding: 0 8px; font: inherit; font-size: .86rem; width: 110px; background: transparent; color: var(--ink); }
.nav-search input::placeholder { color: var(--faint); }
.nav-search button { border: 0; background: var(--blue); color: #fff; font-weight: 700; font-size: .85rem; padding: 0 12px; align-self: stretch; cursor: pointer; transition: background .16s var(--ease); }
.nav-search button:hover { background: var(--blue-hover); }
.nav { flex-wrap: nowrap; }
.nav-actions { flex-shrink: 0; }
.nav-end { flex-shrink: 0; gap: 12px; }
/* Ce resserrement vise le menu en ligne quand la place vient a manquer, entre
   1201 et 1280px. En dessous, le menu est un panneau plein ecran : la borne
   basse est indispensable, sans elle ces reglages ecrasaient ceux du panneau et
   ses rangees redevenaient minuscules. */
@media (min-width: 1201px) and (max-width: 1280px) {
  .site-header .nav { gap: 16px; }
  .brand-group { gap: 12px; }
  .nav-link-main { padding: 6px 9px; font-size: .84rem; }
  .nav-links { gap: 4px; }
  .nav-search input { width: 80px; }
  .nav-search button { padding: 0 10px; }
}
@media (max-width: 1400px) { .nav-search { display: none; } }

/* En-tete sur petit ecran.

   Les deux logos partenaires occupaient 216px a eux seuls : additionnes au nom
   OUESTAF, le groupe de marque depassait la largeur utile et repoussait le
   bouton du menu hors de l'ecran. La navigation devenait litteralement
   inatteignable au doigt. Ils s'effacent donc sous 640px — on les retrouve
   dans la section partenaires et dans le pied de page, ou ils ont la place
   d'etre lisibles. */
@media (max-width: 640px) {
  /* Les logos partenaires restent aupres du logo OUESTAF. Ils etaient masques
     faute de place ; la place existe depuis que le pays et la langue sont
     passes dans le panneau. Ils y figuraient aussi, en tete du panneau : les
     voir deux fois dans le meme mouvement n avait pas de sens. */
  .header-partner-logo img { height: 26px; }
  .site-header .nav { gap: 10px; min-height: 64px; }
  .brand-group { gap: 10px; }

  /* Les diapos etant superposees en absolu, le slider doit reserver la hauteur
     de la plus haute. Plutot que d'imposer une hauteur qui mange tout le
     premier ecran, on reprend la place sur le rembourrage vertical : la
     section suivante redevient visible sous le pli, ce qui signale au visiteur
     qu'il y a quelque chose a faire defiler. */
  .hero-slide-inner { padding-block: 28px; }
}
@media (max-width: 1200px) {
  .nav-search { display: none; }
  .nav-end > .nav-country-select { display: none; }
  .nav-actions > .lang-select { display: none; }
}

/* Focus recherche : simple (pas de ring, la bordure du cadre passe en bleu) */
.nav-search input:focus, .nav-search input:focus-visible { outline: none; box-shadow: none; }
.nav-search:focus-within { border-color: var(--blue); }

/* ============================================================ Responsive polish */
/* Paddings horizontaux homogènes : le gutter vient toujours du conteneur interne */
.droits-section, .proc-section { padding-left: 0; padding-right: 0; }
.droits-inner, .proc-inner { padding-inline: var(--gutter); }



/* ------------------------------------------------- Sections empilees (mobile) */
/* Chaque section glisse par-dessus la precedente au fil du defilement, et se
   retire de la meme maniere quand on remonte. Le mouvement est pilote par le
   defilement lui-meme : le navigateur le joue hors du fil principal, donc sans
   a-coup meme sur un telephone modeste, et il suit le doigt dans les deux sens
   sans qu on ait a l ecrire deux fois.

   Le marqueur est pose par app.js au sommet de chaque section. Sans hauteur, il
   ne deplace rien ; sa plage vaut exactement la hauteur de la fenetre, ce qui
   donne le meme tempo a toutes les sections. Attachee a la section elle-meme,
   l animation aurait dure le temps de la traverser — cinq fois plus longtemps
   sur la plus haute que sur la plus courte.

   Rien de tout cela sur grand ecran : la ou plusieurs sections tiennent dans
   l ecran a la fois, l empilement ne raconte plus rien. */
/* Le marqueur n existe que pour l effet : partout ailleurs il ne doit meme pas
   figurer dans le flux. */
.section-seuil { display: none; }

@media (max-width: 760px) {
  @supports (animation-timeline: view()) and (timeline-scope: --a) {
    @media (prefers-reduced-motion: no-preference) {
      .section-seuil {
        display: block;
        position: absolute; top: 0; left: 0;
        width: 100%; height: 0;
        pointer-events: none;
        view-timeline-name: --seuil;
        view-timeline-axis: block;
      }

      /* La classe est posee par app.js, qui sait reconnaitre une section de
         premier rang. Viser la forme du document ne tiendrait pas : sur le
         site WordPress, Elementor enveloppe chaque section dans ses propres
         conteneurs, et un selecteur d enfant direct n y trouverait rien. */
      .section-empilee {
        position: relative;
        border-radius: 22px 22px 0 0;
        timeline-scope: --seuil;
        animation: section-glisse linear both;
        animation-timeline: --seuil;
        animation-range: cover 0% cover 45%;
      }

      /* Le mouvement reste court et l ombre fait le reste : c est elle qui
         donne le relief, donc l impression d une section qui en recouvre une
         autre. Deplacement lineaire, volontairement : une courbe decrocherait
         du doigt, et c est le suivi du geste qui donne la sensation de glisse. */
      @keyframes section-glisse {
        from { transform: translateY(42px); box-shadow: 0 -20px 42px rgba(18, 35, 63, .22); }
        to   { transform: translateY(0);    box-shadow: 0 -9px 22px rgba(18, 35, 63, .07); }
      }
    }
  }
}

/* Mobile large */
@media (max-width: 760px) {
  .hero-slider { min-height: 820px; }
  .section { padding: clamp(44px, 9vw, 68px) 0; }
  .droits-section, .proc-section { padding-top: clamp(44px, 9vw, 64px); padding-bottom: clamp(44px, 9vw, 64px); }
  .section-title, .droits-title, .proc-title { font-size: clamp(1.5rem, 6vw, 2rem); }
  .section-head, .droits-header { margin-bottom: 30px; }
  /* Meme case qu au-dessus : c est le logo le plus haut qui la regle, pas la
     largeur disponible. Les variables suffisent — l image suit. */
  .partner-logo { --case-largeur: 150px; --case-hauteur: 104px; }

  /* Les quatre logos ne tiennent plus côte à côte : empilés, ils occupent un
     écran entier pour une information secondaire. La bande défile donc en
     continu, de la droite vers la gauche.

     Le raccord repose sur une copie de la série, posée à la suite. Quand la
     piste s'est décalée de sa moitié, la copie occupe exactement la place de
     l'originale : l'animation repart de zéro sans que l'oeil le voie. Pour
     que cette moitié tombe juste, l'écart est porté par chaque carte — la
     dernière comprise. Un `gap` laisserait un écart de moins, et la bande
     sauterait à chaque tour.

     Le départ est retardé : la bande arrive immobile, se laisse lire, puis
     s'anime. */
  #partners .partners-grid {
    --partenaires-ecart: 44px;
    display: block;
    overflow: hidden;
    /* Les bords s'estompent, sinon les logos semblent coupés au couteau. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  }
  #partners .partners-track {
    display: flex;
    width: max-content;
    align-items: center;
    animation: partenaires-defile 26s linear 1.6s infinite;
  }
  #partners .partners-track .partner-card { margin-right: var(--partenaires-ecart); }
  .partner-card--copie { display: inline-flex; }

  /* Au clavier, la bande s'arrête : un lien qui fuit est un lien inatteignable. */
  #partners .partners-track:focus-within { animation-play-state: paused; }
}

@keyframes partenaires-defile {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Mouvement réduit : la bande retrouve la disposition qui s'empile, plutôt
   qu'une piste figée dont les trois quarts resteraient hors de l'écran. */
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  #partners .partners-grid {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 32px;
    overflow: visible; -webkit-mask-image: none; mask-image: none;
  }
  #partners .partners-track { display: contents; animation: none; }
  #partners .partners-track .partner-card { margin-right: 0; }
  .partner-card--copie { display: none; }
}

/* Mobile */
@media (max-width: 480px) {
  .hero-slider { min-height: 760px; }
  .hero h1 { font-size: clamp(1.65rem, 8.5vw, 2.2rem); }
  .hero-sub { font-size: 1rem; }
  .vision-title { font-size: clamp(1.3rem, 6.5vw, 1.7rem); }
  .droits-card, .svc-card { padding: 32px 22px 30px; }
  .fb-card { padding: 24px 20px; }
  .contact-col { padding: 22px 20px; }
}

/* ============================================================ Resource Cards & Modal Styles */
.resource-card {
  background: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.resource-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

.rc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 8px; flex-wrap: wrap; }
.rc-city, .rc-org, .rc-sector, .rc-meta { font-size: .84rem; font-weight: 700; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.rc-title { font-size: 1.15rem; font-weight: 800; color: var(--ink); margin: 4px 0 8px; line-height: 1.3; }
.rc-desc { font-size: .9rem; color: var(--muted); margin-bottom: 12px; line-height: 1.45; }
.rc-info { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .86rem; font-weight: 600; color: var(--blue); }
.rc-info li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rc-info .material-symbols-outlined { font-size: 18px; flex-shrink: 0; }
.rc-services-list { margin-bottom: 14px; }
.rc-actions { display: flex; gap: 10px; margin-top: auto; flex-wrap: wrap; }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.badge--open, .badge--success { background: #E6EFF8; color: #005D9E; }
.badge--full, .badge--danger { background: var(--red-soft); color: var(--red); }
.badge--info { background: var(--blue-soft); color: var(--blue); }

.tag-chips-grid, .rc-services-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--grey); border: 1px solid var(--border); padding: 4px 10px; border-radius: 6px; font-size: .82rem; font-weight: 600; color: var(--text); }
.tag-chip .material-symbols-outlined { font-size: 16px; color: var(--blue); }

/* Grille des cartes de services */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; align-items: stretch; }
@media (max-width: 560px) { .services-grid { grid-template-columns: 1fr; } }

/* Procédures & Démarches Full Card */
.proc-full-card { background: #fff; border: none; border-radius: 0; padding: 32px; box-shadow: 0 4px 16px rgba(0,0,0,.06); margin-bottom: 24px; }
.proc-full-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.proc-badge { background: var(--gold-soft); color: var(--gold-text); font-weight: 800; font-size: .82rem; padding: 4px 12px; border-radius: 20px; text-transform: uppercase; }
.proc-fee { font-weight: 700; color: var(--blue); font-size: .9rem; display: flex; align-items: center; gap: 4px; }
.proc-full-title { font-size: 1.35rem; font-weight: 800; color: var(--ink); margin-bottom: 20px; }

.proc-steps-timeline { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.pst-step { display: flex; gap: 14px; align-items: flex-start; }
.pst-num { width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .9rem; flex-shrink: 0; }
.pst-body h4 { font-size: .98rem; font-weight: 700; margin: 0 0 2px; }
.pst-body p { font-size: .88rem; color: var(--muted); margin: 0; }

.proc-docs-box { background: var(--blue-soft); border-radius: 0; padding: 18px 22px; margin-bottom: 18px; }
.proc-docs-box h4 { font-size: .95rem; font-weight: 800; color: var(--blue); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.proc-docs-box ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.proc-docs-box li { font-size: .88rem; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
.proc-docs-box li .material-symbols-outlined { color: var(--blue); font-size: 18px; }

/* Dispositions Légales Text Card */
/* La section reprend la disposition de la page d'un texte : le dernier saisi
   deroule a gauche, les autres en colonne a droite. La difference tient en une
   ligne — ici on ne montre qu'une partie, les articles cles et le PDF officiel
   restent sur la page du texte. */
.legal-lead { background: transparent; }
.legal-layout-seul .lt-summary { max-width: 78ch; }
.lt-kicker { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-text); }
.lt-kicker .material-symbols-outlined { font-size: 19px; }
.lt-title { font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 800; color: var(--ink); margin: 10px 0 12px; line-height: 1.25; }
/* Jusqu'a douze lignes, puis la zone defile sur elle-meme : un resume long
   n'est plus tronque, et n'entraine pas la page avec lui. */
.lt-summary {
  font-size: 1.08rem; font-weight: 600; color: var(--text);
  margin: 0 0 20px; max-width: 70ch;
  line-height: 1.6;
  max-height: calc(1.6em * 12);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
}
.lt-summary::-webkit-scrollbar { width: 5px; }
.lt-summary::-webkit-scrollbar-thumb { background: var(--grey-2); border-radius: 3px; }
.lt-summary::-webkit-scrollbar-track { background: transparent; }
/* Les articles cles remontent dans la section : le resume seul faisait trois
   lignes, ce qui ne donnait pas la mesure d'un texte de loi. La zone se borne
   et defile — un protocole peut citer quinze articles, la page ne doit pas les
   subir. */
.lt-articles-title { font-size: .8rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.lt-articles { display: flex; flex-direction: column; gap: 10px; background: var(--grey); padding: 16px; border-radius: 0; }
#legal-texts-list .lt-articles { max-height: 260px; overflow-y: auto; overscroll-behavior: contain; margin-bottom: 20px; }
#legal-texts-list .lt-articles::-webkit-scrollbar { width: 5px; }
#legal-texts-list .lt-articles::-webkit-scrollbar-thumb { background: var(--grey-2); border-radius: 3px; }
#legal-texts-list .lt-articles::-webkit-scrollbar-track { background: transparent; }
.lt-article { font-size: .88rem; line-height: 1.45; }
.lt-article strong { color: var(--blue-dark); }

/* Sur mobile, ces deux zones bornées deviennent un piège. Le doigt tombe
   forcément dessus — elles occupent presque toute la largeur — et
   `overscroll-behavior: contain` fait exactement ce qu'on lui demande :
   il retient le défilement. La page se bloque, et le lecteur croit que le
   site a cessé de répondre.

   Le raisonnement qui justifiait la borne ne tient d'ailleurs plus ici. Sur
   grand écran elle empêche un texte long de repousser la colonne voisine ;
   en une seule colonne, il n'y a pas de voisine à protéger. Le texte se
   déroule donc entièrement, et c'est la page qui défile. */
@media (max-width: 760px) {
  .lt-summary,
  #legal-texts-list .lt-articles {
    max-height: none;
    overflow-y: visible;
    overscroll-behavior: auto;
    padding-right: 0;
  }
}

/* Detail Modal System */
.modal-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(18,35,63,.6); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); }
.modal-backdrop.is-visible { opacity: 1; pointer-events: auto; }
.modal-window { background: #fff; border-radius: var(--radius-lg); max-width: 640px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); position: relative; padding: 32px; transform: translateY(12px); transition: transform .25s var(--ease); }
.modal-backdrop.is-visible .modal-window { transform: translateY(0); }
.modal-close { position: absolute; top: 20px; right: 20px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--grey-2); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background .16s; }
.modal-close:hover { background: var(--border); }
.modal-header-banner { border-bottom: 1px solid var(--border); padding-bottom: 16px; margin-bottom: 20px; }
.modal-header-banner h2 { font-size: 1.4rem; margin: 8px 0 4px; }
.modal-sub { font-size: .9rem; color: var(--muted); margin: 0; display: flex; align-items: center; gap: 4px; }
.modal-section { margin-bottom: 22px; }
.modal-section h4 { font-size: 1rem; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.modal-footer-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); }

/* --------------------------------------------------------------- Section Unifiée Services d'Urgence */
.services-unified-wrapper { display: flex; flex-direction: column; gap: 40px; margin-top: 16px; }
.service-category-block { background: transparent; border: none; padding: 0; box-shadow: none; scroll-margin-top: 90px; }
.category-subhead { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding-bottom: 0; border-bottom: none; }
.category-subhead-icon { width: 48px; height: 48px; border-radius: var(--radius-sm); background: rgba(10, 75, 148, 0.08); color: var(--blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.category-subhead-icon .material-symbols-outlined { font-size: 26px; }
.category-subhead-text h3 { font-size: 1.25rem; font-weight: 800; margin: 0; color: var(--ink); }
.category-subhead-text p { font-size: 0.88rem; color: var(--muted); margin: 2px 0 0 0; }

/* ============================================================ Qui Sommes-Nous & Visibilité Partners / Bailleurs */
:root {
      --font-lato:      'Lato', sans-serif;
  }

/* Country Flag Images */
.country-flag-img {
  width: 22px;
  height: 15px;
  object-fit: cover;
  border-radius: 2px;
  vertical-align: middle;
  display: inline-block;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.footer-flags {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.footer-flags .country-flag-img {
  width: 30px;
  height: 20px;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

/* Largeur minimale du menu deroulant en ligne. Bornee au grand ecran : dans le
   panneau mobile le sous-menu occupe la largeur de la page, et une largeur
   minimale n y ferait que risquer un debordement sur les petits telephones. */
@media (min-width: 1201px) {
  .nav-dropdown { min-width: 210px; }
}

/* ============================================================
   Qui sommes-nous — page éditoriale (inspiration Flyward)
   ============================================================ */

/* --- HERO --- */
.about-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #00457E 0%, #005D9E 60%, #FFB800 100%);
  color: #fff;
  padding: 84px 0 64px;
  text-align: center;
}
.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.09) 0, transparent 42%),
    radial-gradient(circle at 90% 80%, rgba(255,184,0,.16) 0, transparent 46%);
}
.about-hero .container { position: relative; z-index: 1; }

.about-breadcrumb {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: .85rem;
  color: rgba(255,255,255,.72);
  margin-bottom: 30px;
}
.about-breadcrumb a { color: rgba(255,255,255,.9); font-weight: 600; transition: color .16s; }
.about-breadcrumb a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.about-breadcrumb .material-symbols-outlined { font-size: 15px; }
.about-breadcrumb [aria-current="page"] { color: var(--gold); font-weight: 700; }

.about-hero h1 {
  color: #fff;
  font-family: var(--font-title);
  font-size: clamp(2.6rem, 5.2vw, 4.4rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 10px auto 0;
}
.about-hero-sub {
  font-size: 1.15rem;
  max-width: 720px;
  margin: 18px auto 0;
  opacity: .95;
}

/* Index numéroté du hero (01 · 02 · 03) */
.about-index-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 36px;
}
.about-index-nav a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 24px;
  color: rgba(255,255,255,.88);
  font-weight: 700;
  font-size: .98rem;
  border-left: 1px solid rgba(255,255,255,.28);
  transition: color .16s;
}
.about-index-nav a:first-child { border-left: 0; }
.about-index-nav a:hover { color: var(--gold); }
.about-index-nav a span {
  font-family: var(--font-title);
  font-size: .8rem;
  color: var(--gold);
  letter-spacing: .04em;
}
@media (max-width: 720px) {
  .about-index-nav { flex-direction: column; align-items: center; }
  .about-index-nav a { border-left: 0; border-top: 1px solid rgba(255,255,255,.28); padding: 12px 8px; }
  .about-index-nav a:first-child { border-top: 0; }
}

/* --- SECTIONS ÉDITORIALES --- */
.about-editorial { padding: 96px 0 80px; }
.about-editorial--alt { background: var(--grey); }

.about-editorial-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: start;
}
@media (max-width: 992px) {
  .about-editorial-grid { grid-template-columns: 1fr; gap: 36px; }
}

.about-editorial-head { position: sticky; top: 96px; }
@media (max-width: 992px) {
  .about-editorial-head { position: static; }
}

.about-index-num {
  display: block;
  font-family: var(--font-title);
  font-size: clamp(2.8rem, 4.4vw, 4.2rem);
  line-height: 1;
  color: var(--blue);
  opacity: .16;
  margin-bottom: 20px;
}
.about-editorial--alt .about-index-num { color: var(--gold); }
#projet-ouestaf .about-index-num { color: var(--blue-dark); }

.about-editorial-head h2 {
  font-family: var(--font-title);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height: 1.15;
  color: var(--ink);
  margin: 6px 0 10px;
}
.about-head-tagline {
  color: var(--muted);
  font-weight: 600;
  font-size: 1.04rem;
  line-height: 1.55;
  margin: 0 0 26px;
}
.about-editorial-head .btn { margin-top: 4px; }

.about-editorial-body .partner-intro {
  font-size: 1.12rem;
  line-height: 1.75;
  color: var(--text);
  margin-bottom: 8px;
}

/* Chiffres clés — bande typographique à filets */
.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 34px 0 6px;
}
.about-stat { text-align: center; padding: 24px 16px 22px; }
.about-stat + .about-stat { border-left: 1px solid var(--border); }
.about-stat .stat-num { color: var(--ink); font-size: clamp(1.9rem, 3.2vw, 2.7rem); }
.about-stat .stat-num::after { background: var(--gold); margin: 13px auto 12px; width: 26px; }
.about-stat .stat-lbl {
  color: var(--muted);
  font-weight: 700;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
@media (max-width: 720px) {
  .about-stats { grid-template-columns: 1fr 1fr; }
  .about-stat + .about-stat { border-left: 0; }
  .about-stat:nth-child(even) { border-left: 1px solid var(--border); }
  .about-stat:nth-child(n+3) { border-top: 1px solid var(--border); }
}

/* Blocs de contenu */
.about-block { margin-top: 46px; }
.about-block-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-title);
  font-size: 1.32rem;
  color: var(--ink);
  margin-bottom: 14px;
}
.about-block-title .material-symbols-outlined { font-size: 26px; color: var(--gold); }
#wildaf .about-block-title .material-symbols-outlined { color: var(--gold); }
#projet-ouestaf .about-block-title .material-symbols-outlined { color: var(--blue); }

.about-media { margin: 22px 0 10px; }
.about-media img {
  display: block;
  width: 100%;
  max-width: 860px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius);
}
.about-media-caption {
  font-size: .92rem;
  color: var(--muted);
  text-align: center;
  margin: 14px 0 16px;
}

/* Pays d'intervention — flux typographique */
.about-places {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.about-places li {
  font-weight: 500;
  font-size: .97rem;
  color: var(--text);
  line-height: 1.7;
}
.about-places li + li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  margin: 0 16px;
  vertical-align: middle;
}

/* Domaines d'intervention — liste indexée */
.about-domains {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}
.about-domain {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 17px 4px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
}
.about-domain-num {
  font-family: var(--font-title);
  font-size: .85rem;
  color: var(--muted);
  min-width: 30px;
}
.about-domain .material-symbols-outlined { font-size: 26px; color: var(--gold); }
.about-domain:nth-child(2) .material-symbols-outlined { color: var(--gold); }
.about-domain:nth-child(3) .material-symbols-outlined { color: #005D9E; }
.about-domain:nth-child(4) .material-symbols-outlined { color: #D8232A; }
.about-domain:nth-child(5) .material-symbols-outlined { color: #007BC2; }

/* Mission & Vision — colonnes éditoriales */
.about-mvv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  margin-top: 48px;
}
@media (max-width: 720px) {
  .about-mvv { grid-template-columns: 1fr; gap: 36px; }
}
.about-mvv-item { border-top: 3px solid var(--gold); padding-top: 16px; }
.about-mvv-item:nth-child(2) { border-top-color: var(--blue); }
.about-mvv-item h3 {
  font-family: var(--font-title);
  font-size: 1.22rem;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.about-mvv-item:nth-child(2) h3 { color: var(--blue); }
.about-mvv-item h3 .material-symbols-outlined { font-size: 24px; }
.about-mvv-item p { font-size: .97rem; line-height: 1.7; color: var(--text); margin: 0; }

/* Rangée CTA & note de présence */
.about-cta-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 36px;
}
.about-presence-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .9rem;
  color: var(--muted);
}
.about-presence-note .material-symbols-outlined { font-size: 18px; color: var(--gold); }

/* Bailleurs — liste à filets */
.about-funding {
  margin-top: 24px;
  border-top: 1px solid var(--border);
}
.about-funder {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  padding: 22px 4px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
}
.about-funder img {
  height: 58px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
}
.about-funder-info { min-width: 0; }
.about-funder-name {
  display: block;
  font-weight: 800;
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.4;
}
.about-funder-desc {
  display: block;
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 2px;
}
.about-funder .material-symbols-outlined {
  font-size: 22px;
  color: var(--blue);
  transition: transform .2s var(--ease);
}
.about-funder:hover .material-symbols-outlined { transform: translateX(4px); }
.about-funder:hover .about-funder-name { text-decoration: underline; text-underline-offset: 3px; }

/* Mention obligatoire — note à barre latérale */
.about-disclaimer {
  margin-top: 44px;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--blue);
  font-size: .88rem;
  line-height: 1.6;
  color: var(--muted);
}
.about-disclaimer strong {
  display: block;
  color: var(--blue-dark);
  font-weight: 800;
  margin-bottom: 4px;
}
.about-disclaimer p { margin: 0; }

/* Grille de fond du hero (inspiration Flyward) */
.about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M56 0H0v56' fill='none' stroke='%23ffffff' stroke-opacity='.14'/%3E%3C/svg%3E");
  background-size: 56px 56px;
}

/* Scrollspy — lien actif dans l'index numéroté */
.about-index-nav a.active { color: var(--gold); }

/* Bande CTA de clôture */
.about-cta-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #00457E 0%, #005D9E 60%, #FFB800 100%);
  color: #fff;
  text-align: center;
  padding: 88px 0;
}
.about-cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 85% 15%, rgba(255,184,0,.18) 0, transparent 45%);
}
.about-cta-band .container { position: relative; z-index: 1; }
.about-cta-band h2 {
  font-family: var(--font-title);
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.15;
  color: #fff;
  margin: 8px auto 0;
}
.about-cta-band p {
  font-size: 1.08rem;
  max-width: 640px;
  margin: 14px auto 0;
  opacity: .95;
}
.about-cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

/* ====================================================== Actualités */
/* Un blanc pur mettait les cartes à plat. Le fond tire très légèrement vers
   l'orange de la charte — assez pour détacher les cartes, pas assez pour
   concurrencer le contenu. */
.section:has(> .container > .news-grid),
/* Le fond chaud des actualites est desormais pose avec les autres,
   dans le rythme des fonds en fin de feuille. */
.section:has(> .container > .article-layout) { background: #FEF9F3; }
/* Le corps de l'article revient au blanc : c'est la zone de lecture, elle doit
   rester la plus neutre de la page. */
.article-body, .article-head { background: transparent; }
/* Une actualité est un article, pas une fiche média : la carte annonce un
   sujet et renvoie vers sa page. Les angles sont volontairement quasi droits,
   registre institutionnel plutôt que magazine. */
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 26px; }
.news-card { display: flex; flex-direction: column; background: #fff; border-radius: 1px; overflow: hidden; color: inherit; transition: box-shadow .22s var(--ease), transform .2s var(--ease); }
/* Elementor applique « box-shadow: none » à tous ses liens, et sa règle
   l'emporte sur un sélecteur de classe seul. La carte étant un lien, il faut
   un cran de spécificité de plus pour que l'ombre tienne. */
.news-grid .news-card { box-shadow: 0 4px 16px rgba(18,35,63,.13); }
.news-grid .news-card:hover { box-shadow: 0 16px 38px rgba(18,35,63,.20); transform: translateY(-3px); }
/* La vignette remplit toute la case, quelle que soit sa forme : une grille
   centree laissait l'image a sa taille et des bandes grises autour. */
.news-thumb { position: relative; aspect-ratio: 16/10; background: var(--grey-2); overflow: hidden; }
.news-thumb img, .news-thumb video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
/* Elementor et WordPress posent « img { height: auto; max-width: 100% } » avec
   une priorite egale ou superieure : l'image ne remplissait plus sa case et
   laissait une bande grise. La vignette doit la remplir quoi qu'il arrive. */
.news-thumb > img, .news-thumb > video,
.hero-latest-media > img, .hero-latest-media > video {
  width: 100% !important; height: 100% !important; max-width: none !important;
  object-fit: cover !important;
}
.news-card:hover .news-thumb img, .news-card:hover .news-thumb video { transform: scale(1.03); }
.news-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.news-meta { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; color: var(--muted); }
.news-meta .material-symbols-outlined { font-size: 16px; color: var(--gold); }
.news-country { padding: 2px 8px; background: var(--gold-soft); color: var(--gold-text); border-radius: 1px; font-weight: 700; }
.news-card h3 { font-size: 1.1rem; line-height: 1.35; margin: 0; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-height: 4.5em; }
.news-card:hover h3 { color: var(--blue); }
/* Les textes sont saisis librement : on borne la carte pour que la grille
   reste alignée, le détail se lisant dans l'article. */
.news-excerpt { margin: 0; font-size: .92rem; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-height: 4.4em; }
.news-more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .88rem; color: var(--gold-text); }
.news-more .material-symbols-outlined { font-size: 18px; }

/* ------------------------------------------------ Page d'une actualité */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; align-items: start; }
.article-head { margin-bottom: 26px; }
.article-kicker { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-text); }
.article-head h1 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin: 10px 0 12px; }
.article-excerpt { font-size: 1.08rem; color: var(--text); font-weight: 600; margin: 0; }
.article-body { font-size: 1rem; line-height: 1.75; color: var(--text); }
.article-body p { margin: 0 0 1.15em; }
.article-media { margin: 26px 0; }
.article-media img, .article-media video { width: 100%; border-radius: 1px; display: block; }
/* Le lecteur garde un format 16:9 des l'affichage, sans attendre la video :
   sinon il reste a 150 px de haut tant que le fichier se charge. */
.article-media video { height: auto !important; max-width: 100% !important; aspect-ratio: 16 / 9; background: #000; object-fit: contain; }
.article-media audio { width: 100%; }
.article-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background: #000; border-radius: 1px; }
.article-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.article-media figcaption { margin-top: 8px; font-size: .85rem; color: var(--muted); font-style: italic; }
.article-aside h2 { font-size: 1.02rem; padding-bottom: 12px; border-bottom: 2px solid var(--grey-2); margin-bottom: 6px; }
.related-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--grey-2); color: inherit; }
.related-item:last-child { border-bottom: 0; }
.related-thumb { flex: 0 0 74px; height: 56px; background: var(--grey-2); display: grid; place-items: center; overflow: hidden; border-radius: 1px; }
.related-thumb img, .related-thumb video { width: 100%; height: 100%; object-fit: cover; }
.related-thumb .material-symbols-outlined { font-size: 22px; color: var(--faint); }
.related-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.related-date { font-size: .76rem; color: var(--muted); font-weight: 600; }
.related-title { font-size: .9rem; font-weight: 700; color: var(--ink); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.related-item:hover .related-title { color: var(--blue); }
.empty-note { display: flex; align-items: center; gap: 8px; color: var(--muted); }

@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; gap: 34px; }
}

/* --------------------------------------------------------- Fond des sections */
/* Une seule teinte pour tout le portail, celle qui portait les actualites. Les
   sections alternaient auparavant deux gris et un fond blanc ; l'alternance
   decoupait la page en bandes et faisait paraitre chaque section comme un bloc
   rapporte plutot que comme une partie d'un meme document.

   Les sections sont nommees une a une plutot que visees par leur classe : elles
   portent des modificateurs de teinte poses par les widgets Elementor, et c'est
   l'ancre qui reste le seul identifiant stable entre la maquette statique et
   ces widgets. Une ancre renommee retombe sur la regle de classe, qui donne la
   meme teinte — degradation invisible, pas de page cassee. */
#droits,
#procedures,
#dispositions-legales,
#services,
#media,
.vi-section,
#contacts,
#feedback             { background: var(--warm); }

/* Seule exception : les partenaires restent sur blanc. Leurs logos sont
   fournis detoures sur blanc, pas sur transparent — pose sur la teinte chaude,
   chacun trainait son propre rectangle plus clair. */
#partners             { background: var(--bg); }

/* --------------------------------------------- Reseau d'assistance : lignes */
/* Une carte par structure coutait 433px sur ordinateur et 391 sur telephone,
   dont un tiers de description. Trente fiches faisaient quinze ecrans de haut
   sur mobile, pour une rubrique sur trois. La description a rejoint la fiche
   complete, ou elle etait deja ; la liste ne garde que ce qu'on cherche dans
   l'urgence. */
/* Le mode ligne n'est pose qu'au-dela du seuil (voir SEUIL_COMPACT dans
   app.js) : en dessous, la grille de cartes reprend la main. */
#centres-grid.rows-mode, #legal-assistance-grid.rows-mode, #ngos-grid.rows-mode {
  display: flex;
  flex-direction: column;
  /* Chaque ligne occupe toute la largeur. Sans cela, une ligne sans bouton
     d'appel se retrecit a son contenu et se retrouve centree, decalee des
     autres. */
  align-items: stretch;
  gap: 0;
  background: #fff;
  border: 1px solid var(--grey-2);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(18, 35, 63, .05);
}

.row-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--grey-2);
  transition: background .16s var(--ease);
}
.row-item:last-child { border-bottom: 0; }
.row-item:hover { background: var(--grey); }
.row-item.is-hidden { display: none; }

/* L'etat ne repose pas sur la seule couleur : la pastille est doublee du mot. */
.row-state {
  display: inline-flex; align-items: center; gap: 7px;
  flex: 0 0 auto; min-width: 116px;
  font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.row-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.row-state--open .row-dot { background: var(--green); }
.row-state--full .row-dot { background: #C0392B; }
.row-state--info .row-dot { background: var(--blue); }
.row-state--ngo  .row-dot { background: var(--gold); }
.row-state--open { color: var(--green); }
.row-state--full { color: #C0392B; }
.row-state--info { color: var(--blue); }
.row-state--ngo  { color: var(--gold-text); }

.row-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.row-name { font-size: .98rem; font-weight: 700; color: var(--ink); line-height: 1.35; }
.row-meta { font-size: .84rem; color: var(--muted); }

.row-call {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  padding: 8px 14px; border-radius: 2px;
  background: var(--gold); color: #12233F; font-size: .86rem; font-weight: 700;
  text-decoration: none; transition: background .16s var(--ease);
}
.row-call:hover { background: #E09E00; }
.row-call .material-symbols-outlined { font-size: 18px; }

.row-open {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 2px;
  border: 1px solid var(--grey-2); background: #fff; color: var(--blue);
  cursor: pointer; transition: background .16s var(--ease), border-color .16s var(--ease);
}
.row-open:hover { background: var(--blue-soft); border-color: var(--blue-soft); }
.row-open .material-symbols-outlined { font-size: 19px; }

/* Sur telephone, la ligne se plie : l'etat et le nom en haut, les actions en
   bas, chacune assez large pour le pouce. */
@media (max-width: 720px) {
  .row-item { flex-wrap: wrap; gap: 8px 10px; padding: 13px 15px; }
  /* L'etat et les deux actions partagent la premiere ligne, le nom prend la
     seconde. Le numero cede la place a sa seule icone : le taper compose
     l'appel, l'afficher en entier coutait une ligne par fiche. */
  .row-state { order: 1; min-width: 0; flex: 1 1 auto; }
  .row-call  { order: 2; padding: 8px 12px; }
  .row-call span:not(.material-symbols-outlined) { display: none; }
  .row-call .material-symbols-outlined { font-size: 20px; }
  .row-open  { order: 3; width: 40px; height: 36px; }
  .row-body  { order: 4; flex: 1 1 100%; }
}

/* ------------------------------------------------- Animations : finitions */
/* Le systeme de revelation existe plus haut ; on ne le refait pas. Ce qui suit
   ne fait qu'ajouter la matiere qui manquait : des etats qui glissent au lieu
   de sauter, et un decalage sur les lignes d'une meme liste.

   Rien de spectaculaire : sur un portail consulte dans l'urgence, une animation
   qui attire l'oeil est une animation qui retarde la lecture. */

/* Les lignes se posent l'une apres l'autre. Le decalage est plafonne : au-dela
   de cinq, attendre son tour deviendrait une attente. */
.rows-mode .row-item:nth-child(2) { transition-delay: .05s; }
.rows-mode .row-item:nth-child(3) { transition-delay: .10s; }
.rows-mode .row-item:nth-child(4) { transition-delay: .15s; }
.rows-mode .row-item:nth-child(n+5) { transition-delay: .20s; }

/* Les cartes se soulevent au survol, sans bondir. */
.resource-card { transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.resource-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(18, 35, 63, .12); }

/* Les commandes repondent au doigt comme a la souris. */
.btn { transition: transform .16s var(--ease), background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease); }
.btn:active, .row-call:active, .row-open:active { transform: translateY(1px); }

/* Les fleches avancent vers ce qu'elles ouvrent. */
.row-open .material-symbols-outlined,
.link-arrow .material-symbols-outlined { transition: transform .18s var(--ease); }
.row-item:hover .row-open .material-symbols-outlined { transform: translateX(2px); }
.link-arrow:hover .material-symbols-outlined { transform: translateX(3px); }

/* Le titre de section souligne son intitule a l'arrivee. */
.eyebrow { transition: letter-spacing .3s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .rows-mode .row-item { transition-delay: 0s !important; }
  .resource-card:hover,
  .btn:active, .row-call:active, .row-open:active,
  .row-item:hover .row-open .material-symbols-outlined,
  .link-arrow:hover .material-symbols-outlined { transform: none !important; }
}

/* ------------------------------------------- Reglages, dans le panneau */
/* Le pays et la langue vivent dans l en-tete sur grand ecran. Sur telephone,
   l en-tete n a plus la place de les tenir a cote des logos, et ils sont de
   toute facon des reglages, pas de la navigation : app.js les deplace dans le
   panneau plutot que d en poser une seconde copie — deux selecteurs portant le
   meme identifiant, c est la garantie qu un des deux cessera de fonctionner. */
.nav-tools { display: none; }

@media (max-width: 1200px) {
  .nav-tools {
    display: grid;
    gap: 18px;
    padding: 26px var(--gutter) 0;
    margin-top: 8px;
    opacity: 0; transform: translateY(16px);
    transition: opacity .55s var(--glisse) .3s, transform .55s var(--glisse) .3s;
  }
  .nav-links.open .nav-tools { opacity: 1; transform: none; }

  .nav-reglage { display: grid; gap: 7px; }
  .nav-reglage-titre {
    font-size: .74rem; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted);
  }
  /* Le selecteur reprend la forme des champs du portail plutot que celle,
     minimale, qu il a dans l en-tete : ici il est une commande a part entiere,
     pas une mention discrete posee en bout de barre. */
  .nav-tools select {
    appearance: none; -webkit-appearance: none;
    width: 100%;
    padding: 13px 42px 13px 15px;
    border: 1px solid var(--border); border-radius: 2px;
    background-color: #fff; color: var(--ink);
    font: inherit; font-weight: 700; font-size: 1rem;
    cursor: pointer; outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23005D9E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 13px;
  }
  .nav-tools select:focus-visible { border-color: var(--blue); }
}
/* --------------------------------------------------- Mentions legales */
/* Les sections se deplient une a une : personne ne lit un mur de conditions,
   et le lecteur qui cherche un point precis le trouve plus vite dans un
   sommaire. <details> s'en charge sans JavaScript. */
.ml-page { background: var(--grey); padding: clamp(30px, 5vw, 56px) 0 clamp(50px, 7vw, 80px); }
.ml-inner { max-width: 860px; }
.ml-page .breadcrumb { margin-bottom: 22px; font-size: .85rem; color: var(--muted); }

.ml-head { margin-bottom: 30px; }
.ml-head h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 0 0 14px; }
.ml-intro { font-size: 1.02rem; color: var(--text); line-height: 1.7; margin: 0; }

.ml-sections { display: flex; flex-direction: column; gap: 12px; }

.ml-section { background: #fff; border: 1px solid var(--grey-2); border-radius: 2px; overflow: hidden; }
.ml-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 20px; cursor: pointer;
  background: var(--blue); color: #fff;
  font-size: .98rem; font-weight: 700;
  list-style: none;
  transition: background .18s var(--ease);
}
.ml-summary::-webkit-details-marker { display: none; }
.ml-summary:hover { background: var(--blue-hover); }
.ml-summary .material-symbols-outlined { font-size: 22px; transition: transform .22s var(--ease); flex-shrink: 0; }
.ml-section[open] .ml-summary .material-symbols-outlined { transform: rotate(180deg); }

/* Le focus doit rester visible : ces sections se parcourent au clavier. */
.ml-summary:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }

.ml-body { padding: 20px 22px 24px; font-size: .96rem; line-height: 1.75; color: var(--text); }
.ml-body p { margin: 0 0 14px; }
.ml-body p:last-child { margin-bottom: 0; }
.ml-body strong { color: var(--ink); }
.ml-body ul { margin: 0 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
/* Les cles de stockage sont citees telles quelles : le lecteur doit pouvoir
   les retrouver dans les outils de son navigateur. */
.ml-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; background: var(--grey); padding: 2px 6px; border-radius: 2px; color: var(--blue-dark); }

.ml-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ------------------------------------------------ Avis d'acces (modale) */
/* Bloquante par construction : elle couvre la page, le corps est fige et le
   clavier reste enferme dans la boite. Le seul chemin qui en sort sans
   accepter mene aux mentions — la seule page ou elle ne s'affiche pas. */
.consent {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 40px);
  /* Aucun voile derriere : ni teinte ni flou. La couche reste en place et
     continue d intercepter les clics — c est elle qui rend l avis bloquant —
     mais elle ne se voit pas. La page reste lisible derriere, et c est l ombre
     portee de la boite qui la detache. */
  background: transparent;
  opacity: 0;
  /* Le fondu ne suit pas la courbe du menu : celle-ci decelere si fort que
     l opacite est presque a zero au tiers du parcours — la boite finissait sa
     course sans qu on la voie. Une courbe plus reguliere la laisse partir. */
  transition: opacity .42s var(--ease);
}
.consent.is-visible { opacity: 1; }
.consent[hidden] { display: none; }

.consent-box {
  /* Resserree depuis 720px : le texte de l avis fait 14px, et sur 720 il
     donnait des lignes de pres de cent caracteres — au-dela de ce que l oeil
     suit sans se perdre. Cette largeur borne aussi les boutons, qui occupent
     toute la largeur disponible. */
  width: min(520px, 100%);
  max-height: 88vh;
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
  /* La boite monte et se pose, sur la meme courbe que le menu : un depart vif,
     un arret tres lent. Elle repart par ou elle est venue — la fermeture n'est
     pas une disparition seche, le regard suit ce qui s'en va. Le retrait de
     l'attribut hidden attend la fin de la course, sinon il la couperait. */
  transform: translateY(18px) scale(.985);
  transform-origin: center top;
  transition: transform .42s var(--glisse);
  overflow: hidden;
}
.consent.is-visible .consent-box { transform: none; }

/* L'interieur reprend l'avis de WeWorld, mesure sur leur page : un panneau
   blanc sans bandeau de couleur, un texte gris de 14px sur 24 d'interligne, et
   des actions empilees sur toute la largeur plutot qu'alignees a droite.

   Le bandeau bleu disparait donc, mais pas le titre : il nomme la boite pour
   les lecteurs d'ecran, et le retirer laisserait un dialogue anonyme. Il
   devient une ligne de texte, sans fond. */
.consent-head {
  margin: 0;
  padding: 30px 30px 0;
  color: var(--ink);
  font-size: 1.05rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
}

.consent-body {
  padding: 16px 30px 4px;
  overflow-y: auto;
  font-size: .875rem; line-height: 1.72; color: #4A4A4A;
}
.consent-body p { margin: 0 0 14px; }
.consent-body p:last-child { margin-bottom: 0; }

/* Empilees et pleine largeur, quelle que soit la taille de l'ecran : c'est la
   forme de leur avis, et elle vaut mieux qu'un alignement a droite — la main
   n'a pas a viser, et l'ordre de lecture donne l'ordre d'importance. */
.consent-actions {
  display: grid; gap: 12px;
  padding: 22px 30px 30px;
}
.consent-actions > .btn {
  width: 100%;
  justify-content: center;
  border-radius: 3px;
  font-size: .82rem; font-weight: 600;
  text-transform: uppercase;
  padding: 14px 16px;
}
.consent-actions > .btn--primary {
  background: var(--gold); border-color: var(--gold); color: #12233F; font-weight: 700;
}
.consent-actions > .btn--primary:hover { background: #E09E00; border-color: #E09E00; color: #12233F; }
/* Le second choix ne se dispute pas la vedette : un contour, pas un aplat. */
.consent-actions > .btn--outline {
  background: transparent;
  border: 1.6px solid #4A4A4A;
  color: #4A4A4A;
}
.consent-actions > .btn--outline:hover { background: var(--grey); color: var(--ink); }

@media (max-width: 560px) {
  .consent-head { padding: 26px 22px 0; }
  .consent-body { padding: 14px 22px 4px; }
  .consent-actions { padding: 20px 22px 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .consent, .consent-box { transition: none; }
  .consent-box { transform: none; }
}


/* -------------------------------------------------------- Retour en haut */
/* Discret tant qu'on lit, franc des qu'on le cherche. Il se tient au-dessus du
   pied de page mais sous l'avis de premiere visite, qui doit rester lisible. */
.back-to-top {
  position: fixed;
  right: clamp(14px, 3vw, 28px);
  bottom: clamp(14px, 3vw, 28px);
  z-index: 150;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 0; border-radius: 2px;
  background: var(--blue); color: #fff;
  box-shadow: 0 6px 20px rgba(18, 35, 63, .26);
  cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s, background .18s var(--ease);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--blue-hover); }
.back-to-top:active { transform: translateY(1px); }
.back-to-top:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
/* La fleche du sous-ensemble pointe vers le bas : on la retourne. */
.back-to-top .material-symbols-outlined { font-size: 26px; transform: rotate(180deg); }

/* Quand l'avis occupe le bas de l'ecran, le bouton lui cede la place. */
.consent.is-visible ~ .back-to-top,
body:has(.consent.is-visible) .back-to-top { bottom: clamp(96px, 18vw, 120px); }

@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: opacity .01s, visibility .01s; transform: none; }
  .back-to-top:active { transform: none; }
}

/* ------------------------------------------------------------ Marque */
/* Le logo remplace le mot « OUESTAF ». Deux fichiers, choisis selon le fond :
   la version bleue sur l'en-tete clair, la version blanche sur le pied de page
   et la page d'atterrissage. Les dimensions sont declarees dans le balisage
   pour que la place soit reservee avant le chargement — sans quoi l'en-tete
   sursaute a l'arrivee de l'image. */
/* Le logo enferme le mot dans un cercle : a hauteur egale, le texte y est plus petit
   que l'ancien mot-marque. On lui donne quelques pixels de plus pour rester lisible. */
.brand-logo { height: 42px; width: auto; display: block; }
.footer-brand .brand-logo { height: 46px; margin-bottom: 14px; }
.landing-top .brand-logo { height: 42px; }

@media (max-width: 640px) {
  .brand-logo { height: 34px; }
}

/* --- Page d'acces rapide : en-tete et bouton d'appel ----------------------- */
/* L'en-tete de la page du QR code ne porte que le logo et la langue : c'est
   la mise en page demandee, et le pays y est deja fixe par le QR code. */
.ar-entete {
  position: sticky; top: 0; z-index: 40;
  background: #fff;
  border-bottom: 1px solid var(--grey-2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .03);
}
.ar-entete-inner {
  max-width: 560px; margin: 0 auto;
  padding: 10px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.ar-entete .brand { display: flex; align-items: center; }
.ar-entete .brand-logo { height: 38px; width: auto; }
.ar-entete-actions {
  display: flex; align-items: center; gap: 10px;
}
.ar-header-portail {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 13px;
  border-radius: 999px;
  background: var(--blue-soft); color: var(--blue);
  font-size: .84rem; font-weight: 700; text-decoration: none;
  border: 1px solid rgba(0, 93, 158, .18);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: background .18s, color .18s, border-color .18s, transform .15s, box-shadow .18s;
  white-space: nowrap;
}
.ar-header-portail:hover {
  background: var(--blue); color: #fff;
  border-color: var(--blue);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 93, 158, .2);
}
.ar-header-portail:active { transform: translateY(0); }
.ar-header-portail .material-symbols-outlined { font-size: 18px; flex-shrink: 0; }
.ar-header-portail-arrow { font-size: 16px !important; opacity: .85; transition: transform .18s; }
.ar-header-portail:hover .ar-header-portail-arrow { transform: translateX(3px); opacity: 1; }

.ar-entete .lang-select {
  height: 36px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 999px;
  background: #fff; font: inherit; font-size: .86rem; font-weight: 700; color: var(--ink);
  cursor: pointer;
  transition: border-color .18s;
}
.ar-entete .lang-select:hover {
  border-color: var(--blue);
}

@media (max-width: 480px) {
  .ar-header-portail { padding: 0 10px; font-size: .8rem; }
  .ar-header-portail .material-symbols-outlined { font-size: 17px; }
}
@media (max-width: 380px) {
  .ar-header-portail-txt { display: none; }
  .ar-header-portail { padding: 0 8px; height: 34px; }
  .ar-header-portail-arrow { display: none; }
}

/* Sous WordPress, un administrateur connecte a la barre d'administration
   collee en haut : l'en-tete de la page du QR code se range dessous. */
@media (min-width: 783px) { .admin-bar .ar-entete { top: 32px; } }

/* Le bouton d'appel ouvre desormais la liste des centres : c'est un bouton,
   plus un lien, et il perd les styles par defaut du navigateur. */
button.ar-appel { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; }
button.ar-appel:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* ========================================================= Annuaire d'aide */
/* Remplace les trois blocs de cartes du reseau d'assistance. Une boite
   sobre : des onglets, une barre de filtres, une liste a gauche et la fiche a
   droite. Pas d'ombre portee, pas de couleur de fond par rubrique — c'est un
   outil de recherche, il doit se faire oublier devant ce qu'il trouve. */

.annu-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.annu-ancre { display: block; height: 0; scroll-margin-top: calc(var(--entete-hauteur, 72px) + 20px); }

.annuaire {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* --- Onglets ------------------------------------------------------------- */
.annu-onglets {
  display: flex;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.annu-onglets::-webkit-scrollbar { display: none; }
.annu-onglet {
  flex: 1 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 18px; margin-bottom: -1px;
  background: none; border: 0; border-bottom: 2px solid transparent;
  font: inherit; font-size: .92rem; font-weight: 700; color: var(--muted);
  white-space: nowrap; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.annu-onglet .material-symbols-outlined { font-size: 20px; }
.annu-onglet:hover { color: var(--ink); background: var(--grey); }
.annu-onglet[aria-selected="true"] { color: var(--blue); border-bottom-color: var(--blue); }
.annu-onglet:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; }
.annu-compte {
  min-width: 22px; padding: 1px 7px; border-radius: 999px;
  background: var(--grey-2); color: var(--text);
  font-size: .74rem; font-weight: 800; text-align: center;
}
.annu-onglet[aria-selected="true"] .annu-compte { background: var(--blue-soft); color: var(--blue); }

/* --- Filtres ------------------------------------------------------------- */
.annu-panneau { padding: 18px; }
.annu-filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.annu-recherche {
  flex: 1 1 260px;
  display: flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; color: var(--muted);
  transition: border-color .15s, box-shadow .15s;
}
.annu-recherche:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.annu-recherche .material-symbols-outlined { font-size: 20px; flex-shrink: 0; }
.annu-recherche input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; outline: 0; background: none;
  font: inherit; font-size: .92rem; color: var(--ink);
}
.annu-select {
  height: 42px; max-width: 100%; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background-color: #fff; font: inherit; font-size: .9rem; color: var(--ink);
  cursor: pointer;
}
.annu-select:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.annu-case {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 4px;
  font-size: .9rem; color: var(--text); cursor: pointer; user-select: none;
}
.annu-case input { width: 17px; height: 17px; margin: 0; accent-color: var(--blue); cursor: pointer; }

.annu-bilan {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 14px 0 10px; font-size: .84rem; color: var(--muted);
}
.annu-effacer {
  padding: 0; background: none; border: 0;
  font: inherit; font-size: .84rem; font-weight: 700; color: var(--blue);
  text-decoration: underline; cursor: pointer;
}

/* --- Liste et fiche ------------------------------------------------------ */
.annu-corps { display: grid; gap: 18px; }

.annu-liste {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: #fff;
}
.annu-ligne { display: flex; align-items: stretch; border-bottom: 1px solid var(--grey-2); }
.annu-ligne:last-child { border-bottom: 0; }
.annu-ouvrir {
  flex: 1 1 auto; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center;
  padding: 12px 14px;
  background: none; border: 0; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
  transition: background .12s;
}
.annu-ouvrir:hover { background: var(--grey); }
.annu-ouvrir:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.annu-ouvrir > .material-symbols-outlined { grid-column: 2; grid-row: 1 / span 2; font-size: 20px; color: var(--faint); }
.annu-nom { grid-column: 1; font-size: .95rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.annu-meta { grid-column: 1; margin-top: 2px; font-size: .8rem; color: var(--muted); line-height: 1.35; }
.annu-ligne.est-active { background: var(--blue-soft); box-shadow: inset 3px 0 0 var(--blue); }
.annu-ligne.est-active .annu-ouvrir:hover { background: transparent; }
.annu-ligne.est-active .annu-nom { color: var(--blue-dark); }
.annu-ligne.est-active .annu-ouvrir > .material-symbols-outlined { color: var(--blue); }
.annu-appel, .annu-sans { flex-shrink: 0; width: 50px; border-left: 1px solid var(--grey-2); }
.annu-appel { display: grid; place-items: center; color: var(--blue); text-decoration: none; transition: background .12s; }
.annu-appel:hover { background: var(--blue-soft); }
.annu-appel:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.annu-appel .material-symbols-outlined { font-size: 21px; }
.annu-vide {
  display: flex; align-items: center; gap: 8px;
  padding: 22px 16px; font-size: .9rem; color: var(--muted);
}
.annu-vide .material-symbols-outlined { font-size: 20px; }

.annu-detail { display: none; }

@media (min-width: 960px) {
  .annu-panneau { padding: 20px 22px 22px; }
  .annu-corps { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .annuaire .annu-liste { max-height: 640px; overflow-y: auto; }
  .annu-detail:not(:empty) {
    display: block;
    position: sticky; top: calc(var(--entete-hauteur, 72px) + 16px);
    padding: 22px 24px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: #fff;
  }
}

/* --- Fiche --------------------------------------------------------------- */
.fiche-type {
  margin: 0 0 6px;
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.fiche-nom { margin: 0; font-size: 1.22rem; line-height: 1.3; color: var(--ink); }
.fiche-organisme { margin: 4px 0 0; font-size: .9rem; color: var(--text); }
.fiche-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 2px; }
.fiche-manque {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 16px 0 2px; padding: 10px 12px;
  border-radius: var(--radius-sm); background: var(--grey);
  font-size: .86rem; line-height: 1.45; color: var(--text);
}
.fiche-manque .material-symbols-outlined { flex-shrink: 0; font-size: 19px; color: var(--muted); }
.fiche-desc { margin: 16px 0 0; font-size: .93rem; line-height: 1.6; color: var(--text); }
.fiche-infos {
  display: grid; gap: 10px;
  margin: 16px 0 0; padding-top: 14px;
  border-top: 1px solid var(--grey-2);
}
.fiche-infos div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; }
.fiche-infos dt { font-size: .8rem; font-weight: 700; color: var(--muted); }
.fiche-infos dd { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--ink); }
.fiche-soustitre {
  margin: 18px 0 8px;
  font-family: var(--font); font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.fiche-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fiche-liste li { display: flex; gap: 8px; font-size: .9rem; line-height: 1.45; color: var(--text); }
.fiche-liste .material-symbols-outlined { flex-shrink: 0; margin-top: 1px; font-size: 18px; color: var(--green); }
@media (max-width: 480px) {
  .fiche-infos div { grid-template-columns: 1fr; gap: 2px; }
}

/* ======================================================= Feuille de choix */
/* Boite de dialogue unique : feuille montante sur telephone, fenetre centree
   au-dela. Le corps defile seul, l'en-tete reste en place. */
html.feuille-ouverte { overflow: hidden; }

.feuille {
  position: fixed; z-index: 1000;
  inset: auto 0 0 0; margin: 0;
  width: 100%; max-width: 100%;
  max-height: 90vh; max-height: 90dvh;
  padding: 0; border: 0; border-radius: 16px 16px 0 0;
  background: #fff; color: var(--text);
  box-shadow: 0 -10px 40px rgba(18, 35, 63, .18);
  overflow: hidden;
}
.feuille[open] { display: flex; flex-direction: column; animation: feuille-monte .28s var(--glisse); }
.feuille::backdrop { background: rgba(18, 35, 63, .45); }
.feuille-boite { display: flex; flex-direction: column; min-height: 0; max-height: inherit; flex: 1 1 auto; }

/* Mouvement seul, sans fondu : une animation ralentie ou suspendue (telephone
   charge, onglet en arriere-plan) laisserait sinon la page transparaitre
   a travers la liste. */
@keyframes feuille-monte { from { transform: translateY(40px); } to { transform: none; } }
@keyframes feuille-apparait { from { transform: translateY(10px); } to { transform: none; } }

@media (min-width: 720px) {
  .feuille {
    inset: 0; margin: auto;
    width: min(560px, calc(100% - 40px));
    max-height: min(82vh, 760px);
    height: fit-content;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }
  .feuille[open] { animation-name: feuille-apparait; animation-duration: .2s; }
}
@media (prefers-reduced-motion: reduce) {
  .feuille[open] { animation: none; }
}

.feuille-tete {
  position: relative; flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 14px 12px 12px 18px;
  border-bottom: 1px solid var(--grey-2);
}
/* La poignee dit « cette feuille se ferme », avant meme de lire la croix. */
.feuille-tete::before {
  content: ""; position: absolute; top: 6px; left: 50%;
  width: 36px; height: 4px; margin-left: -18px; border-radius: 2px;
  background: var(--grey-2);
}
@media (min-width: 720px) { .feuille-tete::before { display: none; } }
.feuille-retour:not([hidden]) + .feuille-titre { padding-left: 0; }
.feuille-titre { flex: 1; min-width: 0; margin: 0; font-size: 1.02rem; line-height: 1.3; color: var(--ink); }
.feuille-bouton {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: var(--grey); color: var(--ink); cursor: pointer;
  transition: background .12s;
}
.feuille-bouton:hover { background: var(--grey-2); }
/* Les boutons de la feuille posent display: grid, qui l'emporte sur
   l'attribut hidden : la fleche de retour restait visible sur la liste. */
.feuille [hidden], .annuaire [hidden] { display: none !important; }
.feuille-bouton:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.feuille-bouton .material-symbols-outlined { font-size: 22px; }
.feuille-retour { margin-left: -6px; }
.feuille-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px 24px; }
.feuille-intro { margin: 0 0 12px; font-size: .88rem; line-height: 1.45; color: var(--muted); }
.feuille-recherche { margin-bottom: 12px; }
.feuille-lien {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 14px; padding: 13px 14px;
  border-radius: var(--radius); background: var(--grey);
  font-size: .9rem; font-weight: 700; color: var(--blue); text-decoration: none;
  transition: background .12s;
}
.feuille-lien:hover { background: var(--blue-soft); }
.feuille-lien .material-symbols-outlined { font-size: 20px; }

/* ==========================================================================
   PUBLICATIONS & DOCUMENTS OFFICIELS (MODÈLE DGE)
   ========================================================================== */
.pub-toolbar {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(16px, 3vw, 24px);
  margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
}

.pub-toolbar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 16px;
}

.pub-toolbar-title .material-symbols-outlined {
  color: var(--blue);
  font-size: 22px;
}

.pub-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.pub-search-icon {
  position: absolute;
  left: 14px;
  color: var(--muted);
  font-size: 20px;
  pointer-events: none;
}

.pub-search-input {
  width: 100%;
  padding: 12px 42px 12px 44px;
  font-size: 0.96rem;
  color: var(--ink);
  background: var(--grey);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .15s, background .15s, box-shadow .15s;
}

.pub-search-input:focus {
  outline: none;
  background: #ffffff;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0,93,158,.12);
}

.pub-search-clear {
  position: absolute;
  right: 12px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-radius: 50%;
  transition: background .12s, color .12s;
}

.pub-search-clear:hover {
  background: var(--grey-2);
  color: var(--ink);
}

.pub-filters-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pub-category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pub-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  background: var(--grey);
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  transition: all .15s ease;
}

.pub-pill:hover {
  background: var(--grey-2);
  color: var(--ink);
}

.pub-pill.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0,93,158,.25);
}

.pub-btn-reset-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--red);
  background: var(--red-soft);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all .15s;
}

.pub-btn-reset-filter:hover {
  background: #f8d5d6;
}

/* Accordéons DGE */
.pub-accordions-group {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pub-accordion {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s;
}

.pub-accordion.is-open {
  box-shadow: var(--shadow-md);
}

.pub-acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px clamp(14px, 3vw, 22px);
  background: #ffffff;
  border: 0;
  cursor: pointer;
  text-align: left;
  transition: background .15s;
  border-left: 5px solid var(--blue);
}

.pub-accordion--guides .pub-acc-head { border-left-color: var(--green); }
.pub-accordion--lois .pub-acc-head { border-left-color: var(--blue); }
.pub-accordion--formulaires .pub-acc-head { border-left-color: var(--gold); }
.pub-accordion--rapports .pub-acc-head { border-left-color: #6932a3; }

.pub-acc-head:hover {
  background: var(--grey);
}

.pub-acc-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.pub-acc-badge-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: #ffffff;
  flex-shrink: 0;
}

.pub-accordion--guides .pub-acc-badge-icon { background: var(--green); }
.pub-accordion--lois .pub-acc-badge-icon { background: var(--blue); }
.pub-accordion--formulaires .pub-acc-badge-icon { background: var(--gold); }
.pub-accordion--rapports .pub-acc-badge-icon { background: #6932a3; }

.pub-acc-title-group h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

.pub-acc-title-group p {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.pub-acc-aside {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.pub-acc-count {
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 20px;
  background: var(--grey-2);
  color: var(--text);
}

.pub-acc-chevron {
  font-size: 24px;
  color: var(--muted);
  transition: transform .25s ease;
}

.pub-accordion.is-open .pub-acc-chevron {
  transform: rotate(180deg);
}

.pub-acc-body {
  display: none;
  padding: 16px clamp(12px, 2.5vw, 20px) 20px;
  background: var(--grey);
  border-top: 1px solid var(--border);
}

.pub-accordion.is-open .pub-acc-body {
  display: block;
}

.pub-subacc-block {
  margin-bottom: 20px;
}

.pub-subacc-block:last-child {
  margin-bottom: 0;
}

.pub-subacc-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 12px;
  padding-left: 4px;
}

.pub-subacc-title .material-symbols-outlined {
  font-size: 18px;
  color: var(--faint);
}

.pub-cards-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Carte Document Style DGE */
.pub-card {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(18,35,63,.05);
  transition: transform .15s ease, box-shadow .15s ease;
}

.pub-card:hover {
  box-shadow: 0 6px 18px rgba(18,35,63,.1);
  transform: translateY(-1px);
}

/* Vignette Gauche DGE */
.pub-thumb {
  display: grid;
  place-content: center;
  width: 105px;
  min-width: 105px;
  padding: 12px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  min-width: 58px;
  height: 72px;
  border-radius: 8px;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

.pub-thumb-paper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.pub-thumb-icon {
  font-size: 24px !important;
  margin-bottom: 3px;
}

.pub-thumb-badge {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1;
}

/* Thèmes pastel pour les catégories */
.pub-thumb--guides .pub-thumb-paper {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #059669;
}
.pub-thumb--lois .pub-thumb-paper {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #2563eb;
}
.pub-thumb--formulaires .pub-thumb-paper {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #d97706;
}
.pub-thumb--rapports .pub-thumb-paper {
  background: #faf5ff;
  border: 1px solid #e9d5ff;
  color: #7c3aed;
}

/* Corps du document */
.pub-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pub-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.pub-tags-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pub-cat-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
}

.pub-cat-tag--guides {
  background: #ecfdf5;
  color: #047857;
}
.pub-cat-tag--lois {
  background: #eff6ff;
  color: #1d4ed8;
}
.pub-cat-tag--formulaires {
  background: #fffbeb;
  color: #b45309;
}
.pub-cat-tag--rapports {
  background: #faf5ff;
  color: #6d28d9;
}

.pub-country-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
}

.pub-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #64748b;
}

.pub-date-badge .material-symbols-outlined {
  font-size: 15px;
  color: #94a3b8;
}

.pub-card-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.4;
}

.pub-title-link:not(.doc-card *) {
  color: #0f172a !important;
  text-decoration: none !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  display: inline !important;
  transition: color 0.15s ease;
}

.pub-title-link:not(.doc-card *):hover {
  color: #005d9e !important;
  text-decoration: underline !important;
}

.pub-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: #64748b;
  margin-top: 1px;
}

.pub-meta-author strong {
  color: #334155;
  font-weight: 600;
}

.pub-meta-sep {
  color: #cbd5e1;
  font-weight: bold;
}

.pub-meta-size {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  font-size: 0.74rem;
  font-weight: 700;
  background: #f1f5f9;
  color: #475569;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
}

.pub-meta-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pub-meta-stat .material-symbols-outlined {
  font-size: 15px;
  color: #94a3b8;
}

.pub-card-summary {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #64748b;
  margin: 2px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Actions à droite */
.pub-card-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  min-width: 130px;
}

.pub-btn-read {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1e293b;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}

.pub-btn-read:hover {
  background: #ffffff;
  color: #005d9e;
  border-color: #005d9e;
  box-shadow: 0 2px 6px rgba(0,93,158,0.1);
}

.pub-btn-read .material-symbols-outlined {
  font-size: 17px;
  color: #64748b;
  transition: color 0.15s;
}

.pub-btn-read:hover .material-symbols-outlined {
  color: #005d9e;
}

.pub-btn-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #ffffff;
  background: var(--blue);
  border: 1px solid var(--blue);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all .15s ease;
  text-decoration: none;
}

.pub-btn-download:hover {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  color: #ffffff;
}

.pub-btn-download .material-symbols-outlined {
  font-size: 19px;
}

/* Empty state */
.pub-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 20px;
  background: #ffffff;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  margin-top: 20px;
}

.pub-empty-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
  margin-bottom: 16px;
}

.pub-empty-icon .material-symbols-outlined {
  font-size: 32px;
}

.pub-empty h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
}

.pub-empty p {
  font-size: 0.9rem;
  color: var(--muted);
  max-width: 480px;
  margin: 0 0 16px;
}

/* Modale Liseuse PDF in-browser */
.pub-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 2.5vw, 24px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}

.pub-modal.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.pub-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 20, 35, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.pub-modal-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1060px;
  height: min(92vh, 880px);
  background: #ffffff;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(10,20,35,.35);
  transform: scale(0.96);
  transition: transform .2s ease;
}

.pub-modal.is-active .pub-modal-dialog {
  transform: scale(1);
}

.pub-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.pub-modal-title-box {
  flex: 1;
  min-width: 0;
}

.pub-modal-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--blue);
  letter-spacing: 0.5px;
}

.pub-modal-title {
  margin: 2px 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pub-modal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.pub-modal-close-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: var(--grey);
  color: var(--ink);
  cursor: pointer;
  transition: background .12s;
}

.pub-modal-close-btn:hover {
  background: var(--grey-2);
}

.pub-modal-close-btn .material-symbols-outlined {
  font-size: 22px;
}

.pub-modal-body {
  position: relative;
  flex: 1;
  min-height: 0;
  background: #323639;
  display: flex;
  flex-direction: column;
}

.pub-modal-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #323639;
}

.pub-modal-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: #ffffff;
  margin: auto;
}

.pub-modal-fallback p {
  color: #cfd8dc;
  max-width: 480px;
  margin: 12px 0 20px;
}

/* Responsive pour tablettes et mobiles */
@media (max-width: 840px) {
  .pub-card {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px;
  }
  .pub-thumb {
    width: 48px;
    min-width: 48px;
    height: 60px;
  }
  .pub-card-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .pub-card-actions {
    flex-direction: row;
    width: 100%;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
  }
  .pub-btn-read, .pub-btn-download {
    flex: 1;
  }
}

/* ==========================================================================
   DISPOSITIONS LÉGALES — STYLE ÉPURÉ TYPE ASSEMBLÉE NATIONALE DU BÉNIN
   (Sans accordéons ni résumés absents, avec vignette document à droite)
   ========================================================================== */
.an-legal-list {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--border, #e2e8f0);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  padding: 8px 28px;
  margin: 16px 0 32px;
}

.an-legal-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border, #e2e8f0);
  background: transparent;
  transition: background-color 0.2s ease;
}

.an-legal-item:last-child {
  border-bottom: none;
}

.an-legal-item:hover {
  background: rgba(241, 245, 249, 0.4);
}

.an-legal-badge .material-symbols-outlined,
.an-legal-date .material-symbols-outlined,
.an-legal-meta .material-symbols-outlined,
.an-legal-actions .material-symbols-outlined,
.contact-item .material-symbols-outlined {
  text-transform: none !important;
  font-feature-settings: 'liga' 1 !important;
  -webkit-font-feature-settings: 'liga' !important;
}

.an-badge-flag-img {
  width: 16px;
  height: 11px;
  object-fit: cover;
  border-radius: 2px;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.35);
  margin-right: 2px;
}

.an-legal-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.an-legal-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.an-legal-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}

.an-legal-badge.badge-ecowas {
  background: var(--blue-soft);
  color: var(--blue-dark);
}

.an-legal-badge.badge-national {
  background: #fef3c7;
  color: #92400e;
}

.an-legal-badge.badge-guides {
  background: #ecfdf5;
  color: #047857;
}

.an-legal-badge.badge-lois {
  background: #eff6ff;
  color: #1d4ed8;
}

.an-legal-badge.badge-formulaires {
  background: #fffbeb;
  color: #b45309;
}

.an-legal-badge.badge-rapports {
  background: #faf5ff;
  color: #6d28d9;
}

.an-legal-badge.badge-neutral {
  background: #f1f5f9;
  color: #475569;
}

.an-legal-summary {
  margin: 4px 0 6px;
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.5;
}

.an-legal-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.45;
}

.an-legal-title a {
  color: var(--blue);
  text-decoration: none;
  transition: color 0.15s ease, text-decoration 0.15s ease;
}

.an-legal-title a:hover {
  color: var(--blue-dark);
  text-decoration: underline;
}

.an-legal-date,
.an-legal-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 0.88rem;
  color: #475569;
  font-weight: 500;
}

.an-legal-date .material-symbols-outlined,
.an-legal-meta .material-symbols-outlined {
  font-size: 16px;
  color: #64748b;
}

.an-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.an-meta-author strong {
  color: #1e293b;
}

.an-meta-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.82rem;
}

.an-meta-stat strong {
  color: #0f172a;
  font-weight: 700;
}

.an-meta-stat span {
  color: #64748b;
}

.an-meta-sep {
  color: #cbd5e1;
  font-weight: 700;
  user-select: none;
}

.an-legal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.an-btn-read,
.an-btn-dl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.18s ease;
}

.an-btn-read {
  background: #f1f5f9;
  color: #0f172a;
  border: 1px solid #cbd5e1;
}

.an-btn-read:hover {
  background: #e2e8f0;
  color: var(--blue);
  border-color: var(--blue);
}

.an-btn-dl {
  background: var(--blue);
  color: #ffffff;
  border: 1px solid var(--blue);
}

.an-btn-dl:hover {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  color: #ffffff;
}

.an-btn-read .material-symbols-outlined,
.an-btn-dl .material-symbols-outlined {
  font-size: 17px;
}

.an-legal-thumb-wrapper {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.an-legal-thumb {
  display: block;
  width: 90px;
  height: 125px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid #cbd5e1;
  background: #ffffff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.an-legal-thumb:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
}

.an-legal-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Document preview fallback */
.an-doc-preview {
  width: 100%;
  height: 100%;
  background: #ffffff;
  padding: 10px 8px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.doc-header-line {
  width: 50%;
  height: 3px;
  background: var(--blue);
  border-radius: 2px;
  margin: 0 auto 6px;
}

.doc-lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.doc-lines span {
  display: block;
  height: 3px;
  background: #cbd5e1;
  border-radius: 1px;
}

.doc-lines span:nth-child(1) { width: 90%; }
.doc-lines span:nth-child(2) { width: 100%; }
.doc-lines span:nth-child(3) { width: 85%; }
.doc-lines span:nth-child(4) { width: 95%; }
.doc-lines span:nth-child(5) { width: 70%; }

.doc-pdf-badge {
  align-self: flex-end;
  font-size: 8px;
  font-weight: 800;
  background: #ef4444;
  color: #ffffff;
  padding: 2px 4px;
  border-radius: 2px;
  letter-spacing: 0.5px;
}

/* Contacts enhancements */
.contact-item .ci-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.contact-wa {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #dcfce7;
  color: #15803d;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 6px 11px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.16s ease;
}

.contact-wa:hover {
  background: #22c55e;
  color: #ffffff;
}

.contact-mail {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f1f5f9;
  color: #475569;
  font-weight: 600;
  font-size: 0.82rem;
  padding: 6px 11px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.16s ease;
}

.contact-mail:hover {
  background: var(--blue);
  color: #ffffff;
}

.contact-item .ci-addr {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: #64748b;
  margin-top: 3px;
}

/* ==========================================================================
   DISPOSITIONS LÉGALES — BARRE DE RECHERCHE ET FILTRES JURIDIQUES PRO
   ========================================================================== */
.legal-filter-bar {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.legal-search-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.legal-search-field {
  position: relative;
  flex: 1;
  min-width: 260px;
  display: flex;
  align-items: center;
}

.legal-search-icon {
  position: absolute;
  left: 12px;
  font-size: 19px;
  color: #94a3b8;
  pointer-events: none;
}

.legal-search-input {
  width: 100%;
  height: 42px;
  padding: 8px 36px 8px 38px;
  font-size: 0.92rem;
  color: #0f172a;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  transition: all 0.15s ease;
}

.legal-search-input:focus {
  outline: none;
  background: #ffffff;
  border-color: #005d9e;
  box-shadow: 0 0 0 3px rgba(0, 93, 158, 0.12);
}

.legal-search-clear {
  position: absolute;
  right: 10px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.12s, color 0.12s;
}

.legal-search-clear:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.legal-scope-pills {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.legal-scope-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.legal-scope-pill:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.legal-scope-pill.active {
  background: #005d9e;
  border-color: #005d9e;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 93, 158, 0.2);
}

.legal-filter-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
  font-size: 0.82rem;
  color: #64748b;
}

.legal-count-badge {
  font-weight: 600;
  color: #334155;
}

.legal-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #dc2626;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.12s;
}

.legal-reset-btn:hover {
  background: #fee2e2;
}

.legal-empty-state {
  text-align: center;
  padding: 48px 20px;
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  margin: 20px 0;
}

.legal-empty-state .material-symbols-outlined {
  font-size: 42px;
  color: #94a3b8;
  margin-bottom: 12px;
}

.legal-empty-state h3 {
  font-size: 1.1rem;
  color: #0f172a;
  margin: 0 0 6px;
}

.legal-empty-state p {
  font-size: 0.88rem;
  color: #64748b;
  margin: 0 0 16px;
}

@media (max-width: 768px) {
  .an-legal-thumb-wrapper {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .an-legal-list {
    padding: 4px 16px;
    border-radius: 8px;
  }
  .an-legal-item {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 18px 0;
  }
  .an-legal-thumb-wrapper {
    display: none !important;
  }
  .an-legal-title {
    font-size: 1rem;
  }
  .legal-search-row {
    flex-direction: column;
    align-items: stretch;
  }
  .legal-scope-pills {
    width: 100%;
    justify-content: flex-start;
  }
  .legal-scope-pill {
    flex: 1;
    justify-content: center;
    text-align: center;
  }
}

/* --- Annuaire : barre de filtres alignee sur la page Documents ----------- */
/* L'ancienne regle .annu-filtres posait un flex en ligne : la barre reprend
   la mise en page en blocs de la page Documents. */
.annuaire .annu-filtres { display: block; margin-bottom: 14px; box-shadow: none; }
/* Plus de pastilles qu'un filtre de documents : la recherche prend sa propre
   ligne au lieu d'etre ecrasee par elles. */
.annuaire .legal-search-field { flex-basis: 100%; }
.annuaire .legal-search-row + .legal-search-row { margin-top: 10px; }
.annuaire .legal-scope-pills[hidden], .annuaire .legal-search-clear[hidden] { display: none !important; }
.annuaire .legal-scope-pill .material-symbols-outlined { font-size: 16px; }
.annuaire .legal-reset-btn .material-symbols-outlined { font-size: 16px; }
.annuaire input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }
@media (max-width: 640px) {
  .annuaire .annu-panneau { padding: 12px; }
  .annuaire .annu-filtres { padding: 12px; }
  .annuaire .legal-search-field { min-width: 0; flex-basis: 100%; }
  /* Sur telephone, les pastilles defilent sur une ligne au lieu d'empiler. */
  .annuaire .legal-scope-pills { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 2px; scrollbar-width: none; }
  .annuaire .legal-scope-pills::-webkit-scrollbar { display: none; }
  .annuaire .legal-scope-pill { white-space: nowrap; flex-shrink: 0; }
}

/* --- Annuaire : choix de la rubrique en liste deroulante ----------------- */
.annu-choix { padding: 14px 18px 0; }
.annu-choix-champ { position: relative; display: flex; align-items: center; max-width: 420px; }
.annu-choix-select {
  width: 100%; height: 48px; padding: 0 44px 0 46px;
  -webkit-appearance: none; appearance: none;
  border: 1px solid var(--border); border-radius: 10px;
  background: #fff; font: inherit; font-size: .98rem; font-weight: 700; color: var(--ink);
  cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.annu-choix-select:hover { border-color: var(--blue); }
.annu-choix-select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.annu-choix-ico, .annu-choix-fleche { position: absolute; pointer-events: none; }
.annu-choix-ico { left: 14px; font-size: 22px; color: var(--blue); }
.annu-choix-fleche { right: 14px; font-size: 22px; color: var(--muted); }
@media (max-width: 640px) { .annu-choix { padding: 12px 12px 0; } .annu-choix-champ { max-width: none; } }

/* --- Logo WhatsApp -------------------------------------------------------- */
.ico-whatsapp { flex-shrink: 0; vertical-align: middle; }

/* --- Demarches : la suite est sur la page de la demarche ------------------- */
.proc-suite { margin: -8px 0 18px 46px; font-size: .86rem; font-weight: 600; color: var(--muted); }
.proc-docs-box .proc-suite { margin: 8px 0 0 26px; }

/* ============================================ Acces rapide : seconde version */
/* La page restait une colonne de texte sur fond blanc. Elle garde son ordre —
   appeler, les urgences, les premiers pas, les rubriques — mais chaque bloc
   devient une carte sur un fond gris tres clair, et le haut de page un
   bandeau aux couleurs de PRIMI qui porte le bouton d'appel. */
body.ar-page { background: #F3F6FA; }
.ar-entete-inner, .ar { max-width: 620px; }
.ar { padding-top: 18px; }

.ar-hero {
  position: relative; overflow: hidden;
  margin: 0 0 18px; padding: 22px 20px 20px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 55%, var(--sky) 100%);
  color: #fff;
  box-shadow: 0 14px 32px rgba(0, 69, 126, .22);
}
.ar-hero::before, .ar-hero::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255, 255, 255, .07);
}
.ar-hero::before { width: 220px; height: 220px; top: -90px; right: -70px; }
.ar-hero::after { width: 120px; height: 120px; top: 70px; right: -40px; background: rgba(255, 184, 0, .12); }
.ar-hero > * { position: relative; z-index: 1; }
.ar-hero .ar-kicker { color: rgba(255, 255, 255, .82); }
.ar-hero .ar-country-chip { background: rgba(255, 255, 255, .95); border-color: transparent; }
.ar-hero .ar-titre { color: #fff; margin: 4px 0 8px; }
.ar-chapo { margin: 0 0 18px; font-size: .92rem; line-height: 1.45; color: rgba(255, 255, 255, .88); max-width: 46ch; }

.ar-hero .ar-appel {
  margin: 0; padding: 14px 16px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
}
.ar-appel-ico {
  position: relative; width: 48px; height: 48px; border-radius: 50%;
  background: var(--ink);
}
.ar-appel-ico .material-symbols-outlined { font-size: 24px; color: var(--gold); }
.ar-appel-ico::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid rgba(18, 35, 63, .35);
  animation: ar-onde 2.2s ease-out infinite;
}
@keyframes ar-onde { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ar-appel-ico::after { animation: none; opacity: 0; } }
.ar-appel-texte strong { font-size: 1.08rem; }
.ar-appel-texte > span { font-weight: 600; color: var(--ink); opacity: .9; }
.ar-appel-texte small {
  display: inline-flex; align-self: flex-start; margin-top: 5px; padding: 2px 8px;
  border-radius: 999px; background: rgba(18, 35, 63, .12);
  font-size: .74rem; font-weight: 700; color: var(--ink);
}
.ar-appel-fleche {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .45);
}

/* Blocs en cartes */
.ar-bloc, .ar-etapes {
  margin-bottom: 14px; padding: 16px 16px 14px;
  border: 1px solid #E3E9F1; border-radius: var(--radius-lg);
  background: #fff; box-shadow: 0 1px 2px rgba(18, 35, 63, .04);
}
.ar-bloc-titre, .ar-etapes-titre {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px; font-size: .74rem; color: var(--ink);
}
.ar-bloc-titre::before, .ar-etapes-titre::before {
  content: ""; width: 4px; height: 14px; border-radius: 2px; background: var(--blue);
}
#ar-urgence-titre::before { background: var(--red); }

/* Ligne d'assistance : un bouton d'appel direct, rouge orangé, dans le
   bandeau. Un toucher compose le numero national du pays. */
.ar-hero .ar-titre + #ar-appel { margin-top: 16px; }
.ar-ligne {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 14px; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #E0583A 0%, #C9432A 100%);
  color: #fff; text-decoration: none;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
  transition: transform .18s var(--ease), box-shadow .2s;
}
.ar-ligne:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0, 0, 0, .22); }
.ar-ligne:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.ar-ligne-ico { flex-shrink: 0; display: grid; place-items: center; width: 28px; }
.ar-ligne-ico .material-symbols-outlined { font-size: 26px; color: #fff; }
.ar-ligne-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ar-ligne-texte strong { font-size: 1rem; line-height: 1.25; color: #fff; }
.ar-ligne-texte span { font-size: .8rem; color: rgba(255, 255, 255, .9); }
.ar-ligne-fleche { margin-left: auto; flex-shrink: 0; display: grid; place-items: center; color: #fff; opacity: .9; }
button.ar-ligne { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; }

/* Plusieurs numeros sur la ligne d'assistance : la feuille les liste. */
.ligne-liste { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.ligne-num {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px;
  border: 1px solid #F3CFC4; border-radius: var(--radius);
  background: #FDF3F0; color: var(--ink); text-decoration: none;
  font-size: 1.1rem; font-weight: 800; letter-spacing: .01em;
}
.ligne-num:hover { border-color: #C9432A; background: #fff; }
.ligne-num .material-symbols-outlined {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: #C9432A; color: #fff; font-size: 18px;
}

/* Urgences : tuiles a deux colonnes, le numero en tres gros */
.ar-urgences { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ar-urgence {
  position: relative; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 12px 44px 12px 13px; min-height: 74px;
  border-color: #F8D5D6; background: #FDF1F1;
}
.ar-urgence:hover { border-color: var(--red); background: #fff; }
.ar-urgence-num { font-size: 1.45rem; line-height: 1.1; letter-spacing: -.01em; }
.ar-urgence-nom { font-size: .78rem; font-weight: 600; }
.ar-urgence-ico {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--red); color: #fff;
}
.ar-urgence-ico .material-symbols-outlined { font-size: 16px; }
@media (max-width: 340px) { .ar-urgences { grid-template-columns: 1fr; } }

/* Premiers pas : trois colonnes sur fond bleu clair, le numero au-dessus du
   titre. Le detail de chaque etape reste dans la page, masque : l'encart se
   lit d'un coup d'oeil. */
.ar-etapes { background: var(--blue-soft); border-color: transparent; box-shadow: none; padding: 14px 12px 16px; }
.ar-etapes-titre { color: var(--blue-dark); margin-bottom: 14px; }
.ar-etapes-titre::before { display: none; }
.ar-etapes-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ar-etape { flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.ar-etape-num { width: 30px; height: 30px; font-size: .88rem; box-shadow: none; }
.ar-etape-texte { align-items: center; }
.ar-etape-texte strong { font-size: .82rem; font-weight: 600; line-height: 1.3; }
.ar-etape-texte span { display: none; }

/* Demarches frequentes */
.ar-demarches { list-style: none; margin: 0; padding: 0; }
.ar-demarches li + li { border-top: 1px solid var(--grey-2); }
.ar-demarche {
  display: flex; align-items: center; gap: 12px; padding: 11px 4px;
  color: var(--ink); text-decoration: none; border-radius: 10px;
  transition: background .15s;
}
.ar-demarche:hover { background: var(--grey); }
.ar-demarche-ico {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: #FFF6DC; color: #B37800;
}
.ar-demarche-ico .material-symbols-outlined { font-size: 21px; }
.ar-demarche-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ar-demarche-texte strong { font-size: .93rem; line-height: 1.3; }
.ar-demarche-texte small { font-size: .8rem; color: var(--muted); line-height: 1.3; }
.ar-demarche > .material-symbols-outlined { color: var(--faint); font-size: 20px; flex-shrink: 0; }
.ar-lien-suite {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: .88rem; font-weight: 700; color: var(--blue); text-decoration: none;
}
.ar-lien-suite:hover { text-decoration: underline; }
.ar-lien-suite .material-symbols-outlined { font-size: 18px; }
.ar-lien-suite[hidden] { display: none; }

/* Rubriques : des lignes dans la carte, une couleur d'icone par rubrique */
.ar .qa-card { padding: 12px 4px; border-radius: 10px; }
.ar .qa-card:last-child { border-bottom: 0; }
.ar .qa-card:nth-child(1) .qa-ico { background: #E6F2EA; color: var(--green); }
.ar .qa-card:nth-child(2) .qa-ico { background: var(--blue-soft); color: var(--blue); }
.ar .qa-card:nth-child(3) .qa-ico { background: #FFF6DC; color: #B37800; }
.ar-autres-titre { margin-top: 14px; }
.ar-autre { background: #F7F9FC; border-color: #E3E9F1; }

/* Vers le portail : une carte pleine, pas un simple lien */
.ar-pied { margin-top: 22px; padding-top: 0; border-top: 0; }
.ar-portail {
  margin-bottom: 18px; padding: 16px 18px;
  border-radius: var(--radius-lg);
  background: var(--ink); color: #fff;
  box-shadow: 0 10px 24px rgba(18, 35, 63, .18);
  transition: transform .18s var(--ease), box-shadow .2s;
}
.ar-portail:hover { color: #fff; background: var(--ink); transform: translateY(-2px); box-shadow: 0 14px 28px rgba(18, 35, 63, .24); }
.ar-portail:hover .ar-portail-titre { text-decoration: none; }
.ar-portail-textes { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ar-portail-titre { font-size: 1.02rem; }
.ar-portail-sous { font-size: .8rem; font-weight: 500; color: rgba(255, 255, 255, .72); line-height: 1.4; }
.ar-portail .ar-portail-fleche {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold); color: var(--ink); font-size: 20px;
}
.ar-portail:hover .ar-portail-fleche { color: var(--ink); transform: translateX(3px); }
.ar-pied-financement, .ar-pied-partenaires { justify-content: center; text-align: center; }

/* Le bouton d'appel : le nom du centre sur deux lignes au plus */
.ar-appel-texte > span {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ar-appel-texte small { white-space: nowrap; }
.ar-urgence { padding-right: 38px; }
.ar-urgence-ico { top: 9px; right: 9px; width: 24px; height: 24px; }
.ar-urgence-ico .material-symbols-outlined { font-size: 14px; }
/* Rubriques secondaires : texte a gauche, fleche au bout de la ligne */
.ar-autre { justify-content: flex-start; text-align: left; }
.ar-autre span { text-align: left; }
.ar-autre .material-symbols-outlined:last-child { margin-left: auto; }
.ar-autre .material-symbols-outlined { flex: 0 0 auto; }
/* Tuile d'urgence : le numero et l'icone sur la meme ligne, le service dessous
   sur toute la largeur de la tuile. */
.ar-urgence {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  column-gap: 8px; row-gap: 3px; padding: 11px 12px;
}
.ar-urgence-num { grid-column: 1; grid-row: 1; }
.ar-urgence-ico { position: static; grid-column: 2; grid-row: 1; }
.ar-urgence-nom { grid-column: 1 / -1; grid-row: 2; }

/* Annuaire : onglets sur ordinateur, liste deroulante sur telephone */
.annu-choix { display: none; }
@media (max-width: 768px) {
  .annu-onglets { display: none; }
  .annu-choix { display: block; }
}
/* Vignettes des documents : masquees tant que l'ecran n'est pas assez large
   pour les poser a cote du texte sans l'ecraser (telephones, tablettes). */
@media (max-width: 1024px) {
  .an-legal-thumb-wrapper { display: none !important; }
}

/* Fiche d'un texte legal : date, resume et articles cles. Le fichier du texte se publie
   dans Documents, la fiche ne propose donc plus de telechargement. */
.lt-date { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 18px; color: var(--muted); font-size: .9rem; }
.lt-date .material-symbols-outlined { font-size: 18px; }

/* ============================================================== Documents */
/* Mise en page des publications de la DGE : carte blanche, etiquette gris
   fonce, date sur gris clair ; seul l'accent — le bouton « Lire » — reprend
   le jaune PRIMI. Un document par ligne, sur tous les
   ecrans. */
.doc-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }

.doc-card {
  position: relative; display: flex; flex-direction: column;
  padding: 0 16px 16px; border-radius: 4px;
  background: #ffffff; border: 1px solid var(--border);
  color: var(--ink); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .06), 0 4px 6px -4px rgba(0, 0, 0, .06);
}

.doc-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin: 0 -16px 12px; }
.doc-card-tag {
  padding: 10px 14px; border-radius: 4px 0 6px 0;
  background: #484848; color: #fff;
  font-size: .78rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
}
.doc-card-date {
  flex-shrink: 0; margin: 12px 14px 0 0; padding: 2px 12px; border-radius: 6px;
  background: #F2F2F2; color: var(--muted); font-size: .82rem; font-weight: 600;
}
/* Taille et compteurs en jaune PRIMI, un ton fonce pour rester lisible sur
   le blanc. */
.doc-card-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 10px; font-size: .74rem; color: var(--gold-dark); }
.doc-card-stats strong { color: var(--gold-dark); }
.doc-card-stats strong { font-size: .88rem; margin-right: 2px; }

.doc-card-title { margin: 0 0 8px; font-family: var(--font); font-size: 1rem; font-weight: 700; line-height: 1.35; text-transform: uppercase; }
.doc-card .doc-card-title a,
.doc-card .doc-card-title a:visited,
.doc-card .doc-card-title a:hover { color: var(--blue-dark); text-decoration: none; }
.doc-card .doc-card-title a:hover { color: var(--blue); text-decoration: underline; }
.doc-card-author { margin: 0 0 14px; font-size: .86rem; color: var(--muted); }
.doc-card-author em { font-style: normal; font-weight: 700; color: var(--text); }

.doc-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: auto; }
.doc-card .doc-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px;
  border: 0; border-radius: 6px; font: inherit; font-size: .88rem; font-weight: 600;
  text-decoration: none; cursor: pointer; transition: background .16s, color .16s;
}
.doc-btn .material-symbols-outlined { font-size: 18px; }
.doc-card .doc-btn--lire { background: var(--gold); color: var(--ink); }
.doc-card .doc-btn--lire:hover { background: var(--gold-dark); color: var(--ink); }
.doc-card .doc-btn--dl { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--border); }
.doc-card .doc-btn--dl:hover { background: #F2F2F2; color: var(--ink); }
.doc-btn:focus-visible, .doc-card-title a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
@media (max-width: 420px) { .doc-card-actions .doc-btn { flex: 1 1 auto; justify-content: center; } }

/* Rubriques en accordeon, meme degrade que les cartes */
.doc-rubrique { margin-bottom: 8px; background: var(--grey); }
.doc-rubrique-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; cursor: pointer; list-style: none;
  background: linear-gradient(91.18deg, #023E79 0%, #0E6258 100%);
  color: #fff; font-size: 1rem; font-weight: 500;
}
.doc-rubrique-tete::-webkit-details-marker { display: none; }
.doc-rubrique-tete .material-symbols-outlined { transition: transform .2s var(--ease); }
.doc-rubrique[open] > .doc-rubrique-tete .material-symbols-outlined { transform: rotate(180deg); }
.doc-rubrique-tete:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.doc-rubrique > .doc-grid { padding: 12px; }
@media (min-width: 700px) { .doc-rubrique > .doc-grid { padding: 16px; } }