/* ==========================================================================
   Eletec — Design system
   Palette issue du logotype : bleu #013F72 / #004A87 et rouge #ED1C24
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons de design
   ----------------------------------------------------------------------- */
:root {
  /* Marque */
  --navy-950: #01131f;
  --navy-900: #012b4e;
  --navy-800: #013f72;
  --navy-700: #004a87;
  --navy-600: #0d63ad;
  --navy-500: #2b83cd;
  --navy-100: #dceaf7;
  --navy-050: #f0f6fc;

  --red-700: #c2121a;
  --red-600: #ed1c24;
  --red-500: #ff4b52;
  --red-100: #fde3e4;

  /* Neutres */
  --ink: #0b1622;
  --ink-soft: #33465a;
  --muted: #5a6d81;
  --line: #e3e9f0;
  --line-strong: #cfd9e4;
  --mist: #f6f8fb;
  --white: #ffffff;

  /* Accents fonctionnels */
  --success: #12805c;
  --warning: #b25e00;

  /* Typographie */
  --font-display: "Sora", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  /* Rythme */
  --shell: 1240px;
  --gutter: clamp(1.15rem, 4vw, 2.75rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  /* Ombres */
  --shadow-xs: 0 1px 2px rgba(11, 22, 34, .06);
  --shadow-sm: 0 2px 8px -2px rgba(11, 22, 34, .08), 0 1px 3px rgba(11, 22, 34, .04);
  --shadow: 0 18px 40px -22px rgba(1, 43, 78, .28), 0 2px 10px -4px rgba(11, 22, 34, .1);
  --shadow-lg: 0 40px 80px -40px rgba(1, 43, 78, .4), 0 6px 22px -10px rgba(11, 22, 34, .12);
  --shadow-glow: 0 30px 90px -40px rgba(13, 99, 173, .65);

  /* Transitions */
  --ease: cubic-bezier(.22, .68, .32, 1);
  --ease-out: cubic-bezier(.16, .84, .44, 1);
  --t-fast: .18s var(--ease);
  --t: .34s var(--ease);
  --t-slow: .7s var(--ease-out);

  --header-h: 74px;
}

/* --------------------------------------------------------------------------
   2. Réinitialisation
   ----------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(.975rem, .4vw + .9rem, 1.0625rem);
  line-height: 1.7;
  color: var(--ink-soft);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.14;
  letter-spacing: -.022em;
  margin: 0 0 .6em;
  text-wrap: balance;
  font-weight: 650;
}

h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); letter-spacing: -.035em; font-weight: 700; }
h2 { font-size: clamp(1.75rem, 1.15rem + 2.1vw, 2.75rem); letter-spacing: -.03em; }
h3 { font-size: clamp(1.2rem, .98rem + .8vw, 1.55rem); }
h4 { font-size: 1.05rem; }

/* Hiérarchie des titres : après un h2, on ne saute pas au h4 — le contrôle
   d'accessibilité « ordre des titres » refuse ce saut, et il a raison : un
   lecteur d'écran s'en sert pour naviguer. Ces deux classes portent le rendu
   visuel d'un niveau quand la structure impose un autre niveau. */
.h3 { font-size: clamp(1.2rem, .98rem + .8vw, 1.55rem); letter-spacing: -.022em; }
.h4 { font-size: 1.05rem; letter-spacing: -.022em; }

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

a { color: var(--navy-700); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--red-600); }

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

ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .4em; }

strong { color: var(--ink); font-weight: 620; }
/* Surfaces sombres : sans cette remise à zéro, un <strong> hérite de la couleur
   d'encre et devient illisible sur fond marine. */
.hero strong,
.page-hero strong,
.section--navy strong,
.card--navy strong,
.card--accent strong,
.panel--navy strong,
.cta-band strong { color: #fff; }
.hero .text-muted strong,
.section--navy .text-muted strong,
.panel--navy .text-muted strong { color: rgba(255, 255, 255, .92); }

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

:focus-visible {
  outline: 3px solid var(--navy-500);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--navy-900);
  color: #fff;
  padding: .8rem 1.2rem;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------------------
   3. Mise en page
   ----------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: 880px; }
