/* ==========================================================================
   Omunis — feuille de style commune
   Chargée par index.html, approche.html, apropos.html, mentions-legales.html
   Aucune ressource externe : polices auto-hébergées dans assets/fonts/.
   ========================================================================== *//* --------------------------------------------------------------------------
   1. Polices auto-hébergées (woff2, sous-ensemble latin)
   -------------------------------------------------------------------------- */
@charset "utf-8";

@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/fraunces-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Baseline du logotype : le lockup d'origine la compose dans un neo-grotesque
   bold italic. Arimo (Apache 2.0) en est l'équivalent métrique libre. */
@font-face {
  font-family: "Arimo";
  src: url("assets/fonts/arimo-latin-bolditalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("assets/fonts/space-grotesk-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
/* --------------------------------------------------------------------------
   2. Jetons de design
   -------------------------------------------------------------------------- *//* Écriture manuscrite des annotations botaniques.
   Reenie Beanie (SIL Open Font License, licence conservée dans le même
   dossier), sous-ensemblée au latin de base et aux accents français : 28 Ko
   au lieu des 137 Ko du fichier d'origine. font-display: swap — la police
   n'empêche jamais l'affichage, et le repli est Fraunces italique. */
@font-face {
  font-family: "Reenie Beanie";
  src: url("assets/fonts/reenie-beanie.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  /* — couleurs de marque — */
  --indigo: #123049;        /* Océan Indien / le marché / structure */
  --indigo-soft: #22506f;
  --green: #2f7d5b;         /* le vivant / biodiversité */
  --green-deep: #1f5a40;
  --amber: #dd9b2b;         /* la valeur / accent */
  --amber-ink: #ae7719;     /* même teinte, assombrie pour tenir 3:1 sur le papier comme sur le fond des cartes */
  --paper: #f2efe9;         /* fond — blanc cassé chaud */
  --paper-2: #eae5db;
  --ink: #1f2a2e;           /* texte */
  --muted: #6b6459;
  --graphite: #55524b;      /* mine de crayon des croquis et des annotations, 6,8:1 sur papier */
  --line: #d8d1c4;          /* filet */
  --card: #fdfbf7;
  --flag: #a8482a;          /* verrous / points de blocage, 5:1 sur papier */
  --flag-bg: #fbf1ec;

  /* — charte du logotype Omunis (relevée sur les fichiers sources) — */
  --logo-blue: #009ee0;       /* bleu du signe */
  --logo-blue-ink: #00749f;   /* même teinte que le signe, assombrie au minimum
                                 nécessaire pour atteindre 4,5:1 sur le papier */
  --logo-blue-light: #4cc2f0; /* variante lisible en texte sur fond indigo */
  --logo-ink: #1a171b;        /* noir du logotype */
  --logo-grey: #9c9e9f;       /* gris des rais du signe */

  /* — couleurs sur fonds sombres — */
  --mint: #8fd3b3;
  --on-indigo: #eaf1ee;
  --on-indigo-dim: #b9c9c3;
  --on-green: #eaf3ee;
  --on-green-dim: #c8ddd0;
  --foot-text: #a9bcc6;
  --foot-link: #cfe0e8;
  --flag-soft: #e6a58c;
  --flag-dim: #c98c74;

  /* — typographies — */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-label: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-baseline: "Arimo", Arial, Helvetica, sans-serif;
  --font-main: "Reenie Beanie", var(--font-display);

  /* — échelle typographique — */
  --fs-label: 12px;
  --fs-small: 13.5px;
  --fs-body: 16px;
  --fs-lead: clamp(17px, 1.5vw, 20px);
  --fs-h1: clamp(34px, 5vw, 58px);
  --fs-h2: clamp(28px, 3.4vw, 40px);
  --lh-heading: 1.1;
  --lh-body: 1.6;
  --tracking-label: .16em;

  /* — espacements — */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 14px;
  --space-4: 20px;
  --space-5: 28px;
  --space-6: 40px;
  --space-7: 56px;
  --space-8: 74px;
  --section-y: 64px;
  --section-y-sm: 48px;
  --wrap-max: 1120px;
  --wrap-pad: 28px;

  /* — courbes d'accélération — */
  --ease-doux: cubic-bezier(.22, .8, .28, 1);
  --ease-ressort: cubic-bezier(.16, 1, .3, 1);
  --ease-net: cubic-bezier(.65, 0, .35, 1);

  /* — rayons & ombres — */
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 18px;
  --radius-xl: 20px;
  --radius-2xl: 22px;
  --pill: 999px;
  --shadow-portrait: 0 2px 6px rgba(18, 48, 73, .06), 0 10px 24px rgba(18, 48, 73, .12), 0 24px 48px rgba(18, 48, 73, .10);
  --ombre-carte: 0 1px 2px rgba(18, 48, 73, .04), 0 4px 10px rgba(18, 48, 73, .05), 0 14px 30px rgba(18, 48, 73, .05);
  --ombre-carte-haute: 0 2px 4px rgba(18, 48, 73, .05), 0 10px 22px rgba(18, 48, 73, .08), 0 30px 60px rgba(18, 48, 73, .11);
}
/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; }
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}
.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}
section { padding: var(--section-y) 0; }
section.section-tight { padding-top: var(--space-5); }
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--indigo);
  line-height: var(--lh-heading);
  font-optical-sizing: auto;
  text-wrap: balance;
}
/* Fraunces est variable sur l'axe opsz : on demande explicitement le dessin
   « display » aux grandes tailles, plus fin et plus contrasté. */
h1 { font-variation-settings: "opsz" 132, "wght" 500; letter-spacing: -.015em; }
h2 { font-variation-settings: "opsz" 84, "wght" 500; letter-spacing: -.008em; }
/* lien d'évitement */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--indigo);
  color: #fff;
  font-family: var(--font-label);
  font-size: var(--fs-small);
  padding: 10px 18px;
  border-radius: 0 0 var(--radius-sm) 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; }
/* --------------------------------------------------------------------------
   4. Éléments d'identité
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--green-deep);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--amber);
  display: inline-block;
  flex: none;
}
.section-head { max-width: 64ch; margin-bottom: var(--space-6); }
.section-head h2 { font-size: var(--fs-h2); margin: 0 0 var(--space-3); }
.section-head p { font-size: 17px; color: var(--muted); margin: 0; }
/* un chapô peut compter deux paragraphes : sans cela ils se collent */
.section-head p + p { margin-top: var(--space-3); }
.src {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: .04em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: var(--space-3);
  display: block;
}
/* --------------------------------------------------------------------------
   5. En-tête & navigation
   -------------------------------------------------------------------------- */
header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(242, 239, 233, .86);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: 16px 0;
}
/* Le logotype et sa baseline sont empilés, comme sur le lockup d'origine.
   La baseline est décalée vers la droite : alignée au fût du « m », elle
   respire au lieu de buter sur le bord du logotype. */
.brandwrap { display: block; }
/* Logotype : fichier réel, jamais recomposé en texte. */
.brand { display: block; line-height: 0; text-decoration: none; }
.brand img { width: 176px; height: auto; display: block; }
/* Baseline du logotype, reprise à l'identique : bold italic, « accessible » en bleu. */
.baseline {
  display: block;
  margin: 7px 0 0 56px;
  font-family: var(--font-baseline);
  font-weight: 700;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--logo-ink);
  white-space: nowrap;
}
.baseline b { font-weight: 700; color: var(--logo-blue-ink); }
.nav-links {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  flex-wrap: wrap;
}
.nav-links a {
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  opacity: .8;
}
.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a[aria-current="page"] { opacity: 1; color: var(--green-deep); }
.nav-cta {
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: .02em;
  background: var(--indigo);
  color: #fff !important;
  padding: 9px 16px;
  border-radius: var(--pill);
  opacity: 1 !important;
}
.nav-cta:hover,
.nav-cta:focus-visible { background: var(--green-deep); }
/* --------------------------------------------------------------------------
   6. Boutons
   -------------------------------------------------------------------------- */
.btn {
  font-family: var(--font-label);
  font-size: 14px;
  letter-spacing: .01em;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: var(--pill);
  display: inline-block;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-primary { background: var(--indigo); color: #fff; }
.btn-primary:hover,
.btn-primary:focus-visible { background: var(--green-deep); transform: translateY(-1px); }

.cta-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
/* --------------------------------------------------------------------------
   7. Ouvertures de page (hero / intro)
   -------------------------------------------------------------------------- */
.hero { padding: 88px 0 var(--space-6); position: relative; overflow: hidden; }
.hero h1 { font-size: clamp(38px, 6vw, 68px); margin: 0 0 var(--space-5); max-width: 15ch; }
.hero .lede { font-size: var(--fs-lead); max-width: 60ch; color: var(--ink); margin: 0 0 34px; }
.hero .lede b { font-weight: 600; color: var(--green-deep); }
.intro { padding: 80px 0 30px; }
.intro h1 { font-size: var(--fs-h1); margin: 0 0 var(--space-4); max-width: 18ch; }
.intro .lede { font-size: var(--fs-lead); max-width: 64ch; color: var(--ink); margin: 0; }
/* le chapô peut compter deux paragraphes : sans cela ils se collent */
.intro .lede + .lede { margin-top: var(--space-4); }
.intro .lede b { font-weight: 600; color: var(--green-deep); }
/* --------------------------------------------------------------------------
   8. Signature « trait d'union » (accueil)
   -------------------------------------------------------------------------- *//* --------------------------------------------------------------------------
   9. Double dé-risquage (accueil)
   -------------------------------------------------------------------------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.face {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px;
  position: relative;
}
.face.producers { border-top: 3px solid var(--green); }
.face.industry { border-top: 3px solid var(--indigo); }
.face .tag {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
.face h3 { font-size: 23px; margin: 0 0 var(--space-3); }
.face p { margin: 0; color: var(--ink); font-size: 15.5px; }
/* --------------------------------------------------------------------------
   10. Passeport ingrédient (accueil)
   -------------------------------------------------------------------------- */
.approach { background: var(--indigo); color: var(--on-indigo); }
.approach .eyebrow { color: var(--mint); }
.approach .eyebrow::before { background: var(--amber); }
.approach h2 { color: #fff; }
.approach .section-head p { color: var(--on-indigo-dim); }
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: rgba(255, 255, 255, .14);
  border-radius: var(--radius);
  overflow: hidden;
}
.step { background: var(--indigo); padding: 30px 24px; }
.step .num {
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 600;
  color: var(--amber);
  letter-spacing: .08em;
}
.step h3 { color: #fff; font-size: 20px; margin: var(--space-3) 0 10px; }
.step p { margin: 0; color: var(--on-indigo-dim); font-size: 14.5px; line-height: 1.55; }
/* --------------------------------------------------------------------------
   11. Raison d'être (accueil)
   -------------------------------------------------------------------------- */
.purpose { background: var(--paper-2); }
.purpose-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-7); align-items: start; }
.purpose h2 { font-size: clamp(26px, 3vw, 36px); margin: 0 0 var(--space-4); max-width: 16ch; }
.purpose .story { font-size: 17px; color: var(--ink); margin: 0 0 18px; }
.purpose .story b { font-weight: 600; color: var(--green-deep); }
/* --------------------------------------------------------------------------
   12. Ancrage territorial (accueil)
   -------------------------------------------------------------------------- */
.territory-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--space-7); align-items: center; }
.territory h2 { font-size: clamp(26px, 3vw, 36px); margin: 0 0 var(--space-4); max-width: 14ch; }
.territory p { font-size: 17px; color: var(--ink); margin: 0 0 var(--space-3); }
.pillars { display: grid; gap: var(--space-3); }
.pillar {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
}
.pillar b { font-family: var(--font-display); font-weight: 600; color: var(--indigo); font-size: 16px; }
.pillar span { display: block; color: var(--muted); font-size: 14px; margin-top: 3px; }
/* --------------------------------------------------------------------------
   13. Constat, verrous & mapping (approche)
   -------------------------------------------------------------------------- */
