:root {
  /* Couleurs officielles — charte OBY V2.1. Bleu Nuit, Or Ancien, Ivoire,
     Gris Perle et Anthracite sont repris à l'identique de la planche
     d'identité ; le reste en dérive. */
  --navy: #0B1D33;
  --blue: #123A6D;
  --gold: #C8A96B;
  --ivory: #F6F3EA;
  --pearl: #B8BEC6;
  --ink: #1A1F26;
  --muted: #5E6672;
  --white: #FFFFFF;
  --line: rgba(11, 29, 51, 0.12);
  --gold-line: rgba(200, 169, 107, 0.45);
  /* L'Or Ancien de la charte reste la couleur de marque : aplats, filets,
     surtitres sur fond sombre. Mais en petit texte sur fond clair il plafonne
     à 2,2:1, sous le seuil d'accessibilité. Cette variante assombrie, de même
     teinte, passe à 5,9:1 sur blanc et 5,3:1 sur ivoire. */
  --gold-ink: #7E6029;
  --shadow: 0 18px 45px rgba(11, 29, 51, 0.08);
  --shadow-premium: 0 24px 70px rgba(11, 29, 51, 0.13);
  --serif: "Iowan Old Style", Baskerville, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --sans: Inter, "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --ui: system-ui, "Segoe UI", sans-serif;
  --radius-sm: 6px;
  --radius-md: 8px;
  --space-section: clamp(68px, 8vw, 104px);
  --transition: 180ms ease;

  /* Échelle typographique — quinte mineure (×1,2), bornée en fluide pour les
     grands corps. Une seule famille de valeurs remplace les tailles décidées
     cas par cas : les pages se répondent au lieu de se ressembler de loin. */
  --t-xs: 0.78rem;
  --t-sm: 0.88rem;
  --t-base: 1rem;
  --t-md: 1.08rem;
  --t-lg: clamp(1.18rem, 0.5vw + 1.06rem, 1.3rem);
  --t-xl: clamp(1.34rem, 1vw + 1.12rem, 1.58rem);
  --t-2xl: clamp(1.62rem, 1.7vw + 1.24rem, 2.1rem);
  --t-3xl: clamp(2.1rem, 2.8vw + 1.45rem, 3rem);

  /* Interlignages propres aux titres : un display serré se lit mal au-delà
     d'une ligne, un titre de carte a besoin d'air. */
  --lh-display: 1.06;
  --lh-title: 1.14;
  --lh-card: 1.2;

  /* Espacements — pas de 4 px, pour que les blocs se calent entre eux. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 44px;
  --s-8: 64px;

  /* Mesures de lecture : au-delà, l'œil perd le début de la ligne suivante. */
  --mesure: 68ch;
  --mesure-courte: 54ch;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(246, 243, 234, 0.34), rgba(255, 255, 255, 1) 380px),
    var(--white);
  font-family: var(--sans);
  line-height: 1.65;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font-family: var(--ui);
}

img {
  max-width: 100%;
  /* indispensable dès lors que les images portent leurs dimensions intrinsèques :
     la largeur reste fluide, la hauteur suit le ratio au lieu de l'attribut */
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

p,
li,
h1,
h2,
h3,
h4,
a,
span,
strong {
  min-width: 0;
}

main,
section,
article,
div,
nav,
footer,
header {
  max-width: 100%;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(200, 169, 107, 0.55);
  outline-offset: 3px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: 0 10px 28px rgba(11, 29, 51, 0.045);
}

.header-inner,
.section-inner,
.footer-inner {
  width: min(1180px, calc(100% - clamp(28px, 5vw, 40px)));
  margin: 0 auto;
}

.header-inner {
  position: relative;
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 88px;
  max-width: 100%;
}

.brand img {
  width: 74px;
  height: auto;
}

.brand-official {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
}

.brand-official picture {
  display: block;
  line-height: 0;
}

.brand-official img {
  width: clamp(170px, 17vw, 230px);
  height: auto;
  max-height: 62px;
  object-fit: contain;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--gold-line);
  background: var(--navy);
  color: var(--ivory);
  border-radius: 6px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.nav-toggle:hover {
  border-color: var(--gold-line);
  background: var(--blue);
}

.nav-menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  font-size: 0.89rem;
  font-weight: 600;
  color: var(--navy);
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 10px;
  white-space: nowrap;
  transition: color 180ms ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 2px;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--gold);
  transition: transform 180ms ease;
}

.nav-link:hover::after,
.nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-link:hover,
.nav-link[aria-current="page"] {
  color: var(--blue);
}

.nav-direct {
  border-left: 1px solid rgba(11, 29, 51, 0.1);
}

.nav-direct:first-child {
  border-left: 0;
}

.nav-menu .nav-cta {
  padding: 9px 14px;
  border: 1px solid var(--gold-line);
  border-radius: 6px;
  background: rgba(246, 243, 234, 0.54);
}

.nav-menu .nav-cta::after {
  display: none;
}

/* Menus déroulants. Le lien de rubrique mène toujours à sa page ; le bouton
   voisin ouvre la liste des sous-pages. Au pointeur, le survol suffit ; au
   clavier et au toucher, le bouton. */
.nav-list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-group > .nav-link {
  padding-right: 2px;
}

.nav-sub-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 40px;
  margin-right: 4px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
}

.nav-sub-toggle::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms ease;
}

.nav-sub-toggle[aria-expanded="true"]::before {
  transform: translateY(2px) rotate(-135deg);
}

.nav-sub-toggle:hover {
  color: var(--blue);
}

.nav-group.is-current > .nav-link {
  color: var(--blue);
}

.nav-group.is-current > .nav-link::after {
  transform: scaleX(1);
}

.nav-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  min-width: 250px;
  max-width: min(340px, calc(100vw - 32px));
  margin: 0;
  padding: 8px;
  list-style: none;
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}

/* Les dernières rubriques s'ouvrent vers la gauche, pour ne jamais déborder
   du bord droit de l'écran. */
.nav-item:nth-last-child(-n + 3) > .nav-submenu {
  left: auto;
  right: 0;
}

.nav-group.is-open > .nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

@media (hover: hover) and (min-width: 1061px) {
  .nav-group:hover > .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
}

.nav-submenu a {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  color: var(--navy);
  font-weight: 500;
  line-height: 1.35;
}

.nav-submenu a:hover,
.nav-submenu a:focus-visible {
  background: var(--ivory);
  color: var(--blue);
}

.nav-submenu a[aria-current="page"] {
  color: var(--blue);
  font-weight: 700;
  box-shadow: inset 2px 0 0 var(--gold);
}

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

.hero {
  position: relative;
  overflow: hidden;
  color: var(--white);
  max-width: 100%;
  background:
    linear-gradient(115deg, rgba(11, 29, 51, 1) 0%, rgba(11, 29, 51, 0.96) 43%, rgba(18, 58, 109, 0.92) 100%),
    url("../img/backgrounds/pattern-cartographie-subtile.svg");
}

.hero::before {
  content: "";
  position: absolute;
  inset: 26px;
  border: 1px solid rgba(200, 169, 107, 0.18);
  pointer-events: none;
}

.hero::after {
  content: "OBY";
  position: absolute;
  right: max(20px, calc((100vw - 1180px) / 2));
  bottom: -42px;
  color: rgba(246, 243, 234, 0.065);
  font-family: var(--serif);
  font-size: clamp(9rem, 21vw, 19rem);
  font-weight: 700;
  line-height: 0.8;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  min-height: 640px;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(380px, 540px);
  align-items: center;
  gap: 52px;
  padding: 76px 0;
}

.hero-kicker,
.eyebrow {
  color: var(--gold-ink);
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.hero-kicker::before {
  content: "";
  width: 46px;
  height: 1px;
  background: var(--gold);
}

/* Les titres en serif portent l'identité OBY. Leur interlignage suit désormais
   leur corps : un display de 3 rem ne se compose pas comme un titre de carte,
   et un léger resserrement optique évite l'effet « lettres qui flottent ». */
.hero h1,
.page-hero h1,
.section-title,
.card h2,
.card h3 {
  font-family: var(--serif);
  letter-spacing: -0.006em;
  line-height: var(--lh-card);
}

.hero h1,
.page-hero h1 {
  letter-spacing: -0.016em;
  line-height: var(--lh-display);
}

.section-title {
  letter-spacing: -0.01em;
  line-height: var(--lh-title);
}

.hero h1 {
  margin: 14px 0 18px;
  max-width: 820px;
  font-size: clamp(3.2rem, 5.4vw, 4.9rem);
  line-height: 1.02;
  font-weight: 700;
  overflow-wrap: break-word;
  text-wrap: balance;
  text-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
}

.hero-position {
  position: relative;
  max-width: 34ch;
  padding-top: 16px;
  color: var(--ivory);
  font-size: clamp(1.06rem, 1.1vw + 0.88rem, 1.32rem);
  font-weight: 650;
  line-height: 1.42;
  overflow-wrap: break-word;
}

/* Un filet doré ancre le positionnement disciplinaire sous le nom. */
.hero-position::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 2px;
  background: var(--gold);
}

.hero-promise {
  max-width: 48ch;
  margin-top: 18px;
  color: rgba(246, 243, 234, 0.9);
  font-size: 1rem;
  line-height: 1.68;
}

.hero-subposition {
  max-width: 760px;
  margin: -6px 0 0;
  color: rgba(246, 243, 234, 0.76);
  font-size: clamp(0.95rem, 1.7vw, 1.08rem);
  font-weight: 560;
  overflow-wrap: break-word;
}

.hero-signature {
  display: inline-block;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(200, 169, 107, 0.64);
  color: var(--ivory);
  font-family: var(--serif);
  font-size: clamp(1.22rem, 1.4vw + 1rem, 1.7rem);
  font-style: italic;
  overflow-wrap: break-word;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
  max-width: 760px;
}

.hero-proof span {
  border: 1px solid rgba(246, 243, 234, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  padding: 7px 11px;
  color: rgba(246, 243, 234, 0.82);
  font-size: 0.82rem;
  font-weight: 750;
}

.hero-panel {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: end;
  border: 1px solid rgba(246, 243, 234, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.06);
  padding: 34px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.2);
  min-height: 470px;
  overflow: hidden;
  min-width: 0;
}

.hero-panel::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(200, 169, 107, 0.2);
  border-radius: 6px;
}

.hero-panel img {
  position: relative;
  z-index: 1;
  width: 150px;
  margin-bottom: auto;
}

.hero-panel h2 {
  position: relative;
  z-index: 1;
  margin: 36px 0 12px;
  color: var(--ivory);
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1.05;
}

.hero-panel p {
  position: relative;
  z-index: 1;
  color: var(--ivory);
  margin: 0;
}

.hero-visual-panel {
  aspect-ratio: 16 / 9;
  align-self: center;
  justify-content: end;
  min-height: 0;
  padding: 0;
}

