/* =========================================================
   SARL SAHARA STAR SERVICES — « Le Relevé Technique »
   Système visuel : la fiche d'intervention.
   Le site est le dossier technique de l'entreprise, pas sa brochure :
   tout est daté, référencé, mesuré. Le bleu de marque occupe des
   RÉGIONS ENTIÈRES de page — il n'est jamais un accent posé sur du blanc.
   Réalisé par Amanah Visual.
   ========================================================= */

/* Texte courant : IBM Plex Sans. Le choix n'est pas esthétique — sa déclinaison
   IBM Plex Sans Arabic est la seule raison qui tienne : le site passera en
   arabe et en anglais, et changer de famille en cours de route casserait la
   cohérence des chiffres et des filets.
   Titres : Archivo, grotesque dessinée pour les gros titres, dont l'axe de
   chasse variable donne aux en-têtes le serrage d'une plaque gravée. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@75..112,400..800&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  /* ---- Bleu de marque : la couleur porte la page, pas des accents ---- */
  --blue:        #0F4B9B;
  --blue-900:    #0B3C82;   /* fond des champs pleins — eclairci a la demande du client */
  --blue-800:    #083273;
  --blue-700:    #0B3B7C;
  --blue-500:    #1A5FBA;
  --blue-300:    #5B92DA;
  --blue-100:    #C8DAF2;
  --blue-50:     #EEF3FB;

  /* Accent — bleu clair. Le jaune et l'ambre sont proscrits par la charte. */
  --accent:      #4E93E0;
  --accent-dark: #2E7BD6;

  /* Vert : énergies renouvelables, photovoltaïque et pompage solaire UNIQUEMENT */
  --green:       #2E9E5B;
  --green-dark:  #23804A;
  --green-light: #7FD3A1;

  /* ---- Encres et papiers ---- */
  --ink:         #0A1729;
  --ink-800:     #142338;
  --ink-600:     #2C3E56;
  --slate:       #5A6B80;
  --slate-light: #8798AC;
  --line:        #DCE3EC;
  --line-strong: #B9C6D6;
  --paper:       #FFFFFF;
  --paper-alt:   #F3F5F7;

  /* Encres posées SUR un champ bleu : jamais du gris, toujours teinté du bleu */
  --on-field:        #FFFFFF;
  --on-field-soft:   #B9CEEC;
  --on-field-line:   rgba(255,255,255,.16);
  --on-field-line-2: rgba(255,255,255,.28);

  /* ---- Grammaire de la fiche ---- */
  --rule:        1px;                    /* le filet, unité de base du système */
  --radius:      3px;
  --radius-lg:   6px;

  /* Élévation : décalage + flou réels, jamais un halo coloré sans décalage */
  --shadow-sm:   0 1px 2px rgba(6,38,90,.07), 0 2px 8px rgba(6,38,90,.05);
  --shadow-md:   0 4px 12px rgba(6,38,90,.09), 0 14px 34px rgba(6,38,90,.07);
  --shadow-lg:   0 12px 32px rgba(6,38,90,.13), 0 34px 68px rgba(6,38,90,.11);

  /* ---- Échelle d'espacement : une seule rythmique sur tout le site ---- */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;
  --sp-9: 6rem;   --sp-10: 8rem;

  /* ---- Échelle typographique ---- */
  --fs-micro: .72rem;
  --fs-small: .82rem;
  --fs-body:  1rem;
  --fs-lead:  1.12rem;
  /* Titres resserrés d'un cran à la demande du client : la hiérarchie tient
     encore, mais les grands titres ne mangent plus le haut de chaque écran. */
  --fs-h3:    clamp(1rem, 1.3vw, 1.15rem);
  --fs-h2:    clamp(1.5rem, 2.5vw, 2.15rem);
  --fs-h1:    clamp(2rem, 4.4vw, 3.7rem);

  --ff-head:  'Archivo', system-ui, sans-serif;
  --ff-body:  'IBM Plex Sans', system-ui, sans-serif;

  /* ---- Mouvement : une seule courbe, trois durées ---- */
  --ease:      cubic-bezier(.16, 1, .3, 1);   /* sortie exponentielle */
  --dur-fast:  .18s;
  --dur:       .38s;
  --dur-slow:  .72s;

  --nav-h:       86px;
  --topbar-h:    38px;
}

/* ---------- Surfaces du navigateur ----------
   Sélection, caret, ascenseur, anneau de focus, chiffres : livrés par défaut,
   ils n'appartiennent à aucun système. On les rattache à la palette. */
::selection { background: var(--blue); color: #fff; }
:where(.section--field, .hero, .footer) ::selection { background: var(--accent); color: var(--ink); }

html { scrollbar-color: var(--blue-300) var(--paper-alt); scrollbar-width: thin; caret-color: var(--blue); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--paper-alt); }
::-webkit-scrollbar-thumb {
  background: var(--blue-300); border-radius: 99px;
  border: 3px solid var(--paper-alt);
}
::-webkit-scrollbar-thumb:hover { background: var(--blue); }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 2px;
}
.section--field :focus-visible, .hero :focus-visible, .footer :focus-visible {
  outline-color: var(--accent);
}

a { text-underline-offset: .18em; text-decoration-thickness: from-font; }

/* Les chiffres d'un relevé s'alignent en colonnes : c'est une donnée, pas du texte. */
.stat-num, .ap-stat__num, .releve-val, .sim-chiffre__val, .proj-meta dd,
.sim-table td, .sim-total__val, table, time, .flow-num, .ref {
  font-variant-numeric: tabular-nums;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* L'attribut `hidden` ne vaut que `display:none` dans la feuille du
   navigateur : la moindre règle d'auteur posant un `display` (nos boutons
   sont en `inline-flex`) l'emporte et l'élément reste visible. On rétablit
   la priorité, sinon masquer par JavaScript ne masque rien. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-600);
  /* Le site est à dominante bleu foncé ; les sections claires servent de
     respiration. Elles sont donc franchement blanches, pour trancher net
     avec les champs encrés plutôt que de les prolonger en gris. */
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--ff-head);
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -.025em;
  margin: 0 0 .5em;
  font-weight: 700;
  text-wrap: balance;
}
/* La chasse resserrée des gros titres leur donne le serrage d'une plaque gravée. */
h1 { font-size: var(--fs-h1); font-weight: 800; font-stretch: 92%; letter-spacing: -.035em; }
h2 { font-size: var(--fs-h2); font-weight: 700; font-stretch: 96%; letter-spacing: -.03em; }
h3 { font-size: var(--fs-h3); font-weight: 600; }
p  { margin: 0 0 1rem; }

/* ---------- Layout ---------- */
.container { width: min(1240px, 100% - 3rem); margin-inline: auto; }
@media (max-width: 640px) { .container { width: min(1240px, 100% - 2rem); } }

/* Convention pour toutes les grilles du thème : écrire
   `minmax(min(NNNpx, 100%), 1fr)` et jamais `minmax(NNNpx, 1fr)`.
   Sans le `min()`, dès que le conteneur devient plus étroit que NNN la piste
   garde sa largeur minimale, déborde, et c'est toute la page qui défile
   latéralement sur les petits téléphones. */

/* Rythme : plus d'air AU-DESSUS d'un titre qu'en dessous de son contenu.
   Le filet supérieur de chaque en-tête marque déjà la rupture, la section
   n'a donc plus besoin de la doubler par un vide. */
.section       { padding: clamp(3rem, 5.5vw, 5rem) 0 clamp(2rem, 4vw, 3.5rem); position: relative; }
.section--tight{ padding: clamp(2.25rem, 4vw, 3.25rem) 0 clamp(1.75rem, 3vw, 2.5rem); }
.section--alt  { background: var(--paper-alt); }

/* ---------- Champs pleins ----------
   Le bleu n'est pas un accent : il possède des régions entières de page.
   C'est ce qui fait tenir le site ensemble au lieu d'alterner blanc / gris.
   Un champ se lit comme le verso encré d'une fiche. */
.section--field {
  background: var(--blue-900);
  color: var(--on-field-soft);
  --line: var(--on-field-line);
  --line-strong: var(--on-field-line-2);
  --slate: var(--on-field-soft);
  --slate-light: #93AFD6;
  --ink: #fff;
  --ink-600: var(--on-field-soft);
  /* Sur un champ encré, une « feuille » est une surface légèrement relevée,
     pas un rectangle blanc : les cartes du thème passent par ce jeton et
     basculent donc toutes seules quand la section devient bleue. */
  --paper: rgba(255,255,255,.055);
  --paper-alt: rgba(255,255,255,.08);
}
/* Les visuels reprennent de la densité sur fond sombre. */
.section--field .svc-media img,
.section--field .proj-media img { filter: saturate(.9) contrast(1.04); }
.section--field .svc-card:hover,
.section--field .proj:hover { border-color: var(--accent); }
.section--field .equip-item:hover { background: rgba(255,255,255,.1); border-color: var(--accent); }
.section--field .svc-tag { border-color: var(--on-field-line-2); color: #fff; }
.section--field .svc-link { color: var(--accent); }
.section--field .svc-card--vert .svc-link { color: var(--green-light); }
.section--field .svc-card--vert .svc-tag { border-color: rgba(127,211,161,.45); color: var(--green-light); }
.section--field .proj-secteur { color: var(--accent); }
.section--field .equip-txt { color: #fff; }
.section--field h1, .section--field h2, .section--field h3, .section--field h4 { color: #fff; }

/* Réglure : la trame millimétrée d'un carnet de relevé, presque invisible,
   qui donne au champ une matière au lieu d'un aplat mort. */
.section--field::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) var(--rule), transparent var(--rule)),
    linear-gradient(to bottom, rgba(255,255,255,.045) var(--rule), transparent var(--rule));
  background-size: 88px 88px;
  mask-image: radial-gradient(120% 90% at 15% 0%, #000 0%, transparent 78%);
}
.section--field > * { position: relative; z-index: 1; }

/* Conservé pour l'existant, aligné sur le nouveau champ. */
.section--ink  { background: var(--ink); color: rgba(255,255,255,.72); }
.section--ink h2, .section--ink h3 { color: #fff; }

/* ---------- En-tête de fiche ----------
   Remplace le couple « surtitre + titre ». Le titre porte son propre poids ;
   le filet et la référence en marge disent de quelle pièce du dossier
   il s'agit, sans étiqueter le titre par-dessus. */
.record-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 var(--sp-6);
  /* Pas de filet par défaut : quand le fond de section change déjà, la
     rupture est faite, et un trait par-dessus la répète pour rien.
     Il ne revient que là où deux sections partagent le même fond. */
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
  /* Toujours fer à gauche : un dossier ne se centre pas. La classe `center`
     héritée de l'ancien thème est neutralisée ici volontairement. */
  text-align: left !important;
}
.record-head > * { min-width: 0; grid-column: 1; }
.record-head h2 { margin: 0; max-width: 22ch; }
.record-head .lead { margin: var(--sp-4) 0 0; max-width: 58ch; }

/* La référence en marge : elle dit de quelle pièce du dossier il s'agit et
   ce qu'elle contient. C'est une donnée — un décompte réel — pas une
   étiquette qui répète le titre au-dessus de lui. */
.record-head__ref {
  grid-column: 2; grid-row: 1;
  justify-self: end; align-self: start;
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--ff-head);
  font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--slate-light);
  white-space: nowrap;
  padding-top: .45rem;
}
.record-head__ref::before {
  content: ''; width: 22px; height: var(--rule);
  background: currentColor; opacity: .5; flex: none;
}
/* Deux sections de même fond qui se suivent : là, et seulement là, le filet
   est le seul indice de changement de chapitre. Le sélecteur d'adjacence
   compare le fond de la section à celui de sa voisine immédiate. */
