/* ==========================================================================
   MAJESTICS — feuille de style unique
   Règle typographique du projet : le monospace est réservé aux valeurs
   émises par une machine (NIF, codes SECeF, numéros de pièce, montants).
   Règle chromatique : l'ambre ne signifie qu'une chose — une pièce validée.
   ========================================================================== */

/* --- Polices ------------------------------------------------------------ */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-var.woff2') format('woff2');
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Mono';
  src: url('../fonts/dmmono-500-latin.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens ------------------------------------------------------------- */

:root {
  /* Couleur — le marine est le sol, pas un accent. */
  --marine: #001D9B;
  --marine-950: #001566;
  --marine-600: #2A46C8;
  --paper: #F6F7FB;
  --paper-edge: #E4E7F2;
  --sheet: #FFFFFF;
  --ink: #0B1020;
  --ink-muted: #4A5270;

  /* L'ambre n'existe qu'en aplat sur marine, ou en pavé avec du marine dessus.
     --ambre-ink est la seule valeur de la famille lisible sur papier (5,1:1). */
  --ambre: #FDB904;
  --ambre-ink: #8A6100;

  /* Sur fond marine */
  --on-marine: #EDF0FF;
  --on-marine-muted: #A9B4E8;
  --marine-edge: rgba(237, 240, 255, 0.22);

  /* Typographie */
  --f-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono: 'DM Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --t-display: clamp(2.5rem, 1.7rem + 3.6vw, 4.25rem);
  --t-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem);
  --t-h3: 1.375rem;
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;
  --t-label: 0.75rem;

  /* Rythme — les sections portent du padding, jamais de marge.
     Cela évite les collisions de spécificité entre .band et ses enfants. */
  --sp-section: clamp(4rem, 9vw, 7.5rem);
  --wrap: 74rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* --- Reset -------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: var(--t-body);
  line-height: 1.6;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, p, dl, dd, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--marine-600); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--marine); }

button { font: inherit; color: inherit; }

/* Focus visible partout — marine sur papier, ambre sur marine. */
:focus-visible {
  outline: 3px solid var(--marine-600);
  outline-offset: 2px;
  border-radius: 2px;
}

.band--marine :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible { outline-color: var(--sheet); }

/* --- Primitives typographiques ------------------------------------------ */

.label {
  font-size: var(--t-label);
  font-weight: 600;
  font-stretch: 75%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink-muted);
}

/* Les étiquettes portent l'ambre : sur marine en direct (7,8:1), sur papier
   via l'ambre foncé (5,17:1) — l'ambre pur y tomberait à 1,62:1. */
.label { color: var(--ambre-ink); }
.band--marine .label,
.band--deep .label { color: var(--ambre); }

