/* ═══════════════════════════════════════════════════════════════════
   FX SERVICES — Feuille de styles unique
   Palette et règles issues de DA/FX_SERVICES_BRAND.md.
   Aucune webfont : pile système = zéro requête bloquante, LCP texte.

   ⚠ PALETTE VERROUILLÉE — 15 août 2026.
   Toute modification passe par :root et par une entrée au §12 de la
   charte. Ne jamais coder une couleur en dur dans un composant.
   ═══════════════════════════════════════════════════════════════════ */

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

:root {

  /* ══ PALETTE DE MARQUE ══════════════════════════════════════════ */
  --fx-blue:       #0053B8;   /* signature — teinte 213°, saturation 100 % */
  --fx-orange:     #F26A00;
  --fx-anthracite: #51595F;
  --fx-dark:       #0E2E47;   /* LA base sombre — hero, CTA, pied de page */
  --fx-white:      #FFFFFF;

  /* ══ BLEUS — une teinte, plusieurs valeurs ══════════════════════
     Un bleu de LOGO doit se lire comme du bleu à 38 px sur blanc : il
     lui faut de la clarté. Un bleu d'APLAT doit accueillir du texte
     blanc et un accent orange : il lui faut de la profondeur. Exigences
     opposées — aucune valeur unique ne les tient.
     Mesure : --fx-blue sur --fx-dark = 1,95:1. La roue du logo
     disparaît sur la base. D'où la variante à roue claire.            */
  --blue-deep:  #003F8C;   /* survol de bouton bleu — 10,1:1 avec du blanc */
  --blue-field: #133F61;   /* aplat de section, un cran au-dessus de la base */
  --blue-light: #81B1EB;   /* fond sombre — 6,3:1. PROSCRIT sur blanc : 2,2:1 */
  --blue-wash:  #E9F0FB;   /* unique aplat très clair */
  /* --blue-line #C8D9F2 retiré le 16 août 2026 : son unique consommateur
     était le filet du bandeau chiffres, lequel est passé sur --paper.
     Un filet bleu sur du blanc était hors rôle et quasi invisible.     */

  /* ══ ORANGES ════════════════════════════════════════════════════
     --fx-orange   fonds de CTA — texte --ink dessus, 5,3:1
     --orange-text texte orange sur fond clair — 6,1:1
     --orange-title accent de titre et pictos sur fond clair — 3,5 / 3,2:1
     --orange-tint  micro-labels et pictos sur fond sombre — 5,9 / 4,7:1  */
  --orange-text:  #A34700;   /* texte courant orange — 6,1:1 */
  /* Accent de TITRE et pictogrammes sur fond clair. Même teinte (26°) et
     même saturation (100 %) que --fx-orange, valeur abaissée de 95 à 89 %.
     C'est le seul orange qui passe à la fois sur --paper (3,49:1) et sur
     --paper-alt (3,22:1). --fx-orange y tombe à 2,83:1 et --orange-text
     vire au brun. Ne pas remplacer par l'un ou par l'autre.            */
  --orange-title: #E36200;
  --orange-wash:  #FDF0E4;
  /* Orange des micro-labels et pictos sur fond sombre. #FFC48A donnait
     9,0:1 mais à 46 % de saturation : un pastel, qui ne se lisait plus
     comme l'orange de la marque. #FF8A2B monte à 83 % de saturation et
     tient 4,67:1 sur --blue-field et 5,95:1 sur --fx-dark — au-dessus du
     seuil AA du texte courant, donc utilisable à 13 px.               */
  --orange-tint:  #FF8A2B;

  /* ══ NEUTRES — dérivés de l'anthracite, jamais bleutés ══════════
     --body et --paper NE REDÉCLARENT PAS une valeur : ils pointent sur
     le jeton de marque. Deux noms pour une même couleur écrite deux fois
     est ce qui rend une palette impossible à auditer — le jour où
     l'anthracite bouge au §4 de la charte, une seule ligne change ici.  */
  --ink:       #16202E;              /* titres — 16,4:1 sur blanc */
  --body:      var(--fx-anthracite); /* texte courant — 7,1:1 */
  --label:     #6E767E;              /* micro-labels — 4,6:1, le plancher AA */
  --line:      #E2E5E8;
  --line-strong: #C7CDD2;  /* bordure de champ, de bouton secondaire, d'arbre */
  --line-soft: #EFF1F3;
  --paper:     var(--fx-white);
  --paper-alt: #F4F6F7;
  --dark-2:    var(--blue-field);    /* cartes et bandes sur fond sombre */
  --dark-line: rgba(255,255,255,.16);

  /* États du formulaire. Les fonds et filets en sont dérivés par
     color-mix : aucune teinte verte ou rouge n'est introduite à la main. */
  --ok: #1C8A5B;
  --ko: #B3261E;

  /* ══ TYPOGRAPHIE ════════════════════════════════════════════════
     Pile système exclusivement. 700 est la SEULE graisse forte
     réellement dessinée dans Segoe UI, SF Pro et Roboto : demander 800
     sélectionne la coupe Black (900) sous Windows et Android, avec un
     rendu incohérent d'une plateforme à l'autre. Ne jamais dépasser 700.

     Huit corps, pas vingt : c'est la répétition qui crée le rythme.    */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-1: 13px;                       /* micro-label capitales */
  --fs-2: 15px;                       /* légende, note, pied de page */
  --fs-3: 16px;                       /* texte dense : cartes, listes */
  --fs-4: 17px;                       /* texte courant */
  --fs-5: 20px;                       /* chapô */
  --fs-6: 23px;                       /* .h-sm */
  --fs-7: 28px;                       /* .h-md */
  --fs-8: clamp(31px, 3.7vw, 42px);   /* .h-lg */
  --fs-9: clamp(37px, 5vw, 58px);     /* .h-xl */

  /* ══ ESPACEMENT — base 4 ════════════════════════════════════════
     Toute valeur hors échelle est une régression.                    */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 24px;
  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;  --s-9: 96px;  --s-10: 128px;

  /* ══ FORMES ═════════════════════════════════════════════════════
     Rayons courts et angles francs : registre institutionnel
     technique, pas landing page SaaS. À valider avec le designer.    */
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   6px;
  /* --r-pill retiré le 17 août 2026 : ses deux consommateurs, la pastille
     du hero et les mots-clés d'étude de cas, ont l'un et l'autre disparu
     au profit de formes non encapsulées. */

  /* ══ OMBRES — deux étages : contact court, diffusion longue ══════
     Teintées en #20262C, l'ancien anthracite retiré de la palette au §12.
     Il ne subsiste ici que comme couleur d'ombre — une ombre neutre pure
     grise le fond, une ombre légèrement bleutée le refroidit. Valeur
     conservée volontairement, et nommée pour qu'elle cesse d'être un
     littéral disséminé dans le fichier.                                */
  --shadow-ink: 32, 38, 44;
  --shadow-sm:  0 1px 1px rgba(var(--shadow-ink),.05), 0 2px 6px rgba(var(--shadow-ink),.06);
  --shadow-md:  0 1px 2px rgba(var(--shadow-ink),.07), 0 6px 16px rgba(var(--shadow-ink),.09);
  --shadow-btn: 0 1px 2px rgba(var(--shadow-ink),.10);

  --wrap: 1180px;
  --header-h: 84px;
}

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

/* ══ MOUVEMENT ════════════════════════════════════════════════════
   Un site de preuve n'a pas à bouger pour bouger : l'animation sert
   à signaler ce qui est cliquable et à rythmer l'arrivée du contenu,
   jamais à décorer. Trois règles, pas trente.

   1. Tout ce qui répond au curseur le montre en moins de 200 ms.
   2. Le contenu se révèle une fois, à l'entrée dans le champ. Il est
      VISIBLE par défaut : si le JS ne se charge pas, rien ne manque.
   3. prefers-reduced-motion neutralise l'ensemble, sans exception.  */

.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .55s cubic-bezier(.22,.61,.36,1),
              transform .55s cubic-bezier(.22,.61,.36,1);
}
/* Décalage en cascade dans une même rangée : la grille s'installe de
   gauche à droite au lieu d'apparaître d'un bloc. */
