/* =====================================================================
   Darwin Retail - systeme visuel du site

   Direction reprise de darwin-retail.com : fond sombre, Inter en graisse
   700+ avec un interlettrage tres serre, surfaces de verre, accents
   orange et violet.

   Cette feuille porte le chrome commun (header, pied de page, boutons,
   formulaires) et les blocs de la page d accueil, de Company et des
   mentions legales. Les catalogues ont leur feuille en plus :
   use-cases.css et showroom.css.

   Seule a-day-with-darwin.html reste a lecart : elle embarque ses
   propres styles et ne charge pas ce fichier.
   ===================================================================== */

:root {
  /* Les deux teintes de base, en composantes : tout le reste s y pose.
     --veil est le voile clair des surfaces, --ground le fond de page. */
  --veil: 255, 255, 255;
  --ground: 12, 9, 16;

  --bg: #0c0910;
  --bg-elevated: #17111d;
  --bg-card: rgba(var(--ground), 0.72);
  --screen-top: #16101d;
  --screen-bottom: #0b0810;

  --surface: rgba(var(--veil), 0.055);
  --surface-strong: rgba(var(--veil), 0.09);
  --line: rgba(var(--veil), 0.11);
  --line-strong: rgba(var(--veil), 0.22);

  --text: #f8f6f4;
  --text-soft: #ded9df;
  --lead: #c1bbc4;
  --muted: #aaa4ae;
  --muted-2: #7c7582;
  /* le texte pose sur une surface claire : bouton blanc, pastille orange */
  --on-bright: #171119;

  --purple: #6b2d89;
  --purple-deep: #371547;
  --purple-soft: #dcb9eb;
  --orange: #f15a2b;
  --orange-hot: #ff7348;
  --orange-dark: #d1421f;
  --cyan: #18aeda;

  --shadow: 0 30px 90px rgba(0, 0, 0, 0.35);
  --shadow-soft: 0 16px 50px rgba(0, 0, 0, 0.25);
  --radius-lg: 30px;
  --radius-md: 18px;
  --radius-sm: 13px;
  /* Le contenu suit la fenetre : une gouttiere proportionnelle de chaque
     cote, et un plafond qui ne joue que sur les tres grands ecrans. */
  --max: 1800px;
  --gutter: clamp(20px, 4vw, 80px);

  /* Echelle typographique : un seul jeu de tailles pour les textes
     courants, pour que deux blocs voisins ne se lisent pas differemment.
     --fs-micro pour les notes, --fs-eyebrow pour les sur-titres en
     capitales, --fs-caption pour le corps des cartes, --fs-body pour les
     listes et les libelles, --fs-lead pour les chapeaux de section. */
  --fs-micro: 13px;
  --fs-eyebrow: 12px;
  --fs-caption: 15.5px;
  --fs-body: 17px;
  --fs-lead: clamp(17px, 1.45vw, 19.5px);
  /* Le sous-titre du hero, un cran sous les chapeaux de section. */
  --fs-hero-lead: clamp(16.5px, 1.4vw, 19px);

  /* Alias herites : showroom.css designe ses couleurs avec les anciens
     noms du theme clair. On les remappe ici plutot que de reecrire ses
     1200 lignes de graphiques, dont la mise en page reste juste. */
  --ink: var(--text);
  --ink-soft: var(--lead);
  --white: var(--bg-elevated);
}


/* =============================================== la variante claire

   Showroom et Company respirent autrement : meme typographie, memes
   formes, meme orange, mais posees sur un fond clair. Tout tient dans
   la redefinition des jetons, puisque les surfaces sont ecrites en
   « voile sur le fond » et non en blanc fixe. */

.theme-light {
  --veil: 26, 18, 34;
  --ground: 252, 250, 252;

  --bg: #f7f4f7;
  --bg-elevated: #ffffff;
  --bg-card: rgba(var(--ground), 0.86);

  --surface: rgba(var(--veil), 0.035);
  --surface-strong: rgba(var(--veil), 0.07);
  --line: rgba(var(--veil), 0.12);
  --line-strong: rgba(var(--veil), 0.24);

  --text: #17121e;
  --text-soft: #38313f;
  --lead: #4d4655;
  --muted: #6d6577;
  --muted-2: #8d8698;
  --on-bright: #fbf9fb;

  --shadow: 0 26px 70px rgba(26, 18, 34, 0.11);
  --shadow-soft: 0 14px 40px rgba(26, 18, 34, 0.08);

  /* les alias sont substitues sur l element qui les declare : chaque
     theme doit refaire les siens, sinon ils gardent ceux de :root */
  --ink: var(--text);
  --ink-soft: var(--lead);
  --white: var(--bg-elevated);

  background:
    radial-gradient(circle at 80% 8%, rgba(107, 45, 137, 0.09), transparent 30rem),
    radial-gradient(circle at 6% 52%, rgba(241, 90, 43, 0.06), transparent 26rem),
    var(--bg);
  color: var(--text);
}

/* Le degrade des grands titres part du blanc : sur fond clair il faut
   l inverser, sinon les premiers mots disparaissent. */
.theme-light .company-hero h1 {
  background: linear-gradient(146deg, #1d1626 14%, #6b2d89 62%, #c9421c 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Le pied de page et l en-tete collant suivent le fond. */
.theme-light .brand__mark {
  border: 1px solid rgba(var(--veil), 0.1);
  box-shadow: 0 4px 14px rgba(26, 18, 34, 0.08);
}

.theme-light .site-header--scrolled {
  background: rgba(var(--ground), 0.94);
}

.theme-light .language-switch option,
.theme-light .lead-form option {
  background: #ffffff;
  color: var(--text);
}

/* Les visuels clairs n ont plus besoin de leur plaque ni de leur retenue :
   ils sont enfin sur leur fond. */
.theme-light .architecture-visual,
.theme-light .sr-plan__img {
  filter: none;
  border-color: rgba(var(--veil), 0.1);
  box-shadow: 0 18px 44px rgba(26, 18, 34, 0.1);
}

/* Sur fond clair, --muted est un gris moyen : les entrees de menu et les
   liens du sous-menu s y effacaient. Ils passent a la couleur du texte. */
.theme-light .nav-menu summary,
.theme-light .nav-menu-link,
.theme-light .nav-submenu a {
  color: var(--text-soft);
}

.theme-light .nav-menu summary:hover,
.theme-light .nav-menu-link:hover,
.theme-light .nav-submenu a:hover,
.theme-light .nav-menu[open] summary {
  color: var(--text);
}

.theme-light .nav-submenu {
  background: rgba(var(--ground), 0.97);
}

/* Le showroom prend la retenue de Company : le violet porte le fond et
   l encre des titres, l orange ne signale plus que ce qui compte. */
.theme-light[data-page="showroom"] {
  background:
    radial-gradient(circle at 84% 3%, rgba(107, 45, 137, 0.15), transparent 34rem),
    radial-gradient(circle at 2% 44%, rgba(107, 45, 137, 0.1), transparent 30rem),
    radial-gradient(circle at 64% 97%, rgba(241, 90, 43, 0.05), transparent 28rem),
    var(--bg);
}

.theme-light[data-page="showroom"] h2,
.theme-light[data-page="showroom"] h3:not(.sr-split__label),
.theme-light[data-page="showroom"] .sr-gauge__value {
  color: #2b1a3c;
}

.theme-light[data-page="showroom"] .sr-benefits__title {
  color: #3a2550;
}

/* Les cartes de la page reposent sur un blanc franc, comme la fiche
   d identite de Company. */
/* Tout ce qui repose sur un aplat violet garde une encre claire. La
   variante « plain » n en a pas : elle garde l encre de la page. */
.theme-light[data-page="showroom"] .sr-headline:not(.sr-headline--plain),
.theme-light[data-page="showroom"] .sr-headline:not(.sr-headline--plain) *,
.theme-light[data-page="showroom"] .sr-split__seg,
.theme-light[data-page="showroom"] .sr-split__seg * {
  color: #fff;
}

.theme-light[data-page="showroom"] .sr-gauge__ring::before {
  background: var(--white);
}

.theme-light[data-page="showroom"] .sr-benefit,
.theme-light[data-page="showroom"] .sr-role,
.theme-light[data-page="showroom"] .sr-out,
.theme-light[data-page="showroom"] .sr-eff,
.theme-light[data-page="showroom"] .sr-zoom {
  box-shadow: 0 16px 44px rgba(26, 18, 34, 0.07);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* L en-tete colle fait 92 px : sans cette marge, une ancre atterrit
     dessous et on lit le texte a moitie cache. */
  scroll-padding-top: 104px;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 78% 12%, rgba(107, 45, 137, 0.27), transparent 31rem),
    radial-gradient(circle at 10% 46%, rgba(241, 90, 43, 0.11), transparent 27rem),
    radial-gradient(circle at 88% 78%, rgba(24, 174, 218, 0.07), transparent 30rem),
    var(--bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}



img {
  display: block;
  max-width: 100%;
}

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

button,
input,
select,
textarea {
  font: inherit;
}

:focus-visible {
  outline: 2px solid rgba(255, 115, 72, 0.75);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: min(var(--max), calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 60;
  transform: translateY(-160%);
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--text);
  color: var(--on-bright);
  font-weight: 700;
}

.skip-link:focus {
  transform: translateY(0);
}

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

main {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease, backdrop-filter 0.25s ease;
}

.site-header--scrolled {
  background: rgba(var(--ground), 0.88);
  border-bottom-color: var(--line);
  backdrop-filter: blur(18px);
}

.nav {
  width: min(var(--max), calc(100% - 2 * var(--gutter)));
  min-height: 92px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 22px;
}

/* La marque : le w seul, un filet, le nom. Le logo complet portait deja
   « darwin retail » en toutes lettres, ce qui doublait le titre du hero. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  flex: 0 0 auto;
  margin-right: auto;
}

.brand__mark {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  padding: 8px 7px;
  border-radius: 12px;
  background: #fff;
  object-fit: contain;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.brand__rule {
  width: 2px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 2px;
  background: var(--orange);
}

.brand__name {
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -0.038em;
  color: var(--text);
  white-space: nowrap;
}

.nav__menus {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-menu {
  position: relative;
}

.nav-menu summary,
.nav-menu-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 620;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s ease, background 0.2s ease;
}

.nav-menu summary::-webkit-details-marker {
  display: none;
}

.nav-menu summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border: solid currentColor;
  border-width: 0 1.4px 1.4px 0;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

.nav-menu[open] summary::after {
  transform: translateY(1px) rotate(-135deg);
}

.nav-menu summary:hover,
.nav-menu-link:hover,
.nav-menu[open] summary,
.nav-menu-link.is-active {
  color: var(--text);
  background: var(--surface);
}

.nav-submenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 224px;
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(21, 16, 27, 0.94);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
}

.nav-submenu a {
  padding: 10px 12px;
  border-radius: 11px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 560;
  transition: color 0.18s ease, background 0.18s ease;
}

.nav-submenu a:hover {
  color: var(--text);
  background: var(--surface-strong);
}

.language-switch {
  position: relative;
  display: flex;
  align-items: center;
}

.language-switch::after {
  content: "";
  position: absolute;
  right: 13px;
  width: 7px;
  height: 7px;
  border: solid var(--muted);
  border-width: 0 1.2px 1.2px 0;
  transform: translateY(-2px) rotate(45deg);
  pointer-events: none;
}

.language-switch select {
  appearance: none;
  min-width: 74px;
  height: 40px;
  padding: 0 30px 0 14px;
  letter-spacing: 0.05em;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  background: rgba(var(--veil), 0.045);
  cursor: pointer;
  font-size: 14px;
  font-weight: 560;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.language-switch select:hover {
  border-color: var(--line-strong);
  background: var(--surface-strong);
}

.language-switch option {
  background: var(--bg-elevated);
  color: var(--text);
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--text);
  color: var(--on-bright);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: transform 0.2s ease, background 0.2s ease;
}

.nav__cta:hover {
  transform: translateY(-1px);
  background: #fff;
}

/* --------------------------------------------------------------- hero */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  /* Le hero prend tout le premier ecran, sous l en-tete de 92 px : la
     section suivante ne se voit qu au defilement. */
  min-height: calc(100vh - 92px);
  width: min(var(--max), calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
  padding: 30px 0 92px;
}

/* La photo d'origine reste, mais en toile de fond très assourdie :
   elle donne la profondeur « magasin augmenté » sans casser le noir. */
.hero__image {
  position: absolute;
  z-index: -2;
  right: -18%;
  top: -10%;
  width: 118%;
  max-width: none;
  opacity: 0.1;
  filter: saturate(0.55) contrast(1.05) brightness(0.8);
  mask-image: radial-gradient(circle at 62% 40%, #000 8%, transparent 62%);
  pointer-events: none;
}

.hero__shade {
  position: absolute;
  z-index: -1;
  inset: -20% -30% 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 34%, rgba(107, 45, 137, 0.3), transparent 46%),
    linear-gradient(to bottom, transparent 40%, var(--bg) 96%);
}

/* Trame technique : posee sur le hero et fondue vers le bas.

   Le fondu vers le fond est peint comme premiere couche du meme
   `background-image`, plutot que par un `mask-image` : un seul calque,
   et pas de prefixe -webkit- a maintenir.

   La trame couvre toute la largeur de l ecran, pas seulement le
   conteneur : bornee a lui, elle s arretait net dans la gouttiere et le
   bord droit du hero se voyait. Le voile (.hero__shade) et la photo
   debordent deja du conteneur, eux. */
.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -92px;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom, rgba(var(--ground), 0) 48%, rgba(var(--ground), 0.75) 86%, var(--bg) 100%),
    linear-gradient(rgba(var(--veil), 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--veil), 0.026) 1px, transparent 1px);
  background-size: 100% 100%, 72px 72px, 72px 72px;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(400px, 1fr);
  align-items: center;
  gap: clamp(32px, 4vw, 64px);
}