/* Valeurs émises par une machine. Jamais du texte rédigé. */
.machine {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 0.9375em;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.display {
  font-size: var(--t-display);
  font-weight: 600;
  font-stretch: 92%;
  line-height: 1.02;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.h2 {
  font-size: var(--t-h2);
  font-weight: 600;
  font-stretch: 92%;
  line-height: 1.1;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.h3 {
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.012em;
}

/* Accroche longue : le slogan complet ne tient pas à la taille du display
   plein. Une échelle dédiée plutôt qu'un titre haché sur six lignes. */
.display--long {
  font-size: clamp(2.125rem, 1.5rem + 2.7vw, 3.5rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 46ch;
}

.band--marine .lede { color: var(--on-marine-muted); }

.muted { color: var(--ink-muted); }

.link-more { margin-top: 2rem; font-weight: 600; font-size: var(--t-small); }
.link-more a { color: var(--ambre-ink); text-decoration-thickness: 2px; }
.link-more a:hover { color: var(--marine); }
.band--marine .link-more a,
.band--deep .link-more a { color: var(--ambre); }
.band--marine .link-more a:hover,
.band--deep .link-more a:hover { color: var(--sheet); }

/* En-tête de page intérieure — même structure sur tous les gabarits. */
.page-head { padding-block: clamp(3rem, 6vw, 4.5rem); }
.page-head .display { margin-top: 0.9rem; font-size: clamp(2.125rem, 1.5rem + 2.6vw, 3.25rem); }
.page-head .lede { margin-top: 1.4rem; }

.cols { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; align-items: start; }

@media (min-width: 60em) {
  .cols { grid-template-columns: 1fr 20rem; }
  .cols--even { grid-template-columns: 1fr 1fr; }
}

/* Étapes numérotées — utilisées uniquement là où le contenu est
   réellement une séquence ordonnée (méthode d'intégration). */
.steps { margin-top: clamp(2rem, 4vw, 3rem); }

.step { display: grid; gap: 0.5rem 1.5rem; grid-template-columns: auto 1fr; padding-block: 1.5rem; border-top: 1px solid var(--paper-edge); }
.step:last-child { border-bottom: 1px solid var(--paper-edge); }
.step__n { font-family: var(--f-mono); font-weight: 500; color: var(--ink-muted); font-size: var(--t-small); padding-top: 0.2rem; }
.step p { margin-top: 0.5rem; color: var(--ink-muted); max-width: 52ch; }

.aside { background: var(--sheet); border: 1px solid var(--paper-edge); padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.aside h2, .aside h3 { font-size: var(--t-label); font-weight: 600; font-stretch: 75%; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.aside dl { margin-top: 1rem; display: grid; gap: 0.85rem; }
.aside dt { font-size: 0.8125rem; color: var(--ink-muted); }
.aside dd { margin: 0.15rem 0 0; font-size: var(--t-small); }

/* Marqueur de donnée manquante — visible en relecture, jamais en production. */
.todo {
  background: #FFF3CD;
  color: #6B4E00;
  padding: 0.1em 0.4em;
  border: 1px dashed #B38600;
  font-size: 0.875em;
}

/* --- Layout ------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Motif de fond des bandes claires.
   Les deux traits obliques du logotype, blanc et ambre, répétés en trame très
   basse (3 % et 5 %). Tracé en SVG inline dans une URI de données : aucune
   requête réseau, quelques centaines d'octets, et net à toutes les densités.
   Volontairement à la limite du perceptible — on doit le sentir, pas le lire. */
.band {
  padding-block: var(--sp-section);
  position: relative;
  isolation: isolate;
}

/* Le motif est porté par un pseudo-élément, pas par le fond de la bande.
   C'est ce qui permet de le masquer : posé en fond direct, il passait derrière
   les paragraphes et gênait la lecture sur les sections longues.

   Le masque est vertical, pas horizontal. Sur un écran large, la colonne de
   texte occupe presque toute la largeur : il ne reste aucune gouttière où
   loger le motif. Le respiration entre deux sections, elle, est toujours
   libre — c'est là qu'on le voit. Et comme les M descendent, ils entrent par
   le haut et sortent par le bas : le masque sert la métaphore au lieu de la
   contrarier. */
.band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Le vrai brand mark, extrait de majestics-m.png : fond rendu transparent,
     tracé recoloré en marine et ambre pour rester lisible sur le papier — la
     déclinaison d'origine est blanche, donc invisible sur fond clair.
     Un motif dessiné « de mémoire » ne serait pas le logotype. */
  background-image: url("../img/motif-m-clair.png");
  background-size: 300px 300px;
  background-repeat: repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 6%, transparent 30%, transparent 70%, #000 94%, #000 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 6%, transparent 30%, transparent 70%, #000 94%, #000 100%);
}

/* Le motif descend lentement : la page respire sans que rien ne bouge au
   premier plan. Très lent — 90 s pour une maille — pour que ce soit une
   présence, pas une distraction. Coupé si l'utilisateur demande moins
   d'animations. */
@media (prefers-reduced-motion: no-preference) {
  .band::before { animation: chute 90s linear infinite; }
}

@keyframes chute {
  from { background-position: 0 0; }
  to { background-position: 0 300px; }
}

/* Le motif n'appartient qu'au papier : sur le marine il brouillerait le texte,
   et sur la bande blanche il salirait le mur de logos. */
.band--marine::before,
.band--deep::before,
.band--sheet::before { display: none; }

.band--marine {
  background: var(--marine);
  color: var(--on-marine);
}

.band--deep {
  background: var(--marine-950);
  color: var(--on-marine);
}

/* Bande blanche : réservée au mur de logos. Beaucoup de logos sont fournis
   sur fond blanc opaque ; sur le papier légèrement bleuté, ils se verraient
   comme des rectangles plus clairs. Sur du blanc pur, ils disparaissent. */
.band--sheet { background: var(--sheet); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--sheet);
  color: var(--marine);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  z-index: 100;
}

.skip-link:focus { left: 0; }

/* --- En-tête ------------------------------------------------------------ */

.site-header {
  background: var(--marine);
  color: var(--on-marine);
  border-bottom: 1px solid var(--marine-edge);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.25rem;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  color: var(--on-marine);
  text-decoration: none;
  font-weight: 600;
  font-stretch: 92%;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
  margin-right: auto;
}

.brand strong { font-weight: 600; }

/* Le logotype est servi en hauteur fixe : c'est la hauteur d'œil qui doit
   rester constante d'un écran à l'autre, pas la largeur. */
.brand img {
  height: 2rem;
  width: auto;
  max-width: 12.5rem;
}

@media (max-width: 30em) {
  .brand img { height: 1.75rem; }
}

.brand span {
  font-size: var(--t-label);
  font-weight: 600;
  font-stretch: 75%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-marine-muted);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 1.9rem);
}

.nav__list a {
  color: var(--on-marine);
  text-decoration: none;
  font-size: var(--t-small);
  font-weight: 500;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.nav__list a:hover,
.nav__list .current-menu-item > a,
.nav__list [aria-current='page'] {
  color: var(--sheet);
  border-bottom-color: var(--ambre);
}

.nav-toggle { display: none; }

/* --- Boutons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.5rem;
  font-weight: 600;
  font-size: var(--t-small);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}

/* Bouton principal : aplat ambre, encre marine. 9,33:1 — le couple le plus
   contrasté de toute la charte, et les deux couleurs de la marque à la fois. */
.btn--primary {
  background: var(--ambre);
  color: var(--marine-950);
  border-color: var(--ambre);
}

.btn--primary:hover { background: #FFC933; border-color: #FFC933; color: var(--marine-950); }

.btn--ghost {
  background: transparent;
  color: var(--on-marine);
  border-color: var(--marine-edge);
}

.btn--ghost:hover { border-color: var(--on-marine); color: var(--sheet); }

.btn--ink {
  background: var(--marine);
  color: var(--sheet);
  border-color: var(--marine);
}

.btn--ink:hover { background: var(--marine-950); border-color: var(--marine-950); color: var(--sheet); }

/* --- Hero --------------------------------------------------------------- */

.hero { padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(4rem, 9vw, 7rem); }

.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}

/* Pas de max-width ici : une largeur exprimée en `ch` se calcule sur la taille
   du corps de texte du conteneur, pas sur celle du titre. Elle étranglerait le
   display à environ 290 px et hacherait la thèse en quatre lignes. */
.hero__thesis { max-width: none; }

.hero .lede { margin-top: 1.5rem; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

.hero__note {
  margin-top: 1.75rem;
  font-size: var(--t-small);
  color: var(--on-marine-muted);
  max-width: 46ch;
}

/* --- Élément signature de l'accueil : le registre des trois univers ------ */
/* La hiérarchie est portée par la structure, pas par la décoration :
   Technologies occupe plus de place et porte seule la marque d'homologation. */

.universes {
  border: 1px solid var(--marine-edge);
  max-width: 27rem;
}

.universe {
  padding: 1.15rem 1.35rem;
  border-top: 1px solid var(--marine-edge);
}

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

.universe--lead { padding-block: 1.5rem; }

.universe__name {
  font-size: 1.25rem;
  font-weight: 600;
  font-stretch: 92%;
  letter-spacing: -0.012em;
  line-height: 1.2;
}

.universe--lead .universe__name { font-size: 1.5rem; }

.universe__name a { color: var(--sheet); text-decoration: none; }
.universe__name a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.universe__what {
  margin-top: 0.4rem;
  font-size: var(--t-small);
  color: var(--on-marine-muted);
  max-width: 34ch;
}

.universe__val { margin-top: 0.5rem; font-size: var(--t-small); }

/* Seule occurrence de l'ambre sur cette page : la marque d'homologation. */
.universe__mark {
  display: inline-block;
  margin-top: 0.85rem;
  background: var(--ambre);
  color: var(--marine-950);
  padding: 0.32rem 0.65rem;
  font-size: 0.8125rem;
  font-weight: 600;
  font-stretch: 82%;
  letter-spacing: 0.05em;
}

/* --- Élément signature : la pièce certifiée ----------------------------- */
/* Rendu entièrement en HTML/CSS. Aucune image, aucun réseau. */

.doc-figure { margin: 0; max-width: 27rem; }

.doc {
  background: var(--sheet);
  color: var(--ink);
  width: 100%;
  /* Sur papier : un filet suffit. La feuille ne se détache d'une ombre portée
     que lorsqu'elle est posée sur le marine. */
  border: 1px solid var(--paper-edge);
}

.band--marine .doc {
  border-color: transparent;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 18px 44px -18px rgba(0, 8, 60, 0.55);
}

.doc__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.35rem 0.9rem;
  border-bottom: 1px solid var(--paper-edge);
}

.doc__kind {
  font-size: var(--t-label);
  font-weight: 600;
  font-stretch: 75%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.doc__num { font-size: var(--t-small); color: var(--ink-muted); }

.doc__rows {
  padding: 0.35rem 1.35rem 1.1rem;
  font-size: var(--t-small);
}

.doc__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--paper-edge);
}

.doc__row:last-child { border-bottom: 0; }

.doc__row dt { color: var(--ink-muted); }
.doc__row dd { margin: 0; text-align: right; }

.doc__row--total dt,
.doc__row--total dd { font-weight: 600; color: var(--ink); }

/* Le cachet. Aplat ambre, encre marine — 7,8:1. */
.doc__stamp {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  background: var(--ambre);
  color: var(--marine-950);
  padding: 0.95rem 1.35rem;
}

/* Pas de `text-transform` sur les marques : « e-SECeF » est un nom propre et
   sa casse est réglementaire. La capitalisation forcée la détruirait. */
.doc__stamp-mark {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8125rem;
  font-weight: 600;
  font-stretch: 82%;
  letter-spacing: 0.06em;
}

.doc__stamp-sig {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8125rem;
  color: var(--marine-950);
  opacity: 0.85;
}

.doc__qr { width: 3.25rem; height: 3.25rem; }
.doc__qr rect { fill: var(--marine-950); }

.doc__caption {
  margin-top: 0.9rem;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

.band--marine .doc__caption { color: var(--on-marine-muted); }

/* Le seul mouvement orchestré du site : le cachet se pose, une fois, à
   l'arrivée sur l'accueil. Ailleurs le document est une pièce de référence,
   il ne bouge pas. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero .doc__stamp {
    animation: stamp 520ms var(--ease) 700ms backwards;
  }
}

@keyframes stamp {
  from { opacity: 0; transform: translateY(-0.5rem) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* --- Motif du hero ------------------------------------------------------ */
/* Deux traits obliques repris de la géométrie du logotype, à l'échelle du
   bandeau. Décoratif : son animation ne conditionne aucun contenu, et si elle
   ne joue pas, le motif est simplement là. */

.hero { position: relative; overflow: hidden; isolation: isolate; }

.hero__motif {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hero__motif svg { width: 100%; height: 100%; display: block; }

/* L'ambre a besoin de plus d'opacité que le blanc pour rester chaud sur le
   marine : en dessous d'environ 15 %, il vire au bleu et les deux traits
   deviennent indiscernables. */
.motif__a { fill: #FFFFFF; opacity: 0.07; }
.motif__b { fill: var(--ambre); opacity: 0.20; }

/* L'arrivée du hero : tout tombe d'en haut et se pose, en cascade. C'est le
   seul moment orchestré du site — repris du cachet qui s'apposait sur la
   facture de la première version.

   Animations CSS pures, sans JavaScript : si elles ne jouent pas, le contenu
   est simplement là. Rien n'est jamais masqué en attendant un script. */
@media (prefers-reduced-motion: no-preference) {
  .motif__a { animation: tomber-motif 1100ms var(--ease) 120ms backwards; }
  .motif__b { animation: tomber-motif 1100ms var(--ease) 300ms backwards; }

  .hero__thesis > * { animation: tomber 720ms var(--ease) backwards; }
  .hero__thesis > :nth-child(1) { animation-delay: 100ms; }
  .hero__thesis > :nth-child(2) { animation-delay: 250ms; }
  .hero__thesis > :nth-child(3) { animation-delay: 390ms; }

  .hero .frame { animation: tomber 820ms var(--ease) 480ms backwards; }
}

@keyframes tomber-motif {
  from { opacity: 0; transform: translate(2%, -14%); }
}

@keyframes tomber {
  from { opacity: 0; transform: translateY(-1.4rem) scale(0.985); }
}

/* --- Cadre de capture applicative --------------------------------------- */

.frame {
  margin: 0;
  background: var(--sheet);
  border: 1px solid var(--paper-edge);
  box-shadow: 0 24px 60px -24px rgba(0, 8, 60, 0.55);
  overflow: hidden;
}

.band--marine .frame { border-color: transparent; }

.frame__bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 0.9rem;
  background: var(--paper);
  border-bottom: 1px solid var(--paper-edge);
}

.frame__bar span {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--paper-edge);
}

.frame__img { display: block; width: 100%; height: auto; }

/* --- Grille de logos ---------------------------------------------------- */
/* Hauteur d'œil constante, largeur libre : c'est la seule façon de faire
   cohabiter des logos dont les proportions n'ont rien à voir entre elles. */

.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* --- Bande défilante ----------------------------------------------------- */
/* Deux séries identiques glissent d'une demi-largeur : au moment où la boucle
   repart, la seconde série occupe exactement la place de la première, et la
   reprise ne se voit pas. Le défilement s'arrête au survol et au focus clavier,
   sans quoi il serait impossible de lire un logo ou d'en atteindre un. */

.marquee {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  overflow: hidden;
  /* Les extrémités s'effacent : la bande semble continuer hors du cadre
     plutôt que d'être coupée net. */
  mask-image: linear-gradient(90deg, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
}

.marquee__piste { display: flex; width: max-content; }

.marquee .logos {
  margin-top: 0;
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding-right: clamp(1.75rem, 4vw, 3.5rem);
}


/* Deux bandes empilées : la seconde se colle à la première, sans redoubler
   la marge du haut. */
.marquee + .marquee { margin-top: 1.25rem; }

@media (prefers-reduced-motion: no-preference) {
  .marquee__piste { animation: defiler 42s linear infinite; }

  /* Sens inverse : on part de la position finale et on remonte. La piste étant
     dupliquée, le raccord reste invisible dans les deux sens. */
  .marquee__piste--inverse { animation-name: defiler-inverse; }

  .marquee:hover .marquee__piste,
  .marquee:focus-within .marquee__piste { animation-play-state: paused; }
}

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

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

/* Sans animation, la seconde série ferait doublon : on la retire. */
@media (prefers-reduced-motion: reduce) {
  .marquee { mask-image: none; -webkit-mask-image: none; overflow-x: auto; }
  .marquee .logos[aria-hidden='true'] { display: none; }
}

/* Boîte de taille fixe, logo inscrit dedans. C'est la seule normalisation qui
   tienne : à hauteur d'œil égale, un logotype long — Amadeus, Booking.com —
   occupe trois fois la surface d'une marque compacte comme IATA et écrase
   tout le reste. Ici chaque marque dispose de la même place. */
.logos li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 9.5rem;
  height: 3.5rem;
}

.logos img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Sur fond marine, un logo monochrome sombre disparaîtrait : on l'éclaircit.
   Ce traitement écrase les couleurs — il ne convient donc qu'aux logos
   partenaires monochromes, jamais à un mur de logos clients, qui va sur fond
   clair pour que chaque marque garde sa charte. */
.band--marine .logos img,
.band--deep .logos img { filter: brightness(0) invert(1); opacity: 0.85; }

/* Un filet léger sépare les logos sans les encadrer. */
.logos li + li { position: relative; }
.logos li + li::before {
  content: '';
  position: absolute;
  left: calc(-1 * clamp(0.875rem, 2vw, 1.75rem));
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 2rem;
  background: var(--paper-edge);
}

.band--marine .logos li + li::before,
.band--deep .logos li + li::before { background: var(--marine-edge); }

@media (max-width: 40em) {
  .logos { gap: 1.25rem 1.5rem; }
  .logos li { width: 7rem; height: 2.75rem; }
}

/* --- Hero centré -------------------------------------------------------- */

.hero--center { text-align: center; }
/* Largeur en rem, pas en `ch` : le `ch` se calcule sur la taille du corps de
   texte du conteneur et étranglerait le titre à moins de 200 px. */
.hero--center .hero__thesis { margin-inline: auto; max-width: 46rem; }
.hero--center .lede { margin-inline: auto; max-width: 60ch; }
.hero--center .hero__actions { justify-content: center; }

/* --- Mission et vision -------------------------------------------------- */
/* Un filet ambre en tête de colonne : assez pour distinguer les deux
   déclarations sans les enfermer dans des cartes. */

.pillar { border-top: 3px solid var(--ambre); padding-top: 1.25rem; }
.pillar .h3 { margin-top: 0.7rem; }
.pillar p { margin-top: 0.9rem; color: var(--ink-muted); max-width: 52ch; }

.band--marine .pillar,
.band--deep .pillar { border-top-color: var(--ambre); }

/* --- Grille de métiers -------------------------------------------------- */

.grid { display: grid; gap: 1px; background: var(--paper-edge); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.grid--4 { grid-template-columns: 1fr; }

.card {
  background: var(--paper);
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: background-color 0.2s var(--ease);
}

.card:hover { background: var(--sheet); }

/* Capture de carte : elle prend la place du pictogramme, sur toute la largeur,
   en débordant du padding pour toucher les bords. */
.card__img {
  display: block;
  width: calc(100% + 2 * clamp(1.5rem, 3vw, 2rem));
  margin: calc(-1 * clamp(1.5rem, 3vw, 2rem)) calc(-1 * clamp(1.5rem, 3vw, 2rem)) 0.5rem;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
}

.card__icon { width: 2rem; height: 2rem; color: var(--marine); }
.card__icon svg { width: 100%; height: 100%; display: block; }
.card h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.25; }
.card p { color: var(--ink-muted); font-size: var(--t-small); }
.card a { margin-top: auto; padding-top: 0.5rem; font-weight: 600; font-size: var(--t-small); }

/* Cartes produit, sur fond marine */
.grid--marine { background: var(--marine-edge); }
.grid--marine .card { background: var(--marine); }
.grid--marine .card:hover { background: var(--marine-950); }
.grid--marine .card h3 { color: var(--sheet); }
.grid--marine .card p { color: var(--on-marine-muted); }
.grid--marine .card__icon { color: var(--ambre); }
.grid--marine .card a { color: var(--sheet); }

/* --- Actualités en accueil ---------------------------------------------- */

.news { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: grid; gap: 0; }
.news__item { padding-block: 1.35rem; border-top: 1px solid var(--paper-edge); display: grid; gap: 0.35rem; }
.news__item:last-child { border-bottom: 1px solid var(--paper-edge); }
.news__item h3 { font-size: 1.0625rem; font-weight: 600; }
.news__item h3 a { color: var(--ink); text-decoration: none; }
.news__item h3 a:hover { color: var(--marine-600); text-decoration: underline; }

/* Reprise d'une tête de section à l'intérieur d'une bande déjà ouverte :
   c'est la marge qui sépare, pas un second padding de bande. */
.section-head--espace { margin-top: clamp(3.5rem, 7vw, 5.5rem); }

/* --- Bande « le groupe » ------------------------------------------------- */

.group-strip { display: grid; gap: 2.5rem; margin-top: clamp(2rem, 4vw, 3rem); }
.group-strip__item { padding-top: 1.25rem; border-top: 3px solid var(--ambre); }
.group-strip__item h3 { font-size: 1.375rem; font-weight: 600; font-stretch: 92%; margin-top: 0.6rem; }
.group-strip__item h3 a { color: var(--sheet); text-decoration: none; }
.group-strip__item h3 a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.group-strip__item > p { margin-top: 0.8rem; font-size: var(--t-small); color: var(--on-marine-muted); max-width: 52ch; line-height: 1.65; }

.group-strip__list {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
}

.group-strip__list li {
  font-size: 0.8125rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--marine-edge);
  color: var(--on-marine);
}

.group-strip__facts { margin-top: 1.1rem; display: grid; gap: 0.5rem; }
.group-strip__facts > div { display: flex; gap: 0.75rem; align-items: baseline; font-size: var(--t-small); }
.group-strip__facts dt { color: var(--on-marine-muted); min-width: 8rem; }
.group-strip__facts dd { margin: 0; }

/* --- Cartes de formation ------------------------------------------------ */

.formations {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 1fr;
}

.formation {
  background: var(--sheet);
  border: 1px solid var(--paper-edge);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}

.formation:hover {
  box-shadow: 0 16px 36px -18px rgba(0, 8, 60, 0.35);
  transform: translateY(-2px);
}

/* Vignette. Sans photo, on sert le monogramme sur le marine : une carte sans
   visuel casserait l'alignement de la grille, un cadre gris ferait inachevé. */
.formation__visuel,
.formation__vignette {
  aspect-ratio: 16 / 9;
  background: var(--marine);
  /* Sur le marine, le brand mark garde ses couleurs d'origine. */
  background-image: url("../img/motif-m-sombre.png");
  background-size: 220px 220px;
  overflow: hidden;
}

.formation__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.formation__corps {
  padding: 1.35rem 1.35rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.formation__titre {
  margin-top: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
}

.formation__desc {
  margin-top: 0.7rem;
  color: var(--ink-muted);
  font-size: var(--t-small);
  line-height: 1.55;
}

/* Le programme est replié : neuf cartes déployées deviendraient un mur.
   <details> fonctionne sans JavaScript et reste accessible au clavier. */
.formation__plan-bloc { margin-top: 1.1rem; }

.formation__plan-bloc > summary {
  cursor: pointer;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ambre-ink);
  padding-block: 0.4rem;
  list-style: none;
}

.formation__plan-bloc > summary::-webkit-details-marker { display: none; }
.formation__plan-bloc > summary::before { content: '+ '; font-family: var(--f-mono); }
.formation__plan-bloc[open] > summary::before { content: '– '; }
.formation__plan-bloc > summary:hover { color: var(--marine); }

.formation__plan { margin-top: 0.5rem; display: grid; gap: 0; }

.formation__plan li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.4rem;
  padding-block: 0.5rem;
  border-top: 1px solid var(--paper-edge);
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

.formation__plan .machine { color: var(--ambre-ink); }

/* Le bouton est poussé en bas : toutes les cartes d'une rangée l'alignent,
   quelle que soit la longueur du texte au-dessus. */
.formation__action { margin-top: auto; padding-top: 1.25rem; }
.formation__action .btn { width: 100%; justify-content: center; }

@media (min-width: 44em) {
  .formations { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 68em) {
  .formations { grid-template-columns: repeat(3, 1fr); }
}

/* --- Témoignages -------------------------------------------------------- */

.temoins {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

.temoin {
  margin: 0;
  padding: 1.75rem;
  background: var(--paper);
  border-top: 3px solid var(--ambre);
  display: flex;
  flex-direction: column;
}

/* Un brouillon doit se voir comme un brouillon, même par inadvertance. */
.temoin--brouillon {
  border-top-color: #B38600;
  background: #FFFBF0;
  outline: 1px dashed #B38600;
}

.temoin__avis {
  font-size: 0.75rem;
  line-height: 1.5;
  color: #6B4E00;
  margin-bottom: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px dashed #D8B860;
}

.temoin__avis code { font-family: var(--f-mono); font-size: 0.9em; }

.temoin__citation { margin: 0; }
.temoin__citation p { font-size: 1.0625rem; line-height: 1.6; color: var(--ink); }
.temoin__citation p::before { content: '« '; }
.temoin__citation p::after { content: ' »'; }

.temoin__auteur {
  margin-top: auto;
  padding-top: 1.35rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: var(--t-small);
}

.temoin__portrait,
.temoin__initiale {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  flex: none;
  object-fit: cover;
}

/* Sans portrait : l'initiale sur un pastille marine, plutôt qu'une silhouette
   grise générique qui signale l'absence de photo. */
.temoin__initiale {
  display: grid;
  place-items: center;
  background: var(--marine);
  color: var(--sheet);
  font-weight: 600;
  font-size: 1.125rem;
}

.temoin__auteur strong { display: block; font-weight: 600; }
.temoin__role { color: var(--ink-muted); font-size: 0.8125rem; }

@media (min-width: 52em) {
  .temoins { grid-template-columns: repeat(3, 1fr); }
}

/* --- Illustration de section -------------------------------------------- */

.illus { margin: 0; align-self: start; }

.illus__img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid var(--paper-edge);
}

.band--marine .illus__img,
.band--deep .illus__img { border-color: transparent; }

/* Illustration posée entre une tête de section et le contenu qui suit :
   c'est la marge qui l'espace, pas un second padding de bande. */
.illus--large { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.illus--large .illus__img { aspect-ratio: 21 / 8; }

/* --- Apparition au défilement ------------------------------------------- */
/* Un seul mouvement, court, jamais rejoué. Neutralisé sans JavaScript et
   sous prefers-reduced-motion : le contenu est alors visible d'emblée. */

/* Le masquage dépend de `.reveal-anim`, une classe que seul le script capable
   de révéler les blocs sait poser. Si ce script manque, échoue, ou qu'un cache
   sert une version périmée, rien n'est masqué : le contenu reste visible.
   Ne jamais masquer par défaut ce qu'on compte révéler en JavaScript. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-anim .reveal { opacity: 0; transform: translateY(0.75rem); }
  .reveal-anim .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  }
}

@media (min-width: 46em) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .group-strip { grid-template-columns: repeat(2, 1fr); gap: 0 2.5rem; }
}

@media (min-width: 68em) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* --- Section : ce que chaque logiciel émet ------------------------------ */

.section-head { max-width: 52ch; }

/* Tête de section centrée, accordée au hero centré de l'accueil. */
.section-head--center {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.section-head--center .lede,
.section-head--center .muted { margin-inline: auto; max-width: 60ch; }
.section-head--center .hero__actions { justify-content: center; }
.section-head .h2 { margin-top: 0.9rem; }
.section-head p { margin-top: 1rem; }

.emits { margin-top: clamp(2.5rem, 5vw, 3.75rem); }

.emit {
  display: grid;
  gap: 1.5rem 2.5rem;
  grid-template-columns: 1fr;
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--paper-edge);
}

.emit:last-child { border-bottom: 1px solid var(--paper-edge); }

.emit__name {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.emit__name a { text-decoration: none; color: var(--ink); }
.emit__name a:hover { color: var(--marine-600); text-decoration: underline; }

.emit__body { margin-top: 0.85rem; max-width: 48ch; color: var(--ink-muted); }

.emit__list {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  font-size: var(--t-small);
  color: var(--ink-muted);
}

.emit__list li { display: flex; align-items: baseline; gap: 0.45rem; }
.emit__list li::before { content: '·'; color: var(--ink-muted); font-weight: 700; }

/* --- Sélecteur de situation --------------------------------------------- */
/* Quatre phrases telles qu'un dirigeant formule son problème, en regard du
   métier qui y répond. La page s'ouvre sur le client, pas sur l'organigramme.
   Ce n'est pas un menu décoratif : chaque case mène au bloc concerné. */

.situ {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  gap: 1px;
  background: var(--paper-edge);
}

.situ__cas {
  background: var(--sheet);
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s var(--ease);
}

.situ__cas:hover,
.situ__cas:focus-visible { background: var(--paper); }

/* La citation porte l'italique : c'est la voix du client, pas la nôtre. */
.situ__dit {
  font-size: 1.0625rem;
  line-height: 1.55;
  font-style: italic;
  color: var(--ink);
  max-width: 34ch;
}

.situ__vers {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-weight: 600;
  font-size: var(--t-small);
  font-stretch: 92%;
  color: var(--marine);
}

/* Filet fixe. Il a porté un instant un allongement au survol : c'est
   l'accessoire retiré avant livraison. Le changement de fond dit déjà que la
   case est cliquable, et un quatrième mouvement dispersé sur la page allait
   contre le principe du moment orchestré unique. */
.situ__vers::before {
  content: '';
  width: 1.75rem;
  height: 2px;
  background: var(--ambre);
}

@media (min-width: 44em) {
  .situ { grid-template-columns: 1fr 1fr; }
}

/* --- Métiers illustrés --------------------------------------------------- */
/* Alternance visuel / texte. Les quatre blocs n'ont pas le même poids
   commercial : l'audit, porte d'entrée la plus fréquente, passe en pleine
   largeur. Traiter à égalité ce qui ne l'est pas est le réflexe du gabarit. */

.metiers { margin-top: clamp(3rem, 6vw, 4.5rem); display: grid; gap: clamp(3rem, 6vw, 5rem); }

.metier {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  scroll-margin-top: 5rem;
}

.metier__visuel { margin: 0; }

.metier__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--paper-edge);
}

.metier__titre { margin-top: 0.7rem; }
.metier__corps { margin-top: 1rem; color: var(--ink-muted); max-width: 46ch; }

/* Les deux lignes de bilan. « Ce que ça ne couvre pas » est la ligne qu'aucun
   catalogue n'écrit : elle vaut plus que trois arguments de vente. */
.metier__bilan {
  margin-top: 1.5rem;
  display: grid;
  gap: 0;
  max-width: 46ch;
}

.metier__bilan > div {
  padding-block: 0.85rem;
  border-top: 1px solid var(--paper-edge);
}

.metier__bilan > div:last-child { border-bottom: 1px solid var(--paper-edge); }

.metier__bilan dt {
  font-size: var(--t-label);
  font-weight: 600;
  font-stretch: 75%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ambre-ink);
}

.metier__bilan dd { margin: 0.4rem 0 0; font-size: var(--t-small); color: var(--ink-muted); }

@media (min-width: 56em) {
  .metier { grid-template-columns: 1fr 1fr; }

  /* Le visuel passe à droite un bloc sur deux. L'ordre du balisage reste
     texte-puis-image dans tous les cas : au clavier et à la lecture d'écran,
     on entend le nom du métier avant sa photographie. Seul l'affichage
     alterne. */
  .metier__visuel { order: -1; }
  .metier--droite .metier__visuel { order: 1; }

  /* Sans photographie, le bloc reprend toute la largeur plutôt que de laisser
     une colonne vide. */
  .metier--sans-visuel { grid-template-columns: 1fr; }

  .metier--large { grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 2.75rem); }

  /* Pleine largeur pour le bloc, pas pour la ligne de texte : au-delà d'une
     soixantaine de signes, l'œil perd le début de la ligne suivante. */
  .metier--large .metier__corps { max-width: 62ch; }

  /* Les deux volets du bilan passent côte à côte : chacun porte alors ses deux
     filets, sinon le premier resterait ouvert en bas. */
  .metier--large .metier__bilan {
    max-width: none;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 5vw, 4rem);
  }

  .metier--large .metier__bilan > div { border-bottom: 1px solid var(--paper-edge); }

  .metier--large .metier__img { aspect-ratio: 21 / 8; }
}