.constat { border-radius: var(--radius-xl); }
.constat p { font-size: 18px; margin: 0; max-width: 70ch; }
.constat b { color: var(--green-deep); }
/* Les quatre verrous — voir la section « Les quatre verrous » plus bas.
   Quatre cartes identiques dans une grille faisaient tableau : les boîtes
   ont disparu, il ne reste que le médaillon, le numéro et le texte. */
.obs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7) var(--space-6);
  margin-top: var(--space-6);
  align-items: start;
}
/* Le bloc « à chaque verrou, une réponse » — voir la section 51 plus bas. */
.map {
  background: var(--indigo);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7) var(--space-6);
  align-items: start;
}
.result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.res {
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--green);
  border-radius: var(--radius);
  padding: 28px;
}
.res h3 { font-size: 19px; margin: 0 0 var(--space-2); }
.res p { margin: 0; font-size: 15px; color: var(--muted); }
/* --------------------------------------------------------------------------
   14. Chaîne d'expertises & profils (à propos)
   -------------------------------------------------------------------------- */
.chain {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: var(--radius);
  margin: 44px 0 var(--space-2);
}
.chain .link { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; text-align: center; }
.chain .link .fn {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 6px;
}
.chain .link b { font-family: var(--font-display); font-weight: 600; color: var(--indigo); font-size: 17px; }
.chain .j { color: var(--amber); font-family: var(--font-label); font-weight: 600; font-size: 20px; text-align: center; }
.chain .link.a { border-top: 3px solid var(--green); }
.chain .link.b { border-top: 3px solid var(--indigo); }
.chain .link.c { border-top: 3px solid var(--amber); }
.profile {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-6);
  align-items: start;
  padding: 44px 0;
  border-top: 1px solid var(--line);
}
.portrait {
  width: 154px;
  height: 154px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: var(--shadow-portrait);
}
.p-name { font-family: var(--font-display); font-weight: 600; font-size: 27px; color: var(--indigo); margin: 0 0 var(--space-1); }
.p-role {
  font-family: var(--font-label);
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin: 0 0 var(--space-4);
  font-weight: 600;
}
.p-body p { margin: 0 0 15px; font-size: var(--fs-body); color: var(--ink); }
.p-body p b { color: var(--indigo); font-weight: 600; }
.p-brings {
  margin-top: var(--space-4);
  padding: var(--radius) var(--space-4);
  background: var(--paper-2);
  border-left: 3px solid var(--amber);
  border-radius: 10px;
}
.p-brings span {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 5px;
}
.p-brings p { margin: 0; font-size: 15.5px; color: var(--ink); font-weight: 500; }
.callout {
  background: var(--indigo);
  color: var(--on-indigo);
  border-radius: var(--radius-xl);
  padding: var(--space-6) 44px;
  margin-top: var(--space-4);
}
.callout .eyebrow { color: var(--mint); }
.callout .eyebrow::before { background: var(--amber); }
.callout p { font-size: 18px; margin: 0; max-width: 74ch; }
.callout b { color: #fff; font-family: var(--font-display); font-weight: 600; }
/* --------------------------------------------------------------------------
   15. Bloc contact — deux variantes
   .contact-band : bandeau pleine largeur (accueil)
   .contact-card : carte arrondie en fin de page (autres pages)
   -------------------------------------------------------------------------- */
.contact { background: var(--green-deep); color: var(--on-green); text-align: center; }
.contact h2 { color: #fff; font-size: var(--fs-h2); margin: 0 auto var(--radius); max-width: 22ch; }
.contact p { color: var(--on-green-dim); font-size: 17px; max-width: 52ch; margin: 0 auto 30px; }
.contact .eyebrow { color: var(--mint); justify-content: center; }
.contact .btn,
.contact .btn-primary { background: var(--amber); color: var(--ink); }
.contact .btn:hover,
.contact .btn:focus-visible,
.contact .btn-primary:hover,
.contact .btn-primary:focus-visible { background: #fff; color: var(--ink); }
.contact-card { border-radius: var(--radius-2xl); margin: 44px 0 0; padding: 60px var(--wrap-pad); }
/* --------------------------------------------------------------------------
   16. Pied de page
   -------------------------------------------------------------------------- */
footer { background: var(--indigo); color: var(--foot-text); padding: 44px 0; }
.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.foot .fbrand { display: block; line-height: 0; }
.foot .fbrand img { width: 196px; height: auto; display: block; }
.foot .fbaseline {
  font-family: var(--font-baseline);
  font-weight: 700;
  font-style: italic;
  font-size: 15.5px;
  color: #fff;
  margin: 9px 0 0 63px;
}
.foot .fbaseline b { color: var(--logo-blue-light); }
.foot a { color: var(--foot-link); text-decoration: none; }
.foot a:hover,
.foot a:focus-visible { color: #fff; }
.foot .meta { font-size: var(--fs-small); line-height: 1.7; }
.foot-legal { font-size: 12.5px; }
/* --------------------------------------------------------------------------
   17. Page de contenu long (mentions légales)
   -------------------------------------------------------------------------- */
.legal { max-width: 74ch; }
.legal h2 {
  font-size: clamp(22px, 2.4vw, 28px);
  margin: var(--space-7) 0 var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.legal h2:first-of-type { border-top: 0; margin-top: var(--space-4); padding-top: 0; }
.legal h3 { font-size: 18px; margin: var(--space-5) 0 var(--space-2); }
.legal p { margin: 0 0 var(--space-3); }
.legal ul { margin: 0 0 var(--space-3); padding-left: 1.2em; }
.legal li { margin-bottom: 6px; }
.legal dl { margin: 0 0 var(--space-3); }
.legal dt {
  font-family: var(--font-label);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: var(--space-3);
}
.legal dd { margin: 2px 0 0; }
.legal .todo {
  font-family: var(--font-label);
  font-size: 13.5px;
  color: var(--flag);
  background: var(--flag-bg);
  border: 1px dashed var(--flag);
  border-radius: 6px;
  padding: 1px 7px;
  overflow-wrap: anywhere;
}
.legal .updated { font-size: var(--fs-small); color: var(--muted); font-style: italic; }
/* --------------------------------------------------------------------------
   18. Révélation au défilement
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .85s var(--ease-ressort), transform 1.05s var(--ease-ressort);
}
.reveal.in { opacity: 1; transform: none; }
/* Les titres se dévoilent par un voile qui remonte : plus tenu qu'un fondu. */
.reveal h1,
.reveal h2 {
  clip-path: inset(0 0 108% 0);
  transition: clip-path 1.15s var(--ease-ressort) .06s;
}
.reveal.in h1,
.reveal.in h2 { clip-path: inset(0 0 -25% 0); }

/* --------------------------------------------------------------------------
   19. Adaptations
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
:root { --section-y: var(--section-y-sm); --wrap-pad: 22px; }
/* La navigation passe sur plusieurs lignes : tous les liens restent
     accessibles, mais l'en-tête cesse d'être collant pour ne pas amputer
     la hauteur utile de l'écran. */
header { position: static; }
nav { gap: var(--space-3); padding: 12px 0; position: relative; }
/* Cinq entrées ne tiennent pas sur une ligne à cette largeur : le bouton de
     contact restait seul sur la sienne, en pavé isolé. Il monte se placer en
     vis-à-vis du logotype, et les quatre liens gardent leur ligne pleine.
     C'est la disposition d'en-tête habituelle en petit format. */
.nav-cta { position: absolute; top: 14px; right: 0; }
/* Au doigt, une cible se vise mal en dessous de 44 px : les liens de
     navigation et de pied de page gagnent la hauteur qui leur manque en
     rembourrage, sans que le texte bouge. */
.nav-links { gap: 18px; margin: -11px 0; }
.nav-links a { font-size: 14px; padding: 11px 0; }
.foot a { display: inline-block; padding: 7px 0; }
.duo,
.steps,
.purpose-grid,
.territory-grid,
.obs-grid,
.result-grid { grid-template-columns: 1fr; }
.purpose-grid,
.territory-grid { gap: 32px; }
.map { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-5) var(--space-4); }
.chain { grid-template-columns: 1fr; gap: 10px; }
/* Pivotée d'un quart de tour, la flèche garderait la largeur de la colonne
     comme hauteur apparente et empiéterait sur les cartes voisines : on la
     ramène à un carré avant de la faire tourner. */
.chain .j {
  width: 34px; height: 34px; line-height: 34px;
  margin: 0 auto; transform: rotate(90deg);
}
.profile { grid-template-columns: 1fr; gap: var(--space-4); }
.portrait { width: 120px; height: 120px; }
.hero { padding: 56px 0 var(--space-6); }
.intro { padding: 52px 0 26px; }
.constat { padding: 30px; }
.callout { padding: 30px 26px; }
}

@media (max-width: 560px) {
/* La baseline fait partie du logotype : la masquer amputait la marque de sa
     moitié parlante. Elle passe sous le signe, en plus petit, alignée sur lui. */
.baseline { display: block; margin: 4px 0 0 2px; font-size: 12.5px; }
.nav-links { gap: var(--space-3); row-gap: 10px; }
.nav-links a { font-size: 13.5px; }
/* Le bouton bleu, seul sur sa ligne, faisait un pavé isolé sous les liens.
     En petit format il redevient un lien, distingué par l'ambre et un filet,
     et rejoint la même ligne que les autres. */
.nav-cta {
  background: none;
  color: var(--logo-blue-ink) !important;
  padding: 11px 0;
  border-radius: 0;
  border-bottom: 2px solid var(--amber);
  font-weight: 600;
}
.nav-cta:hover,
.nav-cta:focus-visible { background: none; color: var(--indigo) !important; }
.face { padding: 26px; }
.contact-card { padding: 44px 22px; }
}

@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.reveal { opacity: 1; transform: none; transition: none; }
.btn { transition: none; }
}

/* Sans script, aucun bloc ne recevrait la classe « in » et la page resterait
   blanche. Le contenu s'affiche alors d'emblée. */
@media (scripting: none) {
.reveal { opacity: 1; transform: none; transition: none; }
.reveal h1,
.reveal h2 { clip-path: none; }
}

/* --------------------------------------------------------------------------
   20. Impression
   -------------------------------------------------------------------------- */
@media print {
header { display: none; }
body { background: #fff; }
.reveal { opacity: 1; transform: none; }
}
/* --------------------------------------------------------------------------
   21. Ornements dérivés du signe du logotype
   Le signe est reconstruit en SVG (1 disque central, 6 satellites à 60°,
   27 rais) pour servir de motif redimensionnable et animable. Le logotype
   lui-même reste toujours le fichier d'origine.
   -------------------------------------------------------------------------- */

/* filigrane du hero */
.hero { position: relative; }
/* lueur d'ambiance de l'ancien hero en colonne — sans objet en plein cadre */
.hero:not(.hero-plein)::before {
  content: "";
  position: absolute;
  inset: -20% -30% auto auto;
  width: min(52vw, 620px);
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, rgba(0, 158, 224, .10), rgba(0, 158, 224, 0) 62%);
  pointer-events: none;
}

.hero .wrap { position: relative; z-index: 1; }
/* apparition du signe */
/* petit signe en repère de section */

/* --------------------------------------------------------------------------
   22. Pictogrammes
   -------------------------------------------------------------------------- */
.picto {
  width: 34px;
  height: 34px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.step .picto { color: var(--mint); margin-bottom: 18px; }
.verrou { color: var(--flag); }
.picto .plein { fill: currentColor; stroke: none; }
/* --------------------------------------------------------------------------
   23. Rail animé du passeport ingrédient
   -------------------------------------------------------------------------- */
.steps { position: relative; }
.steps::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 0;
  height: 2px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.4s cubic-bezier(.22, .8, .3, 1) .25s;
}
.steps.in::after { transform: scaleX(1); }
/* --------------------------------------------------------------------------
   24. Archipel — motif de l'ancrage territorial
   Formes d'îles volontairement abstraites : le motif évoque un territoire
   insulaire sans prétendre représenter une géographie réelle.
   -------------------------------------------------------------------------- */

/* Isobathes : courbes de niveau décalées autour de chaque île. */

@media (prefers-reduced-motion: no-preference) {
}
/* --------------------------------------------------------------------------
   25. Réactions au survol
   -------------------------------------------------------------------------- */
.face,
.res,
.pillar,
.chain .link {
  transition: transform .45s var(--ease-doux), box-shadow .45s var(--ease-doux), border-color .45s var(--ease-doux);
}
.face,
.res,
.chain .link,
.pillar { box-shadow: var(--ombre-carte); }
.face:hover,
.res:hover,
.chain .link:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-carte-haute);
  border-color: color-mix(in srgb, var(--line) 55%, var(--indigo));
}
.pillar:hover { transform: translateX(3px); border-left-color: var(--green); }
.step { transition: background .3s ease; }
.step:hover { background: #16395a; }
.portrait { transition: box-shadow .35s ease, transform .35s ease; }
.profile:hover .portrait { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(18, 48, 73, .26); }
/* --------------------------------------------------------------------------
   26. Barre de progression de lecture (CSS seul, si le navigateur le gère)
   -------------------------------------------------------------------------- */
.progression {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 40;
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
.progression {
    animation: progression linear;
    animation-timeline: scroll(root block);
  }
  @keyframes progression { to { transform: scaleX(1); } }
}
/* --------------------------------------------------------------------------
   27. Détails
   -------------------------------------------------------------------------- */
::selection { background: var(--logo-blue); color: #fff; }
.approach,
.map,
.callout { position: relative; overflow: clip; }
.approach::after,
.callout::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 158, 224, .16), rgba(0, 158, 224, 0) 70%);
  pointer-events: none;
}