.hero-visual-panel picture,
.hero-visual-panel picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-visual-panel picture {
  z-index: 0;
}

.hero-visual-panel picture img {
  display: block;
  object-fit: cover;
  object-position: center;
  margin: 0;
}

.hero-visual-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(11, 29, 51, 0) 28%, rgba(11, 29, 51, 0.72) 100%),
    linear-gradient(90deg, rgba(11, 29, 51, 0.34), rgba(11, 29, 51, 0.08));
  pointer-events: none;
}

.hero-panel-copy {
  position: relative;
  z-index: 1;
  padding: 34px;
}

.hero-panel.hero-portrait-panel {
  align-self: center;
  justify-content: flex-start;
  justify-self: center;
  width: min(100%, 620px);
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.hero-portrait-panel::before,
.hero-portrait-panel::after {
  display: none;
}

.official-portrait {
  width: 100%;
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid rgba(200, 169, 107, 0.3);
  border-radius: 10px;
  background: var(--navy);
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.28);
}

.hero-panel .official-portrait img {
  position: static;
  display: block;
  z-index: auto;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: center top;
}

.hero-panel-copy.hero-portrait-caption {
  padding: 20px 0 0;
}

.hero-portrait-caption h2 {
  margin: 0 0 8px;
}

.hero-portrait-caption p {
  max-width: 100%;
}

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

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 17px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.94rem;
  box-shadow: 0 12px 28px rgba(11, 29, 51, 0.08);
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
  max-width: 100%;
  text-align: center;
}

.button.primary {
  color: var(--white);
  background: var(--navy);
}

.hero .button.primary {
  color: var(--navy);
  background: var(--ivory);
}

/* Groupe d'appels à l'action du hero.
   Les deux boutons sont de même rang et tiennent sur une ligne ; le troisième
   lien est tertiaire et occupait, par simple retour à la ligne, une seconde
   ligne qui avait l'air subie. On la rend intentionnelle : il prend toute la
   largeur du groupe et se détache par un filet doré. Aucune action n'est
   masquée ni retirée. Le remplissage large du bouton principal est un réglage
   de hero en deux colonnes : sous 1061 px les boutons occupent toute la
   largeur et le palier téléphone leur donne un remplissage serré. */
@media (min-width: 1061px) {
  .hero .actions {
    margin-top: 32px;
    gap: 16px 18px;
    align-items: center;
  }

  .hero .button.primary {
    padding-inline: 26px;
  }

  .hero .actions .hero-text-link {
    flex-basis: 100%;
    margin-top: 2px;
    padding-top: 16px;
    border-top: 1px solid rgba(200, 169, 107, 0.34);
  }
}

.hero .text-link {
  color: var(--ivory);
}

.button.primary:hover {
  background: var(--blue);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-premium);
}

.button.secondary {
  color: var(--navy);
  border-color: var(--gold-line);
  background: transparent;
}

/* .page-hero partage le fond bleu nuit de .hero : même traitement du bouton
   secondaire, qui serait sinon en bleu nuit sur bleu nuit (cas de 404.html).
   La règle ne vise pas .section.navy en bloc, parce que ses boutons reposent
   le plus souvent sur un panneau clair et doivent rester sombres — c'est le
   cas de .research-highlight. Restent deux panneaux réellement sombres où le
   bouton était, lui, illisible à 1:1 : l'encart d'appel et la coquille de
   filtres d'une section navy. La coquille de filtres sert aussi sur fond
   clair (catalogue d'Idées & Analyses) : le sélecteur reste donc borné. */
.hero .button.secondary,
.page-hero .button.secondary,
.callout .button.secondary,
.navy .map-shell .button.secondary,
.navy .watch-shell .button.secondary {
  color: var(--ivory);
  border-color: rgba(246, 243, 234, 0.42);
}

.callout .button.secondary:hover,
.navy .map-shell .button.secondary:hover,
.navy .watch-shell .button.secondary:hover {
  border-color: var(--gold-line);
  background: rgba(246, 243, 234, 0.12);
}

.button.secondary:hover {
  background: rgba(200, 169, 107, 0.12);
  transform: translateY(-2px);
}

.page-hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(11, 29, 51, 1), rgba(11, 29, 51, 0.92)),
    url("../img/backgrounds/pattern-littoral-lines.svg");
  color: var(--white);
  max-width: 100%;
}

.page-hero::after {
  content: "OBY";
  position: absolute;
  right: max(18px, calc((100vw - 1180px) / 2));
  bottom: -34px;
  color: rgba(246, 243, 234, 0.05);
  font-family: var(--serif);
  font-size: clamp(7rem, 16vw, 14rem);
  font-weight: 700;
  line-height: 0.8;
}

.page-hero .section-inner {
  position: relative;
  z-index: 1;
  padding: 92px 0 78px;
}

.page-hero h1 {
  max-width: 910px;
  margin: 15px 0;
  font-size: clamp(3rem, 6vw, 5.6rem);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.page-hero p {
  max-width: 760px;
  color: var(--ivory);
  font-size: 1.08rem;
  border-left: 2px solid var(--gold);
  padding-left: 18px;
  overflow-wrap: break-word;
}

.page-hero-with-visual .page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 42%);
  align-items: center;
  gap: clamp(28px, 5vw, 58px);
}

.page-hero-copy {
  min-width: 0;
}

@media (min-width: 861px) {
  .page-hero-with-visual h1 {
    font-size: clamp(3rem, 5vw, 5rem);
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
}

.page-hero-visual {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(200, 169, 107, 0.28);
  border-radius: 18px;
  background: rgba(246, 243, 234, 0.08);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.24);
}

.page-hero-visual picture,
.page-hero-visual img {
  display: block;
  width: 100%;
  height: 100%;
}

.page-hero-visual img {
  object-fit: cover;
  object-position: center;
}

.page-hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11, 29, 51, 0) 56%, rgba(11, 29, 51, 0.28) 100%),
    linear-gradient(90deg, rgba(11, 29, 51, 0.18), rgba(11, 29, 51, 0));
}

.page-hero-visual.page-hero-portrait {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1 / 1;
  justify-self: center;
  border-radius: 10px;
}

.page-hero-portrait img {
  object-position: center top;
}

.page-hero-portrait::after {
  display: none;
}

/* Photographie de groupe en tête de page : le cadre épouse le 4/3 de la prise
   de vue à toutes les largeurs, de sorte que personne ne soit coupé par le
   recadrage du cadre 16/9 de l'ordinateur ni par celui, vertical, du téléphone. */
.page-hero-visual.page-hero-groupe {
  aspect-ratio: 4 / 3;
}

.page-hero-groupe::after {
  display: none;
}

.section {
  position: relative;
  padding: var(--space-section) 0;
  max-width: 100%;
}

.section.ivory {
  background:
    linear-gradient(180deg, rgba(246, 243, 234, 0.94), rgba(246, 243, 234, 1)),
    url("../img/backgrounds/pattern-littoral-lines.svg");
}

.section.navy {
  color: var(--white);
  background:
    linear-gradient(120deg, rgba(11, 29, 51, 1), rgba(18, 58, 109, 0.92)),
    url("../img/backgrounds/pattern-cartographie-subtile.svg");
}

.section-title {
  margin: 0 0 var(--s-4);
  color: var(--navy);
  font-size: var(--t-3xl);
  text-wrap: balance;
}

.navy .section-title {
  color: var(--white);
}

.lead {
  max-width: var(--mesure);
  margin: 0 0 var(--s-5);
  color: var(--muted);
  font-size: var(--t-md);
  line-height: 1.76;
}

.navy .lead {
  color: var(--ivory);
}

.grid {
  display: grid;
  gap: var(--s-5);
  min-width: 0;
}

.grid > *,
.split > *,
.footer-inner > *,
.footer-links > *,
.resource-row > *,
.actions > * {
  min-width: 0;
}

.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card {
  position: relative;
  min-width: 0;
  border: 1px solid rgba(11, 29, 51, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(246, 243, 234, 0.38));
  padding: 30px;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 190ms ease, box-shadow 190ms ease, border-color 190ms ease;
  max-width: 100%;
}

/* La carte est un panneau clair : son dégradé se termine à 38 % d'opacité, ce qui
   laisse remonter le bleu nuit et rend le texte gris illisible en bas de carte.
   Sur fond sombre, mêmes teintes mais opaques — le panneau reste identique. */
.navy .card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(246, 243, 234, 1));
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 26px;
  right: 26px;
  height: 3px;
  background: var(--gold);
  opacity: 0.8;
}

.card::after {
  content: "";
  position: absolute;
  right: -44px;
  bottom: -44px;
  width: 132px;
  height: 132px;
  border: 1px solid rgba(200, 169, 107, 0.16);
  border-radius: 999px;
}

.card:hover {
  transform: translateY(-3px);
  border-color: rgba(200, 169, 107, 0.38);
  box-shadow: var(--shadow-premium);
}

.card h2,
.card h3 {
  margin: var(--s-3) 0 var(--s-2);
  color: var(--navy);
  font-size: var(--t-xl);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.card p {
  margin: 0 0 12px;
  color: var(--muted);
  overflow-wrap: break-word;
}

/* Les pages de garde sont des scans de documents, de hauteurs variables selon
   la largeur de leur carte. Le plateau épouse la feuille et se centre ; la
   feuille garde son apparence de feuille. Aucun recadrage : `contain`
   conserve la page entière. */
.page-garde-figure {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: var(--s-4) auto var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--ivory), rgba(246, 243, 234, 0.55));
  padding: var(--s-5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 10px 26px rgba(11, 29, 51, 0.06);
}

.page-garde-figure img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 300px;
  margin: 0 auto;
  object-fit: contain;
  border: 1px solid rgba(11, 29, 51, 0.16);
  border-radius: 2px;
  background: var(--white);
  box-shadow: 0 6px 18px rgba(11, 29, 51, 0.13);
}

.card:hover .page-garde-figure {
  border-color: var(--gold-line);
}