/* --- Méthode en grille --------------------------------------------------- */
/* Même contenu que la colonne de six étapes, moitié moins haut. La méthode
   n'est pas l'endroit de l'audace : elle doit se lire vite. */

@media (min-width: 52em) {
  .steps--grille { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: clamp(2rem, 4vw, 3rem); }
  .steps--grille .step { border-top: 1px solid var(--paper-edge); }
  .steps--grille .step:last-child { border-bottom: 0; }
  .steps--grille .step:nth-child(n + 4) { border-bottom: 0; }
}

/* --- Livrables ----------------------------------------------------------- */
/* Remplace une grille de quatre cartes à pictogramme — le réflexe que le
   brief condamne. Des filets et de la typographie suffisent. */

.livrables {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  gap: 0 clamp(2rem, 5vw, 4rem);
}

.livrable { padding-block: 1.5rem; border-top: 1px solid var(--ink-muted); }

.livrable h3 {
  font-size: 1.125rem;
  font-weight: 600;
  font-stretch: 92%;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.livrable h3 span {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--ambre-ink);
}

.livrable p { margin-top: 0.6rem; color: var(--ink-muted); font-size: var(--t-small); }

@media (min-width: 48em) {
  .livrables { grid-template-columns: 1fr 1fr; }
}

/* --- Bande photographique pleine largeur --------------------------------- */
/* Une respiration entre deux sections denses, et la seule photographie de la
   page qui apporte une information qu'un dessin ne donnerait pas : du câblage
   réel. Elle touche les deux bords — c'est ce qui la distingue d'une vignette
   posée dans une grille.

   Aucun texte par-dessus : superposer du texte à une photographie, c'est
   accepter que son contraste dépende du cadrage. */
