@import url('../fonts/fonts.css');

/* ==========================================================================
   farm connect — site vitrine
   Design tokens (cf. handoff "Design tokens")
   ========================================================================== */

:root {
  /* Surfaces */
  --bg:            #faf9f7;
  --bg-alt:        #f2f0eb;
  --surface:       #ffffff;
  --highlight:     #f7f6f3;
  --dark:          #35322e;

  /* Text */
  --ink:           #35322e;
  --ink-on-dark:   #f7f6f3;
  --body:          #4a4741;
  --body-alt:      #45423c;
  --muted:         #5d5a54;
  --label:         #6a655c;
  --label-alt:     #706f68;

  /* Lines */
  --line:          rgba(53, 50, 46, 0.10);
  --line-2:        rgba(53, 50, 46, 0.12);
  --line-3:        rgba(53, 50, 46, 0.14);
  --line-4:        rgba(53, 50, 46, 0.18);
  --line-5:        rgba(53, 50, 46, 0.22);
  --line-on-dark:  rgba(247, 246, 243, 0.20);

  /* Accents */
  --maker:         #f06830;
  --linker:        #309828;
  --neutral:       #706f68;
  --success:       #8fd188;
  --warning:       #f0a068;

  /* Buttons */
  --btn:           #4a4741;
  --btn-hover:     #706f68;

  /* Type. Poppins is a stand-in for the brand face: swap here only. */
  --font:          "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:     "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  /* Metrics */
  --maxw:          1180px;
  --pad-x:         clamp(20px, 5vw, 72px);
  --section-y:     clamp(56px, 8vw, 110px);
  --header-h:      60px;

  /* Radii */
  --r-sm:          4px;
  --r-input:       5px;
  --r:             6px;
  --r-lg:          8px;
  --r-pill:        999px;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--label-alt); }

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

h1, h2, h3, p { margin: 0; text-wrap: pretty; }

::selection { background: #e3e1db; }

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

.section--dark :focus-visible,
.site-footer :focus-visible { outline-color: var(--ink-on-dark); }

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--dark);
  color: var(--ink-on-dark);
  font-size: 14px;
}

.skip-link:focus {
  left: var(--pad-x);
  color: var(--ink-on-dark);
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.container { max-width: var(--maxw); margin-inline: auto; }

.section {
  padding: var(--section-y) var(--pad-x);
  border-bottom: 1px solid var(--line);
}

/* Sticky header offset for anchor targets */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

.section--alt   { background: var(--bg-alt); }
.section--dark  { background: var(--dark); color: var(--ink-on-dark); border-bottom: 0; }
.section--band  { padding-block: clamp(36px, 5vw, 64px); }
.section--flush { border-bottom: 0; border-top: 1px solid var(--line); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 18px;
}

.label-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--label);
}

.h2 {
  font-weight: 400;
  font-size: clamp(25px, 3.4vw, 42px);
  line-height: 1.16;
  letter-spacing: -0.025em;
}

.h2--22ch { max-width: 22ch; }
.h2--24ch { max-width: 24ch; }
.h2--spaced { margin-bottom: clamp(28px, 3.5vw, 44px); }

