/* =========================================================
   Tokens — dérivés de la charte Modders Consulting
   Noir absolu, dégradé corail → ambre du monogramme « m »,
   accents secondaires issus des lignes du carrousel.
   Palette enrichie avec les teintes de la nouvelle identité visuelle.
   ========================================================= */
:root {
  /* Couleurs de marque */
  --c-ink: #000000;
  --c-white: #ffffff;
  --c-coral: #ff628b;
  --c-coral-light: #ff8fab;
  --c-amber: #ffc47a;
  --c-amber-light: #ffd699;
  --c-teal: #2fd4c8;
  --c-teal-light: #4de0d4;
  --c-lime: #a3d93b;
  --c-lime-light: #b8e85c;
  --c-blue-grey: #8b9db5;
  --c-blue-grey-light: #a8b8cd;

  /* Surfaces & texte */
  --surface: var(--c-ink);
  --surface-raised: rgba(255, 255, 255, 0.035);
  --line: rgba(255, 255, 255, 0.14);
  --line-soft: rgba(255, 255, 255, 0.08);
  --text: rgba(255, 255, 255, 0.94);
  --text-muted: rgba(255, 255, 255, 0.62);
  --text-faint: rgba(255, 255, 255, 0.42);

  /* Dégradé signature (monogramme) */
  --grad-brand: linear-gradient(180deg, var(--c-coral) 0%, var(--c-amber) 100%);
  --grad-brand-x: linear-gradient(90deg, var(--c-coral) 0%, var(--c-amber) 100%);
  --grad-brand-reverse: linear-gradient(180deg, var(--c-amber) 0%, var(--c-coral) 100%);
  
  /* Nouveaux dégradés inspirés des documents de marque */
  --grad-teal-lime: linear-gradient(180deg, var(--c-teal) 0%, var(--c-lime) 100%);
  --grad-teal-lime-x: linear-gradient(90deg, var(--c-teal) 0%, var(--c-lime) 100%);
  --grad-coral-teal: linear-gradient(135deg, var(--c-coral) 0%, var(--c-teal) 100%);
  --grad-warm: linear-gradient(180deg, var(--c-coral-light) 0%, var(--c-amber-light) 100%);
  --grad-cool: linear-gradient(180deg, var(--c-teal-light) 0%, var(--c-lime-light) 100%);
  --grad-multi: linear-gradient(135deg, var(--c-coral) 0%, var(--c-amber) 25%, var(--c-teal) 50%, var(--c-lime) 75%, var(--c-blue-grey) 100%);

  /* Accents contextuels */
  --accent: var(--c-coral);

  /* Typographie */
  --font-display: "Jura", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fs-eyebrow: 0.72rem;
  --fs-small: 0.875rem;
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --fs-h3: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --fs-h2: clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem);
  --fs-h1: clamp(2.25rem, 1.6rem + 3vw, 4rem);
  --fs-hero: clamp(2.5rem, 1.2rem + 5.4vw, 5.25rem);

  --tracking-wide: 0.28em;
  --tracking-hero: 0.22em;
  --leading-tight: 1.15;
  --leading-body: 1.7;

  /* Rythme */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --section-y: clamp(4.5rem, 3rem + 7vw, 8.5rem);
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --container: 1200px;
  --measure: 62ch;

  /* Formes — l'arche du « m » */
  /* Arche du « m » : rayon horizontal proportionnel, rayon vertical fixe.
     La profondeur de la courbe ne dépend donc plus de la largeur de la carte,
     ce qui rend le retrait du texte prévisible à toutes les tailles d'écran. */
  --arch-depth: 110px;
  --arch-radius: 50% 50% 4px 4px / var(--arch-depth) var(--arch-depth) 4px 4px;
  --radius-pill: 999px;

  /* Mouvement */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 700ms;

  /* Motif pointillé (récurrent dans la charte) */
  --dot-color: rgba(255, 255, 255, 0.45);
  --dot-size: 2px;
  --dot-gap: 8px;

  /* Nouveaux effets de brillance */
  --glow-coral: 0 0 20px rgba(255, 98, 139, 0.3);
  --glow-teal: 0 0 20px rgba(47, 212, 200, 0.3);
  --glow-amber: 0 0 20px rgba(255, 196, 122, 0.3);
}