.section--field + .section--field .record-head,
.section--field + .section--field .sourcing-grid,
.section--alt + .section--alt .record-head,
.section:not(.section--field):not(.section--alt) + .section:not(.section--field):not(.section--alt) .record-head {
  border-top: var(--rule) solid var(--line-strong);
  padding-top: var(--sp-4);
}

@media (max-width: 700px) {
  .record-head { grid-template-columns: 1fr; }
  .record-head__ref { grid-column: 1; grid-row: 3; justify-self: start; padding-top: var(--sp-4); }
}

/* Petit titre de section, posé au-dessus du grand. Sur un champ bleu il
   prend l'accent clair, sinon le bleu de marque. */
.section-label {
  margin: 0 0 .6rem;
  font-family: var(--ff-head);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue);
}
.section--field .section-label, .hero .section-label { color: var(--accent); }

.lead { font-size: var(--fs-lead); color: var(--slate); line-height: 1.6; }
.section--ink .lead { color: rgba(255,255,255,.7); }

/* ---------- Boutons ----------
   Angles francs, pas de pilule : le monde est celui du formulaire technique.
   La flèche avance au survol — le seul mouvement, et il dit « suite ». */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .92rem 1.5rem;
  font-family: var(--ff-head); font-weight: 600; font-size: .93rem;
  letter-spacing: -.005em;
  border-radius: var(--radius);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; flex: none; transition: transform var(--dur) var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn-primary  { background: var(--blue); color: #fff; box-shadow: 0 2px 4px rgba(6,38,90,.18), 0 8px 20px rgba(6,38,90,.16); }
.btn-primary:hover  { background: var(--blue-700); box-shadow: 0 4px 8px rgba(6,38,90,.22), 0 14px 30px rgba(6,38,90,.22); }
.btn-accent   { background: var(--accent); color: var(--blue-900); box-shadow: 0 2px 4px rgba(6,38,90,.2), 0 8px 20px rgba(6,38,90,.2); }
.btn-accent:hover   { background: #6BA6E8; box-shadow: 0 4px 8px rgba(6,38,90,.24), 0 14px 30px rgba(6,38,90,.24); }
.btn-ghost    { border: var(--rule) solid var(--line-strong); color: var(--ink); background: transparent; }
.btn-ghost:hover    { border-color: var(--blue); color: var(--blue); background: var(--blue-50); }
.btn-light    { border: var(--rule) solid rgba(255,255,255,.4); color: #fff; }
.btn-light:hover    { background: rgba(255,255,255,.1); border-color: #fff; }
.btn-sm { padding: .66rem .95rem; font-size: .85rem; }

/* Sur un champ bleu, le fantôme s'inverse au lieu de virer au bleu sur bleu. */
.section--field .btn-ghost, .hero .btn-ghost {
  border-color: var(--on-field-line-2); color: #fff;
}
.section--field .btn-ghost:hover, .hero .btn-ghost:hover {
  background: rgba(255,255,255,.1); border-color: #fff; color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover svg { transform: none; }
}

/* Sur les écrans les plus étroits (Galaxy Fold replié, 280 px), un libellé
   long comme « Demander une consultation » ne tient pas sur une ligne :
   on l'autorise à passer à la ligne plutôt qu'à élargir la page. */
@media (max-width: 360px) {
  .btn { white-space: normal; text-align: center; }
}

/* =========================================================
   TOPBAR + NAV
   ========================================================= */
.topbar {
  background: var(--ink);
  color: rgba(255,255,255,.66);
  font-size: .82rem;
  height: var(--topbar-h);
  display: flex; align-items: center;
}
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.topbar-info { display: flex; align-items: center; gap: 1.6rem; }
.topbar-info a { display: inline-flex; align-items: center; gap: .45rem; transition: color .2s; }
.topbar-info a:hover { color: #fff; }
.topbar-info svg { width: 14px; height: 14px; color: var(--accent); flex: none; }
.topbar-tag { display: inline-flex; align-items: center; gap: .45rem; color: rgba(255,255,255,.5); }
.topbar-tag svg { width: 14px; height: 14px; color: var(--accent); }
@media (max-width: 900px) { .topbar-tag { display: none; } }
@media (max-width: 560px) {
  /* On garde le numéro visible — c'est le premier réflexe de contact du secteur */
  .topbar-info { gap: 1.1rem; font-size: .78rem; }
  .topbar-info a:last-child span { display: none; }
}

.nav {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s;
}
.nav.scrolled { box-shadow: var(--shadow-sm); }
.nav .container {
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
/* En grand écran la barre est calibrée au pixel (marque + menu + bouton =
   exactement la largeur du conteneur) : la marque ne doit surtout pas
   rétrécir, sinon la baseline se fait couper pour rien. Elle ne devient
   compressible qu'une fois le menu replié — voir plus bas. */
/* Le logo est désormais un bloc complet : icône + raison sociale dans la
   même image. Il n'a plus de texte à côté de lui, donc il prend toute la
   hauteur utile de la barre, et se réduit sur les petits écrans. */
.brand { display: flex; align-items: center; gap: .7rem; flex: 0 1 auto; min-width: 0; }
.brand img { height: 64px; width: auto; max-width: 100%; flex: none; }
@media (max-width: 700px) { .brand img { height: 44px; } }
@media (max-width: 420px) { .brand img { height: 36px; } }

/* Huit entrées de menu : l'espacement est calibré pour tenir sans débordement. */
.nav-links { display: flex; align-items: center; gap: 0; }
.nav-links > a, .nav-drop > button {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .6rem .5rem;
  font-family: var(--ff-head); font-weight: 600; font-size: .875rem;
  color: var(--ink-600); border-radius: var(--radius);
  white-space: nowrap;
  transition: .18s;
}
.nav-links > a:hover, .nav-drop > button:hover { color: var(--blue); background: var(--blue-50); }
.nav-links > a.active { color: var(--blue); }
.nav-drop { position: relative; }
.nav-drop > button svg { width: 13px; height: 13px; transition: transform .2s; }
.nav-drop:hover > button svg { transform: rotate(180deg); }
.nav-drop-menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 290px; padding: .5rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: .2s;
}
.nav-drop:hover .nav-drop-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-drop-menu a {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .75rem; border-radius: var(--radius);
  font-size: .9rem; font-weight: 500; color: var(--ink-600);
  transition: .16s;
}
.nav-drop-menu a:hover { background: var(--blue-50); color: var(--blue); }
.nav-drop-menu a i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--blue-300); flex: none;
}
.nav-drop-menu a.is-live i { background: var(--accent); box-shadow: 0 0 0 3px rgba(78,147,224,.22); }

.nav-cta { display: flex; align-items: center; gap: .8rem; flex: none; }

/* ---- Sélecteur de langue ----
   Deux cellules accolées plutôt qu'un menu déroulant : avec deux langues
   seulement, le choix tient dans un coup d'oeil et un clic. */
.lang {
  display: inline-flex; flex: none;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: #fff;
}
.lang-btn {
  padding: .42rem .6rem; line-height: 1;
  font-family: var(--ff-head); font-weight: 700; font-size: .76rem;
  letter-spacing: .04em; color: var(--slate);
  transition: background .2s, color .2s;
}
.lang-btn + .lang-btn { border-left: 1px solid var(--line); }
.lang-btn:hover { background: var(--blue-50); color: var(--blue-900); }
.lang-btn.is-actif { background: var(--blue-900); color: #fff; }

/* Sur les petits écrans le bouton « devis » disparaît : le sélecteur se
   resserre pour laisser la place au logo et au bouton menu. */
@media (max-width: 420px) {
  .lang-btn { padding: .42rem .45rem; font-size: .72rem; }
}

.hamburger {
  display: none; width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: var(--radius);
  position: relative;
}
.hamburger span, .hamburger::before, .hamburger::after {
  content: ''; position: absolute; left: 12px; width: 20px; height: 2px;
  background: var(--ink); border-radius: 2px; transition: .25s;
}
.hamburger span   { top: 21px; }
.hamburger::before{ top: 14px; }
.hamburger::after { top: 28px; }
.hamburger.open span { opacity: 0; }
.hamburger.open::before { top: 21px; transform: rotate(45deg); }
.hamburger.open::after  { top: 21px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: calc(var(--nav-h) + var(--topbar-h)) 0 auto 0;
  background: #fff; border-bottom: 1px solid var(--line);
  padding: 1rem 1.5rem 1.75rem;
  display: none; flex-direction: column; gap: .2rem;
  max-height: calc(100vh - var(--nav-h) - var(--topbar-h)); overflow-y: auto;
  z-index: 89; box-shadow: var(--shadow-md);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  padding: .85rem .25rem; font-family: var(--ff-head); font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.mobile-menu .mm-sub { font-weight: 500; font-size: .9rem; padding-left: 1rem; color: var(--slate); }
.mobile-menu .btn { margin-top: 1rem; justify-content: center; border-bottom: 0; }

/* Le menu à huit entrées ne tient plus sous 1240 px : bascule en menu déroulant. */
@media (max-width: 1300px) {
  .nav-links { display: none; }
  .hamburger { display: block; }
  /* Le menu replié, la marque n'a plus de voisin à bousculer : on la rend
     compressible. Le nom du site est saisi par le client et peut être long —
     sans cela il élargit la page et tout le site défile latéralement. */
  .brand { flex: 0 1 auto; min-width: 0; }
}
/* La baseline tient désormais sur deux lignes : elle n'est plus large que le
   nom de la société et reste lisible jusqu'aux petits téléphones. On ne la
   retire qu'en dessous de 360 px, où elle repousserait le bouton menu. */
@media (max-width: 359px) {
  .brand-txt small { display: none; }
  /* Sans cela le nom se fait rogner d'une lettre ou deux sur un Fold replié. */
  .brand-txt strong { font-size: .82rem; }
}
@media (max-width: 560px) {
  .nav-cta .btn { display: none; }
  .brand img { height: 38px; }
  .brand-txt strong { font-size: .92rem; }
}

/* =========================================================
   HERO
   ========================================================= */
/* Le premier écran est la couverture du dossier : un champ bleu plein, la
   promesse fer à gauche, et la photo réelle traitée comme une pièce encartée
   — pas une photo assombrie sur laquelle on pose du texte, qui est
   exactement l'accueil que livre tout le secteur. */
.hero {
  position: relative; overflow: hidden;
  background: var(--blue-900);
  color: var(--on-field-soft);
  --line: var(--on-field-line);
  --slate: var(--on-field-soft);
  padding: clamp(2rem, 4.5vw, 3.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.hero-bg { position: absolute; inset: 0; }
/* Le matériel est cadré à droite de la photo : on l'y garde, derrière la
   carte « chaîne de valeur », et on réserve la gauche au texte. Le voile
   est opaque à gauche pour que le titre tienne, et presque transparent à
   droite pour laisser voir l'équipement et son néon bleu. */
.hero-bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 72% center;
  /* Même virage colorimétrique sur tous les visuels : ils se succèdent sans
     saute de teinte, et chacun appartient au champ bleu. */
  filter: saturate(.72) contrast(1.04);
}
/* Fondu enchaîné : une seule vue à la fois. Le premier visuel porte déjà
   `is-actif` dans le balisage, donc le bandeau n'est jamais vide. */
.hero-diapo { opacity: 0; transition: opacity 1.6s ease-in-out; }
.hero-diapo.is-actif { opacity: .92; }
@media (prefers-reduced-motion: reduce) { .hero-diapo { transition: none; } }
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(11,60,130,.95) 0%, rgba(11,60,130,.88) 30%, rgba(11,60,130,.58) 52%, rgba(11,60,130,.2) 78%, rgba(11,60,130,.1) 100%),
    linear-gradient(to top, var(--blue-900) 0%, rgba(11,60,130,.12) 32%, transparent 58%);
}
/* La réglure du carnet, reprise du champ : elle relie le premier écran au
   reste du dossier. */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) var(--rule), transparent var(--rule)),
    linear-gradient(to bottom, rgba(255,255,255,.05) var(--rule), transparent var(--rule));
  background-size: 88px 88px;
  mask-image: radial-gradient(120% 100% at 12% 10%, #000 0%, transparent 72%);
}
@media (max-width: 940px) {
  .hero-bg img { object-position: 60% center; opacity: .3; }
  .hero-bg::after {
    background:
      linear-gradient(to bottom, rgba(6,38,90,.94) 0%, rgba(6,38,90,.86) 60%, var(--blue-900) 100%);
  }
}
.hero .container { position: relative; z-index: 2; }
.hero-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: clamp(2rem,5vw,4.5rem); align-items: center; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 { color: #fff; margin-bottom: 1.1rem; }
.hero h1 .accent { color: var(--accent); }
.hero-lead { font-size: clamp(1rem, .95rem + .3vw, 1.15rem); color: rgba(255,255,255,.74); max-width: 56ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }

.hero-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.hero-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .8rem; font-size: .78rem; font-weight: 600;
  font-family: var(--ff-head); letter-spacing: .02em;
  color: #fff;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  /* Pastilles arrondies de l'ancienne version, conservées dans le mélange. */
  border-radius: 100px;
}
.hero-badge svg { width: 13px; height: 13px; color: var(--accent); }

/* ---------- Curseur de frappe du titre ----------
   Un trait clignotant tant que le texte s'écrit, qui disparaît une fois la
   phrase posée. Il ne vit que pendant l'animation : laissé en place, il
   devient un parasite dans un titre qui ne bouge plus. */
.hero h1.frappe-active::after {
  content: '';
  display: inline-block;
  width: .06em; height: .82em;
  margin-left: .06em;
  background: var(--accent);
  vertical-align: baseline;
  animation: frappe-curseur .75s steps(1) infinite;
}
@keyframes frappe-curseur { 50% { opacity: 0; } }
/* Pendant la frappe, le titre occupe déjà sa hauteur finale : sans cela le
   contenu dessous remonte puis redescend à chaque ligne écrite. */
.hero h1[data-frappe] { min-height: 2.1em; }
.hero h1 .frappe-part { display: inline; }

/* ---------- Référence du document, marge haute droite ---------- */
.hero-ref {
  display: flex; align-items: center; justify-content: flex-end; gap: .6rem;
  margin: 0 0 clamp(1.5rem, 4vw, 2.75rem);
  font-family: var(--ff-head);
  font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-field-soft);
  font-variant-numeric: tabular-nums;
}
.hero-ref span { color: #7FA3D8; }
.hero-ref::before {
  content: ''; flex: 1; height: var(--rule);
  background: var(--on-field-line); max-width: 240px;
}

/* ---------- Pièce encartée du premier écran ---------- */
.hero-piece { margin: 0; }
.hero-piece img {
  display: block; width: 100%;
  aspect-ratio: 4/3; object-fit: cover;
  border: var(--rule) solid var(--on-field-line-2);
  border-radius: var(--radius);
}
.hero-piece figcaption {
  margin-top: .7rem;
  font-size: var(--fs-small); color: var(--on-field-soft); line-height: 1.5;
}

/* ---------- Chaîne de valeur, sous le pli ----------
   Une colonne vertébrale continue : un seul trait porte les cinq maillons
   de bout en bout. Il ne se fragmente jamais, il change d'échelle. */
.chaine {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--flow-cols, 5), minmax(0, 1fr));
  position: relative;
}
.chaine::before {
  content: ''; position: absolute; left: 0; right: 0; top: 15px;
  height: var(--rule); background: var(--on-field-line-2);
}
.chaine-maillon {
  display: flex; flex-direction: column; gap: .9rem;
  padding-right: 1.25rem;
  position: relative;
}
.chaine-num {
  display: grid; place-items: center;
  width: 31px; height: 31px;
  border-radius: 50%;
  background: var(--blue-900);
  border: var(--rule) solid var(--accent);
  color: var(--accent);
  font-family: var(--ff-head); font-weight: 700; font-size: .78rem;
  font-variant-numeric: tabular-nums;
  position: relative; z-index: 1;
}
.chaine-txt {
  font-family: var(--ff-head); font-weight: 600; font-size: .95rem;
  color: #fff; line-height: 1.25;
}
@media (max-width: 1180px) { .chaine { --flow-cols: 3; row-gap: 1.75rem; } }
@media (max-width: 860px)  { .chaine { --flow-cols: 2; } }
@media (max-width: 620px) {
  .chaine { --flow-cols: 1; row-gap: 0; }
  /* En colonne unique le trait se redresse : la chaîne reste continue. */
  .chaine::before { left: 15px; right: auto; top: 8px; bottom: 8px; width: var(--rule); height: auto; }
  .chaine-maillon { flex-direction: row; align-items: center; gap: 1rem; padding: .6rem 0; }
}

