/* ==========================================================================
   carry-on.fr — feuille de style publique
   Direction artistique « La ligne claire » (_design/CHARTE.md, _design/MAQUETTE.html)
   --------------------------------------------------------------------------
   TROIS RÈGLES QUI NE SE NÉGOCIENT PAS

   1. AUCUNE couleur littérale hors du bloc :root ci-dessous. Quatre variables
      seulement sont pilotées par les réglages du back-office et injectées par
      templates/layout.php (--ink, --paper, --accent, --accent-2). Toutes les
      autres nuances en sont DÉRIVÉES avec color-mix(), selon les formules
      publiées dans CHARTE.md §2 et mesurées par _design/verif-contrastes.js.
      Seuls le blanc et le noir servent d'ANCRES de mélange (la charte les
      nomme explicitement : accent 62 % + noir, champ de formulaire blanc).
      Changer les 4 réglages suffit à rhabiller le site : aucun PHP à toucher.

   2. Sélecteurs par CLASSE, jamais « .machin span ». L'édition en place
      enveloppe chaque texte administrable dans <span class="pe">…</span> :
      un sélecteur de balise descendante attraperait cette enveloppe et
      déteindrait sur des textes voisins dès qu'un admin est connecté.
      Les seules balises visées en descendant sont <em> (le mot en accent des
      titres, réellement présent dans le texte éditable) et <a> (liens des
      mentions légales / du bandeau RGPD), toutes deux voulues.

   3. Aucune hauteur fixe sur un bloc de texte, aucune troncature, tout en
      clamp() : le site est trilingue (FR/ES 15 à 25 % plus longs que l'EN)
      et le client édite ses textes lui-même (CHARTE.md §8).

   L'idée tenue partout : une ligne entre nouée, ressort droite.
   Elle est le logo, le motif du hero, le rail qui numérote les sections,
   et la ligne brisée de la 404.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Polices auto-hébergées — aucune requête externe, aucun CDN, aucun cookie.
   C'est un argument commercial du site (posture sécurité / RGPD), pas un détail.
   Les replis système sont réels : la page tient debout sans les fichiers.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo.woff2") format("woff2");
  font-weight: 400 800;           /* fichier variable : graisses 400 à 800 (MESURÉ : l'axe répond) */
  font-stretch: 100%;             /* le fichier livré N'A PAS d'axe de chasse — voir plus bas */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Pilotées par les réglages du back-office ------------------------
     Valeurs de repli seulement : templates/layout.php réinjecte un :root
     après cette feuille, avec couleur_ink / couleur_paper / couleur_accent /
     couleur_accent_2. Les dérivées ci-dessous suivent automatiquement. ---- */
  --ink: #0E141B;        /* encre    — fond sombre, texte sur papier            */
  --paper: #F4F1EA;      /* papier   — fond clair, texte sur encre              */
  --accent: #FA4A00;     /* orange   — la ligne résolue, marqueurs, CTA         */
  --accent-2: #8FA3BF;   /* acier    — méta, graduations, index sur fond sombre */

  /* ---- Ancres de mélange (CHARTE.md §2 : « accent 62 % + noir », champ blanc) ---- */
  --white: #fff;
  --black: #000;

  /* ---- Dérivées : ne jamais écrire de couleur littérale en dessous ---- */
  --accent-ink:   color-mix(in srgb, var(--accent) 62%, var(--black));   /* liens/labels sur papier  */
  --accent-deep:  color-mix(in srgb, var(--accent) 82%, var(--black));   /* display orangé sur papier */
  --steel-ink:    color-mix(in srgb, var(--accent-2) 42%, var(--ink));   /* méta et index sur papier  */
  --muted-dark:   color-mix(in srgb, var(--paper) 72%, var(--ink));      /* texte 2nd sur encre       */
  --muted-light:  color-mix(in srgb, var(--ink) 72%, var(--paper));      /* texte 2nd sur papier      */
  --ink-2:        color-mix(in srgb, var(--paper) 6%, var(--ink));       /* plaques sur fond sombre   */
  --line-dark:    color-mix(in srgb, var(--paper) 16%, transparent);     /* filets sur encre          */
  --line-light:   color-mix(in srgb, var(--ink) 18%, transparent);       /* filets sur papier         */
  --line-accent:  color-mix(in srgb, var(--ink) 34%, transparent);       /* filets sur aplat orange   */
  --plate-light:  color-mix(in srgb, var(--paper) 55%, var(--white));    /* plaques sur papier        */
  --grid-dark:    color-mix(in srgb, var(--paper) 4%, transparent);      /* quadrillage du hero       */

  --font-sans: "Archivo", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --max: 1280px;
  --gut: clamp(20px, 4vw, 56px);
  --rail: clamp(0px, 6vw, 96px);   /* colonne du rail, à gauche du contenu */
  --scroll-progress: 0;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Décalage des ancres sous l'en-tête collant. Sa hauteur N'EST PAS constante : la
     navigation passe sur deux ou trois lignes selon la largeur ET selon la longueur des
     libellés (FR/ES 15 à 25 % plus longs). Mesuré : 79 px à 1440, 122 px à 900, 146 px à
     390, 221 px à 320. app.js publie donc la hauteur réelle dans --header-h ; la valeur
     de repli ci-dessous ne sert qu'aux visiteurs sans JavaScript. */
  scroll-padding-top: calc(var(--header-h, 78px) + 14px);
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--ink); }