/* =========================================================
   Polices auto-hébergées (aucune requête tierce, RGPD-friendly)
   Jura  → substitut libre du logotype Albertino (display)
   Inter → substitut libre d'Helvetica Neue (texte courant)
   ========================================================= */
@font-face {
  font-family: "Jura";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/jura-latin-300-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Jura";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/jura-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Jura";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/jura-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

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

html {
  /* Indique au navigateur que l'interface est sombre : les contrôles natifs
     (listes déroulantes, cases à cocher, ascenseurs) suivent la même palette. */
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background-color: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ====================== Typographie ====================== */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  margin: 0;
  color: var(--c-white);
  /* Répartit les mots sur les lignes plutôt que de laisser une ligne orpheline
     d'un seul mot dans les colonnes étroites. */
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: 300;
  letter-spacing: 0.06em;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 300;
  letter-spacing: 0.05em;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 400;
  letter-spacing: 0.08em;
}

p {
  margin: 0 0 var(--space-3);
  color: var(--text-muted);
  max-width: var(--measure);
}

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

strong {
  font-weight: 500;
  color: var(--text);
}

a {
  color: var(--c-white);
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 0.25em;
  transition: color var(--dur-fast) var(--ease),
    text-decoration-color var(--dur-fast) var(--ease);
}

a:hover {
  text-decoration-color: var(--c-coral);
}

::selection {
  background: var(--c-coral);
  color: #000;
}

/* ================== Accessibilité ================== */
:focus-visible {
  outline: 2px solid var(--c-amber);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--gutter);
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--c-white);
  color: #000;
  font-family: var(--font-display);
  letter-spacing: 0.1em;
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
}

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

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

/* ======================= Conteneur ======================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: 860px;
}

/* ======================== Sections ======================= */
.section {
  padding-block: var(--section-y);
  position: relative;
}

.section + .section {
  border-top: 1px solid var(--line-soft);
  position: relative;
}

.section + .section::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--c-teal) 15%, var(--c-coral) 50%, var(--c-amber) 85%, transparent 100%);
  opacity: 0.4;
  z-index: 1;
}

.section__head {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Le chapô d'une section, pas son surtitre : sans :not(.eyebrow), ce
   sélecteur (0,1,1) l'emporte sur .eyebrow (0,1,0) et gonfle le surtitre. */
.section__head p:not(.eyebrow) {
  margin-top: var(--space-2);
  font-size: var(--fs-lead);
}

/* ========================= Grilles ======================== */
.grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (min-width: 60rem) {
  .split {
    grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
  }
  .split--sticky > :first-child {
    position: sticky;
    top: 7rem;
  }
}

/* ======================== En-tête ======================== */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transition: background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}

.header.is-scrolled {
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 5rem;
}

.header__logo {
  display: block;
  line-height: 0;
  padding: 0.5rem 0;
}

.header__logo img {
  width: 140px;
}

.nav {
  display: none;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

.nav__link {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  text-decoration: none;
  color: var(--text-muted);
  position: relative;
  padding-block: 0.35rem;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--grad-brand-x);
  transition: right var(--dur) var(--ease);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--c-white);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  right: 0;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Menu mobile */
.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: none;
  border: 0;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  height: 1px;
  background: var(--c-white);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.mobile-nav {
  position: fixed;
  top: 5rem;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.97);
  padding: var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}

.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
}

.mobile-nav__list {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin-block: auto;
  width: 100%;
}

.mobile-nav__link {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 8vw, 2.5rem);
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  text-decoration: none;
  color: var(--c-white);
}