.shell--wide { max-width: 1440px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--mist { background: var(--mist); }
.section--navy {
  background: linear-gradient(160deg, var(--navy-950), var(--navy-900) 45%, var(--navy-800));
  color: rgba(255, 255, 255, .8);
}
.section--navy h1,
.section--navy h2,
.section--navy h3,
.section--navy h4 { color: #fff; }
/* :not(.btn) — un bouton fixe lui-même ses couleurs ; une règle de conteneur
   ne doit pas les écraser. */
.section--navy a:not(.btn) { color: #b9d8f2; }
.section--navy a:not(.btn):hover { color: #fff; }

.section--navy::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(closest-side at 12% 8%, rgba(43, 131, 205, .28), transparent 70%),
    radial-gradient(closest-side at 88% 92%, rgba(237, 28, 36, .16), transparent 70%);
  pointer-events: none;
}
.section--navy > * { position: relative; }

.stack > * + * { margin-top: var(--stack-gap, 1.25rem); }

.grid { display: grid; gap: clamp(1.1rem, 2.4vw, 1.85rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.grid--split { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .grid--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
  .grid--split-reverse > :first-child { order: 2; }
  /* Quand une colonne est nettement plus courte que l'autre, le centrage
     vertical la fait « flotter » avec du vide au-dessus ET en dessous.
     Cette variante aligne les deux colonnes en haut : le vide se retrouve
     uniquement en bas de la colonne courte, ce qui se lit naturellement. */
  .grid--split--top { align-items: start; }
}

/* --------------------------------------------------------------------------
   4. Typographie utilitaire
   ----------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 640;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy-700);
  margin: 0 0 1rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: linear-gradient(90deg, var(--navy-700), var(--red-600));
  border-radius: 2px;
  flex: none;
}
.section--navy .eyebrow,
.panel--navy .eyebrow,
.card--navy .eyebrow,
.card--accent .eyebrow { color: #8fc4ec; }
/* Le tiret du surtitre est un dégradé marine->rouge : sur fond sombre il disparaît. */
.section--navy .eyebrow::before,
.panel--navy .eyebrow::before,
.card--navy .eyebrow::before,
.card--accent .eyebrow::before {
  background: linear-gradient(90deg, #6fc0ff, var(--red-500));
}

/* --------------------------------------------------------------------------
   Marque : « ele » en bleu, « tec » en rouge — reprise exacte du logo
   (#013F72 et #ED1C24, soit --navy-800 et --red-600).
   ----------------------------------------------------------------------- */
.wordmark {
  white-space: nowrap;
  font-weight: 650;
  letter-spacing: -.01em;
  /* Un surtitre est en capitales : sans cette remise à zéro, la marque
     s'afficherait « ELETEC » et perdrait sa graphie minuscule. */
  text-transform: none;
}
.wordmark__ele { color: var(--navy-800); }
.wordmark__tec { color: var(--red-600); }
/* Sur fond marine, le bleu du logo devient illisible : on lui substitue le
   bleu clair déjà employé pour les liens sur surfaces sombres. */
.hero .wordmark__ele,
.page-hero .wordmark__ele,
.section--navy .wordmark__ele,
.panel--navy .wordmark__ele,
.card--navy .wordmark__ele,
.card--accent .wordmark__ele,
.cta-band .wordmark__ele,
.footer .wordmark__ele { color: #9ed0f5; }

.lead {
  font-size: clamp(1.05rem, .6vw + .95rem, 1.3rem);
  line-height: 1.62;
  color: var(--ink-soft);
}
.section--navy .lead,
.panel--navy .lead,
.card--navy .lead,
.card--accent .lead { color: rgba(255, 255, 255, .82); }

.section--navy .text-muted,
.panel--navy .text-muted,
.card--navy .text-muted,
.card--accent .text-muted { color: rgba(255, 255, 255, .62); }

.text-accent { color: var(--red-600); }
.text-navy { color: var(--navy-800); }
.text-muted { color: var(--muted); }
.text-center { text-align: center; }
.text-balance { text-wrap: balance; }

.section-head { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

.rule {
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
  border: 0;
  margin-block: clamp(2rem, 4vw, 3.5rem);
}

/* --------------------------------------------------------------------------
   5. Boutons
   ----------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--navy-800);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .92rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-fast), box-shadow var(--t), background var(--t), color var(--t), border-color var(--t);
  box-shadow: var(--shadow-sm);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, rgba(255, 255, 255, .22), transparent 55%);
  opacity: 0;
  transition: opacity var(--t);
}
.btn:hover { color: var(--btn-fg); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:hover::after { opacity: 1; }
.btn:active { transform: translateY(0); }

.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn--primary { --btn-bg: linear-gradient(135deg, var(--navy-700), var(--navy-900)); }
.btn--accent { --btn-bg: linear-gradient(135deg, var(--red-600), var(--red-700)); }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--navy-800);
  border-color: var(--line-strong);
  box-shadow: none;
}
.btn--ghost:hover { --btn-bg: var(--navy-050); border-color: var(--navy-500); }

/* Bouton fantôme sur fond sombre. Sur fond clair, le survol éclaircit le bouton
   (--navy-050) et le texte reste foncé : c'est voulu. Sur fond sombre il faut
   l'inverse. Sans ces règles : au pied de page, le texte devenait blanc sur un
   fond clair au survol (1,09:1) ; dans les bandeaux d'appel, il restait bleu
   foncé sur un fond sombre, illisible même sans survol. */
.hero .btn--ghost,
.page-hero .btn--ghost,
.cta-band .btn--ghost,
.section--navy .btn--ghost,
.panel--navy .btn--ghost,
.footer .btn--ghost {
  --btn-fg: #fff;
  border-color: rgba(255, 255, 255, .38);
}
.hero .btn--ghost:hover,
.page-hero .btn--ghost:hover,
.cta-band .btn--ghost:hover,
.section--navy .btn--ghost:hover,
.panel--navy .btn--ghost:hover,
.footer .btn--ghost:hover {
  --btn-bg: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .62);
}

.btn--light { --btn-bg: #fff; --btn-fg: var(--navy-900); }
.btn--sm { padding: .62rem 1.1rem; font-size: .875rem; }
.btn--lg { padding: 1.05rem 2rem; font-size: 1rem; }
.btn--block { width: 100%; }

.btn-group { display: flex; flex-wrap: wrap; gap: .85rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 620;
  font-size: .95rem;
  color: var(--navy-700);
}
.link-arrow svg { width: 1em; height: 1em; transition: transform var(--t); }
.link-arrow:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   6. En-tête
   ----------------------------------------------------------------------- */
.topbar {
  background: var(--navy-950);
  color: rgba(255, 255, 255, .74);
  font-size: .815rem;
  position: relative;
  z-index: 60;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 40px;
  flex-wrap: wrap;
}
.topbar a { color: rgba(255, 255, 255, .82); }
.topbar a:hover { color: #fff; }
/* Le bandeau ne porte plus que les coordonnées : elles restent à droite, là où
   elles étaient, et sont visibles à toutes les largeurs. */
.topbar__list { display: flex; align-items: center; gap: 1.35rem; margin: 0 0 0 auto; padding: 0; list-style: none; }
.topbar__list li { margin: 0; display: inline-flex; align-items: center; gap: .45rem; }
.topbar__list svg { width: 14px; height: 14px; opacity: .7; }
.topbar__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, .22);
  animation: pulse-dot 2.4s var(--ease) infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(52, 211, 153, .22); }
  50% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
}

/* Sélecteur de langue logé dans le bandeau haut, qui est sombre : la pastille
   blanche du header y serait trop lourde. */
.topbar__langue .langue > summary {
  padding: .2rem .55rem;
  background: transparent;
  border-color: rgba(255, 255, 255, .3);
  color: rgba(255, 255, 255, .85);
  font-size: .78rem;
}
.topbar__langue .langue > summary:hover { border-color: rgba(255, 255, 255, .6); color: #fff; }
.topbar__langue .langue[open] > summary { border-color: rgba(255, 255, 255, .75); color: #fff; }
/* Le panneau déroulant reste une feuille claire : ses liens gardent donc le
   texte foncé, que la règle .topbar a écraserait sinon. */
.topbar__langue .langue__liste a,
.topbar__langue .langue__liste a:hover { color: var(--ink); }

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 12px 34px -26px rgba(1, 43, 78, .5);
  background: rgba(255, 255, 255, .93);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; gap: .7rem; flex: none; }
.brand img { height: 34px; width: auto; }
.brand__mark {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--navy-700), var(--navy-950));
  display: grid; place-items: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -.04em;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.brand__mark span { color: var(--red-500); }

.nav { display: flex; align-items: center; gap: .2rem; }
.nav__link {
  position: relative;
  padding: .55rem .85rem;
  border-radius: 999px;
  font-size: .925rem;
  font-weight: 560;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: .28rem;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--red-600);
  transform: translateX(-50%);
  transition: width var(--t);
}
.nav__link:hover { color: var(--navy-800); background: var(--navy-050); }
.nav__link:hover::after { width: 18px; }
.nav__link.is-active { color: var(--navy-800); font-weight: 640; }
.nav__link.is-active::after { width: 18px; }

.header__actions { display: flex; align-items: center; gap: .6rem; flex: none; }

/* Appel à l’action du menu déroulant. Il ne sert que sur petit écran, là où le
   bouton de l’en-tête est masqué ; sur grand écran il ferait doublon avec lui
   (« Discutons de votre projet »). La requête média plus bas le réaffiche. */
.nav__cta { display: none; }

.burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  padding: 0;
  position: relative;
}
.burger span {
  position: absolute;
  left: 12px;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--navy-900);
  transition: transform var(--t), opacity var(--t-fast), top var(--t);
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

.scroll-progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--navy-700), var(--red-600));
  transition: width .1s linear;
}

@media (max-width: 1080px) {
  .header__actions .btn { display: none; }
  .burger { display: block; }
  .nav {
    position: fixed;
    inset: calc(var(--header-h) + 40px) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: .15rem;
    background: #fff;
    padding: 1rem var(--gutter) 2rem;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    max-height: calc(100dvh - var(--header-h) - 40px);
    overflow-y: auto;
    transition: opacity var(--t), transform var(--t), visibility var(--t);
  }
  .nav.is-open { opacity: 1; transform: translateY(0); visibility: visible; }
  .nav__link { padding: .95rem 1rem; border-radius: 12px; font-size: 1.02rem; }
  .nav__link::after { display: none; }
  .nav__link.is-active { background: var(--navy-050); }
  .nav__cta { margin-top: .8rem; display: inline-flex; }
}

/* --------------------------------------------------------------------------
   7. Hero
   ----------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 46%, var(--navy-800) 100%);
  color: rgba(255, 255, 255, .82);
  padding-block: clamp(3.25rem, 7vw, 6rem) clamp(3rem, 6vw, 5.25rem);
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 80%;
  background:
    radial-gradient(closest-side at 20% 30%, rgba(43, 131, 205, .5), transparent 72%),
    radial-gradient(closest-side at 78% 15%, rgba(237, 28, 36, .22), transparent 70%);
  filter: blur(10px);
  z-index: -2;
  animation: aurora 18s var(--ease) infinite alternate;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, #000 20%, transparent 78%);
  z-index: -1;
  pointer-events: none;
}
@keyframes aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2%, -3%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.02); }
}

.hero h1 {
  color: #fff;
  /* Echelle volontairement plus basse sur petit ecran : a 375 px, une taille
     de 33 px faisait grimper le titre a huit lignes. */
  font-size: clamp(1.8rem, 1rem + 3.4vw, 3.5rem);
  /* Toute la largeur disponible : le titre tient en 2 lignes au lieu de 5,
     ce qui rend le hero beaucoup moins haut. */
  max-width: min(100%, 38ch);
  text-shadow: 0 2px 26px rgba(1, 19, 31, .6);
}
.hero h1 .grad {
  background: linear-gradient(100deg, #6fc0ff 0%, #ffffff 46%, #ff8a90 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__lead {
  font-size: clamp(1.02rem, .5vw + .94rem, 1.22rem);
  color: rgba(255, 255, 255, .84);
  max-width: 78ch;
  text-shadow: 0 1px 14px rgba(1, 19, 31, .5);
}
.hero .eyebrow { color: #8fc4ec; }
.hero .eyebrow::before { background: linear-gradient(90deg, #6fc0ff, var(--red-500)); }

/* --------------------------------------------------------------------------
   Animation plein fond
   ----------------------------------------------------------------------- */

/* Le canvas couvre toute la zone bleue. pointer-events:none est indispensable :
   sans lui il intercepterait les clics destines aux boutons du hero. */
.hero__fx {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Voile de lisibilite : assombrit la gauche ou se trouve le texte, laisse
   l'animation pleinement visible sur la droite. */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(1, 19, 31, .84) 0%,
    rgba(1, 19, 31, .66) 34%,
    rgba(1, 19, 31, .2) 62%,
    rgba(1, 19, 31, 0) 88%
  );
}
@media (max-width: 860px) {
  /* Sur mobile le texte occupe toute la largeur : on assombrit uniformement. */
  .hero__veil {
    background: linear-gradient(
      170deg,
      rgba(1, 19, 31, .88) 0%,
      rgba(1, 19, 31, .72) 55%,
      rgba(1, 19, 31, .38) 100%
    );
  }
}

.hero__inner { position: relative; z-index: 3; }

.hero__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.hero__chips li { margin: 0; }
.hero .btn-group { margin-top: 1.75rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .07);
  font-size: .8rem;
  font-weight: 540;
  color: rgba(255, 255, 255, .88);
  backdrop-filter: blur(4px);
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.chip:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .4); transform: translateY(-1px); }
.chip svg { width: 14px; height: 14px; }

.hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(1rem, 2.5vw, 2.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid rgba(255, 255, 255, .14);
}

/* --------------------------------------------------------------------------
   8. Statistiques animées
   ----------------------------------------------------------------------- */
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 1rem + 2.4vw, 2.85rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  color: #fff;
  display: flex;
  align-items: baseline;
  gap: .08em;
}
.stat__suffix { font-size: .58em; color: var(--red-500); font-weight: 700; }
.stat__label {
  display: block;
  margin-top: .55rem;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
  font-weight: 560;
}
.stat--dark .stat__value { color: var(--navy-900); }
.stat--dark .stat__suffix { color: var(--red-600); }
.stat--dark .stat__label { color: var(--muted); }
/* Indicateur non numérique : un libellé comme « France & international » ne doit pas
   prendre la taille d'un chiffre, sinon il casse la ligne du bandeau. */
