/* =========================================================================
   Judith Suminwa Tuluka — pages intérieures
   Bannière de page, fil d'Ariane, frise, onglets, accordéon, filtres,
   formulaire. L'accueil garde sa propre feuille.
   ========================================================================= */

/* ── Trame commune des sections ────────────────────────────────────────── */
.section { padding: 4.5rem 0; }
@media (min-width: 640px) { .section { padding: 5.5rem 0; } }
.section-bande { background: rgba(255, 255, 255, .5); }

.tete-section { margin-bottom: 2.5rem; max-width: 46rem; }
.tete-section.centre { margin-inline: auto; text-align: center; }
.etiquette {
  display: inline-flex;
  border-radius: 9999px;
  background: var(--bleu-pale);
  color: var(--bleu-royal);
  padding: .4rem 1rem;
  font-size: .8rem;
  font-weight: 600;
}
.titre-section {
  margin-top: 1rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.85rem, 3.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1.12;
  color: var(--bleu-marine);
}
.chapo-section { margin-top: 1.25rem; font-size: 1.0625rem; line-height: 1.65; color: var(--gris-texte); }

.note-bas { margin-top: 1.5rem; font-size: .8rem; color: var(--gris-moyen); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Bannière de page intérieure ───────────────────────────────────────── */
.hero-interieur {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: var(--hauteur, 44vh);
  padding: 8.5rem 0 3.5rem;
}
.hero-blason {
  position: absolute;
  right: -5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
  width: 26rem;
  height: 26rem;
  object-fit: contain;
  opacity: .05;
  pointer-events: none;
}
.fil-ariane {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem 1rem;
  font-size: .8rem;
  color: var(--gris-moyen);
  border-radius: 9999px;
}
.fil-ariane a { color: var(--bleu-royal); font-weight: 600; text-decoration: none; }
.fil-ariane a:hover { text-decoration: underline; }
.fil-ariane span[aria-current] { color: var(--bleu-marine); font-weight: 600; }

.badge-page {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.5rem;
  border-radius: 9999px;
  background: var(--bleu-marine);
  color: #fff;
  padding: .4rem 1rem;
  font-size: .85rem;
  font-weight: 600;
}
.hero-interieur-titre {
  margin-top: 1.25rem;
  max-width: 50rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.1rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.06;
  color: var(--bleu-marine);
}
.hero-interieur-chapo { margin-top: 1.25rem; max-width: 42rem; font-size: 1.0625rem; line-height: 1.65; color: var(--gris-texte); }
.hero-interieur-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; }

/* ── Navigation : état actif ───────────────────────────────────────────── */
.lien-nav {
  border-radius: 9999px;
  padding: .5rem 1rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--gris-texte);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.lien-nav:hover { background: rgba(10, 42, 94, .07); color: var(--bleu-marine); }
.lien-nav.actif { background: var(--bleu-marine); color: #fff; }
.lien-nav-mobile {
  display: flex;
  align-items: center;
  gap: .75rem;
  border-radius: .75rem;
  padding: .75rem 1rem;
  font-weight: 500;
  color: var(--bleu-marine);
  text-decoration: none;
}
.lien-nav-mobile:hover { background: rgba(255, 255, 255, .6); }
.lien-nav-mobile.actif { background: var(--bleu-pale); font-weight: 700; }
.lien-pied { color: rgba(255, 255, 255, .8); text-decoration: none; transition: color .2s ease; }
.lien-pied:hover { color: var(--jaune); }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  color: var(--bleu-royal);
  text-decoration: none;
}
.lien-fleche:hover { text-decoration: underline; }