.section-lede {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6;
  color: var(--muted);
  font-weight: 300;
  max-width: 64ch;
  margin-top: 16px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  border-radius: var(--r-pill);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.btn--primary { background: var(--btn); color: var(--bg); }
.btn--primary:hover { background: var(--btn-hover); color: var(--bg); }

.btn--ghost { border-color: var(--line-5); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }

.btn--light { background: var(--highlight); color: var(--ink); border: 0; }
.btn--light:hover { background: rgba(247, 246, 243, 0.82); color: var(--ink); }

.btn--outline-light {
  border-color: rgba(247, 246, 243, 0.28);
  color: var(--ink-on-dark);
  background: transparent;
  padding: 8px 15px;
  font-size: 14px;
  font-weight: 400;
  gap: 8px;
}

.btn--outline-light:hover { border-color: var(--ink-on-dark); color: var(--ink-on-dark); }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 14px var(--pad-x);
  background: rgba(250, 249, 247, 0.93);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

/* Le fond et la bordure vont d'un bord a l'autre, mais logo et navigation
   s'alignent sur la meme colonne que le contenu des sections. */
.site-header__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-header--plain {
  position: static;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: transparent;
}

.site-header__logo { display: flex; align-items: center; }
.site-header__logo img { height: 32px; width: auto; }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  font-size: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.site-nav a { color: var(--label-alt); }
.site-nav a:hover { color: var(--ink); }

/* Selecteur porte a `.site-nav a.site-nav__cta` : `.site-nav a` ci-dessus est
   plus specifique que la seule classe, et repeignait le libelle en gris sur le
   fond sombre du bouton (contraste 1.6:1). */
.site-nav a.site-nav__cta {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  background: var(--btn);
  color: var(--bg);
  font-weight: 500;
  transition: background-color .18s ease;
}

.site-nav a.site-nav__cta:hover { background: var(--btn-hover); color: var(--bg); }

.site-nav__lang { font-size: 13px; padding-inline: 2px; }

/* The anchors sit in a wrapper so they can be dropped as a group; display:
   contents keeps them direct flex children of the nav. */
.site-nav__anchors { display: contents; }

/* Below this width the four anchors are dropped: the page is a single scroll
   and the header stays on one 60px line with the CTA and the language switch. */
@media (max-width: 760px) {
  .site-nav__anchors { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { padding: clamp(56px, 9vw, 120px) var(--pad-x) clamp(48px, 7vw, 96px); }

.hero__eyebrow { margin-bottom: clamp(24px, 4vw, 40px); color: var(--label-alt); }

.hero__title {
  font-weight: 400;
  font-size: clamp(32px, 5.6vw, 66px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  max-width: 21ch;
}

/* Les deux parties de la rangee sont ancrees aux bords du conteneur : sinon
   les boutons se posent juste apres le paragraphe et flottent au milieu, sans
   s'aligner sur rien. `baseline` pose le texte des boutons sur la meme ligne
   que la premiere ligne du paragraphe. */
.hero__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 64px);
  align-items: baseline;
  margin-top: clamp(32px, 5vw, 56px);
}

.hero__lede {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
  color: var(--muted);
  max-width: 46ch;
  font-weight: 300;
}

.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ==========================================================================
   Ecosystem band — counters + sector chips
   ========================================================================== */

.band__title {
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.025em;
}

/* Conteneur de requete pour les filieres : la bande a une largeur donnee par
   la page, ce qui est la reference stable dont la grille des pastilles a
   besoin (leur propre zone, elle, depend de la place laissee par les chiffres). */
.band__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(24px, 3vw, 44px);
  margin-top: clamp(24px, 3vw, 36px);
  padding-top: clamp(20px, 2.5vw, 30px);
  border-top: 1px solid var(--line-3);
  container-type: inline-size;
}

.stat { min-width: 150px; flex: 1 1 auto; }

/* Sous ~861px, les filieres passent sur leur propre ligne : les deux chiffres
   ne doivent plus s'etirer, sinon ils se retrouvent separes par un vide aussi
   large qu'eux. Ils reprennent alors leur largeur naturelle, groupes a gauche. */
@container (max-width: 860px) {
  .stat { flex: 0 1 auto; }
}

.stat__value {
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat__label {
  font-size: 14px;
  color: var(--muted);
  font-weight: 300;
  margin-top: 6px;
}

/* Conteneur de requete : la zone des filieres change de largeur sans rapport
   direct avec celle de la fenetre (elle partage la ligne avec les compteurs,
   puis passe seule en dessous). Ses colonnes se reglent donc sur sa propre
   largeur, pas sur celle du viewport. */
.sectors {
  flex: 0 1 auto;
  min-width: 280px;
}

/* Deux lignes de trois filieres. `max-content` garde a chaque pastille sa
   largeur naturelle tout en alignant les colonnes ; `minmax(0, ...)` les
   autorise a se comprimer plutot qu'a deborder si la place manque. */
.sectors__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, max-content));
  justify-content: start;
  gap: 10px;
  margin-top: 12px;
  padding: 0;
  list-style: none;
}

@container (max-width: 469px) {
  .sectors__list { grid-template-columns: repeat(2, minmax(0, max-content)); }
}