.bande-photo { display: block; margin: 0; }

.bande-photo img {
  display: block;
  width: 100%;
  height: clamp(12rem, 26vw, 20rem);
  object-fit: cover;
  /* La photo est bleue et blanche ; le léger assombrissement la raccorde au
     marine de la bande qui la précède au lieu de la faire flotter. */
  filter: saturate(0.85) brightness(0.92);
}

.bande-photo figcaption {
  padding: 0.7rem var(--gutter);
  background: var(--marine-950);
  color: var(--on-marine-muted);
  font-size: var(--t-label);
  font-weight: 600;
  font-stretch: 75%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Bandeau de pièce émise — écho réduit du cachet du hero. */
.strip {
  background: var(--marine);
  color: var(--on-marine);
  padding: 0.85rem 1rem;
  align-self: start;
}

/* Les trois lignes du bandeau s'empilent : sans `display: block`, des spans
   restent en ligne et la mise en page change avec la longueur du contenu. */
.strip__kind {
  display: block;
  font-size: var(--t-label);
  font-weight: 600;
  font-stretch: 75%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-marine-muted);
}

.strip__val { display: block; margin-top: 0.35rem; font-size: var(--t-small); }

.strip__mark {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.7rem;
  background: var(--ambre);
  color: var(--marine-950);
  padding: 0.3rem 0.6rem;
  font-size: 0.8125rem;
  font-weight: 600;
  font-stretch: 82%;
  letter-spacing: 0.05em;
}