.capability-accordion {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.capability-item {
  border: 1px solid rgba(11, 29, 51, 0.12);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 10px 26px rgba(11, 29, 51, 0.055);
  overflow: hidden;
}

.capability-item summary {
  display: grid;
  grid-template-columns: minmax(110px, 0.28fr) minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  cursor: pointer;
  padding: 20px 22px;
  color: var(--navy);
  font-weight: 850;
  list-style: none;
}

.capability-item summary::-webkit-details-marker {
  display: none;
}

.capability-item summary::after {
  content: "+";
  color: var(--gold);
  font-size: 1.4rem;
  font-weight: 850;
  line-height: 1;
}

.capability-item[open] summary::after {
  content: "–";
}

.capability-item summary span {
  color: var(--blue);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.capability-item summary strong {
  color: var(--navy);
  overflow-wrap: anywhere;
}

.capability-item summary:focus-visible {
  outline: 3px solid rgba(200, 169, 107, 0.55);
  outline-offset: -3px;
}

.capability-item p {
  margin: 0;
  border-top: 1px solid rgba(11, 29, 51, 0.08);
  padding: 0 22px 22px;
  color: var(--muted);
}

.selected-work-grid {
  align-items: stretch;
}

.selected-work-card img {
  width: 100%;
  height: auto;
  margin-bottom: 18px;
  border: 1px solid rgba(11, 29, 51, 0.12);
  border-radius: 6px;
  background: var(--white);
  padding: 8px;
}

.card ul,
.content-list {
  padding-left: 18px;
  margin: 14px 0 0;
  color: var(--muted);
}

.tagline {
  display: inline-flex;
  padding: 5px 9px;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(246, 243, 234, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.notice {
  border: 1px solid rgba(200, 169, 107, 0.35);
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(246, 243, 234, 0.92), rgba(255, 255, 255, 0.76));
  padding: 22px 24px;
  color: var(--ink);
  box-shadow: var(--shadow);
}

.v3-flow,
.v3-model-grid {
  display: grid;
  gap: 18px;
  min-width: 0;
  margin-top: 28px;
}

.v3-flow {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.v3-model-grid {
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
}

.v3-step,
.v3-model-card {
  min-width: 0;
  max-width: 100%;
  border: 1px solid rgba(11, 29, 51, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.84);
  padding: 24px;
  box-shadow: var(--shadow);
  overflow-wrap: break-word;
}

.v3-step span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--ivory);
  font-weight: 800;
}

.v3-step h3,
.v3-model-card h3 {
  margin: 12px 0 10px;
  color: var(--navy);
  font-size: 1.42rem;
  line-height: 1.22;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.v3-step p,
.v3-model-card p {
  color: var(--muted);
}

.v3-field-list {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
}

.v3-field-list div {
  display: grid;
  gap: 4px;
  padding: 10px 0;
  border-top: 1px solid rgba(11, 29, 51, 0.08);
}

.v3-field-list dt {
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.v3-field-list dd {
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.v3-note {
  margin-top: 16px;
  font-weight: 700;
}

.media-frame {
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(11, 29, 51, 0.1);
  border-radius: 8px;
  background: var(--ivory);
  overflow: hidden;
  box-shadow: var(--shadow);
  max-width: 100%;
}

.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-page="ressources"] .media-frame {
  aspect-ratio: 900 / 650;
  min-height: auto;
  padding: clamp(10px, 2vw, 18px);
  background: var(--white);
}

body[data-page="ressources"] .media-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.split {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  align-items: start;
  gap: 58px;
  min-width: 0;
}

.timeline {
  display: grid;
  gap: 18px;
}

.timeline-item {
  position: relative;
  border-left: 2px solid var(--gold-line);
  padding: 4px 0 4px 22px;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 16px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 0 5px rgba(200, 169, 107, 0.12);
}

.timeline-item h3 {
  margin: 0 0 6px;
  color: var(--navy);
  font-family: var(--serif);
  font-size: 1.55rem;
  overflow-wrap: break-word;
}

/* Lien d'évitement : hors écran mais dans l'arbre d'accessibilité,
   révélé dès qu'il reçoit le focus clavier. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: 0 0 6px 6px;
  background: var(--navy);
  color: var(--white);
  font-family: var(--ui);
  font-size: 0.95rem;
  font-weight: 800;
  text-decoration: none;
  transition: top var(--transition);
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

main:focus {
  outline: none;
}

.meta {
  color: var(--muted);
  font-size: var(--t-sm);
  font-weight: 700;
  overflow-wrap: break-word;
}

/* sur fond sombre, le gris de --muted devient illisible : teinte claire du système */
.navy .meta {
  color: var(--ivory);
}

.resource-list {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.resource-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
  transition: padding-left 180ms ease, border-color 180ms ease;
}

.resource-row:hover {
  border-color: var(--gold-line);
  padding-left: 8px;
}

.resource-row strong {
  color: var(--navy);
  overflow-wrap: break-word;
}

.resource-row span {
  min-width: 0;
  overflow-wrap: break-word;
}

.library-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.library-summary div {
  border: 1px solid rgba(11, 29, 51, 0.1);
  border-radius: 8px;
  background: rgba(246, 243, 234, 0.58);
  padding: 16px;
  min-width: 0;
}

.library-summary strong {
  display: block;
  color: var(--navy);
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1;
}

.library-summary span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: break-word;
}

.library-heading {
  max-width: 980px;
  margin-bottom: 28px;
}

.library-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.library-card {
  min-width: 0;
  border: 1px solid rgba(11, 29, 51, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 243, 234, 0.42));
  padding: 22px;
  box-shadow: 0 14px 38px rgba(11, 29, 51, 0.065);
}

.library-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.library-domain,
.library-status {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 0.7rem;
  font-weight: 850;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.library-domain {
  color: var(--blue);
  border: 1px solid var(--gold-line);
  background: rgba(246, 243, 234, 0.7);
}

.library-status {
  flex: 0 0 auto;
  color: var(--navy);
  background: rgba(184, 190, 198, 0.22);
}

.library-status.confirmed {
  color: #234D32;
  background: rgba(65, 125, 84, 0.12);
}

.library-status.partial {
  color: #6E551F;
  background: rgba(200, 169, 107, 0.18);
}

.library-status.verify {
  color: var(--muted);
  background: rgba(11, 29, 51, 0.06);
}

.library-card h3 {
  margin: 0 0 10px;
  color: var(--navy);
  font-family: var(--serif);
  font-size: 1.42rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.library-authors,
.library-meta,
.library-isbn,
.library-note {
  margin: 0;
  overflow-wrap: anywhere;
}

.library-authors {
  color: var(--ink);
  font-weight: 760;
  line-height: 1.48;
}

.library-meta,
.library-isbn {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.48;
}

.library-note {
  margin-top: 12px;
  border-left: 2px solid var(--gold-line);
  padding-left: 10px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.card-link {
  margin-top: 18px;
}

.card-link a,
.media-link {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border-bottom: 1px solid var(--gold-line);
  color: var(--blue);
  font-size: 0.88rem;
  font-weight: 850;
  line-height: 1.45;
  overflow-wrap: anywhere;
  transition: color 180ms ease, border-color 180ms ease;
}

.card-link a:hover,
.media-link:hover {
  color: var(--navy);
  border-color: var(--gold);
}

.media-library-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  min-width: 0;
}

.media-library-grid > * {
  min-width: 0;
}

.media-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid rgba(11, 29, 51, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 243, 234, 0.42));
  box-shadow: 0 14px 38px rgba(11, 29, 51, 0.065);
  overflow: hidden;
  transition: transform 190ms ease, box-shadow 190ms ease, border-color 190ms ease;
}

.media-card:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 169, 107, 0.34);
  box-shadow: var(--shadow-premium);
}

.media-card-primary {
  margin: 0;
  background: var(--ivory);
}

.media-card-primary img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--ivory);
}

.media-card-photo .media-card-primary img {
  object-fit: contain;
}

.media-card-primary figcaption {
  margin: 0;
  padding: 9px 16px 10px;
  border-top: 1px solid rgba(11, 29, 51, 0.08);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.94);
  font-size: 0.76rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.media-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 22px;
}

.media-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  min-width: 0;
}