@container (max-width: 329px) {
  .sectors__list { grid-template-columns: minmax(0, max-content); }
}

.chip-icon {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  font-size: 13.5px;
  color: var(--body-alt);
}

.chip-icon svg { flex: 0 0 auto; }


/* ==========================================================================
   Ecosystem diagram
   ========================================================================== */

.diagram { margin-top: clamp(32px, 4vw, 52px); }

/* Trois colonnes, ou une seule sur toute la largeur. `auto-fit` produisait un
   etat intermediaire a deux colonnes ou la troisieme carte restait seule, avec
   un vide a cote d'elle. */
.diagram__actors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.5vw, 18px);
  padding: 0;
  margin: 0;
  list-style: none;
}

.actor {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
}

.actor__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink);
}

.actor__label { font-weight: 500; font-size: 16px; }

/* Meme grille que .diagram__actors, pour que chaque trait tombe exactement
   sous sa carte. Un gap fixe centre les decalait de plus de 150px aux grandes
   largeurs, et les regroupait au centre des que les cartes s'empilaient. */
.diagram__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: clamp(12px, 1.5vw, 18px);
  height: 36px;
}

.diagram__links span {
  width: 1px;
  justify-self: center;
  background: linear-gradient(#d6d2c9, rgba(53, 50, 46, 0.35));
}

/* Sous ~627px de contenu, les trois cartes ne tiennent plus sur une ligne
   (0.9 x largeur < 3x180 + 2x12) : empilees, elles n'ont plus de trait a
   relier, et trois traits cote a cote ne voudraient plus rien dire.
   Le seuil est releve a 645px parce qu'une media query mesure le viewport
   barre de defilement comprise, alors que la grille, elle, ne dispose que de
   la largeur reellement disponible : sans cette marge, il reste une plage ou
   les cartes sont deja empilees et les traits encore affiches. */
@media (max-width: 645px) {
  .diagram__actors { grid-template-columns: 1fr; }

  /* Seuls les traits s'effacent : la boite reste pour conserver les 36px qui
     separent les cartes de la barre sombre. */
  .diagram__links span { display: none; }
}

.diagram__base {
  background: var(--dark);
  color: var(--ink-on-dark);
  border-radius: var(--r);
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 3vw, 32px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.diagram__base img { height: 26px; width: auto; }

.diagram__base span {
  font-size: clamp(14px, 1.4vw, 17px);
  font-weight: 300;
  color: rgba(247, 246, 243, 0.9);
}

/* Until a native light logo is supplied, the dark mark is inverted. */
.logo--inverted { filter: invert(1) brightness(1.6); }

/* ==========================================================================
   Positioning (dark)
   ========================================================================== */

.positioning { padding-block: clamp(64px, 9vw, 130px); }

.positioning .eyebrow {
  color: rgba(247, 246, 243, 0.55);
  margin-bottom: clamp(22px, 3vw, 34px);
}

.positioning__statement {
  font-weight: 300;
  font-size: clamp(23px, 3.4vw, 44px);
  line-height: 1.2;
  letter-spacing: -0.025em;
  max-width: 30ch;
}

.positioning__stance {
  margin-top: clamp(36px, 5vw, 64px);
  padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--line-on-dark);
}

.positioning__stance h2 {
  font-weight: 500;
  font-size: clamp(17px, 1.8vw, 22px);
  letter-spacing: -0.02em;
  color: #fff;
}

.positioning__stance p {
  margin-top: 12px;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.55;
  color: var(--ink-on-dark);
  font-weight: 300;
}

/* ==========================================================================
   Four building blocks
   ========================================================================== */

.blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(16px, 2vw, 22px);
  margin-top: clamp(32px, 4vw, 52px);
}

.block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent, var(--neutral));
  border-radius: var(--r);
  padding: clamp(24px, 2.6vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.block--maker  { --accent: var(--maker); }
.block--linker { --accent: var(--linker); }

.block__mark { height: 30px; display: flex; align-items: center; }
.block__mark img { height: 28px; width: auto; }
.block__mark h3 { font-weight: 600; font-size: 18px; letter-spacing: -0.02em; }

.block__value {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.block__desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--body);
  font-weight: 300;
}