/* Enveloppe d'édition en place : strictement transparente pour la mise en page. */
.pe { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; }

/* Seule classe conservée par sanitize_fragment() sur un <span> éditable (PE_CLASSES_OK).
   Sur papier, l'orange brut n'écrit pas de petit texte (ratio 3.08) : on passe en accent-ink. */
.accent { color: var(--accent); font-style: normal; }
.light .accent, .accent-bg .accent { color: var(--accent-ink); }

/* Flèches et repères décoratifs : ils appartiennent au GABARIT, jamais au texte
   éditable (aria-hidden n'est pas en liste blanche : le <span> serait déballé
   au premier enregistrement et la flèche resterait lue par les lecteurs d'écran). */
.arrow { display: inline-block; margin-left: .5em; }

/* --------------------------------------------------------------------------
   Accessibilité
   -------------------------------------------------------------------------- */

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  padding: 12px 18px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-300%);
}
.skip-link:focus { transform: none; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.light a:focus-visible,
.light button:focus-visible,
.light input:focus-visible,
.light textarea:focus-visible { outline-color: var(--accent-ink); }

.accent-bg a:focus-visible,
.accent-bg button:focus-visible,
.accent-bg input:focus-visible,
.accent-bg textarea:focus-visible { outline-color: var(--ink); }

/* Barre de progression de lecture : un filet, pas un effet. */
.page-progress {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: calc(var(--scroll-progress) * 100%);
  height: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity .25s ease;
}
.page-progress[data-active="true"] { opacity: 1; }

/* --------------------------------------------------------------------------
   Vocabulaire commun : conteneur, rail, index de section, titres, boutons
   -------------------------------------------------------------------------- */

.wrap { width: min(100% - 2 * var(--gut), var(--max)); margin-inline: auto; }

.mono {
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Le rail — la ligne verticale qui relie les sections. Chaque section y
   accroche un nœud et son index : la page se lit comme une ligne de métro. */
.sec { position: relative; }
.sec > .wrap { position: relative; padding-left: var(--rail); }
.sec > .wrap::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line-dark);
}
.sec.light > .wrap::before { background: var(--line-light); }
.sec.accent-bg > .wrap::before { background: var(--line-accent); }

.sec-index {
  position: relative;
  margin: 0 0 clamp(28px, 4vw, 52px);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 600;   /* la voix mono la plus haute de la page : le nom de la station */
  letter-spacing: .14em;
  text-transform: uppercase;
}
.light .sec-index { color: var(--accent-ink); }
.accent-bg .sec-index { color: var(--ink); }
.sec-index::before {                       /* le nœud posé sur le rail */
  content: "";
  position: absolute;
  left: calc(-1 * var(--rail) - 4.5px);
  top: .2em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}
.accent-bg .sec-index::before { background: var(--ink); }

.pad { padding-block: clamp(72px, 9vw, 140px); }
.light { background: var(--paper); color: var(--ink); }
.accent-bg { background: var(--accent); color: var(--ink); }

