@charset "utf-8";

:root {
  color-scheme: light dark;

  --surface: #FFFFFF;
  --surface-2: #F7F6F3;
  --surface-dark: #2A2A2A;
  --ink: #16181A;
  --ink-muted: #4A4D52;
  --ink-faint: #63666B;
  --accent-text: #8A5200;
  --on-dark: #FFFFFF;
  --on-dark-muted: #CFCFCB;
  --on-accent: #1A1A1A;
  --line: #E6E4DF;
  --line-strong: #8A8A8A;
  --line-dark: #787878;
  --accent: #FCB040;
  --btn-bg: #2A2A2A;
  --btn-ink: #FFFFFF;
  --btn-dark-bg: #FCB040;
  --btn-dark-ink: #1A1A1A;
  --focus: #16181A;
  --focus-halo: #FFFFFF;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px;

  --page: 1140px;
  --page-wide: 1320px;
  --page-narrow: 760px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 58ch;
  --measure-lede: 46ch;
  --measure-h1: 22ch;

  --face: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --fs-micro: .75rem;
  --fs-small: .875rem;
  --fs-body: clamp(1rem, .97rem + .15vw, 1.0625rem);
  --fs-lede: clamp(1.125rem, 1.04rem + .4vw, 1.375rem);
  --fs-h3: clamp(1.1875rem, 1.1rem + .4vw, 1.4375rem);
  --fs-h2: clamp(1.625rem, 1.2rem + 1.7vw, 2.5rem);
  --fs-h1: clamp(2rem, 1.35rem + 2.9vw, 3.5rem);
  --fs-figure: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --lh-tight: 1.08;
  --lh-head: 1.18;
  --lh-lede: 1.45;
  --lh-body: 1.6;

  /* Disque des numeros. SEUL jeton nouveau qui bascule : voir l'en-tete. */
  --num-bg: #2A2A2A;
  --num-ink: #FFFFFF;

  /* Chronogramme. Le trait porte le sens, il prend --ink et non l'accent :
     #FCB040 sur blanc ne mesure que 1,84:1. */
  --chrono-trait: var(--ink);
  --chrono-fond: var(--surface);
  --chrono-axe: var(--line);
  --chrono-annee: var(--accent-text);
  --chrono-org: var(--ink);
  --chrono-role: var(--ink-muted);
  --chrono-wash: rgba(252, 176, 64, .16);


  /* Plaque des marques tierces. Les 27 fichiers sont opaques sur blanc :
     la plaque n'est pas un ornement, c'est ce qui les rend posables sur une
     surface sombre. Elle ne bascule donc PAS. */
  --plaque: #FFFFFF;
  --plaque-bord: #DCDAD5;

  /* Hauteur de la barre collante, ecrite UNE FOIS. Deux endroits en
     dependent (scroll-padding-top et :target) ; recopier la valeur, c'est
     garantir qu'un jour l'un des deux ne suivra plus la barre. Mesuree :
     115,3 px sous 860 px (deux rangees), 63,3 px au-dessus (une rangee). */
  --topbar-h: 116px;

  --r-sm: 3px;
  --r-md: 6px;
  --rule-w: 3px;
  --target-min: 44px;
  --dur: 160ms;
}

/* Mode sombre : seuls les jetons qui basculent sont redefinis. Un jeton
   pose sur une surface constante ne bascule jamais — c'est la regle qui
   ferme la classe de faute mesuree a 1,24:1 sur le bouton anthracite. */
@media (prefers-color-scheme: dark) {
  :root {
    --surface: #17181A;
    --surface-2: #202124;
    --ink: #E9EAE6;
    --ink-muted: #ADAFAB;
    --ink-faint: #92948F;
    --accent-text: #FCB040;
    --line: #2E3034;
    --line-strong: #6E7075;
    --btn-bg: #FCB040;
    --btn-ink: #1A1A1A;
    --focus: #FFFFFF;
    --focus-halo: #16181A;

    /* Mesure : #2A2A2A sur #17181A = 1,24:1, le disque disparait.
       #66696E = 5,51:1 pour le chiffre, 3,22:1 pour le disque. */
    --num-bg: #66696E;

    --chrono-wash: rgba(252, 176, 64, .13);
    --plaque-bord: #3A3C40;
  }
}

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

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