.block__foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.block__figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 14px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.figure__value {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.figure__label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  font-weight: 300;
}

.block__note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.logo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  padding: 0;
  list-style: none;
}

.logo-tile {
  height: 38px;
  padding-inline: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
}

.logo-tile img { max-height: 24px; max-width: 96px; width: auto; }

.logo-tile--more {
  padding-inline: 14px;
  border: 1px dashed rgba(53, 50, 46, 0.2);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--label);
}

/* ==========================================================================
   In detail — tabs
   ========================================================================== */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(24px, 3vw, 36px);
}

.tab {
  font: inherit;
  font-size: 14.5px;
  font-weight: 400;
  cursor: pointer;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-4);
  background: transparent;
  color: var(--muted);
  transition: all .18s ease;
}

.tab:hover { border-color: var(--ink); color: var(--ink); }

.tab[aria-selected="true"] {
  background: var(--dark);
  color: var(--ink-on-dark);
  font-weight: 500;
  border-color: transparent;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3.5vw, 48px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(24px, 4vw, 56px);
}

.panel[hidden] { display: none; }

.panel__mark { height: 30px; display: flex; align-items: center; margin-bottom: 16px; }
.panel__mark img { height: 26px; width: auto; }

.panel__title {
  font-weight: 400;
  font-size: clamp(21px, 2.4vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
  max-width: 24ch;
}

.panel__audience {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  align-items: center;
  padding: 0;
  list-style: none;
}

.panel__audience .label-mono { font-size: 10.5px; }

.chip {
  font-size: 12.5px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--bg-alt);
  color: var(--muted);
}

.chip--feature { padding: 7px 12px; color: var(--body-alt); }

.panel__lede {
  font-size: 16px;
  line-height: 1.65;
  color: var(--body);
  font-weight: 300;
}

.panel__facts {
  display: flex;
  flex-wrap: wrap;
  /* Le gap vertical est plus serre : entre deux lignes de chips, 22px
     creusaient un ecart sans rapport avec leur taille. */
  gap: 12px 22px;
  align-items: center;
  margin: 26px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--line-2);
  list-style: none;
}

.panel__facts .figure__value { font-size: 26px; letter-spacing: -0.025em; }
.panel__facts .figure__label { font-size: 12.5px; max-width: 16ch; }

.standards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.standards img { width: auto; }
.standards__oidc  { height: 42px; }
.standards__eidas { height: 38px; }
.panel__side { display: flex; flex-direction: column; gap: 18px; }

.point {
  padding-left: 16px;
  border-left: 2px solid var(--line-3);
}

.point__h { font-weight: 500; font-size: 15.5px; margin-bottom: 6px; }
.point p { font-size: 15px; line-height: 1.65; color: var(--body); font-weight: 300; }

.panel__highlight {
  margin-top: auto;
  padding: 16px;
  border-radius: var(--r);
  background: var(--highlight);
}

.panel__highlight p {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 400;
}

/* ==========================================================================
   Supporters marquee
   ========================================================================== */

.supporters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

.supporters__intro p {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  font-weight: 300;
  max-width: 30ch;
}