.stat__value--text {
  font-size: clamp(1.2rem, .55rem + 1.5vw, 1.7rem);
  line-height: 1.25;
  letter-spacing: -.02em;
}

/* --------------------------------------------------------------------------
   9. Cartes
   ----------------------------------------------------------------------- */
.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 2.6vw, 2rem);
  box-shadow: var(--shadow-xs);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--navy-700), var(--navy-500) 55%, var(--red-600));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--navy-100); }
.card:hover::before { transform: scaleX(1); }

.card--navy {
  background: linear-gradient(155deg, var(--navy-900), var(--navy-950));
  border-color: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .78);
}
.card--navy h3, .card--navy h4 { color: #fff; }
.card--navy .card__icon { background: rgba(255, 255, 255, .1); color: #9ed0f5; }
.card--navy:hover { border-color: rgba(255, 255, 255, .26); }

.card--accent {
  background: linear-gradient(155deg, var(--navy-800), var(--navy-950) 70%);
  border-color: transparent;
  color: rgba(255, 255, 255, .8);
  box-shadow: var(--shadow-glow);
}
.card--accent h3, .card--accent h4 { color: #fff; }
.card--accent .card__icon { background: rgba(237, 28, 36, .2); color: #ff9aa0; }

.card__icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--navy-050);
  color: var(--navy-700);
  margin-bottom: 1.1rem;
  flex: none;
  transition: transform var(--t), background var(--t);
}
.card__icon svg { width: 24px; height: 24px; }
.card:hover .card__icon { transform: translateY(-2px) rotate(-4deg); }

.card h3 { margin-bottom: .5rem; }
.card__body { flex: 1; }
.card__body p { color: inherit; opacity: .86; font-size: .955rem; }
.card__foot { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.card--navy .card__foot, .card--accent .card__foot { border-top-color: rgba(255, 255, 255, .14); }

.card__tag {
  position: absolute;
  top: 1.15rem; right: 1.15rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .28rem .6rem;
  border-radius: 999px;
  background: var(--red-100);
  color: var(--red-700);
}
.card--accent .card__tag { background: rgba(255, 255, 255, .16); color: #fff; }

/* Liste à puces stylée */
.ticks { list-style: none; padding: 0; margin: 1rem 0 0; }
.ticks li {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: .6rem;
  font-size: .945rem;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .52em;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--navy-050);
  border: 1.5px solid var(--navy-500);
  transition: background var(--t), border-color var(--t);
}
.ticks li::after {
  content: "";
  position: absolute;
  left: 4.6px; top: .86em;
  width: 4px; height: 7px;
  border: solid var(--navy-700);
  border-width: 0 2px 2px 0;
  transform: rotate(43deg) scale(0);
  transform-origin: center;
  transition: transform var(--t);
}
.is-visible .ticks li::after,
.ticks.is-visible li::after { transform: rotate(43deg) scale(1); }
.ticks li:hover::before { background: var(--navy-800); border-color: var(--navy-800); }
.card--navy .ticks li::before, .card--accent .ticks li::before {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .35);
}
.card--navy .ticks li::after, .card--accent .ticks li::after { border-color: #b9d8f2; }

/* --------------------------------------------------------------------------
   10. Sections numérotées / listes alternées
   ----------------------------------------------------------------------- */
.feature-row {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  padding-block: clamp(2rem, 4vw, 3.25rem);
  border-top: 1px solid var(--line);
}
.feature-row:first-of-type { border-top: 0; padding-top: 0; }
@media (min-width: 860px) {
  .feature-row { grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.15fr); }
}
.feature-row__index {
  font-family: var(--font-mono);
  font-size: .9rem;
  font-weight: 600;
  color: var(--navy-500);
  letter-spacing: .05em;
  padding-top: .3rem;
}
.section--navy .feature-row { border-top-color: rgba(255, 255, 255, .12); }
.section--navy .feature-row__index { color: #6fc0ff; }

/* --------------------------------------------------------------------------
   11. Bandeau défilant (marquee)
   ----------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  padding-block: .35rem;
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  width: max-content;
  /* La duree est calculee cote serveur selon le nombre d'entrees, pour garder
     une vitesse de defilement constante quand la liste s'allonge. */
  animation: marquee var(--marquee-duration, 46s) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-size: clamp(1rem, .4vw + .9rem, 1.22rem);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--ink);
  white-space: nowrap;
  opacity: .72;
  transition: opacity var(--t), color var(--t);
}
.marquee__item:hover { opacity: 1; color: var(--navy-800); }
.marquee__item::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--red-600);
  opacity: .6;
  flex: none;
}