.reveal:nth-child(2) { transition-delay: .07s; }
.reveal:nth-child(3) { transition-delay: .14s; }
.reveal:nth-child(4) { transition-delay: .21s; }
.reveal:nth-child(5) { transition-delay: .28s; }
.reveal:nth-child(6) { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* L'en-tête est collant : sans cette marge, une cible d'ancre arrive
   sous la barre et son titre est masqué. */
[id] { scroll-margin-top: calc(var(--header-h) + var(--s-4)); }

body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--fs-4);
  line-height: 1.65;
  overflow-x: hidden;
}

/* Le lissage sans sous-pixels allège le texte : bénéfique en clair sur
   fond sombre, défavorable en anthracite sur blanc. Réservé au sombre. */
.hero, .page-hero, .bg-dark, .bg-blue,
.cta-strip, .site-footer, .card-dark, .switchboard {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: var(--fx-blue); }
a:hover { color: var(--blue-deep); }

:focus-visible {
  outline: 2px solid var(--fx-blue);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
/* Règle non négociable n° 2 de la charte : --fx-blue sur --fx-dark vaut
   1,95:1. Sans cette surcharge, l'anneau de focus est invisible sur le
   hero, le bandeau CTA, la barre d'aiguillage et le pied de page — soit
   une vingtaine de liens par page pour un visiteur au clavier.
   --blue-light y vaut 6,3:1.                                          */
.hero :focus-visible, .page-hero :focus-visible,
.bg-dark :focus-visible, .bg-blue :focus-visible,
.cta-strip :focus-visible, .site-footer :focus-visible,
.card-dark :focus-visible {
  outline-color: var(--blue-light);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--fx-dark); color: #fff;
  padding: var(--s-3) var(--s-5); font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: var(--s-3); top: var(--s-3); }

/* ══ TYPOGRAPHIE ══════════════════════════════════════════════════
   Les propriétés vivent sur les CLASSES autant que sur les balises :
   .h-md et .h-sm sont aussi posées sur des <p> dans groupe.html. */

h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; letter-spacing: -0.021em; color: var(--ink); }

.h-xl, .h-lg, .h-md, .h-sm {
  font-weight: 700; color: var(--ink); text-wrap: balance;
}
.h-xl { font-size: var(--fs-9); letter-spacing: -0.028em; line-height: 1.10; }
.h-lg { font-size: var(--fs-8); letter-spacing: -0.022em; line-height: 1.16; }
.h-md { font-size: var(--fs-7); letter-spacing: -0.016em; line-height: 1.22; }
.h-sm { font-size: var(--fs-6); letter-spacing: -0.010em; line-height: 1.28; }

/* Micro-label capitales — un seul rôle, donc un seul traitement.
   .12em est la valeur haute utile : au-delà les mots se désolidarisent. */
.eyebrow {
  display: block;
  font-size: var(--fs-1); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--fx-blue); margin-bottom: var(--s-4);
}
.on-dark .eyebrow,
.bg-dark .eyebrow { color: var(--blue-light); }
.bg-blue .eyebrow { color: var(--orange-tint); }
/* Cohérence avec .eyebrow et .switch-soon : tout orange posé
   sur un fond sombre bascule sur --orange-tint. .title-accent avait été
   oublié — 3,58:1 contre 7,07:1. */
/* Un seul orange d'accent, sur fond clair comme sur fond sombre :
   #E36200 donne 3,49:1 sur blanc, 3,22:1 sur le gris, 4,01:1 sur la base
   sombre et 3,15:1 sur l'aplat bleu. Il n'y a donc plus de raison de
   changer de valeur selon le fond, et l'accent cesse de varier d'une
   section à l'autre. --orange-tint reste pour les micro-labels, où le
   corps est trop petit pour se contenter de 4:1.                      */

.lead   { font-size: var(--fs-5); color: var(--body); line-height: 1.65; max-width: 72ch; }
.body-s { font-size: var(--fs-3); color: var(--body); line-height: 1.7; }

/* Séparateur orange — élément récurrent de la DA, repris du logo. */
.rule { width: 44px; height: 3px; background: var(--fx-orange); margin-bottom: var(--s-5); }

/* Fragment de titre en orange — un seul par titre, sur les grands corps
   uniquement, et pas sur tous les titres de la page (30 à 40 % au plus).
   Sur fond clair l'orange n'est lisible qu'en grande graisse : pour du
   petit texte, employer --orange-text. */
/* --orange-text et non --fx-orange : le §4 de la charte réserve
   --fx-orange aux APLATS de conversion, et impose --orange-text pour du
   TEXTE orange sur fond clair. Mesure : --fx-orange sur blanc donne
   3,07:1 — conforme au seul seuil « grand texte », avec 0,07 de marge, et
   non conforme dès qu'un titre descend sous 24 px. --orange-text donne
   6,07:1 et passe partout. Ne pas revenir à --fx-orange ici.          */
.title-accent { color: var(--orange-title); font-style: normal; }
.h-md .title-accent, .h-sm .title-accent { color: var(--orange-text); }

/* Numéros de départements — ligne typographique plutôt que huit pastilles */

/* Baseline verrouillée — MAINTENANCE · PROJETS · PARTENAIRE MULTITECHNIQUE */
.baseline {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3);
  font-size: var(--fs-1); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--body);
}
.baseline i { font-style: normal; }
/* Dans le hero, la baseline suit immédiatement le H1 : c'est la
   signature de marque, pas un filet entre deux blocs. Elle avait été
   posée entre le chapô et les boutons, où elle les séparait sans les
   relier. */
.baseline-hero { margin-top: var(--s-4); margin-bottom: var(--s-5); }
.baseline .sep { width: 5px; height: 5px; border-radius: 50%; background: var(--fx-orange); flex-shrink: 0; }
.on-dark .baseline, .hero .baseline, .page-hero .baseline,
.site-footer .baseline { color: rgba(255,255,255,.76); }

/* ══ LAYOUT ═══════════════════════════════════════════════════════ */

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s-6); }
.wrap-narrow { max-width: 820px; margin: 0 auto; padding: 0 var(--s-6); }

/* Trois rythmes, pas un seul : une cadence verticale identique d'une
   section à l'autre est ce qui produit la sensation de gabarit.

   Cadence resserrée (16 août 2026) — le rythme précédent posait 96 px
   de part et d'autre, soit 192 px entre deux sections. Sur un site de
   preuve, cette respiration lit « landing page » plutôt que
   « institutionnel » : le lecteur scrolle beaucoup pour peu de contenu.
   Un cran plus bas sur l'échelle, sans quitter la base 4.              */
.section { padding: var(--s-7) 0; }              /* éditoriale */
.section-proof { padding: var(--s-6) 0; }        /* preuve, logos, chiffres */
.section-tight { padding: var(--s-6) 0; }
/* Section enchaînant directement la précédente : la coiffe ferait
   double emploi avec le pied de la section du dessus. */
.section-joined { padding-top: 0; }

/* ══ RAIL DE NAVIGATION ═══════════════════════════════════════════
   Sur une page longue, la gouttière gauche restait vide : le texte est
   aligné au fer et s'arrête à 68ch, laissant une bande blanche sur toute
   la hauteur. Le rail l'occupe avec la carte de la page.

   Il ne remplace pas la navigation principale : il ne sert que les ancres
   du document courant, d'où le libellé « Sur cette page ».            */
.rail-layout {
  display: grid; grid-template-columns: 216px 1fr;
  gap: var(--s-8); align-items: start;
  padding: var(--s-7) 0;
}
.rail-nav {
  position: sticky; top: calc(var(--header-h) + var(--s-5));
  display: flex; flex-direction: column;
}
.rail-title {
  font-size: var(--fs-1); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--label); margin-bottom: var(--s-4);
}
.rail-nav a {
  font-size: var(--fs-3); line-height: 1.35; color: var(--body);
  text-decoration: none; padding: var(--s-3) 0 var(--s-3) var(--s-4);
  border-left: 2px solid var(--line);
  transition: color .18s, border-color .18s;
}
.rail-nav a:hover { color: var(--ink); border-left-color: var(--line-strong); }
.rail-nav a.is-current {
  color: var(--fx-blue); font-weight: 600;
  border-left-color: var(--fx-orange);
}
/* Enfant de grille : sans min-width, un tableau large pousse la
   colonne au-delà de la page. */