.marquee {
  grid-column: span 2;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

@media (max-width: 700px) {
  .marquee { grid-column: span 1; }
}

.marquee__track {
  display: flex;
  gap: 14px;
  width: max-content;
  padding: 0;
  margin: 0;
  list-style: none;
  animation: fc-marquee 34s linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__item {
  flex: 0 0 auto;
  height: 96px;
  padding-inline: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
}

.marquee__item img { max-height: 66px; max-width: 200px; width: auto; }

@keyframes fc-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==========================================================================
   Footer / contact
   ========================================================================== */

.site-footer {
  padding: clamp(64px, 9vw, 130px) var(--pad-x) clamp(40px, 5vw, 64px);
  background: var(--dark);
  color: var(--ink-on-dark);
}

.site-footer__statement {
  font-weight: 300;
  font-size: clamp(21px, 2.8vw, 36px);
  line-height: 1.25;
  letter-spacing: -0.025em;
  max-width: 34ch;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: clamp(28px, 3.5vw, 44px);
  border-top: 1px solid var(--line-on-dark);
}

.contact { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

.contact .label-mono { color: rgba(247, 246, 243, 0.55); }

.contact__invite {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(247, 246, 243, 0.85);
  font-weight: 300;
  max-width: 34ch;
}

.contact__mail {
  font-size: 16px;
  color: var(--ink-on-dark);
  font-weight: 400;
  margin-top: 6px;
}

.contact__mail:hover { color: rgba(247, 246, 243, 0.65); }

.contact__site { font-size: 15px; color: rgba(247, 246, 243, 0.7); font-weight: 300; }
.contact__site:hover { color: var(--ink-on-dark); }

.contact .btn--outline-light { margin-top: 8px; }

/* Form */

.form { display: flex; flex-direction: column; gap: 12px; position: relative; }

.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 12px;
}

.form input,
.form select,
.form textarea {
  font: inherit;
  font-size: 15px;
  font-weight: 300;
  padding: 12px 14px;
  border-radius: var(--r-input);
  border: 1px solid rgba(247, 246, 243, 0.25);
  background: rgba(247, 246, 243, 0.06);
  color: var(--ink-on-dark);
  width: 100%;
}

.form textarea { resize: vertical; }

.form input::placeholder,
.form textarea::placeholder { color: rgba(247, 246, 243, 0.55); }

.form input:focus,
.form select:focus,
.form textarea:focus { border-color: rgba(247, 246, 243, 0.6); }

.form select option { color: var(--ink); background: var(--highlight); }

.form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  min-width: 0;
}

.form__error {
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 300;
  color: var(--warning);
}

.form [aria-invalid="true"] { border-color: var(--warning); }

.form button[disabled] { opacity: 0.6; cursor: progress; }

/* Mention d'information RGPD : le traitement repose sur la demande elle-meme,
   pas sur une case a cocher — rien a valider ici, seulement a lire. */
.form__notice {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 300;
  color: rgba(247, 246, 243, 0.75);
}

.form__notice a { color: var(--ink-on-dark); text-decoration: underline; text-underline-offset: 3px; }

/* Honeypot: off-screen, never announced, never tabbable */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__submit {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.form__status { font-size: 14px; font-weight: 300; }
.form__status--ok    { color: var(--success); }
.form__status--error { color: var(--warning); }

.site-footer__bottom {
  margin-top: clamp(28px, 3.5vw, 44px);
  padding-top: 20px;
  border-top: 1px solid rgba(247, 246, 243, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(247, 246, 243, 0.4);
  font-weight: 300;
}

.site-footer__bottom a { color: rgba(247, 246, 243, 0.7); }
.site-footer__bottom a:hover { color: var(--ink-on-dark); }

/* ==========================================================================
   Legal page
   ========================================================================== */

.legal-header__back { font-size: 14px; color: var(--muted); }

.legal {
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 48px) clamp(64px, 8vw, 120px);
}

.legal .eyebrow { font-size: 11px; }

.legal__title {
  font-weight: 400;
  font-size: clamp(28px, 4.4vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin-bottom: clamp(32px, 4vw, 52px);
}

.legal section { margin-bottom: clamp(32px, 4vw, 48px); }
.legal section:last-child { margin-bottom: 0; }

.legal h2 {
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.legal p {
  font-size: 15px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--body-alt);
}

.legal p + p { margin-top: 12px; }

.legal a { text-decoration: underline; text-underline-offset: 3px; }

.legal__identity {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 0 32px;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--body-alt);
  margin: 0;
}

.legal__identity > div { margin-bottom: 8px; }
.legal__identity dt { color: var(--label); }
.legal__identity dd { margin: 0; }

.legal-footer {
  padding: 28px var(--pad-x);
  background: var(--dark);
  color: rgba(247, 246, 243, 0.6);
  font-size: 13px;
  font-weight: 300;
}

.legal-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
}

.legal-footer a { color: rgba(247, 246, 243, 0.8); }
.legal-footer a:hover { color: var(--ink-on-dark); }

/* ==========================================================================
   Motion & print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track { animation: none; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .site-header, .marquee, .form, .skip-link { display: none; }
  body { background: #fff; }
  .section--dark, .site-footer, .diagram__base { background: #fff; color: #000; }
  .logo--inverted { filter: none; }
}