@media (max-width: 860px) {

.steps::after { display: none; }
.brand img { width: 128px; }
.foot .fbrand img { width: 150px; }
}

@media (max-width: 560px) {
/* sous cette largeur l'ornement passerait derrière le titre : on le retire. */
.hero::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {

.steps::after { transition: none; transform: scaleX(1); }
.face,
.res,
.pillar,
.chain .link,
.step,
.portrait { transition: none; }
.face:hover,
.res:hover,
.chain .link:hover,
.pillar:hover,
.profile:hover .portrait { transform: none; }
.progression { animation: none; }
}
/* --------------------------------------------------------------------------
   28. Illustrations
   Deux scènes en ligne claire, dessinées en SVG : le passeport ingrédient
   (l'objet que produit Omunis) et un rameau (le vivant). Palette de la §3.
   -------------------------------------------------------------------------- */
.illu-passeport svg { width: 100%; height: auto; display: block; overflow: visible; }
/* — le passeport ingrédient — */
.illu-passeport { max-width: 400px; margin-inline: auto; }
.illu-passeport .feuillet-arriere rect { fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 1.5; }
.illu-passeport .feuillet-fond { fill: var(--paper); }
.illu-passeport .filet-ambre { fill: var(--amber); }
.illu-passeport .ligne-forte { fill: var(--indigo); opacity: .85; }
.illu-passeport .separateur { stroke: var(--line); stroke-width: 1.5; }
.illu-passeport .ligne-faible { fill: #9caaa2; }
.illu-passeport .ligne-moyenne { fill: #c6d0ca; }
.illu-passeport .anneau { fill: var(--paper); stroke-width: 2.5; }
.illu-passeport .anneau-vert { stroke: var(--green); }
.illu-passeport .anneau-indigo { stroke: var(--indigo-soft); }
.illu-passeport .anneau-ambre { stroke: var(--amber); }
.illu-passeport .coche { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.illu-passeport .coche-vert { stroke: var(--green); }
.illu-passeport .coche-indigo { stroke: var(--indigo-soft); }
.illu-passeport .coche-ambre { stroke: var(--amber); }
/* — le rameau — */

/* — mise en page de l'en-tête du passeport — */
.passeport-tete {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--space-7);
  align-items: center;
  margin-bottom: var(--space-6);
}
.passeport-tete .section-head { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   29. Animation des illustrations
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
.illu-passeport .tampon,
.illu-passeport .champs rect { transform-box: fill-box; transform-origin: center; }
.illu-passeport.in .feuillet-arriere { animation: illu-glisse .8s cubic-bezier(.22, .8, .3, 1) backwards; }
.illu-passeport.in .feuillet { animation: illu-glisse .8s cubic-bezier(.22, .8, .3, 1) .1s backwards; }
.illu-passeport.in .champs rect {
    animation: illu-parait .5s ease backwards;
    animation-delay: calc(.45s + var(--i) * .12s);
  }
.illu-passeport.in .tampon {
    animation: illu-tampon .55s cubic-bezier(.2, .8, .3, 1.35) backwards;
    animation-delay: calc(.85s + var(--i) * .17s);
  }

  @keyframes illu-glisse { from { opacity: 0; transform: translateY(16px); } }
  @keyframes illu-parait { from { opacity: 0; } }
  @keyframes illu-tampon { from { opacity: 0; transform: scale(1.9) rotate(-8deg); } }
}

@media (max-width: 860px) {
.passeport-tete { grid-template-columns: 1fr; gap: var(--space-6); }
.illu-passeport { max-width: 330px; }

}
/* --------------------------------------------------------------------------
   30. Cadenas des verrous (page approche)
   -------------------------------------------------------------------------- */
.cadenas {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  margin-right: 7px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  overflow: visible;
}
.cadenas .anse { transform-box: fill-box; transform-origin: 8% 100%; }
@keyframes cadenas-ouvre { from { transform: rotate(0deg); } to { transform: rotate(-26deg); } }

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

}
/* --------------------------------------------------------------------------
   32. Pictogrammes de la chaîne d'expertises (à propos)
   -------------------------------------------------------------------------- */
.chain .link .picto { margin: 0 auto 14px; }
.chain .link.a .picto { color: var(--green-deep); }
.chain .link.b .picto { color: var(--indigo-soft); }
.chain .link.c .picto { color: #a8761f; }
/* --------------------------------------------------------------------------
   33. Pictogrammes réactifs
   -------------------------------------------------------------------------- */
.picto,
.picto .plein { transition: transform .35s ease; }
.step:hover .picto,
.verrou:hover .picto,
.chain .link:hover .picto { transform: translateY(-3px) scale(1.06); }
@media (prefers-reduced-motion: reduce) {
.picto,
.picto .plein { transition: none; }
.step:hover .picto,
.verrou:hover .picto,
.chain .link:hover .picto { transform: none; }
}
/* --------------------------------------------------------------------------
   34. Matière — grain et hairlines
   Un grain très léger casse l'aplat numérique et donne du corps aux fonds.
   Motif SVG en data-URI : aucune requête réseau.
   -------------------------------------------------------------------------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: multiply;
  background-size: 190px 190px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='190' height='190' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   35. Mouvement lié au défilement
   Les blocs ne se contentent plus d'apparaître : ils dérivent avec le
   défilement. Entièrement en CSS, et strictement en amélioration
   progressive — sans prise en charge, la page reste exactement lisible.
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
.illu-passeport {
      animation: derive linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes derive {
      from { transform: translateY(30px); }
      to { transform: translateY(-30px); }
    }
/* Les portraits se redressent en entrant dans le champ. */
.profile .portrait {
      animation: portrait-entre linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 90%;
    }
    @keyframes portrait-entre {
      from { transform: translateY(26px) scale(.94); }
      to { transform: none; }
    }
  }
}
/* --------------------------------------------------------------------------
   36. Transitions entre pages (View Transitions)
   La navigation entre les quatre pages devient un fondu enchaîné ; l'en-tête
   et le pied de page restent en place au lieu de clignoter.
   -------------------------------------------------------------------------- */
@view-transition { navigation: auto; }
header { view-transition-name: entete; }
footer { view-transition-name: pied; }
::view-transition-old(root) {
  animation: vt-sortie .32s var(--ease-net) both;
}
::view-transition-new(root) {
  animation: vt-entree .46s var(--ease-doux) both;
}
@keyframes vt-sortie { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-entree { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) { animation: none !important; }
}

/* --------------------------------------------------------------------------
   37. Sobriété du mouvement
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.reveal h1,
.reveal h2 { clip-path: none; transition: none; }
body::after { display: none; }
}
/* --------------------------------------------------------------------------
   38. Photographies
   -------------------------------------------------------------------------- *//* — hero : texte à gauche, photographie à droite — */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
  }
}
/* — ancrage territorial : bandeau photographique — */
.territory-photo {
  position: relative;
  isolation: isolate;
  overflow: clip;
  color: var(--on-indigo);
}
.territory-fond { position: absolute; inset: 0; z-index: -2; display: block; }
.territory-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom,
      rgba(9, 28, 45, .36) 0%,
      rgba(9, 28, 45, .12) 36%,
      rgba(9, 28, 45, 0) 60%),
    linear-gradient(100deg,
      rgba(9, 28, 45, .80) 0%,
      rgba(9, 28, 45, .68) 34%,
      rgba(9, 28, 45, .38) 72%,
      rgba(9, 28, 45, .18) 100%);
}
.territory-photo h2 { color: #fff; }
.territory-photo p { color: var(--on-indigo-dim); }
.territory-photo .eyebrow { color: var(--mint); }
.territory-photo .pillar {
  /* verre sombre : le fond photographique reste lisible derrière,
     sans jamais faire tomber le contraste du texte sous 4,5:1. */
  background: rgba(6, 22, 36, .62);
  border-color: rgba(255, 255, 255, .14);
  border-left-color: var(--amber);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: 0 10px 30px rgba(3, 12, 20, .28);
}
.territory-photo .pillar b { color: #fff; }
.territory-photo .pillar span { color: var(--on-indigo-dim); }
.territory-photo .pillar:hover {
  background: rgba(6, 22, 36, .74);
  border-left-color: var(--mint);
}

@media (max-width: 860px) {

}
/* --------------------------------------------------------------------------
   39. Hero plein cadre
   Le média occupe toute la largeur ; le texte passe en blanc par-dessus un
   voile dégradé. Prévu pour recevoir une vidéo en boucle à la place de
   l'image, sans changer le reste.
   -------------------------------------------------------------------------- */
.hero-plein {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: min(78vh, 660px);
  padding: var(--space-8) 0;
  color: #fff;
}
.hero-plein .hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
}
.hero-plein .hero-media img,
.hero-plein video.hero-media { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero-plein::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Voile volontairement léger : c'est la vidéo elle-même qui est assombrie
     (voir le filtre plus bas), pas la page qui la recouvre. Le dégradé ne
     sert plus qu'à asseoir le texte à gauche. */
  background:
    linear-gradient(100deg,
      rgba(5, 18, 30, .74) 0%,
      rgba(5, 18, 30, .58) 36%,
      rgba(5, 18, 30, .16) 72%,
      rgba(5, 18, 30, .04) 100%),
    linear-gradient(to top, rgba(5, 18, 30, .50) 0%, rgba(5, 18, 30, 0) 38%);
}
.hero-texte {
  max-width: 60ch;
  /* halo sombre très diffus : il suit les lettres au lieu de couvrir l'image */
  text-shadow: 0 1px 2px rgba(5, 18, 30, .55), 0 2px 26px rgba(5, 18, 30, .75);
}
.hero-plein .eyebrow { color: var(--mint); }
.hero-plein h1 { color: #fff; font-size: clamp(38px, 6vw, 68px); margin: 0 0 var(--space-5); max-width: 15ch; }
.hero-plein .lede { font-size: var(--fs-lead); max-width: 58ch; color: #e8eeeb; margin: 0 0 34px; }
/* Devant la végétation, un vert clair se dissout. « Preuve partagée » passe
   donc en ambre — c'est d'ailleurs la couleur de la preuve dans le système. */
.hero-plein .lede b { font-weight: 600; color: #f0bd63; }
/* sur la végétation, un blanc chaud se détache mieux qu'un vert ;
   le tiret ambre porte seul l'accent */
.hero-plein .eyebrow { color: #eaf0ec; }
/* bouton secondaire lisible sur image */
.btn-clair { border: 1.5px solid rgba(255, 255, 255, .55); color: #fff; }
.btn-clair:hover,
.btn-clair:focus-visible { border-color: #fff; background: rgba(255, 255, 255, .12); }

/* léger mouvement d'appareil, coupé si l'utilisateur le refuse */
@media (prefers-reduced-motion: no-preference) {
.hero-plein .hero-media img { animation: hero-zoom 22s ease-out both; }
  @keyframes hero-zoom {
    from { transform: scale(1.06); }
    to { transform: scale(1); }
  }
}
@media (prefers-reduced-motion: reduce) {
.hero-plein video.hero-media { display: none; }
}

/* la nature morte rejoint « Notre raison d'être » */
@media (max-width: 860px) {
.hero-plein { min-height: min(72vh, 560px); padding: var(--space-7) 0; }
/* Sur petit écran le texte couvre toute la largeur : le fond doit devenir
     une texture, pas une image. Voile nettement plus dense. */
.hero-plein::before {
    background:
      linear-gradient(180deg, rgba(5, 18, 30, .62) 0%, rgba(5, 18, 30, .78) 100%);
  }
}
/* --------------------------------------------------------------------------
   40. Coutures entre sections
   Les bandeaux sombres s'arrondissent en haut : la page se lit comme des
   panneaux empilés plutôt que comme des rectangles bord à bord.
   -------------------------------------------------------------------------- */
.approach,
.territory-photo,
.contact:not(.contact-card) {
  border-radius: 42px 42px 0 0;
  overflow: clip;
}
/* --------------------------------------------------------------------------
   41. En-tête flottant sur le hero (accueil)
   Sans prise en charge du défilement piloté, l'en-tête reste opaque et le
   logotype foncé : le repli est l'état actuel du site, jamais un état cassé.
   -------------------------------------------------------------------------- */
.brand { display: grid; }
.brand img { grid-area: 1 / 1; }
/* Les deux logotypes sont toujours empilés dans la même cellule ; seule
   l'opacité les départage. Aucun basculement de display, donc aucun état
   intermédiaire possible : par défaut, seul le logotype foncé est visible. */
.logo-blanc { opacity: 0; pointer-events: none; }

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 861px) {
:root { --h-entete: 104px; }
/* le hero passe sous l'en-tête */
.accueil .hero-plein {
      margin-top: calc(-1 * var(--h-entete));
      padding-top: calc(var(--space-8) + var(--h-entete));
    }
.accueil .entete-flottante {
      background: transparent;
      border-bottom-color: transparent;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
/* le fond dépoli vit sur un calque dont l'opacité suit le défilement */
.accueil .entete-flottante::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: rgba(242, 239, 233, .86);
      -webkit-backdrop-filter: saturate(1.4) blur(8px);
      backdrop-filter: saturate(1.4) blur(8px);
      border-bottom: 1px solid var(--line);
      opacity: 0;
      animation: entete-fond linear both;
      animation-timeline: scroll(root block);
      animation-range: 40px 250px;
    }
    @keyframes entete-fond { to { opacity: 1; } }
.accueil .logo-blanc {
      opacity: 1;
      animation: fondu-sortie linear both;
      animation-timeline: scroll(root block);
      animation-range: 40px 250px;
    }
.accueil .logo-encre {
      opacity: 0;
      animation: fondu-entree linear both;
      animation-timeline: scroll(root block);
      animation-range: 40px 250px;
    }
    @keyframes fondu-sortie { to { opacity: 0; } }
    @keyframes fondu-entree { to { opacity: 1; } }
.accueil .baseline,
.accueil .nav-links a:not(.nav-cta) {
      animation: texte-entete linear both;
      animation-timeline: scroll(root block);
      animation-range: 40px 250px;
    }
    @keyframes texte-entete {
      from { color: #ffffff; }
      to { color: var(--ink); }
    }
.accueil .baseline b {
      animation: baseline-entete linear both;
      animation-timeline: scroll(root block);
      animation-range: 40px 250px;
    }
    @keyframes baseline-entete {
      from { color: #7fd4f5; }
      to { color: var(--logo-blue-ink); }
    }
.accueil .nav-cta {
      animation: cta-entete linear both;
      animation-timeline: scroll(root block);
      animation-range: 40px 250px;
    }
    @keyframes cta-entete {
      from { background-color: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
      to { background-color: var(--indigo); box-shadow: inset 0 0 0 1px rgba(18, 48, 73, 0); }
    }
  }
}

/* --------------------------------------------------------------------------
   42. Le passeport ingrédient en section épinglée
   La section devient haute, la scène se fige, et les quatre étapes
   s'éclairent l'une après l'autre au rythme du défilement. Tout est piloté
   par une frise de vue en CSS : aucun JavaScript, et sans prise en charge la
   section reste exactement celle d'aujourd'hui.
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 861px) {
.passeport-epingle {
      height: 320vh;
      padding: 0;
      view-timeline-name: --passeport;
      view-timeline-axis: block;
    }
.passeport-scene {
      position: sticky;
      top: 0;
      min-height: 100vh;
      display: grid;
      align-content: center;
      padding: var(--section-y) 0;
    }
.passeport-epingle .step .num { color: #f0bd63; }
.passeport-epingle .step {
      animation: etape-eclaire linear both;
      animation-timeline: --passeport;
    }
.passeport-epingle .step:nth-child(1) { animation-range: cover 22% cover 39%; }
.passeport-epingle .step:nth-child(2) { animation-range: cover 35% cover 52%; }
.passeport-epingle .step:nth-child(3) { animation-range: cover 48% cover 65%; }
.passeport-epingle .step:nth-child(4) { animation-range: cover 61% cover 78%; }
    /* L'étape inactive reste LISIBLE (contraste ~5:1 sur l'indigo) : le signal
       d'activité passe par le relief, pas par l'effacement du texte. */
    @keyframes etape-eclaire {
      0%   { opacity: .74; transform: translateY(0); }
      26%  { opacity: 1; transform: translateY(-6px); }
      74%  { opacity: 1; transform: translateY(-6px); }
      100% { opacity: .74; transform: translateY(0); }
    }
/* le rail ambre se remplit sur toute la séquence */
.passeport-epingle .steps::after {
      transition: none;
      animation: rail-passeport linear both;
      animation-timeline: --passeport;
      animation-range: cover 22% cover 78%;
    }
    @keyframes rail-passeport {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }
/* Les tampons du dossier tombent EN MÊME TEMPS que les étapes 2, 3 et 4
       s'éclairent : l'illustration et la liste deviennent un seul mécanisme. */
.passeport-epingle .illu-passeport .tampon {
      animation: illu-tampon .5s cubic-bezier(.2, .8, .3, 1.35) both;
      animation-timeline: --passeport;
    }
.passeport-epingle .illu-passeport .tampon:nth-child(1) { animation-range: cover 36% cover 41%; }
.passeport-epingle .illu-passeport .tampon:nth-child(2) { animation-range: cover 49% cover 54%; }
.passeport-epingle .illu-passeport .tampon:nth-child(3) { animation-range: cover 62% cover 67%; }
/* les champs du dossier se remplissent pendant la première étape */
.passeport-epingle .illu-passeport .champs rect {
      animation: illu-parait .4s ease both;
      animation-timeline: --passeport;
      animation-range: calc(24% + var(--i) * 3%) calc(30% + var(--i) * 3%);
    }
/* l'étape active pousse son médaillon vers le plein */
.passeport-epingle .step .picto {
      animation: medaillon-actif linear both;
      animation-timeline: --passeport;
    }
.passeport-epingle .step:nth-child(1) .picto { animation-range: cover 22% cover 39%; }
.passeport-epingle .step:nth-child(2) .picto { animation-range: cover 35% cover 52%; }
.passeport-epingle .step:nth-child(3) .picto { animation-range: cover 48% cover 65%; }
.passeport-epingle .step:nth-child(4) .picto { animation-range: cover 61% cover 78%; }
    @keyframes medaillon-actif {
      0%, 100% {
        background: color-mix(in srgb, currentColor 7%, transparent);
        border-color: color-mix(in srgb, currentColor 34%, transparent);
      }
      26%, 74% {
        background: color-mix(in srgb, currentColor 20%, transparent);
        border-color: color-mix(in srgb, currentColor 70%, transparent);
      }
    }
/* l'illustration accompagne la séquence */
.passeport-epingle .illu-passeport {
      animation: passeport-derive linear both;
      animation-timeline: --passeport;
      animation-range: cover 20% cover 80%;
    }
    @keyframes passeport-derive {
      from { transform: translateY(24px) rotate(-1.5deg); }
      to { transform: translateY(-24px) rotate(1.5deg); }
    }
  }
}

@media (max-width: 860px) {
.approach,
.territory-photo,
.contact:not(.contact-card) { border-radius: 26px 26px 0 0; }
}
/* --------------------------------------------------------------------------
   44. Pictogrammes en médaillon
   Le trait seul faisait « banque d'icônes ». Chaque pictogramme est posé
   dans un médaillon à filet, écho des anneaux des portraits et des tampons
   du passeport — et le remplissage passe en duotone.
   -------------------------------------------------------------------------- */
.picto {
  width: 74px;
  height: 74px;
  padding: 19px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, currentColor 34%, transparent);
  background: color-mix(in srgb, currentColor 7%, transparent);
  stroke-width: 1.5;
  stroke-opacity: .78;
  transition: background .45s var(--ease-doux), border-color .45s var(--ease-doux), transform .45s var(--ease-doux);
}
.picto .plein { stroke: none; stroke-opacity: 1; }
.step .picto { margin-bottom: 22px; }
.chain .link .picto { width: 62px; height: 62px; padding: 15px; margin: 0 auto 16px; }
.step:hover .picto,
.verrou:hover .picto,
.chain .link:hover .picto {
  transform: translateY(-3px);
  background: color-mix(in srgb, currentColor 14%, transparent);
  border-color: color-mix(in srgb, currentColor 55%, transparent);
}

@media (max-width: 860px) {
.picto { width: 64px; height: 64px; padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.picto { transition: none; }
.step:hover .picto,
.verrou:hover .picto,
.chain .link:hover .picto { transform: none; }
}
/* --------------------------------------------------------------------------
   45. Photographies dans les cartes et la raison d'être
   -------------------------------------------------------------------------- */
.face-photo {
  display: block;
  margin: -34px -34px var(--space-5);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: clip;
}
.face-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .7s var(--ease-doux);
}
.producers .face-photo img { object-position: 50% 52%; }
.industry .face-photo img { object-position: 50% 78%; }
.face:hover .face-photo img { transform: scale(1.03); }
.purpose-image {
  margin: var(--space-6) 0 0;
  border-radius: var(--radius-lg);
  overflow: clip;
  box-shadow: var(--ombre-carte);
}
.purpose-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* la vidéo d'ambiance : un flou léger absorbe l'agrandissement du 640p
   et fait office de profondeur de champ derrière le voile *//* On baisse la luminance de l'image plutôt que de la masquer : la végétation
   et le mouvement restent lisibles. Le flou tombe à 0,6 px — juste de quoi
   absorber l'agrandissement du 640p. */
.hero-plein video.hero-media {
  filter: brightness(.66) saturate(1.06);
  transform: scale(1.03);
}

@media (max-width: 860px) {
.face-photo { margin: -26px -26px var(--space-4); }
.purpose-image img { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) {
.face-photo img { transition: none; }
.face:hover .face-photo img { transform: none; }
}
/* --------------------------------------------------------------------------
   46. Page « Notre approche » — bandeau du constat
   Le constat sourcé se détache sur une vue de cirque : l'image dit
   l'enclavement dont parle le texte.
   -------------------------------------------------------------------------- */
.constat-bande {
  position: relative;
  isolation: isolate;
  overflow: clip;
  border-radius: 42px 42px 0 0;
  /* plus haut qu'avant : la ligne de crête entre dans le cadre, et le
     bandeau cesse d'être une simple masse sombre. */
  min-height: min(88vh, 760px);
  display: grid;
  align-content: center;
  padding: var(--space-8) 0;
  color: var(--on-indigo);
}
.constat-fond { position: absolute; inset: 0; z-index: -2; display: block; }
.constat-bande::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* deux voiles : l'un pousse depuis la gauche pour porter le texte,
     l'autre retient le ciel en haut. Ensemble ils tiennent le contraste
     au-dessus de 4,5:1 sans effacer la photographie. */
  background:
    linear-gradient(to bottom,
      rgba(6, 22, 36, .34) 0%,
      rgba(6, 22, 36, .10) 34%,
      rgba(6, 22, 36, 0) 58%),
    linear-gradient(100deg,
      rgba(6, 22, 36, .74) 0%,
      rgba(6, 22, 36, .60) 40%,
      rgba(6, 22, 36, .30) 72%,
      rgba(6, 22, 36, .12) 100%);
}
.constat-bande .constat {
  background: none;
  padding: 0;
  max-width: 62ch;
}
.constat-bande .constat p {
  color: #fff;
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.45;
  text-shadow: 0 1px 2px rgba(6, 22, 36, .5), 0 2px 22px rgba(6, 22, 36, .7);
}
.constat-bande .constat b { color: var(--mint); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
/* les réponses se posent l'une après l'autre */
.map.in .leve {
      animation: leve-pose .8s var(--ease-ressort) backwards;
      animation-delay: calc(.1s + var(--r) * .14s);
    }
    @keyframes leve-pose { from { opacity: 0; transform: translateY(22px); } }
  }
}
.res .picto { color: var(--green-deep); margin-bottom: var(--space-3); }

@media (max-width: 860px) {
.constat-bande { border-radius: 26px 26px 0 0; padding: var(--space-7) 0; }
.constat-bande::before {
    background: linear-gradient(180deg, rgba(6, 22, 36, .72) 0%, rgba(6, 22, 36, .86) 100%);
  }
}
/* --------------------------------------------------------------------------
   47. Travelling des bandeaux photographiques
   La variable --p est posée par assets/js/site.js : -1 quand le bandeau
   entre par le bas de l'écran, +1 quand il sort par le haut. Sans script,
   elle vaut 0 et l'image reste simplement cadrée.
   -------------------------------------------------------------------------- */
.constat-fond img,
.territory-fond img {
  /* L'image est volontairement plus haute que son cadre : 138 % de la
     hauteur, débordant d'un quart en haut comme en bas. C'est cette réserve
     — et non un scale() — qui donne sa course au travelling : elle vaut
     25 % de la hauteur du cadre, dont le mouvement n'en consomme que 21 %.
     Aucun agrandissement : la photographie reste à sa définition. */
  --debord: 25%;   /* réserve au-dessus et au-dessous du cadre */
  --course: 14%;   /* course du travelling, en % de la hauteur de l'image */
  position: absolute;
  left: 0;
  top: calc(-1 * var(--debord));
  width: 100%;
  height: calc(100% + 2 * var(--debord));
  object-fit: cover;
  object-position: center;
  transform: translate3d(0, calc(var(--p, 0) * var(--course)), 0);
  will-change: transform;
}
/* Sur mobile le bandeau est étroit et haut : un débord généreux y rognerait
   trop la largeur de la photographie. On réduit donc les deux valeurs. */
@media (max-width: 860px) {
.constat-fond img,
.territory-fond img { --debord: 14%; --course: 8%; }
}
@media (prefers-reduced-motion: reduce) {
.constat-fond img,
.territory-fond img { transform: none; }
}
/* --------------------------------------------------------------------------
   48. Déclarations
   Un registre réservé à une ou deux phrases par page — jamais à tous les
   titres. Capitales espacées, corps modéré : la force vient de l'espacement
   et de la rareté, pas de la taille.
   -------------------------------------------------------------------------- */
.declaration {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: clamp(21px, 2.5vw, 31px);
  line-height: 1.18;
  letter-spacing: .055em;
  text-transform: uppercase;
  font-variation-settings: normal;
  max-width: 22ch;
}
.declaration em { font-style: normal; color: var(--amber); }
.approach .declaration em,
.contact .declaration em { color: #f0bd63; }
/* --------------------------------------------------------------------------
   49. Le fil de la preuve — chronologie
   Un fil unique traverse les quatre jalons. Il se remplit d'ambre au rythme
   du défilement (variable --fp, posée par site.js) ; chaque jalon qu'il
   atteint s'« acquiert » : son millésime prend du gras, son nœud se remplit,
   et un trait d'union se tire sous le titre — la marque de la maison faite
   interaction. Rien n'est caché sans le script : voir le repli plus bas.
   -------------------------------------------------------------------------- */
.frise {
  /* La colonne du millésime est déduite de la taille du millésime lui-même :
     « 2016–2020 » mesure 4,6 fois sa hauteur de fonte en Fraunces. La colonne
     suit donc le clamp() sans jamais laisser le chiffre mordre sur le fil,
     à n'importe quelle largeur d'écran. */
  --taille-annee: clamp(34px, 3.6vw, 50px);
  /* « Depuis 2026 » est plus large qu'un millésime seul : la colonne est
     calculée sur le libellé le plus long, pas sur quatre chiffres. */
  --col-annee: calc(5.6 * var(--taille-annee) + 22px);
  --col-fil: 58px;
  /* hauteur du remplissage ambré, posée en pixels par site.js */
  --rail-plein: 0px;
  position: relative;
  margin-top: var(--space-7);
  padding: var(--space-2) 0;
}
/* le rail, puis sa portion parcourue */
.frise::before,
.frise::after {
  content: "";
  position: absolute;
  left: calc(var(--col-annee) + var(--col-fil) / 2);
  /* le fil part exactement du centre du premier nœud */
  top: calc(var(--space-2) + var(--space-6) + 22px);
  width: 2px;
  border-radius: 2px;
  transform: translateX(-50%);
}
.frise::before {
  /* le rail court du premier nœud jusqu'à un peu au-delà du dernier, puis
     s'efface : la chronologie ne se referme pas sur elle-même. La longueur
     est posée par le script ; la valeur de repli couvre le cas sans script. */
  height: var(--rail-total, calc(100% - 2 * var(--space-6)));
  background: linear-gradient(to bottom,
    var(--line) 0%, var(--line) 76%, transparent 100%);
}
.frise::after {
  height: var(--rail-plein);
  background: var(--amber-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 16%, transparent);
}
.jalon {
  position: relative;
  display: grid;
  grid-template-columns: var(--col-annee) var(--col-fil) minmax(0, 1fr);
  align-items: start;
  padding: var(--space-6) 0;
}
/* — le millésime — grande capitale de la page —————————————————— */
.jalon .date {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 130, "wght" 300;
  font-size: var(--taille-annee);
  line-height: .9;
  letter-spacing: -.028em;
  color: var(--muted);
  white-space: nowrap;
  text-align: right;
  padding-right: 22px;
  transition:
    color .6s var(--ease-doux),
    font-variation-settings .6s var(--ease-doux),
    letter-spacing .6s var(--ease-doux);
}
.jalon.acquis .date {
  color: var(--indigo);
  font-variation-settings: "opsz" 130, "wght" 520;
  letter-spacing: -.038em;
}
.jalon .date .tiret { padding: 0 .04em; color: var(--amber-ink); }
/* — le nœud sur le fil ——————————————————————————————————————— */
.jalon .axe { position: relative; align-self: stretch; }
.jalon .axe::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 22px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--line);
  transform: translate(-50%, -50%);
  transition:
    box-shadow .55s var(--ease-doux),
    transform .55s var(--ease-ressort);
}
.jalon.acquis .axe::after {
  box-shadow: inset 0 0 0 8px var(--amber-ink);
  transform: translate(-50%, -50%) scale(1.12);
}
/* le dernier jalon reste ouvert : c'est le point où nous en sommes */
.jalon:last-child.acquis .axe::after {
  box-shadow:
    inset 0 0 0 8px var(--amber-ink),
    0 0 0 7px color-mix(in srgb, var(--amber) 24%, transparent);
}
/* — le corps ——————————————————————————————————————————————————
   L'eyebrow porte déjà le trait d'union de la maison. Plutôt que d'en
   ajouter un second, c'est lui qui s'étire quand le fil atteint le jalon :
   la marque devient l'interaction. */
.jalon .corps { padding-top: 8px; }
/* Le titre du jalon était en petites capitales de 12 px : le plus petit texte
   du bloc, alors qu'il en est l'information principale. Il passe au dessin
   display, en bas de casse — la hiérarchie remise à l'endroit. Le trait
   d'union le précède toujours, à hauteur du nœud, et c'est lui qui s'étire
   quand le fil atteint le jalon. */
.titre-jalon {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 32, "wght" 600;
  font-size: clamp(20px, 1.75vw, 25px);
  line-height: 1.24;
  letter-spacing: -.006em;
  color: var(--indigo);   /* même encre que les autres h3 du site */
  margin: 0 0 12px;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  text-wrap: balance;
}
.titre-jalon::before {
  content: "";
  flex: none;
  /* .62em cale le filet au milieu optique de la première ligne, quelle que
     soit la taille retenue par le clamp() */
  margin-top: .62em;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--line);
  transition:
    width .75s var(--ease-ressort),
    background-color .5s var(--ease-doux);
}
.jalon.acquis .titre-jalon::before {
  width: 58px;
  background: var(--amber-ink);
}
/* Un jalon peut désormais compter plusieurs paragraphes : la règle vise donc
   tous les <p> du corps, et non plus le seul dernier. */
.jalon .corps p {
  margin: 0 0 var(--space-3);
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ink);
  max-width: 62ch;
}
.jalon .corps p:last-child { margin-bottom: 0; }
.jalon .corps i { font-style: italic; color: var(--muted); }

/* Repli : sans script, avec « animations réduites », ou si le fil n'a pas
   encore été atteint, tout doit rester lisible. On neutralise alors les
   états au repos plutôt que de compter sur la classe .acquis. */
@media (prefers-reduced-motion: reduce), (scripting: none) {
.frise::after { display: none; }
/* le fil gris suffit */
.jalon .date { color: var(--indigo); font-variation-settings: "opsz" 130, "wght" 480; }
.jalon .axe::after { box-shadow: inset 0 0 0 8px var(--amber-ink); }
.titre-jalon::before { width: 58px; background: var(--amber-ink); }
.jalon .date,
.jalon .axe::after,
.titre-jalon::before { transition: none; }
}

@media (prefers-reduced-motion: no-preference) {
.frise.in .jalon { animation: jalon-pose .8s var(--ease-ressort) backwards; }
.frise.in .jalon:nth-child(1) { animation-delay: .05s; }
.frise.in .jalon:nth-child(2) { animation-delay: .16s; }
.frise.in .jalon:nth-child(3) { animation-delay: .27s; }
.frise.in .jalon:nth-child(4) { animation-delay: .38s; }
  @keyframes jalon-pose { from { opacity: 0; transform: translateY(16px); } }
}

@media (max-width: 860px) {
.frise { --col-annee: 0px; --col-fil: 34px; }
.frise::before,
.frise::after { top: calc(var(--space-2) + var(--space-5) + 16px); }
.jalon {
    grid-template-columns: var(--col-fil) minmax(0, 1fr);
    grid-template-rows: auto auto;
    padding: var(--space-5) 0;
  }
.jalon .axe { grid-column: 1; grid-row: 1 / span 2; }
.jalon .date {
    grid-column: 2; grid-row: 1;
    text-align: left; padding-right: 0;
    font-size: 34px; margin-bottom: 12px;
  }
.jalon .corps { grid-column: 2; grid-row: 2; }
.jalon .axe::after { top: 16px; }
}
/* --------------------------------------------------------------------------
   50. Les quatre verrous
   Quatre cartes blanches identiques dans une grille : c'était un tableau, et
   rien n'y hiérarchisait quoi que ce soit. Les boîtes, les filets et les
   ombres disparaissent. Restent trois signes — un médaillon de 96 px, un
   numéro en gros chiffre display, un trait qui se tire — et beaucoup de blanc.
   La colonne de droite est décalée vers le bas : c'est ce décalage qui casse
   la lecture en tableau et fait lire une composition.
   -------------------------------------------------------------------------- */
.verrou { position: relative; color: var(--flag); }
@media (min-width: 861px) {
.verrou:nth-child(even) { margin-top: var(--space-6); }
}
.verrou-tete {
  display: flex;
  align-items: center;
  gap: 22px;            /* médaillon et numéro forment un seul signe */
  margin-bottom: var(--space-5);
}
.verrou .picto {
  width: 96px;
  height: 96px;
  padding: 24px;
  margin: 0;
  flex: none;
}
.numero { margin: 0; line-height: 1; }
.numero .mot {
  display: block;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.numero .chiffre {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 128, "wght" 380;
  font-size: clamp(40px, 4vw, 56px);
  letter-spacing: -.035em;
  color: var(--flag);
}
.verrou h3 {
  position: relative;
  padding-top: 22px;
  margin: 0 0 var(--space-3);
  font-size: clamp(20px, 1.9vw, 25px);
  font-variation-settings: "opsz" 40, "wght" 600;
  letter-spacing: -.006em;
  color: var(--indigo);
}
/* le trait de la maison, ici en terre cuite : il se tire à l'entrée du bloc */
.verrou h3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 52px;
  height: 2px;
  border-radius: 2px;
  background: var(--flag);
  transform-origin: left center;
}
.verrou > p:last-child {
  margin: 0;
  font-size: 16px;
  line-height: 1.62;
  color: var(--muted);
}

@media (hover: hover) {
.verrou { transition: transform .4s var(--ease-doux); }
.verrou:hover { transform: translateY(-4px); }
}

/* — l'entrée : quatre gestes décalés, jamais simultanés — */
@media (prefers-reduced-motion: no-preference) {
.obs-grid.in .verrou {
    animation: verrou-pose .85s var(--ease-ressort) backwards;
    animation-delay: calc(.05s + var(--r) * .13s);
  }
  @keyframes verrou-pose { from { opacity: 0; transform: translateY(24px); } }
.obs-grid.in .verrou .picto {
    animation: medaillon-pose .8s var(--ease-ressort) backwards;
    animation-delay: calc(.15s + var(--r) * .13s);
  }
  @keyframes medaillon-pose { from { opacity: 0; transform: scale(.74); } }
.obs-grid.in .verrou .chiffre {
    animation: chiffre-pose .85s var(--ease-doux) backwards;
    animation-delay: calc(.22s + var(--r) * .13s);
  }
  @keyframes chiffre-pose { from { opacity: 0; transform: translateY(14px); } }
.obs-grid.in .verrou h3::before {
    animation: verrou-trait .8s var(--ease-ressort) backwards;
    animation-delay: calc(.32s + var(--r) * .13s);
  }
  @keyframes verrou-trait { from { transform: scaleX(0); } }
}

@media (max-width: 860px) {
.obs-grid { gap: var(--space-6); }
.verrou .picto { width: 78px; height: 78px; padding: 19px; }
.verrou-tete { margin-bottom: var(--space-4); }
}
/* --------------------------------------------------------------------------
   51. « À chaque verrou, une réponse »
   C'était un tableau : quatre lignes, trois colonnes, une flèche au milieu.
   La flèche disparaît — et avec elle l'idée que la réponse serait la colonne
   d'en face. Chaque verrou devient un bloc où l'obstacle est nommé puis
   littéralement rayé, l'énoncé prenant sa place en grand. Le cadenas s'ouvre
   et la rature se tire en même temps : le geste dit ce que le texte dit.
   -------------------------------------------------------------------------- */
.leve { position: relative; }
/* — l'obstacle, nommé puis rayé — */
.verrou-leve {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 var(--space-4);
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--flag-soft);
}
.verrou-leve .cadenas {
  width: 15px;
  height: 15px;
  vertical-align: -2px;
  margin: 0;
  flex: none;
  align-self: center;
  color: var(--flag-dim);
}
.verrou-leve .num {
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}
.verrou-leve .nom { position: relative; }
/* la rature : elle se tire de la gauche quand le bloc entre dans le champ */
.verrou-leve .nom::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: 52%;
  height: 1.5px;
  border-radius: 2px;
  background: var(--flag-soft);
  transform-origin: left center;
}
/* — la réponse, qui prend la place — */
.leve h3 {
  margin: 0 0 var(--space-3);
  font-size: clamp(21px, 2vw, 26px);
  font-variation-settings: "opsz" 48, "wght" 600;
  letter-spacing: -.008em;
  line-height: 1.24;
  color: #fff;
}
.leve .dit {
  margin: 0 0 var(--space-4);
  font-size: 16px;
  line-height: 1.62;
  color: var(--on-indigo-dim);
}
/* — les gestes engagés, en pastilles — */
.gestes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.gestes span {
  font-family: var(--font-label);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mint);
  border: 1px solid color-mix(in srgb, var(--mint) 38%, transparent);
  border-radius: 999px;
  padding: 6px 13px;
  white-space: nowrap;
  transition: background .35s var(--ease-doux), border-color .35s var(--ease-doux);
}
@media (hover: hover) {
.leve:hover .gestes span {
    background: color-mix(in srgb, var(--mint) 12%, transparent);
    border-color: color-mix(in srgb, var(--mint) 62%, transparent);
  }
}

