/* =============================================================================
   Portail DGSF — gabarit et accueil
   En-tête (bandeau BRVM, barre, logo), sections de l'accueil, mot du DG, pied de page, apparitions.
   Ordre de chargement (setup.typoscript › includeCSS) : tokens, base, layout,
   subpages, chatbot, components, data, modules, puis drs-portal et workflow.
   ============================================================================= */

.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--navy);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

/* ===== Bande BRVM datée =====
   Séance fermée : trois indices fixes, l'heure de cotation et l'état de la séance ; sur un écran
   étroit, la rangée se parcourt au doigt. Séance ouverte (.is-live) : indices puis cotations
   défilent (site.js, .brvm-ticker.is-marquee), pause au survol, au clavier et par bouton. */
.brvm-band {
  overflow: hidden; /* élément d'un conteneur flex : sans cela il prendrait la largeur de toute la rangée et élargirait la page */
  background: var(--navy-deep); color: rgba(255,255,255,0.9);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: var(--fs-caption); line-height: 1;
}
.brvm-band-inner {
  position: relative; /* contient les mentions .sr-only (absolues) : sinon elles élargissent l'en-tête collant */
  max-width: 1440px; margin: 0 auto; padding: 0 28px; height: 32px;
  display: flex; align-items: center; gap: var(--space-5);
  overflow-x: auto; scrollbar-width: none; white-space: nowrap;
}
.brvm-band-inner::-webkit-scrollbar { display: none; }
.brvm-band-label {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 24px;
  color: var(--gold); font-weight: 800; letter-spacing: 0.08em; text-decoration: none;
}
.brvm-band-label:hover { color: var(--gold-light); }
.brvm-band-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.35); }
.brvm-band-dot.is-open { background: var(--success-bright); }
.brvm-band-list { display: flex; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.brvm-band-item { display: inline-flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.brvm-band-name { color: rgba(255,255,255,0.7); font-weight: 500; }
.brvm-band-value { color: var(--on-dark); font-weight: 700; }
.brvm-band-var { font-weight: 700; }
.brvm-up .brvm-band-var { color: var(--success-bright); }
.brvm-down .brvm-band-var { color: var(--danger-bright); }
.brvm-flat .brvm-band-var { color: rgba(255,255,255,0.72); }
.brvm-band-var [aria-hidden] { font-size: 0.8em; margin-right: 2px; }
.brvm-band-meta { margin: 0 0 0 auto; color: rgba(255,255,255,0.62); font-variant-numeric: tabular-nums; }
@media (max-width: 1024px) { .brvm-band-delay { display: none; } }

/* Séance ouverte : défilement continu (copie décorative de la rangée, boucle sans à-coup). Sans script ou
   avec moins d'animations demandé : rangée fixe, parcourable au doigt. */
.brvm-ticker { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.brvm-ticker::-webkit-scrollbar { display: none; }
.brvm-ticker.is-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
/* Marge à droite de chaque cotation (et non « gap ») : la moitié de la rangée doublée tombe pile sur la copie */
.brvm-ticker.is-marquee .brvm-ticker-track {
  gap: 0; width: max-content;
  animation: brvm-scroll var(--marquee-duration, 120s) linear infinite;
}
.brvm-ticker.is-marquee .brvm-band-item { margin-right: 28px; }
.brvm-ticker.is-marquee:hover .brvm-ticker-track,
.brvm-ticker.is-marquee:focus-within .brvm-ticker-track,
.brvm-ticker.is-paused .brvm-ticker-track { animation-play-state: paused; }
@keyframes brvm-scroll { to { transform: translateX(-50%); } }
.brvm-band-index .brvm-band-name { color: var(--gold-light); font-weight: 700; }
.brvm-band-toggle {
  flex: none; width: 24px; height: 24px; padding: 0; display: grid; place-items: center; border-radius: 50%;
  color: rgba(255,255,255,0.82); background: transparent; border: 1px solid rgba(255,255,255,0.28);
}
.brvm-band-toggle:hover { color: var(--on-dark); border-color: rgba(255,255,255,0.65); }
.brvm-band-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .brvm-ticker.is-marquee .brvm-ticker-track { animation: none; }
}
@media (max-width: 640px) {
  /* Fondu à droite : la rangée continue au doigt ; la marge finale sort le dernier mot du fondu. */
  .brvm-band-inner {
    height: 30px; padding: 0 40px 0 14px; gap: var(--space-4);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  }
  .brvm-band-list { gap: var(--space-4); }
  .brvm-band-meta { margin-left: 0; }
  /* Séance ouverte : le défilement a son propre fondu ; le témoin vert dit que la séance est ouverte */
  .brvm-band.is-live .brvm-band-inner { padding-right: 14px; -webkit-mask-image: none; mask-image: none; }
  .brvm-band.is-live .brvm-band-meta { display: none; }
}

.header-bar {
  background: var(--navy);
}
.header-bar-inner {
  display: flex; align-items: center;
  padding: 0 28px; max-width: 1440px; margin: 0 auto;
  height: 92px; gap: 14px;
}
.header-logo {
  display: flex; align-items: center; line-height: 0;
  text-decoration: none; flex-shrink: 0;
  transition: opacity var(--dur-base) ease;
}
.header-logo:hover { opacity: 0.82; }
/* Logos des sites sur fond marine : entièrement dorés, emblème et texte (Images/logo-*-or.png ;
   les originaux, au texte brun, servent sur fond clair) */
.header-logo-dgsf img {
  height: 46px; width: auto; max-width: 260px;
  display: block; object-fit: contain;
}
.header-logo-drs img, .header-logo-da img {
  height: 52px; width: auto; max-width: 320px;
  display: block; object-fit: contain;
}
.header-logo-mefp {
  margin-left: 10px;
  padding-left: 14px;
  border-left: 1px solid rgba(255,255,255,0.18);
  display: flex; align-items: center;
}
/* Wordmark MEFP posé sur une puce blanche */
.header-logo-mefp img {
  height: 38px; width: auto; max-width: 180px;
  display: block; object-fit: contain;
  background: var(--surface);
  padding: 6px 12px;
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

.header-nav { display: flex; align-items: center; gap: 0; flex: 1; justify-content: center; min-width: 0; }
/* Rembourrage horizontal des liens : 11 px dès 1440 px, resserré jusqu'à 7 px vers 1281 px
   pour que le menu le plus long (DA) tienne sans chevaucher le logo. */
.header-nav { --nav-pad-x: clamp(7px, 2.52vw - 25.2px, 11px); }
.header-nav a {
  color: rgba(255,255,255,0.78); text-decoration: none;
  font-size: var(--fs-small); font-weight: 500; padding: 24px var(--nav-pad-x);
  letter-spacing: 0.01em; transition: var(--dur-base) ease; transition-property: var(--transition-ui);
  position: relative; white-space: nowrap;
}
.header-nav a:hover { color: white; }
.header-nav a::after {
  content: ''; position: absolute; bottom: 0; left: var(--nav-pad-x); right: var(--nav-pad-x);
  height: 2px; background: var(--gold); transform: scaleX(0);
  transition: transform var(--dur-slow) ease; transform-origin: center;
}
.header-nav a:hover::after { transform: scaleX(1); }
.header-nav a.active { color: white; }
.header-nav a.active::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.btn-search {
  background: rgba(255,255,255,0.08); border: none; color: white;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-base) ease;
}
.btn-search:hover { background: rgba(255,255,255,0.15); }
.btn-contact {
  background: var(--gold); color: var(--navy-deep);
  border: none; padding: 10px 24px; border-radius: var(--radius-pill);
  font-family: inherit; font-size: var(--fs-small); font-weight: 700;
  cursor: pointer; transition: var(--dur-base) ease; transition-property: var(--transition-ui);
  letter-spacing: 0.02em; text-decoration: none;
  display: inline-block;
}
.btn-contact:hover { background: var(--gold-light); transform: translateY(-1px); }

.mobile-menu-btn {
  display: none; background: none; border: none; color: white;
  width: 44px; height: 44px; cursor: pointer;
  flex-direction: column; gap: 5px; align-items: center; justify-content: center;
}
.mobile-menu-btn span {
  display: block; width: 22px; height: 2px; background: white;
  border-radius: var(--radius-sm); transition: var(--dur-slow) ease; transition-property: var(--transition-ui);
}

/* =============================================================================
   Héros des accueils (DGSF, DRS-SFD, DA) — phase 2
   Photo réelle sous un voile marine, accroche, deux actions, panneau de chiffres clés.
   « À la une » : carrousel des actualités (fondu, pause, points) ; l'accent suit le site (--accent-on-dark).
   ============================================================================= */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--navy);
  padding: var(--space-8) 0 calc(var(--space-8) + var(--space-5));
}
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
/* Photo d'une actualité : couche en fondu au-dessus du fond de base, sous le voile */
.hero-media-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 700ms ease; }
.hero-media-layer.is-active { opacity: 1; }
/* Voile léger : la photo reste visible ; plus dense sous le texte et en bas (commandes du carrousel),
   l'ombre portée du texte prend le relais là où la photo est claire */
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(6,19,37,0.55) 0%, rgba(6,19,37,0) 28%),
    linear-gradient(100deg, rgba(6,19,37,0.80) 0%, rgba(11,29,58,0.58) 45%, rgba(11,29,58,0.22) 100%);
}
.hero-main { text-shadow: 0 1px 2px rgba(6,19,37,0.55), 0 2px 14px rgba(6,19,37,0.45); }
.hero-main .btn-primary, .hero-main .hero-story-tag { text-shadow: none; }
.hero-content {
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: var(--space-8); align-items: center;
}
.hero-main { max-width: 640px; }
.hero-eyebrow {
  display: flex; align-items: center; gap: var(--space-3);
  margin: 0 0 var(--space-5);
  color: var(--accent-on-dark); font-size: var(--fs-caption); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.hero-eyebrow::before { content: ''; width: 28px; height: 2px; background: currentColor; }
.hero-title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: var(--fs-h1); line-height: var(--lh-tight);
  color: var(--on-dark); margin: 0 0 var(--space-5);
  text-wrap: balance;
}
.hero-title--long { font-size: var(--fs-h2); line-height: var(--lh-heading); }
.hero-title .highlight { color: var(--accent-on-dark); }
.hero-lead {
  font-size: var(--fs-lead); line-height: 1.5; font-weight: 500;
  color: rgba(255,255,255,0.92); margin: 0 0 var(--space-4); max-width: 46ch;
}
.hero-desc {
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: rgba(255,255,255,0.74); margin: 0 0 var(--space-6); max-width: 60ch;
}
.hero-buttons { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* Héros « À la une » : l'actualité la plus récente en titre, les deux suivantes en liens.
   Sans photo d'actualité, le fond reste la photo du héros : le bloc n'est jamais vide. */
.hero--news .hero-title--news { font-size: var(--fs-h2); line-height: var(--lh-heading); margin-bottom: var(--space-4); }
.hero-story-link {
  color: inherit; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  transition: background-size var(--dur-slow) var(--ease-out);
}
.hero-story-link:hover, .hero-story-link:focus-visible { background-size: 100% 1px; }
.hero-story-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  margin: 0 0 var(--space-3); font-size: var(--fs-small); color: rgba(255,255,255,0.78);
}
.hero-story-tag {
  font-size: var(--fs-caption); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--navy-deep); background: var(--accent-on-dark, var(--gold));
  padding: 3px 9px; border-radius: var(--radius-sm);
}
.hero--news .hero-desc { margin-bottom: var(--space-5); }
/* Diapositives empilées dans la même cellule : la hauteur est celle de la plus longue, rien ne saute */
.hero-slides { display: grid; }
.hero-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 500ms ease, transform 500ms var(--ease-out), visibility 0s linear 500ms; }
.hero-slide.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.hero-slider-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-top: var(--space-6); }
.hero-slider-btn {
  width: 40px; height: 40px; display: grid; place-items: center; flex: none; cursor: pointer;
  color: var(--on-dark); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.28); border-radius: 50%;
  transition: var(--dur-base) ease; transition-property: var(--transition-ui);
}
.hero-slider-btn:hover { background: var(--accent-on-dark, var(--gold)); border-color: var(--accent-on-dark, var(--gold)); color: var(--navy-deep); }
.hero-slider-dots { display: flex; align-items: center; gap: 4px; }
.hero-slider-dot {
  width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center;
}
.hero-slider-dot::before {
  content: ''; width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.45);
  transition: width var(--dur-base) ease, background-color var(--dur-base) ease;
}
.hero-slider-dot.is-active::before { width: 22px; background: var(--accent-on-dark, var(--gold)); }
.hero-slider-dot:hover::before { background: rgba(255,255,255,0.8); }
.hero-slider-count { font-size: var(--fs-small); font-weight: 600; color: rgba(255,255,255,0.78); font-variant-numeric: tabular-nums; min-width: 3.5ch; }
.hero-slider-progress { flex: 1 1 80px; max-width: 160px; height: 2px; background: rgba(255,255,255,0.22); border-radius: 2px; overflow: hidden; }
.hero-slider-progress > span { display: block; height: 100%; width: 0; background: var(--accent-on-dark, var(--gold)); }
@media (prefers-reduced-motion: reduce) {
  .hero-media-layer, .hero-slide { transition: none; transform: none; }
  .hero-slider-progress { display: none; }
}
.hero-more {
  list-style: none; margin: var(--space-6) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--space-5);
}
.hero-more-item { border-top: 2px solid var(--accent-on-dark, var(--gold)); padding-top: var(--space-3); }
.hero-more-item .hero-story-meta { margin-bottom: 6px; }
.hero-more-link {
  display: block; color: var(--on-dark); text-decoration: none;
  font-size: var(--fs-body); font-weight: 600; line-height: 1.4;
  padding-block: 3px;   /* cible ≥ 24 px */
}
.hero-more-link:hover, .hero-more-link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* Boutons sur fond marine : plein à la couleur du site, ou fantôme */
.btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 28px; border-radius: var(--radius-pill);
  font-family: inherit; font-size: var(--fs-body); font-weight: 700; text-decoration: none; cursor: pointer;
  transition: var(--dur-base) var(--ease-out); transition-property: var(--transition-ui);
}
.btn-primary { background: var(--accent-on-dark, var(--gold)); color: var(--navy-deep); border: 0; }
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-primary svg { transition: transform var(--dur-base) var(--ease-out); }
.btn-primary:hover svg { transform: translateX(3px); }
.btn-secondary { background: transparent; color: var(--on-dark); border: 1px solid rgba(255,255,255,0.4); font-weight: 600; }
.btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.7); }