/* Conservé : la carte latérale sert encore ailleurs que sur l'accueil. */
/* Mélange assumé des deux versions : le voile translucent et l'arrondi
   viennent de l'ancienne carte, la colonne vertébrale à nœuds de la
   nouvelle. */
.hero-card {
  position: relative;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.75rem 1.75rem;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
}
.hero-card h3 {
  font-size: var(--fs-micro); color: var(--on-field-soft);
  font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: 1.35rem;
}
.hero-sectors { display: grid; gap: 0; position: relative; }
/* Le trait vertical : la colonne vertébrale elle-même. */
.hero-sectors::before {
  content: ''; position: absolute; top: .55rem; bottom: .55rem; left: 5px;
  width: var(--rule); background: var(--on-field-line-2);
}
.hero-sector {
  display: flex; align-items: center; gap: 1.1rem;
  padding: .72rem 0;
  font-size: .93rem; color: #fff;
  position: relative;
}
/* Chaque maillon est un nœud posé sur le trait. */
.hero-sector::before {
  content: ''; width: 11px; height: 11px; flex: none;
  border-radius: 50%;
  background: var(--blue-900);
  border: 2px solid var(--accent);
  position: relative; z-index: 1;
}
.hero-sector svg { display: none; }

/* Chaîne de valeur sous le bandeau */
.hero-chain {
  margin: 1.75rem 0 0;
  font-family: var(--ff-head);
  font-size: .8rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

/* =========================================================
   ÉQUIPEMENTS — grille dense de catégories
   ========================================================= */
.equip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
  gap: .85rem;
}
.equip-item {
  display: flex; align-items: center; gap: .85rem;
  padding: .6rem .9rem .6rem .6rem;
  background: var(--paper); border: var(--rule) solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.equip-item:hover { border-color: var(--blue); background: var(--blue-50); }
.equip-thumb {
  width: 54px; height: 54px; flex: none;
  border-radius: var(--radius); overflow: hidden; background: var(--paper-alt);
}
.equip-thumb img { width: 100%; height: 100%; object-fit: cover; }
.equip-txt {
  font-family: var(--ff-head); font-weight: 600; font-size: .88rem;
  color: var(--ink); line-height: 1.3;
}

/* =========================================================
   PARTENAIRES
   ========================================================= */
.partners {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden;
}
.partner {
  background: #fff; padding: 1.75rem 1.25rem;
  display: grid; place-items: center; min-height: 108px;
  transition: background .25s;
}
.partner:hover { background: var(--paper-alt); }
.partner img {
  max-height: 54px; width: auto;
  filter: grayscale(1); opacity: .62;
  transition: filter .25s, opacity .25s;
}
.partner:hover img { filter: none; opacity: 1; }
.partner-name {
  font-family: var(--ff-head); font-weight: 700; font-size: 1rem;
  letter-spacing: .04em; color: var(--slate);
}

/* =========================================================
   STATS
   ========================================================= */
/* Bandeau de chiffres, posé dans le bas du bandeau : sombre et translucide,
   il reste sur l'image au lieu de couper la page d'une barre blanche. */
/* ---------- Relevé ----------
   Remplace le bandeau « gros chiffre + petite étiquette » : ce gabarit dit
   la même chose sur tous les sites du secteur. Ici les valeurs se lisent
   comme les lignes d'un relevé : libellé à gauche, valeur alignée à droite,
   séparées par un filet et une conduite de points. La donnée prime sur
   l'effet d'annonce. */
.releve {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  position: relative; z-index: 5;
}
.releve-ligne {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .85rem 0;
  border-bottom: var(--rule) solid var(--on-field-line);
}
.releve-lbl {
  font-size: var(--fs-small); color: var(--on-field-soft);
  white-space: nowrap;
}
/* La conduite de points : le lien mécanique entre un libellé et sa valeur,
   emprunté au bordereau. Elle absorbe l'espace variable au lieu de le subir. */
.releve-conduite {
  flex: 1 1 auto; min-width: .75rem; height: 1px;
  align-self: center;
  background-image: radial-gradient(circle, var(--on-field-line-2) 1px, transparent 1px);
  background-size: 5px 1px; background-repeat: repeat-x;
}
.releve-val {
  font-family: var(--ff-head); font-weight: 700;
  font-size: 1.32rem; color: #fff; line-height: 1;
  letter-spacing: -.02em; white-space: nowrap;
}

.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(10,23,41,.62);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 34px rgba(0,0,0,.28);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  position: relative; z-index: 5;
}
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.5rem 1.4rem;
  border-right: 1px solid rgba(255,255,255,.1);
}
.stat:last-child { border-right: 0; }
@media (max-width: 760px) {
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.1); }
}
.stat-ico {
  display: grid; place-items: center;
  width: 46px; height: 46px; flex: none;
  border-radius: 50%;
  background: rgba(78,147,224,.16);
  border: 1px solid rgba(78,147,224,.3);
  color: var(--accent);
}
.stat-ico svg { width: 21px; height: 21px; }
.stat-txt { min-width: 0; }
.stat-num {
  display: block;
  font-family: var(--ff-head); font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.2rem);
  font-weight: 800; color: #fff; line-height: 1; letter-spacing: -.03em;
}
.stat-num sup { font-size: .5em; vertical-align: super; color: var(--accent); }
.stat-lbl { display: block; font-size: .82rem; color: rgba(255,255,255,.62); margin-top: .35rem; font-weight: 500; }

