/* ==========================================================================
   OKETO Technologies — feuille de style unique
   Design sobre : grille nette, filets 1px, aplats, aucune photo.
   Sommaire : 1 Tokens · 2 Base · 3 Layout · 4 Header · 5 Composants
              6 Sections · 7 Footer · 8 Responsive · 9 Motion
   ========================================================================== */

/* 1 ── Tokens ============================================================= */

:root {
  /* Couleurs — thème clair */
  --bg:          #ffffff;
  --bg-soft:     #f5f6f9;
  --bg-ink:      #0c2650;
  --surface:     #ffffff;

  --ink:         #101a2b;
  --ink-2:       #56616f;
  --ink-3:       #8a94a1;
  --ink-invert:  #ffffff;

  --line:        #e3e6ec;
  --line-strong: #d1d7e0;

  --brand:       #14448c;
  --brand-hover: #0e3269;
  --brand-soft:  #eaf0f9;
  --accent:      #8c4e2c;

  /* Cuivre d'interface : filets, soulignements. S'éclaircit en thème sombre
     pour rester lisible sur le fond marron. */
  --copper-1:    #7b4225;
  --copper-2:    #cc8b67;

  /* Le logo lui-même. Cuivre le jour, blanc la nuit — comme les déclinaisons
     du kit. Séparé du cuivre d'interface : ce sont deux usages distincts. */
  --logo-1:      #7b4225;
  --logo-2:      #cc8b67;
  --logo-ink:    #14448c;

  /* Pastilles des logos éditeurs — haut de page et bandeau. Elles restent
     claires dans les deux thèmes : les logos y gardent leurs couleurs, donc
     leur lisibilité, et les badges multicolores restent intacts. */
  --satellite-bg:   #ffffff;
  --satellite-line: var(--line);

  /* Typographie — Source Sans 3 est la parente libre de la police du logo. */
  --font-sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;

  /* Rythme */
  --container: 1180px;
  --gutter: 24px;
  --radius: 10px;
  --radius-sm: 7px;

  /* Élévation — volontairement discrète */
  --shadow: 0 1px 2px rgba(13, 21, 34, .04), 0 8px 24px rgba(13, 21, 34, .05);

  --header-h: 80px;
}

/* Le clair est le thème par défaut, même quand le système du visiteur est réglé
   en sombre : le sombre ne s'applique que sur son choix (bouton du header,
   mémorisé par oketo.js). Pas de `prefers-color-scheme` ici, à dessein. */
:root[data-theme="dark"] {
  /* Gris marron : la teinte du cuivre du logo, désaturée et assombrie. */
  --bg:          #191512;
  --bg-soft:     #211b16;
  --bg-ink:      #2a211a;
  --surface:     #221c17;

  --ink:         #ffffff;
  --ink-2:       #c8bcb2;
  --ink-3:       #9a8d82;

  --line:        #332b24;
  --line-strong: #45392f;

  /* Sur ce fond, un bleu jurerait : l'action passe au cuivre clair. */
  --brand:       #dba484;
  --brand-hover: #eabd9f;
  --brand-soft:  #241b15;
  --accent:      #d9a17e;

  --copper-1:    #b87a54;
  --copper-2:    #e0ac8a;

  --logo-1:      #ffffff;
  --logo-2:      #ffffff;
  --logo-ink:    #ffffff;

  /* Un blanc légèrement chaud, pour ne pas trancher froid sur le marron. */
  --satellite-bg:   #f7f3f0;
  --satellite-line: transparent;

  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
}

/* 2 ── Base ============================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17.5px;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Source Sans 3 a une hauteur d'x plus généreuse qu'Inter : le tracing
   négatif reste léger, sans quoi les capitales se referment. */
h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: clamp(2.2rem, 1.35rem + 3.3vw, 3.75rem); font-weight: 700; letter-spacing: -0.021em; line-height: 1.08; }
h2 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.45rem); font-weight: 700; letter-spacing: -0.017em; }
h3 { font-size: 1.18rem; letter-spacing: -0.008em; }
h4 { font-size: 1rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* Un exposant (« 1er septembre ») ne doit pas écarter la ligne qui le porte :
   sans `line-height: 0`, il agrandit la boîte de ligne et le paragraphe
   devient irrégulier. */
sup { position: relative; top: -.45em; font-size: .7em; line-height: 0; vertical-align: baseline; }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); }

img, svg { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; }

::selection { background: var(--brand); color: #fff; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--ink);
  color: var(--ink-invert);
  border-radius: var(--radius-sm);
  font-size: .9rem;
}
.skip-link:focus { left: 12px; color: var(--ink-invert); }

/* 3 ── Layout ============================================================ */

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

.section { padding-block: clamp(64px, 8vw, 112px); }
.section--soft { background: var(--bg-soft); }
.section--tight { padding-block: clamp(48px, 5vw, 72px); }
.section--line { border-top: 1px solid var(--line); }

.lead {
  font-size: clamp(1.05rem, .98rem + .3vw, 1.2rem);
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 62ch;
}

.muted { color: var(--ink-2); }
.center { text-align: center; }
.center .lead { margin-inline: auto; }

.stack > * + * { margin-top: 16px; }

/* Intitulé de section : filet + libellé mono */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* Le filet reprend le dégradé cuivre du symbole. */
.eyebrow::before {
  content: "";
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--copper-1), var(--copper-2));
}
.center .eyebrow { justify-content: center; }

.section-head { max-width: 68ch; margin-bottom: clamp(36px, 4vw, 56px); }
.section-head h2 + .lead { margin-top: 18px; }
.center .section-head { margin-inline: auto; }

/* 4 ── Header ============================================================ */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, background .25s;
}
.header.is-stuck {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--bg) 96%, transparent);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--header-h);
}

/* Le logo reprend la construction de la marque : symbole, puis OKETO et
   Technologies calés sur la même largeur optique. */
.logo { display: flex; align-items: center; gap: 16px; color: var(--logo-ink); flex-shrink: 0; }
.logo:hover { color: var(--logo-ink); }
.logo__mark { width: 63px; height: 48px; flex-shrink: 0; }
.logo__type { display: flex; flex-direction: column; line-height: 1; }
.logo__name {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.logo__sub {
  font-size: 1.14rem;
  font-weight: 400;
  letter-spacing: .012em;
  margin-top: 3px;
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav__link {
  position: relative;
  display: block;
  padding: 8px 13px;
  border-radius: var(--radius-sm);
  font-size: .93rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: color .18s, background .18s;
}
.nav__link:hover { color: var(--ink); background: var(--bg-soft); }
.nav__link[aria-current="page"] { color: var(--ink); font-weight: 550; }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 2px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--copper-1), var(--copper-2));
}

.header__cta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}
.icon-btn:hover { color: var(--ink); border-color: var(--line-strong); background: var(--bg-soft); }
.icon-btn svg { width: 17px; height: 17px; }

.theme-btn .icon-moon { display: none; }
:root[data-theme="dark"] .theme-btn .icon-moon { display: block; }
:root[data-theme="dark"] .theme-btn .icon-sun  { display: none; }

.burger { display: none; }

/* 5 ── Composants ======================================================== */

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: .95rem;
  font-weight: 550;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s, border-color .18s, color .18s, transform .18s;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-hover); color: #fff; }
:root[data-theme="dark"] .btn--primary { color: #1c1512; }

.btn--ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink-3); color: var(--ink); background: var(--bg-soft); }