/* --- Section : pourquoi Niamey ------------------------------------------ */

.proximity {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}

.facts { display: grid; gap: 0; }

.fact {
  padding-block: 1.15rem;
  border-top: 1px solid var(--marine-edge);
}

.fact:last-child { border-bottom: 1px solid var(--marine-edge); }
.fact dt { color: var(--on-marine-muted); font-size: var(--t-small); }
.fact dd { margin: 0.3rem 0 0; font-size: 1.0625rem; }

/* Même fiche, posée sur le papier. */
.facts--light .fact { border-top-color: var(--paper-edge); }
.facts--light .fact:last-child { border-bottom-color: var(--paper-edge); }
.facts--light .fact dt { color: var(--ink-muted); }

/* --- Vision ------------------------------------------------------------- */
/* Le seul endroit appuyé de la page. « Devenir l'éditeur de référence en
   Afrique » est une phrase que n'importe quel éditeur peut signer ; ce qui la
   rend vérifiable est le chiffre qui suit. Il est donc réglé DANS la phrase,
   au corps du display, et non dans une tuile de statistique — une ambition se
   lit, elle ne se met pas en tableau de bord. */

.vision { margin-top: clamp(3.5rem, 7vw, 5rem); padding-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--marine-edge); }

.vision__phrase {
  margin-top: 0.9rem;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  font-weight: 600;
  font-stretch: 92%;
  line-height: 1.12;
  letter-spacing: -0.015em;
  max-width: 22ch;
}