body.is-locked {
  overflow: hidden;
}

/* Lorsque le menu mobile est ouvert, le bandeau garde un fond opaque pour
   ne pas laisser le contenu de la page apparaître derrière lui (le bandeau
   est transparent en haut de page et est positionné au-dessus du panneau). */
body.is-locked .header {
  background-color: rgba(0, 0, 0, 0.97);
  border-bottom-color: var(--line-soft);
}

/* À partir de cette largeur, la barre fixe suffit : ni bouton, ni panneau.
   Ce bloc est volontairement placé après les règles du menu mobile pour que
   la cascade s'applique dans le bon sens. */
@media (min-width: 62rem) {
  .nav {
    display: block;
  }

  .menu-toggle,
  .mobile-nav {
    display: none;
  }
}

/* ====================== Pied de page ===================== */
.footer {
  border-top: 1px solid var(--line-soft);
  padding-block: var(--space-6) var(--space-4);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(47, 212, 200, 0.03) 50%, rgba(0,0,0,0) 100%);
}

.footer__grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  margin-bottom: var(--space-5);
}

.footer__logo img {
  width: 150px;
}

/* Lien LinkedIn du pied de page : placé dans la barre du bas, à côté du
   copyright, pour ne pas allonger le pied de page. */
.footer__social {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-small);
  color: var(--text-faint);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.footer__social svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.footer__social:hover {
  color: var(--c-white);
}

.footer__title {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-2);
}

.footer__list li {
  /* Les entrées sans lien (adresse) doivent avoir la même graisse et la même
     taille que les liens voisins. */
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.footer__list li + li {
  margin-top: 0.6rem;
}

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

.footer__list a:hover {
  color: var(--c-white);
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-small);
  color: var(--text-faint);
}