.hero__content {
  position: relative;
  z-index: 3;
  min-width: 0;
  max-width: 760px;
}

#hero-title {
  margin: 0;
  max-width: 700px;
}

.hero__statement {
  font-size: clamp(42px, 5.4vw, 80px);
  line-height: 0.87;
  letter-spacing: -0.058em;
  font-weight: 720;
  text-wrap: balance;
  overflow-wrap: break-word;
  /* Le degrade (background-clip: text) ne peint que la boite de l element.
     Un <span> en ligne est peint fragment par fragment, une ligne a la
     fois, et selon le moteur le fragment n inclut pas l encre qui deborde
     (interlignage sous 1, interlettrage negatif) : le haut de la premiere
     ligne, le bas de la derniere ou le dernier glyphe d une ligne sont
     rognes. En bloc, la boite est unique et on lui donne de l air sur les
     quatre cotes ; les marges negatives annulent le decalage visuel. */
  display: block;
  padding: 0.3em 0.25em 0.3em 0.08em;
  margin: -0.3em -0.25em -0.3em -0.08em;
  background: linear-gradient(148deg, #ffffff 14%, var(--text) 34%, var(--purple-soft) 62%, #f7794e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__copy {
  max-width: 660px;
  margin: 26px 0 0;
  color: var(--lead);
  font-size: var(--fs-hero-lead);
  line-height: 1.55;
  letter-spacing: -0.017em;
}

/* La promesse reste dans la phrase : l'encre pleine et le gras suffisent
   a la faire porter. */
.hero__copy-em {
  color: var(--text);
  font-weight: 720;
}

.hero__actions {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.012em;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button:focus-visible {
  outline: 2px solid var(--orange-hot);
  outline-offset: 3px;
}

/* L'action principale reste dans l'encre du theme : pilule claire sur les
   fonds sombres, sombre sur les fonds clairs. Seule la fleche porte
   l'orange, et elle avance au survol. */
.button--primary {
  background: var(--text);
  color: var(--on-bright);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

.button--primary::after {
  content: "→";
  font-weight: 700;
  color: var(--orange);
  transition: transform 0.2s ease;
}

.button--primary:hover {
  background: #fff;
  box-shadow: 0 14px 36px rgba(241, 90, 43, 0.16);
}

.button--primary:hover::after {
  transform: translateX(3px);
}

.button--secondary {
  border-color: var(--line-strong);
  background: rgba(var(--veil), 0.045);
  color: var(--text);
  backdrop-filter: blur(6px);
}

.button--secondary:hover {
  background: rgba(241, 90, 43, 0.08);
  border-color: rgba(241, 90, 43, 0.55);
}

/* Fleche sur un bouton secondaire, quand il mene ailleurs. */
.button--arrow::after {
  content: "→";
  font-weight: 700;
  color: var(--orange);
  transition: transform 0.2s ease;
}

.button--arrow:hover::after {
  transform: translateX(3px);
}

.showroom-link {
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 4px 9px 0;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -0.012em;
  transition: gap 0.22s ease;
}

.showroom-link:hover {
  gap: 16px;
}

/* Le point qui bat dit que le magasin tourne en ce moment. */
.showroom-link__icon {
  display: inline-block;
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(241, 90, 43, 0.14);
  animation: pulse 2.6s ease-in-out infinite;
}

/* La maison ne servait qu a remplir la capsule. */
.showroom-link__icon svg {
  display: none;
}

.showroom-link__text::after {
  content: "→";
  margin-left: 9px;
  color: var(--orange-hot);
  font-weight: 500;
}

/* La signature de la maison : sous la tablette, tout a droite du premier
   ecran, assez discrete pour se lire en dernier. */
.hero__sign {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 9px;
  /* Alignee sur la ligne du showroom, a gauche : l ecart mesure entre les
     deux est de 37 px, identique dans les cinq langues puisqu il ne tient
     qu au bloc lui-meme. */
  margin: -17px 0 0;
  text-align: right;
  font-size: 11.5px;
  font-weight: 620;
  letter-spacing: 0.04em;
  color: var(--muted-2);
}

/* Le petit drapeau de la maison : trois bandes, un liseré, rien de plus. */
.hero__flag {
  flex: 0 0 auto;
  width: 18px;
  height: 12px;
  border-radius: 2.5px;
  background: linear-gradient(90deg, #3350a5 0 33.4%, #f4f0f6 33.4% 66.7%, #de4437 66.7%);
  box-shadow: 0 0 0 1px rgba(var(--veil), 0.16);
  opacity: 0.88;
}

/* L invitation a defiler : un simple chevron blanc, tres discret, qui
   respire doucement en bas du premier ecran. */
.hero__scroll {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 30px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border: solid rgba(255, 255, 255, 0.55);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
  animation: scroll-hint 2.6s ease-in-out infinite;
  transition: border-color 0.2s ease;
}

.hero__scroll:hover {
  border-color: #fff;
}

@keyframes scroll-hint {
  0%, 100% { transform: translateY(0) rotate(45deg); opacity: 0.55; }
  50% { transform: translateY(7px) rotate(45deg); opacity: 1; }
}

/* ------------------------------------------ hero : la scene « tablette »

   Un radar de magasin (anneaux + orbites), quatre zones qui emettent
   (rayon, SCO, caisse, alarme) et, au centre, la tablette de l equipier
   qui recoit les alertes qualifiees une par une.                        */

.hero__visual {
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height: 520px;
  display: grid;
  place-items: center;
}

.scene {
  position: relative;
  width: min(100%, 505px);
  aspect-ratio: 1;
  filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.35));
}

/* Sur grand ecran, la scene animee prend un cran de plus : le zoom
   agrandit tout d un bloc, textes des pastilles compris, et la tablette
   vient au plus pres du titre. */
@media (min-width: 1200px) {
  .scene {
    zoom: 1.28;
  }

  .hero__visual {
    min-height: 640px;
  }
}

.scene::before {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 32%, rgba(var(--veil), 0.1), transparent 18%),
    radial-gradient(circle at 50% 54%, rgba(107, 45, 137, 0.44), rgba(38, 18, 48, 0.32) 48%, rgba(10, 7, 13, 0.05) 70%),
    linear-gradient(145deg, rgba(var(--veil), 0.05), rgba(var(--veil), 0.01));
  border: 1px solid rgba(var(--veil), 0.1);
  box-shadow: inset 0 0 60px rgba(var(--veil), 0.025);
  backdrop-filter: blur(8px);
}

.scene__ring {
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  border: 1px solid rgba(var(--veil), 0.12);
}

.scene__ring.r2 {
  inset: 27%;
  border-color: rgba(var(--veil), 0.075);
}

.scene__ring.r3 {
  inset: 38%;
  border-color: rgba(241, 90, 43, 0.22);
}

.scene__sweep {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  opacity: 0.7;
  background: conic-gradient(from 0deg, rgba(241, 90, 43, 0.24), transparent 24%, transparent 100%);
  mask-image: radial-gradient(circle, transparent 22%, #000 23%, #000 99%, transparent 100%);
  animation: orbit 11s linear infinite;
}

.scene__orbit {
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: rgba(241, 90, 43, 0.7);
  border-right-color: rgba(107, 45, 137, 0.4);
  transform: rotate(-21deg) scaleY(0.62);
  box-shadow: 0 -1px 18px rgba(241, 90, 43, 0.12);
  animation: orbit 14s linear infinite;
}

.scene__orbit.o2 {
  inset: 17%;
  transform: rotate(42deg) scaleY(0.55);
  border-top-color: rgba(24, 174, 218, 0.34);
  border-right-color: transparent;
  animation-duration: 20s;
  animation-direction: reverse;
}

/* Les liaisons zone -> tablette */
.scene__links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 2;
}

.scene__links path {
  fill: none;
  stroke: rgba(var(--veil), 0.13);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}

.scene__links .live {
  stroke: var(--orange-hot);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 22 78;
  filter: drop-shadow(0 0 4px rgba(241, 90, 43, 0.7));
  animation: travel 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.scene__links .live.c2 { stroke: var(--cyan); filter: drop-shadow(0 0 4px rgba(24, 174, 218, 0.7)); }
.scene__links .live.d2 { animation-delay: 0.8s; }
.scene__links .live.d3 { animation-delay: 1.6s; }
.scene__links .live.d4 { animation-delay: 2.4s; }

@keyframes travel {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}

/* Les zones qui emettent */
.pin {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(var(--ground), 0.78);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 620;
  letter-spacing: -0.006em;
  white-space: nowrap;
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-soft);
}

/* Un capteur qui emet, pas un panneau de danger : les ondes disent que
   la zone remonte quelque chose vers la tablette. */
.pin svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--cyan);
  opacity: 0.85;
  animation: pulse 2.6s ease-in-out infinite;
}