@media (max-width: 520px) {
  /* Sur téléphone la pastille mange la largeur : on la retire. */
  .stat-ico { display: none; }
  .stat { padding: 1.2rem 1rem; }
}

/* =========================================================
   SERVICE GRID
   ========================================================= */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(232px, 100%), 1fr)); gap: .9rem; }

/* La fiche de solution : une pièce du dossier. Le contour est un filet, la
   photo une pièce encartée en haut, la référence gravée dans le coin.
   Pas de boîte flottante à ombre douce — le document ne lévite pas. */
.svc-card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: .28s cubic-bezier(.4,0,.2,1);
}
.svc-card:hover { transform: translateY(-5px); border-color: var(--blue-300); box-shadow: var(--shadow-md); }
/* Même garde-fou que les fiches projet : l'image est sortie du flux pour
   que ce soit le rapport, et non sa hauteur naturelle, qui fasse le cadre. */
.svc-media {
  position: relative; aspect-ratio: 16/10; overflow: hidden;
  background: var(--paper-alt);
  flex: none; min-height: 0;
}
.svc-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
}
.svc-card:hover .svc-media img { transform: scale(1.06); }
.svc-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,23,41,.55), transparent 55%);
}
.svc-num {
  position: absolute; top: .75rem; left: .75rem; z-index: 2;
  font-family: var(--ff-head); font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  color: #fff; background: rgba(15,75,155,.9);
  padding: .25rem .5rem; border-radius: 3px;
}
.svc-body { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; flex: 1; gap: .5rem; }
.svc-body h3 { font-size: .98rem; margin: 0; }
/* Le résumé s'arrête à trois lignes : c'est lui qui faisait enfler les
   fiches, et la page « Voir le détail » porte déjà le texte complet. */
.svc-body p {
  font-size: .84rem; color: var(--slate); margin: 0; line-height: 1.5;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}
/* On ne garde que les trois premières étiquettes : au-delà elles passaient
   à la ligne et rajoutaient une rangée entière sous chaque fiche. */
.svc-tag:nth-child(n+4) { display: none; }
.svc-media { aspect-ratio: 16 / 9; }
.svc-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: auto; padding-top: .2rem; }
.svc-tag {
  font-size: .73rem; font-weight: 600; color: var(--blue);
  background: var(--blue-50); padding: .22rem .55rem; border-radius: 3px;
}
.svc-link {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .35rem;
  font-family: var(--ff-head); font-weight: 600; font-size: .87rem; color: var(--blue);
}
.svc-link svg { width: 15px; height: 15px; transition: transform .2s; }
.svc-card:hover .svc-link svg { transform: translateX(4px); }
.svc-card.is-live { border-color: var(--accent); }
.svc-card.is-live .svc-num { background: var(--accent); color: var(--ink); }

/* =========================================================
   SPLIT / FEATURE
   ========================================================= */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
/* La photo est une pièce encartée au dossier, pas une vignette qui lévite :
   un filet, un angle franc, aucune ombre portée. */
.split-media {
  position: relative; overflow: hidden;
  border: var(--rule) solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper-alt);
}
.split-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }

/* ---------- Page À propos ---------- */
.ap-photo { margin: 0; }
/* La légende vit DANS le cadre de la photo, comme une mention portée sous
   une pièce jointe — pas comme une ligne de texte oubliée sous l'image. */
.ap-photo figcaption {
  padding: .6rem .85rem;
  background: var(--paper-alt);
  border-top: var(--rule) solid var(--line);
  font-size: var(--fs-small); color: var(--slate); line-height: 1.45;
}

/* Les chiffres clés en quatre tuiles, deux par deux, dans la matière du
   premier écran : bleu de marque et voile translucide. Ils étaient jusqu'ici
   posés en texte brut sous la photo. */
.ap-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
  margin-top: 1.5rem;
}
.ap-stat {
  padding: .95rem 1.1rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--blue) 0%, var(--blue-700) 100%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 1px 2px rgba(6,38,90,.2), 0 10px 24px rgba(6,38,90,.18);
  position: relative; overflow: hidden;
}
/* Le reflet de verre : une seule passe de lumière en haut à gauche. */
.ap-stat::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(150deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%);
}
.ap-stat__num {
  display: block; position: relative;
  font-family: var(--ff-head); font-weight: 800;
  font-size: 1.5rem; color: #fff; line-height: 1.05;
  letter-spacing: -.02em;
}
.ap-stat__lbl {
  display: block; position: relative;
  margin-top: .2rem;
  font-size: .78rem; color: rgba(255,255,255,.78); line-height: 1.35;
}
@media (max-width: 480px) { .ap-stats { grid-template-columns: 1fr; } }
/* Une seule règle pour toutes les photos posées à côté d'un texte, quelle
   que soit la page : même cadrage 4/3 et une hauteur plafonnée. Le format
   portrait 3/4 qui existait ici faisait grimper l'image sur toute la
   hauteur de l'écran et écrasait le texte à côté. La photo peut changer,
   le cadre ne bouge plus. */
.split-media.tall img { aspect-ratio: 4/3; }
.split-media img { max-height: 420px; }

.checklist { display: grid; gap: .75rem; margin: 1.5rem 0; }
.checklist li { display: flex; gap: .75rem; align-items: flex-start; font-size: .95rem; }
.checklist svg { width: 19px; height: 19px; color: var(--blue); flex: none; margin-top: .18rem; }
.section--ink .checklist svg { color: var(--accent); }
.checklist strong { color: var(--ink); font-weight: 600; }
.section--ink .checklist strong { color: #fff; }

/* =========================================================
   GALLERY
   ========================================================= */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: .9rem; }
.gallery figure {
  margin: 0; position: relative; overflow: hidden;
  border-radius: var(--radius); background: var(--ink);
  aspect-ratio: 4/3; cursor: zoom-in;
}
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s, opacity .3s; }
.gallery figure:hover img { transform: scale(1.07); opacity: .82; }
.gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem .85rem .7rem;
  font-size: .8rem; font-weight: 500; color: #fff;
  background: linear-gradient(to top, rgba(10,23,41,.9), transparent);
}
.gallery figure.wide { grid-column: span 2; aspect-ratio: 8/3; }
@media (max-width: 560px) { .gallery figure.wide { grid-column: span 1; aspect-ratio: 4/3; } }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(6,14,25,.94);
  display: none; align-items: center; justify-content: center;
  padding: 2rem;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 82vh; border-radius: var(--radius); object-fit: contain; }
.lightbox-cap {
  position: absolute; bottom: 1.75rem; left: 0; right: 0; text-align: center;
  color: rgba(255,255,255,.8); font-size: .9rem; padding: 0 1.5rem;
}
.lightbox-close {
  position: absolute; top: 1.25rem; right: 1.5rem;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.1); color: #fff;
  display: grid; place-items: center;
}
.lightbox-close:hover { background: rgba(255,255,255,.2); }
.lightbox-close svg { width: 20px; height: 20px; }

/* =========================================================
   SPEC TABLE
   ========================================================= */
.spec-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.spec { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .92rem; }
.spec th, .spec td { padding: .95rem 1.25rem; text-align: left; border-bottom: 1px solid var(--line); }
.spec thead th {
  background: var(--ink); color: #fff;
  font-family: var(--ff-head); font-size: .8rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}
.spec tbody tr:last-child td { border-bottom: 0; }
.spec tbody tr:hover { background: var(--blue-50); }
.spec td:first-child { font-weight: 600; color: var(--ink); }

/* =========================================================
   PROCESS
   ========================================================= */