.footer__bottom-start {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.footer__copyright {
  color: var(--text-faint);
}

.footer__legal {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.footer__legal a {
  color: var(--text-faint);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.footer__legal a:hover {
  color: var(--c-white);
}

.footer__legal-separator {
  color: var(--text-faint);
  opacity: 0.5;
}

/* Sélecteur de langue : discret, aligné sur les liens de navigation. */
.lang-switch {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-decoration: none;
  color: var(--text-muted);
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  transition: color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

.lang-switch:hover {
  color: var(--c-white);
  border-color: rgba(255, 255, 255, 0.5);
}

.mobile-nav__link--lang {
  font-size: clamp(1.25rem, 5vw, 1.5rem);
  color: var(--text-muted);
}

/* =========================================================
   Motif pointillé — repris de la charte (liaisons en pointillés)
   ========================================================= */
.dotted-rule {
  /* Longueur fixe : le trait pointillé est un marqueur de surtitre, pas un
     remplissage. Il est donc identique dans toutes les colonnes et sur
     toutes les pages. */
  flex: none;
  width: 3.5rem;
  height: var(--dot-size);
  background-image: radial-gradient(
    circle,
    var(--dot-color) 0.9px,
    transparent 1px
  );
  background-size: var(--dot-gap) var(--dot-size);
  background-repeat: repeat-x;
}

/* ========================= Eyebrow ======================== */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

.eyebrow--accent {
  color: var(--accent);
}

/* Fil d'Ariane léger porté par l'eyebrow (pages d'offres d'emploi). */
.eyebrow a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.eyebrow a:hover {
  color: var(--c-white);
}

/* ========================= Boutons ======================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 1.6rem;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  text-decoration: none;
  color: var(--c-white);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease),
    color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.btn:hover {
  border-color: rgba(255, 255, 255, 0.5);
}

.btn__arrow {
  transition: transform var(--dur) var(--ease);
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}

.btn--primary {
  color: #000;
  /* Une bordure transparente (plutôt que "border: none") laisse apparaître
     un liseré de couleur parasite sur les arrondis de la pilule, à cause de
     l'anti-crénelage du dégradé de fond sur ce bord fantôme. On retire donc
     complètement la bordure au lieu de simplement la rendre transparente. */
  border: none;
  background-image: var(--grad-brand-x);
  box-shadow: var(--glow-coral);
}

.btn--primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 25px rgba(255, 98, 139, 0.5);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* Lien fléché discret */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  letter-spacing: 0.12em;
  text-decoration: none;
  color: var(--text-muted);
}

.link-arrow:hover {
  color: var(--c-white);
}

.link-arrow svg {
  transition: transform var(--dur) var(--ease);
}

.link-arrow:hover svg {
  transform: translateX(4px);
}

/* Lien LinkedIn de l'en-tête : même traitement en pastille que le sélecteur
   de langue voisin, pour former une paire cohérente. Les deux partagent la
   même hauteur, le sélecteur de langue troquant son padding vertical contre
   celle-ci, de façon à ce que les deux pastilles s'alignent exactement. */
.header__actions .lang-switch,
.header__actions .link-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.15rem;
}

.header__actions .lang-switch {
  padding-block: 0;
}

.header__actions .link-arrow {
  width: 2.15rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

.header__actions .link-arrow svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  transition: none;
}

.header__actions .link-arrow:hover {
  color: var(--c-white);
  border-color: rgba(255, 255, 255, 0.5);
}

.header__actions .link-arrow:hover svg {
  transform: none;
}

/* =========================================================
   Carte-arche — élément signature, reprise de l'arche du « m »
   ========================================================= */
.arch {
  position: relative;
  display: flex;
  flex-direction: column;
  /* La carte devient sa propre référence de taille : le titre s'adapte à la
     largeur de colonne (3 ou 4 par rangée, ou pleine largeur sur mobile)
     au lieu de déborder. */
  container-type: inline-size;
  /* Le texte démarre sous la courbe : le retrait haut est toujours supérieur
     à --arch-depth, quelle que soit la largeur de la carte. */
  padding: calc(var(--arch-depth) + 1.5rem) clamp(1.5rem, 3vw, 2.25rem)
    clamp(1.75rem, 3vw, 2.25rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--arch-radius);
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0) 60%
  );
  transition: border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.arch::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background-image: var(--grad-brand);
  -webkit-mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
  pointer-events: none;
}

.arch:hover,
.arch:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--glow-teal);
}

.arch:hover::before,
.arch:focus-within::before {
  opacity: 1;
}

.arch__title {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 7cqi, 1.75rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  overflow-wrap: break-word;
  margin-bottom: 0.35rem;
}

.arch__text {
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin: 0;
}

.arch--link {
  text-decoration: none;
}

.arch--link .arch__more {
  margin-top: auto;
  padding-top: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  letter-spacing: 0.12em;
  color: var(--text-faint);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color var(--dur) var(--ease);
}

.arch--link:hover .arch__more {
  color: var(--c-white);
}

/* ========================= Panneau ======================== */
.panel {
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background-color: var(--surface-raised);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.panel:hover {
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

.panel__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-3);
}

/* ==================== Listes à puces ==================== */
.list-dotted li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.list-dotted li + li {
  margin-top: 0.7rem;
}

.list-dotted li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-image: var(--grad-brand);
}

/* ========================== Tags ========================= */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.85rem;
}

/* ===================== Liste ancrée ====================== */
.anchor-nav {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-left: 1px solid var(--line-soft);
  padding-left: var(--space-3);
}

.anchor-nav a {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-decoration: none;
}

.anchor-nav a:hover,
.anchor-nav a.is-active {
  color: var(--c-white);
}

/* ======================= Formulaire ====================== */
.form {
  display: grid;
  gap: var(--space-3);
  max-width: 40rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.field label {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--c-white);
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: border-color var(--dur-fast) var(--ease);
}

.field input:hover,
.field textarea:hover,
.field select:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