/* Le repere chiffre situe la caisse ou le rayon concerne. */
.pin__ref {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(var(--veil), 0.08);
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 780;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.pin--hot {
  border-color: rgba(241, 90, 43, 0.45);
  background: linear-gradient(100deg, rgba(241, 90, 43, 0.16), rgba(var(--ground), 0.82) 66%);
  color: #f2e6e1;
}

.pin--hot svg {
  color: var(--orange-hot);
  opacity: 1;
}

.pin--hot .pin__ref {
  background: rgba(241, 90, 43, 0.22);
  color: #ffbfa6;
}

.pin.p1 { top: 6%; left: -5%; }
.pin.p2 { top: 11%; right: -7%; }
/* le chariot rejoint les deux autres capteurs, a droite de la tablette */
.pin.p3 { top: 48%; right: -9%; }
.pin.p4 { bottom: 9%; right: -6%; }

.pin.p2 svg { animation-delay: 0.8s; }
.pin.p3 svg { animation-delay: 1.6s; }
.pin.p4 svg { animation-delay: 2.4s; }

/* La tablette de l equipier */
.tablet {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 56%;
  width: 62%;
  padding: 8px;
  border-radius: 21px;
  border: 1px solid rgba(var(--veil), 0.16);
  background: linear-gradient(150deg, rgba(var(--veil), 0.15), rgba(var(--veil), 0.04) 46%, rgba(var(--veil), 0.09));
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(var(--veil), 0.22);
  transform: translate(-50%, -50%) perspective(1300px) rotateY(-15deg) rotateX(7deg) rotate(-1.5deg);
  animation: float 7s ease-in-out infinite;
}

.tablet__screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1.06;
  padding: 12px 12px 20px;
  border-radius: 15px;
  border: 1px solid rgba(var(--veil), 0.07);
  background:
    radial-gradient(circle at 24% 0%, rgba(107, 45, 137, 0.35), transparent 58%),
    linear-gradient(180deg, var(--screen-top), var(--screen-bottom));
}

.tablet__screen::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -30%;
  height: 30%;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(var(--veil), 0.06), transparent);
  animation: scan 5.5s linear infinite;
}

.tablet__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(var(--veil), 0.08);
}

.tablet__bar i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange-hot);
  box-shadow: 0 0 10px rgba(241, 90, 43, 0.9);
  animation: pulse 2.2s ease-in-out infinite;
}

.tablet__title {
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: 0.16em;
  color: var(--text-soft);
}

.tablet__time {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--muted-2);
}

.feed {
  margin: 11px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

/* Chaque ligne est une alerte reellement lisible : heure, puis libelle.
   Les cinq se relaient en boucle, comme un fil qui se remplit. */
.feed li {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 11px 10px 11px 13px;
  border: 1px solid rgba(var(--veil), 0.08);
  border-radius: 9px;
  background: rgba(var(--veil), 0.045);
  opacity: 0;
  animation: alert-in 12.8s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.feed li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 999px;
  background: var(--cyan);
}

.feed li:nth-child(2) { animation-delay: 0.9s; }
.feed li:nth-child(3) { animation-delay: 1.8s; }
.feed li:nth-child(4) { animation-delay: 2.7s; }
.feed li:nth-child(5) { animation-delay: 3.6s; }

.feed li.is-hot {
  border-color: rgba(241, 90, 43, 0.4);
  background: linear-gradient(100deg, rgba(241, 90, 43, 0.2), rgba(241, 90, 43, 0.05));
}

.feed li.is-hot::before {
  background: var(--orange-hot);
  box-shadow: 0 0 8px rgba(241, 90, 43, 0.8);
}

.feed__time {
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--muted-2);
}

.feed li.is-hot .feed__time {
  color: rgba(255, 175, 145, 0.9);
}

.feed__text {
  flex: 1;
  min-width: 0;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.008em;
  color: var(--text-soft);
}

.feed li.is-hot .feed__text {
  color: var(--text);
}

/* La tablette retrouve sa jauge de traitement. */
.tablet__meter {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  height: 3px;
  border-radius: 999px;
  background: rgba(var(--veil), 0.09);
  overflow: hidden;
}

.tablet__meter span {
  display: block;
  height: 100%;
  width: 62%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--purple), var(--orange));
  animation: load 4.2s ease-in-out infinite alternate;
}

/* ------------------------------------------ le clip rattache a l alerte

   L alerte seule ne prouve rien : la carte flottante montre l image du
   magasin qui va avec, dans un cadre de camera. C est la photo du site,
   recadree et assourdie. */

.scene__clip {
  position: relative;
  overflow: hidden;
  margin-top: 8px;
  aspect-ratio: 16 / 9;
  border-radius: 9px;
  border: 1px solid rgba(241, 90, 43, 0.3);
  background-image: url("assets/hero-darwin-retail.webp");
  background-size: cover;
  background-position: 62% 45%;
}

.scene__clip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(107, 45, 137, 0.3), rgba(var(--ground), 0.55) 55%, rgba(var(--ground), 0.8));
}

/* Le balayage de lecture, tres lent : la video tourne. */
.scene__clip::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(var(--veil), 0.08), transparent);
  animation: clip-sweep 6.5s ease-in-out infinite;
}

/* Les quatre coins de visee, comme un cadre de camera. */
.scene__clip-frame {
  position: absolute;
  z-index: 2;
  inset: 6px;
  border: 1px solid rgba(var(--veil), 0.34);
  border-radius: 3px;
  clip-path: polygon(
    0 0, 24% 0, 24% 1.6px, 1.6px 1.6px, 1.6px 24%, 0 24%,
    0 76%, 1.6px 76%, 1.6px calc(100% - 1.6px), 24% calc(100% - 1.6px), 24% 100%, 0 100%,
    100% 100%, 100% 76%, calc(100% - 1.6px) 76%, calc(100% - 1.6px) calc(100% - 1.6px), 76% calc(100% - 1.6px), 76% 100%,
    76% 0, 76% 1.6px, calc(100% - 1.6px) 1.6px, calc(100% - 1.6px) 24%, 100% 24%, 100% 0
  );
}

.scene__play {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 25px;
  height: 25px;
  margin: -12.5px 0 0 -12.5px;
  border-radius: 50%;
  border: 1px solid rgba(var(--veil), 0.45);
  background: rgba(var(--ground), 0.48);
  backdrop-filter: blur(6px);
}

.scene__play::after {
  content: "";
  position: absolute;
  left: 9.5px;
  top: 7px;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #fff;
}

.scene__clip-bar {
  position: absolute;
  z-index: 3;
  left: 10px;
  right: 10px;
  bottom: 9px;
  height: 2px;
  border-radius: 999px;
  background: rgba(var(--veil), 0.24);
}

.scene__clip-bar span {
  display: block;
  height: 100%;
  width: 38%;
  border-radius: inherit;
  background: var(--orange-hot);
  animation: clip-play 6.5s linear infinite;
}

@keyframes clip-sweep {
  0% { left: -34%; }
  55%, 100% { left: 100%; }
}

@keyframes clip-play {
  0% { width: 12%; }
  100% { width: 92%; }
}

.scene__card {
  position: absolute;
  z-index: 5;
  left: -13%;
  bottom: 17%;
  width: min(172px, 43%);
  padding: 9px 10px 10px;
  border: 1px dashed rgba(var(--veil), 0.28);
  border-radius: 15px;
  transform: rotate(-3.5deg);
  background: var(--bg-card);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.scene__card .label {
  display: block;
  color: var(--muted);
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.scene__card .message {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.4;
  letter-spacing: -0.015em;
}

.scene__card .bar {
  margin-top: 14px;
  height: 3px;
  border-radius: 999px;
  background: rgba(var(--veil), 0.08);
  overflow: hidden;
}

.scene__card .bar span {
  display: block;
  height: 100%;
  width: 62%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--purple), var(--orange));
  animation: load 4.2s ease-in-out infinite alternate;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(0.7); opacity: 0.5; }
}

@keyframes orbit {
  to { rotate: 360deg; }
}

@keyframes load {
  from { width: 42%; }
  to { width: 78%; }
}

@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

@keyframes scan {
  0% { top: -30%; }
  55%, 100% { top: 115%; }
}

/* Une alerte arrive, reste affichee, puis laisse la place a la suivante */
@keyframes alert-in {
  0% { opacity: 0; transform: translateX(14px) scale(0.97); }
  4% { opacity: 1; transform: translateX(0) scale(1); }
  62% { opacity: 1; transform: translateX(0) scale(1); }
  70% { opacity: 0; transform: translateX(-10px) scale(0.98); }
  100% { opacity: 0; transform: translateX(14px) scale(0.97); }
}

/* ----------------------------------------------------------- sections */

.section {
  position: relative;
  padding: clamp(72px, 7.4vw, 112px) 0;
}

/* Un filet lumineux separe chaque bloc, comme un horizon */
.section + .section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(var(--max), calc(100% - 2 * var(--gutter)));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(var(--veil), 0.14), transparent);
}

.eyebrow {
  display: block;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: var(--fs-eyebrow);
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

h2 {
  margin: 0;
  font-size: clamp(34px, 3.8vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-weight: 700;
  text-wrap: balance;
}

h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.028em;
  font-weight: 700;
}

.section p {
  color: var(--lead);
  letter-spacing: -0.012em;
}

.section-heading {
  max-width: 780px;
  margin-bottom: clamp(40px, 4.5vw, 60px);
}

.section-heading p {
  margin: 22px 0 0;
  font-size: var(--fs-lead);
  line-height: 1.6;
}

.section-heading--split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: end;
  gap: clamp(28px, 4vw, 64px);
}

.section-heading--split > div {
  max-width: none;
}

.section-heading--split > p {
  margin: 0;
  padding-bottom: 6px;
}

/* Titre et chapeau sur toute la largeur (Comment ca fonctionne, business
   case). */
.section-heading--wide {
  max-width: none;
}

/* ------------------------------------------------ le constat terrain */

.problem {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

/* Le titre accompagne la lecture de la colonne de droite plutot que de
   laisser un grand vide sous lui. */
.problem > div:first-child {
  position: sticky;
  top: 124px;
}

.problem__body > p:first-child {
  margin: 0;
  font-size: var(--fs-lead);
  line-height: 1.6;
}

/* Les quatre pressions du terrain : plus de cartes, une grille de filets.
   Le seul contour arrondi de la section reste celui du catalogue. */
.pressure-list {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pressure-list__item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px 4px 18px 0;
  border-top: 1px solid var(--line);
  transition: color 0.25s ease;
}

/* La colonne de droite prend le filet vertical : les quatre cases se
   croisent au centre, sans qu'aucune ne soit encadree. */
.pressure-list__item:nth-child(even) {
  padding-left: 22px;
  border-left: 1px solid var(--line);
}

.pressure-list__icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  color: var(--orange-hot);
}

.pressure-list__icon svg {
  width: 100%;
  height: 100%;
}

.pressure-list__text {
  font-size: var(--fs-body);
  font-weight: 620;
  letter-spacing: -0.016em;
  color: var(--text-soft);
}

.pressure-list__item:hover .pressure-list__text {
  color: var(--text);
}

/* La bascule tient sous le grand titre : un filet orange et l'encre
   pleine suffisent, pas de panneau. */
.transition {
  margin: 24px 0 0;
  padding: 2px 0 2px 18px;
  border-left: 2px solid var(--orange);
  color: var(--text) !important;
  font-size: var(--fs-lead);
  line-height: 1.5;
  letter-spacing: -0.018em;
  max-width: 34ch;
}

.usecases-link {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.usecases-link:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  background: var(--surface-strong);
}