.rail-body { min-width: 0; }
.rail-section { padding-bottom: var(--s-7); scroll-margin-top: calc(var(--header-h) + var(--s-6)); }
.rail-section:last-child { padding-bottom: 0; }

/* Aplat de section devenu panneau : une bande pleine largeur passerait
   sous le rail et casserait la colonne de lecture. */
.panel-blue { border-radius: var(--r-lg); padding: var(--s-7); }

.bg-alt  { background: var(--paper-alt); }
.bg-dark { background: var(--fx-dark); color: #fff; }
.bg-blue { background: var(--blue-field); color: #fff; }
.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
.bg-blue h1,
.page-hero h1,
.hero h1,
.bg-blue h2,
.page-hero h2,
.hero h2,
.bg-blue h3,
.page-hero h3,
.hero h3,
.bg-blue h4,
.page-hero h4,
.hero h4,
.bg-dark .h-lg,
.bg-blue .h-lg,
.page-hero .h-lg,
.hero .h-lg,
.bg-dark .h-md,
.bg-blue .h-md,
.page-hero .h-md,
.hero .h-md,
.bg-dark .h-sm,
.bg-blue .h-sm,
.page-hero .h-sm,
.hero .h-sm { color: #fff; }

.bg-dark .lead,
.bg-dark .body-s { color: rgba(255,255,255,.72); }
.bg-blue .lead, .bg-blue .body-s { color: rgba(255,255,255,.86); }
.bg-blue .card-dark { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); }
.bg-blue .card-dark p { color: rgba(255,255,255,.84); }
.bg-blue .ticks li { color: rgba(255,255,255,.88); }
.bg-blue .ticks li::before { background: var(--orange-tint); }

/* Rapport 3:1 entre la séparation de tête et la gouttière de grille. */
.section-head { max-width: 760px; margin-bottom: var(--s-6); }

.grid { display: grid; gap: var(--s-5); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
/* Remplace les occurrences de style="gap:56px;align-items:start" */
.g-2-wide { grid-template-columns: repeat(2, 1fr); gap: var(--s-7); align-items: start; }
/* Empilement vertical serré — remplace les style="gap:18px", valeur hors
   échelle répétée trois fois. Un motif employé trois fois n'est pas une
   exception, c'est un composant qui n'a pas été nommé. */
.g-stack { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
/* Coordonnées / formulaire : la colonne de droite porte le formulaire, donc
   plus large. Repasse en une colonne au même palier que les autres grilles. */
.g-contact {
  display: grid; grid-template-columns: 1fr 1.5fr;
  gap: var(--s-8); align-items: start;
}

/* ══ EN-TÊTE ══════════════════════════════════════════════════════ */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  height: var(--header-h);
  transition: box-shadow .2s, border-color .2s;
}
/* Un en-tête institutionnel s'affirme par un filet net et une élévation
   au défilement, pas par un effet de verre : à 97 % d'opacité, le
   backdrop-filter précédent ne laissait passer que 3 % du fond. */
.site-header.is-stuck { border-bottom-color: transparent; box-shadow: var(--shadow-sm); }

.site-header .wrap {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
}
.brand { display: flex; align-items: center; flex-shrink: 0; }
/* Variante compacte : la baseline est portée en texte HTML dans le hero et
   le pied de page, pas dans l'image. Le wordmark gagne 30 % de hauteur à
   taille d'affichage égale. */
.brand img { height: 46px; width: auto; }

.site-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.site-nav a {
  font-size: var(--fs-2); font-weight: 500; color: var(--body);
  text-decoration: none; padding: var(--s-2) 0;
  border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color .18s, border-color .18s;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--fx-orange); }

.site-nav .btn { display: none; }
.header-cta { display: inline-flex; }

/* Téléphone dans l'en-tête — l'acheteur qui a un devis en main appelle. */
.header-tel {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-3); font-weight: 700; color: var(--fx-blue);
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
}
.header-tel:hover { color: var(--blue-deep); }
.header-tel svg { color: var(--orange-title); transition: transform .18s; }
.header-tel:hover svg { transform: rotate(-12deg) scale(1.1); }
.header-tel svg { flex-shrink: 0; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 1px solid var(--line); border-radius: var(--r-md);
  cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  flex-shrink: 0;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s, opacity .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══ BOUTONS ══════════════════════════════════════════════════════
   Orange = conversion. Le texte est --ink : 5,34:1, la seule valeur
   validée au tableau §4 de la charte, et la règle non négociable n° 1
   (« un bouton orange porte du texte --ink, jamais du blanc »).

   Chiffres recalculés le 16 août 2026 — les trois valeurs précédemment
   commentées ici (5,0 / 3,83 / 15,3) étaient fausses : elles décrivaient
   une palette où le texte du bouton était --fx-anthracite, à 2,32:1.
   Le code posait en réalité --fx-dark, à 4,56:1.

   Assombrir l'orange au survol reste impossible : #D25C00 échoue à
   3,98:1 avec du blanc. On inverse — blanc sur --fx-dark, 14,0:1 — et
   l'orange subsiste en liseré.                                        */

/* Corps porté de 15 à 16 px et hauteur de 42 à 52 px le 16 août 2026 :
   à 12/24 px de rentrée, un bouton de conversion se lisait comme un lien
   encadré. Un bouton doit se voir avant d'être lu. */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: var(--s-4) var(--s-6); border-radius: var(--r-md);
  font-family: var(--font); font-size: var(--fs-4); font-weight: 700; line-height: 1.2;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: background .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s;
  white-space: nowrap;
}
.btn-primary { background: var(--fx-orange); color: var(--ink); box-shadow: var(--shadow-btn); }
.header-cta {
  box-shadow: 0 2px 0 0 var(--orange-text), var(--shadow-btn);
  transition: box-shadow .18s, transform .12s;
}
.header-cta:hover { transform: translateY(-2px); box-shadow: 0 4px 0 0 var(--orange-text), var(--shadow-md); }
.header-cta:active { transform: translateY(1px); box-shadow: 0 0 0 0 var(--orange-text); }

.btn-primary:hover {
  background: var(--fx-dark); color: #fff;
  box-shadow: inset 0 0 0 1.5px var(--fx-orange), var(--shadow-md);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

.btn-blue { background: var(--fx-blue); color: #fff; }   /* 7,2:1 */
.btn-blue:hover { background: var(--blue-deep); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-outline:hover { border-color: var(--ink); background: var(--paper-alt); }
.on-dark .btn-outline,
.bg-dark .btn-outline,
.bg-blue .btn-outline,
.page-hero .btn-outline,
.hero .btn-outline {
  /* Un liseré à 42 % sur du navy donne un bouton fantôme. Liseré franc
     et fond légèrement levé : il se lit comme un second bouton, pas
     comme un lien décoré. */
  color: #fff; border-color: rgba(255,255,255,.70);
  background: rgba(255,255,255,.08);
}
.on-dark .btn-outline:hover,
.bg-dark .btn-outline:hover,
.bg-blue .btn-outline:hover,
.page-hero .btn-outline:hover,
.hero .btn-outline:hover {
  background: rgba(255,255,255,.12); border-color: #fff;
}

.btn-sm { padding: 10px 18px; font-size: var(--fs-2); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-2); font-weight: 600; color: var(--fx-blue); text-decoration: none;
}
.link-arrow:hover { color: var(--blue-field); }
.link-arrow::after { content: "→"; transition: transform .18s; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ══ HERO ═════════════════════════════════════════════════════════ */

/* Photo pleine largeur en fond, dégradé opaque à gauche pour porter le
   texte — même logique que sosfonte.com. La photo n'est PAS recadrée :
   elle est posée entière et c'est le navigateur qui rogne selon la
   hauteur disponible. Le point d'ancrage est bas (62 %) pour garder la
   chaussée dans le cadre : la route vide, la nuit, fait partie du propos.

   Le dégradé descend à 26 % d'opacité à droite et non à zéro : sous
   cette valeur, le blanc du chapô se met à flotter sur les phares. */
/* Photo pleine largeur EN FOND du texte, voile bleu nuit dégressif de
   90 % à gauche à 52 % à droite. Le voile ne descend pas plus bas : sous
   cette valeur, le blanc du chapô décroche sur la façade éclairée.
   La photo n'est pas recadrée — seul son point d'ancrage est réglé, à
   56 % de la hauteur, pour tenir la gare et la chaussée dans le cadre. */
.hero {
  position: relative; overflow: hidden;
  color: #fff;
  padding: var(--s-9) 0 var(--s-8);
  border-bottom: 3px solid var(--fx-orange);
  background: var(--fx-dark)
    url("../img/photos/hero-gare-nuit-fond.jpg") center 56% / cover no-repeat;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(96deg,
    rgba(14,46,71,.90)  0%,
    rgba(14,46,71,.86) 34%,
    rgba(14,46,71,.74) 54%,
    rgba(14,46,71,.60) 76%,
    rgba(14,46,71,.52) 100%);
}
/* Quadrillage supprimé : même subtil, il installait un registre
   tech / SaaS / template. Aplat pur et composition typographique.
   Phase 2 — dès que les photos de chantier existent : hero en deux
   zones, contenu à gauche, photo réelle à droite. */
.hero .wrap { position: relative; z-index: 2; }
.hero h1 { color: #fff; max-width: 18ch; }
/* .hero h1 em supprimé le 17 août 2026 : il faisait un second mécanisme
   d'accent orange à côté de .title-accent, avec une couleur différente.
   Un seul composant désormais, et il connaît ses fonds. */
/* Le texte occupe la moitié gauche, là où le dégradé est le plus opaque.
   Il ne s'étale pas au-delà : c'est la photo qui tient la droite.
   Remplace la grille à deux colonnes qui portait une image encadrée. */
.hero-grid { max-width: 54%; }
.hero-sub { font-size: var(--fs-5); color: rgba(255,255,255,.84); max-width: 52ch; margin-top: var(--s-5); line-height: 1.65; }
.hero .baseline { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--dark-line); }
.hero .btn-row { margin-top: var(--s-6); }

/* .hero-tag supprimé le 16 août 2026 — la pastille translucide posée
   au-dessus du H1 est l'un des marqueurs les plus reconnaissables d'une
   page d'atterrissage générée. Elle répétait par ailleurs deux chiffres
   déjà portés par le bandeau situé juste en dessous. Ne pas la rétablir. */

.page-hero {
  background: var(--fx-dark); color: #fff;
  padding: var(--s-7) 0 var(--s-6);
  position: relative; overflow: hidden;
  border-bottom: 3px solid var(--fx-orange);
}
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero .eyebrow { color: var(--blue-light); }
.page-hero h1 { color: #fff; max-width: 20ch; }
.page-hero p { color: rgba(255,255,255,.74); font-size: var(--fs-5); max-width: 74ch; margin-top: var(--s-4); line-height: 1.65; }

/* Traitement éditorial et non « dashboard » : fond blanc, pas de quatre
   cases fermées, pas de séparateurs pleine hauteur. Les chiffres portent
   le bleu ; l'orange reste un accent sur l'unité. */

/* ══ LOGOS RÉFÉRENCES ═════════════════════════════════════════════
   Boîte optique à deux axes contraints plutôt qu'une hauteur imposée :
   les rapports vont de 1,31 à 3,82, normaliser la hauteur donnait à
   Air France près de trois fois la surface de SNCF.
   Ni gris ni transparence — c'est la preuve commerciale du site, et un
   état de survol ne se déclenche jamais sur mobile.                   */

.logos { padding: var(--s-7) 0; background: var(--paper); border-bottom: 1px solid var(--line); }
.logos-title {
  font-size: var(--fs-1); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--label); text-align: center; margin-bottom: var(--s-5);
}
.logos-row { display: flex; align-items: center; justify-content: center; gap: var(--s-6); flex-wrap: wrap; }
.logos-item {
  width: 148px; height: 56px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.logos-item img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* Correction optique — à ajuster au rendu avec le designer. */
.logos-item img[alt="Air France"] { max-height: 76%; }
.logos-item img[alt="Vissouarn"]  { max-height: 84%; }

/* ══ CARTES ═══════════════════════════════════════════════════════ */

.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-6) var(--s-5);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: border-color .22s, box-shadow .22s, transform .22s;
}
/* Le survol est réservé aux cartes RÉELLEMENT cliquables : une fiche
   informative n'a aucune raison de flotter au passage du curseur.
   C'est l'un des marqueurs les plus reconnaissables du template généré. */
a.card:hover { border-color: var(--label); box-shadow: var(--shadow-md); transform: translateY(-3px); }
/* Une fiche non cliquable ne flotte pas — mais elle répond : le filet
   se renforce et le picto passe à l'orange. Le curseur apprend ainsi
   ce qui est cliquable et ce qui ne l'est pas. */
.card:hover { border-color: var(--line-strong); }
.card:hover .card-picto { color: var(--orange-title); transform: translateY(-2px); }
.card-picto { transition: color .22s, transform .22s; }
.card h3 { margin-bottom: var(--s-3); }
.card p { font-size: var(--fs-3); color: var(--body); line-height: 1.7; }
/* Remplace style="margin-bottom:18px" ×4 sur la page Expertise. */
.card p + .ticks, .card p + ul { margin-top: var(--s-4); }
.card .link-arrow { margin-top: auto; padding-top: var(--s-4); }
.bg-alt .card { background: var(--paper); }

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

/* Picto de corps de métier — RÉSERVÉ aux quatre métiers de la page
   Expertise. Les symboles sont ceux du dessin technique (vanne, radiateur,
   turbine, réseau de distribution) : ils portent une information de métier.
   Ne pas décliner ce composant sur des notions abstraites — une icône
   posée sur « modalité de collaboration » redevient un ornement, et
   l'ornement systématique est précisément ce qu'on a retiré d'ici.
   Pas de fond, pas de pastille : le trait seul, à l'épaisseur du dessin. */
.card-picto {
  display: block; width: 30px; height: 30px;
  color: var(--fx-blue);
  margin-bottom: var(--s-4);
}
.card-picto svg { display: block; width: 100%; height: 100%; }

/* ══ FICHE MÉTIER ═════════════════════════════════════════════════
   Les six cartes de la page Savoir-faire : picto et titre centrés, la
   liste reste au fer à gauche — une énumération centrée ne se lit pas.

   Le survol colore le fond et soulève la carte. C'est un arbitrage
   explicite du client, contre la règle posée plus haut qui réservait
   l'élévation aux cartes cliquables : ici les six fiches sont le cœur
   de l'offre et doivent réagir.                                       */
#metiers .card { align-items: center; text-align: center; padding: var(--s-7) var(--s-5) var(--s-6); }
#metiers .card .card-picto { width: 46px; height: 46px; margin-bottom: var(--s-5); }
#metiers .card h3 { margin-bottom: var(--s-3); }
#metiers .card p { max-width: 34ch; }
#metiers .card .ticks { text-align: left; align-self: stretch; margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line); }
#metiers .card {
  transition: background .3s, border-color .22s, transform .3s, box-shadow .3s;
}
#metiers .card:hover {
  background: var(--blue-wash);
  border-color: var(--fx-blue);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
#metiers .card:hover .card-picto { color: var(--orange-title); transform: translateY(-3px) scale(1.06); }

.card-dark {
  background: var(--dark-2);
  border: 1px solid var(--dark-line);
  border-radius: var(--r-lg); padding: var(--s-5);
}
.card-dark h3 { color: #fff; margin-bottom: var(--s-2); }
/* Ces trois règles remplacent des style="color:var(--blue-light)" et des
   margin-bottom:16px posés en inline. L'inline gagnait sur .link-arrow:hover,
   ce qui privait ces liens de tout état de survol.
   --blue-light sur --dark-2 = 4,9:1.                                     */
.card-dark p + p, .card-dark p + .link-arrow { margin-top: var(--s-4); }
.card-dark a, .card-dark .link-arrow { color: var(--blue-light); }
.card-dark a:hover, .card-dark .link-arrow:hover { color: #fff; }
.card-dark p { font-size: var(--fs-3); color: rgba(255,255,255,.70); line-height: 1.7; }

/* ══ TRIPTYQUE ════════════════════════════════════════════════════
   Trois points de même rang, portés par un picto. À la différence des
   pictos de métier — qui décrivent un objet technique réel — ceux-ci
   figurent une notion : ils sont donc en orange, jamais en bleu, pour
   qu'on ne les confonde pas avec les six métiers.

   Pas d'encadré : le filet supérieur et le picto suffisent à séparer.
   Un cadre par élément produirait trois boîtes vides de plus.        */
.tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-7); }
/* Variante empilée : quand le triptyque occupe déjà la colonne étroite
   d'une grille à deux colonnes, trois sous-colonnes seraient illisibles. */
/* Variante centrée : pour une séquence — trois étapes qui se succèdent —
   le centrage donne un rythme de jalons plutôt qu'une liste au fer. */
.tri-center .tri-item { text-align: center; }
.tri-center .tri-picto { margin-left: auto; margin-right: auto; }
.tri-center .tri-item p { max-width: 36ch; margin-left: auto; margin-right: auto; }
/* Jalon de calendrier — une activité annoncée sans date se lit comme
   une intention ; datée, elle devient un engagement. Réservé aux
   échéances réelles.                                                  */
.jalon {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-1); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--orange-text); background: var(--orange-wash);
  border-radius: var(--r-md); padding: var(--s-2) var(--s-3);
}
.jalon::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--orange-title); flex-shrink: 0;
}

