/* ==========================================================================
   HELIOS ENGINEERING GROUP — Socle (tokens, reset, typographie, layout)
   --------------------------------------------------------------------------
   Porté depuis le prototype « Helios Engineering Template/assets/css/style.css »
   (ADR-0007 : réutilisation directe, pas de réécriture). Le bloc :root, le
   reset, les échelles typographiques et les primitives de layout sont repris
   VERBATIM. Le CSS spécifique à un gabarit est extrait à SON lot.
   Seul ajout : la règle :focus-visible (a11y, README §12 — absente du prototype).
   ========================================================================== */

/* -------------------------------------------------------------- tokens --- */
/* Repris tel quel du prototype (§4). --grey-soft (#F7F8F8) est un dérivé
   légitime de --grey, hors des 13 slugs de theme.json mais présent dans le
   prototype qui fait foi (checkpoint Lot 1). */
:root{
  --ink:#20272E;
  --ink-deep:#151A1F;
  --orange:#EA552B;
  --grey:#EDEDED;
  --grey-soft:#F7F8F8;
  --line:#E2E4E6;
  --line-soft:#DCDEE0;
  --muted:#6B7480;
  --muted-2:#8A939C;
  --muted-3:#8E979F;
  --light:#C3CAD1;
  --body:#4E5761;
  /* --------------------------------------------------- Lot 9, §4.3 ----
     `--secondaire` : LA couleur des textes secondaires (surtitres,
     métadonnées de carte, légendes, notes). Ce n'est pas un quatorzième
     ton — c'est un ALIAS qui pointe un des treize, et qui change de cible
     selon le fond, parce que le seuil AA, lui, dépend du fond.

     Mesuré (`scripts/contrastes.php`) :
       #8A939C sur blanc  = 3,12:1  →  sous AA, et c'est ce que le prototype
                                       met sur des métadonnées de 10,5px ;
       #6B7480 sur blanc  = 4,74:1  →  passe ;
       #6B7480 sur #EDEDED = 4,04:1 →  ne passe PAS : le même gris échoue
                                       dès qu'il tombe dans une section grise ;
       #4E5761 sur #EDEDED = 6,27:1 →  passe.

     D'où l'alias, et son basculement sous `.section--grey`. C'est le même
     arbitrage qu'au Lot 7 sur `.form__note` et qu'au Lot 4 sur les deux gris
     relevés : l'accessibilité l'emporte sur la lettre du prototype, qui n'est
     l'arbitre que de l'apparence (ADR-0006). Troisième fois, même réponse. */
  --secondaire:#6B7480;
  --mono:'IBM Plex Mono',monospace;
  --sans:'Montserrat',Helvetica,Arial,sans-serif;
  --pad:clamp(16px,4vw,56px);
  --hdr-h:clamp(74px,7vw,94px);
  --wrap:1440px;
}

/* --------------------------------------------------------------- reset --- */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:#fff;}
body{font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;text-wrap:pretty;}
img{border-style:none;}
a{color:var(--orange);text-decoration:none;transition:color .3s ease;}
a:hover{color:var(--ink);}
button{font-family:inherit;}