/* ── Grilles ───────────────────────────────────────────────────────────── */
.grille-deux, .grille-trois, .grille-quatre { display: grid; gap: 1.5rem; }
@media (min-width: 720px) { .grille-deux { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 720px) { .grille-trois, .grille-quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grille-trois { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grille-quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.carte { padding: 1.75rem; }
.carte h3 { color: var(--bleu-marine); }

/* ── Fiche d'identité ──────────────────────────────────────────────────── */
.grille-fiche { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .grille-fiche { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
.badge-premiere {
  position: absolute;
  left: 1rem;
  top: 1rem;
  border-radius: 9999px;
  background: var(--rouge);
  color: #fff;
  padding: .4rem 1rem;
  font-size: .78rem;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(206, 16, 33, .3);
}
.fiche { padding: 1.75rem; }
.fiche-ligne {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 8rem) minmax(0, 1fr);
  align-items: baseline;
  gap: .5rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--gris-bordure);
}
.fiche-ligne:last-of-type { border-bottom: 0; }
.fiche-icone { color: var(--bleu-royal); }
.fiche-cle { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gris-moyen); }
.fiche-val { color: var(--encre); font-weight: 500; }
.fiche-val .age { color: var(--gris-moyen); font-weight: 400; }
.fiche-note { margin-top: 1rem; font-size: .8rem; color: var(--gris-moyen); }
.fiche .lien-fleche { margin-top: 1.25rem; }

/* ── Chapitres ─────────────────────────────────────────────────────────── */
.grille-chapitres { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .grille-chapitres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.chapitre { position: relative; }
.chapitre-num {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--jaune);
  line-height: 1;
}
.chapitre-icone { display: block; margin-top: .75rem; color: var(--bleu-royal); }
.chapitre-titre { margin-top: .75rem; font-family: "Playfair Display", Georgia, serif; font-size: 1.35rem; font-weight: 700; }
.chapitre-texte { margin-top: .75rem; color: var(--gris-texte); line-height: 1.6; }

/* ── Filtres ───────────────────────────────────────────────────────────── */
.filtres { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }
.pastille-filtre {
  border-radius: 9999px;
  border: 1px solid var(--gris-bordure);
  background: rgba(255, 255, 255, .7);
  padding: .5rem 1.1rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--gris-texte);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.pastille-filtre:hover { border-color: var(--bleu-royal); color: var(--bleu-marine); }
.pastille-filtre.actif { background: var(--bleu-marine); border-color: var(--bleu-marine); color: #fff; }
[data-filtrable] > .masque { display: none; }

/* ── Frise ─────────────────────────────────────────────────────────────── */
.frise { list-style: none; margin: 0; padding: 0; position: relative; }
.frise::before {
  content: "";
  position: absolute;
  left: 1.15rem;
  top: .5rem;
  bottom: .5rem;
  width: 2px;
  background: linear-gradient(var(--bleu-royal), rgba(11, 79, 179, .15));
}
.frise-item { position: relative; padding-left: 3.25rem; padding-bottom: 1.75rem; }
.frise-point {
  position: absolute;
  left: .4rem;
  top: .4rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: var(--jaune);
  border: 3px solid var(--bleu-marine);
  box-shadow: 0 0 0 6px rgba(247, 214, 24, .28);
}
.frise-carte { padding: 1.5rem; }
.frise-date { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--bleu-royal); }
.frise-titre { display: flex; align-items: center; gap: .6rem; margin-top: .4rem; font-family: "Playfair Display", Georgia, serif; font-size: 1.2rem; font-weight: 700; color: var(--bleu-marine); }
.frise-texte { margin-top: .5rem; color: var(--gris-texte); line-height: 1.6; }
@media (min-width: 1024px) {
  .frise::before { left: 50%; transform: translateX(-50%); }
  .frise-item { width: 50%; padding-left: 0; padding-right: 3.25rem; }
  .frise-item:nth-child(even) { margin-left: 50%; padding-left: 3.25rem; padding-right: 0; }
  .frise-point { left: auto; right: -.75rem; }
  .frise-item:nth-child(even) .frise-point { left: -.75rem; right: auto; }
}

/* ── Diplômes ──────────────────────────────────────────────────────────── */
.diplome { border-top: 3px solid var(--bleu-royal); }
.diplome-icone { color: var(--jaune-or); }
.diplome-titre { margin-top: .75rem; font-size: 1.05rem; font-weight: 700; line-height: 1.35; }
.diplome-etab { margin-top: .5rem; color: var(--gris-texte); }
.diplome-ville { display: flex; align-items: center; gap: .4rem; margin-top: .75rem; font-size: .85rem; color: var(--gris-moyen); }

/* ── Accordéon ─────────────────────────────────────────────────────────── */
.colonne-acc { display: grid; gap: 1rem; max-width: 48rem; margin-inline: auto; }
.acc { overflow: hidden; }
.acc summary {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--bleu-marine);
}
.acc summary::-webkit-details-marker { display: none; }
.acc-icone { color: var(--bleu-royal); }
.acc-titre { flex: 1; }
.acc-chevron { color: var(--bleu-royal); transition: transform .25s ease; }
.acc[open] .acc-chevron { transform: rotate(180deg); }
.acc-corps { padding: 0 1.5rem 1.5rem 1.5rem; color: var(--gris-texte); line-height: 1.65; }

/* ── Étapes numérotées ─────────────────────────────────────────────────── */
.etapes { list-style: none; margin: 0 0 2.5rem; padding: 0; display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.etape {
  position: relative;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: var(--rayon);
  box-shadow: 0 10px 30px rgba(10, 42, 94, .10);
  padding: 1.75rem;
}
.etape-num { font-family: "Playfair Display", Georgia, serif; font-size: 2rem; font-weight: 800; color: var(--jaune); line-height: 1; }
.etape-icone { display: block; margin-top: .5rem; color: var(--bleu-royal); }
.etape-date { display: block; margin-top: .75rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--bleu-marine); }
.etape-texte { margin-top: .6rem; color: var(--gris-texte); line-height: 1.6; }

.bloc-chiffre { padding: 2rem; text-align: center; }
.bloc-chiffre-val { font-family: "Playfair Display", Georgia, serif; font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 800; color: var(--jaune); line-height: 1; }
.bloc-chiffre-val .sur { font-size: .45em; color: #fff; }
.bloc-chiffre-leg { margin-top: .75rem; color: rgba(255, 255, 255, .85); }

/* ── Onglets ───────────────────────────────────────────────────────────── */
.barre-onglets { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.5rem; }
.onglet {
  border-radius: 9999px;
  border: 1px solid var(--gris-bordure);
  background: rgba(255, 255, 255, .7);
  padding: .6rem 1.4rem;
  font-weight: 600;
  color: var(--gris-texte);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.onglet:hover { border-color: var(--bleu-royal); color: var(--bleu-marine); }
.onglet.actif { background: var(--bleu-marine); border-color: var(--bleu-marine); color: #fff; }
.panneau-onglet { padding: 1.75rem; }
.paire { display: grid; gap: .25rem; padding: .85rem 0; border-bottom: 1px solid var(--gris-bordure); }
@media (min-width: 720px) { .paire { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: 1.5rem; } }
.paire:last-child { border-bottom: 0; }
.paire dt { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--bleu-royal); }
.paire dd { margin: 0; color: var(--gris-texte); line-height: 1.6; }

/* ── Piliers ───────────────────────────────────────────────────────────── */
.grille-piliers { display: grid; gap: 1.25rem; }
@media (min-width: 720px) { .grille-piliers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grille-piliers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pilier { padding: 0; }
.pilier summary { display: flex; align-items: center; gap: .75rem; padding: 1.5rem; cursor: pointer; list-style: none; }
.pilier summary::-webkit-details-marker { display: none; }
.pilier-num { font-family: "Playfair Display", Georgia, serif; font-size: 1.5rem; font-weight: 800; color: var(--jaune); }
.pilier-icone { color: var(--bleu-royal); }
.pilier-titre { flex: 1; font-weight: 700; color: var(--bleu-marine); }
.pilier-detail { padding: 0 1.5rem 1.5rem; color: var(--gris-texte); line-height: 1.6; }
.bandeau-piliers { margin-top: 2rem; padding: 1.5rem; display: grid; gap: .75rem; }
@media (min-width: 900px) { .bandeau-piliers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bandeau-piliers p { color: var(--gris-texte); font-size: .92rem; line-height: 1.55; }
.bandeau-piliers strong { color: var(--bleu-marine); }

/* ── Budgets ───────────────────────────────────────────────────────────── */
.grille-budget { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .grille-budget { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.budget-chiffre { padding: 2rem; display: flex; flex-direction: column; justify-content: center; }
.budget-val { font-family: "Playfair Display", Georgia, serif; font-size: clamp(2.25rem, 5vw, 3.25rem); font-weight: 800; color: var(--jaune); line-height: 1; }
.budget-val .unite { font-size: .4em; color: #fff; }
.budget-sous { margin-top: .75rem; color: rgba(255, 255, 255, .85); font-size: .92rem; }
.budget-points { margin: 0; }

/* ── Priorités ─────────────────────────────────────────────────────────── */
.priorite-icone { color: var(--bleu-royal); }
.priorite-titre { margin-top: .75rem; font-size: 1.05rem; font-weight: 700; line-height: 1.35; }
.priorite-texte { margin-top: .6rem; color: var(--gris-texte); line-height: 1.6; font-size: .95rem; }
.priorite-date { display: flex; align-items: center; gap: .4rem; margin-top: 1rem; font-size: .82rem; color: var(--gris-moyen); }

/* ── Bloc éditorial et encadré rouge ───────────────────────────────────── */
.bloc-editorial { display: grid; gap: 2rem; padding: 2rem; }
@media (min-width: 900px) { .bloc-editorial { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); } }
.bloc-editorial-chiffres { margin: 0; display: grid; gap: 1rem; align-content: center; }
.bloc-editorial-chiffres dt { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gris-moyen); }
.bloc-editorial-chiffres dd { margin: .2rem 0 0; font-family: "Playfair Display", Georgia, serif; font-size: 1.25rem; font-weight: 700; color: var(--bleu-marine); }

.encadre-rouge { border-left: .35rem solid var(--rouge); padding: 1.75rem; }
.encadre-rouge p { color: var(--gris-texte); line-height: 1.7; }
.avertissement { display: flex; gap: .9rem; align-items: flex-start; margin-top: 1.5rem; color: var(--rouge-sombre); }
.avertissement p { color: var(--gris-texte); }

/* ── Rayonnement ───────────────────────────────────────────────────────── */
.bandeau-chiffres { display: grid; gap: 2rem; padding: 2.5rem 2rem; text-align: center; }
@media (min-width: 900px) { .bandeau-chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bandeau-icone { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 9999px; background: rgba(247, 214, 24, .2); color: var(--jaune); }
.bandeau-val { margin-top: .75rem; font-family: "Playfair Display", Georgia, serif; font-size: clamp(2.25rem, 5vw, 3.25rem); font-weight: 800; color: var(--jaune); line-height: 1; }
.bandeau-leg { margin-top: .6rem; color: rgba(255, 255, 255, .85); font-size: .92rem; }

.agenda-icone { color: var(--bleu-royal); }
.agenda-date { margin-top: .75rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--bleu-royal); }
.agenda-titre { margin-top: .4rem; font-family: "Playfair Display", Georgia, serif; font-size: 1.2rem; font-weight: 700; line-height: 1.25; }
.agenda-lieu { display: flex; align-items: center; gap: .4rem; margin-top: .6rem; font-size: .85rem; color: var(--gris-moyen); }
.agenda-texte { margin-top: .75rem; color: var(--gris-texte); line-height: 1.6; font-size: .95rem; }

.focus-onu { display: grid; gap: 2rem; padding: 2rem; }
@media (min-width: 900px) { .focus-onu { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.focus-icone { display: inline-grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 9999px; background: var(--bleu-pale); color: var(--bleu-royal); }
.focus-sous { margin-top: 1rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--bleu-royal); }
.liste-puces, .liste-numerotee { margin: 1rem 0 0; padding-left: 1.25rem; color: var(--gris-texte); line-height: 1.65; }
.liste-puces li, .liste-numerotee li { margin-bottom: .6rem; }
.note-neutralite { margin-top: 1.25rem; font-size: .82rem; color: var(--gris-moyen); font-style: italic; }

.carte-monde { display: grid; gap: 2rem; }
@media (min-width: 900px) { .carte-monde { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: center; } }
.carte-fond {
  position: relative;
  aspect-ratio: 2 / 1;
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at 30% 40%, rgba(0, 127, 255, .18), transparent 55%),
    linear-gradient(160deg, var(--bleu-pale), #fff);
  border: 1px solid var(--gris-bordure);
}
.epingle {
  position: absolute;
  width: 1rem;
  height: 1rem;
  margin: -.5rem 0 0 -.5rem;
  border-radius: 9999px;
  background: var(--jaune);
  border: 3px solid var(--bleu-marine);
  box-shadow: 0 0 0 5px rgba(247, 214, 24, .25);
  cursor: pointer;
}
.carte-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.carte-liste li { font-size: .88rem; color: var(--gris-texte); padding-bottom: .75rem; border-bottom: 1px solid var(--gris-bordure); }
.carte-liste li:last-child { border-bottom: 0; }
.carte-liste strong { color: var(--bleu-marine); }

.reconnaissance-icone { color: var(--jaune-or); }
.reconnaissance-titre { margin-top: .75rem; font-family: "Playfair Display", Georgia, serif; font-size: 1.25rem; font-weight: 700; }
.reconnaissance-texte { margin-top: .75rem; color: var(--gris-texte); line-height: 1.65; }

.citation-jaune {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  background: rgba(255, 246, 199, .55);
  border: 1px solid rgba(255, 255, 255, .8);
  padding: 3rem 2rem;
  text-align: center;
}
.citation-jaune-guillemet { position: absolute; left: 1rem; top: .5rem; width: 6rem; height: 6rem; color: rgba(206, 16, 33, .10); }
.citation-jaune blockquote p { position: relative; font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.6rem, 4vw, 2.5rem); font-weight: 800; font-style: italic; color: var(--bleu-marine); }
.citation-jaune blockquote footer { margin-top: 1.25rem; font-size: .9rem; color: var(--gris-texte); }

/* ── Contact ───────────────────────────────────────────────────────────── */
.canal-icone { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 9999px; background: var(--bleu-pale); color: var(--bleu-royal); }
.canal-titre { margin-top: 1rem; font-family: "Playfair Display", Georgia, serif; font-size: 1.3rem; font-weight: 700; }
.canal-texte { margin-top: .75rem; color: var(--gris-texte); line-height: 1.65; }
.canal .lien-fleche { margin-top: 1.25rem; }

.bloc-coord { padding: 2rem; }
.grille-coord { display: grid; gap: 1rem; }
@media (min-width: 760px) { .grille-coord { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.coord { display: flex; align-items: flex-start; gap: .85rem; padding: 1rem; border-radius: .9rem; background: rgba(255, 255, 255, .6); border: 1px solid var(--gris-bordure); }
.coord-icone { color: var(--bleu-royal); }
.coord-corps { flex: 1; min-width: 0; }
.coord-cle { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gris-moyen); }
.coord-val { margin-top: .2rem; color: var(--encre); font-weight: 500; word-break: break-word; }
.bouton-copier {
  display: inline-flex; align-items: center; gap: .35rem; flex: none;
  border-radius: 9999px; border: 1px solid var(--gris-bordure);
  background: #fff; padding: .35rem .8rem; font-size: .76rem; font-weight: 600;
  color: var(--bleu-marine); cursor: pointer; transition: background-color .2s ease;
}
.bouton-copier:hover { background: var(--bleu-pale); }
.coord-boutons { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.bouton-bleu { background: var(--bleu-marine); color: #fff; }
.bouton-bleu:hover { background: var(--bleu-royal); }
.coord-sous { margin-top: 2rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gris-moyen); }
.grille-reseaux { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.pastille-reseau {
  display: inline-flex; align-items: center; gap: .5rem;
  border-radius: 9999px; border: 1px solid var(--gris-bordure);
  background: rgba(255, 255, 255, .7); padding: .45rem 1rem;
  font-size: .85rem; font-weight: 600; color: var(--bleu-marine); text-decoration: none;
}
.pastille-reseau:hover { border-color: var(--bleu-royal); background: #fff; }
.pastille-id { color: var(--gris-moyen); font-weight: 400; }

.panneau-formulaire { max-width: 42rem; margin-inline: auto; padding: 2rem; text-align: left; }
.champ { display: block; margin-bottom: 1.25rem; }
.champ-lib { display: block; font-size: .85rem; font-weight: 600; color: var(--bleu-marine); margin-bottom: .4rem; }
.champ-lib em { font-weight: 400; color: var(--gris-moyen); font-style: normal; }
.champ input, .champ select, .champ textarea {
  width: 100%; border-radius: .75rem; border: 1px solid var(--gris-bordure);
  background: rgba(255, 255, 255, .85); padding: .75rem 1rem;
  font: inherit; color: var(--encre);
}
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 3px solid var(--bleu-drapeau); outline-offset: 2px; }
.champ-err { display: block; margin-top: .35rem; font-size: .8rem; color: var(--rouge-sombre); font-weight: 600; }
.champ-case { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; color: var(--gris-texte); }
.champ-case input { width: auto; margin-top: .15rem; }
.pot-a-miel { position: absolute; left: -9999px; }
#form-statut:not(:empty) { margin-top: 1rem; border-radius: .75rem; padding: 1rem; font-size: .9rem; font-weight: 600; text-align: center; background: var(--bleu-pale); color: var(--bleu-marine); }
#form-statut.erreur { background: var(--rouge-pale); color: var(--rouge-sombre); }

.bloc-sources { padding: 2rem; }
.grille-sources { margin: 0; display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .grille-sources { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.source-bloc dt { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--bleu-royal); }
.source-bloc dd { margin: .4rem 0 0; color: var(--gris-texte); line-height: 1.6; font-size: .92rem; }

.grille-mentions { display: grid; gap: 1.75rem; }
@media (min-width: 900px) { .grille-mentions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mention h3 { font-size: .95rem; font-weight: 700; color: var(--bleu-marine); }
.mention p { margin-top: .4rem; color: var(--gris-texte); line-height: 1.65; font-size: .92rem; }

/* ── Bannière intérieure illustrée ─────────────────────────────────────── */
/* Les pages ne restent pas purement typographiques : chacune porte une
   photographie différente, ce qui les distingue au premier coup d'œil. */
.hero-interieur-grille { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) {
  .hero-interieur.avec-photo .hero-interieur-grille {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: 3.5rem;
  }
}
.hero-interieur-texte { min-width: 0; }

.hero-photo { margin: 0; justify-self: center; width: 100%; max-width: 24rem; }
.hero-photo-cadre {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 20px 48px rgba(10, 42, 94, .20);
  background: var(--bleu-pale);
}
.hero-photo-cadre::before { content: ""; display: block; padding-top: 112%; }
.hero-photo-cadre img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--cadrage, center 28%);
}
.hero-photo-ruban {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: .4rem;
  background: linear-gradient(90deg, var(--bleu-drapeau) 0 38%, var(--jaune) 38% 62%, var(--rouge) 62% 100%);
}
@media (max-width: 1023px) {
  .hero-photo { max-width: 20rem; order: -1; }
  .hero-photo-cadre::before { padding-top: 70%; }
}

/* ── Images d'illustration dans les sections ───────────────────────────── */
.illustration { margin: 0; position: relative; }
.illustration-cadre {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 16px 38px rgba(10, 42, 94, .16);
  background: var(--bleu-pale);
}
.illustration-cadre::before { content: ""; display: block; padding-top: var(--ratio, 66%); }
.illustration-cadre img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--cadrage, center 30%);
}
.illustration figcaption { margin-top: .85rem; font-size: .8rem; color: var(--gris-moyen); }
.section-illustree { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .section-illustree { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 900px) { .section-illustree.inverse > .illustration { order: 2; } }

/* Ligne surlignée depuis une épingle de la carte */
.carte-liste li.surligne { background: var(--jaune-pale); border-radius: .5rem; padding-inline: .5rem; }

/* ── Portrait officiel de la section « Qui est-elle ? » ────────────────── */
/* La maquette posait là un rectangle bleu portant les initiales « JST » en
   attendant la photographie ; celle-ci l'a remplacé. */
.portrait-officiel { margin: 0; position: relative; }
.portrait-officiel-cadre {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 20px 48px rgba(10, 42, 94, .20);
  background: var(--bleu-pale);
}
.portrait-officiel-cadre::before { content: ""; display: block; padding-top: 118%; }
.portrait-officiel-cadre img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* calé sur elle : au centre de l'image, un peu au-dessus du bureau */
  object-position: 48% 42%;
}
.portrait-officiel-liseré {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: .4rem;
  background: linear-gradient(90deg, var(--bleu-drapeau) 0 38%, var(--jaune) 38% 62%, var(--rouge) 62% 100%);
}
.portrait-officiel-legende {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-top: 1.25rem;
  font-size: .8rem;
  color: var(--gris-moyen);
}
.portrait-officiel-etiquette {
  border-radius: 9999px;
  background: var(--bleu-pale);
  color: var(--bleu-royal);
  padding: .3rem .85rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ── Appel final : armoiries au lieu de la bande tricolore ─────────────── */
.appel-final { position: relative; overflow: hidden; }
.appel-final .armoirie-filigrane {
  right: -3rem;
  bottom: -4rem;
  width: 18rem;
  height: 18rem;
  opacity: .06;
}
.appel-final .armoirie-filigrane.gauche {
  left: -3rem;
  right: auto;
  top: -4rem;
  bottom: auto;
  width: 14rem;
  height: 14rem;
  opacity: .05;
}

/* ── Citation ──────────────────────────────────────────────────────────── */
/* La photographie a d'abord servi de fond plein cadre. En bande large, le
   recadrage « cover » ne pouvait garder à la fois le visage et de l'air
   au-dessus : le calcul du point d'ancrage butait à 99 %. Elle occupe donc
   sa propre colonne, où rien ne la recouvre. */
.citation {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 1.5rem;
  background: linear-gradient(135deg, var(--bleu-nuit), var(--bleu-marine) 60%, var(--bleu-royal));
  box-shadow: 0 18px 44px rgba(10, 42, 94, .22);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: stretch;
}
@media (max-width: 860px) { .citation { grid-template-columns: 1fr; } }

.citation-texte {
  position: relative;
  z-index: 1;
  padding: 3rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 640px) { .citation-texte { padding: 4rem 3.25rem; } }

.citation-media { position: relative; min-height: 20rem; }
@media (max-width: 860px) { .citation-media { min-height: 16rem; order: -1; } }
.citation-fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Image large (783 × 391) dans une colonne haute : on ancre à droite,
     là où se trouve la Première ministre. */
  object-position: 76% 46%;
}
/* Raccord en biseau vers le bleu du bloc, pour qu'aucune arête ne coupe. */
.citation-voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--bleu-marine) 0%, rgba(10, 42, 94, .65) 22%, rgba(10, 42, 94, .10) 55%, transparent 80%);
}
@media (max-width: 860px) {
  .citation-voile { background: linear-gradient(0deg, var(--bleu-marine) 0%, rgba(10, 42, 94, .35) 38%, transparent 70%); }
}
.citation-ruban {
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: .35rem;
  border-radius: 9999px;
  background: linear-gradient(var(--bleu-drapeau) 0 34%, var(--jaune) 34% 66%, var(--rouge) 66% 100%);
}
@media (max-width: 860px) {
  .citation-ruban { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: .35rem; border-radius: 0;
                    background: linear-gradient(90deg, var(--bleu-drapeau) 0 34%, var(--jaune) 34% 66%, var(--rouge) 66% 100%); }
}

.citation-guillemet {
  position: absolute;
  left: 1rem;
  top: 1rem;
  width: 6rem;
  height: 6rem;
  color: rgba(247, 214, 24, .16);
  pointer-events: none;
}
.citation blockquote { position: relative; z-index: 1; margin: 0; }
.citation blockquote p {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: 800;
  font-style: italic;
  line-height: 1.14;
  color: #fff;
}
.citation blockquote footer { margin-top: 1.75rem; font-size: .875rem; color: rgba(255, 255, 255, .82); }
.citation blockquote footer strong { color: var(--jaune); font-weight: 700; }
.citation blockquote footer span { color: rgba(255, 255, 255, .70); }

/* Badge rouge posé sur le portrait de la fiche d'identité. */
.portrait-officiel { position: relative; }

/* ── Pied de page ──────────────────────────────────────────────────────── */
.pied-bas {
  border-top: 1px solid rgba(255, 255, 255, .10);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: center;
  text-align: center;
  font-size: .78rem;
  color: rgba(255, 255, 255, .62);
}
@media (min-width: 760px) {
  .pied-bas { justify-content: space-between; padding-inline: 3rem; text-align: left; }
}
.pied-bas a { color: var(--jaune); text-decoration: none; font-weight: 600; }
.pied-bas a:hover { text-decoration: underline; }

/* Encadré d'information, en bleu : le filet rouge d'origine signalait un
   avertissement, alors que le propos est devenu une simple orientation. */
.encadre-bleu {
  border-left: .35rem solid var(--bleu-royal);
  padding: 1.5rem;
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  margin-top: 1.5rem;
  color: var(--bleu-royal);
}
.encadre-bleu p { color: var(--gris-texte); line-height: 1.65; }

/* =========================================================================
   Petits écrans : deux blocs tenaient encore sur une grille trop rigide.
   Mesuré à 360 px, la largeur de référence la plus étroite du marché.
   ========================================================================= */
@media (max-width: 440px) {
  /* La fiche passait en trois colonnes fixes : la valeur se faisait écraser
     par la colonne du libellé. Elle s'empile désormais. */
  .fiche-ligne {
    grid-template-columns: 2rem minmax(0, 1fr);
    grid-template-areas: "icone cle" ". val";
    row-gap: .2rem;
  }
  .fiche-icone { grid-area: icone; }
  .fiche-cle { grid-area: cle; }
  .fiche-val { grid-area: val; }

  /* Les pastilles de réseaux gardaient leur identifiant sur la même ligne. */
  .pastille-reseau { flex-wrap: wrap; max-width: 100%; }
  .pastille-id { flex-basis: 100%; }

  /* Les boutons de bannière prennent toute la largeur plutôt que de se
     serrer à deux par ligne. */
  .hero-interieur-actions .bouton { width: 100%; justify-content: center; }

  .coord { flex-wrap: wrap; }
  .bouton-copier { margin-left: 2.9rem; }
  .barre-onglets .onglet { flex: 1 1 auto; text-align: center; }
  .filtres { gap: .45rem; }
  .pastille-filtre { padding: .45rem .9rem; font-size: .8rem; }
}

/* La frise bascule en deux colonnes à 1024 px : sous ce seuil, le point
   doit rester accroché au rail de gauche. */
@media (max-width: 1023px) {
  .frise-item { width: 100%; margin-left: 0; padding-left: 3.25rem; padding-right: 0; }
  .frise-point { left: .4rem; right: auto; }
}

/* L'adresse de la Primature tient sur une seule chaîne longue : sans coupure
   autorisée, elle débordait de sa carte à 360 px. */
.coord-corps { overflow-wrap: anywhere; }
.coord-cle { white-space: normal; }