/* Panneau des chiffres clés : verre dépoli sur la photo du héros (fond marine translucide + flou),
   texte clair ; le voile foncé du verre garde le contraste même devant une zone claire de la photo */
.hero-kpis {
  background: rgba(6, 19, 37, 0.52);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
          backdrop-filter: blur(16px) saturate(140%);
  color: var(--on-dark);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top: 3px solid var(--accent-on-dark, var(--gold));
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  padding: var(--space-5) var(--space-5) var(--space-4);
}
/* Sans flou d'arrière-plan (navigateur ancien) : verre plus opaque pour rester lisible */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-kpis { background: rgba(6, 19, 37, 0.82); }
}
.hero-kpis-title {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-on-dark, var(--gold));
}
.hero-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.hero-kpi {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: var(--space-4) var(--space-3) var(--space-4) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.hero-kpi:nth-child(even) { padding-left: var(--space-4); border-left: 1px solid rgba(255, 255, 255, 0.14); }
.hero-kpi:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.hero-kpi-value { order: -1; margin: 0; line-height: 1.1; color: var(--on-dark); }
.hero-kpi-number { font-size: 1.875rem; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
.hero-kpi-unit { font-size: var(--fs-small); font-weight: 700; color: rgba(255, 255, 255, 0.72); }
.hero-kpi-label { font-size: var(--fs-small); line-height: 1.4; color: rgba(255, 255, 255, 0.92); font-weight: 600; }
.hero-kpi-meta { margin: 0; font-size: var(--fs-caption); line-height: 1.4; color: rgba(255, 255, 255, 0.7); }
.hero-kpis-more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-2);
  padding-block: 4px; font-size: var(--fs-small); font-weight: 700; color: var(--accent-on-dark, var(--gold)); text-decoration: none;
}
.hero-kpis-more:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1024px) {
  .hero { padding: var(--space-7) 0 calc(var(--space-7) + var(--space-5)); }
  .hero-content { grid-template-columns: 1fr; gap: var(--space-6); }
  .hero-main { max-width: none; }
  /* Texte sur toute la largeur : voile régulier, sans côté clair sous les fins de ligne */
  .hero-media::after { background: linear-gradient(180deg, rgba(6,19,37,0.72) 0%, rgba(11,29,58,0.58) 55%, rgba(6,19,37,0.66) 100%); }
}
@media (max-width: 640px) {
  .hero { padding: var(--space-6) 0 calc(var(--space-6) + var(--space-5)); }
  .hero-content { padding: 0 16px; }
  .hero-buttons > * { flex: 1 1 100%; }
  .hero-kpis { padding: var(--space-4); }
  .hero-kpi-number { font-size: 1.5rem; }
}