.process { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr)); gap: 1.5rem; counter-reset: step; }
.process-step { position: relative; padding-top: 2.5rem; }
.process-step::before {
  counter-increment: step; content: '0' counter(step);
  position: absolute; top: 0; left: 0;
  font-family: var(--ff-head); font-size: 1.6rem; font-weight: 800;
  color: var(--blue); opacity: .28; letter-spacing: -.03em;
}
.process-step::after {
  content: ''; position: absolute; top: 1.15rem; left: 3.1rem; right: -1.5rem; height: 1px;
  background: linear-gradient(to right, var(--line), transparent);
}
.process-step:last-child::after { display: none; }
@media (max-width: 700px) { .process-step::after { display: none; } }
.process-step h3 { font-size: 1.02rem; margin-bottom: .4rem; }
.process-step p { font-size: .88rem; color: var(--slate); margin: 0; }
.section--ink .process-step::before { color: var(--accent); opacity: .5; }
.section--ink .process-step p { color: rgba(255,255,255,.62); }

/* =========================================================
   SECTORS STRIP
   ========================================================= */
/* Les secteurs se lisent comme les colonnes d'un bordereau : filets fins,
   alignement à gauche, aucune boîte. */
.sectors {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  border-top: var(--rule) solid var(--line-strong);
}
.sector {
  padding: 1.5rem 1.25rem 1.5rem 0;
  border-bottom: var(--rule) solid var(--line);
  transition: background var(--dur) var(--ease);
  position: relative;
}
.sector + .sector { padding-left: 1.25rem; }
.sector:hover { background: var(--blue-50); }
.sector svg { width: 24px; height: 24px; color: var(--blue); margin: 0 0 .8rem; stroke-width: 1.5; display: block; }
.sector span { display: block; font-family: var(--ff-head); font-weight: 600; font-size: .95rem; color: var(--ink); line-height: 1.25; }
.sector small { display: block; font-size: .8rem; color: var(--slate); margin-top: .3rem; }

/* ---------- Vert de charte : énergies renouvelables ----------
   Le reste du site est bleu. Le vert signale le photovoltaïque, les
   énergies renouvelables et le pompage solaire, et rien d'autre. */
.sector--vert svg { color: var(--green); }
.sector--vert span { color: var(--green-dark); }

.svc-card--vert .svc-num { background: var(--green); color: #fff; }
.svc-card--vert .svc-link { color: var(--green-dark); }
.svc-card--vert:hover { border-color: var(--green); }
.svc-card--vert .svc-tag { border-color: rgba(46,158,91,.4); color: var(--green-dark); background: transparent; }

/* =========================================================
   CTA BAND
   ========================================================= */
/* Le champ de clôture : bleu de marque plein, plus clair que le premier
   écran, pour que le dossier se ferme sur une page encrée et non sur un
   dégradé décoratif. */
.cta-band { background: var(--blue); color: #fff; position: relative; overflow: hidden; }
.cta-band::after { content: none; }
.cta-band .container { position: relative; z-index: 2; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; flex-wrap: wrap; }
.cta-inner h2 { color: #fff; margin-bottom: .4rem; }
.cta-inner p { color: rgba(255,255,255,.82); margin: 0; max-width: 52ch; }
.cta-actions { display: flex; gap: .8rem; flex-wrap: wrap; }

/* =========================================================
   FORM
   ========================================================= */
.form-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-md);
}
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 1rem; margin-bottom: 1rem; }
.field label {
  display: block; font-family: var(--ff-head); font-size: .82rem; font-weight: 600;
  color: var(--ink); margin-bottom: .4rem;
}
.field label span { color: var(--accent-dark); }
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem .95rem;
  font-family: var(--ff-body); font-size: .93rem; color: var(--ink);
  background: var(--paper-alt);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: .2s;
}
.field textarea { resize: vertical; min-height: 118px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--blue); background: #fff;
  box-shadow: 0 0 0 3px rgba(15,75,155,.12);
}
.form-note { font-size: .82rem; color: var(--slate); margin: .9rem 0 0; }
.field-hint { font-size: .78rem; color: var(--slate); margin: .4rem 0 0; }

/* Champ fichier */
.field input[type="file"] {
  padding: .6rem .7rem;
  font-size: .86rem;
  cursor: pointer;
}
.field input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600;
  padding: .45rem .9rem; margin-right: .8rem;
  color: var(--blue); background: var(--blue-50);
  border: 1px solid rgba(15,75,155,.2); border-radius: var(--radius);
  cursor: pointer; transition: .18s;
}
.field input[type="file"]::file-selector-button:hover { background: #e2ecfa; }

/* Message de retour du formulaire */
.form-flash {
  padding: .9rem 1.1rem; margin-bottom: 1.25rem;
  border-radius: var(--radius); font-size: .9rem;
  border: 1px solid transparent;
}
.form-flash--ok {
  background: #EAF6EF; color: var(--green-dark); border-color: rgba(46,158,91,.28);
}
.form-flash--ko {
  background: #FCEEEE; color: #9A2B2B; border-color: rgba(154,43,43,.25);
}

/* Pot de miel : hors écran, jamais masqué par display:none
   (certains robots ignorent les champs cachés de cette façon). */
.sahara-hp {
  position: absolute !important;
  left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* =========================================================
   FOOTER
   ========================================================= */
/* Le dossier se referme sur une page encrée du même bleu que sa couverture,
   pas sur un noir étranger au reste du document. */
.footer {
  background: var(--blue-900);
  color: var(--on-field-soft);
  font-size: .9rem;
  position: relative;
}
.footer::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) var(--rule), transparent var(--rule)),
    linear-gradient(to bottom, rgba(255,255,255,.04) var(--rule), transparent var(--rule));
  background-size: 88px 88px;
  mask-image: radial-gradient(110% 90% at 88% 0%, #000 0%, transparent 74%);
}
.footer > * { position: relative; z-index: 1; }
.footer-top { padding: clamp(3rem, 5vw, 4.5rem) 0 2.5rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: clamp(1.75rem, 4vw, 3rem); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer h4 {
  color: #fff; font-size: .82rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.1rem;
}
.footer-brand img { height: 52px; width: auto; margin-bottom: 1.1rem; }
.footer-brand p { font-size: .89rem; line-height: 1.7; max-width: 34ch; }
.footer-links li { margin-bottom: .6rem; }
.footer-links a { transition: color .2s; }
.footer-links a:hover { color: var(--accent); }
.footer-contact li { display: flex; gap: .7rem; margin-bottom: .85rem; align-items: flex-start; }
.footer-contact svg { width: 16px; height: 16px; color: var(--accent); flex: none; margin-top: .22rem; }
.footer-contact a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1); padding: 1.4rem 0;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  font-size: .82rem; color: var(--on-field-soft);
}
.footer-bottom a:hover { color: var(--accent); }

/* Floating WhatsApp */
.wa-float {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 80;
  width: 56px; height: 56px; border-radius: 50%;
  /* Exception demandée par le client : le bouton WhatsApp garde le vert
     officiel de la marque, pour être reconnu au premier coup d'oeil.
     C'est la seule entorse au vert reserve au renouvelable. */
  background: #25D366; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(37,211,102,.42);
  transition: transform .25s;
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 28px; height: 28px; }

/* =========================================================
   BREADCRUMB / PAGE HERO
   ========================================================= */
.page-hero { position: relative; background: var(--ink); color: rgba(255,255,255,.75); padding: clamp(3rem,6vw,5rem) 0 clamp(3rem,6vw,4.5rem); overflow: hidden; }
.page-hero .hero-bg img { opacity: .28; }
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; max-width: 20ch; }
.page-hero .lead { max-width: 58ch; }
.crumb { display: flex; align-items: center; gap: .5rem; font-size: .84rem; color: rgba(255,255,255,.55); margin-bottom: 1.25rem; flex-wrap: wrap; }
.crumb a:hover { color: var(--accent); }
.crumb svg { width: 13px; height: 13px; opacity: .55; }
.crumb span { color: var(--accent); }

/* Anchor sub-nav */
.subnav { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: var(--nav-h); z-index: 60; }
.subnav .container { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; }
.subnav .container::-webkit-scrollbar { display: none; }
.subnav a {
  padding: .95rem .9rem; font-family: var(--ff-head); font-weight: 600; font-size: .88rem;
  color: var(--slate); white-space: nowrap; border-bottom: 2px solid transparent; transition: .2s;
}
.subnav a:hover, .subnav a.active { color: var(--blue); border-bottom-color: var(--blue); }

/* Related services */
.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1rem; }
.related a {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1.25rem; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: .22s;
}
.related a:hover { border-color: var(--blue); transform: translateX(4px); box-shadow: var(--shadow-sm); }
.related-ico { width: 42px; height: 42px; border-radius: var(--radius); background: var(--blue-50); display: grid; place-items: center; flex: none; }
.related-ico svg { width: 21px; height: 21px; color: var(--blue); stroke-width: 1.6; }
.related strong { display: block; font-family: var(--ff-head); font-size: .95rem; color: var(--ink); }
.related small { color: var(--slate); font-size: .81rem; }

/* Callout — encadré de note technique.
   Pas de barre latérale colorée : c'est l'icône qui porte l'accent, le cadre
   reste un filet discret. */
/* Une note portée au dossier : un filet, pas un bloc teinté à coins ronds. */
.callout {
  display: flex; gap: 1rem; padding: 1.25rem 1.4rem 1.25rem 1.25rem;
  background: transparent;
  border: var(--rule) solid var(--line-strong);
  border-radius: var(--radius);
  font-size: .92rem;
}
.callout svg { width: 21px; height: 21px; color: var(--blue); flex: none; margin-top: .15rem; }
.callout strong { color: var(--ink); }
.callout p:last-child { margin-bottom: 0; }

/* =========================================================
   REVEAL ANIMATION
   ========================================================= */
/* Hidden only when JS is available to reveal it again — sans JS le contenu reste visible */
/* L'apparition générale n'est PAS le moment d'auteur : la même entrée
   répétée sur chaque section est du bruit. Elle se réduit donc à un fondu
   court, presque imperceptible, qui installe le contenu sans le mettre en
   scène. Les deux moments réellement composés — la colonne vertébrale qui
   se tire et les routes d'approvisionnement qui se tracent — gardent seuls
   le droit de se faire remarquer. */
.js .reveal { opacity: 0; transition: opacity var(--dur) var(--ease); }
.js .reveal.in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Utility */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.center { text-align: center; }

/* =========================================================
   SLOGAN, FLUX D'ÉTAPES, ATOUTS, PLANISPHÈRE, PROJETS, DOCS
   ========================================================= */