.section-head-center { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; }
.section-head-center .lead { margin-left: auto; margin-right: auto; }
.tri-item { border-top: 2px solid var(--line); padding-top: var(--s-5); }
.tri-picto {
  display: block; width: 38px; height: 38px;
  color: var(--orange-title); margin-bottom: var(--s-4);
  transition: transform .28s cubic-bezier(.34,1.56,.64,1);
}
.tri-picto svg { display: block; width: 100%; height: 100%; }
.tri-item:hover .tri-picto { transform: translateY(-4px) scale(1.06); }
.tri-item {
  transition: border-color .22s, background .3s, transform .3s;
  padding-left: var(--s-4); padding-right: var(--s-4);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.tri-item:hover {
  border-top-color: var(--fx-orange);
  background: var(--blue-wash);
  transform: translateY(-4px);
}
.bg-dark .tri-item:hover, .bg-blue .tri-item:hover { background: rgba(255,255,255,.07); }
.tri-item h3 { margin-bottom: var(--s-3); }
.tri-item p { font-size: var(--fs-3); color: var(--body); line-height: 1.7; }
.bg-dark .tri-item, .bg-blue .tri-item { border-top-color: var(--dark-line); }
.bg-dark .tri-item p, .bg-blue .tri-item p { color: rgba(255,255,255,.78); }
.bg-blue .tri-picto { color: var(--orange-tint); }

/* ══ PHOTO ════════════════════════════════════════════════════════
   Image et légende dans un même bloc arrondi : la légende n'est pas un
   ornement, elle dit ce que le lecteur regarde. Sur un site de preuve,
   une photo de chantier sans légende ne prouve rien.

   Le zoom au survol est de 4 % : assez pour signaler que l'image est
   vivante, trop peu pour distraire. overflow: hidden sur la figure —
   c'est ce qui permet au zoom de rester dans son cadre.               */
.photo {
  margin: 0; border-radius: var(--r-lg); overflow: hidden;
  background: var(--paper-alt);
}
.photo img {
  display: block; width: 100%; height: auto;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.photo:hover img { transform: scale(1.04); }
.photo figcaption {
  font-size: var(--fs-2); color: var(--body); line-height: 1.5;
  padding: var(--s-3) var(--s-4) var(--s-4);
}
.bg-dark .photo, .bg-blue .photo, .hero .photo, .page-hero .photo {
  background: rgba(255,255,255,.07);
}
.bg-dark .photo figcaption, .bg-blue .photo figcaption,
.hero .photo figcaption, .page-hero .photo figcaption { color: rgba(255,255,255,.78); }

/* Colonne droite du hero : hauteur imposée pour que le bloc de texte et
   l'image se terminent ensemble, quel que soit le corps du chapô. */
.photo-band img { aspect-ratio: 5 / 2; object-fit: cover; }
.photo-tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.photo-tri img { aspect-ratio: 16 / 9; object-fit: cover; }
/* .photo-case et .case-media retirés le 17 août 2026 : la mise en trois
   colonnes a laissé place au bandeau à photo de fond, plus bas. */

/* Le logo reste en couleur : le passer en niveaux de gris le range au
   niveau d'un motif de fond, ce qu'il n'est pas. */
/* La règle de couleur du logo vit désormais avec le bandeau, plus bas. */

/* Le composant .photo-slot — réservation dessinée en attendant les
   visuels — a été retiré le 17 août 2026 : les douze emplacements
   ont reçu leur photo. Il est récupérable dans l'historique si un
   nouvel emplacement doit être réservé.                            */

/* ══ LISTES ═══════════════════════════════════════════════════════ */

/* La puce était un carré de 7 px pivoté à 45° : un losange bleu, motif
   de gabarit qui tirait la liste vers le bas de gamme. Remplacé par un
   trait court repris du séparateur orange de la charte — même vocabulaire
   graphique, à l'échelle de la ligne. Il s'allonge au survol de la carte. */
.ticks { list-style: none; display: flex; flex-direction: column; gap: var(--s-3); }
.ticks li { position: relative; padding-left: 28px; font-size: var(--fs-3); color: var(--body); line-height: 1.6; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 14px; height: 2px; border-radius: 0;
  background: var(--orange-title); transform: none;
  transition: width .25s cubic-bezier(.22,.61,.36,1);
}
.card:hover .ticks li::before { width: 20px; }
.bg-dark .ticks li,
.on-dark .ticks li { color: rgba(255,255,255,.80); }
.bg-dark .ticks li::before,
.on-dark .ticks li::before { background: var(--blue-light); }

/* ══ TABLEAU DE SPÉCIFICATIONS ════════════════════════════════════
   Largeur en ch plutôt qu'en % : constante d'une page à l'autre quelle
   que soit la longueur des intitulés. nowrap est retiré — il écrasait
   la largeur déclarée et produisait trois gabarits différents.        */

.spec { width: 100%; border-collapse: collapse; font-size: var(--fs-3); table-layout: fixed; }
.spec th, .spec td { text-align: left; padding: var(--s-4) 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec th { width: 22ch; font-weight: 600; color: var(--ink); background: var(--paper-alt); hyphens: auto; }
.spec td { color: var(--body); }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: none; }
.spec-wrap { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.spec tr { transition: background .16s; }
.spec tbody tr:hover { background: var(--blue-wash); }

/* ══ CARTE D'IDENTITÉ ═════════════════════════════════════════════
   L'état civil d'une société tient sur trois colonnes, pas sur huit
   lignes d'un tableau qui occupe une hauteur d'écran entière. Chaque
   couple intitulé / valeur est une cellule ; le filet supérieur les
   relie sans dessiner de grille.                                     */
.idcard {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5) var(--s-6);
}
.idcard > div { border-top: 1px solid var(--line); padding-top: var(--s-3); }
.idcard dt {
  font-size: var(--fs-1); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--label); margin-bottom: var(--s-2);
}
.idcard dd { font-size: var(--fs-3); color: var(--ink); line-height: 1.5; }

/* ══ ÉTUDES DE CAS ════════════════════════════════════════════════
   Le logo du donneur d'ordre sort de la photo. Posé dessus, même dans un
   cartouche blanc, il devenait un élément de l'illustration ; il porte en
   réalité la preuve, et il précède la lecture. Il occupe donc sa propre
   ligne, sur le fond de page, au-dessus du bandeau photo.

   Le bandeau reprend la logique du hero : image en fond, voile bleu nuit
   dégressif à gauche, texte dessus.                                     */

.case { margin-bottom: var(--s-7); }
.case:last-of-type { margin-bottom: 0; }

.case-brand { margin-bottom: var(--s-4); }
.case-logo {
  display: inline-flex; align-items: center;
  height: 52px; padding: 0;
}
.case-logo img {
  max-height: 100%; max-width: 168px; width: auto; height: auto;
  object-fit: contain; object-position: left center;
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.case:hover .case-logo img { transform: scale(1.04); }

.case-band {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  min-height: 360px;
  display: flex; align-items: center;
  padding: var(--s-8) var(--s-7);
  color: #fff;
  background: var(--fx-dark) var(--case-photo) center center / cover no-repeat;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s;
}
.case:hover .case-band { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.case-band::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(96deg,
    rgba(14,46,71,.94)  0%,
    rgba(14,46,71,.90) 40%,
    rgba(14,46,71,.70) 58%,
    rgba(14,46,71,.44) 78%,
    rgba(14,46,71,.30) 100%);
  transition: opacity .35s;
}
.case:hover .case-band::before { opacity: .93; }
.case-inner { position: relative; z-index: 2; max-width: 54%; }

.case-cas-facility    { --case-photo: url("../img/photos/cas-facility.jpg"); }
.case-cas-aerien      { --case-photo: url("../img/photos/cas-aerien.jpg"); }
.case-cas-ferroviaire { --case-photo: url("../img/photos/cas-ferroviaire.jpg"); }
.case-cas-plomberie   { --case-photo: url("../img/photos/cas-plomberie.jpg"); }
.case-cas-reseau      { --case-photo: url("../img/photos/cas-reseau.jpg"); }

.case-sector {
  font-size: var(--fs-1); font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--blue-light); margin-bottom: var(--s-3);
  padding-top: var(--s-3); position: relative;
}
.case-sector::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 26px; height: 3px; background: var(--orange-tint);
  transition: width .3s cubic-bezier(.22,.61,.36,1);
}
.case:hover .case-sector::before { width: 48px; }