/* (Une règle .quick-access — bande blanche remontée de 60 px — était annulée par une accolade
   orpheline juste au-dessus ; retirée avec l'accolade : le rendu validé est celui sans elle.) */
.quick-access-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.qa-item {
  padding: 32px 28px;
  display: flex; align-items: center; gap: 16px;
  text-decoration: none; color: var(--text-primary);
  transition: var(--dur-slow) ease; transition-property: var(--transition-ui);
  border-right: 1px solid var(--border-subtle);
  position: relative;
}
.qa-item:last-child { border-right: none; }
.qa-item:hover { background: var(--warm-gray); }
.qa-item:hover .qa-icon { transform: scale(1.05); }
.qa-icon {
  width: 50px; height: 50px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: transform var(--dur-slow) ease;
  /* Pastille unique pour toutes les tuiles (plus de couleur par position) */
  background: var(--navy); color: var(--gold);
}
.qa-icon.navy-bg { background: var(--navy); color: white; }
.qa-icon.gold-bg { background: var(--gold); color: var(--navy-deep); }
.qa-icon.emerald-bg { background: var(--emerald); color: white; }
.qa-icon.light-bg { background: var(--warm-gray); color: var(--navy); }
.qa-text h3 {
  font-size: var(--fs-small); font-weight: 700; margin-bottom: 2px;
  color: var(--text-primary);
}
.qa-text p {
  font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.4;
}