/* ---------- Slogan officiel ----------
   Agrandi à la demande du client : c'est la phrase que l'on doit retenir en
   quittant le premier écran, elle ne peut pas être plus discrète que le
   paragraphe au-dessus d'elle. */
.hero-slogan {
  margin: 1.9rem 0 0;
  font-family: var(--ff-head); font-style: italic;
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  font-weight: 600; line-height: 1.3;
  letter-spacing: -.01em;
  color: #fff;
  max-width: 24ch;
}
.footer-slogan {
  margin: .9rem 0 0;
  font-family: var(--ff-head); font-style: italic;
  font-size: .92rem; color: var(--accent);
}

/* ---------- Flux d'étapes numérotées ----------
   Remplace .process : la numérotation est explicite et le trait de liaison
   se dessine à l'apparition, ce qui fait lire le processus dans l'ordre. */
/* Colonnes explicites, et non `auto-fit` : le trait de liaison doit savoir
   quelle étape termine une rangée, sinon la dernière de chaque rangée tire
   un trait vers une étape qui se trouve à la ligne suivante. */
.flow {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(var(--flow-cols, 5), minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none;
}
@media (max-width: 1180px) { .flow { --flow-cols: 3; } }
@media (max-width: 860px)  { .flow { --flow-cols: 2; } }
@media (max-width: 620px)  { .flow { --flow-cols: 1; } }
.flow-step { position: relative; padding-top: 3.1rem; }
.flow-num {
  position: absolute; top: 0; left: 0;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--blue-50); color: var(--blue);
  border: 1.5px solid rgba(15,75,155,.2);
  font-family: var(--ff-head); font-weight: 700; font-size: .9rem;
  font-variant-numeric: tabular-nums;
  transition: background .45s ease, color .45s ease, border-color .45s ease;
  transition-delay: calc(var(--flow-i, 0) * .09s + .15s);
}
/* Le trait qui relie une étape à la suivante. */
.flow-step::after {
  content: ''; position: absolute;
  top: 20px; left: 40px; right: -1.5rem; height: 1.5px;
  background: var(--line);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.3,.7,.4,1);
  transition-delay: calc(var(--flow-i, 0) * .09s + .25s);
}
/* Fin de rangée et fin de liste : aucun trait ne part dans le vide. */
.flow-step:last-child::after { display: none; }
@media (min-width: 1181px) { .flow-step:nth-child(5n)::after { display: none; } }
@media (max-width: 1180px) and (min-width: 861px) { .flow-step:nth-child(3n)::after { display: none; } }
@media (max-width: 860px) and (min-width: 621px) { .flow-step:nth-child(2n)::after { display: none; } }
.flow-step h3 { font-size: 1.02rem; margin-bottom: .4rem; }
.flow-step p { font-size: .88rem; color: var(--slate); margin: 0; }

/* À l'apparition de la section, les pastilles s'allument et les traits se tirent. */
.flow.in .flow-num { background: var(--blue); color: #fff; border-color: var(--blue); }
.flow.in .flow-step::after { transform: scaleX(1); }

.flow--dark .flow-num { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.22); }
.flow--dark .flow-step::after { background: rgba(255,255,255,.16); }
.flow--dark .flow-step p { color: rgba(255,255,255,.6); }
.flow--dark.in .flow-num { background: var(--accent); color: var(--ink); border-color: var(--accent); }