.btn--sm { padding: 9px 16px; font-size: .88rem; }

/* Lien fléché */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .92rem;
  font-weight: 550;
  color: var(--brand);
}
.arrow-link svg { width: 15px; height: 15px; transition: transform .22s cubic-bezier(.2,.7,.3,1); }
.arrow-link:hover svg { transform: translateX(4px); }

/* Grilles */
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Carte */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .22s, transform .22s, box-shadow .22s;
}
.card--link:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.card__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--brand);
}
.card__icon svg { width: 20px; height: 20px; }
.card h3 { margin-bottom: 9px; }
.card p { font-size: .95rem; color: var(--ink-2); line-height: 1.6; }
.card__foot { margin-top: auto; padding-top: 18px; }
.card__tag {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}
/* Toute la carte cliquable, sans imbriquer les liens */
.card--link .stretch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

/* Liste à filets */
.rule-list { list-style: none; }
.rule-list li {
  display: flex;
  gap: 14px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
  font-size: .96rem;
  color: var(--ink-2);
}
.rule-list li:last-child { border-bottom: 1px solid var(--line); }
.rule-list svg { width: 17px; height: 17px; margin-top: 4px; flex-shrink: 0; color: var(--brand); }
.rule-list strong { color: var(--ink); font-weight: 550; }

/* Chiffres clés */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.stat { padding: 26px 24px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; }
.stat__num {
  font-size: 1.9rem;
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
}
.stat__num span { color: var(--accent); }
.stat__label {
  margin-top: 9px;
  font-size: .85rem;
  color: var(--ink-2);
  line-height: 1.45;
}

/* Bandeau partenaires */
.partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 40px;
}
.partner {
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--ink-3);
  white-space: nowrap;
}
.partner b { color: var(--ink-2); font-weight: 500; }

/* Bloc contenu + visuel */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.split--wide { grid-template-columns: 1.05fr .95fr; }
/* Alternance de mise en page : visuel à gauche, sur grand écran seulement. */
@media (min-width: 881px) {
  .split--reverse .split__media { order: -1; }
}
.split__media {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
  padding: 28px;
  overflow: hidden;
}

/* Étapes numérotées */
.steps { list-style: none; counter-reset: s; }
.steps li {
  counter-increment: s;
  position: relative;
  padding: 0 0 30px 52px;
}
.steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -2px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--ink-2);
}
.steps li::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 34px;
  bottom: 6px;
  width: 1px;
  background: var(--line);
}
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { display: none; }
.steps h3 { margin-bottom: 6px; }
.steps p { font-size: .95rem; color: var(--ink-2); }

/* Encadré citation */
.quote {
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
}
.quote p {
  font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem);
  line-height: 1.5;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.quote cite {
  display: block;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--ink-3);
}

/* Formulaire */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label {
  font-size: .84rem;
  font-weight: 550;
  color: var(--ink);
}
.field label span { color: var(--ink-3); font-weight: 400; }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 11px 14px;
  font-family: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color .18s, box-shadow .18s;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent);
}
.field--check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: .85rem;
  color: var(--ink-2);
  line-height: 1.5;
}
.field--check input { width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; accent-color: var(--brand); }