.section { padding: 100px 0; }
.section-label {
  font-size: var(--fs-caption); text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--gold);
  font-weight: 700; margin-bottom: 12px;
}
/* Contraste (a11y) : or foncé pour les labels sur sections claires ;
   l'or clair (#D6A74B) échoue sur blanc (2.2:1). Les sections sombres gardent l'or clair. */
.section .section-label { color: var(--gold-ink); }
.section.directions .section-label { color: var(--gold); }
.section-title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: var(--fs-h2);
  color: var(--text-primary); line-height: 1.15;
  margin-bottom: 16px;
}
.section-desc {
  font-size: var(--fs-body); color: var(--text-secondary);
  line-height: 1.7; max-width: 600px;
}

.section.actualites { background: var(--warm-white); padding-top: 44px; }
.actualites-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 48px;
}
/* Zone cliquable portée à 24 px+ sans décaler la mise en page (marge négative). */
.link-all {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--navy); font-weight: 600; font-size: var(--fs-small);
  text-decoration: none; transition: gap var(--dur-slow) ease;
  padding-block: 4px; margin-block: -4px;
}
.link-all:hover { gap: 14px; color: var(--gold-ink); }

/* Actualités : layout 2 colonnes (actus + sidebar publications) */
.actualites-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 40px; align-items: start;
}
.news-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 24px;
}

/* Sidebar Publications (Revue & Bulletins) */
.publications-aside {
  background: var(--surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 22px 20px;
  box-shadow: var(--shadow-sm); position: sticky; top: 96px;
}
.publications-head { margin-bottom: 6px; }
.publications-title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: var(--fs-h3); color: var(--navy); margin: 0 0 4px; line-height: 1.1;
}
.publications-sub { font-size: var(--fs-small); color: var(--text-secondary); margin: 0 0 6px; line-height: 1.45; }
.pub-card {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 0; text-decoration: none;
  border-top: 1px solid var(--border-subtle);
}
.pub-cover {
  width: 62px; height: auto; border-radius: var(--radius-sm); flex-shrink: 0;
  box-shadow: 0 5px 16px rgba(0,0,0,0.16);
  transition: transform var(--dur-base) ease, box-shadow var(--dur-base) ease;
}
.pub-card:hover .pub-cover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,0.22); }
.pub-info { display: flex; flex-direction: column; gap: 3px; }
.pub-period {
  font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--gold-ink); font-weight: 700;
}
.pub-name { font-weight: 600; color: var(--navy); font-size: var(--fs-body); line-height: 1.25; }
.pub-dl {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 4px;
  font-size: var(--fs-small); font-weight: 600; color: var(--gold-ink);
}
.pub-card:hover .pub-dl { color: var(--gold); }
.publications-all {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px; padding-top: 14px; width: 100%;
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-small); font-weight: 600; color: var(--navy);
  text-decoration: none; transition: gap var(--dur-base) ease, color var(--dur-base) ease;
}
.publications-all:hover { color: var(--gold-ink); gap: 11px; }
@media (max-width: 1024px) {
  .actualites-layout { grid-template-columns: 1fr; gap: 32px; }
  .publications-aside { position: static; }
}
/* Accueil : toutes les actualités sont déjà « à la une » dans le héros → la section ne garde
   que les publications, en rangée de cartes (le titre de section remplace l'en-tête du bloc). */
.actualites--pubs .actualites-layout { display: block; }
.actualites--pubs .publications-aside {
  position: static; background: none; border: 0; box-shadow: none; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--space-4);
}
.actualites--pubs .publications-head { display: none; }
.actualites--pubs .pub-card {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface);
  padding: var(--space-4); box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) ease, transform var(--dur-base) ease;
}
.actualites--pubs .pub-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.actualites--pubs .pub-cover { width: 76px; }
.actualites--pubs .publications-all { grid-column: 1 / -1; justify-self: start; border-top: 0; margin-top: 0; padding: 6px 0; width: auto; }

/* Page « Toutes les publications » — grille de tuiles */
.publications-list { background: var(--warm-white); }
.pub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 26px; margin-top: 40px;
}
.pub-tile {
  display: flex; gap: 18px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 18px;
  transition: transform var(--dur-base) ease, box-shadow var(--dur-base) ease, border-color var(--dur-base) ease;
}
.pub-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--gold); }
.pub-tile-cover { position: relative; flex-shrink: 0; }
.pub-tile-cover img {
  width: 96px; height: auto; border-radius: var(--radius-sm); display: block;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
/* Sans couverture (étude, rapport sans image) : couverture sobre au format d'une page, type et direction */
.pub-tile-nocover {
  width: 96px; aspect-ratio: 210 / 297; border-radius: var(--radius-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 10px 6px 12px; box-sizing: border-box;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); color: var(--gold);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.06em;
}
.pub-tile-type {
  position: absolute; top: 8px; left: 8px;
  background: var(--gold); color: var(--navy-deep);
  font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 3px 8px; border-radius: var(--radius-sm);
}
.pub-tile-body { display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.pub-tile-period { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.04em; color: var(--gold-ink); font-weight: 700; }
.pub-tile-title { font-family: var(--font-sans); font-size: var(--fs-h4); color: var(--navy); line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.pub-tile-dl { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-small); font-weight: 600; color: var(--gold-ink); }
.pub-tile:hover .pub-tile-dl { color: var(--gold); }

/* Filtres publications — [hidden] doit gagner sur le display:flex des tuiles */
.pub-tile[hidden] { display: none !important; }
.pub-filters {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 28px; padding: 16px 20px;
  background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
}
.pub-filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pub-filter-group + .pub-filter-group { border-top: 1px solid var(--border-subtle); padding-top: 12px; }
.pub-filter-label {
  min-width: 84px;
  font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--navy); margin-right: 4px;
}
.pub-filter-chip {
  font: inherit; font-size: var(--fs-small); font-weight: 600; cursor: pointer;
  padding: 6px 14px; border-radius: var(--radius-pill);
  background: var(--warm-white); color: var(--navy);
  border: 1px solid var(--border-subtle);
  transition: background var(--dur-base) ease, color var(--dur-base) ease, border-color var(--dur-base) ease;
}
.pub-filter-chip:hover { border-color: var(--gold); color: var(--gold-ink); }
.pub-filter-chip.is-active { background: var(--navy); color: var(--on-dark); border-color: var(--navy); }
.pub-tile-dir {
  align-self: flex-start;
  font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--gold-ink); background: rgba(214,167,75,0.14);
  padding: 2px 8px; border-radius: var(--radius-sm);
}
/* Tableau de bord Power BI : cadre aux proportions du rapport, écran d'accord avant chargement.
   Tout en clair : l'écran d'accord annonce le rapport (blanc) et la page se détache du pied de page */