.case h2, .case h3 { color: #fff; margin-bottom: var(--s-4); }
.case-band p { font-size: var(--fs-3); color: rgba(255,255,255,.88); line-height: 1.72; }

.case-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3);
  margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px solid var(--dark-line);
}
.chip {
  font-size: var(--fs-1); font-weight: 600;
  color: rgba(255,255,255,.78); letter-spacing: .04em; text-transform: uppercase;
  background: none; border: 0; padding: 0; position: relative;
}
.chip + .chip { padding-left: var(--s-3); }
.chip + .chip::before {
  content: ""; position: absolute; left: 0; top: .35em; bottom: .35em;
  width: 1px; background: rgba(255,255,255,.32);
}

/* ══ MÉTHODE ══════════════════════════════════════════════════════
   Une séquence de trois temps, pas une liste. Les pastilles posées sur
   un rail continu se lisent comme des jalons ; la timeline précédente
   suspendait trois paragraphes à un fil, sans marquer les étapes.     */
.method {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6); position: relative;
}
/* Le rail s'arrête au centre des pastilles extrêmes, il ne dépasse pas. */
.method::before {
  content: ""; position: absolute; top: 29px; left: 16.66%; right: 16.66%;
  height: 2px; background: var(--line);
}
.method-step { text-align: center; position: relative; }
.method-picto {
  width: 58px; height: 58px; margin: 0 auto var(--s-5);
  border-radius: 50%; background: var(--paper);
  border: 2px solid var(--line); color: var(--orange-title);
  display: grid; place-items: center;
  transition: border-color .25s, transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
}
.method-picto svg { display: block; width: 27px; height: 27px; }
.method-step:hover .method-picto {
  border-color: var(--orange-title); transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.method-step h3 { margin-bottom: var(--s-3); }
.method-step p {
  font-size: var(--fs-3); color: var(--body); line-height: 1.7;
  max-width: 34ch; margin-left: auto; margin-right: auto;
}

/* ══ PHASES ═══════════════════════════════════════════════════════
   Avant / Pendant / Après. La timeline horizontale à pastilles rendait
   trois listes suspendues à un fil : trop léger pour ce qui est, en
   réalité, l'engagement documentaire de l'entreprise. Chaque phase
   devient un bloc à part entière, coiffé d'un filet orange et d'un
   picto, avec sa liste au fer.                                       */
.phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.phase {
  border-top: 3px solid var(--orange-title);
  background: var(--paper); border: 1px solid var(--line);
  border-top: 3px solid var(--orange-title);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: var(--s-6) var(--s-5);
  transition: background .3s, border-color .22s, transform .3s, box-shadow .3s;
}
.phase:hover {
  background: var(--blue-wash); border-color: var(--fx-blue);
  border-top-color: var(--orange-title);
  transform: translateY(-4px); box-shadow: var(--shadow-md);
}
.phase-head { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-5); }
.phase-picto {
  display: block; width: 34px; height: 34px; flex-shrink: 0;
  color: var(--orange-title);
  transition: transform .28s cubic-bezier(.34,1.56,.64,1);
}
.phase-picto svg { display: block; width: 100%; height: 100%; }
.phase:hover .phase-picto { transform: translateY(-3px) scale(1.06); }
.phase-lbl {
  font-size: var(--fs-6); font-weight: 700; color: var(--ink);
  letter-spacing: -0.01em; line-height: 1.1;
}
.phase-when {
  font-size: var(--fs-1); font-weight: 600; color: var(--label);
  letter-spacing: .1em; text-transform: uppercase; margin-top: var(--s-1);
}