/* Coordonnées */
.contact-list { list-style: none; }
.contact-list li {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.contact-list li:first-child { border-top: 1px solid var(--line); }
.contact-list svg { width: 18px; height: 18px; margin-top: 3px; color: var(--brand); flex-shrink: 0; }
.contact-list .k {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-bottom: 3px;
}
.contact-list .v { color: var(--ink); font-size: .98rem; }
.contact-list a.v:hover { color: var(--brand); }

/* Fil d'Ariane */
.crumb {
  display: flex;
  gap: 9px;
  align-items: center;
  list-style: none;
  font-size: .82rem;
  color: var(--ink-3);
  margin-bottom: 22px;
}
.crumb a { color: var(--ink-3); }
.crumb a:hover { color: var(--ink-2); }
.crumb li::after { content: "/"; margin-left: 9px; color: var(--line-strong); }
.crumb li:last-child::after { display: none; }
.crumb li:last-child { color: var(--ink-2); }

/* 6 ── Sections ========================================================== */

/* Hero */
.hero {
  position: relative;
  padding-block: clamp(56px, 7vw, 104px) clamp(56px, 7vw, 96px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
/* Lignes horizontales plutôt qu'une grille : le symbole de la marque est un
   flux qui se lit de gauche à droite, le fond dit la même chose. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom, var(--line) 0 1px, transparent 1px 34px);
  /* Les lignes ne remontent que derrière le symbole : le texte reste au propre. */
  mask-image: linear-gradient(to right, transparent 0%, transparent 40%, #000 78%);
  opacity: .9;
  pointer-events: none;
}
.hero > .wrap { position: relative; }
.hero__grid {
  /* En variable : le panneau photo de l'accueil (section 29) place son bord
     au milieu de cet écart. */
  --hero-gap: clamp(32px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: var(--hero-gap);
  align-items: center;
}
.hero h1 { margin-bottom: 22px; }
.hero .lead { max-width: 52ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__note {
  margin-top: 26px;
  font-size: .85rem;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 9px;
}
.hero__note svg { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; }

/* ── La marque, en deux temps ──────────────────────────────────────────
   Les barres se posent, puis le symbole se réduit et le nom vient se caler
   à côté. Proportions relevées sur le logo fourni : le bloc texte vaut
   1,52 fois la largeur du symbole, l'écart entre les deux 0,10.

   L'état d'arrivée est l'état par défaut : sans JavaScript, le logo est
   simplement là, composé. Les états de départ sont sous `:root.js`. */
.brandmark {
  --mark-w: clamp(84px, 10.5vw, 132px);
  --type-w: calc(var(--mark-w) * 1.52);
  --mark-gap: calc(var(--mark-w) * 0.1);
  --zoom: 3.1;

  /* Place réservée à la ligne d'éditeurs, sous le logo. Doit suivre la hauteur
     réelle des pastilles : image + padding vertical. */
  --sat-h: 72px;
  --sat-gap: 34px;
  /* Le logo part de plus bas de la moitié de cette place : il paraît centré
     alors que la ligne occupe déjà son espace, puis il remonte. Même astuce
     que le décalage horizontal du symbole. */
  --descente: calc((var(--sat-h) + var(--sat-gap)) / 2);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sat-gap);
  min-height: calc(var(--mark-w) * var(--zoom) * 0.762 + 40px + var(--sat-h) + var(--sat-gap));
}

.brandmark__row {
  display: flex;
  align-items: center;
  gap: var(--mark-gap);
}

.brandmark__mark {
  width: var(--mark-w);
  height: auto;
  flex: none;
}

.brandmark__type {
  display: grid;
  width: var(--type-w);
  flex: none;
  line-height: 1;
  color: var(--logo-ink);
}
.brandmark__name {
  font-size: calc(var(--mark-w) * 0.46);
  font-weight: 700;
  letter-spacing: .005em;
}
.brandmark__sub {
  margin-top: calc(var(--mark-w) * 0.055);
  font-size: calc(var(--mark-w) * 0.239);
  font-weight: 400;
  letter-spacing: .008em;
}

@media (prefers-reduced-motion: no-preference) {

  /* Temps 1 — les barres arrivent, symbole encore agrandi et seul en scène.
     Le groupe est décalé pour que le symbole tombe au centre malgré la place
     que le nom occupe déjà dans le flux. */
  :root.js .brandmark__row {
    transform: translate(calc((var(--type-w) + var(--mark-gap)) / 2), var(--descente));
  }
  :root.js .brandmark__mark { transform: scale(var(--zoom)); }
  /* Le nom vient de la droite : arrivant par la gauche, il traverserait le
     symbole pendant que celui-ci se réduit. */
  :root.js .brandmark__type { opacity: 0; transform: translateX(18px); }
  :root.js .brandmark [data-bar] { opacity: 0; }

  /* Temps 2 — une fois l'écran de chargement levé. Les barres finissent de se
     poser à 1,22 s (0,52 s de décalage + 0,7 s d'animation) ; la réduction
     part à 1,15 s, ce léger chevauchement évite le temps mort. */
  /* Le groupe fait deux mouvements d'affilée : il se recentre pendant que le
     nom se cale, marque un temps, puis remonte pour laisser place aux
     éditeurs. Une seule animation plutôt que deux transitions, sinon la
     seconde repart d'un état que la première n'a pas fini d'atteindre. */
  :root.pret .brandmark__row {
    animation: rowSequence 2.1s cubic-bezier(.22,.68,.3,1) 1.15s both;
  }
  @keyframes rowSequence {
    0%   { transform: translate(calc((var(--type-w) + var(--mark-gap)) / 2), var(--descente)); }
    45%  { transform: translate(0, var(--descente)); }
    57%  { transform: translate(0, var(--descente)); }
    100% { transform: translate(0, 0); }
  }

  /* Le symbole ne se contente pas de rétrécir : il passe sous sa taille, repart
     au-dessus, puis se pose. Étapes explicites plutôt qu'une courbe élastique —
     sur un trajet de x3,1 à x1, le dépassement d'une cubic-bezier serait énorme,
     ici il reste à 7 % en dessous et 3,5 % au-dessus. */
  :root.pret .brandmark__mark {
    animation: markLand 1.2s 1.15s both;
  }
  /* Une courbe par segment : la descente freine, le retour repart sec puis
     s'amortit. Une seule courbe pour tout donnerait un rebond mou. */
  @keyframes markLand {
    0%   { transform: scale(var(--zoom)); animation-timing-function: cubic-bezier(.5,.02,.3,1); }
    58%  { transform: scale(.93);   animation-timing-function: cubic-bezier(.22,.9,.4,1); }
    79%  { transform: scale(1.035); animation-timing-function: cubic-bezier(.4,0,.5,1); }
    92%  { transform: scale(.994);  animation-timing-function: cubic-bezier(.3,0,.4,1); }
    100% { transform: scale(1); }
  }
  :root.pret .brandmark__type {
    opacity: 1;
    transform: none;
    transition: opacity .65s ease 1.45s,
                transform .85s cubic-bezier(.22,.68,.3,1) 1.4s;
  }
  :root.pret .brandmark [data-bar] {
    animation: barIn .7s cubic-bezier(.2,.7,.3,1) forwards;
  }

  @keyframes barIn {
    from { opacity: 0; transform: translateX(-26px); }
    to   { opacity: 1; transform: none; }
  }
}

/* Badge de disponibilité */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 13px 6px 10px;
  margin-bottom: 26px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--surface);
  font-size: .8rem;
  color: var(--ink-2);
}
.badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 3px color-mix(in srgb, #16a34a 18%, transparent);
}

/* En-tête de page intérieure */
.page-head {
  padding-block: clamp(48px, 6vw, 84px) clamp(36px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}
.page-head h1 { max-width: 20ch; margin-bottom: 20px; }

/* Appel final */
.cta {
  padding: clamp(40px, 5vw, 64px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-ink);
  color: #fff;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.cta h2 { color: #fff; margin-bottom: 12px; }
.cta p { color: rgba(255, 255, 255, .72); max-width: 52ch; font-size: 1.02rem; }
.cta .btn--primary { background: #fff; color: var(--bg-ink); }
.cta .btn--primary:hover { background: #e9edf3; color: var(--bg-ink); }
.cta .btn--ghost { border-color: rgba(255, 255, 255, .28); color: #fff; }
.cta .btn--ghost:hover { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .07); color: #fff; }
.cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Visuels SVG */
.figure { width: 100%; height: auto; }
.figure .fg-line   { stroke: var(--line-strong); }
.figure .fg-brand  { stroke: var(--brand); }
.figure .fg-accent { stroke: var(--accent); }
.figure .fill-surface { fill: var(--surface); }
.figure .fill-soft    { fill: var(--bg-soft); }
.figure .fill-brand   { fill: var(--brand); }
.figure .fill-accent  { fill: var(--accent); }
.figure .fg-title {
  fill: var(--ink);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.figure .fg-sub {
  fill: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .1em;
}
/* Pour souligner un fragment de légende — une échéance, par exemple. */
.figure .fg-accent-text { fill: var(--accent); }

/* Flux de données : pointillé qui défile lentement. */
.figure .flux {
  stroke-dasharray: 3 7;
  animation: flux 2.8s linear infinite;
}
@keyframes flux { to { stroke-dashoffset: -20; } }

/* La flèche suit le survol de la carte entière. */
.card--link:hover .arrow-link svg { transform: translateX(4px); }

/* 7 ── Footer ============================================================ */

.footer {
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  padding-block: clamp(48px, 6vw, 72px) 28px;
  font-size: .92rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
}
.footer h4 {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
}
.footer ul { list-style: none; display: grid; gap: 10px; }
.footer a { color: var(--ink-2); }
.footer a:hover { color: var(--ink); }

/* Le logo est un lien : sans cette exception, `.footer a` l'emporte sur
   `.logo` par spécificité et le nom de marque vire au gris. */
.footer .logo,
.footer .logo:hover { color: var(--logo-ink); }
.footer__about { max-width: 34ch; color: var(--ink-2); font-size: .92rem; }
.footer__about .logo { margin-bottom: 16px; }
.footer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: .84rem;
  color: var(--ink-3);
}
.footer__bar ul { display: flex; gap: 20px; list-style: none; }

/* 8 ── Responsive ======================================================== */

@media (max-width: 1000px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer__about { grid-column: 1 / -1; max-width: none; }
}

@media (max-width: 880px) {
  :root { --gutter: 20px; }

  .burger { display: inline-grid; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    margin: 0;
    padding: 12px var(--gutter) 24px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, transform .2s, visibility .2s;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__link { padding: 13px 12px; font-size: 1rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav__link[aria-current="page"]::after { display: none; }
  .nav__link[aria-current="page"] { color: var(--brand); }

  .header__cta .btn { display: none; }

  .hero__grid,
  .split,
  .split--wide { grid-template-columns: 1fr; }
  /* Sur petit écran, le titre passe toujours avant le schéma. */
  .hero__media { margin-top: 8px; }
  /* Moins de zoom : le grand état doit rester dans la colonne. */
  .brandmark { --mark-w: clamp(76px, 21vw, 108px); --zoom: 2.4; }
  /* Les lignes de flux n'ont plus de place à droite : on les retire. */
  .hero::before { display: none; }

  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { border-left: 0; border-top: 1px solid var(--line); }
  .stat:nth-child(-n+2) { border-top: 0; }
  .stat:nth-child(even) { border-left: 1px solid var(--line); }

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

@media (max-width: 620px) {
  body { font-size: 16px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .card { padding: 22px; }
  .hero__actions .btn { flex: 1 1 auto; }
}

/* 9 ── Motion ============================================================ */

/* Le masquage est conditionné à `.js` : sans JavaScript, rien ne viendrait
   reposer `.is-in` et la page resterait vide sous le haut de page. */
:root.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.2,.7,.3,1), transform .55s cubic-bezier(.2,.7,.3,1);
}
:root.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .header, .footer, .cta, .burger { display: none; }
  body { font-size: 11pt; color: #000; background: #fff; }
}

/* 10 ── Contenu rédactionnel long ======================================== */

.prose { max-width: 72ch; }
.prose h2 {
  font-size: 1.3rem;
  margin-top: 44px;
  margin-bottom: 12px;
}
.prose h2:first-child { margin-top: 0; }
.prose p,
.prose li { color: var(--ink-2); font-size: .97rem; }
.prose ul {
  list-style: disc;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  margin-bottom: 1.1em;
}
.prose strong { color: var(--ink); font-weight: 550; }

/* 11 ── Carte ============================================================ */

/* L'iframe Google n'est injectée qu'au clic : rien ne part chez Google
   tant que le visiteur n'a pas accepté. D'où le placeholder ci-dessous. */
.map {
  position: relative;
  height: clamp(300px, 40vw, 440px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-soft);
}

.map__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  padding: 24px;
  text-align: center;
}
.map__ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 10%, transparent 78%);
  pointer-events: none;
}
.map__ph > * { position: relative; }

.map__pin {
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
  color: var(--accent);
}
.map__addr {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 550;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.map__city { margin: 0 0 18px; font-size: .92rem; color: var(--ink-2); }
.map__consent {
  max-width: 46ch;
  margin: 14px 0 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--ink-3);
}

.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.map.is-loaded .map__ph { display: none; }

.map__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 16px;
  font-size: .9rem;
}

/* 12 ── Écran de chargement ============================================== */

/* Uniquement sur l'accueil, et une seule fois par session : la classe
   `.deja-vu` est posée par le script du <head>, avant le premier rendu. */
.loader {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: var(--bg);
  /* Filet de sécurité : sans JS, l'écran s'efface seul. Jamais de page murée.
     Le délai reste au-dessus du plafond côté script (3,6 s). */
  animation: loaderSecours 0s linear 3.9s forwards;
}
@keyframes loaderSecours { to { opacity: 0; visibility: hidden; } }

:root.deja-vu .loader { display: none; }

.loader.is-done {
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility .45s;
}
.loader.is-done .loader__inner { transform: scale(.96); }

.loader__inner {
  display: grid;
  justify-items: center;
  gap: 26px;
  padding: 24px;
  transition: transform .45s cubic-bezier(.2,.7,.3,1);
}

.loader__mark {
  width: clamp(120px, 26vw, 190px);
  height: auto;
}

/* Le même geste que le symbole : les barres traversent, le disque tient. */
.loader__bar {
  opacity: 0;
  animation: loaderFlux 1.44s linear infinite;
}
@keyframes loaderFlux {
  0%   { transform: translateX(-300px); opacity: 0; }
  8%   { opacity: 1; }
  28%  { transform: translateX(0); opacity: 1; }
  80%  { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(340px); opacity: 0; }
}

.loader__label {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: 0;
  text-align: center;
}
.loader__name {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--logo-ink);
}
.loader__state {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.loader__dots i {
  font-style: normal;
  opacity: 0;
  animation: loaderPoint 1.44s steps(1) infinite;
}
.loader__dots i:nth-child(2) { animation-delay: .36s; }
.loader__dots i:nth-child(3) { animation-delay: .72s; }
@keyframes loaderPoint {
  0%, 74% { opacity: 0; }
  25%, 73% { opacity: 1; }
}

/* Mouvement réduit : on garde l'écran, on retire le défilement. */
@media (prefers-reduced-motion: reduce) {
  .loader__bar { opacity: 1; animation: none; }
  .loader__dots i { opacity: 1; animation: none; }
  .loader__inner { transition: none; }
}

/* 13 ── Avis Google ====================================================== */

.avis__tete {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(32px, 4vw, 48px);
}

.avis__note { display: flex; align-items: center; gap: 14px; }
.avis__chiffre {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.avis__total {
  display: block;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.etoiles { display: inline-flex; gap: 2px; }
.etoiles svg { width: 15px; height: 15px; }
.etoiles .pleine { fill: var(--copper-2); }
.etoiles .vide   { fill: var(--line-strong); }

.avis { margin: 0; gap: 0; }
.avis blockquote { margin: 14px 0 0; }
.avis blockquote p {
  font-size: .96rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.avis__pied {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: auto;
  padding-top: 18px;
}
/* Pastille à l'initiale : la photo de l'auteur est chez Google, l'afficher
   ferait sortir une requête vers Google depuis le navigateur du visiteur. */
.avis__pastille {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--copper-1), var(--copper-2));
  color: #fff;
  font-size: .92rem;
  font-weight: 600;
  text-transform: uppercase;
}
.avis__auteur { display: block; font-size: .92rem; font-weight: 600; color: var(--ink); }
.avis__date   { display: block; margin-top: 2px; font-size: .8rem; color: var(--ink-3); }

.avis__mention {
  max-width: 76ch;
  margin-top: clamp(28px, 3vw, 40px);
  font-size: .82rem;
  line-height: 1.55;
  color: var(--ink-3);
}
.avis__mention a { white-space: nowrap; }

@media (max-width: 620px) {
  .avis__tete { align-items: flex-start; }
}

/* 14 ── Les métiers, en haut de page ===================================== */

.hero__liste {
  list-style: none;
  display: grid;
  gap: 15px;
  margin: 30px 0 0;
}
.hero__liste li {
  position: relative;
  padding-left: 42px;
  font-size: clamp(1.06rem, .99rem + .34vw, 1.24rem);
  font-weight: 550;
  line-height: 1.35;
  color: var(--ink);
}
/* La puce est une barre du symbole : longueurs inégales, comme le flux.
   Le texte reste aligné grâce au padding fixe. */
.hero__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: var(--puce, 24px);
  height: 7px;
  border-radius: 3.5px;
  background: linear-gradient(90deg, var(--copper-1), var(--copper-2));
}
.hero__liste li:nth-child(1) { --puce: 26px; }
.hero__liste li:nth-child(2) { --puce: 16px; }
.hero__liste li:nth-child(3) { --puce: 31px; }
.hero__liste li:nth-child(4) { --puce: 21px; }

/* Elles arrivent une à une, par la gauche — le même geste que les barres du
   symbole, joué en même temps de l'autre côté de la page. */
@media (prefers-reduced-motion: no-preference) {
  :root.js .hero__liste li { opacity: 0; }
  :root.pret .hero__liste li {
    animation: listeIn .58s cubic-bezier(.2,.7,.3,1) forwards;
  }
  :root.pret .hero__liste li:nth-child(1) { animation-delay: .42s; }
  :root.pret .hero__liste li:nth-child(2) { animation-delay: .55s; }
  :root.pret .hero__liste li:nth-child(3) { animation-delay: .68s; }
  :root.pret .hero__liste li:nth-child(4) { animation-delay: .81s; }

  @keyframes listeIn {
    from { opacity: 0; transform: translateX(-18px); }
    to   { opacity: 1; transform: none; }
  }
}

@media (max-width: 620px) {
  .hero__liste { gap: 13px; }
  .hero__liste li { padding-left: 36px; }
}

/* 15 ── Bandeau partenaires ============================================== */

/* Quatre logos aux styles très différents (noir, bleu, dégradé, quadri).
   Côte à côte tels quels, le bandeau serait bariolé et jurerait avec le reste
   du site : on les ramène au gris, la couleur revient au survol. */
.partenaires {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px clamp(36px, 6vw, 72px);
  margin: 0;
}
/* Pastilles claires et logos en couleur, comme dans le haut de page. Le gris
   uniforme d'origine n'était plus tenable : le badge Divalto est une fresque
   multicolore, le désaturer ou l'inverser revient à le détruire. */
/* Hauteur commune, comme les bulles du haut de page. */
.partenaires li {
  display: grid;
  place-items: center;
  height: clamp(66px, 8vw, 84px);
  padding: 0 24px;
  background: var(--satellite-bg);
  border: 1px solid var(--satellite-line);
  border-radius: 100px;
  box-shadow: var(--shadow);
}

.partenaires img {
  height: clamp(32px, 4.2vw, 48px);
  width: auto;
}

/* Deux logos ont une forme à part : Divalto tient sur deux niveaux (le mot et
   la pastille « partner »), Microsoft porte plus de blanc autour. On égalise
   au poids optique, pas à la hauteur mesurée. */
.partenaires li:first-child img { height: clamp(40px, 5vw, 56px); }
.partenaires li:last-child  img { height: clamp(30px, 3.9vw, 44px); }



/* 16 ── Les éditeurs en satellite du logo ================================ */

/* Le symbole au centre, les éditeurs intégrés autour : la composition dit le
   métier avant que le texte ne l'explique. */
.brandmark { position: relative; }

/* Une ligne sous le logo : les trois éditeurs se lisent d'un coup, ce qu'une
   disposition en couronne ne permettait pas. */
.satellites {
  list-style: none;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px clamp(10px, 1.3vw, 18px);
  min-height: var(--sat-h);
}

/* Hauteur commune à toutes les bulles : les logos n'ont pas la même hauteur
   optique, mais les pastilles doivent former une rangée régulière. La largeur,
   elle, reste libre — l'imposer creuserait du vide autour des logos étroits. */
.satellite {
  display: grid;
  place-items: center;
  height: var(--sat-h);
  padding: 0 18px;
  background: var(--satellite-bg);
  border: 1px solid var(--satellite-line);
  border-radius: 100px;
  box-shadow: var(--shadow);
  pointer-events: auto;
}
.satellite img {
  height: 30px;
  width: auto;
}
/* Le badge Divalto tient sur deux lignes en italique gras : sous 44 px, la
   fresque et le texte deviennent illisibles. */
.satellite--divalto img { height: 46px; }

@media (prefers-reduced-motion: no-preference) {
  :root.js .satellite { opacity: 0; transform: translateY(10px) scale(.9); }

  /* Ils entrent pendant que le logo remonte (la remontée court de 2,35 à
     3,25 s) : les deux gestes se répondent au lieu de se suivre. */
  :root.pret .satellite {
    animation: satelliteIn .6s cubic-bezier(.22,.8,.3,1) both;
  }
  :root.pret .satellite--divalto  { animation-delay: 2.55s; }
  :root.pret .satellite--docuware { animation-delay: 2.70s; }
  :root.pret .satellite--ibm      { animation-delay: 2.85s; }

  @keyframes satelliteIn {
    from { opacity: 0; transform: translateY(10px) scale(.9); }
    to   { opacity: 1; transform: none; }
  }
}

@media (max-width: 880px) {
  .brandmark { --sat-h: 54px; --sat-gap: 26px; }
  .satellite { padding: 0 14px; }
  .satellite img { height: 24px; }
  .satellite--divalto img { height: 34px; }
}

/* 17 ── Bandeau d'actualité ============================================== */

/* Au-dessus de l'en-tête, dans le flux : il défile, seul l'en-tête reste
   collé en haut. Une bannière fixe mangerait la hauteur utile en permanence. */
.bandeau {
  background: var(--bg-ink);
  color: #fff;
  font-size: .88rem;
  line-height: 1.45;
}
:root.bandeau-lu .bandeau { display: none; }

.bandeau__inner {
  display: flex;
  align-items: center;
  gap: 14px 22px;
  padding-block: 11px;
}

.bandeau__texte {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0;
  color: rgba(255, 255, 255, .82);
}
.bandeau__texte strong { color: #fff; font-weight: 600; }

/* La date porte l'urgence : c'est elle qu'on doit lire en premier. */
.bandeau__date {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--copper-1), var(--copper-2));
  color: #fff;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .04em;
  white-space: nowrap;
}
.bandeau__date sup { font-size: .7em; }

.bandeau__lien {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  flex-shrink: 0;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, .4);
  transition: border-color .2s;
}
.bandeau__lien:hover { color: #fff; border-bottom-color: #fff; }
.bandeau__lien svg { width: 15px; height: 15px; transition: transform .22s cubic-bezier(.2,.7,.3,1); }
.bandeau__lien:hover svg { transform: translateX(3px); }

.bandeau__fermer {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, .6);
  cursor: pointer;
  transition: color .2s, background .2s;
}
.bandeau__fermer:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.bandeau__fermer svg { width: 15px; height: 15px; }
.bandeau__fermer:focus-visible { outline-color: #fff; }

@media (max-width: 880px) {
  .bandeau { font-size: .84rem; }
  .bandeau__inner { align-items: flex-start; padding-block: 10px; }
  /* Le lien passe sous le texte : côte à côte, il n'y a plus la place. */
  .bandeau__lien { margin-left: 0; }
  .bandeau__texte { flex: 1 1 100%; order: -1; }
  .bandeau__fermer { position: absolute; right: var(--gutter); }
  .wrap.bandeau__inner { position: relative; flex-wrap: wrap; padding-right: 44px; }
}

/* 18 ── Sous-menu ======================================================== */

.nav__item { position: relative; }

.nav__item--menu .nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.nav__chevron {
  width: 14px;
  height: 14px;
  opacity: .55;
  transition: transform .22s cubic-bezier(.2,.7,.3,1), opacity .2s;
}
.nav__item--menu:hover .nav__chevron,
.nav__item--menu:focus-within .nav__chevron {
  transform: rotate(180deg);
  opacity: 1;
}

.sousmenu {
  position: absolute;
  top: calc(100% - 4px);
  left: 4px;
  z-index: 110;
  min-width: 244px;
  padding: 7px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 2px 4px rgba(13, 21, 34, .05), 0 14px 34px rgba(13, 21, 34, .12);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
/* `focus-within` ouvre aussi au clavier : pas besoin de JavaScript. */
.nav__item--menu:hover .sousmenu,
.nav__item--menu:focus-within .sousmenu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.sousmenu ul { list-style: none; display: grid; gap: 1px; }
.sousmenu a {
  display: block;
  padding: 9px 13px;
  border-radius: var(--radius-sm);
  font-size: .91rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: color .16s, background .16s;
}
.sousmenu a:hover {
  color: var(--ink);
  background: var(--bg-soft);
}

@media (max-width: 880px) {
  /* Pas de survol au doigt : le sous-menu est déplié, en retrait. */
  .sousmenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: 0 0 6px 14px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  .sousmenu a { padding: 10px 12px; font-size: .95rem; color: var(--ink-3); }
  .nav__chevron { display: none; }
  .nav__item--menu > .nav__link { border-bottom: 0; }
}

/* 19 ── Logo d'éditeur dans une carte ==================================== */

/* Même pastille claire qu'ailleurs sur le site : sur le fond sombre d'une
   carte en thème nuit, les logos à texte noir seraient illisibles. */
.card__logo {
  display: inline-grid;
  place-items: center;
  align-self: flex-start;
  height: 76px;
  padding: 0 28px;
  margin-bottom: 22px;
  background: var(--satellite-bg);
  border: 1px solid var(--satellite-line);
  border-radius: 100px;
}
/* `object-fit: contain` : la règle globale `img { max-width: 100% }` plafonne la
   largeur quand la carte rétrécit, alors que la hauteur reste fixée ici — sans
   lui, le logo est écrasé au lieu d'être réduit. */
.card__logo img { height: 36px; width: auto; object-fit: contain; }

/* Divalto porte son contour « fresque » : il lui faut un peu plus de hauteur
   pour rester lisible. */
.card__logo--divalto img { height: 44px; }

/* Accueil, en 4 colonnes jusqu'à 1001px : la carte n'y offre plus que 166px,
   et la pastille Divalto en demande 189 (131 de logo, 2 × 28 de marge). On
   rogne la marge intérieure plutôt que le logo. */
@media (min-width: 1001px) and (max-width: 1140px) {
  .grid--4 .card__logo { padding-inline: 16px; }
}

/* La carte sans éditeur : le pictogramme prend une couleur fixe, la pastille
   restant claire dans les deux thèmes. */
.card__logo--maison svg {
  width: 34px;
  height: 34px;
  color: #14448c;
}

@media (max-width: 620px) {
  .card__logo { height: 64px; padding: 0 22px; }
  .card__logo img { height: 30px; }
  .card__logo--divalto img { height: 37px; }
  .card__logo--maison svg { width: 28px; height: 28px; }
}

/* 20 ── Socle technique ================================================== */

/* Le second cercle des compétences, page Développement : ce que l'on pratique,
   par opposition à ce sur quoi on s'engage. D'où des libellés nus, sans
   description ni carte — le poids typographique dit le rang. Une liste à plat
   de vingt technologies inquiète plus qu'elle ne rassure. */
.stack-tech {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px 34px;
  padding: 34px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.stack-tech h3 {
  margin-bottom: 13px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.stack-tech ul { list-style: none; }
.stack-tech li {
  font-size: .95rem;
  line-height: 1.75;
  color: var(--ink-2);
}

@media (max-width: 880px) {
  .stack-tech { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .stack-tech { grid-template-columns: 1fr; gap: 24px; padding: 26px; }
}

/* 21 ── Prestations en liste ============================================= */

/* Page Services. La puce est une barre du symbole, comme dans `.hero__liste` —
   mais de longueur constante ici : le hero joue les longueurs inégales du logo,
   une liste de prestations a besoin d'un alignement régulier pour se parcourir. */
.liste-services {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.liste-services li {
  position: relative;
  padding-left: 26px;
  font-size: 1rem;
  line-height: 1.58;
  color: var(--ink-2);
}
.liste-services li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 14px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--copper-1), var(--copper-2));
}
.liste-services strong {
  color: var(--ink);
  font-weight: 600;
}

/* `.split--reverse` ne connaissait que `.split__media` ; la liste n'a pas de
   cadre, il lui faut sa propre règle pour alterner de côté. */
@media (min-width: 881px) {
  .split--reverse > .liste-services { order: -1; }
}
@media (max-width: 620px) {
  .liste-services li { padding-left: 22px; }
}

/* 22 ── En-tête illustré ================================================= */

/* Page Divalto. La photo est celle du siège de l'éditeur, à Strasbourg — très
   orange, très contrastée : le texte ne tient dessus qu'avec un voile dense.
   D'où le dégradé, opaque côté texte et plus léger côté fresque.
   Le bas est coupé en biais ; le `padding-bottom` réserve la place de la
   découpe, sans quoi le texte passerait dessous. */
.page-head--visuel {
  position: relative;
  overflow: hidden;
  border-bottom: 0;
  background: var(--bg-ink);
  color: #fff;
  padding-block: clamp(52px, 6vw, 88px) clamp(84px, 9vw, 132px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 58px), 0 100%);
}
.page-head--visuel .wrap { position: relative; z-index: 1; }

.page-head__fond { position: absolute; inset: 0; z-index: 0; }
.page-head__fond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 40%;
}
.page-head__fond::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-ink);
  opacity: .89;
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .page-head__fond::after {
    opacity: 1;
    background: linear-gradient(96deg,
      color-mix(in srgb, var(--bg-ink) 95%, transparent) 0%,
      color-mix(in srgb, var(--bg-ink) 90%, transparent) 46%,
      color-mix(in srgb, var(--bg-ink) 64%, transparent) 100%);
  }
}

/* Le fil d'Ariane et le chapô sont réglés sur des gris de page claire : sur le
   voile, ils doivent passer au blanc atténué. */
.page-head--visuel h1,
.page-head--visuel .crumb li:last-child { color: #fff; }
.page-head--visuel .lead { color: rgba(255, 255, 255, .84); }
.page-head--visuel .eyebrow { color: rgba(255, 255, 255, .72); }
.page-head--visuel .crumb,
.page-head--visuel .crumb a { color: rgba(255, 255, 255, .6); }
.page-head--visuel .crumb a:hover { color: #fff; }

@media (max-width: 620px) {
  .page-head--visuel { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), 0 100%); }
  .page-head__fond img { object-position: 68% 40%; }
}

/* 23 ── Médaillons ======================================================= */

/* Deux captures du produit, en rond, décalées l'une par rapport à l'autre pour
   éviter l'alignement de catalogue. Le décalage disparaît sous 881px, où elles
   passent côte à côte sans place pour respirer. */
.medaillons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
  align-items: start;
}
/* `figure` n'est pas dans le reset du fichier : sans ce `margin: 0`, il garde
   les 40px latéraux du navigateur et les ronds rétrécissent d'autant. */
.medaillon { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.medaillon__rond {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--bg-soft);
}
.medaillon__rond img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.medaillon figcaption {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
}

@media (min-width: 881px) {
  .medaillon:first-child { transform: translateY(-22px); }
  .medaillon:last-child  { transform: translateY(22px); }
}

/* Côte à côte sur un téléphone, les ronds tombent à 167px : une capture
   d'interface n'y est plus lisible. Empilés, ils en font le double. */
@media (max-width: 620px) {
  .medaillons { grid-template-columns: 1fr; gap: 26px; max-width: 340px; margin-inline: auto; }
}

/* 24 ── Méthode de projet ================================================ */

/* Page Services, bloc Pilotage : une frise en quatre temps, chacun avec ce
   qu'il produit. Chaque colonne s'ouvre sur un filet marqué d'une barre
   cuivre, le motif des intitulés du site.
   Les étapes ne sont pas numérotées : les blocs de la page le sont déjà
   (01 à 04), un second compteur dans le bloc 04 brouillerait la lecture. */
.methode {
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--line);
}
.methode__head { max-width: 64ch; margin-bottom: clamp(28px, 3.5vw, 40px); }
.methode__head h3 { margin-bottom: 10px; }
.methode__head p { margin: 0; }
/* Les méthodes et notations, en une ligne : le vocabulaire qu'un DSI cherche. */
.methode__head .methode__outils {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}