/* Repli explicite pour les systèmes qui ignorent color-scheme sur les options. */
.field select option {
  color: var(--c-white);
  background-color: #101012;
}

.field textarea {
  min-height: 9rem;
  resize: vertical;
}

.field__hint {
  font-size: 0.8rem;
  color: var(--text-faint);
}

.field--honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Mention d'information RGPD sous le formulaire. Le traitement ne repose pas
   sur le consentement : la mention informe, elle ne conditionne pas l'envoi. */
.form__notice {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
  max-width: var(--measure);
}

.form__status {
  border-left: 2px solid var(--c-amber);
  padding: 0.75rem 1rem;
  font-size: var(--fs-small);
  color: var(--text);
  background-color: rgba(255, 255, 255, 0.04);
}

.form__status--error {
  border-left-color: var(--c-coral);
}

/* ================== Révélation au scroll =================
   L'état masqué n'est appliqué que si le navigateur exécute du JavaScript :
   sans lui, aucun observateur ne viendrait rétablir l'opacité et le contenu
   resterait invisible. */
@media (scripting: enabled) {
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--dur-slow) var(--ease),
      transform var(--dur-slow) var(--ease);
  }

  .reveal.is-in {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ==================== Utilitaires ciblés ================= */
.btn-row--center {
  justify-content: center;
}

/* Centrage optique. L'interlettrage large s'applique aussi après la dernière
   lettre : le navigateur centre le texte plus cet espace fantôme, et les
   glyphes se retrouvent décalés vers la gauche de la moitié de sa valeur.
   Avec `justify-content: center`, une marge intérieure gauche déplace le
   contenu de la moitié de sa propre valeur — elle annule donc exactement le
   décalage, et le surtitre tombe d'aplomb avec le titre qu'il coiffe. */
.eyebrow--center {
  justify-content: center;
  padding-left: var(--tracking-wide);
}

.tags--spaced {
  margin-top: var(--space-3);
}

/* Titre de carte rédigé en phrase : pas de capitales ni d'interlettrage large. */
.arch__title--sentence {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: clamp(1.0625rem, 6cqi, 1.375rem);
  line-height: 1.3;
}

/* Contexte et technologies d'une mission de référence. */
.panel__context {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-1);
}

.panel__stack {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* =========================================================
   Hero — reprise directe du principe de la charte :
   lignes fines qui se croisent derrière l'accroche de la page
   ========================================================= */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(100svh, 60rem);
  padding-block: 9rem 5rem;
  overflow: hidden;
}

/* ================= Lignes de marque animées ================
   Même traitement sur toutes les pages : accueil, pages internes,
   pages d'état. Seule l'orientation du voile de lisibilité change,
   selon que le contenu est centré ou aligné à gauche. */
.lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.lines svg {
  width: 100%;
  height: 100%;
}

/* Sur les pages internes, la hauteur disponible est plus faible :
   les lignes sont atténuées pour rester un fond. Elles s'estompent aussi
   avant le bord bas du bandeau (masque de fondu) : sans ça, le voile noir
   peut redescendre à 0 % d'opacité alors que les lignes, elles, s'arrêtent
   net à la limite du conteneur — ce qui crée une coupure visible plutôt
   qu'un fondu, en particulier sur mobile où le bandeau est plus court. */
.lines--header {
  opacity: 0.7;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 65%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 65%, transparent 100%);
}

/* Un tracé progressif (stroke-dasharray/dashoffset) combiné à
   vector-effect="non-scaling-stroke" s'est révélé dépendant du niveau de
   zoom dans Chrome (traits coupés en plein milieu, absents à certains
   zooms) alors qu'Edge les affichait correctement — un recalcul de la
   longueur de trait qui diverge entre moteurs de rendu à l'échelle. Un
   fondu en opacité n'a aucune dépendance à la géométrie du trait : c'est
   la version robuste, indépendante du navigateur et du zoom. */