/* Logotypes d'enseignes : affiches en couleur, mais adoucis pour que le bandeau
   reste une texture et non un mur de marques. Le gris d'origine perdait les
   marques dont la couleur fait le signe (La Poste, Schering) et rendait
   illisibles les logotypes tres fines. Couleur pleine et legere mise a
   l'echelle au survol.
   La pastille rouge qui precede les noms d'enseignes est retiree devant les
   logotypes : elle n'a de sens que devant un mot.
   Les fichiers font 300 x 150 (rapport 2:1), donc une hauteur de 50 px donne
   une largeur de 100 px.
   --logo-scale permet d'ajuster un logo isole depuis includes/config.php. */
.marquee__item--logo { opacity: 1; }
.marquee__item--logo::before { content: none; }
.marquee__item--logo img {
  height: calc(50px * var(--logo-scale, 1));
  width: auto;
  max-width: 220px;
  object-fit: contain;
  filter: saturate(.94) contrast(1.02);
  opacity: .84;
  transition: filter var(--t), opacity var(--t), transform var(--t);
}
.marquee__item--logo:hover { opacity: 1; }
.marquee__item--logo:hover img {
  filter: saturate(1) contrast(1);
  opacity: 1;
  transform: scale(1.06);
}
@media (max-width: 640px) {
  .marquee__item--logo img {
    height: calc(40px * var(--logo-scale, 1));
    max-width: 180px;
  }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   12. Frise chronologique
   ----------------------------------------------------------------------- */
.timeline { position: relative; margin: 0; padding: 0 0 0 1.9rem; list-style: none; }
.timeline::before {
  content: "";
  position: absolute;
  left: 6px; top: .6rem; bottom: .6rem;
  width: 2px;
  background: linear-gradient(180deg, var(--navy-500), var(--line) 55%, transparent);
}
.timeline li { position: relative; margin: 0 0 2rem; }
.timeline li:last-child { margin-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -1.9rem; top: .58rem;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--navy-600);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .8);
  z-index: 1;
  transition: transform var(--t), border-color var(--t);
}
.timeline li:hover::before { transform: scale(1.22); border-color: var(--red-600); }
.timeline__period {
  display: block;
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--red-600);
  margin-bottom: .2rem;
}
.timeline h3,
.timeline h4 { margin-bottom: .3rem; }
.timeline p { font-size: .93rem; margin: 0; color: var(--muted); }
.section--navy .timeline li::before { background: var(--navy-950); box-shadow: 0 0 0 4px rgba(1, 19, 31, .9); }
.section--navy .timeline p { color: rgba(255, 255, 255, .62); }