/* font-stretch: 112% — la charte demande la voix « plaque signalétique » (§3) « quand la
   variable est disponible ». MESURÉ sur le fichier livré : « Engineering for systems » à
   100 px fait 1195 px en 780/100 % ET en 780/112 % — l'axe de chasse (wdth) est ABSENT de
   ce woff2, la déclaration ne fait donc rien aujourd'hui. On la conserve : le jour où un
   fichier portant l'axe wdth est déposé au même emplacement, les titres l'utilisent sans
   qu'une ligne de CSS bouge. Aucune mise en page n'en dépend (tout est en clamp). */
h1, h2, h3 { margin: 0; font-family: var(--font-sans); font-stretch: 112%; }
h1 { font-size: clamp(2.5rem, 6vw, 5.1rem); line-height: 1.02; letter-spacing: -.02em; font-weight: 780; }
h2 { font-size: clamp(1.95rem, 4vw, 3.4rem); line-height: 1.05; letter-spacing: -.018em; font-weight: 760; }
h3 { font-size: clamp(1.25rem, 2vw, 1.65rem); line-height: 1.2; letter-spacing: -.01em; font-weight: 680; }
@supports (text-wrap: balance) {
  h1, h2, h3, blockquote { text-wrap: balance; }
}

/* Boutons : min-height + padding, JAMAIS de largeur fixe (textes élastiques). */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 54px;
  padding: 10px 26px;
  border: 1px solid transparent;
  border-radius: 0;                 /* angles vifs : rayon 0 partout */
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn .arrow { margin-left: 0; }
.btn-primary { background: var(--accent); color: var(--ink); }   /* encre sur orange : 5.33 */
.btn-primary:hover { background: var(--paper); color: var(--ink); }
.btn-ghost { border-color: var(--line-dark); color: var(--paper); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.light .btn-ghost { border-color: var(--line-light); color: var(--ink); }
.light .btn-ghost:hover { border-color: var(--accent-ink); color: var(--accent-ink); }

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  border-bottom: 1px solid var(--line-dark);
  background: color-mix(in srgb, var(--ink) 90%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.site-header > .wrap {
  min-height: 96px;                 /* min-height, pas height : la nav peut passer sur 2 lignes.
                                       96 px, comme le site d origine : c est ce qu il faut pour
                                       que le logo tienne a sa taille de reference (184 x 79). */
  padding-block: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(14px, 3vw, 40px);
}

.brand { display: flex; align-items: center; margin-right: auto; text-decoration: none; }
.brand img {
  display: block;
  /* Dimensionne par la LARGEUR, comme sur le site d origine. Le logo est bien
     plus large que haut (535 x 230, rapport 2,33:1) : le contraindre par la
     hauteur le rendait a 70 px de large, contre 184 px avant. */
  width: clamp(140px, 13vw, 184px);
  height: auto;
}

.main-nav { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(14px, 2.4vw, 30px); }
.main-nav a {
  position: relative;
  padding-bottom: 4px;
  color: var(--muted-dark);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
}
/* Cible tactile : le lien fait ~20 px de haut, la zone cliquable doit en faire ≥ 44.
   On l'agrandit avec un pseudo-élément INVISIBLE plutôt qu'en gonflant le lien —
   l'aspect de la barre reste celui de la maquette. L'écart horizontal (14 px minimum
   entre deux liens) est plus grand que le débord (4 px de chaque côté) : pas de
   chevauchement possible entre deux cibles voisines. */
.main-nav a::before {
  content: "";
  position: absolute;
  inset: -12px -4px;
}
.main-nav a::after {                /* soulignement qui s'étend — 200 ms, pas plus */
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.main-nav a:hover { color: var(--paper); }
.main-nav a:hover::after { transform: none; }

/* Sélecteur de langue (en-tête et pied de page). */
.lang { display: flex; align-items: center; gap: 2px; }
.lang a {
  position: relative;
  padding: 6px 8px;
  color: var(--muted-dark);
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-decoration: none;
}
.lang a::before {                   /* cible tactile ≥ 44 px, sans grossir la pastille */
  content: "";
  position: absolute;
  inset: -9px -1px;
}
.lang a:hover { color: var(--paper); }
.lang a.active { background: var(--paper); color: var(--ink); }
.lang .sep { display: none; }       /* la pastille active suffit à séparer */

.header-cta { min-height: 44px; padding: 8px 18px; }

/* --------------------------------------------------------------------------
   Hero — la ligne signature
   -------------------------------------------------------------------------- */

.hero { overflow: hidden; }
.hero::before {                     /* quadrillage 56 px, masqué en fondu haut/bas */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-dark) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, var(--black) 15%, var(--black) 72%, transparent);
  mask-image: linear-gradient(to bottom, transparent, var(--black) 15%, var(--black) 72%, transparent);
}
.hero > .wrap { padding-block: clamp(56px, 8vw, 120px) 0; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, .9fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
}
.hero h1 { max-width: 21ch; }
.hero h1 em { font-style: normal; color: var(--accent); }   /* le mot en accent, dans le texte éditable */
.hero-intro {
  max-width: 58ch;
  margin: 30px 0 0;
  color: var(--muted-dark);
  font-size: clamp(1.02rem, 1.25vw, 1.22rem);
}
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-top: 38px; }