.lines path {
  fill: none;
  stroke-width: 1.6;
  opacity: 0;
  animation: line-fade-in 1.1s var(--ease) forwards;
}

.lines path:nth-child(2) {
  animation-delay: 0.15s;
}
.lines path:nth-child(3) {
  animation-delay: 0.3s;
  animation-name: line-fade-in-75;
}
.lines path:nth-child(4) {
  animation-delay: 0.45s;
  animation-name: line-fade-in-50;
}

@keyframes line-fade-in {
  to {
    opacity: 1;
  }
}
@keyframes line-fade-in-75 {
  to {
    opacity: 0.75;
  }
}
@keyframes line-fade-in-50 {
  to {
    opacity: 0.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lines path {
    animation: none;
    opacity: 1;
  }
  .lines path:nth-child(3) {
    opacity: 0.75;
  }
  .lines path:nth-child(4) {
    opacity: 0.5;
  }
}

/* Voile de lisibilité : les lignes passent derrière le texte sans l'entamer. */
.scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Contenu centré. */
.scrim--hero {
  background: radial-gradient(
    60% 45% at 50% 45%,
    rgba(0, 0, 0, 0.94) 0%,
    rgba(0, 0, 0, 0.8) 35%,
    rgba(0, 0, 0, 0.6) 55%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* Contenu aligné à gauche : voile radial centré sur la colonne de texte,
   comme sur le hero, pour laisser les lignes visibles des deux côtés
   plutôt que de noircir tout le bord gauche de l'écran.
   Le rayon reste inférieur à la distance jusqu'au bord gauche (26%) pour
   que ce bord retombe bien à une opacité nulle, comme sur le hero. */
.scrim--header {
  background: radial-gradient(
    28% 70% at 26% 48%,
    rgba(0, 0, 0, 0.94) 0%,
    rgba(0, 0, 0, 0.8) 45%,
    rgba(0, 0, 0, 0.45) 72%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* En dessous de cette largeur, le texte occupe toute la colonne :
   le voile latéral ne protège plus rien, il devient vertical. Il retombe
   à 0 en bas (comme le voile du hero) pour ne pas créer de cassure nette
   avec la section suivante. */
@media (max-width: 61.99rem) {
  .lines--header {
    opacity: 0.6;
  }

  .scrim--header {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.92) 0%,
      rgba(0, 0, 0, 0.8) 45%,
      rgba(0, 0, 0, 0.35) 75%,
      rgba(0, 0, 0, 0) 100%
    );
  }

  /* Le filet de séparation du bandeau devient visible sous les lignes
     ravivées : on le retire pour retrouver un fondu sans coupure,
     comme sur le hero de l'accueil. */
  .page-header {
    border-bottom-color: transparent;
  }
}

.hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 1.05;
  letter-spacing: var(--tracking-hero);
  text-indent: var(--tracking-hero);
  margin-bottom: var(--space-4);
}

.hero__title span {
  display: block;
  font-weight: 300;
}

.hero__title span:first-child {
  font-weight: 500;
}

/* Chapô centré : hero, bandeaux d'appel à l'action, pages d'état */
.lede {
  margin-inline: auto;
  max-width: 46ch;
  font-size: var(--fs-lead);
  color: var(--text-muted);
}

.hero__spine {
  width: var(--dot-size);
  height: 5.5rem;
  margin: var(--space-5) auto 0;
  background-image: radial-gradient(
    circle,
    var(--dot-color) 0.9px,
    transparent 1px
  );
  background-size: var(--dot-size) var(--dot-gap);
  background-repeat: repeat-y;
}

/* =================== En-tête de page ==================== */
.page-header {
  padding-block: clamp(8rem, 6rem + 8vw, 12rem) var(--section-y);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
}

.page-header h1 {
  max-width: 18ch;
}

.page-header__lede {
  margin-top: var(--space-3);
  font-size: var(--fs-lead);
  max-width: 52ch;
}

/* =================== Offres d'emploi ==================== */
/* Les intitulés de poste sont plus longs qu'un titre de page éditorial. */
.page-header--job h1 {
  max-width: 30ch;
}

.page-header .btn-row {
  margin-top: var(--space-4);
}

/* Caractéristiques de l'offre : lieu, contrat, expérience, secteur. */
.job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

.job-meta li + li::before {
  content: "·";
  margin-right: 0.75rem;
  opacity: 0.5;
}

/* Liste des offres ouvertes, sur la page Carrières. */
.job-list {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.job-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  background-color: var(--surface-raised);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.job-card:hover {
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

.job-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--text);
  margin: 0;
}

.job-card .job-meta {
  margin-top: 0;
}

.job-card__text {
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin: 0;
  max-width: var(--measure);
}

.job-card__more {
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  letter-spacing: 0.12em;
  color: var(--text-faint);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color var(--dur) var(--ease);
}

.job-card:hover .job-card__more {
  color: var(--c-white);
}

/* ================= Bloc expertise / secteur ============== */
.domain {
  scroll-margin-top: 7rem;
}

/* Chaque domaine porte la couleur d'accent qui lui est associée
   dans la charte (encadrés de la présentation Modders). */
.domain[data-accent="teal"] {
  --accent: var(--c-teal);
}

.domain[data-accent="lime"] {
  --accent: var(--c-lime);
}

.domain[data-accent="coral"] {
  --accent: var(--c-coral);
}

.domain[data-accent="amber"] {
  --accent: var(--c-amber);
}

.domain[data-accent="blue-grey"] {
  --accent: var(--c-blue-grey);
}

.domain + .domain {
  margin-top: var(--section-y);
  padding-top: var(--section-y);
  border-top: 1px solid var(--line-soft);
}

.domain__title {
  font-size: var(--fs-h2);
  margin-bottom: var(--space-2);
}

.domain__pitch {
  font-size: var(--fs-lead);
  color: var(--text);
  border-left: 2px solid var(--accent);
  padding-left: var(--space-3);
  margin-bottom: var(--space-3);
  background: linear-gradient(90deg, rgba(255,255,255,0.02) 0%, transparent 100%);
}

.domain__grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  margin-top: var(--space-4);
}

/* ======================= Manifeste ======================= */
.steps {
  counter-reset: step;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.step {
  counter-increment: step;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.step::before {
  content: "0" counter(step);
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  letter-spacing: 0.2em;
  color: transparent;
  background-image: var(--grad-brand-x);
  -webkit-background-clip: text;
  background-clip: text;
  margin-bottom: var(--space-2);
}

.step h3 {
  margin-bottom: 0.5rem;
}

.step p {
  font-size: var(--fs-small);
}

/* ==================== Bandeau contact ==================== */
.cta-band {
  text-align: center;
}

.cta-band .btn-row {
  justify-content: center;
}

.cta-band h2 {
  max-width: 20ch;
  margin-inline: auto;
}

/* Un chapô placé juste après un titre a besoin de sa respiration
   (bandeaux d'appel à l'action, pages 404 et de confirmation). */
h1 + .lede,
h2 + .lede {
  margin-top: var(--space-3);
}

/* ==================== Coordonnées ==================== */
.contact-details dt {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.35rem;
}

.contact-details dd {
  margin: 0 0 var(--space-3);
  color: var(--text-muted);
  font-size: var(--fs-small);
}

.contact-details a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.contact-details a:hover {
  border-bottom-color: var(--c-coral);
}

/* ================== Contenu rédactionnel ================= */
.prose h2 {
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
}

.prose h3 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-1);
}

.prose ul {
  margin: 0 0 var(--space-3);
}

.prose li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--text-faint);
}