.vision__preuve { margin-top: 1.6rem; color: var(--on-marine-muted); max-width: 52ch; }

/* L'ambre porte le chiffre : c'est la seule donnée de la page, elle mérite la
   couleur d'accent. Sur marine, l'ambre passe à 7,8:1. */
.vision__chiffre { color: var(--ambre); font-weight: 600; white-space: nowrap; }

/* Empêche une coupure sur un mot composé en fin de ligne. */
.insecable { white-space: nowrap; }

@media (min-width: 60em) {
  .vision { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: end; }
  .vision__preuve { margin-top: 0; }
}

/* --- Disciplines de l'équipe -------------------------------------------- */
/* Pas de trombinoscope : sans photographies ni autorisations, un mur de
   portraits serait une invention. Et un acheteur ne demande pas des visages,
   il demande quelles compétences sont sous le même toit. */

.disciplines { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: grid; gap: 0 clamp(2rem, 5vw, 3.5rem); }

.discipline { padding-block: 1.5rem; border-top: 1px solid var(--paper-edge); }
.discipline h3 { font-size: 1.0625rem; font-weight: 600; font-stretch: 92%; }
.discipline p { margin-top: 0.6rem; color: var(--ink-muted); font-size: var(--t-small); }

@media (min-width: 46em) { .disciplines { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68em) { .disciplines { grid-template-columns: repeat(3, 1fr); } }

/* --- Registre des partenariats ------------------------------------------ */
/* Trois colonnes : le partenaire, ce qu'il fournit, d'où il vient. C'est la
   colonne « pays » qui fait le travail : « partenaires dans le monde entier »
   ne se vérifie pas, une liste de pays si. */

.partenaires { margin-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--paper-edge); }