/* La plaque de relevé : coordonnées et mode de livraison, comme une étiquette d'essai. */
.plate {
  position: relative;
  margin-top: 6px;
  padding: clamp(22px, 2.6vw, 34px);
  display: grid;
  gap: 20px;
  border: 1px solid var(--line-dark);
  background: var(--ink-2);
}
.corner {                            /* repères de visée aux quatre angles — pur décor */
  position: absolute;
  color: var(--accent-2);
  font-family: var(--font-mono);
  font-size: .8rem;
  line-height: 1;
}
.corner-tl { top: 6px; left: 8px; }
.corner-tr { top: 6px; right: 8px; }
.corner-bl { bottom: 6px; left: 8px; }
.corner-br { bottom: 6px; right: 8px; }

/* Le symbole de la marque, posé en haut de la plaque comme le tampon d'un relevé.
   Taille en px et non en % : l'emplacement est administrable, le fichier peut changer. */
.plate-mark { display: block; width: 40px; height: 40px; margin-bottom: -4px; }

.plate-label {
  margin: 0;
  font-size: clamp(1.4rem, 1.9vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  font-weight: 720;
  font-stretch: 112%;
}
.plate-ref {
  margin: 0;
  color: var(--accent-2);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .1em;
}
.plate-row {
  margin: 0;
  padding-top: 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  align-items: baseline;
  border-top: 1px solid var(--line-dark);
}
.plate-dt, .plate-dd {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.plate-dt { color: var(--accent-2); }
.plate-dd { margin: 0; color: var(--paper); text-align: right; }
.plate-status { display: inline-flex; align-items: center; gap: 8px; }
.plate-status::before {              /* le nœud « en service » — pseudo-élément : aucun
                                        élément décoratif ne cohabite avec le texte éditable */
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

/* La ligne : elle entre emmêlée (acier), ressort droite (orange), et se fait
   graduer comme une ligne de cote. C'est la marque en mouvement. */
.throughline { display: block; width: 100%; margin-top: clamp(34px, 5vw, 64px); }
.throughline .tangle,
.throughline .clearline { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3.4; }
.throughline .tangle { stroke: var(--accent-2); }
.throughline .clearline { stroke: var(--accent); }
.throughline .tick { fill: none; stroke: var(--accent); stroke-width: 2; opacity: .55; }
.throughline .node { fill: var(--accent); }

.js .throughline .tangle {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: nl-draw .7s cubic-bezier(.3, .6, .35, 1) .15s forwards;
}
.js .throughline .clearline {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: nl-draw .8s cubic-bezier(.25, .6, .3, 1) .78s forwards;
}
.js .throughline .node { opacity: 0; animation: nl-appear .4s ease 1.5s forwards; }
.js .throughline .tick { opacity: 0; animation: nl-appear-tick .4s ease 1.5s forwards; }
/* Le hero n'est pas toujours à l'écran au chargement (arrivée directe sur /en/#contact) :
   app.js pose data-attente le temps que la ligne entre dans le champ de vision, pour que
   l'animation signature ne se joue pas dans le vide. */
.js .throughline[data-attente] .tangle,
.js .throughline[data-attente] .clearline,
.js .throughline[data-attente] .tick,
.js .throughline[data-attente] .node { animation-play-state: paused; }

@keyframes nl-draw { to { stroke-dashoffset: 0; } }
@keyframes nl-appear { to { opacity: 1; } }
@keyframes nl-appear-tick { to { opacity: .55; } }

/* --------------------------------------------------------------------------
   Bandeau de réassurance (collection « proof »)
   -------------------------------------------------------------------------- */

.proof > .wrap { padding-block: clamp(40px, 5vw, 64px); }
.proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));   /* un 4e élément ne casse rien */
  gap: clamp(20px, 3vw, 40px);
}
.proof-item { padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid var(--line-dark); }
.proof-key {
  display: block;
  font-size: clamp(2.1rem, 3.6vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.02em;
  font-weight: 780;
  font-stretch: 112%;
}
.proof-key::first-letter { color: var(--accent); }
.proof-line { margin: 12px 0 0; color: var(--muted-dark); font-size: .92rem; line-height: 1.5; }
.proof-meta { display: block; margin-top: 10px; color: var(--accent-2); }

/* --------------------------------------------------------------------------
   Chapeau de section (titre + chapô)
   -------------------------------------------------------------------------- */

.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
}
.sec-chapo { margin: 0; max-width: 46ch; color: var(--muted-light); }
.dark .sec-chapo { color: var(--muted-dark); }