.pbi-head { margin-bottom: 24px; }
.pbi-frame {
  position: relative; width: 100%; max-width: 100%;
  aspect-ratio: var(--pbi-ratio, 1140 / 541);
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border-subtle); background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.pbi-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
/* Lien « Publier sur le web » : page 16:9 + barres de Power BI (zoom et pages, 64 px) ; le pourcentage
   de padding-top suit la largeur : le rapport remplit le cadre sans bandes blanches, à toute largeur */
.pbi-frame--web { aspect-ratio: auto; padding-top: calc(56.25% + 64px); }
.pbi-frame--web:not(.is-loaded) { min-height: 480px; }  /* écran d'accord entier avant le chargement */
.pbi-consent {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 28px; text-align: center; color: var(--text-secondary);
  background:
    radial-gradient(circle at 2px 2px, rgba(11,29,58,0.07) 1.1px, transparent 1.4px) 0 0 / 26px 26px,
    radial-gradient(120% 140% at 28% 12%, var(--surface) 0%, var(--surface-alt) 55%, #EDF0F4 100%);
}
.pbi-consent-icon {
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  color: var(--gold-ink); background: rgba(214,167,75,0.14); border: 1px solid rgba(214,167,75,0.45);
}
.pbi-consent-title { margin: 0; color: var(--navy); font-weight: 700; font-size: var(--fs-h5, 1.125rem); }
.pbi-consent-text { margin: 0; max-width: 58ch; font-size: var(--fs-small); line-height: 1.6; }
.pbi-consent-text a { color: var(--gold-ink); }
.pbi-consent-note {
  margin: 0; font-size: var(--fs-small); color: var(--gold-ink);
  border: 1px solid rgba(132,99,20,0.35); border-radius: var(--radius-sm); padding: 6px 12px;
}
.pbi-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
/* Bouton secondaire prévu pour fond marine : version claire ici */
.pbi-actions .btn-secondary { color: var(--navy); border-color: rgba(11,29,58,0.28); }
.pbi-actions .btn-secondary:hover { background: rgba(11,29,58,0.05); border-color: rgba(11,29,58,0.5); }
.pbi-meta { margin: 14px 0 0; font-size: var(--fs-small); color: var(--text-secondary); }
.pbi-meta a { color: var(--gold-ink); }
/* Page Tableau de bord : bande claire, distincte du héros et du pied de page sombres */
.page-content-pbi { background: var(--surface-alt); border-bottom: 1px solid var(--border-subtle); }
@media (max-width: 720px) {
  /* Petit écran : le rapport, prévu en paysage, garde une hauteur lisible (Power BI l'adapte) ;
     le format « web » garde sa hauteur proportionnelle (sinon, bandes blanches autour de la page) */
  .pbi-frame:not(.pbi-frame--web) { aspect-ratio: auto; height: 520px; }
}

.pub-empty { margin-top: 30px; text-align: center; color: var(--text-secondary); font-size: var(--fs-body); padding: 24px; }

.news-card {
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  transition: var(--dur-slow) ease; transition-property: var(--transition-ui);
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
}
.news-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: transparent;
}
.news-card.featured { grid-row: span 2; }
.news-card-img {
  height: 220px;
  background: var(--navy);
  position: relative; overflow: hidden;
}
.news-card.featured .news-card-img { height: 100%; min-height: 300px; }
.news-card-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
}
.news-card:hover .news-card-img img { transform: scale(1.05); }
.news-card-img .news-tag {
  position: absolute; top: 16px; left: 16px;
  background: var(--gold); color: var(--navy-deep);
  padding: 5px 14px; border-radius: var(--radius-pill);
  font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em;
}
.news-card-body { padding: 28px; flex: 1; display: flex; flex-direction: column; }
.news-date {
  font-size: var(--fs-small); color: var(--text-light);
  font-weight: 500; margin-bottom: 10px;
  font-variant-numeric: tabular-nums; /* ex-JetBrains Mono : dates désormais en toutes lettres */
}
.news-card-body h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4); line-height: 1.35;
  margin-bottom: 12px; color: var(--text-primary);
  font-weight: 700; letter-spacing: -0.01em;
}
.news-card.featured .news-card-body h3 { font-size: var(--fs-h3); }
.news-card-body p {
  font-size: var(--fs-body); color: var(--text-secondary);
  line-height: 1.6; flex: 1;
}
.news-read-more {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 20px; align-self: flex-start;
  padding: 10px 20px; border-radius: var(--radius-pill);
  background: var(--navy); color: white;
  font-size: var(--fs-small); font-weight: 600;
  letter-spacing: 0.02em;
  transition: background var(--dur-base) ease, transform var(--dur-base) ease, gap var(--dur-base) ease, box-shadow var(--dur-base) ease;
  box-shadow: 0 4px 12px rgba(11,29,58,0.15);
}
.news-read-more svg { transition: transform var(--dur-base) ease; }
.news-card:hover .news-read-more {
  background: var(--gold); color: var(--navy-deep);
  gap: 12px; transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(214,167,75,0.35);
}