body {
  margin: 0;
  color: var(--ink);
  background: var(--surface);
  font-family: var(--face);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-underline-offset: .15em;
}

h1, h2, h3 { margin: 0; font-weight: 700; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -.015em; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-head); letter-spacing: -.01em; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-head); }
p, ul, ol, dl, table, figure { margin: 0; }
p, li { hyphens: auto; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
table { border-collapse: collapse; }
/* La barre collante recouvrait la cible de toute ancre : 32 px de marge
   contre 116 px de barre. Le lecteur qui sautait depuis « Sur cette page »
   arrivait sur un titre decapite, sur-titre entierement masque.
   scroll-padding-top sur le conteneur de defilement couvre EN PLUS la
   navigation au clavier et la restauration de position au rechargement, ce
   que scroll-margin-top sur la cible ne fait pas. */
html { scroll-padding-top: calc(var(--topbar-h) + var(--sp-4)); }
:target { scroll-margin-top: calc(var(--topbar-h) + var(--sp-4)); }

a { color: var(--accent-text); text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:active { text-decoration-thickness: 3px; }

/* Anneau DOUBLE : l'anneau porte --focus, et le halo --focus-halo remplit
   exactement le retrait de 2 px. Sur les trois surfaces, en clair comme en
   sombre, l'un des deux atteint toujours 3:1 — c'est ce que recalcule
   tools/check_contrast.py, anneau par anneau. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-halo);
  border-radius: var(--r-sm);
}

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  /* 60 et non 9 : la barre est devenue collante avec z-index 50, et les
     deux sont enfants directs de <body>, donc dans le meme contexte
     d'empilement. A 9, le lien d'evitement recevait bien le focus et
     n'affichait pas un pixel — il etait peint DESSOUS. Echec de WCAG 2.2
     SC 2.4.11 (focus masque) sur les 25 pages qui le portent. */
  position: absolute; left: -9999px; top: 0; z-index: 60;
  padding: var(--sp-3) var(--sp-4); font-weight: 700; text-decoration: none;
  color: var(--on-dark); background: var(--surface-dark);
}
.skip:focus { left: var(--sp-2); top: var(--sp-2); }

/* ----------------------------------------------------------- pistes --- */
.shell {
  max-width: var(--page); margin: 0 auto;
  padding-left: var(--gutter); padding-right: var(--gutter);
}
.shell--wide { max-width: var(--page-wide); }
.shell--narrow { max-width: var(--page-narrow); }
.measure { max-width: var(--measure); }
.measure-lede { max-width: var(--measure-lede); }

/* ------------------------------------------------- barre de service --- */
/* COLLANTE, a toutes les largeurs — demande du commanditaire.
   Contrepartie assumee et bornee : la barre occupait 96 px sur deux rangees.
   Elle descend a 62 px sur une rangee au-dessus de 860 px, et a 92 px en
   dessous, ou la rangee de service DEFILE horizontalement au lieu de se
   replier. Sur un ecran de 667 px, c'est 14 % — le prix de l'avoir toujours
   sous la main. */
.topbar {
  border-top: var(--rule-w) solid var(--accent);
  position: sticky; top: 0; z-index: 50;
  background: var(--surface-dark);
}
.topbar__in {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2) var(--sp-6);
  padding-top: var(--sp-2); padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line-dark);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
/* 44 px : le commanditaire demande « plus de volume ». La source
   logo-header.png fait 599x148, le fichier publie 356x88 — deux fois la
   hauteur d'affichage, donc net a dPR 2, sans aucun agrandissement. */