/* Le composant .timeline — rail horizontal à pastilles — a été retiré
   le 17 août 2026 : .method le remplace sur l'accueil et .phases sur
   la page Savoir-faire, l'un et l'autre plus affirmés.            */

/* ══ ENCADRÉS ═════════════════════════════════════════════════════ */

.callout {
  border-left: 3px solid var(--fx-orange);
  background: var(--orange-wash);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--s-5);
}
.callout p { font-size: var(--fs-3); color: var(--body); line-height: 1.72; }
.callout strong { color: var(--ink); }

.note { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper-alt); padding: var(--s-5); }
.note-lead { color: var(--ink); }
.note-link { font-weight: 600; }

/* Le composant .todo — marqueur « à compléter » volontairement voyant —
   a été retiré le 18 août 2026, à la mise en ligne : son dernier
   consommateur, la référence du contrat d'assurance, est renseigné.
   Il portait cinq couleurs codées en dur, seules du fichier, et un
   marqueur de chantier qui survit au déploiement finit toujours par
   s'afficher un jour chez un client.                                 */

/* ══ HIÉRARCHIE DE MARQUE ═════════════════════════════════════════ */

.brand-tree { display: flex; flex-direction: column; align-items: center; }
.brand-parent {
  background: var(--fx-dark); color: #fff;
  border-radius: var(--r-lg); padding: var(--s-5) var(--s-7); text-align: center;
  max-width: 460px; width: 100%;
  border-bottom: 3px solid var(--fx-orange);
}
.brand-parent .h-md { color: #fff; }
.brand-parent p { color: rgba(255,255,255,.72); font-size: var(--fs-2); margin-top: var(--s-2); }
.brand-stem { width: 1px; height: 34px; background: var(--line-strong); }
.brand-children { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); width: 100%; position: relative; }
.brand-children::before {
  content: ""; position: absolute; top: -18px; left: 16.66%; right: 16.66%;
  height: 1px; background: var(--line-strong);
}
.brand-child { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); background: var(--paper); position: relative; }
.brand-child::before { content: ""; position: absolute; top: -18px; left: 50%; width: 1px; height: 18px; background: var(--line-strong); }
.brand-child .h-sm { margin-bottom: var(--s-1); }
.brand-label {
  font-size: var(--fs-1); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--label); margin-bottom: var(--s-3); display: block;
}

/* ══ FORMULAIRE ═══════════════════════════════════════════════════ */

.form-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-6); box-shadow: var(--shadow-sm);
}
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-2); font-weight: 600; color: var(--ink); }
.field .hint { font-size: var(--fs-1); color: var(--label); font-weight: 400; }