.directions { background: var(--navy); color: white; position: relative; overflow: hidden; }
.directions::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 80% at 100% 0%, rgba(214,167,75,0.06) 0%, transparent 70%);
}
.directions .section-title { color: white; }
.directions .section-desc { color: rgba(255,255,255,0.55); }
.directions-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px; margin-top: 48px;
  position: relative; z-index: 1;
}
.dir-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  text-decoration: none; color: white;
  transition: var(--dur-slow) ease; transition-property: var(--transition-ui);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.dir-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--gold);
  transform: scaleX(0); transition: transform var(--dur-slow) ease;
  transform-origin: left;
}
.dir-card:hover::before { transform: scaleX(1); }
.dir-card:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-4px);
  border-color: rgba(214,167,75,0.2);
}
.dir-card-icon {
  width: 52px; height: 52px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
}
.dir-card-icon.da { background: rgba(214,167,75,0.15); color: var(--gold); }
.dir-card-icon.dmc { background: rgba(27,107,74,0.2); color: var(--emerald-light); }
.dir-card-icon.drsfd { background: rgba(99,145,255,0.15); color: var(--deco-blue); }
.dir-card-icon.dap { background: rgba(232,108,82,0.12); color: var(--deco-coral); }
.dir-card h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-body); line-height: 1.3;
  margin-bottom: 14px;
  font-weight: 700; letter-spacing: -0.01em;
}
.dir-card p {
  font-size: var(--fs-small); color: rgba(255,255,255,0.55);
  line-height: 1.6; flex: 1;
}
.dir-card-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-small); font-weight: 600; color: var(--gold);
  margin-top: 20px; transition: gap var(--dur-slow) ease;
}
.dir-card:hover .dir-card-arrow { gap: 12px; }

.textes { background: var(--warm-gray); }
.textes-tabs {
  display: flex; gap: 8px; margin-bottom: 36px; margin-top: 40px;
  flex-wrap: wrap;
}
.tab-btn {
  padding: 10px 24px; border-radius: var(--radius-pill);
  font-family: inherit; font-size: var(--fs-small); font-weight: 600;
  cursor: pointer; border: 1px solid var(--border-subtle);
  background: white; color: var(--text-secondary);
  transition: var(--dur-base) ease; transition-property: var(--transition-ui);
}
.tab-btn:hover { border-color: var(--navy); color: var(--navy); }
.tab-btn.active { background: var(--navy); color: white; border-color: var(--navy); }
.textes-list { display: flex; flex-direction: column; gap: 12px; }
.texte-item {
  background: white; border-radius: var(--radius-md);
  padding: 20px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border: 1px solid var(--border-subtle);
  transition: var(--dur-base) ease; transition-property: var(--transition-ui);
  text-decoration: none; color: inherit;
}
.texte-item:hover {
  border-color: var(--gold); box-shadow: var(--shadow-sm);
  transform: translateX(4px);
}
.texte-item-left { display: flex; align-items: center; gap: 16px; flex: 1; }
.texte-type {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: var(--fs-caption); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.texte-type.loi { background: var(--doc-loi-bg); color: var(--doc-loi); }
.texte-type.arrete { background: var(--doc-arrete-bg); color: var(--doc-arrete); }
.texte-type.decret { background: var(--doc-decret-bg); color: var(--doc-decret); }
.texte-type.circulaire { background: var(--doc-circulaire-bg); color: var(--doc-circulaire); }
.texte-type.instruction { background: var(--doc-instruction-bg); color: var(--doc-instruction); }
.texte-info h3 {
  font-size: var(--fs-small); font-weight: 600; line-height: 1.4;
  color: var(--text-primary); margin-bottom: 3px;
}
.texte-info span { font-size: var(--fs-small); color: var(--text-light); }
.texte-dl { color: var(--text-light); transition: color var(--dur-base) ease; flex-shrink: 0; }
.texte-item:hover .texte-dl { color: var(--gold); }

.procedures { background: white; }
/* Espacement resserré entre Textes (réglementation) et Procédures (services) */
.section.textes { padding-bottom: 44px; }
.section.procedures { padding-top: 44px; }
.procedures-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; margin-top: 48px;
}
.proc-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  text-decoration: none; color: inherit;
  transition: var(--dur-slow) ease; transition-property: var(--transition-ui);
  position: relative;
}
.proc-card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.proc-card-number {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 3rem; color: var(--gold-ink);
  line-height: 1; margin-bottom: 16px;
  transition: color var(--dur-slow) ease;
}
.proc-card:hover .proc-card-number { color: var(--navy); }
.proc-card h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4); margin-bottom: 12px; line-height: 1.3;
  font-weight: 700; letter-spacing: -0.01em;
}
.proc-card p {
  font-size: var(--fs-body); color: var(--text-secondary); line-height: 1.6;
}
.proc-card-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-small); font-weight: 600; color: var(--emerald);
  margin-top: 20px; transition: gap var(--dur-slow) ease;
}
.proc-card:hover .proc-card-link { gap: 12px; }

.section.partenaires { background: var(--warm-white); border-top: 1px solid var(--border-subtle); padding: 54px 0; }
.partenaires-header { text-align: center; margin-bottom: 26px; }
.partenaires-header .section-desc { margin: 0 auto; }
/* Logos partenaires : carrousel continu (site.js) ; grille fixe et centrée sans script ou si le
   visiteur a demandé moins d'animations */
.partners-logos { padding: 14px 0; }
.partners-logos.is-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
/* Marge à droite de chaque logo (et non « gap ») : la moitié de la rangée doublée tombe pile sur la copie */
.partners-logos.is-marquee .partners-track {
  flex-wrap: nowrap; justify-content: flex-start; gap: 0; width: max-content;
  animation: partners-scroll var(--marquee-duration, 40s) linear infinite;
}
.partners-logos.is-marquee .partners-track > * { flex: none; margin-right: 56px; }
.partners-logos.is-marquee:hover .partners-track,
.partners-logos.is-marquee:focus-within .partners-track,
.partners-logos.is-paused .partners-track { animation-play-state: paused; }
@keyframes partners-scroll { to { transform: translateX(-50%); } }
.partners-controls { display: flex; justify-content: center; margin-top: 10px; }
.partners-toggle {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%;
  color: var(--navy); background: var(--surface); border: 1px solid var(--border-input);
}
.partners-toggle:hover { border-color: var(--navy); }
@media (prefers-reduced-motion: reduce) {
  .partners-logos.is-marquee .partners-track { animation: none; }
}
.partners-track { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 48px; }
.partner-logo {
  height: 44px; opacity: 0.55;
  filter: grayscale(100%);
  transition: var(--dur-slow) ease; transition-property: var(--transition-ui);
  object-fit: contain;
  display: block;
}
.partner-logo-link { display: inline-flex; align-items: center; }
.partner-logo-link:hover .partner-logo { opacity: 1; filter: grayscale(0%); }
.partner-chip {
  background: var(--navy); color: white;
  padding: 10px 24px; border-radius: var(--radius-sm);
  font-size: var(--fs-small); font-weight: 600; opacity: 0.6;
  text-decoration: none; transition: opacity var(--dur-slow) ease;
}
.partner-chip:hover { opacity: 1; }