/* --------------------------------------------------------------------------
   Capabilities (collection « capability ») — un relevé, une ligne par expertise
   -------------------------------------------------------------------------- */

.cap-list { margin-top: clamp(44px, 6vw, 84px); border-top: 1px solid var(--line-light); }
.cap {
  display: grid;
  /* 4e colonne à 220 px : « ASSESS · DESIGN · MIGRATE » y tient sur une ligne en EN.
     En FR et en ES la méta pourra passer sur deux lignes — c'est prévu, rien ne dépend
     de sa hauteur (align-items: start, aucune hauteur fixe). */
  grid-template-columns: 64px minmax(0, .9fr) minmax(0, 1.1fr) 220px;
  gap: clamp(16px, 2.6vw, 44px);
  align-items: start;
  padding-block: clamp(28px, 3.4vw, 46px);
  border-bottom: 1px solid var(--line-light);
}
.cap-num {
  margin: 4px 0 0;
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .1em;
}
.cap-text { margin: 0; max-width: 54ch; color: var(--muted-light); }
.cap-meta { margin: 6px 0 0; color: var(--steel-ink); }

/* --------------------------------------------------------------------------
   Manifeste
   -------------------------------------------------------------------------- */

.manifesto > .wrap { padding-block: clamp(80px, 10vw, 150px); }
.quote-rule { display: block; width: 84px; height: 3px; margin-bottom: 34px; background: var(--accent); }
.manifesto blockquote {
  margin: 0;
  max-width: 26ch;
  font-size: clamp(1.9rem, 4.4vw, 3.9rem);
  line-height: 1.14;
  letter-spacing: -.018em;
  font-weight: 720;
  font-stretch: 112%;
}
.manifesto blockquote em { font-style: normal; color: var(--accent); }

/* --------------------------------------------------------------------------
   Approche (collection « step ») — trois plaques numérotées
   -------------------------------------------------------------------------- */

.steps {
  margin: clamp(44px, 6vw, 84px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));   /* une 4e étape ne casse rien */
  gap: clamp(14px, 1.8vw, 24px);
  list-style: none;
}
.step {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 240px;               /* min-height seulement : jamais height */
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--line-light);
  border-top: 3px solid var(--accent);
  background: var(--plate-light);
}
.step-num { color: var(--accent-ink); }
.step h3 { margin-top: auto; }
.step-text { margin: 0; color: var(--muted-light); }
.step-meta { margin: 0; color: var(--steel-ink); }

/* --------------------------------------------------------------------------
   CIR — le tampon
   -------------------------------------------------------------------------- */