.partenaire {
  display: grid;
  gap: 0.3rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--paper-edge);
}

.partenaire__nom { font-weight: 600; font-stretch: 92%; font-size: 1.0625rem; }
.partenaire__role { color: var(--ink-muted); font-size: var(--t-small); }

.partenaire__lieu {
  font-size: var(--t-label);
  font-weight: 600;
  font-stretch: 75%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ambre-ink);
}

@media (min-width: 48em) {
  .partenaire {
    grid-template-columns: 14rem 1fr 12rem;
    gap: 1.5rem;
    align-items: baseline;
  }

  .partenaire__lieu { text-align: right; }
}

/* --- Le Groupe ---------------------------------------------------------- */

.subs { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: 1px; background: var(--paper-edge); }

.sub { background: var(--paper); padding: clamp(1.5rem, 3vw, 2.25rem); }
.sub p { margin-top: 0.7rem; color: var(--ink-muted); max-width: 44ch; }
.sub a.sub__link { display: inline-block; margin-top: 1.1rem; font-weight: 600; font-size: var(--t-small); }

/* --- Formulaire --------------------------------------------------------- */

.form { display: grid; gap: 1.25rem; max-width: 38rem; }
.form__row { display: grid; gap: 0.4rem; }
.form label { font-weight: 600; font-size: var(--t-small); }
.form .hint { font-size: 0.8125rem; color: var(--ink-muted); font-weight: 400; }