.footer {
  position: relative;
  background: var(--navy-deep);
  color: rgba(255,255,255,0.6);
  padding: 72px 0 0;
}
/* Liseré aux couleurs nationales, comme les pages d'erreur et l'image de partage */
.footer::after {
  content: ""; display: block; height: 4px;
  background: linear-gradient(90deg, #00853F 0 33.34%, #FDEF42 33.34% 66.67%, #E31B23 66.67% 100%);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr;
  gap: 40px;
  max-width: 1280px; margin: 0 auto;
  padding: 0 24px;
}
.footer-brand .footer-logo {
  display: inline-flex; align-items: center;
  margin-bottom: 18px; text-decoration: none;
}
.footer-brand .footer-logo-img {
  height: 64px; width: auto; display: block;
}
.footer-brand .footer-logo-img-drs { height: 58px; max-width: 290px; }
/* Mission en une phrase : discrète, au rythme des colonnes de liens (le nom est dans le logo) */
.footer-mission {
  font-size: var(--fs-small); line-height: 1.65; color: rgba(255,255,255,0.62);
  max-width: 36ch; margin: 0 0 22px;
}
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.5); text-decoration: none;
  transition: var(--dur-base) ease; transition-property: var(--transition-ui); font-size: var(--fs-small);
}
.footer-social a:hover { background: var(--gold); color: var(--navy-deep); }

/* Tutelle : bloc séparé par un filet, logo du MEFP plus discret que celui du site */
.footer-tutelle {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  max-width: 36ch; /* filet aligné sur la mission */
  margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.09);
  text-decoration: none;
}
.footer-tutelle-label {
  font-size: var(--fs-caption); text-transform: uppercase;
  letter-spacing: 0.12em; color: rgba(255,255,255,0.62);
}
.footer-tutelle img {
  height: 40px; width: auto; display: block;
  opacity: 0.88; transition: opacity var(--dur-base) ease;
}
.footer-tutelle:hover img { opacity: 1; }

.footer-col h2 {
  font-size: var(--fs-caption); text-transform: uppercase;
  letter-spacing: 0.15em; color: var(--gold-muted);
  margin-bottom: 24px; font-weight: 700;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 12px; }
.footer-col ul a {
  color: rgba(255,255,255,0.5); text-decoration: none;
  font-size: var(--fs-small); transition: color var(--dur-base) ease;
  display: inline-block; padding-block: 4px; margin-block: -4px; /* cible ≥ 24 px, même rythme */
}
.footer-col ul a:hover { color: white; }

.footer-contact-item {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 16px;
}
.footer-contact-item svg { flex-shrink: 0; margin-top: 2px; color: var(--gold); }
.footer-contact-item span { font-size: var(--fs-small); line-height: 1.5; }
.footer-contact-item a {
  display: inline-block; padding-block: 4px; margin-block: -4px; /* cible ≥ 24 px */
  color: inherit; text-decoration: none; transition: color var(--dur-base) ease;
}
.footer-contact-item a:hover { color: white; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 56px;
  padding: 20px 0 22px; /* marges latérales : celles de .footer-bottom-inner, comme la grille */
}
/* Logo du ministère de tutelle (MEFP) — baseline blanche, lisible sur navy */
.footer-ministere { text-align: center; padding: 8px 0 28px; }
.footer-ministere img {
  height: 58px; width: auto; display: inline-block;
  opacity: 0.95; transition: opacity var(--dur-base) ease;
}
.footer-ministere a:hover img { opacity: 1; }
.footer-bottom-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 10px 32px;
  font-size: var(--fs-small); color: rgba(255,255,255,0.62);
  padding: 0 24px;
}
.footer-copy { margin: 0; }
/* Bureau : liens légaux dégagés du bouton de l'assistant (fixe, en bas à droite) */
@media (min-width: 769px) {
  .footer-bottom-inner { padding-right: 104px; }
}
/* Informations légales : liens séparés par des points médians */
.footer-legal ul { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; }
.footer-legal li + li::before { content: "·"; margin: 0 12px; color: rgba(255,255,255,0.35); }
.footer-legal a {
  color: rgba(255,255,255,0.72); text-decoration: none;
  display: inline-block; padding-block: 4px; /* cible ≥ 24 px */
  transition: color var(--dur-base) ease;
}
.footer-legal a:hover { color: white; text-decoration: underline; text-underline-offset: 3px; }