.prose a {
  color: var(--c-white);
}

/* ========================== 404 ========================== */
.error-page {
  min-height: 70svh;
  display: flex;
  align-items: center;
  text-align: center;
}

.error-page .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.error-code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 15vw, 9rem);
  font-weight: 300;
  letter-spacing: 0.1em;
  color: transparent;
  background-image: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 1;
}

/* Accroche de la page d'accueil : phrase de positionnement, pas logotype. */
.hero__title--statement {
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.75rem);
  letter-spacing: 0.02em;
  line-height: 1.15;
  max-width: 20ch;
  margin-inline: auto;
  text-indent: 0;
}

/* Note de bas de section (mentions, précisions). */
.section__note {
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  color: var(--text-faint);
}

/* Étapes rédigées : deux colonnes larges plutôt que quatre colonnes étroites. */
.steps--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}

.steps--wide .step p {
  font-size: var(--fs-body);
}

.step__title {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-2);
}

/* Sous-titre à l'intérieur d'une colonne de texte. */
.subsection__title {
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
  font-size: var(--fs-h3);
}

.domain__text {
  max-width: 68ch;
}

/* Écosystèmes : ligne technique en bas d'un domaine. */
.domain__stack {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-small);
  color: var(--text-muted);
  max-width: none;
}

.domain__stack-label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-1);
}