/* ---------------------------------------------------- focus visible (+) -- */
/* Ajout Lot 1 : le prototype ne définit pas de focus clavier. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}

/* -------------------------------------------------------------- layout --- */
.wrap{max-width:var(--wrap);margin:0 auto;}
.page{width:100%;overflow-x:clip;background:#fff;}
.section{padding:clamp(52px,7vw,104px) var(--pad);background:#fff;}
.section--grey{background:var(--grey);padding:clamp(44px,6vw,88px) var(--pad);--secondaire:var(--body);}
.section--dark{background:var(--ink);color:#fff;padding:clamp(52px,7vw,104px) var(--pad);}
.section--tight{padding:clamp(36px,5vw,64px) var(--pad) clamp(52px,7vw,96px);}
.section--flush-top{padding:0 var(--pad) clamp(52px,7vw,104px);}
.section--plain{background:#fff;}

/* ---------------------------------------------------------- typographie -- */
/* Système de titres/chapôs partagé par tous les gabarits (échelles clamp()
   conservées). Les composants propres à un gabarit restent à leur lot. */
.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.eyebrow__rule{width:44px;height:3px;background:var(--orange);display:block;flex-shrink:0;}
.eyebrow__label{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--orange);}
.eyebrow__label--light{color:var(--light);}
.eyebrow__label--muted{color:var(--secondaire);}
/* D18 SOLDÉE (Lot 7ter). `line-height:normal` est un PORT, pas un réglage :
   le prototype ne déclare aucun interligne, ni sur `body` ni sur `.kicker`, et
   rend donc 16px. Le thème, lui, pose `lineHeight: 1.75` dans `theme.json` — la
   bonne mesure pour un corps de page, héritée à tort par un surtitre de 12px,
   qui sortait à 21px. Cinq pixels de trop sur CHAQUE section à kicker, relevés
   au Lot 7bis sur « À propos » et reportés faute de pouvoir re-superposer tout
   le site. Ce lot le fait : les treize écrans sont re-mesurés à 1440 et à 390
   après ce changement (note de livraison §6). */
.kicker{font-family:var(--mono);font-size:12px;line-height:normal;letter-spacing:.24em;text-transform:uppercase;color:var(--secondaire);margin-bottom:12px;}
.kicker--orange{color:var(--orange);}
.kicker--dark{color:var(--muted-3);}

.h2{margin:0;font-size:clamp(26px,3.2vw,42px);font-weight:800;line-height:1.08;letter-spacing:-.018em;}
.h2--sm{font-size:clamp(24px,2.8vw,36px);letter-spacing:-.015em;}
.h3{margin:0 0 20px;font-size:22px;font-weight:800;letter-spacing:-.01em;}
.lead-body{display:grid;gap:20px;font-size:16.5px;line-height:1.75;color:var(--body);}
.lead-body p{margin:0;}
.prose{margin:0 0 18px;font-size:16.5px;line-height:1.75;color:var(--body);}
.prose:last-child{margin-bottom:0;}

/* ------------------------------------------------------------ boutons --- */
/* Ajout Lot 4 : la spec du lot suppose `.btn` déjà présent en base (§3.6),
   il ne l'était pas — le Lot 2 n'en avait pas eu besoin. Porté VERBATIM du
   prototype (style.css 77-92), ici et pas dans une feuille de bloc : huit des
   quatorze blocs s'en servent, et le dupliquer serait un défaut de revue. */
.btn{display:inline-flex;align-items:center;height:56px;padding:0 30px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;transition:all .3s ease;cursor:pointer;border:0;font-family:inherit;}
.btn--primary{background:var(--orange);color:#fff;}
.btn--primary:hover{background:#fff;color:var(--ink);}
.btn--primary-ink:hover{background:var(--ink);color:#fff;}
.btn--ghost{border:1px solid rgba(255,255,255,.55);color:#fff;background:transparent;}
.btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff;}
.btn--outline{border:1px solid var(--ink);color:var(--ink);background:transparent;}
.btn--outline:hover{background:var(--ink);color:#fff;}
.btn--block{width:100%;justify-content:center;height:52px;padding:0;font-size:12px;}
.btn--sm{height:52px;padding:0 26px;font-size:12px;}
.link-under{display:inline-flex;align-items:center;height:56px;padding:0 4px;border-bottom:2px solid var(--orange);color:var(--ink);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;width:fit-content;}
.link-under:hover{color:var(--orange);}
.link-mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);}
.link-mono:hover{color:var(--orange);}

/* ----------------------------------------------------------- fitblock --- */
/* Conteneur 100svh partagé par le marquee partenaires et le bandeau contact
   de l'accueil : deux blocs distincts qui se partagent un écran (prototype
   index.html). Il est ici, et pas dans l'une des deux feuilles de blocs,
   précisément parce qu'aucun des deux ne le possède. Posé par le gabarit
   d'accueil au Lot 6. */
.fitblock{height:100svh;max-height:100svh;overflow:hidden;display:flex;flex-direction:column;}
@media (max-width:900px){
  .fitblock{height:auto;max-height:none;overflow:visible;}
}

/* ------------------------------------------------------------- ancres --- */
/* Cible de lien du sommaire (`helios/sommaire-ancres`) : la marge de défilement
   compense le header collant + la barre de sommaire, sinon un clic d'ancre
   place le titre SOUS le header. Porté du prototype (style.css 445). */
.anchor{scroll-margin-top:170px;margin-bottom:44px;}

/* ------------------------------------------------ moteur d'apparition --- */
/* README §8.1. Les trois keyframes sont portées du prototype (style.css 45-47),
   comme la durée et la courbe (`.78s cubic-bezier(.22,.72,.26,1)`, main.js 105).
   Le README annonce `.7s cubic-bezier(.16,1,.3,1)` : le prototype fait foi
   (ADR-0006), l'écart est déclaré dans la note.

   LA RÈGLE QUI GOUVERNE TOUT (spec §3.2) : le CSS ne masque `[data-rev]` que
   sous `html.js-rev`, et cette classe est posée PAR LE SCRIPT, à l'exécution.
   Sans JavaScript, sans le fichier, ou si le script échoue avant cette ligne,
   rien n'est masqué. C'est le §15.5, et c'est la panne la plus fréquente de ce
   genre de moteur : un contenu invisible est un contenu perdu.

   Le délai de cascade arrive du serveur (`data-rev-d`, 70 ms par item) et
   passe par `--rev-d` : le script ne fait que le recopier, la temporisation
   reste ici. */
@keyframes helios-in-left{from{opacity:0;transform:translate3d(-52px,0,0);}to{opacity:1;transform:none;}}
@keyframes helios-in-right{from{opacity:0;transform:translate3d(52px,0,0);}to{opacity:1;transform:none;}}
@keyframes helios-in-up{from{opacity:0;transform:translate3d(0,42px,0);}to{opacity:1;transform:none;}}

html.js-rev [data-rev]{opacity:0;}
html.js-rev [data-rev].is-in{opacity:1;animation:helios-in-up .78s cubic-bezier(.22,.72,.26,1) var(--rev-d,0s) both;will-change:transform,opacity;}
html.js-rev [data-rev="left"].is-in{animation-name:helios-in-left;}
html.js-rev [data-rev="right"].is-in{animation-name:helios-in-right;}
/* Règles 4 et 5 : déjà dépassé à l'initialisation, ou filet des 2,5 s. Visible
   TOUT DE SUITE et sans animation — surtout pas une animation qui rejouerait
   sous les yeux d'un lecteur déjà arrivé plus bas. */
html.js-rev [data-rev].is-shown{opacity:1;animation:none;}

@media (prefers-reduced-motion: reduce){
  html.js-rev [data-rev],
  html.js-rev [data-rev].is-in{opacity:1 !important;animation:none !important;transform:none !important;}
}

/* ============================================================================
   Cibles tactiles — README §15.3, soldé au Lot 9
   ----------------------------------------------------------------------------
   Mesuré par `bash scripts/sonde.sh` : 66 contrôles sous 44px sur les quatorze
   écrans à 390px de large. Le logo à 38px de haut, les liens de la barre légale
   à 19px, les « en savoir plus » des cartes d'expertise à 33px, les titres de
   carte, les puces de filtre à 42px.

   La règle ne s'applique qu'aux POINTEURS GROSSIERS. Ce n'est pas une
   précaution : à la souris, un lien de 19px se vise sans peine, et lui imposer
   44px déformerait une barre légale dessinée à 12px. La contrainte est celle du
   DOIGT, elle ne vaut donc que là où il y a un doigt — `pointer: coarse`, que
   tout téléphone et toute tablette rapportent, et aucun poste à souris.

   `min-height` + `align-items:center` plutôt qu'un `padding` : le padding
   aurait décalé les lignes de base et fait glisser toute la superposition
   mesurée au §15.1. Ici la boîte grandit autour du texte, qui ne bouge pas.
   ========================================================================== */
@media (pointer: coarse){

  .ft__legal a,
  .ft__list a,
  .crumbs a,
  .link-mono,
  .mail,
  .ft__contact a,
  .mnav__dismiss,
  .subnav a,
  .hdr__logo,
  .exp-card__more,
  .pcard__t,
  .acard__t,
  .ncard__t,
  .res__t,
  .chip,
  .box__row,
  .box__note{
    min-height:44px;
    display:flex;
    align-items:center;
  }

  /* Les contrôles qui ne portent qu'une icône ou deux caractères ont besoin
     d'une LARGEUR, pas seulement d'une hauteur : une flèche de 26px reste
     hors d'atteinte même haute de 44. */
  .mnav__dismiss,
  .subnav a{
    min-width:44px;
    justify-content:center;
  }

  /* Ceux-là sont des liens de liste : le `flex` ci-dessus les met sur une
     ligne, or leur texte passe volontiers à deux. `inline-flex` garderait la
     largeur du texte, ce qui rend la cible trop étroite ; on garde `flex` et on
     autorise le retour à la ligne. */
  .pcard__t,
  .acard__t,
  .ncard__t,
  .res__t{
    display:block;
    padding-block:10px;
  }
}