.field input, .field select, .field textarea {
  font-family: var(--font); font-size: var(--fs-3); color: var(--ink);
  padding: var(--s-3) 14px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--paper); width: 100%;
  transition: border-color .18s, box-shadow .18s;
}
.field textarea { min-height: 130px; resize: vertical; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2351595F' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 38px; cursor: pointer;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--fx-blue);
  box-shadow: 0 0 0 3px rgba(0,83,184,.18);   /* --fx-blue #0053B8 */
}
.field input::placeholder, .field textarea::placeholder { color: var(--label); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Cases à cocher — zone tactile de 44 px, seuil WCAG 2.2 */
.checks { border: 0; padding: 0; margin: 0; }
.checks legend { font-size: var(--fs-2); font-weight: 600; color: var(--ink); padding: 0; margin-bottom: var(--s-3); }
.checks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-4); }
.check {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; cursor: pointer;
  font-size: var(--fs-3); color: var(--body);
}
.check input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--fx-blue); cursor: pointer; }
.check:hover span { color: var(--ink); }

.consent { display: flex; gap: 11px; align-items: flex-start; }
.consent input { width: 17px; height: 17px; margin-top: 3px; flex-shrink: 0; accent-color: var(--fx-blue); }
.consent label { font-size: var(--fs-2); font-weight: 400; color: var(--body); line-height: 1.6; }

.form-status { font-size: var(--fs-2); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); margin-top: var(--s-4); display: none; }
/* Fond, texte et filet dérivés des jetons d'état par color-mix : six
   valeurs vertes et rouges étaient auparavant écrites à la main ici,
   pendant que --ok et --ko restaient déclarés et jamais consommés. */
.form-status.is-ok {
  display: block;
  background: color-mix(in srgb, var(--ok) 9%,  var(--paper));
  color:      color-mix(in srgb, var(--ok) 68%, black);
  border: 1px solid color-mix(in srgb, var(--ok) 32%, var(--paper));
}
.form-status.is-err {
  display: block;
  background: color-mix(in srgb, var(--ko) 9%,  var(--paper));
  color:      color-mix(in srgb, var(--ko) 70%, black);
  border: 1px solid color-mix(in srgb, var(--ko) 32%, var(--paper));
}

/* ══ BLOC CONTACT ═════════════════════════════════════════════════ */

.contact-item { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.contact-item:last-child { border-bottom: none; }
.contact-item .ci-icon {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--r-md);
  background: var(--blue-wash); color: var(--fx-blue);
  display: flex; align-items: center; justify-content: center;
}
.contact-item .ci-lbl { font-size: var(--fs-1); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--label); margin-bottom: var(--s-1); }
.contact-item .ci-val { font-size: var(--fs-6); font-weight: 600; color: var(--ink); text-decoration: none; display: block; }
a.ci-val:hover { color: var(--blue-field); }
.contact-item .ci-note { font-size: var(--fs-2); color: var(--body); margin-top: 3px; }

/* ══ CTA DE BAS DE PAGE ═══════════════════════════════════════════ */

.cta-strip { background: var(--fx-dark); color: #fff; padding: var(--s-6) 0; border-top: 3px solid var(--fx-orange); }
.cta-strip .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-7); flex-wrap: wrap; }
.cta-strip h2 { color: #fff; max-width: 20ch; }
.cta-strip p { color: rgba(255,255,255,.72); margin-top: var(--s-3); max-width: 52ch; font-size: var(--fs-4); }

/* ══ AIGUILLAGE ═══════════════════════════════════════════════════
   Intégré au pied de page plutôt qu'en bande autonome : évite le
   bégaiement sombre/clair/sombre en fin de page, et rend à trois liens
   sortants un poids visuel conforme à leur rang — ils avaient jusqu'ici
   le traitement du composant de contenu principal.                    */

.switchboard { background: var(--dark-2); border-bottom: 1px solid var(--dark-line); padding: var(--s-6) 0; }
.switchboard-inner { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; }
.switchboard-lbl {
  font-size: var(--fs-1); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.60); flex-shrink: 0; line-height: 1.4;
}
.switchboard-links { display: flex; gap: var(--s-6); flex-wrap: wrap; flex: 1; }

.switch-item {
  display: inline-flex; align-items: baseline; gap: var(--s-2);
  text-decoration: none; padding: var(--s-1) 0;
  border-bottom: 1px solid transparent;
  transition: border-color .18s;
}
.switch-item { transition: transform .18s, border-color .18s; }
.switch-item:hover { border-bottom-color: var(--fx-orange); transform: translateX(3px); }
.switch-item::after { transition: transform .18s; }
.switch-item:hover::after { transform: translateX(4px); }
.switch-need  { font-size: var(--fs-2); color: rgba(255,255,255,.58); }
.switch-brand { font-size: var(--fs-3); font-weight: 700; color: #fff; }
/* La flèche appartient au lien, pas au nom : placée sur .switch-brand
   elle s'affichait APRÈS le badge d'état. */
/* --orange-tint et non --fx-orange : sur --blue-field, l'orange plein
   vaut 3,58:1 — sous AA pour un glyphe rendu à la taille du texte,
   alors que c'est le seul marqueur d'affordance du lien. 7,07:1. */
.switch-item::after { content: "→"; color: var(--orange-tint); align-self: center; }
.switch-soon {
  font-size: var(--fs-1); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--orange-tint); background: rgba(242,106,0,.16);
  border-radius: var(--r-sm); padding: 1px 7px; margin-left: var(--s-2);
}

.nav-alt {
  font-size: var(--fs-1); color: var(--label); text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; flex-shrink: 0;
}
.nav-alt::after { content: "→"; }
.nav-alt:hover { color: var(--ink); }
.nav-alt-mobile { display: none; }

/* ══ PIED DE PAGE ═════════════════════════════════════════════════ */

.site-footer { background: var(--fx-dark); color: rgba(255,255,255,.66); font-size: var(--fs-2); }
.site-footer > .wrap { padding-top: var(--s-8); padding-bottom: var(--s-5); }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.1fr; gap: var(--s-7); padding-bottom: var(--s-7); border-bottom: 1px solid rgba(255,255,255,.10); }
.footer-brand img { height: 36px; width: auto; margin-bottom: var(--s-4); }
.footer-brand .baseline { margin-bottom: var(--s-4); font-size: var(--fs-1); gap: var(--s-2); }
.footer-brand p { font-size: var(--fs-2); line-height: 1.72; color: rgba(255,255,255,.58); max-width: 34ch; }
.footer-col h2 { font-size: var(--fs-1); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.56); margin-bottom: var(--s-3); }
/* 22,4 px de hauteur cliquable passaient sous le seuil WCAG 2.2 (24 px). */
.footer-col a, .footer-col p {
  display: block; color: rgba(255,255,255,.68); text-decoration: none;
  font-size: var(--fs-2); line-height: 1.6; transition: color .18s;
}
.footer-col a { padding: 7px 0; }
.footer-col p { padding: 7px 0; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  padding-top: var(--s-5); display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  font-size: var(--fs-1); color: rgba(255,255,255,.52);
}
.footer-bottom a { color: rgba(255,255,255,.56); text-decoration: none; padding: 6px 0; display: inline-block; }
.footer-bottom a:hover { color: #fff; }
.footer-legal-links { display: flex; gap: var(--s-5); flex-wrap: wrap; }

/* ══ PAGE LÉGALE ══════════════════════════════════════════════════ */

.legal h2 { font-size: var(--fs-7); margin: var(--s-7) 0 var(--s-4); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.legal h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.legal h3 { font-size: var(--fs-5); margin: var(--s-5) 0 var(--s-2); }
.legal p, .legal li { font-size: var(--fs-3); color: var(--body); line-height: 1.78; }
.legal p { margin-bottom: var(--s-3); }
.legal ul { margin: 0 0 var(--s-3) var(--s-5); }
.legal li { margin-bottom: 7px; }
.legal strong { color: var(--ink); font-weight: 600; }

/* ══ UTILITAIRES ══════════════════════════════════════════════════
   Absorbent les styles répétés en attribut : un motif employé dix fois
   n'est pas une exception, c'est un composant qui n'a pas été nommé.  */

.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mb-2 { margin-bottom: var(--s-2); }
.mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }

/* Ces cinq classes remplacent les neuf derniers attributs style= porteurs
   d'une valeur en pixels — 6, 10, 26, 30 et 44 px, dont aucune n'était sur
   l'échelle base 4. Un motif employé plusieurs fois n'est pas une
   exception, c'est un composant qui n'a pas été nommé.                  */
.block-narrow { max-width: 820px; margin-left: auto; margin-right: auto; }
.section-head-wide { max-width: 820px; margin-bottom: var(--s-7); }
.btn-block { width: 100%; justify-content: center; margin-top: var(--s-5); }
/* Le séparateur orange est aligné au fer par défaut ; centré, il suit le
   bloc de texte qu'il coiffe. */
.rule-center { margin-left: auto; margin-right: auto; }
.on-dark-strong { color: #fff; }
.on-dark-faint  { color: rgba(255,255,255,.55); }

/* ══ RESPONSIVE ═══════════════════════════════════════════════════ */

/* Un point de rupture de mise en page ne doit jamais être inférieur à
   --wrap : sinon il existe une plage où le conteneur rétrécit alors que
   la typographie est encore à pleine taille, et le contenu déborde. */
@media (max-width: 1180px) {
  .site-nav { gap: 20px; }
  .site-nav a { font-size: var(--fs-2); }
  .header-cta { padding: 9px 15px; font-size: var(--fs-2); }
  .brand img { height: 36px; }
}

/* Bascule de la NAVIGATION, séparée de celle de la mise en page. */
@media (max-width: 1024px) {
  .nav-toggle { display: flex; }
  .site-header .wrap { gap: var(--s-3); }
  .header-cta { display: none; }
  .nav-alt { display: none; }

  .site-nav {
    position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
    background: #fff; flex-direction: column; align-items: stretch;
    gap: 0; padding: var(--s-3) var(--s-5) var(--s-6); overflow-y: auto;
    border-top: 1px solid var(--line); z-index: 99;
    /* visibility retire le menu fermé de l'ordre de tabulation —
       transform seul le laisse focalisable hors écran. */
    transform: translateX(100%); visibility: hidden;
    transition: transform .26s ease, visibility .26s ease;
  }
  .site-nav.is-open { transform: translateX(0); visibility: visible; }
  .site-nav a { font-size: var(--fs-6); padding: var(--s-4) 0; border-bottom: 1px solid var(--line-soft); }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--line-soft); color: var(--fx-blue); }
  /* Le CTA passe en tête du menu : la porte d'entrée avant la sortie. */
  .site-nav .btn { display: inline-flex; order: -1; margin-bottom: var(--s-5); justify-content: center; border-bottom: none; }
  .site-nav .nav-alt-mobile { display: block; color: var(--fx-blue); font-weight: 600; }

  body.nav-open { overflow: hidden; }
}