.usecases-link__num {
  flex: 0 0 auto;
  padding: 0 0.12em 0.08em 0;
  margin-right: -0.12em;
  font-size: 42px;
  font-weight: 750;
  letter-spacing: -0.06em;
  line-height: 1;
  background: linear-gradient(150deg, var(--purple-soft), var(--orange-hot));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.usecases-link__text {
  display: grid;
  gap: 4px;
}

.usecases-link__text strong {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.024em;
}

.usecases-link__text span {
  color: var(--muted);
  font-size: var(--fs-caption);
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.usecases-link__arrow {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--orange-hot);
  font-size: 22px;
  line-height: 1;
  transition: transform 0.25s ease;
}

.usecases-link:hover .usecases-link__arrow {
  transform: translateX(4px);
}

/* ------------------------------------------------- la couche logicielle */

.software-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.software-card {
  position: relative;
  overflow: hidden;
  padding: 28px 26px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

.software-card::after {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(241, 90, 43, 0.55), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.software-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  background: var(--surface-strong);
}

.software-card:hover::after {
  opacity: 1;
}

/* Le numero et le titre sur la meme ligne, alignes sur la ligne de base. */
.software-card__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 12px;
}

.software-card__num {
  display: block;
  flex: 0 0 auto;
  width: fit-content;
  padding: 0 0.14em 0.1em 0;
  margin-right: -0.14em;
  font-size: 36px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.06em;
  background: linear-gradient(150deg, var(--purple-soft), var(--orange-hot));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.software-card h3 {
  margin-bottom: 10px;
}

.software-card__head h3 {
  margin-bottom: 0;
  text-wrap: balance;
}

.software-card p {
  margin: 0;
  font-size: var(--fs-caption);
  line-height: 1.55;
  color: var(--muted);
}

/* Pas de cadre autour du tout : seules les deux options en portent un,
   sinon la section empile les contours. */
/* Le deploiement n'est pas une quatrieme carte : c'est le prolongement
   des trois etapes. Un filet l'y raccroche, et rien n'y est encadre pour
   ne pas repeter les contours du dessus. */
.software-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
}

.software-steps li {
  display: grid;
  align-content: start;
  gap: 12px;
}

/* Le rang : petit, en capitales espacees, orange. */
.software-steps__num {
  font-size: var(--fs-eyebrow);
  font-weight: 750;
  letter-spacing: 0.16em;
  color: var(--orange-hot);
}

.software-steps h3 {
  font-size: clamp(22px, 1.8vw, 27px);
  letter-spacing: -0.032em;
  line-height: 1.15;
  text-wrap: balance;
}

.software-steps p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--lead);
}

.software-local {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: clamp(28px, 3.4vw, 48px);
  border-top: 1px solid var(--line);
}

/* A gauche : le schema, puis les trois garanties rangees dessous, dans son
   axe. A droite : le titre et la phrase. */
.software-local__visual {
  display: grid;
  justify-items: center;
  gap: clamp(18px, 2.4vw, 30px);
}

/* Sous le schema, les trois garanties se lisent en colonne, leurs traits
   orange alignes : en une seule ligne, le francais retombait de travers. */
.software-local__visual .local-points {
  display: grid;
  gap: 11px;
  margin: 0;
  justify-items: start;
}

/* Le titre du serveur est un titre de section : meme taille que les
   autres. Avec sa phrase, il forme un bloc cale sur le bord droit de la
   page, face au schema. */
.software-local__content {
  justify-self: end;
  max-width: 640px;
}

.software-local h3 {
  margin-bottom: 18px;
  font-size: clamp(34px, 3.8vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.software-local__content > p {
  margin: 0;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--lead);
}

/* Les deux etages du deploiement : le serveur en magasin, puis le cloud
   prive. Dessine en HTML pour que les libelles se traduisent. */
/* Deux colonnes egales separees du meme ecart que la rangee du dessus :
   le serveur retombe sous 02, le cloud sous 03. */
.arch-visual {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
}

/* La fleche dit le passage du serveur local au cloud. Elle se pose dans
   l'ecart des deux colonnes, sans elargir la trame. */

.arch-visual__card {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 4px 10px;
  text-align: center;
}

/* Les faisceaux reprennent la mecanique des liaisons du hero : un trait
   court qui parcourt le trace, decale d'un faisceau a l'autre. */
.arch-flux {
  width: 100%;
  max-width: 320px;
}

.arch-flux svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Le perimetre du magasin : c'est lui qui dit que le serveur est sur
   place et que les donnees n'en sortent pas. */
.arch-flux__store {
  stroke: rgba(var(--veil), 0.14);
  stroke-width: 1.2;
  stroke-dasharray: 4 4;
}

.arch-flux__node {
  stroke: rgba(var(--veil), 0.34);
  stroke-width: 1.5;
}

/* La porte du magasin, un cran plus nette que le perimetre : c'est elle
   qui fait lire le cadre comme un magasin et non comme une boite. */
.arch-flux__door {
  stroke: rgba(var(--veil), 0.26);
  stroke-width: 1.4;
}

.arch-flux__wire {
  stroke: rgba(var(--veil), 0.12);
  stroke-width: 1.2;
}

.arch-flux__beam path {
  stroke-width: 2;
  stroke-dasharray: 16 74;
  animation: travel 3s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.arch-flux__beam path.d2 { animation-delay: 0.6s; }
.arch-flux__beam path.d3 { animation-delay: 1.2s; }

.arch-flux__beam--warm path {
  stroke: var(--orange-hot);
  filter: drop-shadow(0 0 4px rgba(241, 90, 43, 0.7));
}

.arch-flux__beam--cool path {
  stroke: var(--cyan);
  filter: drop-shadow(0 0 4px rgba(24, 174, 218, 0.7));
}

.arch-flux__box {
  stroke: var(--purple-soft);
  stroke-width: 2;
}

.arch-flux__cloud {
  stroke: var(--cyan);
  stroke-width: 2;
}

.arch-flux__led {
  fill: var(--orange-hot);
  stroke: none;
}

/* La lueur au pied du serveur : elle le pose au sol. */
.arch-flux__glow {
  fill: rgba(241, 90, 43, 0.16);
  stroke: none;
  filter: blur(4px);
}

.arch-visual__label {
  margin: 0;
  display: grid;
  gap: 2px;
}

.arch-visual__label strong {
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -0.03em;
  color: var(--text);
}

.arch-visual__label span {
  font-size: 13.5px;
  color: var(--muted);
}

@media (max-width: 860px) {
  .software-local {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  /* Sur une colonne, le titre se lit avant le schema et reprend toute
     la largeur. */
  .software-local__content {
    order: -1;
    justify-self: stretch;
    max-width: none;
  }

  .software-steps {
    grid-template-columns: 1fr;
  }

  .arch-visual {
    grid-column: 1;
  }
}

@media (max-width: 560px) {
  .arch-visual {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ------------------------------------------------ les reperes chiffres */

/* Titre a gauche, quatre nombres a droite : le motif de .problem, mais
   sans colonne collante puisque le bloc tient sur un ecran. */
.stats {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  align-items: center;
  gap: clamp(30px, 4.6vw, 72px);
}

.stats__intro h2 {
  margin-bottom: 20px;
}

.stats__intro p {
  margin: 0;
  max-width: 40ch;
  font-size: var(--fs-lead);
  line-height: 1.6;
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 3.4vw, 48px) clamp(24px, 3vw, 44px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Chaque nombre se centre dans sa case : la colonne de droite se lit
   comme un tableau de bord, face au titre reste a gauche. */
.stat {
  display: grid;
  justify-items: center;
  text-align: center;
}

/* Le degrade des nombres : blanc vers violet, sans orange. Il est aussi
   celui du trace de l infini. Le theme clair prend l encre a la place du
   blanc, sinon les chiffres disparaissent sur fond clair. */
:root {
  --stat-grad-1: #ffffff;
  --stat-grad-2: #f2eaf6;
  --stat-grad-3: var(--purple-soft);
  --stat-grad-4: #c396da;
}

.theme-light {
  --stat-grad-1: #17121e;
  --stat-grad-2: #3d2b4e;
  --stat-grad-3: #6b2d89;
  --stat-grad-4: #8f4bae;
}

.stat__value {
  display: flex;
  align-items: center;
  /* la boite epouse le nombre : sinon le degrade s etale sur toute la
     colonne et les chiffres restent blancs */
  width: fit-content;
  margin-bottom: 12px;
  background: linear-gradient(
    112deg,
    var(--stat-grad-1) 2%,
    var(--stat-grad-2) 36%,
    var(--stat-grad-3) 74%,
    var(--stat-grad-4) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  /* le degrade ne peint que la boite : sans cet air, le dernier glyphe et
     les descendantes sont rognes */
  padding: 0 0.1em 0.12em 0;
  margin-right: -0.1em;
  font-size: clamp(42px, 4.4vw, 64px);
  font-weight: 780;
  line-height: 1;
  letter-spacing: -0.045em;
  color: transparent;
  font-variant-numeric: tabular-nums;
}

/* Le "jusqu a" se pose au-dessus du nombre plutot qu avant lui : sinon il
   decale la valeur et les quatre chiffres ne partent plus du meme bord.
   Les deux reperes sans prefixe gardent la ligne vide, pour l alignement. */
.stat__pre {
  display: block;
  min-height: 14px;
  margin-bottom: 8px;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

.stat__approx {
  margin-right: 3px;
  font-size: 0.62em;
  color: var(--muted);
}

.stat__unit {
  margin-left: 2px;
}

.stat__inf {
  width: 1.62em;
  height: 1.02em;
  overflow: visible;
}

.stat__inf-a { stop-color: var(--stat-grad-1); }
.stat__inf-b { stop-color: var(--stat-grad-2); }
.stat__inf-c { stop-color: var(--stat-grad-3); }
.stat__inf-d { stop-color: var(--stat-grad-4); }

.stat__inf-path {
  fill: none;
  stroke: url(#stat-inf-grad);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}

/* arme par le script, avec les nombres a zero */
.stats--armed .stat__inf-path {
  stroke-dashoffset: 100;
}

/* la boucle se trace pendant que les chiffres montent, puis se fige */
.stats--live .stat__inf-path {
  animation: stat-inf-draw 2200ms ease-out forwards;
}

@keyframes stat-inf-draw {
  to { stroke-dashoffset: 0; }
}

/* Le renvoi est une note de bas de page, pas une part du chiffre : il se
   pose sous la ligne de base et s efface. */
.stat__ref {
  align-self: flex-end;
  margin-left: 3px;
  transform: translateY(0.5em);
  font-size: 0.13em;
  font-weight: 500;
  color: var(--muted-2);
}

.stat__label {
  display: block;
  max-width: 27ch;
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--lead);
}

/* Les renvois : troisieme ligne de la grille, sur les deux colonnes,
   ranges a droite et loin des chiffres, dans le gris le plus discret. */
.stats__notes {
  grid-column: 1 / -1;
  justify-self: end;
  display: grid;
  gap: 4px;
  margin: clamp(28px, 3vw, 44px) 0 0;
  font-size: var(--fs-micro);
  line-height: 1.45;
  text-align: right;
  color: var(--muted-2);
}


/* --------------------------------------------- la logique d intervention */

.flow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1.08fr) 46px minmax(0, 1fr);
  align-items: center;
  gap: 0;
}

.flow__step {
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.flow__step:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
}

.flow__label {
  display: block;
  margin-bottom: 9px;
  font-size: 11.5px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--muted);
}

.flow__step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--lead);
}

/* La colonne de gauche garde sa case, mais plus rien n est encadre a
   l interieur : les cinq equipements sont des lignes sur des filets, dans
   la grammaire de .pressure-list. Les filets vont d un bord a l autre de
   la case, d ou les marges negatives. */
.flow__sources {
  padding: 22px 24px 16px;
}

.flow__sources .flow__label {
  margin-bottom: 4px;
}

.flow__src {
  display: grid;
  margin: 0 -24px;
  padding: 0;
  list-style: none;
}

.flow__src li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 15px 24px;
  border-top: 1px solid var(--line);
  font-size: 17px;
  font-weight: 560;
  line-height: 1.35;
  color: var(--text-soft);
}

/* Les icones portent la couleur du site, une par famille de signal. */
.flow__src-icon,
.flow__out-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 34px;
  color: var(--muted);
}

.flow__out-icon {
  width: 28px;
  height: 28px;
}

.flow__src-icon svg {
  width: 28px;
  height: 28px;
}

.flow__src-icon--multi svg {
  width: 48px;
  height: 29px;
}

.flow__out-icon svg {
  width: 24px;
  height: 24px;
}

.flow__icon--cyan { color: var(--cyan); }
.flow__icon--orange { color: var(--orange-hot); }
.flow__icon--purple { color: var(--purple-soft); }

/* Les trois gestes de Darwin se suivent : trois noeuds sur un meme filet
   qui vire a l orange, chacun avec son verbe et son rang. Pas de jeton. */
.flow__chain {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 22px 0 18px;
  padding: 0;
  list-style: none;
}

.flow__chain::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 16.6%;
  right: 16.6%;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--veil), 0.14), rgba(220, 185, 235, 0.55) 50%, rgba(var(--veil), 0.14));
}