/* Le contenu passe au-dessus des lignes et du voile. */
.page-header > .container,
.error-page > .container {
  position: relative;
  z-index: 1;
}

.error-page {
  position: relative;
  overflow: hidden;
}

/* =========================================================
   Nouveaux effets visuels inspirés de la charte enrichie
   ========================================================= */

/* Texte avec dégradé */
.text-gradient {
  background-image: var(--grad-brand-x);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-gradient-teal {
  background-image: var(--grad-teal-lime-x);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-gradient-cool {
  background-image: var(--grad-cool);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Bordures avec dégradé */
.border-gradient {
  position: relative;
}

.border-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background-image: var(--grad-brand-x);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* Effet de brillance subtil sur les cartes interactives */
.arch--interactive {
  transition: all var(--dur) var(--ease);
}

.arch--interactive:hover {
  box-shadow: 
    0 0 0 1px var(--c-teal),
    0 0 20px rgba(47, 212, 200, 0.2),
    0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Badge avec dégradé */
.badge-gradient {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.85rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #000;
  background-image: var(--grad-brand-x);
  border-radius: var(--radius-pill);
  font-weight: 500;
}

.badge-gradient--teal {
  background-image: var(--grad-teal-lime-x);
  color: #000;
}

.badge-gradient--cool {
  background-image: var(--grad-cool);
  color: #000;
}

/* Animation subtile de fond pour les sections importantes */
@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.animated-gradient {
  background-size: 200% 200%;
  animation: gradient-shift 8s ease infinite;
}

/* =========================================================
   Page d'accueil — surtitres numérotés, hero à deux colonnes,
   grille de missions décalée, tuiles de secteurs.
   ========================================================= */

/* Numéro devant le surtitre (01, 02…), même traitement en dégradé
   que les puces de la section approche (.step::before). */
.eyebrow__num {
  background-image: var(--grad-brand-x);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Grille des missions en cours : les deux premières cartes côte à côte,
   la troisième en pleine largeur en dessous pour rompre l'alignement
   strict d'une grille régulière. */
.mission-grid--staggered {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 60rem) {
  .mission-grid--staggered {
    grid-template-columns: 1fr 1fr;
  }

  .mission-grid--staggered > :nth-child(3) {
    grid-column: 1 / -1;
  }
}

/* Accent de secteur sur les tuiles de la page d'accueil (même principe
   que .domain[data-accent], appliqué ici à des .panel). */
.panel[data-accent="teal"] { --accent: var(--c-teal); }
.panel[data-accent="lime"] { --accent: var(--c-lime); }
.panel[data-accent="coral"] { --accent: var(--c-coral); }
.panel[data-accent="amber"] { --accent: var(--c-amber); }
.panel[data-accent] { border-top: 2px solid var(--accent); }