@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
}

@media (max-width: 860px) {
  :root { --header-h: 66px; }

  .wrap, .wrap-narrow { padding: 0 var(--s-5); }
  .section { padding: var(--s-8) 0; }
  .section-proof { padding: var(--s-6) 0; }
  .section-tight { padding: var(--s-7) 0; }
  .section-head { margin-bottom: var(--s-7); }

  /* Le rail passe en barre horizontale collante sous l'en-tête : sur une
     page longue, la carte des sections sert autant en mobile qu'en desktop. */
  .rail-layout { grid-template-columns: 1fr; gap: 0; padding: var(--s-6) 0; }
  .rail {
    position: sticky; top: calc(var(--header-h) - 1px); z-index: 40;
    background: var(--paper); border-bottom: 1px solid var(--line);
    margin: 0 calc(-1 * var(--s-6)) var(--s-6);
    padding: 0 var(--s-6);
  }
  .rail-title { display: none; }
  .rail-nav {
    position: static; flex-direction: row; gap: var(--s-5);
    overflow-x: auto; scrollbar-width: none;
  }
  .rail-nav::-webkit-scrollbar { display: none; }
  .rail-nav a {
    border-left: 0; border-bottom: 2px solid transparent;
    padding: var(--s-3) 0; white-space: nowrap; flex-shrink: 0;
  }
  .rail-nav a.is-current { border-bottom-color: var(--fx-orange); }
  /* Enfant de grille : sans min-width, un tableau large pousse la
   colonne au-delà de la page. */
.rail-body { min-width: 0; }
.rail-section { padding-bottom: var(--s-7); }
  .panel-blue { padding: var(--s-6) var(--s-5); }
  /* Le voile passe en vertical et se resserre : sur un écran étroit le
     texte occupe toute la largeur, donc toute la photo passe sous du
     texte. On garde .86 au sommet pour que la gare reste lisible. */
  .hero-grid { max-width: none; }
  .hero { background-position: 62% center; }
  .hero::before {
    background: linear-gradient(to bottom,
      rgba(14,46,71,.86) 0%, rgba(14,46,71,.90) 50%, rgba(14,46,71,.94) 100%);
  }
  .photo-tri { grid-template-columns: 1fr; gap: var(--s-4); }
  .photo-band img { aspect-ratio: 16 / 10; }
  /* Le voile de l'étude de cas passe en vertical : sur un écran étroit
     le texte occupe toute la largeur, donc toute la photo passe dessous. */
  .case-band { min-height: 300px; padding: var(--s-7) var(--s-5); }
  .case-inner { max-width: none; }
  .case-band::before {
    background: linear-gradient(to bottom,
      rgba(14,46,71,.86) 0%, rgba(14,46,71,.92) 50%, rgba(14,46,71,.95) 100%);
  }
  .case-logo { height: 42px; }
  .case-logo img { max-width: 140px; }
  #metiers .card { padding: var(--s-6) var(--s-5); }
  .tri { grid-template-columns: 1fr; gap: var(--s-5); }
  .phases { grid-template-columns: 1fr; gap: var(--s-4); }
  .method { grid-template-columns: 1fr; gap: var(--s-6); }
  .method::before { display: none; }
  .idcard { grid-template-columns: repeat(2, 1fr); gap: var(--s-4) var(--s-5); }

  .brand img { height: 30px; }
  .header-tel span { display: none; }

  .g-2, .g-3, .g-2-wide, .g-contact { grid-template-columns: 1fr; }
  .g-2-wide, .g-contact { gap: var(--s-6); }
  .field-grid, .checks-grid { grid-template-columns: 1fr; }

  .hero { padding: var(--s-7) 0 var(--s-6); }
  .page-hero { padding: var(--s-6) 0 var(--s-5); }

  .case { grid-template-columns: 1fr; gap: var(--s-5); padding: var(--s-6) 0; }
  .case-logo { max-width: 190px; height: 84px; }

  .brand-children { grid-template-columns: 1fr; gap: var(--s-7); }
  .brand-children::before { display: none; }

  .cta-strip { padding: var(--s-6) 0; }
  .cta-strip .wrap { flex-direction: column; align-items: flex-start; gap: var(--s-5); }
  .cta-strip .btn { width: 100%; justify-content: center; }

  .form-card { padding: var(--s-5) var(--s-4); }
  /* Sous 16 px, Safari iOS zoome au focus et ne dézoome pas. */
  .field input, .field select, .field textarea { font-size: var(--fs-4); }

  /* L'intitulé devient un micro-label au-dessus de sa valeur : motif
     attendu pour un tableau clé/valeur en colonne unique. Le fond gris
     n'était pas réinitialisé et produisait des bandes désalignées. */
  .spec { table-layout: auto; }
  .spec tr { display: block; border-bottom: 1px solid var(--line); }
  .spec tr:last-child { border-bottom: none; }
  .spec th, .spec td { display: block; width: 100%; border-bottom: none; }
  .spec th {
    background: transparent; padding: var(--s-4) 18px 2px;
    font-size: var(--fs-1); font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em; color: var(--label);
  }
  .spec td { padding: 0 18px var(--s-4); }

  .switchboard-inner { flex-direction: column; align-items: stretch; gap: var(--s-4); }
  .switchboard-links { flex-direction: column; gap: 0; }
  .switch-item { justify-content: space-between; padding: var(--s-3) 0; border-bottom: 1px solid var(--dark-line); }

  .footer-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .logos-row { gap: var(--s-5); }
  .logos-item { width: 116px; height: 46px; }
}

@media (max-width: 460px) {
  .btn-row .btn { width: 100%; justify-content: center; }
  .baseline { gap: var(--s-2); letter-spacing: .1em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .site-header, .site-footer, .cta-strip, .switchboard, .nav-toggle { display: none; }
  body { color: #000; }
}