.cir-grid {
  display: grid;
  grid-template-columns: minmax(240px, .62fr) minmax(0, 1.38fr);
  gap: clamp(36px, 6vw, 100px);
  align-items: center;
}
.stamp {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1;
  padding: 10%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  border: 1.5px solid var(--paper);
}
.stamp::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid var(--line-dark);
  pointer-events: none;
}
.stamp-pays { margin: 0; color: var(--accent); }
.stamp-sigle {
  display: block;
  font-size: clamp(3.6rem, 8vw, 6.6rem);
  line-height: .95;
  letter-spacing: -.02em;
  font-weight: 800;
  font-stretch: 112%;
}
.stamp-mention {
  margin: 0;
  color: var(--muted-dark);
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.cir-copy h2 { margin-top: 22px; max-width: 20ch; }
.cir-texte { max-width: 62ch; margin: 26px 0 0; color: var(--muted-dark); }
.fine-print { margin: 20px 0 0; color: var(--accent-2); font-size: .78rem; line-height: 1.6; }

/* --------------------------------------------------------------------------
   Contact — l'unique aplat massif d'accent, le final
   -------------------------------------------------------------------------- */

/* Le titre final. Volontairement PLUS PETIT que dans la maquette d'atelier : la colonne
   de gauche fait ~530 px sur un écran de 1440, et « Let's make it » composé à 99 px y
   partait en trois lignes avec un « it » orphelin. La charte interdit tout effet qui
   dépend d'une longueur de titre précise : on dimensionne pour que la phrase tienne,
   y compris en FR et en ES (15 à 25 % plus longs). */
.contact h2 { font-size: clamp(2.3rem, 4.6vw, 4.4rem); max-width: 16ch; }
.contact h2 em { font-style: normal; color: var(--paper); }
.contact-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}
.contact-direct { max-width: 38ch; margin: 30px 0 0; font-size: .95rem; }
.contact-direct a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* La plaque du formulaire : papier sur orange, filet encre, ombre DURE décalée.
   Jamais d'ombre portée molle — la charte est à aplats et à traits. */
.form-plate {
  padding: clamp(22px, 3vw, 38px);
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.f-full { grid-column: 1 / -1; }
.f-field { display: flex; flex-direction: column; gap: 7px; }
.f-label {
  color: var(--steel-ink);
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.f-field input,
.f-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line-light);
  border-radius: 2px;              /* 2 px : la seule tolérance de la charte */
  background: var(--white);        /* encre sur champ blanc : 18.51 */
  color: var(--ink);
  font: inherit;
}
.f-field textarea { min-height: 150px; resize: vertical; }
.f-field input:focus,
.f-field textarea:focus { border-color: var(--ink); outline: 2px solid var(--accent-ink); outline-offset: 1px; }
/* Erreur : signalée par TEXTE + BORDURE, jamais par la couleur seule. */
.f-field input[aria-invalid="true"],
.f-field textarea[aria-invalid="true"] { border-width: 2px; border-color: var(--accent-ink); }
.f-err { color: var(--accent-ink); font-size: .8rem; font-weight: 600; line-height: 1.45; }

.f-flash {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-left: 3px solid var(--ink);
  background: var(--plate-light);
  font-size: .92rem;
  line-height: 1.6;
}
.f-ok { border-left-color: var(--accent-ink); }
.f-ko { border-left-color: var(--ink); font-weight: 600; }
/* app.js donne le focus à ce message après un envoi (tabindex="-1") pour que les
   lecteurs d'écran et le clavier y atterrissent. Sans cette règle, c'est le liseré
   par défaut du navigateur qui s'affiche — hors charte. */
.f-flash:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.f-flash:focus:not(:focus-visible) { outline: none; }