/* --------------------------------------------------------------------------
   13. Accordéon
   ----------------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.35rem .25rem;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, .5vw + .92rem, 1.2rem);
  font-weight: 620;
  color: var(--ink);
  letter-spacing: -.02em;
  transition: color var(--t-fast);
}
.accordion__trigger:hover { color: var(--navy-700); }
.accordion__sign {
  position: relative;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.accordion__sign::before,
.accordion__sign::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 12px; height: 2px;
  border-radius: 2px;
  background: var(--navy-800);
  transform: translate(-50%, -50%);
  transition: transform var(--t), opacity var(--t), background var(--t);
}
.accordion__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.accordion__trigger[aria-expanded="true"] .accordion__sign { background: var(--navy-800); border-color: var(--navy-800); }
.accordion__trigger[aria-expanded="true"] .accordion__sign::before { background: #fff; }
.accordion__trigger[aria-expanded="true"] .accordion__sign::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg) scale(0); }
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-slow);
}
.accordion__panel > div { overflow: hidden; }
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__content { padding: 0 .25rem 1.7rem; max-width: 76ch; }
.accordion__content p { color: var(--muted); }

/* --------------------------------------------------------------------------
   14. Formulaires
   ----------------------------------------------------------------------- */
.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 3vw, 2.75rem);
  box-shadow: var(--shadow);
}