.flow__chain li {
  position: relative;
  padding-top: 20px;
  text-align: center;
}

.flow__chain li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--purple-soft);
  box-shadow: 0 0 0 3px rgba(220, 185, 235, 0.12);
}

.flow__chain-verb {
  display: block;
  font-size: 15.5px;
  font-weight: 720;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* Le coeur Darwin : la seule surface qui rayonne */
.flow__step--core {
  position: relative;
  padding: 32px 28px;
  border-color: rgba(241, 90, 43, 0.4);
  background:
    radial-gradient(circle at 50% 0%, rgba(241, 90, 43, 0.2), transparent 62%),
    linear-gradient(150deg, rgba(107, 45, 137, 0.34), rgba(var(--ground), 0.7));
  box-shadow: 0 24px 70px rgba(241, 90, 43, 0.14);
}

.flow__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.flow__brand-logo {
  flex: 0 0 auto;
  width: auto;
  height: 34px;
  filter: drop-shadow(0 2px 8px rgba(241, 90, 43, 0.35));
  transition: height 0.55s cubic-bezier(0.22, 0.8, 0.24, 1);
}

.flow__step--core .flow__label {
  margin: 0;
  font-size: 14.5px;
  letter-spacing: 0.16em;
  color: var(--text);
}

/* Le plus : la donnee produite, dans la continuite du paragraphe, un
   signe orange et une icone, ni filet ni boite. */
.flow__step--core .flow__plus {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  margin: 12px 0 0;
  padding: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--lead);
}

.flow__plus-mark {
  font-size: 24px;
  font-weight: 800;
  line-height: 0.85;
  color: var(--orange-hot);
}

.flow__plus-icon {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--purple-soft);
}

.flow__plus-icon svg {
  width: 22px;
  height: 22px;
}

.flow__step--core p {
  color: var(--text);
}

.flow__arrow {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--veil), 0.1), rgba(241, 90, 43, 0.55));
}

.flow__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--orange-hot);
  box-shadow: 0 0 12px rgba(241, 90, 43, 0.9);
  animation: flow-dot 2.6s ease-in-out infinite;
}

@keyframes flow-dot {
  0% { right: 100%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { right: 0; opacity: 0; }
}

.flow__outputs {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-self: stretch;
}

.flow__step--output {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 20px;
  background: rgba(var(--veil), 0.035);
}

.flow__out-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.flow__out-head .flow__label {
  margin: 0;
}

/* L eventail : trois filets du moteur vers les trois cases, dans la
   grammaire de .flow__arrow (degrade vers l orange, point lumineux qui
   parcourt le filet). Les cases font la meme hauteur, les filets visent
   donc 1/6, 1/2 et 5/6 de la colonne. */
.flow__link {
  position: relative;
  align-self: stretch;
}

.flow__fan {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.flow__fan-a { stop-color: rgba(var(--veil), 0.1); }
.flow__fan-b { stop-color: rgba(241, 90, 43, 0.55); }

.flow__fan-line {
  fill: none;
  stroke: url(#flow-fan-grad);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.flow__fan-run {
  fill: none;
  stroke: var(--orange-hot);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 6 100;
  stroke-dashoffset: 106;
  filter: drop-shadow(0 0 5px rgba(241, 90, 43, 0.9));
  animation: flow-run 2.6s linear infinite;
}

.flow__fan-run:nth-of-type(5) { animation-delay: 0.45s; }
.flow__fan-run:nth-of-type(6) { animation-delay: 0.9s; }

@keyframes flow-run {
  0% { stroke-dashoffset: 106; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { stroke-dashoffset: 6; opacity: 0; }
}

/* La promesse, sous le moteur : du texte, rien d autre, le dernier mot
   en orange. */

.flow__motto {
  margin: clamp(24px, 3.6vh, 44px) auto 0;
  padding: 0;
  text-align: center;
  text-wrap: balance;
  font-size: clamp(24px, 2.7vw, 40px);
  font-weight: 720;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--text);
}

.flow__motto em {
  font-style: normal;
  color: var(--orange-hot);
}

/* ---------------------------------------------------------------- ROI */

.roi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3.4vw, 56px);
}

/* Pas de carte : le chiffre en degrade suffit a tenir la colonne, et un
   bloc encadre qui se souleve au survol sans etre cliquable, c est
   exactement ce qu on evite ici. */
.roi-card {
  position: relative;
}

/* Le meme chiffre en degrade que le catalogue des cas d'usage : un seul
   traitement des numeros sur tout le site. */
.roi-card__number {
  display: block;
  width: fit-content;
  margin-bottom: 16px;
  padding: 0 0.14em 0.1em 0;
  margin-right: -0.14em;
  font-size: 36px;
  font-weight: 750;
  letter-spacing: -0.06em;
  line-height: 1;
  background: linear-gradient(150deg, var(--purple-soft), var(--orange-hot));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.roi-card h3 {
  color: var(--muted);
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}

.roi-card__value {
  margin: 10px 0 12px !important;
  font-size: clamp(21px, 1.9vw, 26px);
  line-height: 1.12;
  letter-spacing: -0.038em;
  font-weight: 700;
  color: var(--text) !important;
  text-wrap: balance;
}

.roi-card > p:last-child {
  margin: 0;
  font-size: var(--fs-caption);
  line-height: 1.55;
  color: var(--muted);
}

.roi-formula {
  margin: 0 0 clamp(36px, 4vw, 56px);
  padding: 0;
}

/* Le libelle KPIs au-dessus des six indicateurs : un sur-titre avec un
   trait orange, dans la grammaire des listes du site. */
.roi-kpis {
  margin: 0 0 14px !important;
  color: var(--muted) !important;
  font-size: var(--fs-micro);
  font-weight: 750;
  letter-spacing: 0.1em;
}

.roi-kpis::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 2px;
  margin: 0 10px 0 0;
  vertical-align: middle;
  background: var(--orange-hot);
}

.roi-formula__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 18px;
}

.roi-formula__result {
  padding: 13px 22px;
  border-radius: 999px;
  background: linear-gradient(100deg, var(--orange), #d1421f);
  color: #fff;
  font-size: clamp(17px, 1.45vw, 20px);
  font-weight: 750;
  letter-spacing: -0.02em;
  box-shadow: 0 14px 34px rgba(241, 90, 43, 0.28);
}

.roi-formula__op {
  color: var(--muted-2);
  font-size: 26px;
  font-weight: 650;
}

.roi-formula__term {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 13px 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(var(--veil), 0.05);
  color: var(--text-soft);
  font-size: clamp(17px, 1.45vw, 20px);
  font-weight: 620;
  letter-spacing: -0.014em;
}

.roi-formula__ico {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: var(--orange-hot);
}

/* Trois effets que le pilote observe sans les chiffrer. Ils tiennent en
   retrait sous la formule : ce ne sont pas des euros, mais ils comptent. */
/* Pas de cadre ici : la section enchaine deja assez de pilules arrondies.
   Un simple filet separe la formule de ce qui ne se chiffre pas. */
/* Les trois benefices qui ne se chiffrent pas : introduits par un seul
   grand plus, en haut a gauche, dans la grammaire des « + » du moteur. */
.roi-soft {
  display: grid;
  gap: 10px;
  margin-top: 34px;
  padding: 0 2px;
}

.roi-soft__plus {
  justify-self: start;
  padding-left: 6px;
  font-size: 46px;
  font-weight: 500;
  line-height: 0.8;
  color: var(--orange-hot);
}

.roi-soft__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 32px;
}

.roi-soft__list li {
  display: grid;
  gap: 7px;
  padding-left: 18px;
  border-left: 1px solid rgba(var(--veil), 0.14);
}

.roi-soft__list strong {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.024em;
  color: var(--text);
}

.roi-soft__list span {
  font-size: var(--fs-caption);
  line-height: 1.5;
  letter-spacing: -0.008em;
  color: var(--muted);
}

@media (max-width: 900px) {
  .roi-soft__list {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------ le PoC */

/* Le PoC ferme la section software provider : grande ligne posee sur un
   filet orange, dans la meme grammaire que la bascule d'Operations
   retail. C est la derniere phrase avant le formulaire. */


/* ------------------------------------------------------------- contact */

.section--contact {
  position: relative;
}

.contact {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  padding: clamp(32px, 4vw, 52px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 88% 8%, rgba(107, 45, 137, 0.3), transparent 55%),
    radial-gradient(circle at 4% 92%, rgba(241, 90, 43, 0.12), transparent 50%),
    rgba(var(--veil), 0.03);
  box-shadow: var(--shadow);
}

/* Le titre du contact suit lui aussi la lecture du formulaire. */
.contact__intro {
  position: sticky;
  top: 124px;
}

.contact__intro h2 {
  margin-bottom: 20px;
}

.contact__intro p {
  margin: 0 0 26px;
  font-size: var(--fs-lead);
  line-height: 1.6;
}

.contact__email {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(var(--veil), 0.05);
  color: var(--text);
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -0.012em;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.contact__email:hover {
  border-color: rgba(241, 90, 43, 0.5);
  background: rgba(241, 90, 43, 0.12);
}

.lead-form {
  display: grid;
  gap: 14px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.lead-form label {
  display: grid;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.lead-form input,
.lead-form select,
.lead-form textarea {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(var(--veil), 0.045);
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.012em;
  text-transform: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.lead-form textarea {
  resize: vertical;
  line-height: 1.5;
}

.lead-form select {
  appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 21px, calc(100% - 14px) 21px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.lead-form option {
  background: var(--bg-elevated);
  color: var(--text);
}

.lead-form input::placeholder,
.lead-form textarea::placeholder {
  color: var(--muted-2);
}

.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
  outline: none;
  border-color: rgba(241, 90, 43, 0.55);
  background: rgba(var(--veil), 0.07);
}

.consent {
  display: flex !important;
  align-items: flex-start;
  gap: 11px;
  margin-top: 2px;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--lead) !important;
  line-height: 1.45;
}

.consent input {
  width: 18px !important;
  height: 18px;
  min-height: 0 !important;
  flex: 0 0 auto;
  margin-top: 1px;
  padding: 0 !important;
  border-radius: 5px;
  accent-color: var(--orange);
}

.form-submit {
  margin-top: 6px;
  width: 100%;
}

.form-status {
  margin: 0;
  color: var(--orange-hot) !important;
  font-size: 13.5px;
  font-weight: 620;
}

.form-status:empty {
  display: none;
}

/* -------------------------------------------------------------- footer */

.site-footer {
  position: relative;
  z-index: 1;
  padding: 44px 0 52px;
  border-top: 1px solid rgba(var(--veil), 0.08);
  color: var(--muted-2);
  font-size: 13px;
}

.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 0.9fr)) minmax(0, 1fr);
  gap: 28px 32px;
  align-items: start;
}

.footer-col {
  display: grid;
  gap: 7px;
  align-content: start;
  font-style: normal;
  line-height: 1.5;
}

.footer-brand__name {
  color: var(--text);
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -0.035em;
}

.footer-col__label {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.footer-col--address strong {
  color: var(--muted);
  font-weight: 650;
}

.footer-col a {
  color: var(--muted);
  transition: color 0.2s ease;
}

.footer-col a:hover {
  color: var(--text);
}

/* La mention de droits suit la ligne de marque, sans filet : le pied de
   page en comptait deja assez. */
.footer-legal {
  margin-top: 4px;
  font-size: 11.5px;
  letter-spacing: 0.01em;
  color: var(--muted-2);
}


/* ------------------------------------------------- reveal au defilement
   (classes posees par script.js, neutralisees en mouvement reduit)      */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.8, 0.24, 1);
}

.reveal--visible {
  opacity: 1;
  transform: none;
}

/* ========================================================= page Company */

/* Pas de scene animee ici : le hero repose sur la typographie et une
   fiche didentite posee a droite. */
.company-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 80px);
}