.brand img { height: 44px; width: auto; }
.brand__big { height: 44px; width: auto; }
.svc { order: 3; flex: 1 0 100%; min-width: 0; }
.svc ul {
  display: flex; gap: var(--sp-1) var(--sp-4);
  overflow-x: auto; overscroll-behavior-x: contain;
}
.svc li { flex: 0 0 auto; }
@media (min-width: 860px) {
  :root { --topbar-h: 64px; }
  .svc { order: 0; flex: 1 1 auto; }
  .svc ul { overflow: visible; justify-content: flex-end; }
  .lang { margin-left: 0; }
}
.svc a {
  display: inline-flex; align-items: center; min-height: var(--target-min);
  padding: 0 var(--sp-1);
  font-size: var(--fs-small); font-weight: 600;
  text-decoration: none; border-bottom: 2px solid transparent;
}
.svc a:hover { border-bottom-color: var(--line-dark); }
.svc a[aria-current="page"] {
  font-weight: 700; border-bottom-color: var(--accent);
}
.lang {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--target-min);
  padding: 0 var(--sp-3);
  font-size: var(--fs-small); font-weight: 600;
  border: 1px solid var(--line-dark); border-radius: var(--r-sm);
  text-decoration: none;
}
.lang:hover { border-color: var(--on-dark); }

/* --------------------------------------------------- pave anthracite --- */
.band--dark { color: var(--on-dark); background: var(--surface-dark); }
.band--dark a { color: var(--on-dark); }
.band--dark .lede, .band--dark .meta { color: var(--on-dark-muted); }
.band--dark .eyebrow { color: var(--on-dark-muted); }

.banner { padding-top: var(--sp-16); padding-bottom: var(--sp-12); }
.banner h1 { max-width: var(--measure-h1); }
.banner--tall { padding-top: var(--sp-24); }
.banner__base {
  margin-top: var(--sp-4); font-size: var(--fs-lede); font-weight: 600;
  max-width: var(--measure-lede);
}
.banner .lede { margin-top: var(--sp-6); }

.eyebrow {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: var(--sp-3);
}
.lede {
  font-size: var(--fs-lede); line-height: var(--lh-lede);
  max-width: var(--measure-lede); color: var(--ink-muted);
}
.meta { font-size: var(--fs-small); color: var(--ink-faint); }
.note { font-size: var(--fs-micro); line-height: 1.5; color: var(--ink-faint); }
.mini {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* ----------------------------------------- le rail des quatre portes --- */
.rail { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
.rail--full { padding-top: var(--sp-16); padding-bottom: var(--sp-12); }
.rail__head { margin-bottom: var(--sp-8); }
.rail__head .lede { margin-top: var(--sp-4); }
.rail__list { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, 1fr); }
.port {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface-2);
  border-top: 5px solid var(--line);
  transition: border-color var(--dur) ease-out;
}
.port:hover { border-top-color: var(--line-strong); }

.port__a {
  flex: 1 1 auto; display: block; text-decoration: none;
  color: var(--ink); background: var(--surface-2);
  padding: var(--sp-4) var(--sp-4) var(--sp-6);
  transition: background-color var(--dur) ease-out;
}
.rail--full .port__a { flex: 0 0 auto; padding-bottom: var(--sp-4); }
.port__a:hover { background: var(--surface); }
.port__aud {
  display: block; font-size: var(--fs-micro); font-weight: 700;
  line-height: 1.4; min-height: 2.8em;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
}
.port__ti {
  display: block; margin-top: var(--sp-2);
  font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-head);
  text-wrap: balance;
}
.port--featured, .port--featured:hover { border-top-color: var(--accent); }
.port--current, .port--current:hover {
  background: var(--surface-dark); border-top-color: var(--accent);
}
.port--current > .port__a {
  color: var(--on-dark); background: var(--surface-dark);
}
.port--current > .port__a:hover { background: var(--surface-dark); }
.port--current .port__aud { color: var(--on-dark-muted); }
.port--current .port__ti { font-weight: 700; }
.port__body { flex: 1 1 auto; padding: 0 var(--sp-4) var(--sp-6); }
.port__body > p { max-width: var(--measure); font-size: var(--fs-small); }
.port__recv { margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--ink-muted); }
.port__recv li { padding-left: var(--sp-4); position: relative; }
.port__recv li::before {
  content: ""; position: absolute; left: 0; top: .7em;
  width: 8px; height: 2px; background: var(--line-strong);
}