/* — le geste : le cadenas s'ouvre, la rature se tire — */
@media (prefers-reduced-motion: no-preference) {
.map.in .leve .cadenas .anse {
    animation: cadenas-ouvre .65s cubic-bezier(.3, .8, .4, 1.2) both;
    animation-delay: calc(.3s + var(--r) * .14s);
  }
.map.in .leve .nom::after {
    animation: rature-tire .55s var(--ease-net) both;
    animation-delay: calc(.42s + var(--r) * .14s);
  }
  @keyframes rature-tire { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
/* Sans animation, l'état d'arrivée est posé directement : l'obstacle
   apparaît rayé et le cadenas ouvert, ce que dit le texte de la section. */
@media (prefers-reduced-motion: reduce), (scripting: none) {
.verrou-leve .nom::after { transform: scaleX(1); }
.cadenas .anse { transform: rotate(-26deg); }
}

@media (max-width: 860px) {
.leve .dit { font-size: 15.5px; }
}
/* --------------------------------------------------------------------------
   52. Les croquis
   Six spécimens dispersés, un par section, jamais deux fois le même.

   Ils étaient positionnés en absolu : commode, mais un élément absolu ne
   RÉSERVE aucune place — d'où les recouvrements (la passiflore sur les cartes
   « résultat », le bois de joli cœur sur une fiche de profil). Le croquis est
   désormais une cellule de grille : il occupe la seconde colonne de la ligne
   qu'il partage avec le bloc marqué .croquis-partenaire, et tout le reste du
   contenu s'étend sur les deux colonnes, en dessous. Le chevauchement devient
   structurellement impossible, à toute largeur.
   -------------------------------------------------------------------------- */
.croquis {
  margin: var(--space-6) auto 0;
  width: min(190px, 54vw);
  color: var(--graphite);
  pointer-events: none;
}
.croquis .specimen {
  display: block;
  width: 100%;
  height: auto;
  max-height: 190px;
  stroke-width: var(--sw, 1.15);
  stroke-opacity: .88;
}
.croquis .specimen .fin { stroke-width: calc(var(--sw, 1.15) * .5); stroke-opacity: .5; }
.croquis .annot { --annot-taille: 31px; align-items: center; text-align: center; }
.croquis .annot-trait { width: 32px; height: 22px; margin: 2px auto 0; }

@media (min-width: 900px) {
.croquis-hote {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-6);
    align-items: start;
  }
/* par défaut chaque bloc occupe toute la largeur ; seuls le partenaire et
     le croquis se partagent une ligne, dans cet ordre. */
.croquis-hote > * { grid-column: 1 / -1; }
.croquis-hote > .croquis-partenaire { grid-column: 1; }
.croquis-hote > .croquis {
    grid-column: 2;
    width: 178px;
    margin: var(--dy, 0) 0 0;
    transform: rotate(var(--rot, 0deg));
  }
/* Quand le chapô tient en deux lignes, un croquis de trois cents pixels
     creuse sous lui une rangée vide de la même hauteur. Le bloc qui suit
     vient alors se ranger à côté du croquis plutôt qu'en dessous, et le
     croquis couvre les deux rangées. */
/* les deux règles vont ensemble : un navigateur sans :has() les ignore
     toutes les deux et retrouve la disposition d'origine, plutôt que d'en
     appliquer une seule et de rétrécir la grille pour rien. */
.croquis-hote:has(> .croquis-voisin) > .croquis-voisin { grid-column: 1; }
.croquis-hote:has(> .croquis-voisin) > .croquis { grid-row: span 2; }
.croquis .specimen { max-height: 178px; }
.croquis .annot { --annot-taille: 29px; }
}
@media (min-width: 1180px) {
.croquis-hote > .croquis { width: 200px; }
.croquis .specimen { max-height: 200px; }
.croquis .annot { --annot-taille: 33px; }
}
/* — le bandeau d'herbier, en pied de chaque page —
   Quatorze espèces, décrites une seule fois dans un <symbol> et rappelées par
   <use> : la piste peut alors être dupliquée pour rien, ce qui permet de la
   faire défiler sans raccord — un décalage de la moitié de sa largeur ramène
   exactement au point de départ. Le mouvement est très lent (18 px/s) et
   s'arrête au survol ; sans lui, la piste reste simplement cadrée. */
.herbier-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.frise-herbier {
  margin-top: var(--space-7);
  overflow: clip;
  color: var(--mint);
  opacity: .55;
  /* les deux bords s'estompent : la piste entre et sort sans coupure nette */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.frise-piste {
  display: flex;
  align-items: flex-end;
  gap: clamp(26px, 4vw, 56px);
  width: max-content;
}
.silhouette {
  flex: none;
  height: clamp(46px, 5.5vw, 70px);
  width: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.05;
  stroke-opacity: .92;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.silhouette .fin { stroke-width: .58; stroke-opacity: .6; }
.silhouette:nth-child(2n) { transform: rotate(2deg); }
.silhouette:nth-child(3n+1) { transform: rotate(-1.6deg); }

@media (prefers-reduced-motion: no-preference) {
.frise-piste { animation: frise-derive 96s linear infinite; }
  @keyframes frise-derive { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.frise-herbier:hover .frise-piste { animation-play-state: paused; }
}

/* — le tracé s'écrit quand le croquis entre dans le champ — */
@media (prefers-reduced-motion: no-preference) {
  /* Chaque pièce du dessin porte son rang, posé à la génération : la tige,
     puis les feuilles de la base vers la pointe, puis les détails. Le tracé
     suit donc l'ordre d'une main plutôt que celui du fichier, et le pas est
     calculé par espèce pour que l'ensemble tienne en une seconde et demie.
     Les feuilles répétées par <use> partagent un même tracé : c'est le
     pointillé posé sur leur groupe, hérité par le clone, qui permet de les
     décaler l'une après l'autre. */
.croquis.in .specimen > path,
.croquis.in .specimen > g {
    animation: trace-herbier 1.05s var(--ease-net) backwards;
    animation-delay: calc(80ms + var(--ordre, 0) * var(--pas, 90ms));
  }
  @keyframes trace-herbier {
    from { stroke-dasharray: 1; stroke-dashoffset: 1; }
    to   { stroke-dasharray: 1; stroke-dashoffset: 0; }
  }
}
@media (max-width: 560px) {
.frise-piste { gap: 24px; }
}
/* --------------------------------------------------------------------------
   53. L'annotation botanique
   Le nom ne s'affiche pas : il s'écrit. Un masque SVG — un trait épais, à
   bouts ronds, qui ondule légèrement — balaie le texte de gauche à droite en
   se dessinant lui-même (stroke-dashoffset sur un pathLength de 1). Le bout
   rond donne un front de révélation courbe et non un volet rectangulaire ;
   l'ondulation donne le mouvement du poignet ; et les temps de la courbe
   d'accélération sont volontairement inégaux, pour qu'aucune vitesse ne soit
   tout à fait constante. Le tracé de la plante est déjà là ; vient le trait
   de liaison, puis l'écriture.
   Réglages par attributs sur l'élément : data-duree, data-delai, data-trait
   (gauche | haut | aucun), data-rejouer.
   -------------------------------------------------------------------------- */
.annot {
  --annot-duree: 1500ms;
  --annot-delai: 0ms;
  --annot-taille: 36px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1px;
  color: var(--graphite);
}
.annot-nom {
  font-family: var(--font-main);
  font-style: italic;
  font-size: var(--annot-taille);
  line-height: 1.1;
  letter-spacing: .005em;
  color: var(--graphite);
}
/* Reenie Beanie n'a pas de dessin italique : une inclinaison légère vaut
   mieux qu'un faux italique appliqué par le navigateur. */
.annot-nom.manuscrite { font-style: normal; transform: skewX(-2.5deg); transform-origin: left bottom; }
.annot-note {
  font-family: var(--font-main);
  font-size: calc(var(--annot-taille) * .80);
  line-height: 1.15;
  /* 68 % de gris ne donnaient que 3,2:1 sur le papier ; à 88 % l'écriture
     reste plus claire que le nom latin tout en tenant 5:1. */
  color: color-mix(in srgb, var(--graphite) 88%, transparent);
}
/* le SVG prend exactement la place que le texte occupait */
.annot-svg { display: block; overflow: visible; max-width: 100%; height: auto; }
.annot-svg text {
  font-family: var(--font-main);
  font-size: var(--annot-taille);
  fill: currentColor;
}
.annot-svg .plume { fill: none; stroke: #fff; stroke-linecap: round; }
/* — le trait de liaison entre le dessin et son nom — */
.annot-trait { display: block; overflow: visible; color: var(--graphite); }
.annot-trait path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-opacity: .62;
}

@media (prefers-reduced-motion: no-preference) {
/* rien n'est visible avant le passage dans le champ */
.annot[data-annot] .annot-svg text,
.annot[data-annot] .annot-note { visibility: hidden; }
.annot[data-annot] .annot-trait path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.annot.ecrit .annot-svg text { visibility: visible; }
/* Le nom français ne guette plus la fin de l'écriture : il se pose alors
     qu'elle en est aux sept dixièmes. On gagne près d'une demi-seconde, et le
     recouvrement des deux gestes est plus naturel qu'un enchaînement net. */
.annot.ecrit .annot-note { visibility: visible; animation: annot-note-parait .45s ease backwards;
    animation-delay: calc(var(--annot-delai) + 260ms + var(--annot-duree) * 0.7); }
  @keyframes annot-note-parait { from { opacity: 0; transform: translateY(3px); } }
.annot.ecrit .annot-trait path {
    animation: annot-tire .52s cubic-bezier(.42, 0, .28, 1) both;
    animation-delay: var(--annot-delai);
  }
  @keyframes annot-tire { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* une plume par ligne : elles se relaient, la seconde ne partant qu'une
     fois la première achevée — c'est ainsi qu'on écrit une étiquette. */
.annot.ecrit .plume {
    animation: annot-ecrit calc(var(--annot-duree) / var(--annot-lignes, 1)) linear backwards;
    animation-delay: calc(var(--annot-delai) + 260ms
      + var(--ligne, 0) * (var(--annot-duree) / var(--annot-lignes, 1)));
  }
  /* Les paliers sont irréguliers à dessein : une main accélère sur les
     liaisons et ralentit sur les lettres montantes. Une courbe unique, si
     bien choisie soit-elle, reste trop régulière pour tromper l'œil. */
  @keyframes annot-ecrit {
    0%   { stroke-dashoffset: 1; }
    14%  { stroke-dashoffset: .80; }
    26%  { stroke-dashoffset: .73; }
    41%  { stroke-dashoffset: .54; }
    55%  { stroke-dashoffset: .46; }
    70%  { stroke-dashoffset: .26; }
    83%  { stroke-dashoffset: .17; }
    100% { stroke-dashoffset: 0; }
  }
}

/* animations réduites, ou pas de script : tout est là, immobile */
@media (prefers-reduced-motion: reduce) {
.annot .annot-svg text,
.annot .annot-note { visibility: visible; }
.annot .annot-trait path { stroke-dasharray: none; stroke-dashoffset: 0; }
}

/* --------------------------------------------------------------------------
   54. Les trois prestations
   Le visiteur doit pouvoir nommer ce qu'il vient chercher avant de lire la
   méthode ou l'histoire. Trois cartes de même hauteur : un rang, un verbe,
   une phrase, puis les livrables. La bordure haute reprend les trois teintes
   de la marque pour que les trois offres se distinguent au premier coup d'œil.
   -------------------------------------------------------------------------- */
.offres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--space-4);
  row-gap: 0;
}
/* Les quatre étages d'une carte, rang, titre, phrase et liste, sont alignés
   d'une colonne à l'autre : sans cela, un titre sur deux lignes décale le
   filet de séparation de sa voisine. La grille imbriquée fait ce calage
   toute seule ; là où elle manque, les cartes retombent sur la colonne
   souple d'origine, avec la liste poussée en bas. */

.offre {
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--green);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  box-shadow: var(--ombre-carte);
}
.offre:nth-child(2) { border-top-color: var(--indigo); }
.offre:nth-child(3) { border-top-color: var(--amber-ink); }
.offre .rang {
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  /* l'ambre tient 3,7:1 seulement : l'accent reste sur le filet du haut,
     le rang se lit en gris de texte. */
  color: var(--muted);
}
.offre h3 {
  font-size: 21px;
  line-height: 1.22;
  color: var(--indigo);
  margin: 10px 0 10px;
  text-wrap: balance;
}
.offre > p {
  margin: 0 0 var(--space-4);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink);
}
.offre ul {
  list-style: none;
  margin: auto 0 0;
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--line);
}
.offre li {
  position: relative;
  padding: 8px 0 8px 18px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
}
.offre li + li { border-top: 1px solid var(--line); }
.offre li:last-child { padding-bottom: 0; }
.offre li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}
@media (max-width: 980px) {
  .offres { grid-template-columns: 1fr; gap: var(--space-3); }
  .offre { padding: var(--space-4); }
  .offre ul { margin-top: var(--space-3); }
}