.methode__etapes {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px clamp(20px, 2.6vw, 36px);
}
.methode__etapes > li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--line-strong);
}
.methode__etapes > li::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--copper-1), var(--copper-2));
}
.methode__etapes h4 { font-size: 1.05rem; }

/* Les paragraphes du site portent une marge basse : dans la colonne, c'est
   le `gap` qui espace, pas elle. */
.methode__etapes > li > p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.methode__etapes > li > .methode__label {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Les livrables sont la preuve : ils passent en encre pleine, sous un
   intitulé discret. */
.methode__etapes ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.methode__etapes ul li {
  position: relative;
  padding-left: 14px;
  font-size: .92rem;
  line-height: 1.45;
  color: var(--ink);
}
.methode__etapes ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 6px;
  height: 1.5px;
  background: var(--ink-3);
}

/* Les intitulés « Livrables » s'alignent d'une étape à l'autre, quelle que
   soit la longueur de la phrase au-dessus : chaque étape occupe quatre rangées
   partagées avec ses voisines. Sans subgrid, la frise reste lisible — seul
   l'alignement se perd. */
@supports (grid-template-rows: subgrid) {
  .methode__etapes > li {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 8px;
  }
}

/* Même seuil que les cartes de l'accueil : sous 1001px, quatre colonnes ne
   laissent plus assez de place aux livrables. */