/* ----------------------------------------------- corps et sommaires --- */
.flow { padding-top: var(--sp-16); padding-bottom: var(--sp-16); }
.layout__main > .sec + .sec { margin-top: var(--sp-24); }
.sec-head { margin-bottom: var(--sp-8); }
.sec-head .lede { margin-top: var(--sp-4); }
.sec:target { border-top: var(--rule-w) solid var(--accent); padding-top: var(--sp-6); }
.dom:target { border-top-color: var(--accent); }

.toc { margin-bottom: var(--sp-12); }
.toc__t {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
  padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line);
}
.toc li { border-bottom: 1px solid var(--line); }
.toc a {
  display: flex; align-items: center; min-height: var(--target-min);
  font-size: var(--fs-small); font-weight: 600; text-decoration: none;
}
.toc a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* ------------------------------------------------------- composants --- */
.grid { display: grid; gap: var(--sp-4); }
.grid--6 { grid-template-columns: repeat(2, 1fr); }
.card {
  color: var(--ink); background: var(--surface-2);
  border-top: var(--rule-w) solid var(--line);
  padding: var(--sp-6) var(--sp-4);
}
.card h2, .card h3 { font-size: var(--fs-h3); text-wrap: balance; }
.brief h2, .brief h3 { font-size: var(--fs-h3); }
.dom h2 { font-size: var(--fs-h3); }
.card p { margin-top: var(--sp-3); }
.card p:first-of-type { margin-top: var(--sp-4); }