.form-rgpd { margin: 16px 0 0; color: var(--muted-light); font-size: .78rem; line-height: 1.6; }
.form-rgpd a { color: var(--accent-ink); }
.form-actions { margin-top: 20px; display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.btn-submit { border: 0; background: var(--ink); color: var(--paper); }
.btn-submit:hover { background: var(--accent-ink); color: var(--paper); }

/* Piège à robots : invisible à l'écran ET aux lecteurs d'écran, hors tabulation. */
.f-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/* --------------------------------------------------------------------------
   Pages documentaires (mentions légales, confidentialité) et 404
   -------------------------------------------------------------------------- */

.doc > .wrap { padding-block: clamp(64px, 8vw, 120px); }
.doc-head h1 { max-width: 22ch; }
.doc-intro { max-width: 62ch; margin: 26px 0 0; color: var(--muted-light); }
.dark .doc-intro { color: var(--muted-dark); }
/* Un document se lit en colonne étroite : sans plafond, les filets de séparation
   traverseraient les 1280 px du conteneur pour des paragraphes de 68 caractères. */
.doc-body { margin-top: clamp(40px, 5vw, 72px); max-width: 78ch; }
.doc-bloc { padding-block: clamp(24px, 3vw, 34px); border-top: 1px solid var(--line-light); }
.doc-bloc h2 { font-size: clamp(1.2rem, 2vw, 1.7rem); font-weight: 680; letter-spacing: -.01em; }
.doc-texte { margin: 14px 0 0; max-width: 68ch; color: var(--muted-light); }
.doc-bloc a { color: var(--accent-ink); }
.doc-id {
  margin: 16px 0 22px;
  display: grid;
  grid-template-columns: minmax(140px, .32fr) 1fr;
  gap: 10px 24px;
  align-items: baseline;
}
.doc-dt { color: var(--steel-ink); font-family: var(--font-mono); font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.doc-dd { margin: 0; }
.doc-suite { margin: 40px 0 0; }
.doc-suite a {
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
}
.doc-suite a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* 404 : la ligne s'arrête net. */
.doc-404 > .wrap { padding-block: clamp(72px, 10vw, 150px); }
.doc-actions { margin: 40px 0 0; }
.brokenline { display: block; width: 100%; margin-top: clamp(40px, 6vw, 72px); }
.brokenline .clearline { fill: none; stroke: var(--accent); stroke-width: 3.4; stroke-linecap: round; }
.brokenline .stub { fill: none; stroke: var(--accent-2); stroke-width: 3.4; stroke-linecap: round; opacity: .45; }
.brokenline .cut { fill: none; stroke: var(--accent); stroke-width: 2; }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.site-footer { border-top: 1px solid var(--line-dark); }
.site-footer > .wrap {
  padding-block: clamp(44px, 6vw, 70px);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 48px);
  align-items: end;
}
/* Meme correction qu en en-tete : le pied de page rendait le logo a 60 px de
   large la ou le site d origine l affichait a 180 px. */
.footer-brand img { display: block; width: clamp(148px, 14vw, 180px); height: auto; }
.footer-baseline { max-width: 34ch; margin: 14px 0 0; color: var(--muted-dark); font-size: .82rem; line-height: 1.7; }
/* Liens empilés : padding vertical plutôt qu'un simple gap, pour que la cible tactile
   fasse ~30 px (WCAG 2.2 « Target Size (Minimum) » : 24 px) sans écarteler le pied de page. */
.footer-links { display: flex; flex-direction: column; margin: 0 0 16px; }
.footer-links a {
  padding-block: 6px;
  color: var(--muted-dark);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
}
.footer-links a:hover { color: var(--accent); }
.footer-legal-line { margin: 0; color: var(--muted-dark); font-size: .78rem; line-height: 1.7; }
.footer-end { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; text-align: right; }
.footer-top {
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
}
.footer-top:hover { color: var(--accent); }
.footer-copy { margin: 0; color: var(--muted-dark); font-size: .78rem; line-height: 1.7; }

/* --------------------------------------------------------------------------
   Révélations au défilement — sobres, une seule fois
   -------------------------------------------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2, .7, .3, 1);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Adaptatif
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .plate { max-width: 560px; }
  .sec-head { grid-template-columns: 1fr; align-items: start; }
  .cap { grid-template-columns: 56px minmax(0, 1fr); }
  .cap-num { grid-column: 1; grid-row: 1; }
  .cap-titre, .cap-text, .cap-meta { grid-column: 2; }
  .cir-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .site-footer > .wrap { grid-template-columns: 1fr 1fr; }
  .footer-end { align-items: flex-start; text-align: left; }
}

@media (max-width: 720px) {
  :root { --rail: 18px; }
  html { scroll-padding-top: calc(var(--header-h, 150px) + 14px); }
  .site-header > .wrap { gap: 12px 18px; }
  .main-nav { order: 3; width: 100%; padding-bottom: 4px; }
  .brand img { width: 132px; }
  .proof-grid { grid-template-columns: 1fr; gap: 26px; }
  .cap { grid-template-columns: 1fr; gap: 12px; }
  .cap-num, .cap-titre, .cap-text, .cap-meta { grid-column: auto; grid-row: auto; }
  .cap-meta { margin-top: 0; }
  .steps { grid-template-columns: 1fr; }
  .stamp { max-width: 300px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-plate { box-shadow: 4px 4px 0 var(--ink); }
  .doc-id { grid-template-columns: 1fr; gap: 4px 0; }
  .doc-dd { margin-bottom: 10px; }
  .site-footer > .wrap { grid-template-columns: 1fr; align-items: start; }
}

/* --------------------------------------------------------------------------
   Mouvement réduit : tout est coupé. Non négociable (CHARTE.md §6).
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .throughline .tangle,
  .js .throughline .clearline { stroke-dashoffset: 0; animation: none; }
  .js .throughline .tick { opacity: .55; animation: none; }
  .js .throughline .node { opacity: 1; animation: none; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   CARRY ON — complément de charte
   --------------------------------------------------------------------------
   Ajouté APRÈS le socle, jamais en le modifiant : à spécificité égale, la
   dernière règle gagne. On garde ainsi le socle intact et diffable.

   Ce que ce bloc apporte :
     1. la police de titre (Fraunces), auto-hébergée comme les autres ;
     2. le point de la ligne signature, qui doit être TRAVERSÉ, donc creux ;
     3. la section « La société » et son tableau de faits.
   ========================================================================== */

/* --- 1. Titres en Fraunces -------------------------------------------------
   Fichier VARIABLE (axes opsz 9-144 et wght 400-700), sous-ensemble latin.
   Le repli système est réel : la page tient debout sans le fichier. */
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-titre: "Fraunces", Georgia, "Times New Roman", serif;
}