.field { margin-bottom: 1.15rem; }
/* Un champ masqué par le serveur — ici la question sur la maturité IA, sans
   objet pour une nature de projet qui ne concerne pas l'IA — doit disparaître
   avant même l'exécution du JavaScript. */
.field[hidden] { display: none; }
.field__label {
  display: block;
  font-size: .87rem;
  font-weight: 620;
  color: var(--ink);
  margin-bottom: .42rem;
}
.field__label .req { color: var(--red-600); margin-left: .15rem; }
.field__hint { font-size: .8rem; color: var(--muted); margin: .35rem 0 0; }

.input, .select, .textarea {
  width: 100%;
  padding: .82rem 1rem;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  appearance: none;
}
.textarea { min-height: 148px; resize: vertical; line-height: 1.6; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--navy-500); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--navy-700);
  box-shadow: 0 0 0 4px rgba(1, 63, 114, .12);
}
.input::placeholder, .textarea::placeholder { color: #98a7b7; }
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7d90' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 16px;
  padding-right: 2.6rem;
}

.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea { border-color: var(--red-600); background: #fffafa; }
.field.has-error .input:focus,
.field.has-error .select:focus,
.field.has-error .textarea:focus { box-shadow: 0 0 0 4px rgba(237, 28, 36, .13); }

.field__error {
  display: none;
  align-items: center;
  gap: .4rem;
  margin-top: .42rem;
  font-size: .82rem;
  font-weight: 560;
  color: var(--red-700);
}
.field.has-error .field__error { display: flex; animation: shake-in .32s var(--ease); }
@keyframes shake-in {
  0% { transform: translateX(-4px); opacity: 0; }
  60% { transform: translateX(2px); }
  100% { transform: translateX(0); opacity: 1; }
}

.field--row { display: grid; gap: 1.15rem; }
@media (min-width: 640px) { .field--row { grid-template-columns: 1fr 1fr; } }

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--muted);
  cursor: pointer;
}
.checkbox input {
  appearance: none;
  width: 20px; height: 20px;
  flex: none;
  margin: .1rem 0 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
  position: relative;
}
.checkbox input:checked { background: var(--navy-800); border-color: var(--navy-800); }
.checkbox input:checked::after {
  content: "";
  position: absolute;
  left: 6px; top: 2.4px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}
.field.has-error .checkbox input { border-color: var(--red-600); }

/* Piège à robots — invisible pour l'humain */
.hp-field {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  padding: 0;
}

/* Onglets de formulaire */
.tabs { display: flex; gap: .35rem; margin-bottom: 1.75rem; padding: .3rem; background: var(--mist); border-radius: 999px; }
.tab {
  flex: 1;
  padding: .72rem 1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--t), color var(--t), box-shadow var(--t);
  white-space: nowrap;
}
.tab:hover { color: var(--navy-800); }
.tab.is-active { background: #fff; color: var(--navy-900); box-shadow: var(--shadow-sm); }
.tabpanel[hidden] { display: none; }
@media (max-width: 560px) { .tabs { flex-direction: column; border-radius: var(--radius); } }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.6rem; }
.form-note { font-size: .8rem; color: var(--muted); max-width: 42ch; }

/* Indicateur d'envoi */
.btn.is-loading { pointer-events: none; opacity: .82; }
.btn.is-loading .btn__label { opacity: .55; }
.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: none;
}
.btn.is-loading .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Messages de retour */
.alert {
  display: flex;
  gap: .85rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius);
  font-size: .92rem;
  margin-bottom: 1.5rem;
  border: 1px solid;
  animation: fade-up .45s var(--ease-out) both;
}
.alert svg { width: 20px; height: 20px; flex: none; margin-top: .1rem; }
.alert--success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.alert--error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.alert--info { background: var(--navy-050); border-color: var(--navy-100); color: var(--navy-800); }
.alert strong { display: block; margin-bottom: .15rem; }
.alert ul { margin: .4rem 0 0; padding-left: 1.1rem; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   15. Blocs latéraux / encarts
   ----------------------------------------------------------------------- */
.panel {
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.35rem, 2.5vw, 1.85rem);
}
.panel--navy {
  background: linear-gradient(155deg, var(--navy-900), var(--navy-950));
  border-color: transparent;
  color: rgba(255, 255, 255, .78);
}
.panel--navy h3, .panel--navy h4 { color: #fff; }
.panel--navy a:not(.btn) { color: #b9d8f2; }

.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li {
  display: flex;
  gap: .9rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.contact-list li:last-child { border-bottom: 0; }
.contact-list svg { width: 20px; height: 20px; flex: none; margin-top: .18rem; color: var(--navy-600); }
.contact-list strong { display: block; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 620; }
.contact-list span, .contact-list a { font-size: .96rem; color: var(--ink); }
.panel--navy .contact-list li { border-bottom-color: rgba(255, 255, 255, .12); }
.panel--navy .contact-list strong { color: rgba(255, 255, 255, .55); }
.panel--navy .contact-list span, .panel--navy .contact-list a { color: #fff; }

/* Appel à l'action final */
.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: linear-gradient(150deg, var(--navy-900), var(--navy-950) 60%);
  color: rgba(255, 255, 255, .8);
  padding: clamp(2rem, 5vw, 3.75rem);
  box-shadow: var(--shadow-lg);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(237, 28, 36, .34), transparent 72%);
  animation: aurora 14s var(--ease) infinite alternate;
}
.cta-band::after {
  content: "";
  position: absolute;
  inset: auto auto -50% -10%;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(43, 131, 205, .4), transparent 70%);
  animation: aurora 17s var(--ease) infinite alternate-reverse;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; max-width: 22ch; }

/* --------------------------------------------------------------------------
   16. Pied de page
   ----------------------------------------------------------------------- */
.footer {
  background: var(--navy-950);
  color: rgba(255, 255, 255, .62);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  font-size: .92rem;
  position: relative;
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
}
.footer a:not(.btn) { color: rgba(255, 255, 255, .74); }
.footer a:not(.btn):hover { color: #fff; }
.footer h3,
.footer h4 {
  color: #fff;
  font-size: .8rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
  font-weight: 640;
}
.footer__grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  padding-bottom: clamp(2.25rem, 4vw, 3.25rem);
}
.footer__grid > :first-child { grid-column: 1 / -1; }
@media (min-width: 860px) {
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
  .footer__grid > :first-child { grid-column: auto; }
}
.footer__brand { display: inline-flex; align-items: center; gap: .75rem; margin-bottom: 1.1rem; }
.footer__plate {
  background: #fff;
  padding: .5rem .8rem;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
}
.footer__plate img { height: 26px; width: auto; }
.footer__links { list-style: none; padding: 0; margin: 0; }
.footer__links li { margin-bottom: .6rem; }
.footer__links a { display: inline-flex; align-items: center; gap: .4rem; }
.footer__links a::before {
  content: "";
  width: 0; height: 1px;
  background: currentColor;
  transition: width var(--t);
}
.footer__links a:hover::before { width: 10px; }
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-block: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .85rem;
  font-size: .82rem;
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }

.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  color: var(--navy-800);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--t), transform var(--t), visibility var(--t), background var(--t);
  z-index: 45;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--navy-800); color: #fff; }
.to-top svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   17. Fil d'Ariane & en-tête de page
   ----------------------------------------------------------------------- */
.page-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, var(--navy-950), var(--navy-900) 55%, var(--navy-800));
  color: rgba(255, 255, 255, .8);
  padding-block: clamp(3rem, 6vw, 4.75rem) clamp(3rem, 7vw, 5.5rem);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 80% 80% at 30% 0%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 30% 0%, #000, transparent 75%);
  pointer-events: none;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: -60% -10% auto auto;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(43, 131, 205, .38), transparent 70%);
  animation: aurora 16s var(--ease) infinite alternate;
  pointer-events: none;
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; max-width: 24ch; }
.page-hero .lead { color: rgba(255, 255, 255, .8); }

/* Animation plein fond des en-têtes de page. Même principe que le hero
   d'accueil : canvas décoratif, aucun clic capté. Les règles ci-dessous
   passent après ".page-hero > *" pour reprendre la main sur z-index. */
.page-hero__fx {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Voile de lisibilité. Contrairement au hero d'accueil, assombri à gauche
   seulement, l'en-tête de page porte du texte sur toute sa largeur : le voile
   est donc uniforme, et assez léger pour laisser voir l'animation. */
.page-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(1, 19, 31, .34);
}

/* La page IA est la vitrine du site : son voile est plus clair pour que le
   réseau neuronal porte davantage. Le titre reste blanc sur bleu nuit, donc
   largement au-dessus du seuil de contraste. */
.page-hero--ia .page-hero__veil { background: rgba(1, 19, 31, .16); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  font-size: .82rem;
  color: rgba(255, 255, 255, .58);
}
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: .5rem; opacity: .45; }
.breadcrumb a { color: rgba(255, 255, 255, .75); }
.breadcrumb span { color: #fff; }

/* --------------------------------------------------------------------------
   18. Animations d'apparition
   ----------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .72s var(--ease-out), transform .72s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="left"] { transform: translateX(-30px); }
[data-reveal="right"] { transform: translateX(30px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="fade"] { transform: none; }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Sans JavaScript, tout est visible immédiatement. */
.no-js [data-reveal] { opacity: 1 !important; transform: none !important; }

/* Filet de sécurité : si l'observateur ne se déclenche pas (très vieux
   navigateur, erreur JS), le contenu reste lisible après un délai. */
@keyframes reveal-fallback {
  to { opacity: 1; transform: none; }
}
.js-ready [data-reveal]:not(.is-visible) {
  animation: reveal-fallback .01s linear 2.5s forwards;
}

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

/* --------------------------------------------------------------------------
   19. Divers
   ----------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 640;
  letter-spacing: .04em;
  background: var(--navy-050);
  color: var(--navy-700);
  border: 1px solid var(--navy-100);
}
.badge--red { background: var(--red-100); color: var(--red-700); border-color: #f8c9cc; }
.badge--green { background: #ecfdf5; color: var(--success); border-color: #a7f3d0; }

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.kpi-strip > * {
  background: #fff;
  padding: clamp(1.25rem, 2.5vw, 1.85rem);
  transition: background var(--t);
}
.kpi-strip > *:hover { background: var(--navy-050); }
/* Certaines valeurs tiennent sur une ligne (« 10+ »), d'autres sur deux
   (« France & international »). On pousse les libellés en bas pour que la
   rangée reste alignée d'un indicateur à l'autre. */
.kpi-strip .stat {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.kpi-strip .stat__label { margin-top: auto; padding-top: .55rem; }

.pill-list { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; padding: 0; margin: 1rem 0 0; }
.pill-list li { margin: 0; }
.pill-list span {
  display: inline-block;
  padding: .32rem .75rem;
  border-radius: 999px;
  background: var(--mist);
  border: 1px solid var(--line);
  font-size: .8rem;
  font-family: var(--font-mono);
  color: var(--ink-soft);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.pill-list span:hover { background: var(--navy-800); color: #fff; border-color: var(--navy-800); transform: translateY(-2px); }
.panel--navy .pill-list span, .card--navy .pill-list span, .card--accent .pill-list span {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .8);
}

.figure-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--mist);
  box-shadow: var(--shadow);
}
.figure-frame svg { width: 100%; height: auto; display: block; }

.quote {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, .6vw + 1rem, 1.5rem);
  line-height: 1.5;
  letter-spacing: -.02em;
  color: var(--ink);
  border-left: 3px solid var(--red-600);
  padding-left: 1.4rem;
  margin: 0;
}