.media-type,
.media-status {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 0.69rem;
  font-weight: 850;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.media-type {
  color: var(--blue);
  border: 1px solid var(--gold-line);
  background: rgba(246, 243, 234, 0.72);
}

.media-status {
  flex: 0 1 auto;
  color: #6E551F;
  background: rgba(200, 169, 107, 0.18);
}

.media-status.published {
  color: #234D32;
  background: rgba(65, 125, 84, 0.12);
}

.media-card h3 {
  margin: 0 0 10px;
  color: var(--navy);
  font-family: var(--serif);
  font-size: 1.42rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.media-card p {
  margin: 0 0 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.media-card .media-meta {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 760;
  line-height: 1.45;
}

.media-card .media-link {
  width: fit-content;
  margin-top: auto;
}

.event-media-gallery,
.media-card-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  margin-top: 18px;
}

.event-media-gallery figure,
.media-card-gallery figure {
  min-width: 0;
  margin: 0;
}

.event-media-gallery .event-media-primary {
  grid-column: 1 / -1;
}

.event-media-gallery img,
.media-card-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(11, 29, 51, 0.1);
  border-radius: 4px;
  background: var(--ivory);
  object-fit: contain;
}

.event-media-gallery figcaption,
.media-card-gallery figcaption {
  margin-top: 7px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.media-card-gallery {
  margin: 6px 0 18px;
}

.media-gallery-more {
  min-width: 0;
  margin: -4px 0 18px;
  border-top: 1px solid rgba(11, 29, 51, 0.1);
}

.media-gallery-more summary {
  width: fit-content;
  margin-top: 10px;
  color: var(--blue);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

.media-gallery-more summary:hover,
.media-gallery-more summary:focus-visible {
  color: var(--navy);
}

.media-card-gallery-more {
  margin-top: 14px;
}

.map-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.map-summary div,
.map-path,
.map-shell,
.map-card,
.watch-shell,
.watch-card {
  min-width: 0;
  border: 1px solid rgba(11, 29, 51, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
}

.map-summary div {
  padding: 16px;
}

.map-summary strong {
  display: block;
  color: var(--navy);
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1;
}

.map-summary span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 760;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.map-paths {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.map-path {
  display: grid;
  gap: 10px;
  padding: 18px;
  box-shadow: 0 12px 30px rgba(11, 29, 51, 0.055);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.map-path:hover {
  transform: translateY(-3px);
  border-color: rgba(200, 169, 107, 0.36);
  box-shadow: var(--shadow);
}

.map-path span {
  color: var(--navy);
  font-family: var(--serif);
  font-size: 1.18rem;
  font-weight: 760;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.map-path small {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.map-shell,
.watch-shell {
  padding: clamp(18px, 3vw, 30px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 243, 234, 0.86));
  box-shadow: var(--shadow);
}

.map-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) minmax(180px, 0.95fr) minmax(160px, 0.8fr) auto;
  gap: 14px;
  align-items: end;
  min-width: 0;
}

.map-toolbar label {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.map-input,
.map-select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 13px;
  color: var(--ink);
  background: var(--white);
  font: inherit;
}

.map-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid var(--line);
  margin-top: 22px;
  padding-top: 18px;
  color: var(--muted);
}

.map-result-header p {
  margin: 0;
  color: var(--navy);
  font-weight: 850;
}

.map-result-header span {
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.map-result-header .button {
  flex: 0 0 auto;
  white-space: normal;
}

.map-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.map-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: var(--white);
  box-shadow: 0 12px 32px rgba(11, 29, 51, 0.055);
}

.map-card h3 {
  margin: 0;
  color: var(--navy);
  font-family: var(--serif);
  font-size: 1.32rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.map-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.map-card-meta,
.map-tags,
.map-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

.map-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--blue);
  border: 1px solid var(--gold-line);
  background: rgba(246, 243, 234, 0.7);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.map-pill.status {
  color: var(--navy);
  border-color: rgba(11, 29, 51, 0.1);
  background: rgba(11, 29, 51, 0.06);
}

.map-card-links {
  margin-top: auto;
  padding-top: 4px;
}

.map-card-links a {
  border-bottom: 1px solid var(--gold-line);
  color: var(--blue);
  font-size: 0.84rem;
  font-weight: 850;
  line-height: 1.45;
}

.map-empty {
  margin: 18px 0 0;
  color: var(--muted);
  font-weight: 760;
}

.search-toolbar {
  grid-template-columns: minmax(220px, 1.4fr) minmax(170px, 0.7fr) auto;
}

.search-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.watch-toolbar {
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
}

.watch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.watch-grid.compact {
  margin-top: 24px;
}

.watch-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 243, 234, 0.46));
  box-shadow: 0 12px 32px rgba(11, 29, 51, 0.055);
  overflow: hidden;
}

.watch-card.featured {
  min-height: 100%;
}

.watch-card-top {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.watch-type,
.watch-status {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.watch-type {
  color: var(--blue);
  border: 1px solid var(--gold-line);
  background: rgba(246, 243, 234, 0.72);
}

.watch-status {
  color: var(--navy);
  border: 1px solid rgba(11, 29, 51, 0.08);
  background: rgba(11, 29, 51, 0.06);
}

.watch-card h3 {
  margin: 0;
  color: var(--navy);
  font-family: var(--serif);
  font-size: 1.34rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.watch-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.watch-card .watch-meta {
  color: var(--ink);
  font-weight: 760;
}

.watch-interest {
  border-left: 2px solid var(--gold-line);
  padding-left: 10px;
}

.watch-link {
  width: fit-content;
  max-width: 100%;
  border-bottom: 1px solid var(--gold-line);
  color: var(--blue);
  font-size: 0.86rem;
  font-weight: 850;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.watch-link:hover {
  color: var(--navy);
  border-color: var(--gold);
}

.search-result-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid rgba(11, 29, 51, 0.1);
  border-radius: 8px;
  background: var(--white);
  padding: 18px;
  box-shadow: 0 12px 32px rgba(11, 29, 51, 0.055);
}

.search-result-card span,
.contact-mail-card span,
.journey-step span {
  color: var(--blue);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.search-result-card h3,
.contact-mail-card h3,
.journey-step h3 {
  margin: 0;
  color: var(--navy);
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.search-result-card p,
.contact-mail-card small,
.journey-step p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.media-filter-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.media-filter {
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  background: var(--white);
  color: var(--blue);
  cursor: pointer;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 850;
  line-height: 1.25;
  padding: 9px 12px;
}

.media-filter.is-active {
  border-color: var(--gold);
  background: rgba(200, 169, 107, 0.16);
  color: var(--navy);
}

.media-filter-count {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 760;
}

.contact-mail-grid,
.journey-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.contact-mail-card,
.journey-step {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid rgba(11, 29, 51, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 243, 234, 0.42));
  padding: 20px;
  box-shadow: 0 12px 32px rgba(11, 29, 51, 0.055);
}

.contact-mail-card:hover {
  border-color: rgba(200, 169, 107, 0.34);
  box-shadow: var(--shadow);
}

.form {
  display: grid;
  gap: 15px;
}

.form label {
  display: grid;
  gap: 7px;
  color: var(--navy);
  font-weight: 800;
}

.form input,
.form textarea,
.form select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 13px;
  color: var(--ink);
  background: var(--white);
  font: inherit;
  min-width: 0;
}

.form textarea {
  min-height: 150px;
  resize: vertical;
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.75fr);
  align-items: end;
  gap: 40px;
  margin-bottom: 36px;
}

.section-heading .lead {
  margin-bottom: 0;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.feature {
  min-width: 0;
  padding: 28px clamp(20px, 2.4vw, 32px);
  border-left: 1px solid var(--line);
}

.feature:first-child {
  border-left: 0;
}

.feature > span,
.proof > span,
.contact-path > .meta {
  display: block;
  margin-bottom: 14px;
  color: var(--blue);
  font-family: var(--ui);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.feature h3,
.proof h3,
.contact-path h3 {
  margin: 0 0 12px;
  color: var(--navy);
  font-family: var(--serif);
  font-size: clamp(1.55rem, 2.3vw, 2rem);
  line-height: 1.08;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.feature p,
.proof p,
.contact-path p {
  margin: 0 0 12px;
  color: var(--muted);
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 30px;
}

.proof {
  position: relative;
  display: block;
  min-width: 0;
  padding: 26px 0 30px;
  border-top: 1px solid var(--line);
  transition: border-color var(--transition), transform var(--transition);
}

.proof::after {
  content: "↗";
  position: absolute;
  right: 2px;
  top: 24px;
  color: var(--gold);
  font-family: var(--ui);
  font-size: 1.05rem;
}

.proof:hover,
.proof:focus-visible {
  border-color: var(--gold);
  transform: translateY(-2px);
}

.proof .page-garde-figure {
  max-width: 210px;
}

.editorial-list,
.topic-list {
  display: grid;
  border-top: 1px solid var(--line);
}

.editorial-list > a,
.editorial-list > article,
.editorial-list > li,
.timeline-list > article,
.topic-list > article {
  display: grid;
  grid-template-columns: minmax(150px, 0.3fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: start;
  min-width: 0;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.editorial-list > a {
  transition: padding-left var(--transition), border-color var(--transition);
}

.editorial-list > a:hover,
.editorial-list > a:focus-visible {
  padding-left: 8px;
  border-color: var(--gold-line);
}

.editorial-list span,
.topic-list > article > span {
  color: var(--blue);
  font-family: var(--ui);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* sur fond sombre, le repère reprend l'or OBY, comme .eyebrow */
.navy .editorial-list span,
.navy .topic-list > article > span {
  color: var(--gold);
}

.editorial-list strong,
.topic-list h3 {
  color: var(--navy);
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

/* variante à <li> : le titre est un <h3>, pas un <strong>.
   Même typographie, mais aucune couleur imposée : elle s'hérite du contexte,
   ce qui garde le titre lisible sur fond clair comme sur fond sombre. */
.editorial-list h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.editorial-list li p {
  margin: 10px 0 0;
}

.topic-list h3,
.topic-list p {
  margin: 0;
}

.topic-list p {
  margin-top: 8px;
  color: var(--muted);
}

.callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 38px;
  align-items: center;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-md);
  padding: clamp(28px, 5vw, 54px);
  color: var(--ivory);
  background:
    linear-gradient(120deg, rgba(11, 29, 51, 0.98), rgba(18, 58, 109, 0.94)),
    url("../img/backgrounds/pattern-cartographie-subtile.svg");
  box-shadow: var(--shadow-premium);
}

.callout h2 {
  margin: var(--s-2) 0 var(--s-3);
  color: var(--white);
  font-family: var(--serif);
  font-size: var(--t-3xl);
  line-height: var(--lh-title);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.callout p,
.callout a {
  color: var(--ivory);
}

.section-link {
  margin-top: 28px;
  color: var(--muted);
}

.text-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  border-bottom: 1px solid var(--gold-line);
  color: var(--blue);
  font-weight: 800;
}

.text-link.light,
.navy .text-link {
  color: var(--ivory);
}

.disclosure,
.collection-disclosure {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 34px rgba(11, 29, 51, 0.055);
  overflow: clip;
}

.disclosure + .disclosure,
.collection-disclosure + .collection-disclosure {
  margin-top: 14px;
}

.disclosure summary,
.collection-disclosure summary {
  position: relative;
  display: grid;
  grid-template-columns: minmax(130px, 0.3fr) minmax(0, 1fr) 28px;
  gap: 20px;
  align-items: center;
  min-height: 64px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  /* le panneau est clair : ne pas hériter du blanc des sections sombres */
  color: var(--navy);
}

.disclosure summary::-webkit-details-marker,
.collection-disclosure summary::-webkit-details-marker {
  display: none;
}

.disclosure summary::after,
.collection-disclosure summary::after {
  content: "+";
  grid-column: 3;
  grid-row: 1;
  color: var(--gold);
  font-family: var(--ui);
  font-size: 1.45rem;
  line-height: 1;
  text-align: center;
}

.disclosure[open] summary::after,
.collection-disclosure[open] summary::after {
  content: "−";
}

.disclosure summary span,
.collection-disclosure summary span {
  color: var(--blue);
  font-family: var(--ui);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Summary sans sur-titre : le <strong> occupe les deux colonnes de texte
   au lieu d'être tassé dans la première, large de 130 px. */
.disclosure summary > strong:first-child,
.collection-disclosure summary > strong:first-child {
  grid-column: 1 / 3;
}

.disclosure summary strong,
.collection-disclosure summary strong {
  color: var(--navy);
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.2vw, 1.65rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.disclosure-body {
  border-top: 1px solid var(--line);
  padding: clamp(24px, 4vw, 42px);
  /* idem : le corps reste lisible même dans une section sombre */
  color: var(--ink);
}

.secondary-collection {
  padding: clamp(20px, 3.5vw, 42px) 0;
}

.secondary-collection + .secondary-collection {
  padding-top: 0;
}

.compact-disclosure {
  margin-top: 34px;
  color: var(--ink);
}

.editorial-panels,
.stacked-cards {
  display: grid;
  gap: 16px;
}

.check-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
}

.pillar-list {
  display: grid;
  border-top: 1px solid var(--line);
}

.pillar {
  display: grid;
  grid-template-columns: 58px minmax(230px, 0.72fr) minmax(0, 1fr);
  gap: 28px;
  min-width: 0;
  padding: 34px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 110px;
}

.pillar-index {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 1.7rem;
  line-height: 1;
}

.pillar-main h3 {
  margin: 6px 0 12px;
  color: var(--navy);
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.04;
}

.pillar-question {
  color: var(--muted);
}

.pillar dl {
  display: grid;
  gap: 14px;
  margin: 0;
}

.pillar dl div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 12px;
}

.pillar dt {
  color: var(--blue);
  font-weight: 800;
}

.pillar dd {
  margin: 0;
  color: var(--muted);
}

.pillar-links {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
}

.pillar-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid var(--gold-line);
  color: var(--blue);
  font-weight: 800;
}

.path-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(246, 243, 234, 0.14);
  background: rgba(246, 243, 234, 0.14);
}

.path {
  display: grid;
  gap: 9px;
  min-height: 150px;
  padding: 28px;
  color: var(--ivory);
  background: rgba(11, 29, 51, 0.72);
  transition: background var(--transition);
}

.resource-paths {
  border-color: var(--line);
  background: var(--line);
}

.resource-paths .path {
  color: var(--navy);
  background: var(--white);
}

.path:hover,
.path:focus-visible {
  background: rgba(18, 58, 109, 0.92);
}

.resource-paths .path:hover,
.resource-paths .path:focus-visible {
  color: var(--white);
}

.path span {
  color: var(--gold);
  font-family: var(--ui);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.path strong {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  line-height: 1.12;
}

.contact-paths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.contact-path {
  min-width: 0;
  padding: 30px;
  border-left: 1px solid var(--line);
}

.contact-path:first-child {
  border-left: 0;
}

.request-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: request;
}

.request-list li {
  display: grid;
  grid-template-columns: minmax(110px, 0.3fr) minmax(0, 1fr);
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.request-list strong {
  color: var(--navy);
}

.request-list span {
  color: var(--muted);
}

.library-controls {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) minmax(220px, 1fr) minmax(160px, 0.7fr) auto;
  gap: 14px;
  align-items: end;
  margin-bottom: 22px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--ivory);
}

.media-public-controls {
  grid-template-columns: minmax(220px, 1.3fr) repeat(3, minmax(150px, 0.8fr)) auto;
}

.library-controls label {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 800;
}

.library-controls input,
.library-controls select {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(11, 29, 51, 0.22);
  border-radius: var(--radius-sm);
  background: var(--white);
  padding: 10px 12px;
  color: var(--ink);
  font-size: 0.95rem;
}

.results-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  color: var(--muted);
}

.results-bar strong {
  color: var(--navy);
}

.empty-state {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 28px;
  color: var(--muted);
  background: var(--ivory);
}

[id] {
  scroll-margin-top: 100px;
}

.site-footer {
  color: var(--ivory);
  background:
    linear-gradient(120deg, rgba(11, 29, 51, 1), rgba(11, 29, 51, 0.94)),
    url("../img/backgrounds/pattern-cartographie-subtile.svg");
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 42px;
  padding: 58px 0;
}

.footer-brand img {
  width: min(220px, 100%);
  height: auto;
  object-fit: contain;
  margin-bottom: 18px;
}

.footer-brand h2 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 2rem;
}

.footer-brand p,
.footer-note {
  color: var(--pearl);
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.footer-links h3 {
  margin: 0 0 12px;
  color: var(--gold);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer-links a {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 8px 0;
  color: var(--ivory);
  overflow-wrap: break-word;
}

.footer-bottom {
  border-top: 1px solid rgba(246, 243, 234, 0.12);
  padding: 18px 0;
  color: var(--pearl);
  font-size: 0.9rem;
}

.footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

.footer-legal a {
  color: var(--ivory);
  text-decoration: underline;
  text-decoration-color: rgba(200, 169, 107, 0.6);
  text-underline-offset: 3px;
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms ease, transform 520ms ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1060px) {
  .header-inner {
    min-height: 68px;
    padding-right: 58px;
  }

  .brand {
    min-width: 0;
    flex: 0 1 auto;
  }

  .nav-toggle {
    position: absolute;
    right: 0;
    top: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    margin-left: auto;
  }

  .nav-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    padding: 10px 12px;
    box-shadow: var(--shadow);
    z-index: 80;
    max-height: calc(100vh - 96px);
    max-height: calc(100dvh - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .nav-menu.is-open {
    display: flex;
  }

  /* Sur écran étroit, chaque rubrique se déplie sur place, sous son lien. */
  .nav-list {
    flex-direction: column;
    align-items: stretch;
  }

  .nav-item {
    flex-wrap: wrap;
    border-top: 1px solid rgba(11, 29, 51, 0.08);
  }

  .nav-item:first-child {
    border-top: 0;
  }

  .nav-item > .nav-link {
    flex: 1 1 auto;
  }

  .nav-sub-toggle {
    width: 44px;
    height: 44px;
    margin: 0;
  }

  .nav-submenu {
    position: static;
    display: none;
    flex: 0 0 100%;
    min-width: 0;
    max-width: none;
    margin: 0 0 8px 10px;
    padding: 0 0 0 10px;
    border: 0;
    border-left: 2px solid var(--gold-line);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .nav-group.is-open > .nav-submenu {
    display: block;
  }

  .nav-submenu a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 10px;
  }

  .nav-menu .nav-cta {
    justify-content: center;
    min-height: 44px;
    margin: 8px 0 2px;
  }

  .nav-direct {
    border-left: 0;
    border-top: 1px solid rgba(11, 29, 51, 0.08);
  }

  .nav-direct:first-child {
    border-top: 0;
  }

  .nav-link {
    padding: 12px 10px;
    white-space: normal;
    overflow-wrap: break-word;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 34px;
  }

  .hero-panel {
    min-height: 340px;
  }

  .hero-visual-panel {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }

  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature:nth-child(odd) {
    border-left: 0;
  }

  .feature:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .footer-links,
  .library-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .grid.two,
  .grid.three,
  .grid.four,
  .v3-flow,
  .split,
  .footer-inner,
  .footer-links {
    grid-template-columns: 1fr;
  }

  .hero h1 {
    font-size: clamp(2.65rem, 12vw, 3.35rem);
    max-width: 100%;
    line-height: 0.98;
  }

  .page-hero h1 {
    max-width: 100%;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .page-hero-with-visual .page-hero-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .page-hero-visual {
    border-radius: 14px;
  }

  .card h2,
  .card h3,
  .timeline-item h3,
  .section-title {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .resource-row {
    display: block;
  }

  .library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .media-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .map-paths,
  .map-results,
  .watch-grid,
  .search-results,
  .contact-mail-grid,
  .journey-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .map-toolbar,
  .watch-toolbar,
  .search-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .library-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section-heading,
  .pillar {
    grid-template-columns: 1fr;
  }

  .pillar {
    gap: 14px;
  }

  .pillar-links {
    grid-column: auto;
  }

  .proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-paths {
    grid-template-columns: 1fr;
  }

  .contact-path {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .contact-path:first-child {
    border-top: 0;
  }

  .callout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .brand.brand-official img {
    width: 44px;
    height: 44px;
    max-width: 44px;
    max-height: 44px;
    border-radius: 50%;
  }

  .page-hero-visual {
    aspect-ratio: 4 / 5;
  }
}

@media (max-width: 560px) {
  .header-inner,
  .section-inner,
  .footer-inner {
    width: calc(100% - 36px);
  }

  .site-header {
    position: sticky;
  }

  .header-inner {
    min-height: 64px;
    padding-right: 54px;
  }

  .brand img {
    width: 62px;
    max-width: 62px;
  }

  .nav-toggle {
    top: 10px;
    width: 42px;
    height: 42px;
  }

  .nav-menu {
    max-width: 100%;
    overflow-x: hidden;
  }

  .nav-link {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .hero,
  .page-hero,
  .section,
  .site-footer {
    overflow-x: clip;
  }

  .hero::after,
  .page-hero::after {
    right: 10px;
    max-width: 100%;
  }

  .hero-inner,
  .page-hero .section-inner,
  .section {
    padding-top: 54px;
    padding-bottom: 54px;
  }

  .card {
    width: 100%;
    padding: 22px;
  }

  .grid,
  .split,
  .footer-links,
  .timeline,
  .resource-row {
    width: 100%;
    max-width: 100%;
  }

  .media-frame {
    width: 100%;
    min-height: 220px;
  }

  .timeline-item {
    width: 100%;
    max-width: 100%;
    padding-left: 18px;
  }

  .actions {
    display: grid;
  }

  .hero-position,
  .hero-signature {
    display: block;
    width: 280px;
    max-width: 280px;
    overflow-wrap: anywhere;
  }

  .hero-signature {
    font-size: 1.25rem;
    line-height: 1.36;
  }

  .hero-position {
    font-size: 1rem;
  }

  .hero-kicker {
    display: block;
    max-width: 100%;
    line-height: 1.55;
    font-size: 0.72rem;
    overflow-wrap: break-word;
  }

  .hero-kicker::before {
    display: block;
    margin-bottom: 10px;
  }

  .hero::before {
    inset: 14px;
  }

  .hero-panel {
    justify-self: center;
    width: min(100%, calc(100vw - 36px));
    max-width: calc(100vw - 36px);
    min-height: 310px;
    padding: 24px;
  }

  .hero-visual-panel {
    aspect-ratio: 4 / 5;
    min-height: 0;
    padding: 0;
  }

  .hero-panel-copy {
    padding: 24px;
  }

  .hero-panel p {
    width: 100%;
    max-width: min(100%, 28ch);
    font-size: 0.96rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .hero-panel h2 {
    max-width: 100%;
    font-size: 1.62rem;
    overflow-wrap: anywhere;
  }

  .hero-proof {
    display: none;
  }

  .page-hero h1 {
    font-size: clamp(2rem, 10vw, 2.65rem);
    line-height: 1.06;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .page-hero p,
  .lead,
  .card p,
  .notice,
  .meta,
  .footer-brand p,
  .footer-bottom {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .section-title {
    font-size: clamp(1.95rem, 9.4vw, 2.55rem);
    line-height: 1.08;
  }

  .lead {
    font-size: 1rem;
    line-height: 1.72;
  }

  .card h2,
  .card h3 {
    font-size: clamp(1.45rem, 7vw, 1.9rem);
    line-height: 1.08;
  }

  .footer-inner {
    gap: 28px;
    padding: 44px 0;
  }

  .footer-brand h2 {
    font-size: 1.75rem;
    overflow-wrap: break-word;
  }

  .footer-brand p,
  .footer-links a,
  .footer-bottom {
    overflow-wrap: anywhere;
  }

  .footer-links a {
    width: auto;
    max-width: 100%;
  }

  .footer-bottom .section-inner {
    overflow-wrap: anywhere;
  }

  .form,
  .form label,
  .form input,
  .form textarea,
  .form select {
    min-width: 0;
    max-width: 100%;
  }

  .capability-item summary {
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
  }

  .capability-item summary span {
    grid-column: 1 / -1;
  }

  .resource-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .resource-row span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .library-grid,
  .library-summary,
  .map-summary,
  .map-paths,
  .map-results,
  .map-toolbar,
  .watch-grid,
  .watch-toolbar,
  .search-results,
  .search-toolbar,
  .contact-mail-grid,
  .journey-steps,
  .media-library-grid {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
  }

  .map-shell,
  .watch-shell {
    padding: 18px;
  }

  .map-result-header {
    display: grid;
  }

  .map-toolbar .button {
    width: 100%;
  }

  .watch-toolbar .button {
    width: 100%;
  }

  .search-toolbar .button {
    width: 100%;
  }

  .map-result-header .button {
    width: 100%;
  }

  .media-filter {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .library-card {
    padding: 18px;
  }

  .library-card-top {
    display: grid;
  }

  .library-card h3 {
    font-size: 1.3rem;
  }

  .media-card-body {
    padding: 18px;
  }

  .media-card-top {
    display: grid;
    justify-content: stretch;
  }

  .media-type,
  .media-status {
    width: fit-content;
    max-width: 100%;
  }

  .media-card h3 {
    font-size: 1.3rem;
  }

  .feature-grid,
  .proof-grid,
  .path-grid,
  .library-controls {
    grid-template-columns: 1fr;
  }

  .feature {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .feature:first-child {
    border-top: 0;
  }

  .editorial-list > a,
  .editorial-list > article,
  .editorial-list > li,
  .timeline-list > article,
  .topic-list > article,
  .request-list li {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .disclosure summary,
  .collection-disclosure summary {
    grid-template-columns: minmax(0, 1fr) 28px;
    gap: 6px 14px;
    padding: 18px;
  }

  .disclosure summary span,
  .collection-disclosure summary span {
    grid-column: 1;
  }

  .disclosure summary strong,
  .collection-disclosure summary strong {
    grid-column: 1;
  }

  .disclosure summary::after,
  .collection-disclosure summary::after {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .disclosure-body {
    padding: 20px 18px;
  }

  .pillar dl div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .page-garde-figure img {
    max-height: 270px;
  }

  body[data-page="ecosysteme"] .header-inner,
  body[data-page="ecosysteme"] .section-inner,
  body[data-page="ecosysteme"] .footer-inner {
    width: min(calc(100% - 36px), 354px);
    margin-left: 18px;
    margin-right: auto;
  }

  body[data-page="ecosysteme"] .page-hero h1,
  body[data-page="ecosysteme"] .section-title,
  body[data-page="ecosysteme"] .card h2,
  body[data-page="ecosysteme"] .card h3 {
    max-width: 100%;
    text-wrap: wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  body[data-page="ecosysteme"] .page-hero h1 {
    font-size: clamp(1.82rem, 8.6vw, 2.28rem);
    line-height: 1.1;
  }

  body[data-page="ecosysteme"] .section-title {
    font-size: clamp(1.7rem, 8.1vw, 2.15rem);
    line-height: 1.12;
  }

  body[data-page="ecosysteme"] .card h2,
  body[data-page="ecosysteme"] .card h3 {
    font-size: clamp(1.28rem, 6.4vw, 1.7rem);
    line-height: 1.12;
  }

  body[data-page="ecosysteme"] .card p,
  body[data-page="ecosysteme"] .card li,
  body[data-page="ecosysteme"] .notice,
  body[data-page="ecosysteme"] .lead {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  body[data-page="interventions"] .header-inner,
  body[data-page="interventions"] .section-inner,
  body[data-page="interventions"] .footer-inner,
  body[data-page="travaux"] .header-inner,
  body[data-page="travaux"] .section-inner,
  body[data-page="travaux"] .footer-inner,
  body[data-page="mediatheque"] .header-inner,
  body[data-page="mediatheque"] .section-inner,
  body[data-page="mediatheque"] .footer-inner {
    width: min(calc(100% - 36px), 354px);
    margin-left: 18px;
    margin-right: auto;
  }

  body[data-page="interventions"] .page-hero h1,
  body[data-page="interventions"] .section-title,
  body[data-page="interventions"] .card h2,
  body[data-page="interventions"] .card h3,
  body[data-page="interventions"] .media-card h3,
  body[data-page="travaux"] .page-hero h1,
  body[data-page="travaux"] .section-title,
  body[data-page="travaux"] .card h2,
  body[data-page="travaux"] .card h3,
  body[data-page="travaux"] .v3-model-card h3,
  body[data-page="mediatheque"] .page-hero h1,
  body[data-page="mediatheque"] .section-title,
  body[data-page="mediatheque"] .card h2,
  body[data-page="mediatheque"] .card h3,
  body[data-page="mediatheque"] .media-card h3 {
    max-width: 100%;
    text-wrap: wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  body[data-page="interventions"] .page-hero h1,
  body[data-page="travaux"] .page-hero h1,
  body[data-page="mediatheque"] .page-hero h1 {
    font-size: clamp(1.82rem, 8.6vw, 2.28rem);
    line-height: 1.1;
  }

  body[data-page="interventions"] .section-title,
  body[data-page="travaux"] .section-title,
  body[data-page="mediatheque"] .section-title {
    font-size: clamp(1.7rem, 8.1vw, 2.15rem);
    line-height: 1.12;
  }

  body[data-page="interventions"] .card h2,
  body[data-page="interventions"] .card h3,
  body[data-page="interventions"] .media-card h3,
  body[data-page="travaux"] .card h2,
  body[data-page="travaux"] .card h3,
  body[data-page="travaux"] .v3-model-card h3,
  body[data-page="mediatheque"] .card h2,
  body[data-page="mediatheque"] .card h3,
  body[data-page="mediatheque"] .media-card h3 {
    font-size: clamp(1.28rem, 6.4vw, 1.7rem);
    line-height: 1.12;
  }

  body[data-page="interventions"] .card p,
  body[data-page="interventions"] .card li,
  body[data-page="interventions"] .notice,
  body[data-page="interventions"] .lead,
  body[data-page="interventions"] .media-card p,
  body[data-page="travaux"] .card p,
  body[data-page="travaux"] .card li,
  body[data-page="travaux"] .notice,
  body[data-page="travaux"] .lead,
  body[data-page="travaux"] .v3-model-card p,
  body[data-page="travaux"] .v3-field-list dd,
  body[data-page="mediatheque"] .card p,
  body[data-page="mediatheque"] .card li,
  body[data-page="mediatheque"] .notice,
  body[data-page="mediatheque"] .lead,
  body[data-page="mediatheque"] .media-card p {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 390px) {
  .hero h1 {
    font-size: clamp(2.45rem, 11.5vw, 3rem);
  }

  .hero-signature {
    font-size: 1.15rem;
  }

  .button {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }

  .hero-panel {
    width: min(100%, calc(100vw - 36px));
    max-width: calc(100vw - 36px);
    padding: 22px;
  }

  .hero-panel::before {
    inset: 14px;
  }

  body[data-page="ecosysteme"] .page-hero h1 {
    font-size: clamp(1.72rem, 8vw, 2.06rem);
  }

  body[data-page="interventions"] .page-hero h1,
  body[data-page="travaux"] .page-hero h1,
  body[data-page="mediatheque"] .page-hero h1 {
    font-size: clamp(1.72rem, 8vw, 2.06rem);
  }
}

@media (max-width: 375px) {
  .header-inner,
  .section-inner,
  .footer-inner {
    width: calc(100% - 32px);
  }

  .hero::before {
    inset: 12px;
  }

  .hero h1 {
    font-size: 2.5rem;
  }

  .page-hero h1 {
    font-size: 2rem;
  }

  .card {
    padding: 18px;
  }

  .hero-panel {
    width: min(100%, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    padding: 20px;
  }

  .hero-panel p {
    font-size: 0.94rem;
  }
}

/* ==========================================================================
   Recherche approfondie — droit de la mer et golfe de Guinée
   Page recherche-droit-mer-golfe-guinee.html et bloc de mise en avant
   associé sur travaux-publications.html.
   ========================================================================== */

.research-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 58px);
}

/* la couverture, lorsqu'elle est disponible, occupe la colonne de gauche */
.research-hero-with-visual .research-hero-grid {
  grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
}

.research-hero-copy {
  min-width: 0;
}

.research-hero h1 {
  max-width: 26ch;
  font-size: clamp(2.05rem, 3.9vw, 3.5rem);
  line-height: 1.12;
}

.research-hero .research-subtitle {
  max-width: 54ch;
  margin: 0 0 18px;
  padding-left: 0;
  border-left: 0;
  color: var(--ivory);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-style: italic;
  line-height: 1.35;
}

.research-hero .research-position {
  max-width: 92ch;
  margin: 0 0 26px;
  padding-left: 0;
  border-left: 0;
  color: var(--gold);
  font-size: 0.79rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* couverture : jamais recadrée, le titre et le nom doivent rester entiers */
.research-hero-visual {
  position: relative;
  margin: 0;
  align-self: center;
  aspect-ratio: 1 / 1.414;
  overflow: hidden;
  border: 1px solid rgba(200, 169, 107, 0.28);
  border-radius: 10px;
  background: var(--ivory);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.24);
}

.research-hero-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Chaîne norme → résultat : texte accessible, jamais une image.
   Les séparateurs sont purement décoratifs et restent hors du flux lu. */
.norm-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
  counter-reset: norm-chain;
}

.norm-chain li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 11px 15px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--blue);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.norm-chain li::before {
  counter-increment: norm-chain;
  content: counter(norm-chain, decimal-leading-zero);
  flex: 0 0 auto;
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.06em;
}

.norm-chain li:not(:last-child)::after {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-left: 3px;
  border-top: 2px solid var(--gold);
  border-right: 2px solid var(--gold);
  transform: rotate(45deg);
}

.research-domains {
  gap: 10px;
}

.research-domains .map-pill {
  padding: 8px 14px;
  font-size: 0.78rem;
}

/* Mise en avant sur travaux-publications.html */
.research-highlight {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 38px);
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow);
}

.research-highlight-figure {
  margin: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
}

.research-highlight-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.research-highlight-body {
  min-width: 0;
}

.research-highlight-body h3 {
  margin: 6px 0 12px;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.25;
}

.research-highlight-body p {
  margin: 0 0 16px;
  color: var(--muted);
}

.research-highlight .map-tags {
  margin-bottom: 18px;
}

/* Sans couverture disponible, le bloc occupe toute la largeur sans colonne vide.
   La classe explicite ne dépend d'aucun sélecteur récent ; la règle :has qui
   suit n'est qu'un filet de sécurité si la vignette est retirée du balisage. */
.research-highlight-textonly,
.research-highlight:not(:has(.research-highlight-figure)) {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 860px) {
  .research-hero-with-visual .research-hero-grid,
  .research-highlight {
    grid-template-columns: minmax(0, 1fr);
  }

  .research-hero-visual {
    max-width: 340px;
    justify-self: center;
  }

  .research-highlight-figure {
    max-width: 240px;
  }
}

@media (max-width: 560px) {
  .norm-chain li {
    width: 100%;
    font-size: 0.82rem;
  }

  .norm-chain li:not(:last-child)::after {
    margin-left: auto;
    transform: rotate(135deg);
  }
}
/* OBY P0 — Accueil : 4 travaux principaux en grille 2 × 2 */
.proof-grid.home-proof-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 760px) {
  .proof-grid.home-proof-grid {
    grid-template-columns: 1fr;
  }
}

/* P2 — ligne de portée sous un repère majeur de la liste éditoriale.
   La liste est une grille à deux colonnes : le titre et sa portée partagent
   la seconde, sinon la portée retomberait dans la colonne de la date. La
   gouttière de la grille sert d'écart entre colonnes, pas entre ces deux
   lignes : l'espacement vertical vient de la marge du paragraphe. */
.editorial-list > a.repere {
  row-gap: 0;
}

.editorial-list > a.repere > strong,
.editorial-list > a.repere > p {
  grid-column: 2;
}

.editorial-list > a.repere > p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.55;
}

/* Sous 560 px la liste passe à une seule colonne : le placement explicite en
   colonne 2 doit être relâché, sinon la date et le titre se superposent. */
@media (max-width: 560px) {
  .editorial-list > a.repere {
    row-gap: 8px;
  }

  .editorial-list > a.repere > strong,
  .editorial-list > a.repere > p {
    grid-column: auto;
  }

  .editorial-list > a.repere > p {
    margin: 0;
  }
}

/* Environnement de circulation affiché sur une fiche de la médiathèque. */
.media-environment {
  align-self: center;
  color: var(--blue);
  font-family: var(--ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: right;
  text-transform: uppercase;
}

/* Fiche d'événement : résumé court toujours visible, contextualisation dépliable.
   Le résumé porte le poids éditorial de la fiche ; le bloc « Contexte & repères »
   n'est ouvert que par qui veut le détail, ce qui garde la page parcourable. */
.event-summary {
  color: var(--ink);
}

.event-context {
  min-width: 0;
  margin: 16px 0 4px;
  border-top: 1px solid var(--line);
}

/* Ce <details> est imbriqué dans un `.collection-disclosure`, dont la règle
   `.collection-disclosure summary` — un sélecteur de descendance — s'applique
   aussi ici et impose une grille de trois colonnes. Chaque propriété qu'elle
   pose doit donc être remise à plat, faute de quoi le libellé se tasse dans une
   première colonne de 130 px et le marqueur part à l'autre bout de la carte. */
.event-context > summary {
  position: static;
  display: block;
  width: fit-content;
  max-width: 100%;
  min-height: 0;
  margin-top: 12px;
  padding: 0;
  color: var(--blue);
  font-family: var(--ui);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
}

.event-context > summary::-webkit-details-marker {
  display: none;
}

.event-context > summary::after {
  content: "+";
  grid-column: auto;
  grid-row: auto;
  margin-left: 8px;
  color: var(--gold);
  font-family: var(--ui);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-align: left;
}

.event-context[open] > summary::after {
  content: "−";
}

.event-context > summary:hover,
.event-context > summary:focus-visible {
  color: var(--navy);
}

.event-context-body {
  margin-top: 12px;
  border-left: 2px solid var(--gold-line);
  padding-left: 14px;
}

.event-context-body > p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

.event-context-body > p:last-child {
  margin-bottom: 0;
}

/* Sélecteur enfant plutôt qu'une classe seule : sans lui, `.event-context-body > p`
   — déclaré juste au-dessus — l'emporterait sur la taille voulue ici. */
.event-context-body > .event-themes,
.event-context-body > .event-sources {
  font-size: 0.86rem;
}

.event-themes strong,
.event-sources strong {
  color: var(--navy);
}

.event-sources a {
  border-bottom: 1px solid var(--gold-line);
  color: var(--blue);
  font-weight: 800;
  overflow-wrap: anywhere;
  transition: color var(--transition), border-color var(--transition);
}

.event-sources a:hover {
  color: var(--navy);
  border-color: var(--gold);
}

@media (max-width: 560px) {
  .event-context-body {
    padding-left: 11px;
  }
}

/* Liste compacte des participations : une photo, un titre cliquable, une ligne.
   Le détail vit sur participation.html, ce qui garde la page parcourable même
   lorsque le nombre d'entrées augmente. */
.participation-card {
  /* `align-self: start` est indispensable : sans lui, la carte s'étire sur la
     hauteur de la rangée, et une entrée sans photo se retrouve creusée d'un
     grand vide dès qu'une entrée voisine en porte une. */
  align-self: start;
  display: flex;
  flex-direction: column;
  padding: 22px;
}

.participation-visual {
  margin: 0 0 16px;
  border: 1px solid rgba(11, 29, 51, 0.1);
  border-radius: var(--radius-sm);
  background: var(--ivory);
  overflow: hidden;
}

.participation-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.participation-card h3 {
  margin: 10px 0 8px;
  font-size: 1.32rem;
}

.participation-card h3 a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}

.participation-card h3 a:hover,
.participation-card h3 a:focus-visible {
  color: var(--blue);
  border-color: var(--gold-line);
}

.participation-card > .meta {
  margin: 0 0 10px;
  font-size: 0.86rem;
}

.participation-card > p {
  font-size: 0.94rem;
  line-height: 1.55;
}

.participation-card > .card-link {
  margin-top: auto;
  padding-top: 8px;
}

/* Objets de demande pré-qualifiés sur la page Contact : une ligne de liens,
   qui reste lisible quand elle se replie sur plusieurs lignes. */
.contact-qualification {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 10px;
}


/* OBY correctif post-audit — médiathèque compacte : richesse en arrière-plan. */
.media-card-primary.media-lightbox-trigger {
  position: relative;
  width: 100%;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: zoom-in;
}

.media-card-primary.media-lightbox-trigger:focus-visible,
.media-gallery-trigger:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
}

.media-zoom-label {
  position: absolute;
  right: 10px;
  bottom: 10px;
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--white);
  background: rgba(11, 29, 51, 0.84);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(11, 29, 51, 0.22);
}

.media-card-disclosure {
  display: block;
  margin: auto 0 16px;
  border-top: 1px solid rgba(11, 29, 51, 0.1);
}

.media-card-disclosure > summary {
  list-style: none;
}

.media-card-disclosure > summary::-webkit-details-marker {
  display: none;
}

.media-card-summary-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  color: var(--blue);
  font-size: 0.8rem;
  font-weight: 800;
}

.media-card-disclosure > .media-card-summary-footer {
  margin-top: 0;
  padding: 12px 0 0;
  cursor: pointer;
}

.media-card-disclosure > .media-card-summary-footer:focus-visible {
  border-radius: 4px;
  outline: 3px solid var(--gold-line);
  outline-offset: 3px;
}

.media-card-summary-static {
  margin-top: auto;
  margin-bottom: 16px;
  border-top: 1px solid rgba(11, 29, 51, 0.1);
}

.media-photo-count {
  color: var(--muted);
  font-weight: 760;
}

.media-open-label::after {
  content: " +";
}

.media-card-disclosure[open] .media-open-label::after {
  content: " −";
}

.media-card-expanded {
  padding-top: 4px;
}

.media-card-gallery-collapsed {
  margin-top: 16px;
}

.media-card-fact {
  font-size: 0.82rem;
  line-height: 1.5;
}

.media-card-compact .media-card-primary figcaption {
  display: none;
}

.media-gallery-trigger {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 4px;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
}

.media-lightbox {
  width: min(1600px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  border: 0;
  padding: 0;
  color: #f8f6ef;
  background: transparent;
  overflow: hidden;
}

.media-lightbox::backdrop {
  background: rgba(3, 10, 18, 0.9);
  backdrop-filter: blur(5px);
}

.media-lightbox-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  width: 100%;
  max-height: calc(100dvh - 32px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 12px;
  background: #081526;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.48);
  overflow: hidden;
}

.media-lightbox-toolbar,
.media-lightbox-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.media-lightbox-count {
  padding-left: 4px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.media-lightbox button {
  min-width: 48px;
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  padding: 10px 16px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.media-lightbox button:hover:not(:disabled) {
  border-color: var(--gold);
  background: rgba(200, 169, 107, 0.18);
}

.media-lightbox button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.media-lightbox button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.media-lightbox-figure {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.media-lightbox-figure img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100dvh - 210px);
  margin: auto;
  object-fit: contain;
}

.media-lightbox-figure figcaption {
  width: min(100%, 900px);
  margin: 10px auto 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.88rem;
  line-height: 1.45;
  text-align: center;
}

.media-lightbox-navigation {
  justify-content: center;
}

@media (max-width: 560px) {
  .media-lightbox {
    width: calc(100% - 16px);
    max-height: calc(100dvh - 16px);
  }

  .media-lightbox-shell {
    max-height: calc(100dvh - 16px);
    border-radius: 8px;
    padding: 8px;
  }

  .media-lightbox-figure img {
    max-height: calc(100dvh - 220px);
  }

  .media-lightbox-navigation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .media-lightbox-navigation button {
    width: 100%;
    padding-inline: 10px;
  }
}

/* --- Idées & Analyses ----------------------------------------------------
   La rubrique réutilise les composants du site (.card, .map-shell, .map-pill,
   .tagline). Ces règles n'ajoutent que ce qui lui est propre : la mise en page
   de lecture longue, la carte d'analyse et la carte de collection. */

/* Collections -------------------------------------------------------------- */

.analysis-collection {
  display: flex;
  flex-direction: column;
}

.analysis-collection h3 {
  font-size: 1.46rem;
}

.analysis-collection > p {
  margin-bottom: 0;
}

/* Le décompte se détache du résumé et se cale en bas de carte : les cinq
   cartes gardent la même ligne de base quelle que soit la longueur du texte. */
.analysis-card-meta {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.analysis-collection .analysis-card-meta {
  margin-top: auto;
  padding-top: 16px;
}

/* Une collection qui porte des textes devient une cible entière. */
a.analysis-collection {
  text-decoration: none;
}

a.analysis-collection .analysis-card-meta::after {
  content: " →";
  color: var(--gold);
}

.analysis-collections-note {
  margin: 26px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.analysis-collections-note strong {
  color: var(--navy);
}

/* Catalogue ---------------------------------------------------------------- */

.analysis-card {
  display: flex;
  flex-direction: column;
}

.analysis-card h3 {
  font-size: 1.52rem;
}

.analysis-card .map-tags {
  margin-top: 14px;
}

.analysis-card .analysis-card-meta {
  margin-top: auto;
  padding-top: 16px;
}

/* Le titre porte le lien, mais toute la carte réagit : le soulignement se
   déploie au survol de la carte comme au focus clavier du lien lui-même. */
.analysis-card h3 a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--gold-line), var(--gold-line));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size var(--transition);
}

.analysis-card:hover h3 a,
.analysis-card h3 a:focus-visible {
  background-size: 100% 2px;
}

/* Lecture ------------------------------------------------------------------ */

.analysis-chapeau {
  max-width: 56ch;
  font-size: 1.06rem;
  line-height: 1.62;
}

/* Colonne de lecture centrée. Le sommaire, quand il existe, occupe la marge
   de droite au lieu de la laisser vide ; en dessous de 1180 px il repasse
   au-dessus du texte, replié. */
.analysis-layout {
  display: grid;
  justify-content: center;
  gap: 24px;
  grid-template-columns: minmax(0, 58ch);
}

@media (min-width: 1180px) {
  .analysis-layout.has-toc {
    gap: 64px;
    grid-template-columns: minmax(0, 58ch) 230px;
  }

  .analysis-layout.has-toc > article {
    grid-column: 1;
    grid-row: 1;
  }

  .analysis-layout.has-toc .analysis-toc {
    position: sticky;
    top: 112px;
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }

  /* Dans la marge, le sommaire est toujours ouvert : son intitulé redevient un
     simple titre et perd le chevron du dépliant. */
  .analysis-layout.has-toc .analysis-toc-shell > summary {
    cursor: default;
    pointer-events: none;
    list-style: none;
  }

  .analysis-layout.has-toc .analysis-toc-shell > summary::-webkit-details-marker {
    display: none;
  }
}

.analysis-toc-shell {
  border-top: 2px solid var(--gold-line);
  padding-top: 14px;
}

.analysis-toc-shell > summary {
  color: var(--navy);
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.analysis-toc-shell ol {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: sommaire;
}

.analysis-toc-shell li {
  counter-increment: sommaire;
  margin-bottom: 9px;
}

.analysis-toc-shell a {
  display: block;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.42;
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 12px;
  transition: color var(--transition), border-color var(--transition);
}

.analysis-toc-shell a::before {
  content: counter(sommaire) ". ";
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.analysis-toc-shell a:hover,
.analysis-toc-shell a:focus-visible {
  color: var(--navy);
  border-left-color: var(--gold);
}

/* Corps du texte : mesure courte, interlignage ample, intertitres détachés. */
.analysis-body > p {
  margin: 0 0 18px;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.76;
  overflow-wrap: break-word;
}

.analysis-heading {
  margin: 38px 0 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--navy);
  font-family: var(--serif);
  font-size: 1.46rem;
  line-height: 1.2;
  text-wrap: balance;
}

.analysis-heading:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Appareil de fin de texte : thématiques, références, renvois. */
.analysis-aside-title {
  margin: 0 0 12px;
  color: var(--navy);
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.analysis-themes {
  margin-top: 34px;
}

.analysis-references {
  margin-top: 30px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

/* Références numérotées en retrait pendant : la numérotation reste lisible
   même quand une référence court sur plusieurs lignes. */
.analysis-references ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: reference;
}

.analysis-references li {
  counter-increment: reference;
  position: relative;
  margin-bottom: 9px;
  padding-left: 30px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

.analysis-references li::before {
  content: counter(reference);
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.analysis-links {
  margin: 28px 0 0;
  font-size: 0.9rem;
}

.analysis-links a {
  color: var(--blue);
  font-weight: 600;
}

@media (max-width: 640px) {
  .analysis-heading {
    margin-top: 30px;
    font-size: 1.22rem;
  }

  .analysis-body > p {
    font-size: 0.98rem;
  }

  .analysis-collection h3,
  .analysis-card h3 {
    font-size: 1.3rem;
  }
}

/* Parcours en récits ------------------------------------------------------- */
/* Trois récits longs dans la colonne de lecture des analyses. Chacun s'ouvre
   sur son surtitre, son titre et son chapeau, et se clôt sur ses renvois ; un
   filet doré marque le passage d'un récit au suivant. */
.recit + .recit {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 2px solid var(--gold-line);
}

.recit > .eyebrow {
  margin: 0;
}

.recit-title {
  margin: 8px 0 12px;
  color: var(--navy);
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.2vw, 2.2rem);
  line-height: 1.15;
  text-wrap: balance;
}

.analysis-body > p.recit-chapeau {
  margin-bottom: 26px;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.6;
}

.recit-figure {
  margin: 28px 0 30px;
}

.recit-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.recit-figure figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.recit-figure figcaption a,
.recit-renvois a {
  color: var(--blue);
  font-weight: 600;
}

.recit-suite {
  margin-top: 30px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

.recit-renvois {
  margin: 0;
  padding: 0;
  list-style: none;
}

.recit-renvois li {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}

.recit-renvois strong {
  color: var(--navy);
}

/* --- Refonte esthétique : harmonisation des vignettes documentaires -------
   Les pages de garde sont des documents aux formats très différents — un
   mémoire en portrait, un rapport en paysage. Alignées telles quelles dans une
   grille, elles donnaient une impression de planche-contact. Un cadre de
   proportion constante, sur fond ivoire, les présente comme une collection
   sans jamais les recadrer : `contain` préserve la page entière. */

.home-proof-grid .proof figure {
  margin: 0 0 var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, var(--white), rgba(246, 243, 234, 0.55));
  padding: var(--s-4);
  box-shadow: 0 10px 28px rgba(11, 29, 51, 0.06);
  transition: box-shadow var(--transition), border-color var(--transition);
}

.home-proof-grid .proof figure img {
  display: block;
  width: 100%;
  height: 340px;
  object-fit: contain;
  object-position: center;
}

.home-proof-grid .proof:hover figure {
  border-color: var(--gold-line);
  box-shadow: 0 16px 40px rgba(11, 29, 51, 0.1);
}

@media (max-width: 760px) {
  .home-proof-grid .proof figure img {
    height: 230px;
  }
}

/* --- Mesure de lecture sur les paragraphes courants ----------------------
   Un paragraphe isolé dans une section occupait toute la largeur de la grille,
   soit plus de cent signes par ligne. La règle ne vise que les paragraphes
   posés directement dans une section : les cartes, encadrés et colonnes ont
   déjà leur propre largeur. */
.section-inner > p,
.section-inner > .section-link {
  max-width: var(--mesure);
}

.section-inner > .notice {
  max-width: 92ch;
}

/* Sur fond sombre, l'Or Ancien de la charte est parfaitement lisible (7,6:1) :
   le surtitre y reprend la couleur de marque. */
.navy .eyebrow,
.hero .eyebrow,
.hero-kicker,
.page-hero .eyebrow,
.research-hero .eyebrow,
.site-footer .eyebrow {
  color: var(--gold);
}

/* --- Paliers téléphone — finition premium V1.1 ---------------------------
   Mesures relevées en V1 : le titre de section occupait 37 px sur une colonne
   de 354 px, contre 48 px sur 1440. Rapporté à la largeur disponible, il
   pesait deux fois plus sur téléphone que sur ordinateur, et la hiérarchie se
   refermait (37 → 27 → 16 au lieu de 48 → 25 → 16). On rouvre l'écart, on
   élargit la gouttière et on donne aux cibles une surface tactile franche.
   Aucun contenu n'est retiré.

   Un seul palier par largeur, dans l'ordre 640 → 390 → 375, pour que le plus
   étroit ait naturellement le dernier mot sans recourir à une spécificité
   supplémentaire. */

@media (max-width: 640px) {
  .section-title {
    font-size: clamp(1.68rem, 7vw, 2rem);
  }

  .card h2,
  .card h3 {
    font-size: 1.32rem;
  }

  .section {
    padding: 52px 0;
  }

  .section-heading {
    gap: var(--s-5);
    margin-bottom: var(--s-6);
  }

  /* Surface tactile : 48 px de haut, au-delà du minimum recommandé. */
  .button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nav-menu .nav-link {
    min-height: 46px;
    display: flex;
    align-items: center;
  }

  /* Vingt liens de pied de page empilés à 26 px : au-dessus du minimum
     normatif de 24 px, mais sous le seuil de confort au pouce. */
  .footer-links a {
    display: block;
    min-height: 36px;
    padding-block: 5px;
  }

  .footer-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .page-garde-figure {
    padding: var(--s-4);
  }

  .page-garde-figure img {
    height: 224px;
  }

  /* Trois pages ont un gabarit de colonne qui leur est propre, délibéré, et
     des titres plus spécifiques que la règle générale. Seule leur échelle est
     alignée sur celle des autres pages. */
  body[data-page="interventions"] .section-title,
  body[data-page="travaux"] .section-title,
  body[data-page="mediatheque"] .section-title {
    font-size: clamp(1.62rem, 7vw, 1.95rem);
  }

  body[data-page="interventions"] .card h2,
  body[data-page="interventions"] .card h3,
  body[data-page="travaux"] .card h2,
  body[data-page="travaux"] .card h3,
  body[data-page="mediatheque"] .card h2,
  body[data-page="mediatheque"] .card h3 {
    font-size: 1.3rem;
  }

  /* Contact — liste de qualification des demandes.
     C'est une suite de liens séparés par des points médians : une énumération
     sur une ligne large, un désordre sur un téléphone, où chaque lien prend sa
     propre ligne et laisse les séparateurs isolés en début ou en fin de ligne.
     Le point médian étant une ponctuation décorative, on annule sa taille sur
     le conteneur et on la rend aux liens, qui deviennent une vraie liste
     verticale. Aucun lien, aucun libellé, aucune adresse n'est touché.
     Le sélecteur est aligné sur `.section-inner > p`, qui borne la mesure de
     lecture et l'emporterait sinon. */
  .section-inner > .contact-qualification {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    font-size: 0;
    /* La mesure générale est en `ch`, unité qui vaut zéro quand la taille de
       police l'est aussi : sans cette neutralisation, le bloc disparaîtrait. */
    max-width: none;
    margin-top: var(--s-3);
    border-top: 1px solid var(--line);
  }

  .section-inner > .contact-qualification a.text-link {
    display: block;
    width: 100%;
    padding: 13px 0 13px 14px;
    border-bottom: 1px solid var(--line);
    border-left: 2px solid var(--gold-line);
    font-size: 0.95rem;
    line-height: 1.4;
    background-image: none;
  }

  .section-inner > .contact-qualification a.text-link:hover,
  .section-inner > .contact-qualification a.text-link:focus-visible {
    border-left-color: var(--gold);
    background-color: rgba(246, 243, 234, 0.6);
  }
}

@media (max-width: 390px) {
  /* 18 px de gouttière serraient le texte contre le bord de l'écran. */
  .header-inner,
  .section-inner,
  .footer-inner {
    width: calc(100% - 40px);
  }

  .card {
    padding: 22px 20px;
  }
}

@media (max-width: 375px) {
  .header-inner,
  .section-inner,
  .footer-inner {
    width: calc(100% - 36px);
  }

  .section-title {
    font-size: 1.62rem;
  }

  .card h2,
  .card h3 {
    font-size: 1.24rem;
  }
}

/* --- Styles autrefois en ligne ----------------------------------------------
   La Content-Security-Policy des pages (style-src 'self') bloque les styles
   écrits dans le HTML : ils vivent désormais ici. */

/* Bibliothèque publique : seules les notices confirmées sont présentées, le
   badge de statut n'a donc rien à distinguer. */
.resources-public .library-status {
  display: none;
}

.resources-public .library-card-top {
  justify-content: flex-start;
}

/* Carnet d'idées : seconde grille détachée de la première. */
.grid-espace-haut {
  margin-top: 28px;
}