.company-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -92px 0 0;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom, rgba(var(--ground), 0) 42%, rgba(var(--ground), 0.8) 84%, var(--bg) 100%),
    linear-gradient(rgba(var(--veil), 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--veil), 0.026) 1px, transparent 1px);
  background-size: 100% 100%, 72px 72px, 72px 72px;
}

.company-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

.company-hero h1 {
  margin: 0;
  max-width: 660px;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.05em;
  font-weight: 720;
  text-wrap: balance;
  padding: 0.12em 0.14em 0.14em 0;
  margin-top: -0.12em;
  margin-right: -0.14em;
  margin-bottom: -0.14em;
  background: linear-gradient(148deg, #ffffff 18%, var(--purple-soft) 68%, #f7794e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.company-hero p {
  max-width: 620px;
  margin: 26px 0 0;
  color: var(--lead);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
  letter-spacing: -0.014em;
}

.company-profile {
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.company-profile > div {
  padding: 18px 20px;
  border-radius: 15px;
  background: rgba(var(--veil), 0.035);
}

.company-profile span:first-child {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: var(--fs-eyebrow);
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.company-profile strong {
  display: block;
  font-size: clamp(16px, 1.25vw, 18.5px);
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: -0.016em;
  color: var(--text);
}

.about {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 76px);
}

/* La conviction porte la page : son titre prend un cran de plus que les
   autres titres de section. */
.theme-light[data-page="company"] h2 {
  font-size: clamp(40px, 4.6vw, 68px);
}

.about__body p {
  margin: 0 0 18px;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
}

.about__body a {
  color: var(--orange-hot);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(241, 90, 43, 0.4);
  transition: text-decoration-color 0.2s ease;
}

.about__body a:hover {
  text-decoration-color: var(--orange-hot);
}

/* La case du groupe dans la fiche profil : le texte a gauche, le logo
   Gateway Security a droite, cliquable, centre sur la hauteur du texte. */
.company-profile__group {
  display: flex;
  align-items: center;
  gap: 18px;
}

.company-profile__group > div {
  min-width: 0;
  flex: 1 1 auto;
}

.company-profile__gateway {
  display: block;
  flex: 0 0 auto;
  padding: 0 4px;
}

.company-profile__gateway img {
  display: block;
  width: auto;
  height: 46px;
  transition: opacity 0.2s ease;
}

.company-profile__gateway:hover img {
  opacity: 0.7;
}

.company-hero__inner p strong,
.about__body p strong {
  color: var(--text);
  font-weight: 680;
}

.about-capabilities {
  margin-top: clamp(44px, 5vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(28px, 4vw, 64px);
  padding-top: clamp(36px, 4vw, 56px);
  border-top: 1px solid var(--line);
}

.about-capabilities__intro h3 {
  margin: 0;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.042em;
  text-wrap: balance;
}

.about-capabilities__intro p {
  margin: 14px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
}

/* Cinq capacites en damier : une icone au trait, un intitule court, et la
   phrase qui l'explique. Le numero d'ordre ne disait rien. */
.technical-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 36px;
}

.technical-list li {
  position: relative;
  display: grid;
  gap: 7px;
  align-content: start;
  padding: 18px 48px 20px 0;
  border-top: 1px solid var(--line);
}

.technical-list li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 46px;
  height: 2px;
  background: linear-gradient(90deg, var(--orange-hot), rgba(241, 90, 43, 0));
  transition: width 0.5s ease;
}

/* La derniere capacite occupe la largeur restante plutot que de laisser
   un trou dans le damier. */
.technical-list li:last-child {
  grid-column: 1 / -1;
}

.technical-list__ico {
  position: absolute;
  top: 18px;
  right: 0;
  color: rgba(107, 45, 137, 0.42);
}

.technical-list__ico svg {
  width: 30px;
  height: 30px;
}

.technical-list strong {
  font-size: 16.5px;
  font-weight: 720;
  letter-spacing: -0.028em;
  color: var(--text);
}

.technical-list li > span:last-child {
  font-size: 14.5px;
  line-height: 1.55;
  letter-spacing: -0.012em;
  color: var(--lead);
}

.technical-list li:hover::before {
  width: 100%;
}

@media (max-width: 620px) {
  .technical-list {
    grid-template-columns: 1fr;
  }
}

/* Notre ecosysteme (Company) : titre et chapeau sur toute la largeur,
   puis huit logos en gris a la meme hauteur, sur une grille de filets
   (quatre par rangee, deux sur tablette). La couleur revient au survol.
   Le cadre porte le filet du haut et de gauche, chaque case celui du bas
   et de droite : la grille se ferme quel que soit le nombre de colonnes.
   Les fichiers assets/partners/* sont des vectoriels nettoyes (fond blanc
   retire, viewBox recadre, couleurs de marque remises sur Inwave) et deux
   PNG a fond transparent ; le logo Barkene, blanc a l origine, a ete passe
   a l encre. */
.partners__head {
  margin-bottom: clamp(28px, 3.4vw, 44px);
}

.partners__head p:last-child {
  margin: 18px 0 0;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--lead);
}

.partners__logos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.partners__logos li {
  display: grid;
  place-items: center;
  min-height: 132px;
  padding: 26px 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.partners__logos img {
  display: block;
  width: 100%;
  max-width: 180px;
  height: 46px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.partners__logos li:hover img {
  filter: none;
  opacity: 1;
  transform: translateY(-2px);
}

@media (max-width: 860px) {
  .partners__logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .partners__logos li {
    min-height: 104px;
    padding: 20px 22px;
  }
}

/* L equipe (Company) : titre et chapeau dans une colonne de gauche,
   centree sur la hauteur des portraits, et a droite trois
   portraits ronds a lisere blanc, a peine superposes, Nicolas au centre
   un peu plus grand et devant, les deux autres un peu plus bas. Pas de
   cadre, pas de carte : sous chaque portrait, le nom, le role en capitales
   espacees avec un trait orange, la formation en gris, puis quelques faits
   en texte leger. Les portraits restent petits (12vw, plafond 190 px) ;
   les textes des cotes debordent vers l exterieur (--ext) pour garder de
   la place au texte. Au defilement, les portraits partent du centre et se
   deplient vers les cotes (setupTeamUnfold dans script.js), le texte suit
   d un temps.
   Les fichiers assets/team/*.webp sont des carres deja recadres a
   l interieur du cercle d origine : le rond et le lisere sont faits en CSS. */
.team-block {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.team-block__head > p:last-child {
  max-width: 34ch;
  font-size: var(--fs-lead);
  line-height: 1.6;
}

.team__title {
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.team {
  --portrait: clamp(140px, 12vw, 190px);
  --overlap: calc(var(--portrait) * 0.06);
  --ext: clamp(50px, 6vw, 90px);
  --ring: 4px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 8px var(--ext) 0;
}

.team__member {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: var(--portrait);
  opacity: 0;
  transform: translateX(var(--shift, 0px)) scale(0.88);
  transition: transform 1s cubic-bezier(0.22, 0.8, 0.24, 1), opacity 0.6s ease;
}

.team--open .team__member {
  opacity: 1;
  transform: none;
}

/* Le portrait du centre : plus grand, devant. Les deux autres, plus bas
   (leurs bas alignes sur le sien, donc les trois noms sur une ligne),
   passent dessous et se font mordre par son lisere blanc. */
.team__member--lead {
  --portrait: calc(clamp(140px, 12vw, 190px) * 1.1);
  z-index: 3;
}

.team__member--side {
  margin-top: calc(var(--portrait) * 0.1);
}

.team__member--side:first-child {
  margin-right: calc(-1 * var(--overlap));
}

.team__member--side:last-child {
  margin-left: calc(-1 * var(--overlap));
}

.team__photo {
  display: block;
  width: var(--portrait);
  height: var(--portrait);
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  /* Un filet fin au bord de la photo, puis le lisere blanc, puis un filet
     exterieur : le contour se lit pareil sur un fond clair ou sombre. */
  box-shadow:
    0 0 0 1px rgba(var(--veil), 0.14),
    0 0 0 calc(var(--ring) + 1px) #fff,
    0 0 0 calc(var(--ring) + 2px) rgba(var(--veil), 0.1),
    0 18px 40px -22px rgba(var(--veil), 0.35);
}

.team__body {
  padding-top: 20px;
  opacity: 0;
  transform: translateY(14px);
  transition: transform 0.7s cubic-bezier(0.22, 0.8, 0.24, 1) 0.45s, opacity 0.6s ease 0.45s;
}

.team--open .team__body {
  opacity: 1;
  transform: none;
}

/* Les textes des cotes laissent la place a celui du centre (qui les
   chevauche de --overlap) et s etendent vers l exterieur de --ext. */
.team__member--side:first-child .team__body {
  margin-left: calc(-1 * var(--ext));
  padding-right: calc(var(--overlap) + 14px);
}

.team__member--side:last-child .team__body {
  margin-right: calc(-1 * var(--ext));
  padding-left: calc(var(--overlap) + 14px);
}

.team__name {
  margin: 0;
  font-size: clamp(19px, 1.4vw, 22px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}

/* Le role : capitales espacees, encre pleine, une fine barre orange
   devant. Un trait horizontal se lisait comme un tiret long. */
.team__job {
  margin: 8px 0 0 !important;
  font-size: var(--fs-micro);
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text) !important;
}

.team__job::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 12px;
  margin: 0 9px 0 0;
  border-radius: 2px;
  vertical-align: -2px;
  background: var(--orange-hot);
}

.team__role {
  margin: 4px 0 12px !important;
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--muted) !important;
}

.team__facts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--text-soft);
}