.reveal {
  opacity: 0; transform: translateY(32px);
  transition: 0.7s cubic-bezier(0.16, 1, 0.3, 1); transition-property: var(--transition-ui);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* MOT DG (custom addition kept lean, maquette-aligned) */
.section.motdg-section { background: var(--warm-gray); padding: 44px 0; }
.motdg-grid {
  display: grid; grid-template-columns: 360px 1fr; gap: 64px;
  align-items: center; margin-top: 48px;
}
.motdg-portrait {
  position: relative;
  border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4/5; background: var(--navy);
  box-shadow: var(--shadow-lg);
}
.motdg-portrait img { width: 100%; height: 100%; object-fit: cover; }
/* Portrait absent : état d'attente assumé (silhouette or sur marine) au lieu d'un bloc vide.
   La silhouette et le badge n'avaient aucun style → dessinés en marine sur marine. */
.motdg-img-placeholder {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: rgba(214,167,75,0.5);
  background: radial-gradient(120% 90% at 30% 20%, var(--navy-light) 0%, var(--navy) 55%, var(--navy-deep) 100%);
}
.motdg-img-placeholder svg { width: 42%; height: auto; }
.motdg-badge {
  position: absolute; left: 20px; bottom: 20px;
  background: var(--gold); color: var(--navy);
  font-weight: 800; font-size: var(--fs-small); letter-spacing: 0.12em;
  padding: 7px 14px; border-radius: var(--radius-pill);
}
@media (max-width: 768px) {
  .motdg-portrait:has(.motdg-img-placeholder) { aspect-ratio: auto; height: 200px; max-width: 200px; }
}
/* Photo posée : médaillon rond cerclé d'or (portrait officiel cadré au carré). */
.motdg-portrait:has(.motdg-img) {
  aspect-ratio: 1; border-radius: 50%; overflow: visible;
  width: 100%; max-width: 380px; justify-self: center; align-self: center;
  box-shadow: none; background: none;
}
.motdg-portrait:has(.motdg-img) img {
  border-radius: 50%;
  box-shadow: 0 0 0 6px var(--surface), 0 0 0 8px var(--gold), var(--shadow-lg);
}
.motdg-portrait:has(.motdg-img) .motdg-badge { left: 50%; bottom: 2%; transform: translateX(-50%); }
@media (max-width: 768px) {
  .motdg-portrait:has(.motdg-img) { max-width: 240px; }
}
.motdg-body blockquote {
  font-family: var(--font-serif); font-weight: 400;
  font-size: var(--fs-h3); line-height: 1.5; color: var(--text-primary);
  margin: 20px 0 28px; padding-left: 20px;
  border-left: 3px solid var(--gold);
}
.motdg-body .motdg-name {
  font-family: var(--font-serif); font-weight: 400;
  font-size: var(--fs-h3); color: var(--navy); margin-bottom: 4px;
}
.motdg-body .motdg-function {
  font-size: var(--fs-caption); color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.motdg-signature {
  font-family: var(--font-serif); font-weight: 400;
  font-size: var(--fs-body); color: var(--navy);
  margin: 4px 0 24px;
}
.motdg-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px; border-radius: var(--radius-pill);
  background: var(--navy); color: white;
  font-family: inherit; font-size: var(--fs-small); font-weight: 700;
  letter-spacing: 0.02em; text-decoration: none;
  box-shadow: 0 6px 16px rgba(11,29,58,0.2);
  transition: var(--dur-base) ease; transition-property: var(--transition-ui);
}
.motdg-cta svg { transition: transform var(--dur-base) ease; }
.motdg-cta:hover {
  background: var(--gold); color: var(--navy-deep);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(214,167,75,0.35);
}
.motdg-cta:hover svg { transform: translateX(4px); }

/* En-tête resserré sur les écrans de portable (≤ 1280 px, ex. 14 pouces à 150 %) : logos,
   marges et bouton Contact plus compacts, pour garder le menu complet le plus longtemps possible. */
@media (max-width: 1280px) {
  .header-bar-inner { padding: 0 20px; gap: 10px; }
  .header-logo-dgsf img { height: 40px; max-width: 220px; }
  .header-logo-drs img, .header-logo-da img { height: 44px; max-width: 270px; }
  .header-logo-mefp { margin-left: 2px; padding-left: 10px; }
  .header-logo-mefp img { height: 32px; padding: 5px 9px; }
  .header-actions { gap: 8px; }
  .btn-contact { padding: 9px 16px; }
}

/* Menu compact (bouton « trois traits ») : toujours sur tablette et téléphone (≤ 1024 px) ;
   au-delà, seulement si le menu ne tient pas dans l'en-tête — site.js le mesure et pose
   html.nav-compact (les menus des 3 sites n'ont pas la même longueur). */
@media (max-width: 1024px) {
  .header-nav { display: none; }
  .btn-contact { display: none; }
  .mobile-menu-btn { display: flex; }
  .header-bar-inner { justify-content: space-between; }
}
html.nav-compact .header-nav { display: none; }
html.nav-compact .btn-contact { display: none; }
html.nav-compact .mobile-menu-btn { display: flex; }
html.nav-compact .header-bar-inner { justify-content: space-between; }

@media (max-width: 1024px) {
  .quick-access-inner { grid-template-columns: repeat(2, 1fr); }
  .qa-item:nth-child(2) { border-right: none; }
  .directions-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .motdg-grid { grid-template-columns: 1fr; gap: 32px; }
  .motdg-portrait { max-width: 320px; } /* une colonne : le portrait 4:5 occupait toute la largeur (~950 px de haut) */
}

@media (max-width: 768px) {
  .quick-access-inner { grid-template-columns: 1fr; }
  .qa-item { border-right: none; border-bottom: 1px solid var(--border-subtle); }
  .qa-item:last-child { border-bottom: none; }
  .news-grid { grid-template-columns: 1fr; }
  .news-card.featured { grid-row: span 1; }
  .directions-grid { grid-template-columns: 1fr; }
  .procedures-grid { grid-template-columns: 1fr; }
  /* Mobile : colonnes de liens deux par deux (pied de page moins long), marque et contact en pleine largeur */
  .footer { padding-top: 56px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
  .footer-brand, .footer-col:last-child { grid-column: 1 / -1; }
  .footer-col h2 { margin-bottom: 16px; }
  .footer-bottom { margin-top: 40px; }
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-legal ul { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 20px; }
  .footer-legal li + li::before { content: none; }
  .actualites-header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .section { padding: 60px 0; }
}

@media (max-width: 1024px) {
  .header-bar-inner { height: 76px; }
  .header-logo-dgsf img { height: 44px; }
  .header-logo-drs img, .header-logo-da img { height: 46px; }
  .header-logo-mefp img { height: 32px; width: auto; padding: 5px 10px; }
  .btn-search { display: none; }
}
@media (max-width: 640px) {
  .header-bar-inner { height: 64px; padding: 0 14px; gap: 8px; }
  .header-logo-dgsf img { height: 36px; }
  .header-logo-drs img, .header-logo-da img { height: 38px; }
  .header-logo-mefp img { height: 28px; width: auto; padding: 4px 9px; }
  .header-logo-mefp { padding-left: 10px; margin-left: 4px; }
  .btn-contact { padding: 8px 14px; font-size: var(--fs-small); }
}