@media (max-width: 1000px) {
  .methode__etapes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .methode__etapes { grid-template-columns: 1fr; gap: 28px; }
}

/* 25 ── Vérification anti-robot ========================================== */

/* Formulaire de contact. La réponse tient en deux chiffres : un champ pleine
   largeur laisserait croire à une réponse longue. */
.field--captcha input { max-width: 9rem; }
.field__aide { font-size: .85rem; color: var(--ink-3); }

/* 26 ── Facturation électronique ========================================= */

/* Le calendrier de la réforme : une ligne par échéance, la date en chiffres
   alignés, puis qui est concerné et ce qui est exigé. L'état est porté par une
   pastille, pas seulement par la date : on lit d'un coup d'œil ce qui
   s'applique déjà. Les pastilles passent par les tokens de marque, donc
   restent lisibles en thème sombre. */
.calendrier {
  list-style: none;
  border-top: 1px solid var(--line-strong);
}
.calendrier > li {
  display: grid;
  grid-template-columns: 7.5rem 1fr auto;
  gap: 6px 20px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.calendrier p { margin: 0; }
.calendrier__date {
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .03em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.calendrier__qui { font-weight: 600; color: var(--ink); }
.calendrier__quoi { margin-top: 2px !important; font-size: .95rem; color: var(--ink-2); }
.calendrier__etat {
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-3);
}
.calendrier__etat--vigueur {
  border-color: transparent;
  background: var(--brand-soft);
  color: var(--brand);
}

@media (max-width: 620px) {
  .calendrier > li { grid-template-columns: 1fr auto; }
  .calendrier__date { grid-column: 1 / -1; }
}

/* Page Solutions : la cinquième carte prend toute la largeur plutôt que de
   rester seule sur sa rangée ; son texte garde une longueur de ligne lisible. */
.grid--2 > .card--pleine { grid-column: 1 / -1; }
.card--pleine > p:not(.card__tag) { max-width: 72ch; }

/* 27 ── Vidéo à la demande =============================================== */

/* Page Divalto. Même principe que la carte de contact : rien ne se charge chez
   YouTube avant le clic. Pas de vignette non plus — elle viendrait de
   i.ytimg.com, donc de Google. L'encart imite un lecteur éteint, d'où le fond
   sombre et le texte blanc dans les deux thèmes, comme le bloc `.cta`. */
.video-bloc { width: 100%; max-width: 460px; justify-self: center; }
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-ink);
}
.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video.is-loaded .video__ph { display: none; }
.video__ph {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 18px 22px;
  text-align: center;
  color: #fff;
}
.video__play {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--copper-1), var(--copper-2));
  color: #fff;
  cursor: pointer;
  transition: transform .2s ease;
}
.video__play:hover { transform: scale(1.06); }
.video__play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.video__play svg { width: 22px; height: 22px; margin-left: 3px; }
.video__titre { margin: 0; font-size: 1rem; font-weight: 600; }
.video__consent {
  margin: 0;
  max-width: 44ch;
  font-size: .76rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .72);
}
.video__lien { display: inline-block; margin-top: 12px; font-size: .92rem; }