.dom { border-top: var(--rule-w) solid var(--line); padding-top: var(--sp-4); }
.dom__num {
  font-size: var(--fs-h2); font-weight: 700; color: var(--ink-faint);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.dom h2, .dom h3 { margin-top: var(--sp-2); }
.dom p { margin-top: var(--sp-3); max-width: var(--measure); }
.dom__name { margin-top: var(--sp-2); font-size: var(--fs-h3); font-weight: 700; }
.sec > .dom + .dom { margin-top: var(--sp-12); }
.bullets { margin-top: var(--sp-2); }
.bullets li {
  padding-left: var(--sp-4); position: relative;
  font-size: var(--fs-small); color: var(--ink-muted);
}
.bullets li::before {
  content: ""; position: absolute; left: 0; top: .7em;
  width: 8px; height: 2px; background: var(--line-strong);
}
.more { margin-top: var(--sp-4); font-size: var(--fs-small); font-weight: 600; }

.brief { border-left: var(--rule-w) solid var(--line-strong); padding-left: var(--sp-4); }
.brief + .brief { margin-top: var(--sp-8); }
.brief__meta {
  margin-top: var(--sp-1); font-size: var(--fs-small); color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.brief__block { margin-top: var(--sp-4); }
.brief__block p { margin-top: var(--sp-1); max-width: var(--measure); }

.figures {
  display: grid; gap: var(--sp-6); grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line); padding-top: var(--sp-6);
}
.figure__v {
  display: block; font-size: var(--fs-figure); font-weight: 700;
  line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.figure__l {
  display: block; margin-top: var(--sp-2);
  font-size: var(--fs-small); color: var(--ink-muted);
}

.pull {
  border-left: var(--rule-w) solid var(--accent); padding-left: var(--sp-6);
  margin: 0;
}
.pull p { font-size: var(--fs-lede); line-height: var(--lh-lede); max-width: var(--measure); }
.pull p + p { margin-top: var(--sp-4); }

.steps { counter-reset: none; }
.step { position: relative; padding-left: var(--sp-16); padding-bottom: var(--sp-8); }
.step:last-child { padding-bottom: 0; }
.step::before {
  content: ""; position: absolute; left: 16px; top: 42px; bottom: 0;
  width: 1px; background: var(--line);
}
.step:last-child::before { display: none; }
/* Numeral BLANC sur disque sombre — demande du commanditaire, et mesure :
   14,35:1 en clair, 5,51:1 en sombre. Aucune bordure : le disque est plein,
   c'est lui le repere. */
.step__n {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  font-size: var(--fs-small); font-weight: 700;
  font-variant-numeric: tabular-nums;
  border-radius: 50%;
  color: var(--num-ink); background: var(--num-bg);
}
.step p { margin-top: var(--sp-2); max-width: var(--measure); }
.step__out { margin-top: var(--sp-3); font-size: var(--fs-small); }
.step__out b { font-weight: 700; }

.tag {
  display: inline-block; padding: 2px var(--sp-2);
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; border-radius: var(--r-sm);
  color: var(--on-accent); background: var(--accent);
}
.circle__role { margin-top: var(--sp-3); font-weight: 700; }

.tablewrap { overflow-x: auto; }
.tbl { width: 100%; font-size: var(--fs-small); min-width: 34rem; }
.tbl caption {
  text-align: left; font-size: var(--fs-h3); font-weight: 700;
  line-height: var(--lh-head); padding-bottom: var(--sp-4);
}
.tbl th, .tbl td {
  text-align: left; vertical-align: top;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
}
.tbl thead th {
  font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); border-bottom: 2px solid var(--line-strong);
}
.tbl tbody th { font-weight: 700; }
.tbl td { color: var(--ink-muted); font-variant-numeric: tabular-nums; }

.tl li { position: relative; padding: var(--sp-3) 0 var(--sp-3) var(--sp-16); }
.tl li + li { border-top: 1px solid var(--line); }
.tl__y {
  position: absolute; left: 0; top: var(--sp-3);
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.tl__o { font-weight: 700; }
.tl__r { display: block; font-size: var(--fs-small); color: var(--ink-muted); }

.lines li { padding-left: var(--sp-4); position: relative; }
.lines li + li { margin-top: var(--sp-2); }
.lines li::before {
  content: ""; position: absolute; left: 0; top: .7em;
  width: 8px; height: 2px; background: var(--line-strong);
}
.prose p + p { margin-top: var(--sp-4); }
.prose p { max-width: var(--measure); }

.portrait { max-width: 280px; }
.portrait--hero { max-width: 320px; }
.portrait img { border-top: var(--rule-w) solid var(--accent); }

/* ----------------------------------------------------------- boutons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--sp-6);
  font: inherit; font-weight: 700; text-decoration: none;
  border: 2px solid transparent; border-radius: var(--r-sm);
  transition: background-color var(--dur) ease-out, border-color var(--dur) ease-out,
              transform var(--dur) ease-out;
}
.btn--primary { color: var(--btn-ink); background: var(--btn-bg); }
.btn--primary:hover { border-color: var(--accent); }
.btn:active { transform: translate(0, 1px); }
.btn--ghost {
  color: var(--ink); background: transparent; border-color: var(--line-strong);
}
.btn--ghost:hover { background: var(--surface-2); }
.band--dark .btn--primary { color: var(--btn-dark-ink); background: var(--btn-dark-bg); }
.band--dark .btn--primary:hover { border-color: var(--on-dark); }
.band--dark .btn--ghost { color: var(--on-dark); border-color: var(--line-dark); }
.band--dark .btn--ghost:hover { background: transparent; border-color: var(--on-dark); }
.btn--wide { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }

.cta { padding-top: var(--sp-16); padding-bottom: var(--sp-16); }
.cta .lede { margin-top: var(--sp-4); }
.cta__mail { margin-top: var(--sp-4); font-size: var(--fs-small); }

/* ------------------------------------------------------------- pied --- */
.site-footer {
  color: var(--ink); background: var(--surface-2);
  border-top: var(--rule-w) solid var(--accent);
  padding-top: var(--sp-12); padding-bottom: var(--sp-12);
}
.site-footer nav ul { display: grid; gap: var(--sp-2) var(--sp-6); grid-template-columns: repeat(2, 1fr); }
.site-footer nav a {
  display: inline-flex; align-items: center; min-height: var(--target-min);
  font-size: var(--fs-small); font-weight: 600; text-decoration: none;
  color: var(--ink);
}
.site-footer nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.footer__end { margin-top: var(--sp-8); border-top: 1px solid var(--line); padding-top: var(--sp-6); }
.footer__tag { font-size: var(--fs-small); font-weight: 600; }
.footer__end p + p { margin-top: var(--sp-2); }

/* ---------------------------------------------------------- rythmes --- */
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mt-12 { margin-top: var(--sp-12); }

/* --------------------------------------------- sous 600 px : respirer --- */
@media (max-width: 599px) {
  .banner, .banner--tall { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
  .flow { padding-top: var(--sp-12); padding-bottom: var(--sp-12); }
  .layout__main > .sec + .sec { margin-top: var(--sp-16); }
  .cta { padding-top: var(--sp-12); padding-bottom: var(--sp-12); }
  .rail--full { padding-top: var(--sp-12); padding-bottom: var(--sp-8); }
}

/* ------------------------------------------------- 600 px et au-dela --- */
@media (min-width: 600px) {
  .btn--wide { width: auto; min-width: 20rem; }
  .figures { grid-template-columns: repeat(4, 1fr); }
  .figure + .figure { border-left: 1px solid var(--line); padding-left: var(--sp-6); }
  .site-footer nav ul { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------- 900 px et au-dela --- */
@media (min-width: 900px) {
  .svc { order: 0; flex: 1 1 auto; }
  .rail__list { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
  .port__a { padding: var(--sp-6) var(--sp-4); }
  .rail--full .port__a { padding-bottom: var(--sp-4); }
  .port__body { padding: 0 var(--sp-4) var(--sp-8); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--6 { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
  .split { display: grid; grid-template-columns: 1fr 320px; gap: var(--sp-12); align-items: start; }
  .tbl { min-width: 0; }
  .site-footer nav ul { grid-template-columns: repeat(5, 1fr); }
  .banner h1 { font-size: var(--fs-h1); }
}

/* ------------------------------------------------ 1100 px et au-dela --- */
@media (min-width: 1100px) {
  .layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-12); align-items: start; }
  .toc { position: sticky; top: var(--sp-6); margin-bottom: 0; }
  .layout--plain { display: block; }
}

/* --------------------------------------------- mouvement, si voulu --- */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0ms !important; }
}

/* ======================================================================
   AJOUTS DU 29/09/2026 — icones, schemas, marques, temoignages
   ====================================================================== */

/* ------------------------------------------------------------ icones --- */
/* Le trait prend currentColor : l'icone suit la couleur du texte qui la
   porte, y compris sur fond sombre, sans qu'aucune regle soit ecrite deux
   fois. Toutes sont aria-hidden et doublent un intitule ecrit. */
.ico { display: block; flex: 0 0 auto; }
/* PAS --accent : #FCB040 sur --surface-2 (#F7F6F3) ne mesure que 1,79:1.
   --accent-text est le jeton fait pour ca — et il bascule en #FCB040 en
   mode sombre, ou la surface, elle, est devenue sombre. */
.ico--port { width: 26px; height: 26px; color: var(--accent-text); }
.ico--dom { width: 26px; height: 26px; color: var(--ink-faint); }
.ico--step { width: 22px; height: 22px; color: var(--ink-faint);
             position: absolute; left: 6px; top: 44px; }
.ico--in { width: 19px; height: 19px; color: var(--ink-faint);
           position: absolute; left: 0; top: .2em; }
/* Le globe prend currentColor, donc la couleur du bouton qui le porte : pas
   une regle de couleur de plus, et il suit la barre en theme clair comme en
   theme sombre. */
/* Le drapeau porte ses propres couleurs : il ne suit PAS currentColor,
   contrairement au reste du jeu. D'ou le coin arrondi et le liset, qui le
   detachent de la barre anthracite sans lui ajouter de bordure coloree. */
.drapeau { display: block; flex: 0 0 auto; border-radius: 1.5px; }

.port__ico { display: block; margin-bottom: var(--sp-3); }
/* Seulement sur la porte COURANTE, dont le fond passe a --surface-dark.
   La regle de survol posait du blanc sur --surface, qui est blanc en mode
   clair : l'icone disparaissait au passage de la souris. */
.port--current .ico--port { color: var(--on-dark); }

.dom__head { display: flex; align-items: center; gap: var(--sp-3); }
.dom__head .dom__num { line-height: 1; }

.lines--ico li { padding-left: var(--sp-8); position: relative; }
.lines--ico li::before { display: none; }

/* Les cinq solutions Oracle, nommees. Des etiquettes, pas des liens : rien
   ne se passe au clic, donc rien ne doit ressembler a un bouton. */
.pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.pills li {
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .01em;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--line-strong); border-radius: 100px;
  color: var(--ink-muted);
}


/* ------------------------------------------------------ chronogramme --- */
/* Deux objets pour une meme matiere, et un seul est montre a la fois :
   au-dessus de 860 px la COURBE, en dessous la LISTE. display:none retire
   aussi de l'arbre d'accessibilite, donc le lecteur d'ecran n'entend jamais
   la chronologie deux fois. */
.chrono__f { margin: 0 0 var(--sp-8); display: none; }
.chrono { display: block; width: 100%; height: auto; }
@media (min-width: 860px) {
  .chrono__f { display: block; }
  /* PAS display:none — cela retire aussi du lecteur d'ecran, et les huit
     jalons n'existaient alors plus que dans le <desc> du dessin, qui les
     DECRIT sans les enumerer. Un administrateur lisant au lecteur d'ecran
     sur un poste de bureau — exactement le public vise — perdait les huit
     dates. Masquee visuellement, donc, jamais semantiquement. */
  .tl {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .tl li { border: 0; padding: 0; }
}

/* --------------------------------------------------------- temoignages --- */
.temoins { display: grid; gap: var(--sp-6); }
@media (min-width: 860px) { .temoins { grid-template-columns: repeat(2, 1fr); } }
.temoin {
  margin: 0; padding: var(--sp-6) var(--sp-4);
  background: var(--surface-2);
  border-top: var(--rule-w) solid var(--line);
}
/* Guillemets poses par le STYLE et non ecrits dans la matiere : le
   texte d'un temoignage ne doit pas gagner de caracteres en passant par
   nous. Et ils suivent la LANGUE de la citation, pas celle de la page : un
   temoignage anglais sur le site francais prend les guillemets anglais. */
.temoin__q {
  margin: 0; font-style: italic;
  quotes: "« " " »" "“" "”";
}
.temoin__q[lang="en"] { quotes: "“" "”" "‘" "’"; }
.temoin__q p:first-child::before { content: open-quote; }
.temoin__q p:last-child::after { content: close-quote; }
/* La signature reste droite : l'italique marque la CITATION, pas son auteur. */
.temoin__c { font-style: normal; }
.temoin__q p { margin-top: 0; max-width: var(--measure); }
.temoin__q p + p { margin-top: var(--sp-3); }
.temoin__c { margin-top: var(--sp-4); padding-top: var(--sp-3);
             border-top: 1px solid var(--line); }
.temoin__c b { font-weight: 700; }
.temoin__f, .temoin__m { display: block; font-size: var(--fs-small); }
.temoin__f { color: var(--ink-muted); }
.temoin__m { color: var(--ink-faint); font-size: var(--fs-micro);
             margin-top: var(--sp-1); }

.briefs > .brief + .brief { margin-top: var(--sp-8); }

/* ---------------------------------------------------- mur de marques --- */
/* Le NOM reste ecrit sous chaque marque. Un logo ne se lit pas a la
   synthese vocale et ne se trouve pas au Ctrl+F : l'image est en alt="",
   c'est le texte qui porte l'information. Une marque qui ne charge pas
   n'emporte donc rien. */
.murs { display: grid; gap: var(--sp-12); }
.mur h3 {
  font-size: var(--fs-small); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted);
  padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line);
}
.mur__l {
  display: grid; gap: var(--sp-4); margin-top: var(--sp-6);
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}
.mur__i { display: flex; flex-direction: column; align-items: center;
          gap: var(--sp-2); }
/* Plaque blanche assumee : les 27 fichiers sont opaques sur blanc (mesure :
   mode RGB, pixel de coin #FFFFFF, zero couche alpha). Sans plaque, ils
   poseraient 27 rectangles blancs sur la page et deviendraient illisibles
   en theme sombre. */
.mur__i picture {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 72px; padding: var(--sp-3);
  background: var(--plaque); border: 1px solid var(--plaque-bord);
  border-radius: var(--r-sm);
}
.mur__i img { max-width: 100%; max-height: 100%; width: auto; height: auto;
              object-fit: contain; }
.mur__n { font-size: var(--fs-micro); color: var(--ink-muted);
          text-align: center; line-height: 1.35; }

/* Marque tierce POSEE DANS LE CORPS, et non dans le mur. Meme plaque que
   le mur : les 27 fichiers sont opaques sur blanc, la plaque n'est pas un
   ornement mais ce qui les rend posables sur une surface sombre.
   24 px de haut : la source Oracle ne fait que 32 px, on ne l'agrandit pas. */
.marque-inline { margin-top: var(--sp-6); }
.marque-inline picture {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--sp-2) var(--sp-3);
  background: var(--plaque); border: 1px solid var(--plaque-bord);
  border-radius: var(--r-sm);
}
.marque-inline img { display: block; width: auto; height: 24px; }

/* -------------------------------------------- photographie d'accueil --- */
/* Deux colonnes seulement au-dessus de 900 px. En dessous, la photographie
   passe SOUS le texte : elle ne doit jamais repousser les quatre portes
   hors de l'ecran, c'est la these meme de cette direction. */
.banner--photo .shell { display: grid; gap: var(--sp-8); }
.banner--photo .banner__txt { min-width: 0; }
/* SOUS 900 px, PAS UN OCTET. display:none sur un <img> ne l'empeche pas
   d'etre telecharge — tous les navigateurs majeurs vont le chercher quand
   meme. Une image de FOND, elle, n'est demandee que si la regle qui la
   porte s'applique. C'est la seule technique qui tienne la promesse.
   38,4 Ko epargnes la ou la bande passante coute le plus cher, et les
   quatre portes reviennent pres du pli. */
.portrait--accueil { display: none; }
@media (min-width: 900px) {
  .banner--photo .shell {
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: center; gap: var(--sp-16);
  }
  .portrait--accueil {
    display: block; width: 360px; aspect-ratio: 3 / 4;
    background-position: center; background-size: cover;
    background-repeat: no-repeat;
    /* La premiere ligne sert les navigateurs qui ignorent image-set ; la
       seconde la remplace partout ailleurs. Une seule des deux est
       retenue par la cascade, donc un seul fichier est demande. */
    background-image: url("/assets/profil-entreprise.jpg");
    background-image: image-set(
      url("/assets/profil-entreprise.webp") type("image/webp"),
      url("/assets/profil-entreprise.jpg") type("image/jpeg"));
  }
}

/* ------------------------------------- marque d'une fiche de mission --- */
/* Meme plaque blanche que le mur : les fichiers sont opaques sur blanc, la
   plaque n'est pas un ornement mais ce qui les rend posables. */
.brief__marque {
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-3);
  min-width: 108px; height: 56px; padding: var(--sp-2) var(--sp-3);
  background: var(--plaque); border: 1px solid var(--plaque-bord);
  border-radius: var(--r-sm);
}
.brief__marque img { max-width: 132px; max-height: 40px; width: auto;
                     height: auto; object-fit: contain; }

/* ------------------------------------------------------------ insignes --- */
.insignes { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.insignes picture {
  display: inline-flex; padding: var(--sp-2);
  background: var(--plaque); border: 1px solid var(--plaque-bord);
  border-radius: var(--r-sm);
}
.insigne { display: block; width: 48px; height: auto; }