@media (prefers-reduced-motion: reduce) {
  .team__member,
  .team__body {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Gouvernance (Company) : a gauche, titre et chapeau, centres sur la
   colonne de droite ; a droite, quatre garanties numerotees en grille de
   filets (motif .pressure-list), en gros, puis le cadre europeen nomme
   texte par texte (RGPD, CNIL, AI Act) sur trois colonnes. Pas de carte,
   pas de badge : la maitrise du sujet se lit dans les references. */
.governance {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.governance__lead {
  margin: 18px 0 0;
  max-width: 36ch;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--lead);
}

.governance__label {
  margin: 34px 0 12px !important;
  color: var(--muted) !important;
  font-size: var(--fs-eyebrow);
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.governance__body > .governance__label:first-child {
  margin-top: 0 !important;
}

.governance__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}

.governance__list li {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 22px 12px 26px 0;
  border-top: 1px solid var(--line);
}

/* La colonne de droite prend le filet vertical : les quatre cases se
   croisent au centre, sans qu aucune ne soit encadree. */
.governance__list li:nth-child(even) {
  padding-left: 26px;
  border-left: 1px solid var(--line);
}

.governance__num {
  font-size: var(--fs-micro);
  font-weight: 750;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.governance__list strong {
  font-size: clamp(19px, 1.5vw, 23px);
  line-height: 1.2;
  font-weight: 720;
  letter-spacing: -0.028em;
  color: var(--text);
}

.governance__list li > span:last-child {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--lead);
}

@media (max-width: 860px) {
  .governance {
    grid-template-columns: 1fr;
  }

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

  .governance__list li:nth-child(even) {
    padding-left: 0;
    border-left: 0;
  }
}

/* ============================================ appel a laction partage
   Le meme bloc ferme la page Company et le catalogue des cas dusage. */

.uc-cta .container {
  max-width: 880px;
  padding: clamp(36px, 4.5vw, 60px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-align: center;
  background:
    radial-gradient(circle at 82% 6%, rgba(107, 45, 137, 0.32), transparent 58%),
    radial-gradient(circle at 8% 94%, rgba(241, 90, 43, 0.14), transparent 52%),
    rgba(var(--veil), 0.03);
  box-shadow: var(--shadow);
}

.uc-cta h2 {
  margin: 0 auto;
  max-width: 620px;
}

.uc-cta p {
  margin: 20px auto 0;
  max-width: 620px;
  font-size: clamp(15.5px, 1.3vw, 17px);
  line-height: 1.6;
}

.uc-cta__actions {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* ================================================== mentions legales

   Page de texte pur : une colonne etroite, aucune surface de verre, le
   confort de lecture prime sur leffet. */

.legal__inner {
  max-width: 760px;
  padding: clamp(40px, 5vw, 72px) 0 clamp(48px, 5vw, 80px);
}

.legal h1 {
  margin: 0;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.045em;
  font-weight: 720;
}

.legal h2 {
  margin: clamp(38px, 4vw, 52px) 0 14px;
  font-size: clamp(20px, 1.8vw, 24px);
  letter-spacing: -0.032em;
}

.legal p,
.legal li {
  color: var(--lead);
  font-size: 15.5px;
  line-height: 1.68;
  letter-spacing: -0.008em;
}

.legal ul {
  padding-left: 20px;
}

.legal li {
  margin-bottom: 8px;
}

.legal a {
  color: var(--orange-hot);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(241, 90, 43, 0.4);
}

.legal a:hover {
  text-decoration-color: var(--orange-hot);
}

.legal__updated {
  margin-top: 14px !important;
  color: var(--muted-2) !important;
  font-size: 13.5px !important;
}

.legal__back {
  margin-top: clamp(40px, 4vw, 56px) !important;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.legal__back a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 620;
}

.legal__back a:hover {
  color: var(--text);
}

/* La navigation signale la page ouverte. */
.nav-menu-link--active,
.nav-menu--active > summary {
  color: var(--text);
  background: var(--surface);
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .hero__content {
    max-width: 760px;
  }

  .hero__visual {
    min-height: 500px;
  }

  .scene {
    width: min(88vw, 500px);
  }

  .hero__image {
    right: -40%;
    width: 150%;
  }

  .software-grid,
  .roi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section-heading--split,
  .problem,
  .contact,
  .company-hero__inner,
  .about,
  .about-capabilities {
    grid-template-columns: 1fr;
  }

  .section-heading--split {
    align-items: start;
  }

  .problem > div:first-child {
    position: static;
  }

  .section-heading--split > p {
    padding-bottom: 0;
  }

  .stats,
  .stats__grid {
    grid-template-columns: 1fr;
  }

  .stats__intro,
  .contact__intro {
    position: static;
  }

  .flow {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .flow__link {
    width: 1px;
    height: 30px;
    justify-self: center;
    align-self: auto;
    background: linear-gradient(180deg, rgba(var(--veil), 0.1), rgba(241, 90, 43, 0.55));
  }

  .flow__fan {
    display: none;
  }

  .flow__outputs {
    grid-template-rows: none;
    align-self: auto;
  }

  .flow__motto {
    margin-top: 28px;
  }


  .flow__arrow {
    width: 1px;
    height: 30px;
    justify-self: center;
    background: linear-gradient(180deg, rgba(var(--veil), 0.1), rgba(241, 90, 43, 0.55));
  }

  .flow__arrow::after {
    animation: none;
    right: -3px;
    top: auto;
    bottom: 0;
    margin-top: 0;
  }

  .nav {
    flex-wrap: wrap;
    min-height: 0;
    padding: 14px 0;
    row-gap: 10px;
  }

  .nav__menus {
    order: 4;
    width: 100%;
    flex-wrap: wrap;
    gap: 6px;
  }

  .nav-submenu {
    position: static;
    min-width: 100%;
    margin-top: 6px;
    box-shadow: none;
  }
}

@media (max-width: 720px) {
  :root {
    --gutter: 14px;
  }

  .nav {
    min-height: 76px;
    gap: 10px;
  }

  .language-switch select {
    min-width: 68px;
    padding-left: 12px;
  }

  .hero {
    padding-bottom: 72px;
  }

  .hero__statement {
    font-size: clamp(28px, 8.6vw, 48px);
  }

  .hero__visual {
    min-height: 400px;
  }

  .scene {
    width: min(94vw, 420px);
  }

  .scene__card {
    left: 0;
    bottom: -6%;
    width: min(240px, 78%);
  }

  .pin.p1, .pin.p3 { left: -2%; }
  .pin.p2, .pin.p4 { right: -2%; }

  .software-grid,
  .roi-grid,
  .pressure-list,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .team-block {
    grid-template-columns: 1fr;
  }

  .team {
    flex-direction: column;
    align-items: center;
    gap: 56px;
    padding: 0;
  }

  .team__member,
  .team__member--lead {
    --portrait: 200px;
    width: min(100%, 380px);
  }

  .team__member--side,
  .team__member--side:first-child,
  .team__member--side:last-child {
    margin: 0;
  }

  .team__photo {
    margin: 0 auto;
  }

  .team__member--side:first-child .team__body,
  .team__member--side:last-child .team__body {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }

  /* Portrait centre, texte centre. */
  .team__body {
    text-align: center;
  }

  .usecases-link {
    flex-wrap: wrap;
  }

  /* Sur telephone la formule s empile : un terme par ligne, l operateur
     centre entre deux, au lieu de signes qui flottent a droite. */
  .roi-formula__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .roi-formula__result,
  .roi-formula__term {
    justify-content: center;
    text-align: center;
  }

  .roi-formula__op {
    text-align: center;
    line-height: 1;
  }

  .footer-inner {
    grid-template-columns: 1fr;
  }
}

/* Sous cette largeur la scene na plus la place de porter ses etiquettes
   de zone : on garde la tablette, son halo et la carte, posee dessous. */
@media (max-width: 560px) {
  .hero__visual {
    min-height: 0;
    /* la vignette passe sous la scene : on lui reserve exactement sa
       hauteur, sinon la signature vient se poser dessus */
    padding-bottom: 166px;
  }

  .hero__statement {
    font-size: clamp(25px, 7.2vw, 38px);
  }

  .scene {
    width: min(97vw, 400px);
  }

  .pin,
  .scene__links {
    display: none;
  }

  /* Plus de pins ni de faisceaux a cette largeur : la tablette prend
     toute la scene et se remet a plat, sinon les alertes se lisent
     de travers et deux d entre elles sortent de l ecran. */
  .tablet {
    width: 90%;
    /* recentree : a 56 % elle depassait sous la scene et venait mordre
       sur la vignette du clip */
    top: 50%;
    padding: 9px;
    transform: translate(-50%, -50%) rotate(-1deg);
  }

  .feed {
    gap: 9px;
  }

  .feed li {
    padding: 12px 12px 12px 15px;
  }

  .feed__time {
    font-size: 11px;
  }

  .feed__text {
    font-size: 13.5px;
  }

  .tablet__title {
    font-size: 11px;
  }

  /* La carte du clip passait en pleine largeur : elle ecrasait la scene
     et la signature venait se poser dessus. Elle redevient une vignette,
     calee sous la scene. */
  .scene__card {
    left: 50%;
    right: auto;
    top: calc(100% + 18px);
    bottom: auto;
    width: min(180px, 56%);
    padding: 8px 9px 9px;
    transform: translateX(-50%) rotate(-2.5deg);
  }

  .scene__card .message {
    display: none;
  }

  .scene__card .bar {
    margin-top: 8px;
  }

  .hero__sign {
    margin-top: 28px;
  }

  .nav-menu summary,
  .nav-menu-link {
    height: 36px;
    padding: 0 11px;
    font-size: 13px;
  }
}

/* ------------------------------------------------------ mouvement reduit */

@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;
  }

  .feed li {
    opacity: 1;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

.scene__card .bar {
  display: block;
}

/* ------------------------------------------------------------------ 404

   Page servie quand l'adresse n'existe pas. Tant que seule la page
   d'accueil est publiee, c'est elle que voient les visiteurs qui suivent
   un lien vers une section pas encore ouverte.                        */

.nf {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - 210px);
  display: grid;
  place-items: center;
  padding: 60px 0;
  text-align: center;
}

.nf::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20% -30% 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 34%, rgba(107, 45, 137, 0.3), transparent 46%),
    linear-gradient(rgba(var(--veil), 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--veil), 0.026) 1px, transparent 1px);
  background-size: 100% 100%, 72px 72px, 72px 72px;
}

.nf__inner {
  max-width: 640px;
}

.nf__code {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 780;
  letter-spacing: 0.28em;
  color: var(--orange-hot);
}

.nf__title {
  margin: 0;
  font-size: clamp(32px, 4.4vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.05em;
  font-weight: 720;
  text-wrap: balance;
  padding: 0.12em 0.14em 0.14em 0;
  margin-top: -0.12em;
  margin-right: -0.14em;
  margin-bottom: -0.14em;
  background: linear-gradient(148deg, #ffffff 18%, var(--purple-soft) 68%, #f7794e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nf__body {
  margin: 22px auto 30px;
  max-width: 46ch;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.6;
  color: var(--lead);
}

/* ------------------------------------------------------- menu compact

   En dessous de 1080 px les entrees de navigation passaient a la ligne et
   l'en-tete mangeait un tiers de l'ecran. Elles se rangent derriere un
   bouton. Rien de tout cela ne s'applique au-dessus de ce seuil : le
   site sur ordinateur est inchange.                                    */

.nav__burger {
  display: none;
  position: relative;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(var(--veil), 0.045);
  color: var(--text);
  cursor: pointer;
}

/* Les trois barres : celle du milieu est l'element, les deux autres ses
   pseudo-elements. Ouvert, elles se croisent. */
.nav__burger span,
.nav__burger span::before,
.nav__burger span::after {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transform: translateX(-50%);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.nav__burger span {
  top: 50%;
  margin-top: -0.75px;
}

.nav__burger span::before,
.nav__burger span::after {
  content: "";
  left: 0;
  transform: none;
}

.nav__burger span::before { top: -6px; }
.nav__burger span::after { top: 6px; }

.nav__burger[aria-expanded="true"] span { background: transparent; }
.nav__burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav {
    position: relative;
    flex-wrap: nowrap;
  }

  .nav__burger {
    display: block;
    order: 3;
  }

  /* Le panneau tombe sous l'en-tete, sur toute sa largeur. */
  .nav__menus {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 40;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    box-shadow: var(--shadow);
  }

  .nav__menus[data-open="true"] {
    display: flex;
  }

  .nav-menu,
  .nav-menu-link {
    width: 100%;
  }

  .nav-menu summary,
  .nav-menu-link {
    width: 100%;
    justify-content: flex-start;
  }

  /* Les sous-menus se deplient dans le flux au lieu de flotter. */
  .nav-submenu {
    position: static;
    display: grid;
    min-width: 0;
    margin: 2px 0 6px 12px;
    padding: 4px 0 4px 12px;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .language-switch { order: 1; }
  .nav__cta { order: 2; }
}

@media (max-width: 520px) {
  /* Le bouton d'appel passe dans le panneau : l'en-tete garde la marque,
     la langue et le bouton de menu. */
  .nav__cta {
    display: none;
  }
}

/* ============================================= refonte du 23/09/2026

   Le constat en grand, le schema « How it works » en deux temps, la
   section « modele d exploitation », le serveur seul, la barre de
   chargement. */

/* ------------------------------------------- le constat, en plus grand */

/* Le titre seul a gauche ; a droite deux phrases puis les quatre familles
   d evenements, un cran au-dessus des listes courantes. */
.problem__body > p:first-child {
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--text-soft);
}

.pressure-list--large {
  margin-top: 36px;
  border-bottom: 1px solid var(--line);
}

.pressure-list--large .pressure-list__item {
  gap: 18px;
  padding: 26px 8px 26px 0;
}

.pressure-list--large .pressure-list__item:nth-child(even) {
  padding-left: 26px;
}

.pressure-list--large .pressure-list__icon {
  width: 36px;
  height: 36px;
}

.pressure-list--large .pressure-list__text {
  font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 680;
  letter-spacing: -0.024em;
}

/* --------------------------------- comment ca marche, en deux temps */

/* L en-tete : la promesse (etat reduit) et le titre complet (etat
   detaille) occupent la meme case et se fondent l un dans l autre. */
.flow-heading {
  display: grid;
  margin-bottom: clamp(20px, 2.8vh, 36px);
}

.flow-heading__intro,
.flow-heading__detail {
  grid-area: 1 / 1;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.flow-heading__claim {
  max-width: 40ch;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(34px, 3.8vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.flow-heading__detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: end;
  gap: clamp(24px, 4vw, 64px);
}

.flow-heading__title {
  margin: 0;
  font-size: clamp(34px, 3.8vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-weight: 700;
  text-wrap: balance;
  color: var(--text) !important;
}

.flow-heading__body {
  margin: 0 0 6px !important;
  font-size: var(--fs-lead);
  line-height: 1.6;
}

/* Les details du schema (liste des equipements, chaine et plus du
   moteur, texte des destinataires) : une rangee de grille qui se
   replie a zero dans l etat reduit. */
.flow__detail {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 0.6s cubic-bezier(0.22, 0.8, 0.24, 1), opacity 0.45s ease 0.15s;
}

.flow__detail > * {
  min-height: 0;
  overflow: hidden;
}

/* La rangee d icones de l etat reduit : cachee des que la liste est
   deployee. */
.flow__src-icons {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  max-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, opacity 0.3s ease, margin 0.5s ease;
}

.flow__src-icons .flow__src-icon {
  width: auto;
  height: 32px;
}

/* Hors de l epinglage (mobile, petit ecran, mouvement reduit, sans JS) :
   la promesse sert de titre et le schema est complet d emblee. */
.flow-heading__detail {
  display: none;
}

/* L etat reduit n existe que quand la section peut rester epinglee le
   temps d un ecran : ordinateur, fenetre assez haute. */
@media (min-width: 1081px) and (min-height: 700px) {
  .flow-stage {
    padding: 0;
    min-height: 165vh;
  }

  .flow-stage__sticky {
    position: sticky;
    top: 92px;
    min-height: calc(100vh - 92px);
    display: grid;
    align-content: center;
    padding: clamp(20px, 3vh, 44px) 0 clamp(18px, 2.4vh, 32px);
  }

  .flow-heading__detail {
    display: grid;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
  }

  [data-flow-stage="full"] .flow-heading__intro {
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
  }

  [data-flow-stage="full"] .flow-heading__detail {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  /* Dans l etat reduit, la promesse prend ses distances avec le schema :
     la place ne manque pas, les details sont replies. */
  [data-flow-stage="intro"] .flow-heading {
    margin-bottom: clamp(44px, 8vh, 104px);
  }

  [data-flow-stage="intro"] .flow__detail {
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.5s cubic-bezier(0.22, 0.8, 0.24, 1), opacity 0.25s ease;
  }

  [data-flow-stage="intro"] .flow__src-icons {
    max-height: 40px;
    margin: 12px 0 4px;
    opacity: 1;
  }

  [data-flow-stage="intro"] .flow__brand {
    padding: 10px 0 6px;
  }

  [data-flow-stage="intro"] .flow__brand-logo {
    height: 72px;
  }

  [data-flow-stage="intro"] .flow__step--core {
    display: grid;
    align-content: center;
    min-height: 220px;
  }

  [data-flow-stage="intro"] .flow__step--output {
    padding: 22px 20px;
  }

  [data-flow-stage="intro"] .flow__out-head {
    margin-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-heading__intro,
  .flow-heading__detail,
  .flow__detail,
  .flow__src-icons,
  .flow__brand-logo {
    transition: none;
  }
}

/* ---------------------------------------- le modele d exploitation */

/* Titre a gauche (motif .problem), a droite les deux profils cote a cote
   puis le renvoi vers le catalogue. */
.model {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.model__intro {
  position: sticky;
  top: 124px;
}

.model__body {
  display: grid;
  gap: clamp(36px, 4vw, 56px);
}

/* Le profil : son icone au trait, en couleur, sans boite, puis son nom. */
.model__who {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 4px;
  font-size: clamp(22px, 1.8vw, 27px);
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.model__who-icon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
}

.model__who-icon svg {
  width: 30px;
  height: 30px;
}

/* Les gains en lignes de fiche : le nom a gauche sur une colonne fixe, la
   phrase a droite, un filet entre deux lignes. */
.model__gains {
  margin: 0;
  display: grid;
}

.model__gains > div {
  display: grid;
  grid-template-columns: minmax(0, 20ch) minmax(0, 1fr);
  gap: 8px clamp(20px, 3vw, 48px);
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.model__gains > div:last-child {
  border-bottom: 1px solid var(--line);
}

.model__gains dt {
  font-size: var(--fs-body);
  font-weight: 720;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--text);
}

.model__gains dd {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--lead);
}



/* L icone du destinataire, la meme que dans le schema, posee sur une
   petite surface pour se lire comme un repere. */





/* Le trait orange de la maison, devant chaque gain. */



.model__body .usecases-link {
  margin-top: 0;
}

@media (max-width: 1080px) {
  .model {
    grid-template-columns: 1fr;
  }

  .model__intro {
    position: static;
  }
}


/* ------------------------------------- le serveur, tout en magasin */

/* Trois garanties sous le texte, chacune derriere un trait orange : du
   texte, rien qui ressemble a un bouton. */
.local-points {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
}

.local-points li {
  position: relative;
  padding-left: 22px;
  font-size: var(--fs-body);
  font-weight: 680;
  letter-spacing: -0.018em;
  color: var(--text);
}

.local-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 12px;
  height: 2px;
  background: var(--orange-hot);
}

/* --------------------------------------------- barre de chargement */

/* Un filet fin en haut de page, du violet a l orange, qui avance pendant
   que la page se charge puis s efface a l evenement load (script.js pose
   is-loaded sur <html>). Sans JS il finit sa course et disparait seul. */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--purple-soft), var(--orange-hot));
  box-shadow: 0 0 10px rgba(241, 90, 43, 0.6);
  pointer-events: none;
  animation: page-load 1.6s ease-out forwards, page-load-fade 0.6s ease 5s forwards;
}

html.is-loaded body::before {
  animation: page-loaded 0.55s ease forwards;
}

@keyframes page-load {
  to { width: 82%; }
}

@keyframes page-load-fade {
  to { width: 100%; opacity: 0; }
}

@keyframes page-loaded {
  from { width: 82%; opacity: 1; }
  to { width: 100%; opacity: 0; }
}

/* Sur telephone la fiche des gains passe en une colonne : le nom, puis la
   phrase. Ecrit apres la regle de base pour la surcharger. */
@media (max-width: 720px) {
  .model__gains > div {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ================================================== page Partners

   Meme langage que Company : hero clair a deux colonnes, titre a gauche
   qui suit la lecture, points sur des filets, grille de logos, appel
   final. Rien de nouveau sauf la liste des trois besoins. */

.company-hero p + .hero__actions {
  margin-top: 30px;
}

/* Les partenaires deja en place : une ligne discrete au-dessus du
   sur-titre, le lien en encre pleine souligne d orange. */
.partners-hero__existing {
  margin: 0 0 26px;
  font-size: var(--fs-caption);
  color: var(--muted);
}

.partners-hero__existing a {
  margin-left: 8px;
  color: var(--text);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: var(--orange-hot);
  text-underline-offset: 4px;
}

.partners-hero__existing a::after {
  content: " \2192";
  color: var(--orange-hot);
}

/* Le formulaire partenaire, dans le hero : une carte claire, les champs
   sur deux colonnes, le bouton en bas a gauche. */
.partner-form {
  padding: clamp(22px, 2.6vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: var(--shadow);
}

.partner-form__title {
  margin: 0;
  font-size: clamp(22px, 1.8vw, 27px);
  line-height: 1.15;
  letter-spacing: -0.032em;
}

.partner-form__hint {
  margin: -6px 0 2px;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--lead);
}

.partner-form .form-status:empty {
  display: none;
}

.partner-form .form-submit {
  justify-self: start;
}

/* Sur fond clair, le chevron de defilement passe a l encre. */
.theme-light .hero__scroll {
  border-color: rgba(var(--veil), 0.45);
}

.theme-light .hero__scroll:hover {
  border-color: rgb(var(--veil));
}

/* Le besoin des enseignes : motif .problem. */
.need {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.need__intro {
  position: sticky;
  top: 124px;
}

.need__body > p:first-child {
  margin: 0;
  font-size: var(--fs-lead);
  line-height: 1.6;
}

/* Trois besoins sur des filets : l icone au trait en orange, le titre,
   la phrase. */
.need-list {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.need-list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-areas: "icon title" "icon body";
  column-gap: 16px;
  row-gap: 6px;
  align-items: start;
  padding: 20px 0 22px;
  border-top: 1px solid var(--line);
}

.need-list li:last-child {
  border-bottom: 1px solid var(--line);
}

.need-list__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: 1px;
  color: var(--orange-hot);
}

.need-list__icon svg {
  width: 28px;
  height: 28px;
}

.need-list strong {
  grid-area: title;
  font-size: clamp(19px, 1.5vw, 22px);
  font-weight: 720;
  letter-spacing: -0.026em;
  line-height: 1.25;
  color: var(--text);
}

.need-list li > span:last-child {
  grid-area: body;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--lead);
}

@media (max-width: 1080px) {
  .need {
    grid-template-columns: 1fr;
  }

  .need__intro {
    position: static;
  }
}

/* ==================================== conformite et certifications

   Un sous-bloc de la gouvernance, a la place du cadre de reference :
   trois sceaux au trait et leur libelle. Les sceaux sont dessines ici,
   jamais les logos des organismes certificateurs : ils appartiennent a
   ces organismes, qui les delivrent a qui ils ont audite. Le nom d une
   norme, lui, se cite. */
.compliance {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 36px);
}

/* Les libelles s alignent en haut : sur deux lignes, un sceau ne doit
   pas descendre plus bas que ses voisins. */
.compliance li {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 14px;
  text-align: center;
}

.compliance__seal {
  display: block;
  width: clamp(76px, 6.6vw, 96px);
  color: var(--text);
}

/* La couronne d etoiles se lit en gris : c est le cadre, pas le sujet. */
.compliance__stars {
  fill: currentColor;
  stroke: none;
  opacity: 0.42;
}

.compliance__seal svg {
  display: block;
  width: 100%;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Le nom de la norme, au centre du tampon. */
.compliance__seal-text {
  fill: currentColor;
  stroke: none;
  /* 10.5 et pas 12 : a 12, « ISO 27001 » touchait l anneau interieur. */
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-anchor: middle;
}

.compliance strong {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* La precision qui ne vaut que pour un pays se lit sous le libelle. */
.compliance__more {
  max-width: 24ch;
  margin-top: -6px;
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--lead);
}

.compliance__note {
  margin: 26px 0 0 !important;
  font-size: var(--fs-micro);
  line-height: 1.55;
  color: var(--muted);
}

@media (max-width: 620px) {
  .compliance {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}