/* --------------------------------------------------------------------------
   55. Les six gestes d'une mission
   Six verbes, six livrables. Pas de numérotation : l'ordre décrit une
   trajectoire, pas une procédure figée. Le trait ambré au-dessus du verbe
   reprend celui des jalons de la frise, pour que l'œil reconnaisse le même
   registre d'un onglet à l'autre.
   -------------------------------------------------------------------------- */
.mission-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5) var(--space-6);
}
.mission-liste li { padding-top: var(--space-3); border-top: 1px solid var(--line); }
.mission-liste h3 {
  position: relative;
  font-size: 22px;
  color: var(--indigo);
  margin: 0 0 8px;
  padding-top: 14px;
}
.mission-liste h3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 2px;
  background: var(--amber-ink);
}
.mission-liste p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
}
@media (max-width: 900px) {
  .mission-liste { grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-5); }
}
@media (max-width: 560px) {
  .mission-liste { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* --------------------------------------------------------------------------
   56. Les six expertises
   La même pastille verte que les listes du reste du site, sur deux colonnes :
   la liste se lit d'un regard sans devenir une colonne trop longue.
   -------------------------------------------------------------------------- */
.expertises {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-6);
}
.expertises li {
  position: relative;
  padding: 14px 0 14px 22px;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.5;
}
.expertises li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}
@media (max-width: 760px) {
  .expertises { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   57. L'appel de fin de page
   Deux questions, deux lignes, jamais davantage : chacune est insécable et le
   corps se règle sur la largeur de l'écran, de sorte que la plus longue tienne
   toujours d'un bord à l'autre. Le bandeau garde ainsi une hauteur constante.
   Le sélecteur reprend « .contact » pour passer devant la règle générale des
   titres de ce bandeau, qui impose une largeur de 22 caractères.
   -------------------------------------------------------------------------- */
.contact h2.appel {
  max-width: none;
  /* la plus longue des deux questions mesure 14,7 fois le corps de la fonte :
     5,6 % de la largeur de l'écran la font tenir dès 320 px. */
  font-size: min(5.6vw, 36px);
  line-height: 1.26;
  margin-bottom: var(--space-3);
}
.contact h2.appel span {
  display: block;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   58. La seconde passe de crayon
   Chaque contour est tracé deux fois, la seconde d'une main légèrement
   différente. C'est ce redoublement qui donne la mine de plomb plutôt que
   le trait vectoriel ; il ne vaut que s'il reste plus pâle que le premier.
   -------------------------------------------------------------------------- */
.specimen .repasse,
.silhouette .repasse { stroke-opacity: .42; }

/* La phrase d'adresse tient elle aussi sur une seule ligne, mais seulement
   là où elle peut le faire sans devenir illisible : elle mesure 35,8 fois le
   corps de la fonte, soit 546 px à 15 px. En dessous d'environ 620 px de
   large, l'écran ne peut pas l'accueillir d'un seul tenant à une taille
   lisible ; elle se replie alors normalement. */
@media (min-width: 620px) {
  .contact p.ligne {
    white-space: nowrap;
    max-width: none;
    font-size: min(2.46vw, 17px);
  }
}

@supports (grid-template-rows: subgrid) {
  @media (min-width: 981px) {
    .offres { grid-template-rows: auto auto auto auto; }
    .offre { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
    /* le filet de séparation doit s'aligner d'une carte à l'autre : la
       liste se cale en haut de sa rangée, le blanc restant tombe en bas. */
    .offre ul { margin: 0; align-self: start; }
  }
}

/* Un mot seul sur la dernière ligne d'un paragraphe est une coquille de
   composition : le navigateur sait l'éviter s'il en reçoit la consigne. */
p, li, figcaption, dd, .lede, .story { text-wrap: pretty; }

/* --------------------------------------------------------------------------
   59. Les croquis en petit format
   La grille à deux colonnes ne vaut qu'à partir de 900 px. En dessous, tout
   s'empile dans l'ordre du document et le croquis vient se glisser entre le
   titre et le contenu, où il coupe la lecture au lieu de la ponctuer. On le
   renvoie en fin de bloc : il sépare alors deux parties, ce qui est son rôle.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .croquis-hote { display: flex; flex-direction: column; }
  .croquis-hote > .croquis { order: 99; margin-top: var(--space-5); }
}

/* --------------------------------------------------------------------------
   60. Le sélecteur de langue
   Deux abréviations, en haut à droite. La langue courante n'est pas un lien :
   elle se distingue par la couleur et par la graisse, jamais par la seule
   couleur, et porte aria-current pour les lecteurs d'écran. Le filet qui les
   sépare est un pseudo-élément : rien à ajouter dans le balisage.
   -------------------------------------------------------------------------- */
.langues {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-family: var(--font-label);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
}
.langues a { color: var(--muted); text-decoration: none; opacity: 1; }
.langues a:hover,
.langues a:focus-visible { color: var(--indigo); }
.langues [aria-current] { color: var(--indigo); }
.langues a + span::before,
.langues span + a::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 11px;
  margin-right: 9px;
  vertical-align: -1px;
  background: var(--line);
}
/* sur fond sombre, le sélecteur suit le reste de l'en-tête */
.entete-sombre .langues a { color: var(--on-indigo-dim); }
.entete-sombre .langues [aria-current] { color: #fff; }

@media (max-width: 860px) {
  /* le bouton de contact occupe déjà le coin : les deux langues se posent
     juste au-dessus, alignées sur lui, et l'en-tête garde deux étages. */
  .langues { position: absolute; top: 0; right: 0; font-size: 12px; }
  nav { padding-top: 22px; }
  .nav-cta { top: 22px; }
}