/* 28 ── Recommandation et capture d'écran ================================ */

/* Page Facturation électronique : la recommandation Docoon, sous les cartes.
   Plus discrète qu'une carte — un cadre fin, sans fond — parce que la page
   parle d'abord de la plateforme de votre choix.
   Les logos sont des JPEG sur fond blanc : la pastille reste claire dans les
   deux thèmes et l'image s'y fond par multiplication, sans rectangle blanc. */
.reco {
  margin-top: clamp(28px, 3.5vw, 40px);
  padding: 22px 24px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.reco__intro {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.reco__grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 32px; }
.reco__item { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
/* 200px : à 160, la largeur bridait les logos à 30px de haut, sous les 40 voulus. */
.reco__logo {
  display: grid;
  place-items: center;
  width: 200px;
  height: 64px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--satellite-bg);
}
.reco__logo img { max-height: 40px; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.reco__texte p { margin: 0 0 6px; font-size: .93rem; color: var(--ink-2); }
.reco__texte strong { color: var(--ink); font-weight: 600; }

@media (max-width: 880px) {
  .reco__grille { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .reco__item { grid-template-columns: 1fr; }
}

/* Page DocuWare : la capture du logiciel est livrée sur fond blanc. Même
   principe que les logos ci-dessus : cadre clair dans les deux thèmes, image
   fondue par multiplication. */
.capture {
  padding: clamp(14px, 2vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--satellite-bg);
}
.capture img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
@media (min-width: 881px) {
  .split--reverse > .capture { order: -1; }
}

/* En-tête DocuWare : l'ordinateur est à gauche du visuel, pas à droite comme
   la fresque de Divalto. Règle plus spécifique que celle du mobile, à dessein. */
.page-head--docuware .page-head__fond img { object-position: 45% 50%; }

/* 29 ── Panneau photo du haut de page ==================================== */

/* Accueil : les locaux d'Unieux derrière la colonne de texte, sous le voile de
   l'en-tête Divalto (section 22). Le logo et les pastilles d'éditeurs restent
   sur le fond clair, à droite.

   Le bord du panneau se calcule sur la grille, pas en pourcentage de l'écran :
   il passe toujours au milieu de l'écart entre les colonnes. Il n'y a là que
   32 à 64px entre la fin du texte et les pastilles — un bord en pourcentage
   finissait par mordre sur l'un ou l'autre. `--biais` l'incline de part et
   d'autre de ce milieu : plus à gauche en haut, plus à droite en bas.

   Deux valeurs sont reprises d'ailleurs et doivent suivre : la part de la
   première colonne (1,02 / 2 = 0,51, `.hero__grid`) et le padding vertical de
   `.hero`. Le panneau déborde un peu : `.hero` le rogne (overflow: hidden).

   Réservé aux écrans de plus de 1000px. Entre 881 et 1000px, la grille a bien
   deux colonnes, mais le texte remplit la sienne et le bord en biais passait à
   5px du titre. En dessous, le texte garde ses couleurs et le panneau n'existe
   pas — l'image n'est même pas chargée. */
@media (min-width: 1001px) {
  .hero--panneau .hero__grid { position: relative; isolation: isolate; }
  .hero--panneau .hero__grid::before {
    --biais: 44px;
    content: "";
    position: absolute;
    z-index: -1;
    top: calc(-1 * clamp(56px, 7vw, 104px) - 2px);
    bottom: calc(-1 * clamp(56px, 7vw, 96px) - 2px);
    /* 40px de marge à gauche : selon la barre de défilement, 50vw ne tombe pas
       pile sur le bord de l'écran et une bande claire apparaissait. La largeur
       les reprend, le bord en biais ne bouge pas. */
    left: calc(50% - 50vw - 40px);
    width: calc(50vw - 50% + 40px + (100% - var(--hero-gap)) * .51 + var(--hero-gap) / 2 + var(--biais));
    clip-path: polygon(0 0, calc(100% - 2 * var(--biais)) 0, 100% 100%, 0 100%);
    background: var(--bg-ink);
    pointer-events: none;
  }
  /* Voile dense côté texte, plus léger vers le bord, là où le cadrage place la
     façade vitrée. Sans color-mix, le panneau reste un aplat : lisible. */
  @supports (background: color-mix(in srgb, red 50%, transparent)) {
    .hero--panneau .hero__grid::before {
      background:
        linear-gradient(90deg,
          color-mix(in srgb, var(--bg-ink) 94%, transparent) 0%,
          color-mix(in srgb, var(--bg-ink) 89%, transparent) 72%,
          color-mix(in srgb, var(--bg-ink) 72%, transparent) 100%),
        url("../img/locaux/bureau-oketo-unieux.webp") 78% 60% / cover no-repeat,
        var(--bg-ink);
    }
  }

  /* Sur le panneau, le texte passe au blanc — mêmes valeurs que le bloc `.cta`,
     autre fond sombre du site. Les sélecteurs des boutons sont plus précis que
     la règle du thème sombre sur `.btn--primary`, sinon elle l'emporterait. */
  .hero--panneau .hero__texte h1 { color: #fff; }
  .hero--panneau .hero__texte .lead { color: rgba(255, 255, 255, .84); }
  .hero--panneau .hero__liste li { color: #fff; }
  .hero--panneau .hero__note { color: rgba(255, 255, 255, .72); }
  .hero--panneau .hero__texte .badge {
    border-color: rgba(255, 255, 255, .24);
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .86);
  }
  .hero.hero--panneau .hero__texte .btn--primary { background: #fff; color: var(--bg-ink); }
  .hero.hero--panneau .hero__texte .btn--primary:hover { background: #e9edf3; color: var(--bg-ink); }
  .hero.hero--panneau .hero__texte .btn--ghost { border-color: rgba(255, 255, 255, .28); color: #fff; }
  .hero.hero--panneau .hero__texte .btn--ghost:hover {
    border-color: rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .07);
    color: #fff;
  }
}

/* 30 ── Variante d'en-tête : filigrane à droite =========================== */

/* index1.php, en comparaison. La photo en filigrane gris derrière le logo,
   jamais derrière le titre : le bloc démarre au-delà de la colonne de texte,
   bord gauche en biais. Masquage de départ sous `:root.js`, comme le reste de
   la séquence : sans JavaScript, le filigrane est simplement là. */
.hero--filigrane .hero__filigrane {
  position: absolute;
  inset: 0 0 0 54%;
  pointer-events: none;
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}
.hero--filigrane .hero__filigrane img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 74% 62%;
  filter: grayscale(1) contrast(1.05);
  opacity: .12;
}
@media (prefers-reduced-motion: no-preference) {
  :root.js .hero--filigrane .hero__filigrane { opacity: 0; }
  :root.pret .hero--filigrane .hero__filigrane { animation: filigraneIn 1.4s ease-out 2.4s forwards; }
  @keyframes filigraneIn { to { opacity: 1; } }
}
@media (max-width: 880px) {
  .hero--filigrane .hero__filigrane { display: none; }
}

/* 31 ── Variante d'en-tête : bandeau en haut ============================= */

/* index3.php, en comparaison. La photo, dézoomée, occupe le haut de l'en-tête
   sous le voile bleu ; son bas est une courbe : à plat sous le titre, elle
   remonte en douceur au-dessus du logo puis s'aplatit vers la droite.

   Le bandeau est accroché à `.hero__titre` : son bas suit le titre, quel que
   soit le nombre de lignes. La courbe démarre 160px avant le milieu de l'écart
   entre colonnes (`--depart`), calculé depuis les jetons du conteneur — mêmes
   proportions que le panneau de la section 29.

   Découpe par `mask`, pas par `clip-path` : `polygon()` ne fait que des angles,
   et `shape()`, qui accepte courbes et calc(), est trop récent pour s'y fier.
   Trois calques : le haut, la gauche jusqu'au départ, puis la courbe — un SVG
   de 1200 × 180px posé au départ, au ras du bas, qui ne se déforme donc pas
   avec la largeur. Les calques se chevauchent d'1px : bord à bord,
   l'anticrénelage peut laisser un filet clair à la jointure.

   Réglée sur des relevés de 1001 à 2560px : la courbe reste sous la fin du
   titre (à 1001px, il remplit presque sa colonne) et passe à 40px au moins
   au-dessus du logo. Changer le SVG ou `--depart` oblige à refaire ces relevés. */
@media (min-width: 1001px) {
  .hero--bandeau .hero__titre { position: relative; isolation: isolate; }
  .hero--bandeau .hero__titre h1 { margin-bottom: 38px; color: #fff; }
  /* Le logo descend de 60px. À sa place d'origine, la courbe devait gagner une
     centaine de pixels entre la fin du titre et le logo : une bosse, pas une
     pente douce. `translate` se cumule à un `transform` au lieu de l'écraser. */
  .hero--bandeau .hero__media { translate: 0 60px; }
  .hero--bandeau .hero__titre::before {
    --gauche: calc(max(0px, (100vw - var(--container)) / 2) + var(--gutter));
    --colonne: calc((min(100vw, var(--container)) - 2 * var(--gutter) - var(--hero-gap)) * .51);
    --depart: calc(40px + var(--gauche) + var(--colonne) + var(--hero-gap) / 2 - 160px);
    --masque:
      linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 179px) no-repeat,
      linear-gradient(#000 0 0) 0 0 / calc(var(--depart) + 1px) 100% no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='180'%3E%3Cpath d='M0 180C240 180 520 0 1200 0H0Z'/%3E%3C/svg%3E") var(--depart) 100% / 1200px 180px no-repeat;
    content: "";
    position: absolute;
    z-index: -1;
    top: calc(-1 * clamp(56px, 7vw, 104px) - 60px);
    bottom: -18px;
    left: calc(-1 * var(--gauche) - 40px);
    width: calc(100vw + 80px);
    -webkit-mask: var(--masque);
    mask: var(--masque);
    background: var(--bg-ink);
    pointer-events: none;
  }
  @supports (background: color-mix(in srgb, red 50%, transparent)) {
    .hero--bandeau .hero__titre::before {
      background:
        linear-gradient(90deg,
          color-mix(in srgb, var(--bg-ink) 93%, transparent) 0%,
          color-mix(in srgb, var(--bg-ink) 87%, transparent) 45%,
          color-mix(in srgb, var(--bg-ink) 58%, transparent) 100%),
        url("../img/locaux/bureau-oketo-unieux.webp") center 35% / cover no-repeat,
        var(--bg-ink);
    }
  }
  .hero--bandeau .hero__titre .badge {
    border-color: rgba(255, 255, 255, .24);
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .86);
  }
}