/* font-stretch est REMIS À 100 % : le socle posait 112 % pour Archivo, qui a un
   axe de chasse. Fraunces n'en a pas — la valeur héritée serait ignorée par les
   navigateurs récents mais déclenche une synthèse sur certains anciens. */
h1, h2, h3,
.plate-label,
.cap-titre,
.fait-dd {
  font-family: var(--font-titre);
  font-stretch: 100%;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* --- 2. La ligne signature : le point est TRAVERSÉ ------------------------
   Le socle remplissait le nœud (fill) parce que sa ligne s'y arrêtait. Ici la
   ligne entre d'un côté et ressort de l'autre : le point doit être un cercle
   CREUX, comme dans le logo, sinon le trait paraît coupé en deux. */
.throughline .node {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.4;
}

/* --- 3. Section « La société » --------------------------------------------
   Deux colonnes sur large écran (le propos à gauche, les faits à droite),
   une seule colonne en dessous. Aucune hauteur fixe : les libellés sont
   éditables et peuvent s'allonger. */
.societe-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.societe-chapo {
  margin: 18px 0 0;
  max-width: 46ch;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.7;
  color: var(--paper);
}

/* Le tableau des faits. <dl> et non <table> : ce sont des paires
   libellé/valeur, pas des données croisées. */
.faits { margin: 0; }

.fait {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: 8px clamp(16px, 2.5vw, 34px);
  padding: 15px 0;
  border-top: 1px solid color-mix(in srgb, var(--paper) 16%, transparent);
}
.fait:first-child { border-top: 0; padding-top: 0; }
.fait:last-child  { padding-bottom: 0; }

.fait-dt {
  margin: 0;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-2);
  line-height: 1.5;
  padding-top: .25em;      /* aligne l'œil du libellé sur celui de la valeur */
}

.fait-dd {
  margin: 0;
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  line-height: 1.55;
  color: var(--paper);
}

@media (max-width: 860px) {
  .societe-grid { grid-template-columns: 1fr; }
  /* Les faits passent en deux lignes plutôt qu'en deux colonnes serrées :
     « Président et associé unique » ne tient pas sur 13 rem au téléphone. */
  .fait { grid-template-columns: 1fr; gap: 4px; }
  .fait-dt { padding-top: 0; }
}