@media (max-width: 640px) {
  /* En colonne unique, un trait horizontal vers la droite n'a plus de sens. */
  .flow-step::after { display: none; }
  .flow-step { padding-top: 0; padding-left: 3.4rem; }
  .flow-num { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-num, .flow-step::after { transition: none; }
  .flow-step::after { transform: scaleX(1); }
}

/* ---------- Planisphère en pointillés ----------
   Bridé en largeur : à 1240 px la carte ferait près de 500 px de haut et
   repousserait le processus hors de l'écran. */
/* Texte à gauche, carte à droite, processus en pleine largeur dessous. */
.sourcing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
/* Ici le filet, quand il y en a un, appartient à la grille et non à la
   colonne : imbriqué plus bas il s'arrêterait au milieu de la page.
   Le sélecteur doit peser plus lourd que la règle d'adjacence ci-dessus,
   sinon les DEUX filets s'affichent — un pleine largeur, un tronqué. */
.sourcing-grid .record-head,
.section--field + .section--field .sourcing-grid .record-head {
  border-top: 0; padding-top: 0;
}
@media (max-width: 1080px) {
  .sourcing-grid { grid-template-columns: 1fr; }
}
/* Padding resserré : à ce réglage la section entière tient sous la barre
   de navigation sur un portable 1366 × 768, ce qui était l'objectif. */
#sourcing { padding-block: clamp(2.5rem, 5vw, 4rem); }

.worldmap-wrap {
  margin: 0;
  padding: 0;
  overflow-x: auto;
}
.worldmap {
  width: 100%; max-width: 660px; min-width: 460px;
  height: auto; display: block; margin-inline: auto;
}
.wm-land { fill: rgba(255,255,255,.17); }
.wm-route {
  fill: none;
  stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 5 5;
  opacity: .55;
}
.reveal.in .wm-route {
  animation: wm-trace 1.1s cubic-bezier(.3,.7,.4,1) backwards;
  animation-delay: var(--wm-delai, 0s);
}
@keyframes wm-trace {
  from { stroke-dashoffset: 260; opacity: 0; }
  to   { stroke-dashoffset: 0; opacity: .55; }
}
/* Les points qui remontent les routes jusqu'au hub algérien. */
.wm-flux { fill: #fff; filter: drop-shadow(0 0 4px rgba(78,147,224,.9)); }

.wm-pin circle { fill: var(--accent); }
.wm-pin--hub circle { fill: #fff; }
/* Plus de battement perpétuel : le hub se pose une fois, avec les routes.
   Un mouvement qui ne s'arrête jamais n'est plus un moment, c'est un décor. */
.reveal.in .wm-pin--hub circle {
  animation: wm-pose .5s var(--ease) backwards;
  animation-delay: 1.15s;
  transform-origin: center;
}
@keyframes wm-pose {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal.in .wm-route, .reveal.in .wm-pin--hub circle { animation: none; }
  /* animateMotion est du SMIL : il n'écoute pas les transitions CSS.
     Le seul moyen sûr de le taire est de masquer les points mobiles. */
  .wm-flux { display: none; }
}

/* ---------- Dossier « Pourquoi nous choisir » ----------
   Six cartes identiques « icône + titre + texte » sont le conteneur
   paresseux : elles disent la même chose sur tous les sites du secteur et
   n'ordonnent rien. Ici les atouts sont les articles d'un dossier : un
   numéro d'article, un terme, sa définition, séparés par un filet.
   La lecture se fait en colonne, comme un document, pas en damier. */
.atouts {
  display: grid; gap: 1.15rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1000px) { .atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .atouts { grid-template-columns: 1fr; } }
.atout {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  /* Hauteur juste suffisante pour le texte le plus long : au-delà, les
     cartes courtes se retrouvaient à moitié vides. */
  min-height: 168px;
  padding: 1.35rem 1.4rem 1.4rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease;
}
.atout:hover { box-shadow: var(--shadow-md); border-color: var(--blue-300); transform: translateY(-4px); }

/* Cascade d'apparition. Conditionnée à la classe `js` comme le reste du
   thème : sans JavaScript la classe `in` n'arrive jamais et les cartes
   resteraient invisibles. Une animation plutôt qu'une transition, pour
   laisser `transform` disponible au survol une fois la cascade finie. */
.js .atout { opacity: 0; }
.js .atouts.in .atout {
  opacity: 1;
  animation: atout-monte .55s cubic-bezier(.3,.7,.4,1) backwards;
  animation-delay: calc(var(--atout-i, 0) * .08s);
}
@keyframes atout-monte {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

.atout h3 { font-size: 1.05rem; margin-bottom: .4rem; position: relative; z-index: 2; }
.atout p {
  font-size: .875rem; color: var(--slate); margin: 0; line-height: 1.55;
  position: relative; z-index: 2;
  /* Le texte s'arrête avant le filigrane au lieu de passer dessous. */
  max-width: 30ch; padding-right: 3.5rem;
}

/* Icône en filigrane, angle bas-droit. */
.atout-ico {
  position: absolute; right: -.3rem; bottom: -.45rem;
  z-index: 1; pointer-events: none;
  color: var(--blue); opacity: .16;
  transition: transform .4s cubic-bezier(.3,.7,.4,1), opacity .3s ease;
}
.atout-ico svg { width: 78px; height: 78px; display: block; }
.atout:hover .atout-ico { transform: translate(-4px, -5px) rotate(-6deg) scale(1.06); opacity: .26; }

/* Sur un champ bleu, la section inverse ses encres — mais la carte claire,
   elle, reste blanche. Sans ce rappel son titre passait en blanc sur blanc
   et son texte en bleu clair : invisible. */
.section--field .atout {
  background: #fff;
  border-color: var(--line-strong);
}
.section--field .atout h3 { color: #0A1729; }
.section--field .atout p  { color: #5A6B80; }
.section--field .atout-ico { color: var(--blue); }

/* Le damier survit sur fond bleu : la carte pleine prend le bleu de marque,
   plus clair que le champ, donc elle ressort au lieu de s'y fondre.
   Sélecteur au même poids que la règle claire ci-dessus, sinon celle-ci
   repeindrait toutes les cartes en blanc. */
.section--field .atout--plein {
  background: var(--blue);
  border-color: var(--blue-500);
}
.section--field .atout--plein h3 { color: #fff; }
.section--field .atout--plein p  { color: rgba(255,255,255,.82); }
.section--field .atout--plein .atout-ico { color: #fff; opacity: .22; }

/* La carte pleine : bleu de marque, texte inversé. */
.atout--plein {
  background: var(--blue); border-color: var(--blue);
  box-shadow: 0 6px 20px rgba(15,75,155,.24);
}
.atout--plein h3 { color: #fff; }
.atout--plein p { color: rgba(255,255,255,.8); }
.atout--plein .atout-ico { color: #fff; opacity: .22; }
.atout--plein:hover {
  border-color: var(--blue-700); box-shadow: 0 14px 32px rgba(15,75,155,.32);
}
.atout--plein:hover .atout-ico { opacity: .32; }

@media (prefers-reduced-motion: reduce) {
  .js .atout, .js .atouts.in .atout { opacity: 1; animation: none; }
  .atout, .atout:hover { transform: none; transition: none; }
  .atout-ico, .atout:hover .atout-ico { transition: none; transform: none; }
}

/* ---------- Références : intro fixe, projets qui défilent ---------- */
.reals {
  display: grid;
  grid-template-columns: minmax(0, clamp(260px, 26vw, 340px)) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.reals-intro h2 { margin-bottom: .6rem; }
.reals-intro .lead { margin-bottom: 1.5rem; max-width: 34ch; }

.reals-zone { position: relative; min-width: 0; }
.reals-piste {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(240px, 26vw, 320px);
  gap: 1.15rem;
  overflow-x: auto;
  /* `proximity` et non `mandatory` : l'accrochage impératif se bat avec le
     défilement animé image par image et le ramène en arrière. Ici il aide
     le geste au doigt sans contrarier les flèches. */
  scroll-snap-type: x proximity;
  /* Pas de `scroll-behavior: smooth` ici : combiné à l'accrochage, il
     empêche purement et simplement le défilement programmé sur certains
     moteurs, et il ralentit aussi le geste de l'utilisateur. L'adoucissement
     est demandé au coup par coup depuis le script. */
  padding-bottom: .5rem;
  /* L'ascenseur natif ferait double emploi avec les flèches. */
  scrollbar-width: none;
}
.reals-piste::-webkit-scrollbar { display: none; }
.reals-piste > * { scroll-snap-align: start; }
/* Toutes les photos au même cadrage, quelle que soit la source. */
.reals-piste .proj-media { aspect-ratio: 4 / 3; }
.reals-piste .proj-media img { width: 100%; height: 100%; object-fit: cover; }
/* Les cartes ont la même hauteur : les titres partagent leur ligne. */
.reals-piste .proj { height: 100%; }

/* Coins adoucis et léger relief au repos. Aucun effet pendant le
   déplacement : la piste se décale simplement d'une carte, de droite à
   gauche, et les cartes sortent du cadre entières. Le flou et le recul
   essayés auparavant brouillaient la lecture au lieu de servir le geste. */
.reals-piste .proj {
  border-radius: 14px;
  box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 10px 26px rgba(0,0,0,.18);
}

/* ---------- Flèches du carrousel ----------
   Placées SOUS les cartes, du côté où le défilement se poursuit : la main
   les trouve là où l'œil vient de s'arrêter. */
.reals-nav {
  display: flex; gap: .55rem;
  margin-top: 1.15rem;
  justify-content: flex-end;
}
.reals-nav button {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: var(--rule) solid var(--on-field-line-2);
  background: transparent; color: #fff;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease);
}
.reals-nav button:hover:not(:disabled) { background: rgba(255,255,255,.12); border-color: #fff; }
/* Bout de piste : la flèche s'éteint au lieu de disparaître, pour que le
   couple reste stable et qu'on comprenne qu'il n'y a plus rien après. */
.reals-nav button:disabled { opacity: .28; cursor: default; }
.reals-nav svg { width: 18px; height: 18px; }

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

/* ---------- Cartes de référence projet ---------- */
.proj-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}
.proj {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: var(--rule) solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.proj:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
/* Le cadre est fixé par le rapport, jamais par la photo.
   Sans le positionnement absolu de l'image, la boîte est un élément flex :
   `min-height: auto` l'empêche de descendre sous la hauteur naturelle de son
   contenu, si bien qu'une photo plus carrée que les autres faisait grandir
   sa vignette — le défaut n'apparaît qu'une fois l'image chargée. */
.proj-media {
  position: relative; display: block;
  aspect-ratio: 16/10; overflow: hidden;
  background: var(--paper-alt);
  flex: none; min-height: 0;
}
.proj-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* Un tampon, pas une pastille : le statut est apposé sur la pièce, encadré
   d'un filet, à angles francs — c'est ce que promet le monde retenu. */
.proj-statut {
  position: absolute; top: .7rem; left: .7rem;
  padding: .28rem .55rem;
  border-radius: 2px;
  border: var(--rule) solid rgba(255,255,255,.5);
  background: rgba(6,38,90,.86); color: #fff;
  font-family: var(--ff-head); font-size: .7rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
.proj-statut--encours { background: var(--accent); color: var(--ink); }
.proj-body { padding: 1.2rem 1.3rem 1.35rem; display: flex; flex-direction: column; gap: .5rem; }
.proj-secteur {
  font-family: var(--ff-head); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--blue);
}
.proj-titre { font-size: 1.06rem; margin: 0; }
.proj-titre a:hover { color: var(--blue); }
.proj-desc { font-size: .88rem; color: var(--slate); margin: 0; line-height: 1.6; }
.proj-meta {
  display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem;
  margin: .35rem 0 0; padding-top: .8rem;
  border-top: 1px solid var(--paper-alt);
  font-size: .84rem;
}
.proj-meta dt { color: var(--slate-light); }
.proj-meta dd { margin: 0; color: var(--ink-600); }

/* ---------- Documents téléchargeables ---------- */
.doc-list { display: grid; gap: .75rem; max-width: 760px; }
.doc a {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.2rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color .2s, box-shadow .2s;
}
.doc a:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); }
.doc-ico {
  display: grid; place-items: center;
  width: 42px; height: 42px; flex: none;
  border-radius: var(--radius);
  background: var(--blue-50); color: var(--blue);
  font-family: var(--ff-head); font-size: .72rem; font-weight: 700; letter-spacing: .04em;
}
.doc-txt { flex: 1; min-width: 0; }
.doc-txt strong { display: block; color: var(--ink); font-family: var(--ff-head); font-size: .96rem; }
.doc-txt small { display: block; color: var(--slate); font-size: .84rem; margin-top: .15rem; }
.doc-poids { font-size: .82rem; color: var(--slate-light); flex: none; font-variant-numeric: tabular-nums; }

/* ---------- Réseaux sociaux du pied de page ---------- */
.footer-social { display: flex; gap: .55rem; margin-top: 1.25rem; }
.footer-social a {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius);
  color: rgba(255,255,255,.66);
  transition: .2s;
}
.footer-social a:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.footer-social svg { width: 16px; height: 16px; }
.footer-legal a:hover { color: var(--accent); }

/* ---------- Baseline de marque sur deux lignes ---------- */
.brand-bl { display: block; }

/* ---------- Bandeau défilant de logos ----------
   La piste contient deux fois la même série ; on la translate de la moitié
   de sa largeur, ce qui rend la boucle invisible. */
/* ---------- Registre des donneurs d'ordre ----------
   Un registre, pas un bandeau qui défile : la page sert à VÉRIFIER une
   référence. Un logo qui passe, et que le bord coupe en deux, dessert
   exactement ce que la section doit prouver. Les cinq tiennent en entier.
   Les logos fournis ont un fond blanc opaque : on l'assume en posant
   chacun sur une tuile blanche de taille identique. */
.registre {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  border-top: var(--rule) solid var(--line-strong);
  border-left: var(--rule) solid var(--line);
}
.registre-ligne {
  display: grid; place-items: center;
  min-height: 132px; padding: 1.35rem 1.5rem;
  background: #fff;
  border-right: var(--rule) solid var(--line);
  border-bottom: var(--rule) solid var(--line);
  transition: background var(--dur) var(--ease);
}
.registre-ligne:hover { background: var(--blue-50); }
.registre-ligne img {
  max-height: 82px; width: auto; max-width: 100%;
  object-fit: contain;
}
.registre-ligne .partner-name {
  font-family: var(--ff-head); font-weight: 700; font-size: 1.15rem;
  color: var(--ink); letter-spacing: -.01em;
}
/* =========================================================
   SIMULATEUR PHOTOVOLTAÏQUE
   Le vert est réservé au solaire par la charte : il sert ici
   à distinguer l'outil du reste du site, qui est bleu.
   ========================================================= */

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

/* Le simulateur reste sur papier : c'est un outil qu'on remplit, et un
   formulaire se lit mieux sur fond clair. Le vert de la charte l'identifie
   comme photovoltaïque sans qu'il ait besoin d'un fond à lui. */
.simulateur { background: var(--paper-alt); border-top: var(--rule) solid var(--line-strong); }

/* ---------- Fil d'étapes de l'assistant ---------- */
.sim-progress {
  display: flex; align-items: center; gap: .5rem;
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  max-width: 900px;
}
.sim-progress__item {
  display: flex; align-items: center; gap: .55rem;
  flex: 1; min-width: 0;
  color: var(--slate-light);
  font-family: var(--ff-head); font-size: .84rem; font-weight: 600;
}
.sim-progress__item + .sim-progress__item::before {
  content: ''; flex: 1; height: 1.5px; background: var(--line); min-width: .75rem;
}
.sim-progress__num {
  display: grid; place-items: center;
  width: 28px; height: 28px; flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: #fff;
  font-size: .82rem;
  transition: .25s;
}
.sim-progress__lib { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-progress__item.is-actif { color: var(--green-dark); }
.sim-progress__item.is-actif .sim-progress__num { border-color: var(--green); background: var(--green); color: #fff; }
.sim-progress__item.is-fait { color: var(--ink-600); }
.sim-progress__item.is-fait .sim-progress__num { border-color: var(--green); color: var(--green-dark); }

@media (max-width: 640px) {
  /* Sur téléphone on ne garde que les pastilles : les libellés ne tiennent pas. */
  .sim-progress__lib { display: none; }
  .sim-progress__item { flex: 0 0 auto; }
  .sim-progress__item + .sim-progress__item::before { min-width: 1.5rem; }
}

/* ---------- Étapes ---------- */
.sim-form { max-width: 900px; }
/* En mode assistant, la liste d'appareils défile dans son propre cadre :
   32 lignes d'un coup repousseraient les boutons hors de l'écran. */
/* Plus d'ascenseur interne : les familles d'appareils sont toutes repliées
   au départ, l'étape tient donc sur un écran. Un cadre qui défile dans une
   page qui défile déjà oblige à chercher où poser la souris. */
.sim-form--wizard .sim-panneau[data-mode="appareils"] {
  max-height: none; overflow: visible;
}
/* Les familles se posent sur deux colonnes : six lignes empilées faisaient
   descendre les boutons hors de l'écran. */
.sim-form--wizard .sim-panneau[data-mode="appareils"] .sim-cat-liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
  align-items: start;
}
.sim-cat[open] { grid-column: 1 / -1; }
@media (max-width: 700px) {
  .sim-form--wizard .sim-panneau[data-mode="appareils"] .sim-cat-liste { grid-template-columns: 1fr; }
}
.sim-etape {
  /* Un <fieldset> vaut `min-width: min-content` par défaut, ce qui l'empêche
     de descendre sous la largeur de son contenu le plus large et fait déborder
     la page sur les très petits écrans. */
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: clamp(1.25rem, 3vw, 2rem);
  margin: 0 0 1.25rem;
  box-shadow: var(--shadow-sm);
}
.sim-etape__titre {
  display: flex; align-items: center; gap: .75rem;
  font-family: var(--ff-head); font-weight: 700;
  font-size: 1.12rem; color: var(--ink);
  padding: 0; margin-bottom: 1.25rem;
}
.sim-etape__num {
  display: grid; place-items: center;
  width: 30px; height: 30px; flex: none;
  border-radius: 50%;
  background: var(--green); color: #fff;
  font-size: .9rem; font-weight: 700;
}

/* ---------- Choix du mode ---------- */
.sim-modes { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.sim-mode { cursor: pointer; }
.sim-mode input { position: absolute; opacity: 0; pointer-events: none; }
.sim-mode__box {
  display: block; height: 100%;
  padding: 1rem 1.1rem;
  border: 1.5px solid var(--line); border-radius: var(--radius);
  transition: .2s ease;
}
.sim-mode:hover .sim-mode__box { border-color: var(--green); }
.sim-mode input:checked + .sim-mode__box {
  border-color: var(--green); background: rgba(46,158,91,.06);
  box-shadow: 0 0 0 1px var(--green);
}
.sim-mode input:focus-visible + .sim-mode__box { outline: 2px solid var(--green-dark); outline-offset: 2px; }
.sim-mode__lib { display: block; font-family: var(--ff-head); font-weight: 600; color: var(--ink); margin-bottom: .3rem; }
.sim-mode__desc { display: block; font-size: .85rem; line-height: 1.5; color: var(--slate); }

/* ---------- Catalogue d'appareils, par famille dépliable ---------- */
.sim-aide { font-size: .85rem; color: var(--slate); line-height: 1.55; margin-bottom: 1.25rem; }

.sim-cat {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  margin-bottom: .7rem;
  overflow: hidden;
}
.sim-cat[open] { border-color: rgba(46,158,91,.35); }

.sim-cat__titre {
  display: flex; align-items: center; gap: .8rem;
  padding: .95rem 1.1rem;
  cursor: pointer;
  font-family: var(--ff-head); font-weight: 600; font-size: .98rem;
  color: var(--ink);
  list-style: none;
  transition: background .2s;
}
.sim-cat__titre::-webkit-details-marker { display: none; }
.sim-cat__titre:hover { background: var(--paper-alt); }
.sim-cat__titre:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

.sim-cat__ico { display: grid; place-items: center; flex: none; color: var(--green); }
.sim-cat__ico svg { width: 20px; height: 20px; }
.sim-cat__nom { flex: 1; min-width: 0; }

.sim-cat__compteur {
  flex: none;
  padding: .15rem .5rem;
  border-radius: 2px;
  background: var(--green); color: #fff;
  font-size: .74rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sim-cat__chevron { display: grid; place-items: center; flex: none; color: var(--slate-light); transition: transform .25s ease; }
.sim-cat__chevron svg { width: 16px; height: 16px; }
.sim-cat[open] .sim-cat__chevron { transform: rotate(180deg); }

/* Les appareils de la famille, en cartes. */
.sim-cartes {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
  padding: .3rem 1.1rem 1.15rem;
}

.sim-ligne {
  display: flex; flex-direction: column; gap: .6rem;
  padding: .85rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-alt);
  transition: border-color .2s, background .2s;
}
.sim-ligne.is-actif {
  border-color: var(--green);
  background: rgba(46,158,91,.06);
}
.sim-ligne.is-actif .sim-ligne__nom label { color: var(--green-dark); font-weight: 600; }
.sim-ligne__nom { display: flex; flex-direction: column; gap: .1rem; }
.sim-ligne__nom label { color: var(--ink-600); font-size: .9rem; cursor: pointer; line-height: 1.35; }
.sim-ligne__w { font-size: .76rem; color: var(--slate-light); font-variant-numeric: tabular-nums; }
.sim-ligne__champs { display: flex; align-items: flex-end; gap: .5rem; }
.sim-ligne__champs .sim-champ { flex: 1; min-width: 0; }
.sim-ligne__champs .sim-champ input { width: 100%; }

.sim-champ { display: flex; flex-direction: column; gap: .2rem; }
.sim-champ__lib { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-light); }
.sim-champ input {
  width: 5rem; padding: .45rem .55rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--ff-body); font-size: .92rem; color: var(--ink);
  text-align: center; font-variant-numeric: tabular-nums;
  background: #fff;
}
.sim-champ input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(46,158,91,.15); }
.sim-champ--fixe .sim-champ__val {
  display: block; width: 100%; padding: .45rem .55rem;
  border: 1px dashed var(--line); border-radius: var(--radius);
  text-align: center; font-size: .92rem; color: var(--slate-light);
}

/* Total vivant */
.sim-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin: 1.5rem 0 0; padding: .9rem 1.1rem;
  background: rgba(46,158,91,.08);
  border: 1px solid rgba(46,158,91,.28);
  border-radius: var(--radius);
}
.sim-total__lib { font-family: var(--ff-head); font-weight: 600; color: var(--ink); }
.sim-total__val { font-family: var(--ff-head); font-weight: 700; font-size: 1.2rem; color: var(--green-dark); font-variant-numeric: tabular-nums; }

/* ---------- Champs libres ---------- */
.sim-duo { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.sim-champ-bloc { display: flex; flex-direction: column; gap: .4rem; margin: 0; }
.sim-champ-bloc > label { font-family: var(--ff-head); font-weight: 600; font-size: .92rem; color: var(--ink); }
.sim-champ-bloc > label em { font-style: normal; font-weight: 400; color: var(--slate-light); }
.sim-champ-bloc__saisie { display: flex; align-items: stretch; }
.sim-champ-bloc__saisie input {
  flex: 1; min-width: 0;
  padding: .7rem .85rem;
  border: 1px solid var(--line); border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  font-family: var(--ff-body); font-size: 1rem; color: var(--ink);
  font-variant-numeric: tabular-nums; background: #fff;
}
.sim-champ-bloc__saisie input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(46,158,91,.15); }
.sim-unite {
  display: grid; place-items: center;
  padding: 0 .85rem;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .85rem; color: var(--slate); white-space: nowrap;
}
.sim-champ-bloc select {
  padding: .7rem .85rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--ff-body); font-size: 1rem; color: var(--ink);
  background: #fff; max-width: 22rem;
}
.sim-champ-bloc select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(46,158,91,.15); }

/* ---------- Actions ---------- */
.sim-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
.sim-actions .btn-primary { background: var(--green); box-shadow: 0 4px 14px rgba(46,158,91,.28); }
.sim-actions .btn-primary:hover { background: var(--green-dark); box-shadow: 0 8px 22px rgba(46,158,91,.34); }
.sim-actions__etat { font-size: .88rem; color: var(--slate); }
.sim-actions__etat--ko { color: #B42318; }

/* ---------- Résultat ---------- */
/* Pas de filet vert épais en haut : il se casse dans les angles arrondis, et
   l'appartenance à l'outil solaire est déjà portée par le sur-titre et les
   chiffres, tous deux en vert. */
.sim-resultat {
  max-width: 900px;
  margin-top: 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--shadow-md);
}
.sim-resultat:focus { outline: none; }
.sim-resultat__tete { margin-bottom: 1.5rem; }
.sim-resultat__kicker {
  font-family: var(--ff-head); font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--green-dark); margin: 0 0 .35rem;
}
.sim-resultat__titre { font-size: clamp(1.3rem, 3vw, 1.7rem); margin: 0 0 .5rem; color: var(--ink); }
.sim-resultat__psh { font-size: .88rem; color: var(--slate); margin: 0; line-height: 1.6; }

.sim-chiffres {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.sim-chiffre { background: #fff; padding: 1.1rem 1rem; text-align: center; }
.sim-chiffre__val {
  display: block;
  font-family: var(--ff-head); font-weight: 800;
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  color: var(--green-dark); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.sim-chiffre__val small { font-size: .5em; font-weight: 600; color: var(--slate); }
.sim-chiffre__lib { display: block; margin-top: .35rem; font-size: .8rem; color: var(--slate); }

.sim-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.sim-table th, .sim-table td { padding: .7rem .5rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--paper-alt); }
.sim-table th[scope="row"] { width: 40%; font-weight: 500; color: var(--slate); }
.sim-table td { color: var(--ink); font-variant-numeric: tabular-nums; }
.sim-table__note { font-style: normal; font-size: .82rem; color: var(--slate-light); }

.sim-detail { margin-top: 1.25rem; }
.sim-detail summary {
  cursor: pointer; font-family: var(--ff-head); font-weight: 600;
  font-size: .9rem; color: var(--green-dark); padding: .5rem 0;
}
.sim-table--detail { margin-top: .5rem; font-size: .86rem; }
.sim-table--detail th[scope="col"] { width: auto; font-family: var(--ff-head); color: var(--ink); font-weight: 600; }
.sim-table--detail td { color: var(--slate); }

/* Même traitement que .form-flash--ko : fond teinté + filet complet. */
.sim-alerte {
  margin: 0 0 1.5rem; padding: .9rem 1.1rem;
  background: #FCEEEE;
  border: 1px solid rgba(154,43,43,.25);
  border-radius: var(--radius);
  font-size: .88rem; line-height: 1.6; color: #9A2B2B;
}

.sim-note {
  margin-top: 1.25rem; padding: .9rem 1.1rem;
  background: var(--paper-alt); border-radius: var(--radius);
  font-size: .85rem; line-height: 1.6; color: var(--slate);
}

.sim-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  margin-top: 1.75rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.sim-cta__txt { flex: 1; min-width: 15rem; margin: 0; font-size: .85rem; line-height: 1.6; color: var(--slate); }

@media (max-width: 640px) {
  .sim-ligne { align-items: flex-start; }
  .sim-ligne__champs { width: 100%; justify-content: flex-end; }
  .sim-table th[scope="row"] { width: 45%; }
}