/* Portrait du fondateur. L'image fait 800 x 1000 px (rapport 4:5), recadrée à la
   préparation par `_tests/preparer-portrait.php` : le visage reste dans la partie
   haute, donc `object-position` n'a pas besoin d'être ajusté. */
.portrait { margin: 0 0 1.8rem; }
.portrait img {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.portrait figcaption {
  margin-top: .9rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.portrait strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -.02em;
  color: var(--ink);
}
.portrait span { font-size: .88rem; color: var(--muted); }

/* Démonstration vidéo, dans une fiche de référence.
   La largeur est bridée volontairement : les sources d'origine sont des
   enregistrements d'écran anciens, qu'agrandir ne ferait que rendre plus flous.
   `width` et `height` sont posés en attributs dans le HTML pour que le
   navigateur réserve la bonne place avant chargement (pas de saut de mise en page). */
.demo { margin: 1.1rem 0 0; max-width: 520px; }
.demo video {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #06121c;
}
.demo figcaption {
  margin-top: .6rem;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--muted);
}
/* Crédit du document d'origine : sur sa propre ligne, en petit, mais lisible. */
.demo__credit { display: block; margin-top: .4rem; font-size: .78rem; color: var(--ink-soft); }
@media (max-width: 560px) { .demo { max-width: none; } }

/* Sélecteur de langue. Un <details> natif : il s'ouvre au clavier comme à la
   souris, se referme avec Échap, et ne demande pas une ligne de JavaScript —
   ce qui est indispensable puisque le site fonctionne sans. */
.langue { position: relative; }
.langue > summary {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .38rem .6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink-soft);
  font-size: .8rem;
  font-weight: 620;
  letter-spacing: .02em;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.langue > summary::-webkit-details-marker { display: none; }
.langue > summary:hover { border-color: var(--line-strong); color: var(--navy-800); }
.langue[open] > summary { border-color: var(--navy-700); color: var(--navy-800); }
.langue__liste {
  position: absolute;
  right: 0;
  top: calc(100% + .45rem);
  z-index: 60;
  min-width: 11rem;
  margin: 0;
  padding: .35rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.langue__liste a {
  display: block;
  padding: .45rem .95rem;
  color: var(--ink);
  font-size: .88rem;
  text-decoration: none;
}
.langue__liste a:hover { background: var(--mist); }
.langue__liste a[aria-current="true"] { color: var(--navy-800); font-weight: 650; }
/* Langue déduite de celle du navigateur : mise en avant, jamais imposée. */
.langue__liste a.is-suggeree::after {
  content: '·';
  margin-left: .4rem;
  color: var(--red-600);
  font-weight: 700;
}
/* Sur petit écran, le sélecteur reste affiché : le masquer rendrait le
   changement de langue impossible depuis un téléphone. Il se contente du
   globe et du code de langue, à côté du bouton de menu, là où le bouton
   d’appel à l’action disparaît justement. */
@media (max-width: 900px) {
  .langue > summary { padding: .4rem .5rem; gap: .25rem; }
  .langue__liste { min-width: 9.5rem; }
}

.divider-dots { display: flex; gap: .4rem; align-items: center; }
.divider-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.divider-dots span:first-child { background: var(--red-600); width: 22px; border-radius: 3px; }

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

/* Barre de progression de lecture des sections (latérale, desktop) */
.section-rail { display: none; }
@media (min-width: 1400px) {
  .section-rail {
    display: block;
    position: fixed;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .section-rail li { margin: 0 0 .55rem; }
  .section-rail a {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .section-rail i {
    display: block;
    width: 22px; height: 2px;
    background: var(--line-strong);
    border-radius: 2px;
    transition: width var(--t), background var(--t);
  }
  .section-rail a:hover i, .section-rail a.is-active i { width: 36px; background: var(--red-600); }
  .section-rail a:hover, .section-rail a.is-active { color: var(--navy-800); }
}

/* Barre de notification */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 140%);
  z-index: 80;
  max-width: min(92vw, 460px);
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .95rem 1.15rem;
  border-radius: var(--radius);
  background: var(--navy-950);
  color: #fff;
  font-size: .9rem;
  box-shadow: var(--shadow-lg);
  transition: transform .5s var(--ease-out);
}
.toast.is-visible { transform: translate(-50%, 0); }
.toast svg { width: 20px; height: 20px; flex: none; color: #34d399; }

/* Impression */
@media print {
  .topbar, .header, .footer, .to-top, .cta-band, .section-rail { display: none !important; }
  body { color: #000; }
  .hero, .page-hero, .section--navy { background: none !important; color: #000 !important; }
  .hero h1, .page-hero h1, .section--navy h1, .section--navy h2, .section--navy h3 { color: #000 !important; }
}