.form input,
.form select,
.form textarea {
  font: inherit;
  font-size: var(--t-body);
  color: var(--ink);
  background: var(--sheet);
  border: 1px solid var(--paper-edge);
  border-bottom-width: 2px;
  padding: 0.75rem 0.85rem;
  width: 100%;
}

.form input:focus,
.form select:focus,
.form textarea:focus { border-bottom-color: var(--marine); }

.form textarea { min-height: 8rem; resize: vertical; }

/* Piège à robots — retiré du flux et de l'ordre de tabulation. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice { padding: 1rem 1.15rem; border-left: 4px solid; font-size: var(--t-small); }
.notice--ok { background: #EAF4EC; border-color: #1E6B36; color: #14502A; }
.notice--err { background: #FBEAEA; border-color: #A32020; color: #7C1717; }

.field-error { color: #A32020; font-size: 0.8125rem; font-weight: 500; }

/* --- Contenu éditorial (Actualités) ------------------------------------- */

.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 { font-size: var(--t-h2); font-weight: 600; font-stretch: 92%; line-height: 1.15; margin-top: 2.5rem; }
.prose h3 { font-size: var(--t-h3); font-weight: 600; margin-top: 2rem; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }
.prose li + li { margin-top: 0.4rem; }
.prose blockquote { border-left: 3px solid var(--marine); padding-left: 1.25rem; color: var(--ink-muted); }
.prose img { margin-block: 1.75rem; }

.posts { margin-top: 3rem; display: grid; gap: 0; }

.post-item { padding-block: 1.75rem; border-top: 1px solid var(--paper-edge); }
.post-item:last-child { border-bottom: 1px solid var(--paper-edge); }
.post-item h2 { font-size: var(--t-h3); font-weight: 600; }
.post-item h2 a { color: var(--ink); text-decoration: none; }
.post-item h2 a:hover { color: var(--marine-600); text-decoration: underline; }
.post-item p { margin-top: 0.6rem; color: var(--ink-muted); }

.pagination { margin-top: 2.5rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pagination .page-numbers {
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--paper-edge);
  text-decoration: none;
}
.pagination .current { background: var(--marine); color: var(--sheet); border-color: var(--marine); }

/* --- Pied de page ------------------------------------------------------- */

.site-footer {
  background: var(--marine-950);
  color: var(--on-marine);
  padding-block: clamp(3.5rem, 7vw, 5rem) 2rem;
  border-top: 3px solid var(--ambre);
}

.footer__grid { display: grid; gap: 2.75rem; grid-template-columns: 1fr; }

/* Colonne de marque : le logotype, la ligne qui dit ce qu'on fait, l'adresse. */
.footer__brand img { height: 2.25rem; width: auto; max-width: 14rem; }

.footer__baseline {
  margin-top: 1.1rem;
  font-size: var(--t-small);
  color: var(--on-marine-muted);
  max-width: 34ch;
  line-height: 1.6;
}

.footer__brand address {
  font-style: normal;
  margin-top: 1.25rem;
  font-size: var(--t-small);
  color: var(--on-marine-muted);
  display: grid;
  gap: 0.15rem;
}

.footer__col h2 { font-size: var(--t-label); font-weight: 600; font-stretch: 75%; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ambre); }
.footer__col ul { margin-top: 1.1rem; display: grid; gap: 0.6rem; }
.footer__col a { color: var(--on-marine); text-decoration: none; font-size: var(--t-small); }
.footer__col a:hover { color: var(--sheet); text-decoration: underline; text-underline-offset: 0.2em; }

/* Le numéro de téléphone est l'information la plus utile du pied de page. */
.footer__strong { font-size: 1.0625rem !important; font-weight: 600; }

.footer__cta { margin-top: 1.5rem; }
.footer__cta .btn { padding: 0.75rem 1.15rem; }

.footer__legal {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--marine-edge);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--on-marine-muted);
}

.footer__legal a { color: var(--on-marine-muted); }
.footer__legal a:hover { color: var(--sheet); }

/* --- Points de rupture -------------------------------------------------- */
/* Base = 360 px. Tout s'élargit ensuite. */

@media (min-width: 40em) {
  .subs { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__brand { grid-column: 1 / -1; }
}

@media (min-width: 60em) {
  .hero__grid { grid-template-columns: 1.15fr 0.85fr; align-items: start; }
  /* Intitulé à gauche, contenu à droite. Les bandeaux qui occupaient la
     seconde colonne ont été retirés ; sans cette bascule, le texte resterait
     collé à gauche et la moitié droite de la ligne resterait vide. */
  .emit { grid-template-columns: 15rem 1fr; align-items: start; }
  .emit__name { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
  .emit__body { margin-top: 0; }
  .emit__body + .emit__body { margin-top: 1rem; }
  .emit__list { margin-top: 1.1rem; }
  .proximity { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1.7fr 1fr 1.15fr 1.15fr; gap: 3rem 2.5rem; }
  .footer__brand { grid-column: auto; }
}

/* Navigation repliée sous 60em, uniquement si JavaScript est disponible.
   Sans JS, les liens restent affichés et empilés : le site reste navigable. */
@media (max-width: 59.99em) {
  .js .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 1px solid var(--marine-edge);
    color: var(--on-marine);
    padding: 0.55rem 0.85rem;
    font-size: var(--t-small);
    font-weight: 600;
    cursor: pointer;
  }

  .site-header__inner { flex-wrap: wrap; padding-block: 0.75rem; }

  .nav { flex-basis: 100%; }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: 0.5rem;
  }

  .nav__list li { border-top: 1px solid var(--marine-edge); }
  .nav__list a { display: block; padding: 0.85rem 0; border-bottom: 0; }

  .nav__list a:hover,
  .nav__list [aria-current='page'] { border-bottom: 0; color: var(--sheet); }

  .js .nav[hidden] { display: none; }
}

@media (min-width: 60em) {
  .nav[hidden] { display: block; }
}

/* --- Mouvement réduit --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- Impression --------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .hero__actions, .nav-toggle { display: none; }
  body { background: #fff; color: #000; }
  .band, .band--marine, .band--deep { background: #fff; color: #000; padding-block: 1rem; }
}