/* ===========================================================
   ASSUTECH — Design system V2-DARK
   Version sombre : bleu nuit profond + or, cartes "panel" sur
   fond noir-bleuté, même typographie et structure que la V2.
   =========================================================== */

/* --- Inter, heberge chez nous ---------------------------------------
   Les polices venaient de fonts.googleapis.com : une dependance tierce,
   une requete bloquante, et l'adresse IP de chaque visiteur transmise a
   Google a chaque page. Pour une entreprise qui vend de la cybersecurite
   et affiche un bandeau cookies, c'etait difficile a defendre.

   Fichier unique en graisse variable (100 a 900) plutot que cinq fichiers
   statiques : le site utilise 400, 500, 600, 700 et 800.
   L'italique sert au H1 de l'accroche, sur toutes les pages. */
/* Inter, heberge chez nous, en graisse variable (100 a 900).

   Les fichiers sont sous-ensembles au latin etendu plus les quelques signes
   que le site emploie vraiment : 80 et 87 ko, contre 859 et 889 ko en TTF.
   C'est plus leger qu'un WOFF2 complet non sous-ensemble, raison pour
   laquelle on ne declare pas de source WOFF2 : elle ne produirait qu'un 404
   par police et par page, pour un gain nul.

   A noter : ◉, ▾ et ☰ n'existent pas dans Inter et n'y ont jamais existe.
   Ils sont rendus par une police systeme, avant comme apres ce changement. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/InterVariable.woff2') format('woff2'), url('../assets/fonts/InterVariable.woff') format('woff');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/InterVariable-Italic.woff2') format('woff2'), url('../assets/fonts/InterVariable-Italic.woff') format('woff');
}
/* Geist (Vercel, licence OFL, voir assets/fonts/Geist-OFL.txt) : titres et
   chiffres depuis le 17/10/2026. Le texte courant reste en Inter. Geist n'a
   pas d'italique : on interdit l'italique simule, l'accent passe par la couleur. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/Geist-Variable.woff2') format('woff2');
}

:root {
  /* --- Marine : texte, ancrages sombres, aplats de marque --------- */
  --navy-950: #0b1a33;
  --navy-900: #10233f;
  --navy-800: #1a3358;
  --blue-700: #16407e;

  /* --- Accent unique : bleu d'action ------------------------------ */
  --blue-600: #1d4ed8;
  --blue-500: #2563eb;

  /* --- Or : quatre roles distincts, longtemps confondus -------------
     --gold-500/400 : or fonce, lisible sur fond CLAIR (boutons,
       chiffres, bordures d'encart).
     --gold-brand   : or des illustrations SVG, plus sature.
     --or-sur-marine: l'or qui sert d'accent sur les aplats marine
       (topbar, familles, methode, bandeau chiffres, pied de page).
       Il circulait en dur, vingt fois, sans jamais etre declare : la
       feuille annoncait trois ors et en affichait un quatrieme. */
  --or-sur-marine: #e6c964;

  /* --- Bleu clair sur marine ---------------------------------------
     Contrepartie de --blue-600 sur fond sombre : celui-ci n'y aurait
     pas un contraste suffisant. Huit usages, egalement en dur. */
  --bleu-sur-marine: #7fa3ee;

  /* --- Or : reserve aux marqueurs de confiance -------------------- */
  --gold-500: #8a6510;
  --gold-400: #6f5109;

  /* --- Vert : reserve au Green IT et aux scores positifs ---------- */
  --green-600: #157347;
  --green-500: #1a8a56;
  --green-400: #12784a;

  /* --- Texte sur fond clair --------------------------------------- */
  --ink-900: #0d1b33;
  --ink-700: #37445c;
  --ink-500: #5a6880;
  --ink-300: #8592a8;
  --ink-100: #e2e6ec;
  --white: #ffffff;

  /* --- Texte sur fond marine --------------------------------------
     Quatre niveaux, du plus lisible au plus efface. Avant cette
     serie, douze gris bleutes presque identiques circulaient en dur
     dans la feuille (#aab6c9 et #a9b6c9 ne differaient que d'un
     point). Toute nouvelle teinte sur fond sombre passe par ici. */
  --on-navy-200: #c3cddd;
  --on-navy-400: #aab6c9;
  --on-navy-500: #93a6c4;
  --on-navy-600: #8493aa;
  /* Legendes des illustrations SVG : fond clair, donc teinte propre. */
  --il-label: #7d8ba3;

  /* --- Surfaces ---------------------------------------------------- */
  --surface: #ffffff;
  --surface-2: #eef2f9;
  --base: #ffffff;
  --panel: #ffffff;
  --page-alt: #f5f7fa;

  /* --- Rythme vertical ---------------------------------------------
     Deux valeurs, pas six. La page d'accueil melait 100, 96, 90/80,
     86, 68/72 et 64 px : aucune n'etait fausse, mais l'ensemble ne
     donnait aucune cadence. */
  --rythme: 84px;
  --rythme-bande: 60px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 3px rgba(13, 27, 51, 0.07), 0 1px 2px rgba(13, 27, 51, 0.05);
  --shadow-md: 0 8px 24px rgba(13, 27, 51, 0.09), 0 2px 6px rgba(13, 27, 51, 0.05);
  --shadow-lg: 0 20px 48px rgba(13, 27, 51, 0.12), 0 4px 12px rgba(13, 27, 51, 0.06);

  --container: 1180px;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-brand: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --gold-brand: #c9a227;
  --font-head: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Animations suspendues hors champ. Vingt-deux boucles infinies
   tournaient en permanence, dont neuf a trois ecrans du viewport.
   La classe est posee par main.js (IntersectionObserver). */
.anim-pause, .anim-pause * { animation-play-state: paused !important }

/* Sur petit ecran le meme rythme donne une page interminable : une
   seule regle, puisque tout passe desormais par les deux variables. */
@media (max-width: 760px) {
  :root { --rythme: 60px; --rythme-bande: 44px; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; scroll-padding-bottom: 120px; }
/* L'en-tete collant mesure 81 px. scroll-padding-top garde toute ancre sous lui ;
   une <section> visee porte deja 60 a 84 px de marge haute, d'ou le decalage
   negatif : sans lui, l'intertitre atterrirait 100 px trop bas. */
section[id] { scroll-margin-top: -48px; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-900);
  background: linear-gradient(180deg, #f7f9fd 0%, #eef3fb 100%);
  background-attachment: fixed;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-head); font-weight: 700; letter-spacing: -0.01em; color: var(--ink-900); text-wrap: balance; }
/* Paragraphes : evite le mot seul sur la derniere ligne. */
p, .lede { text-wrap: pretty; }
h1 em, h2 em, h3 em { font-synthesis: none; }
p { margin: 0; }
section { padding: var(--rythme) 0; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 28px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: 16px;
}
.eyebrow::before { content: ""; width: 26px; height: 1.5px; background: var(--blue-600); display: inline-block; }

h1 { font-size: clamp(38px, 3.8vw, 50px); line-height: 1.08; letter-spacing: -0.025em; }
/* Echelle des titres : trois marches, pas davantage. Avant, quatre
   tailles de h2 cohabitaient sur la seule page d'accueil (40, 34,
   31,2 et 28 px), dont une issue d'un calcul accidentel. */
h2 { font-size: clamp(27px, 2.4vw, 34px); line-height: 1.2; letter-spacing: -0.015em; }
h3 { font-size: 20px; line-height: 1.35; font-family: var(--font-head); }
.lede { font-size: 18px; color: var(--ink-700); max-width: 620px; font-family: var(--font-body); }

.section-head { max-width: 680px; margin-bottom: 52px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--blue-600); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--blue-700); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--ink-900); border-color: var(--ink-300); }
.btn-ghost:hover { border-color: var(--ink-900); }
.btn-ghost-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.4); }
.btn-ghost-light:hover { background: rgba(255,255,255,0.1); }
.btn-gold { background: var(--gold-500); color: #fff; }
.btn-gold:hover { background: var(--gold-400); transform: translateY(-1px); }
.btn-sm { padding: 10px 20px; font-size: 13.5px; }
/* Lien d'action tertiaire : pour les suites secondaires, afin que le bouton
   principal de chaque bloc reste le seul vrai bouton. */
.lien-fleche { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 14.5px; color: var(--blue-600); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color .15s ease, color .15s ease; }
.lien-fleche:hover { text-decoration-color: currentColor; color: var(--navy-950); }
.lien-fleche svg { transition: transform .15s ease; }
.lien-fleche:hover svg { transform: translateX(3px); }
/* Hierarchie des actions (18/10/2026) : au plus deux boutons par zone ; le telephone et les liens
   annexes passent en lien texte a cote. */
.hero-actions .hero-lien { align-self: center; margin-left: 4px; }
.page-hero .lien-fleche { color: #fff; }
.page-hero .lien-fleche:hover { color: var(--bleu-sur-marine); }
.cta-tel { display: inline-flex; align-items: center; gap: 8px; align-self: center; padding: 0 6px; color: #fff; font-weight: 700; white-space: nowrap; text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 4px; }
.cta-tel:hover { text-decoration-color: #fff; }
.cta-tel svg { width: 18px; height: 18px; }
/* Renvoi vers la page NIS2 depuis les pages cybersecurite (19/10/2026). */
.lien-nis2 { display: flex; align-items: center; gap: 14px 18px; padding: 15px 20px; border-radius: 12px; background: var(--panel); border: 1px solid var(--ink-100); border-left: 4px solid #c9a227; color: var(--ink-700); text-decoration: none; font-size: 15px; line-height: 1.5; }
.lien-nis2:hover { border-color: var(--blue-500); border-left-color: #c9a227; }
.lien-nis2 b { color: var(--ink-900); }
.lien-nis2-tag { flex: none; padding: 4px 9px; border-radius: 6px; background: var(--navy-950); color: #e6c964; font-family: var(--font-head); font-weight: 700; font-size: 12.5px; letter-spacing: .06em; }
.lien-nis2-fl { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--blue-600); font-weight: 700; white-space: nowrap; }
@media (max-width: 760px) { .lien-nis2 { flex-wrap: wrap; } .lien-nis2-fl { margin-left: 0; } }
/* Version anglaise : tout lien vers une page qui n'existe qu'en francais porte hreflang="fr" et une pastille FR. */
html[lang="en"] a[hreflang="fr"]::after { content: "FR"; content: "FR" / "in French"; display: inline-block; margin-left: 6px; padding: 1px 4px; border: 1px solid currentColor; border-radius: 4px; font-size: .68em; font-weight: 700; letter-spacing: .06em; line-height: 1.3; opacity: .7; vertical-align: .1em; text-decoration: none; }
.lien-fleche:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 3px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { .lien-fleche:hover svg { transform: none; } }
/* Retour au clic : le bouton s'enfonce legerement, quel que soit son style
   (prioritaire sur le translateY(-1px) du survol). */
.btn:active { transform: translateY(0) scale(.98); box-shadow: var(--shadow-sm); transition-duration: .06s; }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }

/* ===== Top bar ===== */
.topbar { background: var(--navy-950); color: var(--ink-300); font-size: 12.5px; }
.topbar-inner { max-width: var(--container); margin: 0 auto; padding: 0 28px; height: 38px; display: flex; align-items: center; justify-content: space-between; }
.topbar-left { display: flex; align-items: center; gap: 22px; }
.topbar-left a { display: flex; align-items: center; gap: 7px; color: var(--ink-300); font-weight: 500; white-space: nowrap; }
.topbar-left a:hover { color: var(--gold-400); }
.topbar-left svg { width: 13px; height: 13px; }
.topbar-right { display: flex; align-items: center; gap: 16px; }
.topbar-right a { color: var(--ink-300); font-weight: 500; }
.topbar-right a:hover { color: var(--gold-400); }
.topbar-sep { opacity: 0.3; }
.topbar-social { display: flex; gap: 8px; margin-left: 6px; }
.topbar-social a { width: 24px; height: 24px; border-radius: 4px; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; }
.topbar-social a:hover { background: var(--gold-500); color: #fff; }

/* ===== Header (light) ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  border-bottom: 1px solid var(--ink-100);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink-100);
}
.header-inner { max-width: var(--container); margin: 0 auto; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; height: 80px; }
/* --- Verrouillage de marque : symbole + nom + filet + metier ------- */
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink-900); }
.brand-mark-svg { flex-shrink: 0; display: block; }
.brand-lockup { display: flex; align-items: center; gap: 12px; line-height: 1; }
.brand-name {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -.018em;
  color: inherit;
  white-space: nowrap;
}
.brand-div {
  width: 1px;
  height: 22px;
  background: var(--ink-100);
  flex-shrink: 0;
}
.brand-sub {
  font-family: var(--font-brand);
  font-size: 10.5px;
  letter-spacing: .2em;
  color: var(--ink-500);
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
}
/* Sur fond marine (pied de page), le verrouillage s'inverse */
footer.site-footer .brand { color: #ffffff; }
footer.site-footer .brand-div { background: rgba(255,255,255,0.22); }
footer.site-footer .brand-sub { color: var(--on-navy-500); }

nav.main-nav { display: flex; align-items: center; gap: 6px; }
nav.main-nav > ul { display: flex; align-items: center; gap: 2px; }
nav.main-nav > ul > li { position: relative; }
nav.main-nav > ul > li > a {
  display: flex; align-items: center; gap: 6px;
  padding: 14px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-700);
  border-radius: 4px;
  transition: color .15s ease;
  white-space: nowrap;
}
nav.main-nav > ul > li > a:hover, nav.main-nav > ul > li.active > a { color: var(--blue-600); }
nav.main-nav > ul > li > a .caret { font-size: 12px; opacity: .6; }

.mega-list {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  width: 280px; background: var(--panel); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); border: 1px solid var(--ink-100);
  padding: 8px; display: none; flex-direction: column;
}
nav.main-nav > ul > li:hover .mega-list, nav.main-nav > ul > li.mega-open .mega-list { display: flex; }
.mega-list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; color: var(--ink-900); }
.mega-list a:hover { background: var(--surface-2); color: var(--blue-600); }
.mega-list .mega-list-arrow { opacity: 0; transform: translateX(-4px); transition: opacity .15s ease, transform .15s ease; color: var(--blue-600); display: flex; }
.mega-list a:hover .mega-list-arrow { opacity: 1; transform: translateX(0); }

.header-cta { display: flex; align-items: center; gap: 12px; }
.header-phone { color: var(--ink-900); font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.header-phone svg { color: var(--blue-600); }
.nav-toggle { display: none; background: none; border: none; color: var(--ink-900); cursor: pointer; }

/* ===== Hero (split, light) ===== */
.hero { position: relative; background: linear-gradient(135deg, #f4f7fc 0%, #e9eff9 100%); overflow: hidden; padding: var(--rythme) 0; }
.hero-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px; align-items: center; }
.hero .eyebrow { color: var(--blue-600); }
.hero h1 { color: var(--ink-900); }
.hero h1 em { font-style: italic; color: var(--blue-600); }
.hero .lede { margin-top: 20px; }
.hero-actions { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }



/* Demarche Green IT : texte en vert, comme son pictogramme. */

/* Accueil : les quatre familles sur une seule ligne (ecrans larges). Sous 1121 px,
   la colonne est trop etroite : le texte repasse a la ligne. */






/* Les onze metiers sont ecrits dans le HTML : sans JavaScript ils sont
   tous visibles. Le script ne fait que les reveler un a un.
   Grille a deux colonnes : chaque case garde sa place des le depart,
   donc la carte ne bouge pas pendant le decompte. */

/* Le libelle passe a la ligne plutot que d'etre tronque : aucun nom
   de domaine ne doit apparaitre coupe. */


/* Etat anime : les cases restent en place, seul le contenu apparait */











/* ===== Pillars (left accent) ===== */
.pillars-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.pillar-card {
  position: relative;
  flex: 0 1 calc(25% - 12px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  padding: 0;
  overflow: hidden;
  color: inherit;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.pillar-card::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--blue-600);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s ease, background .28s ease;
}
.pillar-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--blue-600); }
.pillar-card:hover::after { transform: scaleX(1); background: var(--blue-600); }
.pillar-photo { position: relative; width: 100%; height: 132px; overflow: hidden; }
.pillar-photo img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .45s ease;
}
.pillar-card:hover .pillar-photo img { transform: scale(1.05); }


/* Les vignettes sont desormais claires : plus de voile sombre, seulement
   un leger fondu en bas pour que la pastille d'icone se detache. */
.pillar-photo::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 46px;
  background: linear-gradient(180deg, rgba(238,242,249,0) 0%, rgba(238,242,249,.92) 100%);
  transition: opacity .45s ease;
}
.pillar-card-body { position: relative; padding: 0 20px 22px; display: flex; flex-direction: column; flex: 1; }
.pillar-ic {
  width: 44px; height: 44px; box-shadow: 0 4px 12px rgba(11,26,51,.10); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  margin: -22px 0 14px;
  background: var(--surface-2);
  border: 1px solid var(--ink-100);
  color: var(--blue-500);
  position: relative; z-index: 2;
  transition: background .22s ease, color .22s ease;
}
.pillar-card:hover .pillar-photo::after { opacity: .55; }
.pillar-card:hover .pillar-ic { background: var(--blue-600); color: var(--white); }
.pillar-ic svg { width: 20px; height: 20px; }
.pillar-card .pillar-index {
  position: absolute; top: 12px; right: 13px; z-index: 2;
  font-family: var(--font-head);
  font-size: 12px; font-weight: 700;
  letter-spacing: .04em;
  color: var(--blue-600);
  background: rgba(255, 255, 255, .88);
  border: 1px solid var(--ink-100);
  border-radius: 5px;
  padding: 3px 7px;
}
.pillar-card h3 { margin-bottom: 8px; font-size: 16px; line-height: 1.3; color: var(--ink-900); }
.pillar-card p { color: var(--ink-500); font-size: 13px; line-height: 1.55; flex: 1; margin: 0; }
.pillar-card .pillar-link {
  margin-top: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 800;
  color: var(--blue-500);
  transition: color .2s ease, gap .2s ease;
}
.pillar-card:hover .pillar-link { color: var(--blue-600); gap: 10px; }

/* Page « Nos solutions » (20/10/2026) : vignettes 3D sur fond marine, une par domaine.
   La petite pastille d'icone devient inutile : l'illustration porte le domaine. */
.pillars-3d .pillar-photo { height: auto; aspect-ratio: 16 / 10; background: #1c2b55; }
.pillars-3d .pillar-photo::after { display: none; }
.pillars-3d .pillar-ic { display: none; }
.pillars-3d .pillar-card-body { padding-top: 18px; }
.pillars-3d .pillar-card .pillar-index { background: rgba(11,26,51,.72); border-color: rgba(230,201,100,.45); color: #e6c964; }
.pillars-3d .pillar-card:hover .pillar-photo img { transform: scale(1.04); }
/* ===== Feature two-col ===== */
.section-alt { background: var(--page-alt); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.feature-list li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--ink-100); font-size: 15px; color: var(--ink-700); }
.feature-list li:last-child { border-bottom: none; }
/* Un lien place dans une puce heritait exactement la couleur du texte,
   sans soulignement : sur la page DSI/RSSI, « detail de l'architecture »
   etait le seul lien du corps de page et rien ne le signalait. */
.feature-list li a { color: var(--blue-600); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 2px; }
.feature-list li a:hover { color: var(--blue-500); }
.feature-list .tick { width: 22px; height: 22px; border-radius: 50%; background: rgba(29,78,216,0.10); color: var(--blue-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }

.quote-panel {
  background: var(--surface-2);
  color: var(--ink-900);
  border: 1px solid var(--ink-100);
  border-left: 4px solid var(--blue-600);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 42px 40px;
  position: relative;
}
.quote-panel .mark { font-family: var(--font-head); font-size: 60px; color: var(--blue-600); line-height: 1; margin-bottom: 6px; }
.quote-panel p { font-family: var(--font-head); font-size: 22px; line-height: 1.5; color: var(--ink-900); font-weight: 600; }
.quote-panel .attribution { margin-top: 24px; font-size: 13px; color: var(--ink-500); font-family: var(--font-body); }

/* Stat band */






/* Steps */
/* --- Notre methode : section marine, parcours relie ---------------- */
.section-methode {
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, var(--navy-950) 0%, var(--blue-700) 100%);
  padding: var(--rythme) 0;
}
.section-methode .eyebrow { color: var(--or-sur-marine) }
.section-methode .eyebrow::before { background: var(--or-sur-marine) }
.section-methode h2 { color: #ffffff }
.section-methode .lede { color: var(--on-navy-200) }

.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 54px; }
/* Rail qui relie les quatre etapes, trace de gauche a droite */
.steps-rail {
  position: absolute;
  top: 23px; left: 12%; right: 12%;
  height: 2px;
  background: rgba(255,255,255,.16);
  overflow: hidden;
}
.steps-rail::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--or-sur-marine), transparent);
  transform: translateX(-100%);
  animation: steps-flux 5.5s ease-in-out infinite;
}
@keyframes steps-flux { 0% { transform: translateX(-100%) } 55%,100% { transform: translateX(100%) } }

.step { position: relative; text-align: center; padding-top: 0; border-top: none; }
.step-dot {
  position: relative; z-index: 2;
  width: 48px; height: 48px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy-950);
  border: 2px solid rgba(255,255,255,.22);
  color: var(--or-sur-marine);
  transition: border-color .3s ease, transform .3s ease, background .3s ease;
}
.steps.visible .step-dot { animation: step-pop .55s ease both }
.steps.visible .step:nth-child(2) .step-dot { animation-delay: .10s }
.steps.visible .step:nth-child(3) .step-dot { animation-delay: .22s }
.steps.visible .step:nth-child(4) .step-dot { animation-delay: .34s }
.steps.visible .step:nth-child(5) .step-dot { animation-delay: .46s }
@keyframes step-pop { 0% { transform: scale(.6); opacity: 0 } 60% { transform: scale(1.12) } 100% { transform: scale(1); opacity: 1 } }
.step:hover .step-dot { border-color: var(--or-sur-marine); background: var(--or-sur-marine); color: var(--navy-950); transform: translateY(-3px) }

.step .step-num {
  font-family: var(--font-head);
  font-size: 12px; font-weight: 700;
  letter-spacing: .16em;
  color: var(--or-sur-marine);
  margin-bottom: 8px;
}
.step h3 { font-size: 17px; margin-bottom: 8px; color: #ffffff }
.step p { font-size: 13.5px; color: var(--on-navy-400); line-height: 1.6 }

/* Logos row */
.logos-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 28px; }
.logos-row .logo-chip { padding: 10px 22px; border: 1px solid var(--ink-100); border-radius: 4px; font-weight: 700; color: var(--ink-500); font-size: 13.5px; font-family: var(--font-head); }

.partner-logo { display: flex; align-items: center; justify-content: center; height: 82px; padding: 12px 16px; border: 1px solid var(--ink-100); border-radius: var(--radius-sm); background: var(--panel); transition: box-shadow .18s ease, border-color .18s ease; }
.partner-logo:hover { box-shadow: var(--shadow-sm); border-color: var(--blue-600); }
.partner-logo img { max-width: 108px; max-height: 40px; width: auto; height: auto; object-fit: contain; }

/* Testimonials */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* Actualités (news feed) — featured widget, shown right under the hero */
.news-side-wrap { padding: 0 0 70px; }





/* Compact single-line list: source · title · date all on one row */








/* CTA band */
.cta-band { background: linear-gradient(120deg, var(--navy-950), var(--blue-700)); color: var(--white); border-radius: var(--radius-lg); padding: 56px; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.cta-band h2 { color: var(--white); font-size: clamp(24px, 2vw, 28px); }
.cta-band p { color: var(--ink-300); margin-top: 10px; font-family: var(--font-body); }

/* Green IT band */
/* Contraste : le blanc a 80-85 % sur #1a8a56 ne faisait que 3,4 a 3,6:1 et le blanc
   plein 4,36:1. Le degrade s'arrete maintenant a #17794c (blanc : 5,4:1) et le texte
   est blanc plein. Meme teinte de marque, simplement un peu plus profonde. */










/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Les conteneurs a cascade ne doivent pas s'animer eux-memes : sinon le
   fondu du bloc masque le decalage de ses enfants. On neutralise donc
   .reveal sur eux, tout en gardant la classe qui declenche .visible. */


/* ===== Inner page hero + breadcrumb ===== */
.page-hero { padding: 74px 0 64px; }
.page-hero h1 { font-size: 40px; color: var(--ink-900); }
.page-hero .lede { color: var(--ink-700); margin-top: 16px; }
.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-500); margin-bottom: 20px; font-family: var(--font-body); }
.breadcrumb a { color: var(--ink-500); }
.breadcrumb a:hover { color: var(--blue-600); }
.breadcrumb .crumb-current { color: var(--ink-900); font-weight: 600; }

/* Media panel (dark illustration tile on light page) */
.media-panel {
  background: var(--navy-950);
  border-radius: var(--radius-lg);
  padding: 40px;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
}
.media-panel.has-photo {
  padding: 0;
  overflow: hidden;
}
.media-panel.has-photo img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
}

/* Info cards (service grids on inner pages) */
.info-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--ink-100);
  border-left: 3px solid var(--blue-600);
  border-radius: var(--radius-sm);
  padding: 26px 24px 22px;
  transition: transform .2s ease, box-shadow .2s ease, border-left-color .2s ease;
}
.info-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-left-color: var(--blue-600); }
.info-card h3 { font-size: 17px; margin-bottom: 8px; }
.info-card p { color: var(--ink-500); font-size: 14.5px; font-family: var(--font-body); }
.info-card .num-badge {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--blue-600);
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  font-size: 14px;
}

/* Contact page */
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; }
.contact-item { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--ink-100); }
.contact-item:last-child { border-bottom: none; }
.contact-ic {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface-2); color: var(--blue-600);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.form-box { background: var(--panel); border: 1px solid var(--ink-100); border-radius: var(--radius-lg); padding: 34px; }
.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--ink-700); font-family: var(--font-body); }
.form-row input, .form-row select, .form-row textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 4px;
  border: 1px solid var(--ink-300);
  font-family: var(--font-body);
  font-size: 14.5px;
  background: rgba(255,255,255,0.04);
}
.form-row textarea { min-height: 110px; resize: vertical; }

/* ===== Footer (dark bookend) ===== */
footer.site-footer { background: var(--navy-950); color: var(--ink-300); padding: 70px 0 30px; }
.footer-newsletter { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--navy-800); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); padding: 28px 32px; margin-bottom: 50px; }
.footer-newsletter h4, .footer-newsletter h3 { color: var(--white); font-size: 18px; margin-bottom: 4px; }
.footer-newsletter p { color: var(--ink-300); font-size: 13.5px; font-family: var(--font-body); }
.footer-newsletter form { display: flex; gap: 10px; flex-wrap: wrap; }
.footer-newsletter input { padding: 12px 16px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.05); color: var(--white); font-family: var(--font-body); font-size: 14px; min-width: 220px; }
.footer-newsletter input::placeholder { color: var(--ink-500); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 34px; }
.footer-brand p { color: var(--ink-300); font-size: 14px; margin-top: 14px; max-width: 260px; font-family: var(--font-body); }
.footer-col h4, .footer-col h3 { color: var(--white); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 16px; font-family: var(--font-body); }
.footer-col ul li { margin-bottom: 10px; }
/* Les liens du pied de page mesuraient 17 px de haut. La regle WCAG 2.2
   « Target Size (Minimum) » en demande 24. Empiles en colonne, ils ne
   beneficiaient pas non plus de l'exception d'espacement : sur mobile,
   viser le bon lien relevait de l'adresse. */
.footer-col a { font-size: 14px; color: var(--ink-300); font-family: var(--font-body);
  display: inline-block; padding: 4px 0; }
.footer-col li { margin-bottom: 0 }
.footer-col a:hover { color: var(--gold-400); }
.footer-certs { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 24px; }
.footer-certs .cert-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); margin-right: 6px; font-family: var(--font-body); }
.footer-certs .cert-chip { padding: 7px 14px; border: 1px dashed rgba(255,255,255,0.18); border-radius: 4px; font-size: 12px; color: var(--ink-500); display: inline-block; font-family: var(--font-body); }
.footer-certs a.cert-chip:hover { color: var(--gold-400); border-color: var(--gold-400); }
.footer-bottom { margin-top: 50px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--ink-500); font-family: var(--font-body); }
.social-row { display: flex; gap: 10px; }
.social-row a { width: 34px; height: 34px; border-radius: 4px; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; color: var(--white); }
.social-row a:hover { background: var(--gold-500); color: #fff; }

/* ===== Cookie banner ===== */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9988; /* au-dessus de la barre d'appel mobile (9985) : « J'ai compris » reste cliquable */
  background: var(--panel);
  border-top: 1px solid var(--ink-100);
  box-shadow: 0 -12px 32px rgba(0,0,0,0.35);
  transform: translateY(100%);
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
}
.cookie-banner.visible { transform: translateY(0); opacity: 1; }

.cookie-banner p { margin: 0; font-size: 14px; color: var(--ink-700); max-width: 720px; }
.cookie-banner p a { color: var(--blue-600); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }


/* ===== Responsive ===== */
@media (max-width: 980px) {
  .pillar-card { flex: 0 1 calc(33.333% - 11px); }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .two-col, .hero-split, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 34px 20px; }
  .steps-rail { display: none }
  
}
/* ===== Auto-diagnostic IT (home) ===== */
.diagnostic-box { max-width: 760px; margin: 0 auto; background: var(--panel); border: 1px solid var(--ink-100); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-md); }
.diag-progress { height: 6px; background: var(--ink-100); border-radius: 999px; overflow: hidden; margin-bottom: 30px; }
.diag-progress-bar { height: 100%; width: 100%; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, var(--blue-600), var(--blue-500)); border-radius: 999px; transition: transform .35s ease; }
.diag-step { display: none; }
.diag-step.active { display: block; animation: diagFade .3s ease; }
@keyframes diagFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.diag-step h3 { font-family: var(--font-head); font-size: 21px; line-height: 1.35; margin: 0 0 22px; color: var(--ink-900); }
.diag-options { display: flex; flex-direction: column; gap: 10px; }
.diag-option { text-align: left; width: 100%; padding: 14px 18px; border-radius: var(--radius-sm); border: 1px solid var(--ink-100); background: var(--surface); color: var(--ink-900); font-family: var(--font-body); font-size: 15px; font-weight: 600; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .1s ease; }
.diag-option:hover { border-color: var(--blue-600); background: rgba(29,78,216,0.06); }
.diag-option:active { transform: scale(0.99); }
.diag-back { display: none; align-items: center; gap: 6px; background: none; border: none; color: var(--ink-500); font-size: 13px; font-weight: 700; cursor: pointer; padding: 0 0 20px; font-family: var(--font-body); }
.diag-back:hover { color: var(--blue-600); }
.diag-result-head { display: flex; align-items: center; gap: 22px; margin-bottom: 26px; }
.diag-score-ring { flex-shrink: 0; width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; font-size: 20px; border: 4px solid; }
.diag-badge-risk .diag-score-ring, .diag-score-ring.diag-badge-risk { border-color: #ef4444; color: #ef4444; }
.diag-score-ring.diag-badge-mid { border-color: var(--gold-500); color: var(--gold-400); }
.diag-score-ring.diag-badge-good { border-color: var(--green-500); color: var(--green-400); }
.diag-badge { display: inline-block; padding: 5px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.diag-badge.diag-badge-risk { background: rgba(239,68,68,0.14); color: #b91c1c; }
.diag-badge.diag-badge-mid { background: rgba(201,162,39,0.14); color: var(--gold-400); }
.diag-badge.diag-badge-good { background: rgba(47,174,116,0.16); color: var(--green-400); }
.diag-weak-list { background: var(--surface); border: 1px solid var(--ink-100); border-radius: var(--radius-sm); padding: 18px 22px; margin-bottom: 26px; }
.diag-weak-list h4 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-500); }
.diag-weak-list ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.diag-weak-list a { color: var(--ink-900); font-weight: 700; font-size: 14.5px; text-decoration: none; }
.diag-weak-list a:hover { color: var(--blue-600); }
.diag-lead h4 { font-family: var(--font-head); font-size: 18px; margin: 0 0 16px; color: var(--ink-900); }
.diag-restart { display: block; margin: 14px auto 0; background: none; border: none; color: var(--ink-500); font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: underline; }
.diag-restart:hover { color: var(--blue-600); }
.diag-thanks { text-align: center; padding: 20px 0; }
.diag-thanks h3 { font-family: var(--font-head); font-size: 24px; margin-bottom: 10px; color: var(--ink-900); }
.diag-thanks p { color: var(--ink-500); max-width: 460px; margin: 0 auto; }

/* ===== Estimateur de budget (téléphonie, infogérance...) ===== */
.estimator-box { max-width: 720px; margin: 0 auto; background: var(--panel); border: 1px solid var(--ink-100); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-md); }
.estimator-field { margin-bottom: 28px; }
.estimator-field > label, .estimator-lbl { display: block; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-500); margin-bottom: 14px; }
.estimator-slider-row { display: flex; align-items: center; gap: 18px; }
.estimator-slider { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px; background: var(--ink-100); outline: none; }
.estimator-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--blue-600); cursor: pointer; border: 3px solid var(--panel); box-shadow: 0 0 0 1px var(--blue-600); }
.estimator-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--blue-600); cursor: pointer; border: 3px solid var(--panel); }
.estimator-slider-value { flex-shrink: 0; min-width: 92px; text-align: right; font-weight: 700; font-family: var(--font-head); font-size: 17px; color: var(--ink-900); }
.estimator-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.estimator-pill { padding: 11px 18px; border-radius: 999px; border: 1px solid var(--ink-100); background: var(--surface); color: var(--ink-700); font-weight: 700; font-size: 14px; font-family: var(--font-body); cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease; }
.estimator-pill:hover { border-color: var(--blue-600); }
.estimator-pill.active { background: var(--blue-600); border-color: var(--blue-600); color: var(--white); }
.estimator-checks { display: flex; flex-direction: column; gap: 12px; }
.estimator-check { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink-700); cursor: pointer; }
.estimator-check input { width: 17px; height: 17px; accent-color: var(--blue-600); flex-shrink: 0; }
.estimator-check-price { margin-left: auto; font-size: 12.5px; color: var(--ink-500); font-weight: 600; white-space: normal; }
.estimator-result { margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--ink-100); text-align: center; }
.estimator-result-label { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-500); font-weight: 800; margin-bottom: 8px; }
.estimator-result-range { font-family: var(--font-head); font-size: 34px; font-weight: 700; color: var(--ink-900); margin-bottom: 6px; }
.estimator-result-range .estimator-unit { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--ink-500); margin-left: 4px; }
.estimator-disclaimer { font-size: 12.5px; color: var(--ink-500); max-width: 480px; margin: 0 auto 22px; line-height: 1.55; }

/* ===== Blog (liste + article) ===== */
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.blog-card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--ink-100); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .2s ease, transform .2s ease; text-decoration: none; color: inherit; }
.blog-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.blog-card img { width: 100%; height: 200px; object-fit: cover; display: block; }
.blog-card-body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.blog-card h2, .blog-card h3 { font-family: var(--font-head); font-size: 20px; margin: 6px 0 12px; line-height: 1.35; color: var(--ink-900); }
.blog-card p { color: var(--ink-500); font-size: 14.5px; line-height: 1.6; margin-bottom: 20px; flex: 1; }
.blog-card-link { font-weight: 700; font-size: 14px; color: var(--blue-600); display: inline-flex; align-items: center; gap: 6px; }
.blog-meta-row { display: flex; gap: 14px; align-items: center; font-size: 12px; color: var(--ink-500); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }

.article-body { max-width: 740px; margin: 0 auto; }
.article-body h2 { font-family: var(--font-head); font-size: 26px; margin: 44px 0 16px; color: var(--ink-900); }
.article-body h2:first-child { margin-top: 0; }
.article-body p { font-size: 16px; line-height: 1.75; color: var(--ink-700); margin-bottom: 20px; }
.article-lead { font-size: 18.5px; line-height: 1.7; color: var(--ink-700); margin-bottom: 8px; }
.article-meta-bar { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; font-size: 13px; color: var(--ink-500); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 10px; }
.article-sources { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--ink-100); font-size: 12.5px; color: var(--ink-500); }
.article-cta-box { margin-top: 48px; padding: 32px; border-radius: var(--radius-lg); background: var(--panel); border: 1px solid var(--ink-100); text-align: center; }
.article-cta-box p { color: var(--ink-500); margin-bottom: 18px; }
.article-back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--ink-500); text-decoration: none; margin-bottom: 24px; }
.article-back-link:hover { color: var(--blue-600); }

.info-card.has-photo { padding: 0 0 22px; overflow: hidden; }
.info-card.has-photo > *:not(.info-card-photo) { margin-left: 24px; margin-right: 24px; }
.info-card-photo { width: 100%; height: 132px; overflow: hidden; margin-bottom: 18px; }
.info-card-photo picture { display: block; width: 100%; height: 100%; }
.info-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.info-card.has-photo:hover .info-card-photo img { transform: scale(1.06); }
.info-card.has-photo .num-badge { margin-top: 0; }

.contact-photo { width: 100%; height: 190px; border-radius: var(--radius-md); overflow: hidden; margin: 4px 0 26px; box-shadow: var(--shadow-sm); }
.contact-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Hierarchie de couleur : bleu = lien/action, or = accent de marque, vert = Green IT */
.article-body p a, .article-body li a, .section-head p a, p.lede a {
  color: var(--blue-500);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: 600;
}
.article-body p a:hover, .article-body li a:hover, .section-head p a:hover, p.lede a:hover { color: var(--navy-950); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--focus, var(--blue-500));
  outline-offset: 2px;
  border-radius: 3px;
}

/* Bandeau secteurs clients "Ils nous font confiance" */
.logos-row.sector-row { justify-content: center; gap: 14px; }
.logo-chip.sector-chip {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 9px 18px 9px 10px;
  background: var(--panel);
  border: 1px solid var(--ink-100);
  border-radius: 13px;
  color: var(--ink-700);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .01em;
  transition: border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.logo-chip.sector-chip .sector-ic {
  width: 37px; height: 37px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  color: var(--blue-600);
  transition: background .2s ease, color .2s ease;
}
.logo-chip.sector-chip:hover {
  border-color: var(--blue-600);
  color: var(--ink-900);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.logo-chip.sector-chip:hover .sector-ic { background: var(--blue-600); color: var(--white); }
/* Photo de secteur dans la pastille ronde (remplace le pictogramme) */
.logo-chip.sector-chip .sector-ic { overflow: hidden; }
.logo-chip.sector-chip .sector-ic img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* Selecteur de langue FR / EN */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; }
.lang-switch a, .lang-switch .lang-current {
  /* 2 px de padding vertical donnaient une cible de 23 px : un pixel sous
     le minimum. Le passage a 4 px la porte a 27 px. */
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 24px;
  padding: 4px 7px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
}
.lang-switch a { color: inherit; opacity: .9; transition: opacity .15s ease, color .15s ease; }
.lang-switch a:hover { opacity: 1; color: var(--gold-400); }
.lang-switch .lang-current { background: var(--gold-500); color: #fff; }

/* Schema interactif : coffre-fort et gestion des acces */
.vault-flow {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(150px, 0.9fr) minmax(230px, 1.25fr);
  gap: 0;
  align-items: center;
  margin-top: 34px;
}
.vault-col { display: flex; flex-direction: column; }
.vault-sources { gap: 10px; }
.vault-node {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-sm);
  color: var(--ink-500);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}
.vault-node-ic {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  color: var(--blue-600);
  transition: background .2s ease, color .2s ease;
}
.vault-node:hover { color: var(--ink-900); border-color: var(--blue-600); transform: translateX(3px); }
.vault-node.active {
  color: var(--ink-900);
  border-color: var(--blue-600);
  background: var(--surface-2);
}
.vault-node.active .vault-node-ic { background: var(--blue-600); color: var(--white); }

.vault-core { position: relative; align-items: center; justify-content: center; min-height: 260px; }
.vault-links { position: absolute; top: 0; left: 0; width: 50%; height: 100%; overflow: visible; }
.vault-links path { fill: none; stroke: var(--blue-600); stroke-width: 1.1; opacity: .30; }
.vault-links-out { left: auto; right: 0; }
.vault-links-out path { stroke: var(--green-500); }
.vault-safe {
  position: relative; z-index: 2;
  width: 152px;
  padding: 22px 14px 18px;
  text-align: center;
  background: var(--navy-950);
  border: 1.5px solid var(--blue-600);
  border-radius: var(--radius-lg);
  color: var(--blue-600);
  box-shadow: var(--shadow-md);
}
.vault-safe-label { margin-top: 10px; font-size: 13px; font-weight: 800; color: #fff; }
.vault-safe-sub { margin-top: 3px; font-size: 12px; color: var(--on-navy-500); font-weight: 600; }

.vault-out { gap: 16px; align-items: flex-start; }
.vault-shield {
  width: 54px; height: 54px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(47,174,116,0.14);
  color: var(--green-400);
  border: 1px solid rgba(47,174,116,0.35);
}
.vault-detail {
  background: var(--panel);
  border: 1px solid var(--ink-100);
  border-left: 3px solid var(--green-500);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 20px 22px;
}
.vault-detail-eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--green-400); margin-bottom: 7px;
}
.vault-detail-title { font-size: 17px; margin-bottom: 9px; color: var(--ink-900); }
.vault-detail-text { font-size: 14px; line-height: 1.65; color: var(--ink-500); font-family: var(--font-body); margin: 0; }
.vault-note {
  margin-top: 22px; text-align: center;
  font-size: 12.5px; color: var(--ink-500); font-family: var(--font-body);
}
.vault-note a { color: var(--blue-500); text-decoration: underline; text-underline-offset: 3px; }

/* Bandeau defilant des secteurs d'activite */
.sector-marquee {
  position: relative;
  overflow: hidden;
  margin-top: 30px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.sector-marquee + .sector-marquee { margin-top: 14px; }



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

/* Etat atteint au passage devant le centre de la page */


/* Repere discret : le point ou les metiers passent en pleine lumiere */
.sector-marquee::after {
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 210px;
  margin-left: -105px;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(29,78,216,.055), transparent 72%);
}
@media (prefers-reduced-motion: reduce) {
  .sector-marquee { -webkit-mask-image: none; mask-image: none; }
  .sector-marquee::after { display: none }
  
  
  }










/* =====================================================================
   ANCRAGES SOMBRES
   Le site est en fond clair, mais quatre zones restent marine pour
   ancrer la marque et cadencer la page : la barre du haut, le bandeau
   de chiffres, les encarts d'appel a l'action et le pied de page.
   Les variables de texte etant calibrees pour le fond clair, on force
   ici des teintes claires.
   ===================================================================== */
.topbar, .topbar a, .topbar span { color: var(--on-navy-400); }
.topbar-left a, .topbar-right a { color: var(--on-navy-400); }
.topbar-left a:hover, .topbar-right a:hover { color: var(--or-sur-marine); }
.topbar-sep { color: #46536b; }



/* Le libelle peut porter un lien (la note securityheaders est
   verifiable : autant la rendre cliquable). Sur fond marine, un
   lien sans soulignement ne se distingue pas du texte. */



/* Chiffre en cours d'animation dans le bandeau marine */




.cta-band p { color: var(--on-navy-200); }
.cta-band .eyebrow { color: var(--or-sur-marine); }
.cta-band .eyebrow::before { background: var(--or-sur-marine); }

footer.site-footer { color: var(--on-navy-400); }
footer.site-footer h4, footer.site-footer h3 { color: #ffffff; }
footer.site-footer p, footer.site-footer a, footer.site-footer li { color: var(--on-navy-400); }
footer.site-footer a:hover { color: var(--or-sur-marine); }
.footer-newsletter p { color: var(--on-navy-200); }
.footer-newsletter input { color: #ffffff; }
.footer-newsletter input::placeholder { color: var(--on-navy-600); }
.footer-certs .cert-chip { color: var(--on-navy-400); }
.footer-certs a.cert-chip:hover { color: var(--or-sur-marine); border-color: var(--or-sur-marine); }
.footer-bottom { color: var(--on-navy-600); }
.footer-bottom a { color: var(--on-navy-600); }
.social-row a { color: #ffffff; }
.social-row a:hover { background: var(--or-sur-marine); color: var(--navy-950); }
.lang-switch .lang-current { background: var(--or-sur-marine); color: var(--navy-950); }

/* --- Chiffres cles : apparition puis comptage --------------------- */





@media (prefers-reduced-motion: reduce) {
  
  .partner-logo img { filter: none; }}

/* =====================================================================
   PREUVES VERIFIABLES — carte d'accroche de la page d'accueil
   Remplace le bandeau de chiffres declaratifs. Trois liens, trois
   preuves que le visiteur peut controler lui-meme.
   ===================================================================== */





/* Le point vif attire l'oeil sans rien affirmer sur l'etat courant :
   la phrase parle de publication continue, pas de disponibilite. */

@keyframes pt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* =====================================================================
   VERIFICATEUR D'USURPATION — bloc d'accroche
   ===================================================================== */





.usurpation-form { display: flex; gap: 10px; flex-wrap: wrap; }
.usurpation-form input {
  flex: 1 1 210px; min-width: 0;
  padding: 15px 17px;
  border: 1px solid #2c4a7d; border-radius: 10px;
  background: #12264a; color: #fff;
  font-size: 1rem; font-family: inherit;
}
.usurpation-form input::placeholder { color: #93a9cc; }
.usurpation-form input:focus { outline: 2px solid var(--bleu-sur-marine); outline-offset: 1px; border-color: var(--bleu-sur-marine); }
.usurpation-form .btn { flex: 0 0 auto; padding-left: 26px; padding-right: 26px; }





/* =====================================================================
   SCHEMA DE LA CHAINE — quatre maillons, un seul responsable
   Construit en HTML plutot qu'en image : le texte reste selectionnable
   et lisible par un lecteur d'ecran, et la mise en page bascule en
   colonne sur mobile, ce qu'une image unique ne sait pas faire.
   ===================================================================== */




/* Le trait de liaison : c'est lui qui fait « chaine » plutot que
   « quatre cases cote a cote ». */







.cs-sub { display: block; margin-top: 7px; font-size: .87rem; color: var(--ink-500); line-height: 1.55; }







/* =====================================================================
   CALQUE DE FOND PLEINE PAGE
   Le motif du metier occupe desormais toute la hauteur de la page, pas
   seulement la banniere. Un seul calque en position fixe : il ne bouge
   pas au defilement, donc le navigateur n'a rien a redessiner, et les
   sections translucides le laissent transparaitre.
   ===================================================================== */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.page-bg svg { position: absolute; width: 100%; height: 100%; }
/* Tout le contenu passe au-dessus du calque */
body > .topbar,
body > header,
body > section,
body > main,
body > footer { position: relative; z-index: 1; }
/* Le bandeau cookies n'est plus dans cette liste : cette regle le rendait
   « position: relative », donc rejete sous le pied de page, jamais vu. Il
   reprend son role de bandeau fixe (voir .cookie-banner). */

/* Sections translucides : le motif apparait derriere le contenu */
section { background: rgba(255,255,255,.84); }
.section-alt { background: rgba(238,243,251,.90); }
/* Deux .section-alt qui se suivent donnaient un aplat unique de
   plus de 2 400 px : le lecteur ne voyait pas qu'il changeait de
   sujet. La seconde reprend le fond clair. Huit pages etaient
   concernees, cette regle les couvre toutes. */
.section-alt + .section-alt { background: rgba(255,255,255,.84); }
.hero { background: none; }
/* Le pied de page et la banniere de chiffres restent opaques (ancrages) */
footer.site-footer { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .page-bg * { animation: none !important }}

/* --- Partenaires : bandeau defilant -------------------------------- */



@keyframes partners-scroll { from { transform: translateX(0) } to { transform: translateX(-50%) } }

/* Logos partenaires en couleur : c'est la seule tache de couleur de la
   page, et elle sert la credibilite (on reconnait les marques d'un coup
   d'oeil). La desaturation ne rapportait qu'une uniformite grise.
   Les cartes restent blanches pour que les logos livres en JPG, avec leur
   fond blanc incruste, se fondent dans la carte. */
.partner-logo img {
  filter: none;
  transition: transform .3s ease;
}
.partner-logo:hover img { transform: scale(1.06); }
.partner-logo:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  
  
  
  .partner-logo img { filter: none }}

/* --- Illustrations de page (media-panel) --------------------------- */
.media-panel.has-illus { padding: 0; background: #ffffff; border: 1px solid var(--ink-100); overflow: hidden; }
.illus { display: block; width: 100%; height: auto; }
.il-lbl { font-family: var(--font-body); font-size: 9.5px; font-weight: 700; letter-spacing: .14em; fill: var(--il-label); }
.il-cap { font-family: var(--font-body); font-size: 15px; font-weight: 700; fill: #0d1b33; }
.il-cap2 { font-family: var(--font-body); font-size: 12px; font-weight: 400; fill: var(--ink-500); }

.il-sub { font-family: var(--font-body); font-size: 11px; font-weight: 600; fill: var(--il-label); }
.il-led { fill: #1a8a56; animation: il-clign 1.5s ease-in-out infinite; }
.esl-nom { font-family: var(--font-body); font-size: 13px; font-weight: 700; fill: #0d1b33; }
.esl-ref { font-family: var(--font-body); font-size: 10.5px; font-weight: 400; fill: var(--ink-500); }
.esl-prix { font-family: var(--font-body); font-size: 20px; font-weight: 800; fill: var(--blue-600); }
/* Feuilles qui sortent du multifonction */
.pr-feuille { opacity: 0; animation: pr-sort 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * 1.05s); }
@keyframes pr-sort { 0% { opacity: 0; transform: translateY(0) } 12% { opacity: .5 } 60% { opacity: .18; transform: translateY(-16px) } 100% { opacity: 0; transform: translateY(-24px) } }
/* Grille de cadenas : verrouillage en cascade, puis reprise */
.cadg .anse { transform-origin: 0 -4px; animation: cad-fermer 7s ease-in-out infinite; animation-delay: calc(var(--i) * .28s); }
.cadg .coeur { animation: cad-coeur 7s ease-in-out infinite; animation-delay: calc(var(--i) * .28s); }
@keyframes cad-fermer { 0%, 6% { transform: translateY(-6px) scaleY(1.25) } 16%, 100% { transform: translateY(0) scaleY(1) } }
@keyframes cad-coeur { 0%, 10% { fill: #cfd8e6 } 20%, 100% { fill: var(--blue-600) } }

@keyframes il-clign { 0%,100% { opacity: .35 } 50% { opacity: 1 } }
@keyframes il-port { 0%,88% { fill: #cfd8e6 } 92% { fill: var(--blue-600) } 100% { fill: #cfd8e6 } }

/* --- Styles communs aux illustrations metier ---------------------- */
.il-big { font-family: var(--font-body); font-size: 34px; font-weight: 800; fill: #ffffff; }



.il-tag { font-family: var(--font-body); font-size: 9px; font-weight: 700; letter-spacing: .06em; fill: var(--il-label); }

/* Ondes de l'IA qui repond */

@keyframes il-onde { 0% { transform: scale(.5); opacity: .9 } 100% { transform: scale(2.1); opacity: 0 } }
@keyframes il-p { 0%, 92% { fill: #cfd8e6 } 95% { fill: var(--blue-600) } 100% { fill: #cfd8e6 } }
/* Cadre de detection video */
.il-detect { opacity: 0; animation: il-detect 5s ease-in-out infinite; }
@keyframes il-detect { 0%, 40% { opacity: 0 } 50%, 80% { opacity: 1 } 100% { opacity: 0 } }
@keyframes il-pulse { 0%, 100% { opacity: .45 } 50% { opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
  .illus * { animation: none !important }
  .il-detect { opacity: 1 }}



@media (max-width: 760px) {
  /* En position fixe, certains navigateurs mobiles saccadent au
     defilement : on repasse le calque en absolu et on l'attenue. */
  .page-bg { position: absolute; height: 100vh; height: 100dvh; opacity: .38 }
  body { background-attachment: scroll }}

/* =====================================================================
   FONDS ANIMES DE BANNIERE
   Un motif par domaine d'activite, dessine en SVG et anime en CSS.
   Regles suivies : uniquement transform et opacity (donc pas de calcul
   de mise en page a chaque image), traits fins, opacite faible pour ne
   jamais concurrencer le texte, et arret complet si le visiteur a
   demande la reduction des animations.
   ===================================================================== */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--blue-600);
}
.hero-bg svg { position: absolute; width: 100%; height: 100%; }
.hero-inner, .hero-split, .hero-txt { position: relative; z-index: 1; }
/* Voile qui garantit le contraste du texte quel que soit le motif */
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.90) 34%, rgba(255,255,255,.46) 66%, rgba(255,255,255,.04) 100%);
}

/* --- 1. Telephonie : ondes concentriques qui se propagent ---------- */
.hero-bg--ondes circle { fill: none; stroke: currentColor; stroke-width: 1.8; opacity: 0; transform-origin: 88% 30%; animation: bg-onde 6s linear infinite; }
.hero-bg--ondes circle:nth-child(2) { animation-delay: 1.5s }
.hero-bg--ondes circle:nth-child(3) { animation-delay: 3s }
.hero-bg--ondes circle:nth-child(4) { animation-delay: 4.5s }
@keyframes bg-onde { 0% { transform: scale(.2); opacity: 0 } 16% { opacity: .95 } 100% { transform: scale(1.9); opacity: 0 } }

/* --- 2. Reseaux : noeuds relies qui respirent --------------------- */
.hero-bg--reseau line { stroke: currentColor; stroke-width: 1.5; opacity: .55 }
.hero-bg--reseau circle { fill: currentColor; opacity: .8; animation: bg-pulse 4.5s ease-in-out infinite }
.hero-bg--reseau circle:nth-child(even) { animation-delay: 1.4s }
.hero-bg--reseau circle:nth-child(3n) { animation-delay: 2.6s }
@keyframes bg-pulse { 0%,100% { opacity: .35; transform: scale(1) } 50% { opacity: 1; transform: scale(1.7) } }

/* --- 3. Cybersecurite : boucliers et balayage de scan ------------- */
.hero-bg--scan path { fill: none; stroke: currentColor; stroke-width: 1.9; opacity: .55 }
.hero-bg--scan rect.scan { fill: currentColor; opacity: .22; animation: bg-scan 5s ease-in-out infinite }
@keyframes bg-scan { 0%,100% { transform: translateY(-14%) } 50% { transform: translateY(70%) } }

/* --- 4. Videosurveillance : champ de vision qui balaie ------------ */
.hero-bg--champ path.cone { fill: currentColor; opacity: .20; transform-origin: 82% 24%; animation: bg-champ 8s ease-in-out infinite }
.hero-bg--champ circle { fill: currentColor; opacity: .8 }
@keyframes bg-champ { 0%,100% { transform: rotate(-16deg) } 50% { transform: rotate(20deg) } }

/* --- 5. Cloud : particules qui derivent vers le haut -------------- */
.hero-bg--cloud circle { fill: currentColor; opacity: .55; animation: bg-derive 11s linear infinite }
.hero-bg--cloud circle:nth-child(2n) { animation-duration: 14s }
.hero-bg--cloud circle:nth-child(3n) { animation-duration: 9s; animation-delay: 2s }
.hero-bg--cloud circle:nth-child(5n) { animation-delay: 4.5s }
@keyframes bg-derive { 0% { transform: translateY(30px); opacity: 0 } 15% { opacity: .7 } 85% { opacity: .7 } 100% { transform: translateY(-110px); opacity: 0 } }

/* --- 6. Operateur : impulsions qui filent dans la fibre ----------- */
.hero-bg--fibre path { fill: none; stroke: currentColor; stroke-width: 1.7; opacity: .45 }
.hero-bg--fibre circle { fill: currentColor; opacity: 1; animation: bg-file 4.5s linear infinite }
.hero-bg--fibre circle:nth-child(4) { animation-delay: 1.1s }
.hero-bg--fibre circle:nth-child(5) { animation-delay: 2.3s }
.hero-bg--fibre circle:nth-child(6) { animation-delay: 3.4s }
@keyframes bg-file { 0% { transform: translateX(-6%); opacity: 0 } 12% { opacity: .8 } 88% { opacity: .8 } 100% { transform: translateX(112%); opacity: 0 } }

/* --- 7. Cablage : pistes orthogonales qui se tracent -------------- */
.hero-bg--piste path { fill: none; stroke: currentColor; stroke-width: 1.9; opacity: .6;
  stroke-dasharray: 260; stroke-dashoffset: 260; animation: bg-trace 7s ease-in-out infinite }
.hero-bg--piste path:nth-child(2) { animation-delay: .9s }
.hero-bg--piste path:nth-child(3) { animation-delay: 1.8s }
.hero-bg--piste path:nth-child(4) { animation-delay: 2.7s }
@keyframes bg-trace { 0% { stroke-dashoffset: 260 } 45%,70% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: -260 } }

/* --- 8. Etiquettes : petits pavillons qui s'actualisent ----------- */
.hero-bg--tags g.tag rect { fill: #ffffff; fill-opacity: .55; stroke: var(--blue-600); stroke-width: 1.8; stroke-opacity: .55 }
.hero-bg--tags g.tag { animation: bg-tag 5.5s ease-in-out infinite }
.hero-bg--tags g.tag:nth-child(2n) { animation-delay: 1.3s }
.hero-bg--tags g.tag:nth-child(3n) { animation-delay: 2.7s }
.hero-bg--tags g.tag:nth-child(5n) { animation-delay: 3.9s }
.hero-bg--tags .tag-prix { font-family: var(--font-body); font-size: 20px; font-weight: 800; fill: var(--blue-600); opacity: 1 }

/* Etiquette en cours de mise a jour */
[data-prix] { transition: opacity .2s ease }
[data-prix].prix-maj { opacity: .15 }

@keyframes bg-tag { 0%,100% { opacity: .55 } 45% { opacity: 1 } }

/* --- 9. Impression : lignes de page qui defilent ------------------ */
.hero-bg--lignes g { animation: bg-lignes 9s linear infinite }
.hero-bg--lignes line { stroke: currentColor; stroke-width: 2.2; opacity: .42; stroke-linecap: round }
@keyframes bg-lignes { 0% { transform: translateY(0) } 100% { transform: translateY(-60px) } }

/* --- 10. Infogerance : anneaux de supervision --------------------- */
.hero-bg--supervision circle.orbite { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .45 }
.hero-bg--supervision g.rot { transform-origin: 84% 42%; animation: bg-rot 26s linear infinite }
.hero-bg--supervision circle.sonde { fill: currentColor; opacity: .9 }
@keyframes bg-rot { 0% { transform: rotate(0) } 100% { transform: rotate(360deg) } }
@keyframes bg-hex { 0%,100% { opacity: .2 } 50% { opacity: .9 } }

/* --- Accueil : constellation de metiers + hexagones de marque ------
   Motif de synthese. Les noeuds representent les onze domaines relies
   entre eux ; les hexagones reprennent la forme du logo et derivent
   lentement en arriere-plan. */

/* Le reseau sous bouclier, balaye lentement. Les ronds qui derivaient
   donnaient une impression d'instabilite ; ici le perimetre est ferme,
   les noeuds s'allument au passage du balayage puis se verrouillent.
   Cycle long (14 s) et opacite faible : le fond doit se remarquer une fois,
   pas occuper le regard pendant la lecture. */




/* n0 et v0 demarrent sans retard : la regle est ecrite pour que la classe
   existe reellement dans la feuille, et non par simple convention. */







@keyframes bg-veille {
  /* opacity et transform seulement : l'attribut « r » n'est anime par CSS
     que sur les navigateurs recents, le noeud resterait fige ailleurs. */
  0%, 40%, 100% { opacity: .30; transform: scale(1) }
  12%           { opacity: .95; transform: scale(1.35) }
}



@keyframes bg-verrou {
  0%, 8%   { opacity: 0 }
  20%, 62% { opacity: .55 }
  80%,100% { opacity: 0 }
}

@keyframes bg-balayage {
  0%        { transform: translateX(0) }
  55%, 100% { transform: translateX(1460px) }
}

.hero-bg--marque, .page-bg.hero-bg--marque { color: var(--blue-600) }
/* Trame reguliere depuis le 25/09/2026, a la place de quatre hexagones
   disperses : le calque fait 1425x900 pour un viewBox de 1200x320, donc
   le "slice" n'en montre que la bande centrale. Une trame supporte
   d'etre coupee n'importe ou, des formes isolees non. Densite bien plus
   forte, donc opacite et trait reduits pour ne pas concurrencer le
   texte. */
.hero-bg--marque path.hexa { fill: none; stroke: var(--gold-brand); stroke-width: 1; opacity: .17;
  animation: bg-derive-hex 24s ease-in-out infinite }
/* Les retards sont repartis par modulo : avec quatre-vingts mailles,
   viser nth-of-type(2), (3) et (4) n'animait que le coin superieur. */
.hero-bg--marque path.hexa:nth-of-type(5n+2) { animation-delay: 4s; animation-duration: 30s }
.hero-bg--marque path.hexa:nth-of-type(5n+3) { animation-delay: 9s; animation-duration: 27s }
.hero-bg--marque path.hexa:nth-of-type(5n+4) { animation-delay: 14s; animation-duration: 21s }
.hero-bg--marque path.hexa:nth-of-type(5n+5) { animation-delay: 19s; animation-duration: 33s }
.hero-bg--marque circle { fill: currentColor; opacity: .45; animation: bg-noeud 5.5s ease-in-out infinite }
.hero-bg--marque circle:nth-of-type(2n) { animation-delay: 1.5s }
.hero-bg--marque circle:nth-of-type(3n) { animation-delay: 3s }

/* --- Gestion des acces : champ de cadenas qui se verrouillent ------ */
.hero-bg--cadenas, .page-bg.hero-bg--cadenas { color: var(--blue-700) }
.hero-bg--cadenas path.cad {
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .3;
  animation: bg-cadenas 6.5s ease-in-out infinite;
}
.hero-bg--cadenas path.cad:nth-child(2n) { animation-delay: 1.4s }
.hero-bg--cadenas path.cad:nth-child(3n) { animation-delay: 2.9s }
.hero-bg--cadenas path.cad:nth-child(5n) { animation-delay: 4.3s }
@keyframes bg-cadenas { 0%,100% { opacity: .16 } 50% { opacity: .82 } }/* --- Teintes par famille de metier -------------------------------- */
.hero-bg--scan { color: var(--blue-700) }
.hero-bg--cloud, .hero-bg--fibre { color: var(--blue-500) }
.hero-bg--supervision { color: var(--green-600) }

@media (prefers-reduced-motion: reduce) {
  .hero-bg * { animation: none !important }
  .hero-bg--piste path { stroke-dashoffset: 0 }}
@media (max-width: 760px) {
  .hero-bg { opacity: .7 }}

@media (max-width: 760px) {
  
  
  

  

  .vault-flow { grid-template-columns: 1fr; gap: 18px; }
  .vault-links { display: none; }
  .vault-core { min-height: 0; }
  .vault-safe { width: 100%; max-width: 260px; }
  .vault-out { align-items: stretch; }
  .vault-shield { display: none; }

  .lang-switch { display: none; }

  .logos-row.sector-row { gap: 10px; }
  .logo-chip.sector-chip { padding: 9px 15px 9px 10px; font-size: 12.5px; gap: 9px; }
  .logo-chip.sector-chip .sector-ic { width: 29px; height: 29px; }

  .info-card-photo { height: 150px; }
  .contact-photo { height: 160px; }
  

  .diagnostic-box { padding: 26px 20px; }
  .diag-step h3 { font-size: 18px; }
  .diag-result-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .estimator-box { padding: 26px 20px; }
  .estimator-result-range { font-size: 28px; }
  .blog-grid { grid-template-columns: 1fr; }
  .article-body h2 { font-size: 22px; }
  .article-body p { font-size: 15px; }
  /* Safari/iOS clips position:fixed descendants to the bounds of an
     ancestor that has backdrop-filter set. That traps the open mobile
     nav panel inside the 80px-tall header instead of the full screen,
     so it toggles open but is invisible. Drop the blur on mobile and
     use a solid background instead so the fixed nav renders correctly. */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #ffffff; }
  .header-inner { padding: 0 16px; }
  .brand { gap: 9px; }
  .brand-name { font-size: 19px; }
  .brand-div, .brand-sub { display: none; }
  .brand-mark-svg { width: 22px; height: 30px; } /* bouclier 110x147 : ne pas forcer le carre */
  .header-cta { gap: 6px; }
  .header-cta .btn-primary.btn-sm { padding: 8px 12px; font-size: 12.5px; }
  .nav-toggle { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-size: 22px; line-height: 1; padding: 0; flex-shrink: 0; }
  nav.main-nav { position: fixed; top: 81px; left: 0; right: 0; bottom: 0; width: 100%; background: var(--panel); flex-direction: column; padding: 20px; display: none; overflow-y: auto; border-top: 1px solid var(--ink-100); z-index: 9999; }
  nav.main-nav.open { display: flex; }
  nav.main-nav > ul { flex-direction: column; width: 100%; align-items: stretch; }
  .mega-list { position: static; transform: none; width: 100%; box-shadow: none; border: none; display: none; }
  nav.main-nav > ul > li:hover .mega-list { display: none; }
  nav.main-nav > ul > li.open .mega-list { display: flex; }
  .header-phone { display: none; }
  h1 { font-size: 32px; }
  .hero h1 { font-size: 34px; }
  .pillar-card { flex: 0 1 calc(50% - 8px); }
  .pillar-photo { height: 108px; }
  .pillar-card h3 { font-size: 14.5px; }
  .pillar-card p { font-size: 14px; }
  .card-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  
  .cta-band { padding: 32px; flex-direction: column; align-items: flex-start; }
  .topbar { display: none; }
  
  
  
  
  }
@media (max-width: 420px) {
  .header-cta .btn-primary.btn-sm { display: none; }}

@media (max-width: 460px) {
  .pillar-card { flex: 0 1 100%; }
  .pillar-photo { height: 140px; }}

/* --- Photo de certification RJ45 (chantier) ------------------------- */
.photo-certif { position: relative; margin: 0; }
.photo-certif picture { display: block; width: 100%; height: 100%; }
.pc-badge {
  position: absolute; left: 18px; bottom: 74px;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 15px; border-radius: 12px;
  background: rgba(11, 26, 51, .93);
  box-shadow: 0 10px 24px rgba(11, 26, 51, .32);
}
.pc-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none; background: #22c55e;
  animation: pcPulse 2.4s ease-out infinite;
}
@keyframes pcPulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55) }
  70%  { box-shadow: 0 0 0 13px rgba(34, 197, 94, 0) }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0) }
}
.pc-txt { display: flex; flex-direction: column; line-height: 1.18 }
.pc-txt b {
  font-family: var(--font-head); font-size: .9rem; font-weight: 700;
  letter-spacing: .12em; color: #4ade80;
}
.pc-txt em { font-style: normal; font-size: .75rem; color: #cfdaea }
.pc-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 18px 14px; font-size: .8rem; line-height: 1.45; color: #eef3fa;
  background: linear-gradient(to top, rgba(11, 26, 51, .92), rgba(11, 26, 51, 0));
}
@media (max-width: 560px) {
  .pc-badge { left: 12px; bottom: 88px; padding: 8px 12px }
  .pc-cap { font-size: .75rem }}
@media (prefers-reduced-motion: reduce) { .pc-dot { animation: none }}

/* Sous 520 px la grille des metiers passe sur une colonne */


/* --- Grille de photos de realisations ------------------------------- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 20px;
}
.photo-card {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--ink-100);
  box-shadow: 0 10px 26px rgba(11, 26, 51, .10);
  transition: transform .3s ease, box-shadow .3s ease;
}
.photo-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(11, 26, 51, .16) }
.photo-card picture { display: block }
.photo-card img { display: block; width: 100%; height: 270px; object-fit: cover }
.photo-card figcaption {
  padding: 13px 15px 15px;
  font-size: .81rem;
  line-height: 1.5;
  color: var(--ink-700);
  background: var(--surface);
}
.photo-card .pc-tag {
  position: absolute; top: 11px; left: 11px;
  background: rgba(11, 26, 51, .92);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .photo-card, .photo-card:hover { transform: none; transition: none }}

/* --- Tableau RTO / RPO sur fond marine : texte clair, or lumineux, filets visibles --- */
.rto-liste { width: 100%; max-width: 360px; }
.rto-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, .22); }
.rto-ligne:last-of-type { border-bottom: 0; }
.rto-ligne span:first-child { color: #dbe3f1; font-size: 15px; }
.rto-ligne span:last-child { color: var(--or-sur-marine); font-weight: 700; font-size: 15px; text-align: right; }
/* Texte courant dans un panneau marine (pictogramme et phrase centrés). */
.panel-marine-texte { color: #dbe3f1; font-size: 16px; line-height: 1.65; }
.rto-note { color: #b9c5da; font-size: 13px; line-height: 1.6; margin-top: 18px; }

/* --- Logo « Reference sur la plateforme Cybermalveillance.gouv.fr » : fourni par la plateforme,
   affiche tel quel (proportions d'origine, aucune retouche) --- */
.footer-certs .cert-logo { display: inline-flex; margin-right: 6px; line-height: 0; }
.footer-certs .cert-logo img { display: block; width: 112px; height: 84px; border-radius: 3px; }
/* Accueil : logo de reference en haut de l'en-tete, au-dessus de la ligne d'accroche. */





.label-ref-section { padding: 26px 0 0; }
.label-ref { display: flex; align-items: center; gap: 22px; max-width: 760px; margin: 0 auto; padding: 16px 20px; background: #fff; border: 1px solid var(--ink-100); border-radius: 14px; box-shadow: 0 2px 12px rgba(11, 26, 51, .05); }
.label-ref-logo { flex: none; line-height: 0; }
.label-ref-logo img { display: block; width: 160px; height: auto; }
.label-ref p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-700); }
@media (max-width: 560px) { .label-ref { flex-direction: column; text-align: center; } }

/* --- Video de demonstration dans un cadre .ill-parc --- */
.video-demo video { display: block; width: 100%; height: auto; border-radius: 10px; background: #0b1a33; }

/* --- Navigation interne d'une page longue (puces d'ancres) --- */
.page-ancres { padding: 18px 0 0; }
.page-ancres .container { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.page-ancres .pa-label { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-500); margin-right: 6px; }
.page-ancres a { padding: 7px 14px; border: 1px solid var(--ink-100); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; color: var(--ink-700); }
.page-ancres a:hover { border-color: var(--blue-600); color: var(--blue-600); }
.page-ancres a:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 2px; }
section[id], .section-head[id] { scroll-margin-top: 96px; }

/* --- Bandeau photo (photo d'illustration libre de droits, pleine largeur) --- */
.photo-bandeau-section { padding: 34px 0 0; }
.photo-card.photo-bandeau img { height: clamp(170px, 26vw, 320px); }
.photo-card.photo-bandeau:hover { transform: none; box-shadow: 0 10px 26px rgba(11, 26, 51, .10); }

/* --- Carte d'accroche : la chaine complete -------------------------- */

.chain { list-style: none; margin: 0; padding: 0; position: relative }
.chain::before {
  content: "";
  position: absolute; left: 15px; top: 22px; bottom: 22px;
  width: 2px; background: var(--ink-100);
}




/* Etat anime : chaque maillon s'allume a son tour, la place est reservee */
/* Etape pas encore allumee : on grise le titre et on estompe la pastille,
   sans baisser l'opacite du texte (contraste AA conserve, 5,6:1). */







/* --- Les quatre familles de competences ------------------------------
   Elles coiffent les onze domaines : elles doivent donc se distinguer
   nettement des cartes qui suivent, sans les concurrencer. */
.fam-bloc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(232px, 100%), 1fr));
  gap: 2px;
  margin: 0 0 46px;
  background: var(--ink-100);
  border: 1px solid var(--ink-100);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(11, 26, 51, .10);
}
.fam-carte {
  position: relative;
  padding: 30px 24px 26px;
  background: var(--surface);
  transition: background .25s ease;
}
.fam-carte::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--blue-600);
  transform: scaleX(.28);
  transform-origin: left;
  transition: transform .35s ease;
}
.fam-carte:hover::before { transform: scaleX(1) }
.fam-carte:hover { background: var(--surface-2) }
.fam-ic {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--blue-600);
  margin-bottom: 16px;
  transition: background .25s ease, color .25s ease;
}
.fam-carte:hover .fam-ic { background: var(--blue-600); color: #ffffff }
.fam-carte b {
  display: block;
  font-family: var(--font-head);
  font-size: 17.5px; font-weight: 700;
  line-height: 1.3;
  color: var(--ink-900);
  margin-bottom: 9px;
}
.fam-carte em {
  font-style: normal;
  font-size: 13.5px; line-height: 1.6;
  color: var(--ink-500);
}
@media (max-width: 620px) {
  .fam-bloc { border-radius: 14px }
  .fam-carte { padding: 24px 20px 22px }
  .fam-carte b { font-size: 16.5px }}

/* --- En-tete : eviter que la barre de menu ne pousse le bouton
       "Nous contacter" hors de l'ecran ---------------------------------
   La barre compte huit entrees. Entre 760 px (bascule vers le menu
   burger) et environ 1370 px, la somme marque + menu + telephone +
   bouton depassait la largeur du conteneur : le bouton sortait de
   l'ecran. On resserre le menu, on masque le numero (deja present dans
   le bandeau superieur) puis on bascule sur le menu burger plus tot. */
nav.main-nav > ul > li > a { padding: 14px 9px; }
.header-inner > .brand { flex: 0 0 auto; }
.header-cta { flex: 0 0 auto; }

/* Le conteneur est plafonne a 1180 px : sur un grand ecran la place
   disponible ne grandit plus. Le numero de l'en-tete faisait donc
   deborder la barre a toutes les largeurs. Il reste accessible dans le
   bandeau superieur, dans chaque encart d'appel et dans le pied de page. */
.header-phone { display: none; }

@media (max-width: 1120px) {
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #ffffff; }
  .nav-toggle { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-size: 22px; line-height: 1; padding: 0; flex-shrink: 0; }
  nav.main-nav { position: fixed; top: 81px; left: 0; right: 0; bottom: 0; width: 100%; background: var(--panel); flex-direction: column; padding: 20px; display: none; overflow-y: auto; border-top: 1px solid var(--ink-100); z-index: 9999; }
  nav.main-nav.open { display: flex; }
  nav.main-nav > ul { flex-direction: column; width: 100%; align-items: stretch; }
  nav.main-nav > ul > li > a { padding: 14px 14px; }
  .mega-list { position: static; transform: none; width: 100%; box-shadow: none; border: none; display: none; }
  nav.main-nav > ul > li:hover .mega-list { display: none; }
  nav.main-nav > ul > li.open .mega-list { display: flex; }}

/* L'en-tete et le bandeau superieur peuvent etre plus larges que le
   corps du texte : cela rend 80 px a la barre de menu sans changer la
   mise en page des sections. Les deux restent alignes entre eux. */
.header-inner, .topbar-inner { max-width: 1260px; }

/* --- Referentiels appliques (sous les livrables) --------------------- */
.ref-block { margin-top: 42px; text-align: center }


.ref-note {
  max-width: 740px; margin: 20px auto 0;
  font-size: 12px; line-height: 1.65;
  color: var(--ink-500);
}


/* --- Engagement de delai -------------------------------------------- */

/* Bloc (et non flex) : en flex, chaque morceau de texte et chaque <b>
   devenaient une colonne et la phrase se lisait en tranches. L'icone est
   posee en absolu dans la marge gauche. */
.engagement-line {
  display: block; position: relative;
  margin: 20px 0 0;
  padding: 14px 18px 14px 49px;
  border: 1px solid var(--ink-100);
  border-radius: 10px;
  background: var(--surface);
  font-size: 14.5px; line-height: 1.55;
  color: var(--ink-700);
  max-width: 640px;
}
.engagement-line b { color: var(--ink-900) }
.engagement-ic {
  position: absolute; left: 18px; top: 16px;
  width: 20px; height: 20px; margin: 0;
  color: var(--blue-600);
}
.engagement-ic svg { width: 20px; height: 20px }

/* --- Prix de depart affiche au-dessus de l'estimateur ---------------- */
.price-from {
  margin: 16px auto 0;
  font-family: var(--font-head);
  font-size: 17px; font-weight: 600;
  color: var(--ink-700);
  text-align: center;
}
.price-from b { font-size: 25px; font-weight: 700; color: var(--blue-600) }
.price-from span {
  display: block;
  font-family: var(--font-body);
  font-size: 12.5px; font-weight: 500;
  color: var(--ink-500);
  margin-top: 4px;
}

/* --- Bandeau des communes desservies, en pied de page ----------------
   Liste souple : chaque commune reste solidaire de son separateur, donc
   aucune ne se retrouve seule en debut de ligne quand la largeur change. */
.footer-zone {
  border-top: 1px solid rgba(255,255,255,.10);
  padding: 20px 0 6px;
}
.footer-zone-label {
  display: block;
  font-family: var(--font-head);
  font-size: 12px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--on-navy-500);
  margin-bottom: 10px;
}
.footer-zone-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  gap: 6px 0;
}
.footer-zone-list li { display: flex; align-items: center }
.footer-zone-list li:not(:last-child)::after {
  content: "\00b7";
  color: #4a5972;
  margin: 0 10px;
}
.footer-zone-list a {
  display: inline-block; padding: 4px 0;
  font-size: 12.5px;
  color: var(--on-navy-400);
  text-decoration: none;
  white-space: nowrap;
}
.footer-zone-list a:hover { color: var(--or-sur-marine) }
@media (max-width: 560px) {
  .footer-zone-list a { font-size: 12px }
  .footer-zone-list li:not(:last-child)::after { margin: 0 7px }}

/* --- Consentement RGPD dans les formulaires -------------------------- */
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 18px;
  font-size: 12.8px;
  line-height: 1.55;
  color: var(--ink-500);
  cursor: pointer;
}
.form-consent input[type="checkbox"] {
  flex: none;
  width: 17px; height: 17px;
  margin-top: 2px;
  accent-color: var(--blue-600);
  cursor: pointer;
}
.form-consent a { color: var(--blue-600); text-decoration: underline }

/* --- Recherche de compatibilite des outils metiers ------------------- */
.integr { max-width: 860px; margin: 0 auto 32px }
.integr-recherche {
  display: flex; align-items: center; gap: 11px;
  padding: 0 16px;
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(11, 26, 51, .06);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.integr-recherche:focus-within {
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, .12);
}
.integr-recherche svg { color: var(--ink-500); flex: none }
.integr-recherche input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  padding: 14px 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink-900);
}
.integr-recherche input::-webkit-search-cancel-button { cursor: pointer }
.integr-groupe { margin-top: 26px }
.integr-groupe[hidden] { display: none }
.integr-legende {
  display: block;
  font-family: var(--font-head);
  font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 12px;
}
.integr-grille { display: flex; flex-wrap: wrap; gap: 9px }
.integr-chip {
  font-family: var(--font-body);
  font-size: 13.5px; font-weight: 600;
  color: var(--ink-900);
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: 8px;
  padding: 9px 15px;
  cursor: default;
  transition: border-color .2s ease, transform .2s ease;
}
.integr-chip[hidden] { display: none }
.integr-chip:hover { border-color: var(--blue-600); transform: translateY(-1px) }
.integr-chip--hub { color: var(--ink-700); border-style: dashed }
.integr-chip.integr-trouve { border-color: var(--blue-600); background: var(--surface-2) }
.integr-vide {
  margin: 22px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--ink-100);
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 14.5px; line-height: 1.6;
  color: var(--ink-700);
}
.integr-vide[hidden] { display: none }
.integr-note {
  margin: 20px 0 0;
  font-size: 12.5px; line-height: 1.6;
  color: var(--ink-500);
}

/* --- Bouton de discussion, en bas a droite --------------------------- */
/* --chat-bas : garde sous le bouton. Releve pour que la barre des taches
   de Windows ne recouvre pas la bulle quand la fenetre descend derriere. */
:root { --chat-bas: 86px; }
.chat-lanceur {
  /* Pastille ronde. L'ancienne version etait une pilule large avec
     libelle et sous-titre : posee en fixe dans le coin bas droit, elle
     recouvrait en permanence le texte de la page -- la phrase de
     l'accroche a 745 px, la troisieme preuve a 1440 px, le bandeau
     cookies en bas de page. Le libelle est desormais une infobulle. */
  position: fixed;
  right: 22px; bottom: var(--chat-bas);
  z-index: 9990;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  padding: 0;
  border: 1px solid var(--ink-100);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(11, 26, 51, .18);
  cursor: pointer;
  font-family: var(--font-body);
  text-align: left;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .35s ease, transform .35s ease, box-shadow .25s ease;
}
.chat-lanceur.visible { opacity: 1; transform: translateY(0) }
.chat-lanceur:hover { box-shadow: 0 14px 38px rgba(11, 26, 51, .26) }
.chat-lanceur:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 3px }
.chat-lanceur-ic {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--blue-600);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}

/* Le libelle sort vers la gauche au survol seulement. Il reste annonce
   aux lecteurs d'ecran par l'aria-label porte par le bouton. */
.chat-lanceur-txt {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  display: flex; flex-direction: column; line-height: 1.25;
  white-space: nowrap;
  padding: 9px 14px;
  border: 1px solid var(--ink-100);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.chat-lanceur:hover .chat-lanceur-txt,
.chat-lanceur:focus-visible .chat-lanceur-txt {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.chat-lanceur-txt b {
  font-family: var(--font-head);
  font-size: 14px; font-weight: 700;
  color: var(--ink-900);
}
.chat-lanceur-txt em {
  font-style: normal;
  font-size: 12px;
  color: var(--ink-500);
}
/* Temoin de presence, pose sur le bord de la pastille. */
.chat-lanceur-etat {
  position: absolute;
  top: 7px; right: 7px;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  background: var(--ink-300);
}
.chat-lanceur-etat.est-ouvert {
  background: #22c55e;
  animation: chatPouls 2.4s ease-out infinite;
}
@keyframes chatPouls {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5) }
  70%  { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0) }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0) }
}
.chat-lanceur--charge { opacity: .55; pointer-events: none }
@media (max-width: 560px) {
  .chat-lanceur { right: 14px; bottom: 78px; width: 50px; height: 50px }
  .chat-lanceur-ic { width: 33px; height: 33px }}
/* Pas de survol sur ecran tactile : l'infobulle n'y a pas de sens. */
@media (hover: none) {
  .chat-lanceur-txt { display: none }}
@media (prefers-reduced-motion: reduce) {
  .chat-lanceur { transition: none; opacity: 1; transform: none }
  .chat-lanceur-txt { transition: none }
  .chat-lanceur-etat.est-ouvert { animation: none }}

/* --- Motif de fond : points d'interrogation (page FAQ) --------------- */
.hero-bg--interro, .page-bg.hero-bg--interro { color: var(--blue-600) }
.hero-bg--interro .pt-int {
  font-family: var(--font-head);
  font-weight: 700;
  fill: var(--blue-600);
  fill-opacity: .16;
  animation: bg-interro 7s ease-in-out infinite;
  animation-delay: calc(var(--i) * .45s);
}
@keyframes bg-interro {
  0%, 100% { fill-opacity: .10; transform: translateY(0) }
  50%      { fill-opacity: .26; transform: translateY(-9px) }
}

/* --- Motif de fond : reperes de carte (pages par commune) ------------ */
.hero-bg--reperes, .page-bg.hero-bg--reperes { color: var(--blue-600) }
.hero-bg--reperes .repere path {
  fill: none;
  stroke: var(--blue-600);
  stroke-width: 2;
  stroke-opacity: .30;
}
.hero-bg--reperes .repere circle {
  fill: var(--gold-brand);
  fill-opacity: .45;
}
.hero-bg--reperes .repere {
  animation: bg-repere 6.5s ease-in-out infinite;
  animation-delay: calc(var(--i) * .5s);
  transform-box: fill-box;
  transform-origin: center bottom;
}
@keyframes bg-repere {
  0%, 100% { opacity: .55 }
  50%      { opacity: 1 }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg--interro .pt-int, .hero-bg--reperes .repere { animation: none }}

/* --- Livrables remis au client --------------------------------------- */
.livr-liste { list-style: none; margin: 0; padding: 0 }
.livr {
  display: flex; align-items: flex-start; gap: 15px;
  padding: 18px 0;
  border-bottom: 1px solid var(--ink-100);
}
.livr:last-child { border-bottom: 0 }
.livr-ic {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  color: var(--blue-600);
}
.livr-txt { min-width: 0 }
.livr-txt b {
  font-family: var(--font-head);
  font-size: 15.5px; font-weight: 700;
  color: var(--ink-900);
  margin-right: 9px;
}
.livr-quand {
  display: inline-block;
  font-size: 12px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--blue-600);
  background: var(--surface-2);
  border-radius: 5px;
  padding: 3px 8px;
  vertical-align: 2px;
}
.livr-txt em {
  display: block;
  font-style: normal;
  margin-top: 7px;
  font-size: 14px; line-height: 1.6;
  color: var(--ink-700);
}

/* --- Extrait de rapport de certification ----------------------------- */
.doc {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(11, 26, 51, .10);
}
.doc-tete {
  position: relative;
  padding: 18px 20px 15px;
  border-bottom: 1px solid var(--ink-100);
  background: var(--surface-2);
}
.doc-tete b {
  display: block;
  font-family: var(--font-head);
  font-size: 15px; font-weight: 700;
  color: var(--ink-900);
}
.doc-tete > span { font-size: 12.5px; color: var(--ink-500) }
.doc-tete .doc-tag {
  position: absolute; top: 16px; right: 18px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-500);
  border: 1px dashed var(--ink-300);
  border-radius: 5px;
  padding: 3px 8px;
}
.doc-table { width: 100%; border-collapse: collapse; font-size: 13.5px }
.doc-table th {
  text-align: left;
  padding: 11px 20px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-500);
  border-bottom: 1px solid var(--ink-100);
}
.doc-table td {
  padding: 12px 20px;
  border-bottom: 1px solid var(--ink-100);
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
}
.doc-table tbody tr:last-child td { border-bottom: 0 }
.doc-ok {
  display: inline-block;
  font-size: 12px; font-weight: 700;
  letter-spacing: .06em;
  color: #0f6e56;
  background: #e1f5ee;
  border-radius: 5px;
  padding: 3px 9px;
}
.doc-note {
  margin: 0;
  padding: 14px 20px 16px;
  font-size: 12px; line-height: 1.6;
  color: var(--ink-500);
  background: var(--surface-2);
  border-top: 1px solid var(--ink-100);
}

/* --- Lien d'evitement (acces direct au contenu au clavier) ----------- */
.saut-contenu {
  position: absolute;
  left: 12px; top: 0;
  transform: translateY(-60px);
  z-index: 10000;
  padding: 11px 20px;
  background: var(--navy-950);
  color: #ffffff;
  font-size: 14px; font-weight: 600;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: transform .18s ease;
}
.saut-contenu:focus { transform: none; outline: 3px solid var(--gold-brand); outline-offset: 2px }

/* --- Tableau du rapport : defilement maitrise sur petit ecran -------- */
.doc { position: relative }
@media (max-width: 620px) {
  .doc-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap }
  .doc-table thead, .doc-table tbody, .doc-table tr { display: table; width: 100%; table-layout: fixed }
  .doc-table th, .doc-table td { padding-left: 14px; padding-right: 14px; font-size: 12.5px }
  .doc-tete .doc-tag { position: static; display: inline-block; margin-top: 8px }}

/* --- Signature de l'article (date, auteur) --------------------------- */
.article-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--ink-500);
}
.article-meta time { font-weight: 600; color: var(--ink-700) }
.article-meta-sep { color: var(--ink-500) }

/* --- Couvertures d'articles dessinees (remplacent le stock photo) ---- */
.couv { display: block; width: 100%; height: auto;
  /* aspect-ratio calee sur les JPEG generes (1200x630) : l'image occupe
     toute la largeur SANS rognage lateral, sinon le filigrane Assutech
     place en bas a droite serait coupe dans les cartes du blog. */
  aspect-ratio: 1200 / 630;
  background: var(--surface-2) }
.blog-card .couv { height: auto }
.article-couv .couv { height: auto; border-radius: var(--radius-lg) }
img.couv { object-fit: cover; background: var(--surface-2) }

























@keyframes couvOnde {
  0%   { opacity: .45; transform: scale(.55) }
  100% { opacity: 0;   transform: scale(1.25) }
}


/* --- Les quatre questions sans reponse (page Infogerance) ------------ */
.quest-liste {
  list-style: none; margin: 32px auto 0; padding: 0;
  max-width: 860px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 14px;
}
/* Bloc + icone absolue (comme .engagement-line) : en flex, la phrase etait
   coupee en colonnes et l'icone, sans taille, s'affichait a 0 x 0 px. */
.quest {
  display: block; position: relative; min-width: 0; overflow-wrap: anywhere;
  padding: 17px 20px 17px 56px;
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: 10px;
  font-size: 15px; line-height: 1.5;
  color: var(--ink-700);
}
.quest b { color: var(--ink-900); font-weight: 700 }
.quest-ic { position: absolute; left: 20px; top: 17px; width: 22px; height: 22px; margin: 0; color: var(--blue-600) }
.quest-ic svg { display: block; width: 22px; height: 22px }

/* --- La methode en quatre temps -------------------------------------- */
.etp-liste {
  list-style: none; margin: 34px auto 0; padding: 0;
  max-width: 820px;
  position: relative;
}
.etp-liste::before {
  content: "";
  position: absolute; left: 21px; top: 22px; bottom: 22px;
  width: 2px; background: var(--ink-100);
}
.etp { position: relative; display: flex; gap: 20px; padding: 14px 0 }
.etp-num {
  flex: none; position: relative; z-index: 1;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-600);
  color: #ffffff;
  font-family: var(--font-head);
  font-size: 14px; font-weight: 700;
  letter-spacing: .02em;
}
.etp-txt b {
  display: block;
  font-family: var(--font-head);
  font-size: 16.5px; font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 6px;
}
.etp-txt em {
  font-style: normal;
  font-size: 14.5px; line-height: 1.65;
  color: var(--ink-700);
}
@media (max-width: 560px) {
  .etp { gap: 14px }
  .etp-liste::before { left: 18px }
  .etp-num { width: 38px; height: 38px; font-size: 13px }}

/* --- Voir / Savoir / Agir (accueil) ---------------------------------- */
.vis-grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 18px; margin-top: 34px;
}
.vis-carte {
  position: relative;
  padding: 26px 24px 24px;
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(11, 26, 51, .06);
}
.vis-num {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 12px; font-weight: 700;
  letter-spacing: .1em;
  color: var(--blue-600);
  background: var(--surface-2);
  border-radius: 5px;
  padding: 4px 9px;
  margin-bottom: 14px;
}
.vis-carte b {
  display: block;
  font-family: var(--font-head);
  font-size: 21px; font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 9px;
}
.vis-carte em {
  font-style: normal;
  font-size: 14.5px; line-height: 1.65;
  color: var(--ink-700);
}

/* --- Encart plateforme assumee (NinjaOne) ---------------------------- */
.outils {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 16px; max-width: 860px; margin: 34px auto 0;
}
.outil {
  padding: 24px 26px;
  background: var(--surface-2);
  border: 1px solid var(--ink-100);
  border-radius: 12px;
}
.outil-tete { display: flex; align-items: center; gap: 11px; margin-bottom: 12px }
.outil-pastille--alt { background: var(--navy-950) }
.outil-pastille {
  font-family: var(--font-head);
  font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #ffffff; background: var(--blue-600);
  border-radius: 5px; padding: 4px 9px;
}
.outil-tete b {
  font-family: var(--font-head);
  font-size: 19px; font-weight: 700;
  color: var(--ink-900);
}
.outil p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-700) }
.outil-note {
  max-width: 860px; margin: 16px auto 0;
  font-size: 12.5px; line-height: 1.65;
  color: var(--ink-500);
  text-align: center;
}

/* --- Tableau comparatif (MPLS / SD-WAN) ------------------------------ */
.comp {
  max-width: 900px; margin: 30px auto 0;
  border: 1px solid var(--ink-100);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(11, 26, 51, .07);
}
.comp-table { width: 100%; border-collapse: collapse; font-size: 14px }
.comp-table thead th {
  padding: 15px 18px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--ink-100);
  font-family: var(--font-head);
  font-size: 15px; font-weight: 700;
  color: var(--ink-900);
  text-align: left;
}
.comp-table thead th:first-child { width: 27% }
.comp-table tbody th {
  padding: 14px 18px;
  text-align: left;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink-900);
  background: var(--surface-2);
  border-bottom: 1px solid var(--ink-100);
  vertical-align: top;
}
.comp-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--ink-100);
  border-left: 1px solid var(--ink-100);
  color: var(--ink-700);
  line-height: 1.55;
  vertical-align: top;
}
.comp-table tbody tr:last-child th,
.comp-table tbody tr:last-child td { border-bottom: 0 }
.comp-table tbody tr:hover td { background: rgba(29, 78, 216, .035) }
.comp-avis {
  max-width: 860px; margin: 22px auto 0;
  padding: 18px 22px;
  background: var(--surface-2);
  border-left: 3px solid var(--blue-600);
  font-size: 14.5px; line-height: 1.7;
  color: var(--ink-700);
}
.comp-avis b { color: var(--ink-900) }
@media (max-width: 700px) {
  .comp { overflow-x: auto }
  .comp-table { min-width: 560px }
  .comp-table thead th, .comp-table tbody th, .comp-table td { padding: 12px 13px; font-size: 13px }}

/* --- Sch&eacute;ma du c&oelig;ur de r&eacute;seau ------------------------------------ */
.coeur-fig { max-width: 780px; margin: 34px auto 0 }
.coeur-svg { display: block; width: 100%; height: auto }
.cs-site rect { fill: #ffffff; stroke: var(--ink-100); stroke-width: 1.6 }
.cs-coeur rect { fill: #ffffff; stroke: var(--blue-600); stroke-width: 2.4 }
.cs-bouclier { fill: rgba(29,78,216,.08); stroke: var(--blue-600); stroke-width: 2.2 }
.cs-check { fill: none; stroke: var(--gold-brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round }
.cs-lien { fill: none; stroke: var(--blue-600); stroke-width: 2; stroke-opacity: .5 }
.cs-lien--fin { stroke-opacity: .3 }
.cs-flux { fill: var(--blue-600) }
.cs-lbl { font-family: var(--font-head); font-size: 13px; font-weight: 700; fill: var(--ink-900) }
.cs-sub { font-family: var(--font-body); font-size: 11px; fill: var(--ink-500) }
.coeur-cap {
  margin: 14px auto 0; max-width: 640px; text-align: center;
  font-size: 13px; line-height: 1.6; color: var(--ink-500);
}

/* --- Comparaison des deux mod&egrave;les de pare-feu ------------------------ */
.modeles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
  gap: 18px; max-width: 900px; margin: 40px auto 0;
}
.modele {
  padding: 26px 26px 24px;
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: 12px;
}
.modele--notre { border-color: var(--blue-600); box-shadow: 0 12px 32px rgba(29,78,216,.10) }
.modele-tag {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #ffffff; background: var(--blue-600);
  border-radius: 5px; padding: 4px 9px; margin-bottom: 13px;
}
.modele-tag--gris { background: var(--ink-500) }
.modele b {
  display: block;
  font-family: var(--font-head);
  font-size: 18px; font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 14px;
}
.modele ul { list-style: none; margin: 0; padding: 0 }
.modele li {
  position: relative;
  padding: 9px 0 9px 26px;
  font-size: 14px; line-height: 1.6;
  color: var(--ink-700);
  border-bottom: 1px solid var(--ink-100);
}
.modele li:last-child { border-bottom: 0 }
.modele li .tick {
  position: absolute; left: 0; top: 11px;
  width: 17px; height: 17px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-600); color: #fff;
}
.modele li .tick svg { width: 10px; height: 10px }
.modele:not(.modele--notre) li::before {
  content: "\2013";
  position: absolute; left: 6px; color: var(--ink-300); font-weight: 700;
}

/* --- Marques de pare-feu op&eacute;r&eacute;es ------------------------------------ */
.marques {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px;
  margin: 32px auto 0;
}
.marques-lbl {
  font-family: var(--font-head);
  font-size: 12px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-500);
  margin-right: 6px;
}
.marque {
  font-family: var(--font-head);
  font-size: 14px; font-weight: 700;
  color: var(--ink-900);
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: 8px;
  padding: 9px 17px;
}
@media (prefers-reduced-motion: reduce) { .cs-flux { display: none }}

/* --- Cas clients x-bees (cites avec attribution) --------------------- */
.cas-grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 18px; margin-top: 36px;
}
.cas {
  display: flex; flex-direction: column;
  padding: 24px 24px 20px;
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: 12px;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.cas:hover { border-color: var(--blue-600); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(11,26,51,.10) }
.cas-tete { margin-bottom: 16px }
.cas-tete b {
  display: block;
  font-family: var(--font-head);
  font-size: 17px; font-weight: 700;
  color: var(--ink-900);
}
.cas-lieu {
  display: block; margin-top: 3px;
  font-size: 12px; letter-spacing: .02em;
  color: var(--ink-500);
}
.cas-chiffre {
  display: flex; align-items: baseline; gap: 9px;
  padding: 13px 0 15px;
  border-top: 1px solid var(--ink-100);
  border-bottom: 1px solid var(--ink-100);
  margin-bottom: 15px;
}
.cas-chiffre strong {
  font-family: var(--font-head);
  font-size: 27px; font-weight: 700;
  line-height: 1;
  color: var(--blue-600);
  font-variant-numeric: tabular-nums;
}
.cas-chiffre span { font-size: 12.5px; line-height: 1.35; color: var(--ink-500) }
.cas p { margin: 0 0 16px; font-size: 14px; line-height: 1.65; color: var(--ink-700); flex: 1 }
.cas-pied {
  display: flex; flex-direction: column; gap: 7px;
  padding-top: 13px;
  border-top: 1px solid var(--ink-100);
}
.cas-integ {
  font-size: 12px; font-weight: 600;
  color: var(--ink-500);
}
.cas-pied a {
  font-size: 13px; font-weight: 600;
  color: var(--blue-600);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.cas-pied a:hover { text-decoration: underline }
.cas-mention {
  max-width: 820px; margin: 32px auto 0;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px dashed var(--ink-300);
  border-radius: 10px;
  font-size: 12.8px; line-height: 1.7;
  color: var(--ink-500);
}
.cas-mention b { color: var(--ink-900) }
.cas-mention a { color: var(--blue-600) }

/* --- La bande des quatre familles : registre visuel distinct ---------
   Les familles coiffent les onze domaines. Sur fond blanc et en cartes
   blanches, les deux blocs se confondaient : la bande marine les separe
   sans ambiguite. */
.section-familles {
  background: var(--navy-950);
  padding: var(--rythme) 0;
}
.section-familles .eyebrow { color: var(--or-sur-marine) }
.section-familles .eyebrow::before { background: var(--or-sur-marine) }
.section-familles h2 { color: #ffffff }
.section-familles .lede { color: var(--on-navy-200) }
.section-familles .fam-bloc {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .28);
  margin-bottom: 0;
}
.section-familles .fam-carte { background: #14264a }
.section-familles .fam-carte:hover { background: #1b3159 }
.section-familles .fam-carte::before { background: var(--or-sur-marine) }
.section-familles .fam-ic { background: rgba(255, 255, 255, .10); color: var(--or-sur-marine) }
.section-familles .fam-carte:hover .fam-ic { background: var(--or-sur-marine); color: var(--navy-950) }
.section-familles .fam-carte b { color: #ffffff }
.section-familles .fam-carte em { color: var(--on-navy-400) }

/* --- Rattachement de chaque domaine a sa famille ---------------------- */
.pillar-fam {
  display: inline-block;
  margin: 0 0 9px;
  font-family: var(--font-head);
  font-size: 12px; font-weight: 700;
  letter-spacing: .085em; text-transform: uppercase;
  color: var(--ink-500);
  background: var(--surface-2);
  border-radius: 4px;
  padding: 3px 8px;
  transition: background .22s ease, color .22s ease;
}
.pillar-card:hover .pillar-fam { background: var(--blue-600); color: #ffffff }

/* --- Widget x-bees (Wildix Kite) -------------------------------------- */
/* Le SDK pose sa bulle a 20 px du bas : trop bas, la barre des taches de
   Windows la masque en partie. On la remonte a la meme hauteur que notre
   propre bouton. La classe est posee par js/main.js sur le conteneur
   reellement injecte ; les selecteurs ci-dessous couvrent les variantes
   de nommage du SDK au cas ou la detection echouerait. */
.chat-remonte,
iframe[src*="x-bees.com"][style*="fixed"],
div[id*="wxSDK"], div[id*="kite-"], div[class*="kite-widget"] {
  bottom: var(--chat-bas) !important;
}
@media (max-width: 560px) {
  .chat-remonte,
  iframe[src*="x-bees.com"][style*="fixed"],
  div[id*="wxSDK"], div[id*="kite-"], div[class*="kite-widget"] {
    bottom: 78px !important;
  }
}


/* --- Articles lies, en fin de billet ---------------------------------- */
.lire-ensuite { max-width: 740px; margin: 46px auto 0; padding-top: 30px; border-top: 1px solid var(--ink-100) }
.lire-ensuite > h2 {
  font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-500); margin: 0 0 16px;
}
.le-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.le-item {
  display: block; padding: 16px 18px;
  border: 1px solid var(--ink-100); border-radius: 12px;
  background: var(--surface); text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.le-item:hover { border-color: var(--blue-600); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(11,26,51,.10) }
.le-item:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 2px }
.le-rub { display: block; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--blue-600); margin-bottom: 6px }
.le-item b { display: block; font-family: var(--font-head); font-size: 15.5px; font-weight: 700; line-height: 1.32; color: var(--ink-900) }
.le-item em { display: block; margin-top: 9px; font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--ink-500) }
@media (max-width: 620px) { .le-grid { grid-template-columns: 1fr } }


/* --- Rapport de certification telechargeable --------------------------- */
.doc-ko {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  color: #97361f; background: #fdeae4; border-radius: 5px; padding: 3px 9px;
}
.dl-note { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-500) }
.dl-bloc {
  display: grid; grid-template-columns: 232px 1fr; gap: 0;
  max-width: 950px; margin: 34px auto 0;
  border: 1px solid var(--ink-100); border-radius: 16px;
  background: var(--surface); overflow: hidden;
  box-shadow: 0 10px 30px rgba(11,26,51,.07);
}
.dl-chiffres {
  background: var(--navy-950);
  padding: 30px 26px;
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
}
.dl-c b { display: block; font-family: var(--font-head); font-size: 30px; font-weight: 800; color: #fff; line-height: 1 }
.dl-c span { display: block; margin-top: 5px; font-size: 12.5px; color: var(--on-navy-500) }
.dl-txt { padding: 30px 32px 32px }
.dl-txt > p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.62; color: var(--ink-700) }
.dl-txt .feature-list { margin: 0 0 22px }
.dl-txt .feature-list li { font-size: 14px }
.dl-txt .tick { color: var(--blue-600); font-weight: 700 }
@media (max-width: 760px) {
  .dl-bloc { grid-template-columns: 1fr }
  .dl-chiffres { flex-direction: row; flex-wrap: wrap; gap: 22px 34px; padding: 24px }
  .dl-txt { padding: 24px 22px 26px }
}


/* --- Corrections de contraste sur fond marine ------------------------- */
/* Mesures WCAG relevees sur le site en ligne : ces trois elements
   passaient sous 4,5:1, dont un a 1,01:1 (invisible). */
.footer-col li[style*="--ink-500"] { color: var(--on-navy-400) !important; font-size: 14px }
.footer-certs .cert-label,
.footer-certs .cert-chip[style*="--green-500"] { color: #3ddc97 !important; border-color: #3ddc97 !important }

/* "Partenaires technologiques" : 3,08:1 sur le pied de page marine */
.footer-certs .cert-label { color: var(--on-navy-500) }


/* --- Referentiels appliques sur nos chantiers -------------------------- */
/* Sept pastilles grises identiques ne disaient rien : le visiteur lisait
   "ISO/IEC 11801" sans savoir de quoi il s'agit. Chaque referentiel a
   desormais un pictogramme, sa famille et une ligne d'explication.
   Les pictogrammes sont dessines : les logos ISO, TIA et Fluke sont des
   marques deposees, nous n'avons pas le droit de les afficher. */
.ref-block { text-align: left }
.ref-block .ref-note { text-align: center }


/* --- Bloc mots-cles en bas d'article (maillage interne) -------------- */
.article-tags { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--ink-100) }
.article-tags-title {
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-500); margin-bottom: 12px }
.article-tags-list { display: flex; flex-wrap: wrap; gap: 8px }
.article-tag {
  display: inline-flex; align-items: center; padding: 6px 13px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--ink-100);
  font-size: 12.5px; font-weight: 600; color: var(--ink-500); text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease }
.article-tag:hover { background: var(--blue-600); border-color: var(--blue-600); color: #fff }


/* --- Secteurs : le metier et l'outil qu'on y trouve -------------------- */
/* Une pilule sur une ligne ne pouvait pas porter les deux informations.
   Le nom du secteur reste l'element principal, l'outil vient dessous en
   plus petit : c'est lui qui fait dire au visiteur "ils connaissent mon
   metier", sans voler la vedette au metier lui-meme. */







/* --- « Avant de superviser » : la rubrique la plus importante ---------- */
/* Elle etait au meme niveau visuel que le reste et arrivait 11e sur 14.
   Elle est desormais 4e, sur son propre fond, avec une progression
   01 -> 02 -> 03 reliee : le regard suit le parcours au lieu de lire
   trois encadres independants.
   On n'a pas repris le fond marine deja utilise deux fois plus haut :
   une troisieme bande sombre aurait dilue l'effet des deux premieres. */
.section-visibilite {
  position: relative;
  background: linear-gradient(180deg, #e3ebf9 0%, #eef3fc 100%);
  border-top: 1px solid #c7d7f0;
  border-bottom: 1px solid #c7d7f0;
}
.section-visibilite .eyebrow { color: var(--blue-700) }
.section-visibilite .eyebrow::before { background: var(--blue-700) }
.section-visibilite h2 { font-size: clamp(27px, 2.4vw, 34px); line-height: 1.2 }

.vis-grille { position: relative }
/* Le fil qui relie les trois temps. Purement decoratif, masque des que
   les cartes passent en colonne. */
.vis-grille::before {
  content: "";
  position: absolute;
  top: 56px; left: 12%; right: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue-600) 12%, var(--blue-600) 88%, transparent);
  opacity: .30;
  pointer-events: none;
}
.vis-carte { padding-top: 30px }
/* La pastille accueille desormais le pictogramme ; le numero redevient
   une mention discrete au-dessus du titre. Le fil de progression passe
   toujours a la hauteur des pastilles. */
.vis-ic {
  position: relative;
  z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  color: #fff;
  background: var(--blue-600);
  border: 3px solid #f0f4fc;
  border-radius: 50%;
  box-shadow: 0 5px 14px rgba(29, 78, 216, .30);
  margin-bottom: 14px;
}
.vis-ic svg { width: 26px; height: 26px }
.vis-num {
  display: block;
  font-family: var(--font-head);
  font-size: 12px; font-weight: 800;
  letter-spacing: .12em;
  color: var(--blue-700);
  background: none;
  padding: 0;
  margin-bottom: 5px;
}
.vis-carte b { font-size: 23px }
.vis-carte em { font-size: 15px }
.section-visibilite .vis-carte {
  border-color: #d6e1f5;
  box-shadow: 0 10px 28px rgba(11, 26, 51, .08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.section-visibilite .vis-carte:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(11, 26, 51, .12);
}
@media (max-width: 860px) {
  .vis-grille::before { display: none }
}


/* --- « Avant de superviser » : renfort ---------------------------------- */
/* La rubrique porte l'argument central. Elle respire plus que les autres,
   pose quatre questions auxquelles le visiteur ne sait pas repondre, puis
   montre la difference entre subir et anticiper.
   Le mot « proactif » n'y figure pas volontairement : releve dans l'analyse
   concurrentielle comme employe mot pour mot par presque tous les
   concurrents, il ne distingue plus rien. On montre au lieu de l'ecrire. */
.section-visibilite { padding-top: var(--rythme); padding-bottom: var(--rythme) }
.section-visibilite .quest-liste { max-width: 900px; margin-top: 30px }
.section-visibilite .quest { border-color: #cfdcf2; box-shadow: 0 4px 14px rgba(11,26,51,.05) }
.quest-chute {
  max-width: 720px; margin: 22px auto 0;
  text-align: center;
  font-size: 15px; line-height: 1.65;
  color: var(--ink-700);
}



/* --- Pictogrammes animes de la rubrique -------------------------------- */
/* Uniquement transform et opacity : ce sont les deux proprietes que la
   carte graphique traite seule, sans recalcul de mise en page. */
.vi-balai { transform-origin: 12px 12px; animation: viBalai 3.6s linear infinite }
@keyframes viBalai { to { transform: rotate(360deg) } }

.vi-onde { transform-origin: 12px 12px; opacity: 0; animation: viOnde 3.6s ease-out infinite }
.vi-onde2 { animation-delay: 1.2s }
@keyframes viOnde {
  0%   { transform: scale(.35); opacity: 0 }
  18%  { opacity: .85 }
  60%, 100% { transform: scale(1.55); opacity: 0 }
}

.vi-coche { opacity: 0; animation: viCoche 4.2s ease-in-out infinite }
.vi-c2 { animation-delay: .55s }
.vi-c3 { animation-delay: 1.1s }
@keyframes viCoche {
  0%, 6%    { opacity: 0; transform: scale(.6) }
  16%       { opacity: 1; transform: scale(1) }
  72%, 100% { opacity: 0; transform: scale(1) }
}

.vi-eclair { transform-origin: 12px 12px; animation: viEclair 2.4s ease-in-out infinite }
@keyframes viEclair {
  0%, 100% { opacity: .9;  transform: scale(1) }
  45%      { opacity: 1;   transform: scale(1.18) }
}

/* Le trait qui barre l'abonnement se trace puis s'efface */

@keyframes viBarre {
  0%, 18%   { stroke-dashoffset: 22 }
  38%, 78%  { stroke-dashoffset: 0 }
  96%, 100% { stroke-dashoffset: 22 }
}

/* Les quatre questions : le pictogramme s'anime au survol de sa carte */
.section-visibilite .quest-ic svg { transition: transform .3s ease }
.section-visibilite .quest:hover .quest-ic svg { transform: scale(1.12) }
.section-visibilite .quest { transition: border-color .22s ease, transform .22s ease }
.section-visibilite .quest:hover { border-color: var(--blue-600); transform: translateY(-2px) }

@media (prefers-reduced-motion: reduce) {
  .vi-balai, .vi-onde, .vi-coche, .vi-eclair { animation: none }
  .vi-onde { opacity: .5 }
  .vi-coche { opacity: 1 }
  
}


/* --- Referentiels : rubrique autonome ---------------------------------- */
/* Ils etaient imbriques dans « Livrables & conformite » et se confondaient
   avec elle. Sortis dans leur propre section, sur fond blanc entre deux
   bandes grises : la separation vient de l'enchainement des fonds et d'un
   filet, pas d'une couleur forte — la rubrique doit se distinguer sans
   prendre le pas sur les livrables, qui restent l'argument principal. */

.ref-tete { text-align: center; max-width: 640px; margin: 0 auto 6px }
.ref-tete h2 {
  font-size: clamp(21px, 2.2vw, 26px);
  line-height: 1.25;
  margin-bottom: 9px;
}
.ref-tete h2::after {
  content: "";
  display: block;
  width: 44px; height: 3px;
  margin: 13px auto 0;
  background: var(--blue-600);
  border-radius: 2px;
  opacity: .7;
}
.ref-tete p {
  margin: 0;
  font-size: 14.5px; line-height: 1.6;
  color: var(--ink-500);
}




/* --- Referentiels : presentation en cadre normatif --------------------- */
/* Sept vignettes a pastille coloree faisaient « catalogue produit ». Un
   cadre reglementaire se lit comme un document de reference : groupe par
   famille, aligne, separe par des filets, sans ombre ni survol anime.
   On reprend la logique de la liste des livrables juste au-dessus, pour
   que les deux rubriques voisines parlent la meme langue. */
.ref-cadre {
  max-width: 880px;
  margin: 30px auto 0;
  border: 1px solid var(--ink-100);
  border-radius: 12px;
  background: var(--panel);
  overflow: hidden;
}
.ref-fam + .ref-fam { border-top: 1px solid var(--ink-100) }
.ref-fam-titre {
  margin: 0;
  padding: 13px 26px 12px;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-500);
  background: var(--surface-2);
  border-bottom: 1px solid var(--ink-100);
}
.ref-liste { margin: 0; padding: 0 }
.ref-ligne {
  display: grid;
  grid-template-columns: 268px 1fr;
  align-items: baseline;
  gap: 0 26px;
  padding: 15px 26px;
}
.ref-ligne + .ref-ligne { border-top: 1px solid var(--ink-100) }
.ref-ligne dt {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--font-head);
  font-size: 15px; font-weight: 700;
  color: var(--ink-900);
}
.ref-ligne dd {
  margin: 0;
  font-size: 14px; line-height: 1.6;
  color: var(--ink-700);
}
.ref-ic {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--navy-800);
  border: 1px solid var(--ink-100);
}
.ref-ic svg { width: 17px; height: 17px }
@media (max-width: 720px) {
  .ref-ligne { grid-template-columns: 1fr; gap: 8px; padding: 14px 18px }
  .ref-fam-titre { padding: 11px 18px 10px }
  .ref-ligne dd { padding-left: 41px }
}


/* --- Fond de la page d'accueil : maillage de securite ------------------ */
/* Reglage des opacites : le motif passe sous des sections opaques a 84 %.
   Ce qui reste visible n'est donc que 16 % de son opacite propre. A 0,085,
   l'ecart avec le fond etait de 3 points sur 255 — invisible. A 0,38, il est
   de 13 points : perceptible sans jamais gener la lecture (texte a 8,8:1).
   La tuile fait 540 x 312 px, assez grande pour que la repetition ne se
   remarque pas sur une page longue. */
.fond-securite { color: var(--blue-600) }
.fond-securite .maille {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  opacity: .38;
}
/* Quelques ecailles pleines, comme les plaques d'une armure */
.fond-securite .plaque {
  fill: currentColor;
  fill-opacity: .13;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-opacity: .52;
}
/* Cadenas et boucliers glisses dans certaines alveoles : c'est ce qui fait
   lire « securite » plutot que « motif geometrique ». Assez rares pour ne
   pas tomber dans l'illustration. */
.fond-securite .glyphe {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  opacity: .5;
}
/* Balayage de veille : une bande tres pale traverse la page en 26 s.
   C'est ce qui distingue un fond « surveille » d'un simple decor. */
.fond-securite::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 46vw;
  background: linear-gradient(100deg, transparent, rgba(29, 78, 216, .07) 45%, transparent);
  animation: fond-veille 26s linear infinite;
}
@keyframes fond-veille {
  0%        { transform: translateX(-50vw) }
  70%, 100% { transform: translateX(120vw) }
}
@media (prefers-reduced-motion: reduce) {
  .fond-securite::after { animation: none; opacity: .5 }
}


/* --- Partenaires : grille statique ------------------------------------- */
/* Les logos defilaient, dupliques en deux exemplaires pour boucler. Deux
   bandeaux en mouvement sur la meme page, c'etait un de trop — et l'analyse
   concurrentielle rappelle que ces memes logos figurent chez tous les
   concurrents : ils informent, ils ne distinguent pas. Grille sobre. */
.partners-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(124px, 100%), 1fr));
  gap: 10px;
  margin-top: 28px;
}
.partners-grille .partner-logo { width: auto; height: 68px; padding: 10px 12px }
.partners-grille .partner-logo img { max-width: 92px; max-height: 34px }
@media (max-width: 560px) {
  .partners-grille { grid-template-columns: repeat(auto-fit, minmax(98px, 1fr)); gap: 8px }
  .partners-grille .partner-logo { height: 58px }
}


/* --- Prix d'entree dans la banniere ------------------------------------ */
/* Les montants existaient sur cinq pages internes, invisibles depuis
   l'accueil. Un dirigeant qui compare ecarte d'abord celui dont il ne peut
   rien estimer. */





/* --- Demande de rappel -------------------------------------------------- */
/* Un cran d'engagement en dessous du devis : deux champs, pas de redaction. */
.sr-seul {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rappel {
  display: grid; grid-template-columns: 250px 1fr;
  align-items: center; gap: 26px;
  max-width: 900px; margin: 20px auto 0;
  padding: 22px 26px;
  background: var(--panel);
  border: 1px solid var(--ink-100);
  border-radius: 12px;
}






.form-rappel .form-consent { margin-top: 12px; font-size: 12px }
@media (max-width: 760px) {
  .rappel { grid-template-columns: 1fr; gap: 16px; padding: 18px }
  
}

/* --- Barre d'appel fixe sur mobile -------------------------------------- */
.barre-mobile {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 9985;
  display: none;
  gap: 8px;
  padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
  background: var(--navy-950);
  box-shadow: 0 -6px 20px rgba(11, 26, 51, .22);
  transform: translateY(100%);
  transition: transform .28s ease;
}
.barre-mobile.visible { transform: translateY(0) }
.barre-mobile a {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 10px;
  border-radius: 8px;
  font-family: var(--font-head); font-size: 15px; font-weight: 700;
  text-decoration: none;
}
.bm-appel { background: var(--blue-600); color: #fff }
.bm-devis { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.42) }
@media (max-width: 760px) {
  .barre-mobile { display: flex }
  /* le bouton de discussion remonte au-dessus de la barre */
  .chat-lanceur { bottom: 142px }
  .chat-remonte { bottom: 142px !important }
}
@media (prefers-reduced-motion: reduce) {
  .barre-mobile { transition: none }
}


/* --- Photo inseree dans le corps d'article ---------------------------- */
.article-figure { margin: 38px auto; max-width: 740px }
.article-figure picture { display: block }
.article-figure img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md) }
.article-figure figcaption {
  margin-top: 10px; font-size: 12.5px; color: var(--ink-500); text-align: center }

/* ---------------------------------------------------------------
   Temoignage client en video (facade a chargement differe)
   ---------------------------------------------------------------
   Aucun contact avec YouTube tant que le visiteur n'a pas clique :
   ni iframe, ni script, ni vignette servie par ytimg. L'affiche est
   dessinee en CSS. Le lecteur n'est insere qu'au clic, et sur le
   domaine youtube-nocookie.com. C'est la seule facon d'integrer une
   video tierce sans deposer de cookie avant consentement, et cela
   evite au passage de charger ~1 Mo de lecteur a chaque visite.
--------------------------------------------------------------- */
.section-temoin { background: var(--navy-900); color: #fff; }
.temoin-grille { display: grid; grid-template-columns: 1.05fr .95fr; gap: 42px; align-items: center; }
.temoin-eyebrow { color: var(--bleu-sur-marine); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; margin-bottom: 16px; }
.temoin-cite { font-size: 27px; line-height: 1.35; font-weight: 600; color: #fff; margin: 0 0 20px; }
.temoin-cite span { color: var(--bleu-sur-marine); }
.temoin-qui { font-size: 15px; color: var(--on-navy-200); margin: 0 0 6px; }
.temoin-qui b { color: #fff; font-weight: 600; }
.temoin-contexte { font-size: 14px; line-height: 1.65; color: var(--on-navy-500); margin: 18px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); }
.temoin-source { font-size: 12.5px; color: var(--on-navy-600); margin-top: 10px; }
.temoin-source a { color: var(--bleu-sur-marine); }

.temoin-video { position: relative; }
.temoin-affiche { position: relative; width: 100%; border: 0; padding: 0; display: block; aspect-ratio: 16 / 9;
  border-radius: 14px; overflow: hidden; cursor: pointer; color: #fff; text-align: left;
  background: linear-gradient(148deg, #16294a 0%, #0b1a33 62%); box-shadow: 0 18px 44px rgba(0,0,0,.38); }
/* Affiche : photo d'une baie Wildix posee par Assutech, voilee de marine, et logo du client. */
.temoin-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .32; filter: saturate(.6); }
.temoin-affiche::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,26,51,.35), rgba(11,26,51,.92) 78%); }
.temoin-affiche > span { z-index: 1; }
.temoin-logo { position: absolute; left: 16px; top: 16px; z-index: 1; width: 56px; height: 56px; border-radius: 10px; background: #fff; padding: 4px; }
.temoin-affiche:hover, .temoin-affiche:focus-visible { box-shadow: 0 18px 44px rgba(0,0,0,.5); }
.temoin-affiche:focus-visible { outline: 3px solid var(--bleu-sur-marine); outline-offset: 3px; }
.temoin-affiche::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 25%, rgba(79,127,232,.24), transparent 58%); pointer-events: none; }
.temoin-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 74px; height: 74px; border-radius: 50%; background: var(--blue-500);
  display: flex; align-items: center; justify-content: center; transition: transform .18s ease, background .18s ease; }
.temoin-affiche:hover .temoin-play { transform: translate(-50%,-50%) scale(1.08); background: #2f62e6; }
.temoin-play svg { margin-left: 4px; }
.temoin-legende { position: absolute; left: 20px; right: 20px; bottom: 18px; font-size: 13.5px; color: #d5deee; }
.temoin-legende b { display: block; font-size: 15px; color: #fff; font-weight: 600; margin-bottom: 3px; }
.temoin-duree { position: absolute; right: 16px; top: 16px; font-size: 12px; font-weight: 600;
  background: rgba(11,26,51,.72); border: 1px solid rgba(255,255,255,.18); padding: 4px 9px; border-radius: 6px; }
.temoin-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 14px; display: block; }
.temoin-avis { font-size: 12px; color: var(--on-navy-600); margin-top: 10px; }

/* Rappel discret depuis une autre page */
.temoin-lien { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-radius: 12px;
  background: var(--navy-900); color: #fff; text-decoration: none; }
.temoin-lien:hover { background: #16294a; }
.temoin-lien svg { flex-shrink: 0; }
.temoin-lien b { display: block; font-size: 15.5px; font-weight: 600; }
.temoin-lien em { font-style: normal; font-size: 13.5px; color: #a9b8ce; }

@media (max-width: 900px) {
  .temoin-grille { grid-template-columns: 1fr; gap: 30px; }
  .temoin-cite { font-size: 22px; }
  .temoin-play { width: 60px; height: 60px; }
}

/* ---------------------------------------------------------------
   Page Fermeture du reseau cuivre
--------------------------------------------------------------- */
.cuivre-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.cuivre-etape { position: relative; background: var(--panel); border: 1px solid var(--ink-100);
  border-radius: 14px; padding: 30px 28px 26px; }
.cuivre-num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 9px; background: var(--blue-600); color: #fff; font-weight: 700; font-size: 16px; margin-bottom: 16px; }
.cuivre-etape h3 { font-size: 20px; margin: 0 0 6px; }
.cuivre-quand { font-size: 13px; font-weight: 600; color: var(--blue-600); margin: 0 0 14px; }
.cuivre-etape p { font-size: 15px; line-height: 1.65; color: var(--ink-700); margin: 0 0 12px; }
.cuivre-piege { border-left: 3px solid var(--gold-400); padding-left: 14px; font-size: 14px !important;
  color: var(--ink-500) !important; margin-bottom: 0 !important; }

.tab-cuivre { width: 100%; border-collapse: collapse; font-size: 15px; }
.tab-cuivre th, .tab-cuivre td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--ink-100); }
.tab-cuivre thead th { background: var(--navy-950); color: #fff; font-size: 13px; letter-spacing: .04em;
  text-transform: uppercase; font-weight: 600; border-bottom: 0; }
.tab-cuivre thead th:first-child { border-top-left-radius: 10px; }
.tab-cuivre thead th:last-child { border-top-right-radius: 10px; }
.tab-cuivre td.fait { color: var(--ink-500); }
.tab-cuivre tr.urgent { background: #fff6e6; }
.tab-cuivre tr.urgent td { font-weight: 500; }
.tab-note { font-size: 13px; line-height: 1.6; color: var(--ink-500); margin-top: 14px; }

.cuivre-recherche { margin-top: 34px; background: var(--navy-950); color: #fff; border-radius: 14px; padding: 30px 32px; }
.cuivre-recherche h3 { color: #fff; font-size: 20px; margin: 0 0 10px; }
.cuivre-recherche p { color: var(--on-navy-200); font-size: 15px; line-height: 1.65; margin: 0 0 14px; }
.cuivre-liens { display: flex; flex-wrap: wrap; gap: 12px 26px; }
.cuivre-liens a { color: var(--bleu-sur-marine); font-weight: 600; font-size: 15px; }
.cuivre-local { font-size: 14px !important; color: var(--on-navy-500) !important; border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 16px; margin: 18px 0 0 !important; }
.cuivre-local b { color: #fff; }

.cuivre-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cuivre-item { background: var(--panel); border: 1px solid var(--ink-100); border-left: 3px solid var(--blue-600);
  border-radius: 0 12px 12px 0; padding: 22px 24px; }
.cuivre-item h3 { font-size: 17px; margin: 0 0 8px; }
.cuivre-item p { font-size: 14.5px; line-height: 1.6; color: var(--ink-700); margin: 0; }

.etapes-cuivre { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.etape-c { position: relative; padding-top: 8px; }
.etape-c span { display: block; font-size: 13px; font-weight: 700; color: var(--blue-600); letter-spacing: .08em; margin-bottom: 10px; }
.etape-c h3 { font-size: 17px; margin: 0 0 8px; }
.etape-c p { font-size: 14.5px; line-height: 1.6; color: var(--ink-700); margin: 0; }

.cuivre-cta { margin-top: 40px; background: var(--panel); border: 1px solid var(--ink-100); border-radius: 14px;
  padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.cuivre-cta h3 { font-size: 21px; margin: 0 0 8px; }
.cuivre-cta p { font-size: 15px; color: var(--ink-700); margin: 0; max-width: 560px; }
.cuivre-cta-btn { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 980px) {
  .cuivre-grille { grid-template-columns: repeat(2, 1fr); }
  .etapes-cuivre { grid-template-columns: repeat(2, 1fr); gap: 26px; }
}
@media (max-width: 700px) {
  .cuivre-duo, .cuivre-grille, .etapes-cuivre { grid-template-columns: 1fr; }
  .cuivre-recherche { padding: 24px 20px; }
  .cuivre-cta { padding: 24px 20px; }
}


/* --- Disponibilite reelle dans la puce de preuve -------------------- */
/* Remplie par main.js depuis api/disponibilite.php. Reste masquee tant
   qu'aucun chiffre n'est revenu : pas de valeur par defaut a l'ecran. */
/* --- Boutons longs sur telephone ------------------------------------
   .btn porte white-space: nowrap, ce qui evite les boutons sur deux
   lignes en bureau. Sur un ecran de 375 px, un libelle comme
   « Voir un rapport de certification complet (PDF) » mesure 401 px :
   il elargissait toute la page. Releve du 25/09/2026 sur la page
   DSI/RSSI : scrollWidth 461 px pour un ecran de 375 -- la page
   defilait lateralement. Douze libelles de plus de 34 caracteres
   circulent sur le site, donc le probleme n'etait pas isole.
   Sur petit ecran, on laisse le libelle revenir a la ligne. */
@media (max-width: 560px) {
  .btn { white-space: normal; text-align: center; line-height: 1.35 }
}

.preuve-live { font-style: normal; font-weight: 700; color: var(--blue-600) }
.preuve-incident .pt-vif { color: #c0392b }
.preuve-incident .preuve-live { color: #97361f }

/* --- Petite liste numerotee dans une carte --------------------------- */
/* Trois gestes a enchainer : l'ordre compte, donc une <ol> numerotee
   plutot que des puces. Compteur dessine a la main : les chiffres
   natifs des navigateurs ne s'alignent pas sur la grille du texte. */
.pas-liste { counter-reset: pas; margin: 12px 0 0; padding: 0; list-style: none }
.pas-liste li {
  counter-increment: pas;
  position: relative;
  padding-left: 30px;
  margin-bottom: 8px;
  font-size: 14.5px; line-height: 1.55;
  color: var(--ink-700);
}
.pas-liste li:last-child { margin-bottom: 0 }
.pas-liste li::before {
  content: counter(pas);
  position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(29, 78, 216, .10);
  color: var(--blue-600);
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* --- Grilles de cartes : rangs incomplets ---------------------------
   .card-grid est fige a trois colonnes. Huit cartes laissent donc deux
   orphelines sur la derniere rangee, quatre cartes en laissent une,
   avec deux trous a cote. Constate sur la page DSI/RSSI (« Les briques
   que nous operons » et « Sobriete numerique »). Quatre colonnes
   tombent juste dans les deux cas : 8 = 2 rangees pleines, 4 = une. */
.card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
@media (max-width: 1100px) { .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 700px)  { .card-grid--4 { grid-template-columns: 1fr } }

/* --- Bloc « pas un paquet », sous les quatre familles ----------------
   « Un seul responsable » repond a la vraie douleur du marche : personne
   n'assume quand cinq prestataires se renvoient la balle. Mais la meme
   phrase peut se lire « vous serez captif ». On ne retire pas la promesse,
   on desamorce la peur juste a cote. Le texte sur la restitution vient mot
   pour mot de la FAQ : aucune promesse nouvelle n'est creee ici. */






/* --- Releve de certification, affiche en clair ---------------------- */
/* Le rapport Fluke restait derriere un bouton de telechargement de
   570 Ko. Montrer les vingt-quatre lignes, echecs compris, vaut mieux
   que les annoncer : c'est le geste le plus credible qu'un cableur
   puisse faire. Donnees extraites du PDF, pas ressaisies. */
.cert-releve { margin: 0 0 26px; }
.cert-releve figcaption {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  margin-bottom: 14px;
}
.cert-releve figcaption b { font-family: var(--font-head); font-size: 15px; color: var(--ink-900) }
.cert-releve figcaption span { font-size: 12.5px; color: var(--ink-500) }
.cert-releve .doc-table td:first-child { font-variant-numeric: tabular-nums; font-weight: 600 }
.cert-releve .doc-table td { font-variant-numeric: tabular-nums }
.cert-r {
  display: inline-block; min-width: 52px; text-align: center;
  padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
}
.cert-pass { background: #e4f2e6; color: var(--green-600) }
.cert-fail { background: #fbe6e6; color: #97361f }
.cert-echec td { background: rgba(151, 54, 31, .045) }
.cert-na { color: var(--ink-500); font-style: italic; border-bottom: 1px dotted var(--ink-500); cursor: help }
@media (max-width: 760px) {
  .table-scroll .doc-table { min-width: 520px }
}

.table-scroll { max-width: 100%; }
@media (max-width: 720px) {
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-scroll .tab-cuivre { min-width: 560px; }
}

/* ---------------------------------------------------------------
   Test NIS2
--------------------------------------------------------------- */
.nis-box { max-width: 780px; margin: 0 auto; background: var(--panel); border: 1px solid var(--ink-100);
  border-radius: 16px; padding: 34px 34px 26px; }
.nis-num { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue-600); margin: 0 0 10px; }
.nis-box h3 { font-size: 21px; line-height: 1.35; margin: 0 0 18px; }
.nis-aide { font-size: 14px; color: var(--ink-500); line-height: 1.6; margin: -10px 0 18px; }
.nis-choix { display: flex; flex-direction: column; gap: 10px; }
.nis-opt { text-align: left; font-family: inherit; font-size: 15px; line-height: 1.5; color: var(--ink-900);
  background: #fff; border: 1px solid var(--ink-100); border-radius: 10px; padding: 15px 18px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.nis-opt:hover { border-color: var(--blue-600); background: #f4f7fe; }
.nis-opt:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 2px; }
.nis-opt:active { transform: scale(.995); }

.nis-resultat { padding-top: 4px; }
.nis-resultat:focus { outline: none; }
.nis-verdict { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.nis-verdict h3 { margin: 0; font-size: 21px; }
.nis-badge { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 6px 12px; border-radius: 7px; white-space: nowrap; }
.nis-rouge  { background: #fbe6e6; color: #8f1f1f; }
.nis-orange { background: #fdf0dc; color: #7a4a06; }
.nis-vert   { background: #e4f2e6; color: #1f5b2c; }
.nis-explique { font-size: 15.5px; line-height: 1.7; color: var(--ink-700); margin: 0 0 22px; }
.nis-suite { display: flex; gap: 12px; flex-wrap: wrap; }
.nis-reserve { font-size: 13px; line-height: 1.65; color: var(--ink-500);
  border-top: 1px solid var(--ink-100); margin: 26px 0 0; padding-top: 18px; }
.nis-reserve b { color: var(--ink-700); }

@media (max-width: 640px) {
  .nis-box { padding: 26px 20px 22px; }
  .nis-box h3 { font-size: 19px; }
}

/* ---------------------------------------------------------------
   Calculateur du cout d'une interruption
--------------------------------------------------------------- */




.arret-valeur { min-width: 96px; text-align: right; font-size: 14.5px; font-weight: 600; color: var(--blue-600); }

.arret-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  font-size: 14.5px; color: var(--on-navy-200); padding: 9px 0; }
.arret-ligne b { color: #fff; font-size: 16px; font-weight: 600; white-space: nowrap; }
.arret-total { display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  border-top: 1px solid rgba(255,255,255,.16); margin-top: 8px; padding-top: 16px; font-size: 15px; color: #fff; }
.arret-total b { font-size: 27px; font-weight: 700; color: #fff; white-space: nowrap; }






/* ---------------------------------------------------------------
   Referentiels, version compacte (accueil)
   ---------------------------------------------------------------
   Le detail de chaque norme vit sur la page qui la porte : Fluke et
   ISO 11801 sur Cablage, NIS2 sur DSI & RSSI, RGPD sur Cybersecurite,
   DEEE sur A propos. Ici on ne garde que le rappel et la mention
   d'honnetete — dire qu'on applique ces textes n'est pas dire qu'on
   en detient la certification.
--------------------------------------------------------------- */








.ref-note { font-size: 12.5px; line-height: 1.65; color: var(--ink-500); margin: 16px 0 0; }



/* ---------------------------------------------------------------
   Photo de preuve en pleine largeur
   ---------------------------------------------------------------
   L'accueil comptait 62 pictogrammes dessines et une seule photo.
   Un dessin vectoriel se trouve sur n'importe quel site concurrent ;
   une baie reellement cablee par l'entreprise, non. Ces figures sont
   la pour rompre la suite de blocs de texte et donner une preuve
   visuelle a un lecteur qui parcourt la page sans la lire.
--------------------------------------------------------------- */
.photo-preuve { position: relative; margin: 0 0 34px; border-radius: 14px; overflow: hidden;
  box-shadow: 0 14px 34px rgba(11,26,51,.16); }
.photo-preuve img { display: block; width: 100%; height: 360px; object-fit: cover; object-position: center 42%; }
.photo-preuve figcaption { position: absolute; left: 0; right: 0; bottom: 0;
  padding: 46px 26px 18px; font-size: 14.5px; line-height: 1.55; color: #fff;
  background: linear-gradient(to top, rgba(8,18,36,.88) 0%, rgba(8,18,36,.62) 48%, rgba(8,18,36,0) 100%); }

@media (max-width: 760px) {
  .photo-preuve img { height: 230px; }
  .photo-preuve figcaption { padding: 34px 16px 14px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-preuve { box-shadow: 0 8px 20px rgba(11,26,51,.14); }
}

/* ---------------------------------------------------------------
   Heros sur telephone : l'action avant le discours
   ---------------------------------------------------------------
   Sur 375 px, l'ecran d'accueil etait entierement consomme par le titre
   et un paragraphe de neuf lignes : aucun bouton, aucun numero visible
   sans faire defiler. On remonte le prix et les deux boutons au-dessus
   du paragraphe. Seuls des <p> changent de place — aucun element
   focalisable n'est deplace, l'ordre de tabulation est preserve.
--------------------------------------------------------------- */
@media (max-width: 760px) {
  .hero-split > div:first-child { display: flex; flex-direction: column; }
  .hero-split > div:first-child > .eyebrow      { order: 1; }
  .hero-split > div:first-child > h1            { order: 2; }
  
  .hero-split > div:first-child > .hero-actions { order: 4; margin-top: 16px; }
  .hero-split > div:first-child > .lede         { order: 5; margin-top: 22px; }
  
  
}

/* --- Section « On ne repare pas plus vite. On repare avant. » ---------
   L'illustration a un fond blanc plein ; le corps du site a un degrade
   clair. Sans cadre, le SVG apparaitrait comme un rectangle blanc pose
   au hasard. On l'assume en panneau : bord, rayon, ombre courte.
   Le chiffre de 8 h est une ESTIMATION : sa methode est affichee juste
   a cote, dans le meme encart, et non en note de bas de page. Un chiffre
   dont on cache le calcul est un chiffre qu'on finira par devoir retirer. */

.ill-parc {
  margin: 30px 0 0;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(11, 26, 51, .05);
}
.ill-parc img { display: block; width: 100%; height: auto }
.gain {
  display: grid;
  grid-template-columns: 196px 1fr;
  gap: 28px;
  align-items: start;
  max-width: 940px;
  margin: 34px auto 0;
  padding: 24px 28px;
  background: var(--navy-950);
  border-radius: 14px;
}
.gain-num {
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, .14);
  padding-right: 24px;
}
.gain-num b {
  display: block;
  font-family: var(--font-head);
  font-size: 46px;
  line-height: 1;
  letter-spacing: -1.5px;
  color: var(--or-sur-marine);
}
.gain-num span {
  display: block;
  margin-top: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--on-navy-400);
}
.gain-clef { margin: 0; font-size: 16px; line-height: 1.5; font-weight: 600; color: #fff }
.gain-note { margin: 13px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--on-navy-400) }
.gain-note b { color: var(--on-navy-200) }
@media (max-width: 760px) {
  .gain { grid-template-columns: 1fr; gap: 18px; padding: 20px 22px }
  .gain-num {
    text-align: left;
    border-right: 0;
    padding-right: 0;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
  }
  .gain-num b { font-size: 40px }
}

/* --- Page « Reprise apres sinistre » ---------------------------------
   .pas-liste a ete dessinee pour une carte etroite (assistance
   technique, 14,5 px). Reutilisee ici au centre d'une page, elle est
   trop petite : on la decline plutot que de changer la regle partagee,
   qui casserait l'autre page.
   .trust-bloc porte l'aveu sur l'editeur americain. Il est volontairement
   dans le meme bloc que l'argument sur l'hebergement europeen, et non
   relegue plus bas : une reserve qu'on doit chercher n'en est pas une. */
.pas-liste--large li {
  font-size: 15.5px;
  line-height: 1.6;
  margin-bottom: 14px;
  padding-left: 34px;
}
.pas-liste--large li::before { width: 23px; height: 23px; font-size: 12.5px }
.trust-bloc {
  margin-top: 20px;
  padding: 15px 18px;
  border-left: 3px solid var(--gold-500);
  background: rgba(255, 255, 255, .62);
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-700);
}
.trust-bloc b { color: var(--ink-900) }

/* --- Zone d'intervention (page Infogerance) --------------------------
   Cinq departements, dont deux seulement ont une page locale. Les trois
   autres sont des tuiles muettes plutot que des liens vers des pages
   vides : mieux vaut trois tuiles honnetes que trois pages creuses. */










/* --- Simulateur de reprise d'activite --------------------------------
   Meme grammaire visuelle que le diagnostic IT et les estimateurs :
   une boite blanche, une barre de progression, des options cliquables.
   Le rouge sombre de .rep-alerte est celui des etats « a traiter » de
   l'illustration du parc (#B42318), pour que le site n'invente pas une
   nouvelle couleur d'alerte a chaque composant. */
.rep-box {
  max-width: 860px;
  margin: 34px auto 0;
  padding: 30px 34px 32px;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: 16px;
  box-shadow: 0 3px 16px rgba(11, 26, 51, .06);
}
.rep-progress { height: 4px; background: var(--ink-100); border-radius: 3px; overflow: hidden }
.rep-progress-bar {
  height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: left center;
  background: var(--blue-600);
  border-radius: 3px;
  transition: transform .35s ease;
}
.rep-etape { display: none; margin-top: 26px }
.rep-etape.active { display: block }
.rep-etape h3 { margin: 0 0 18px; font-size: 19px; line-height: 1.3 }
.rep-choix { display: grid; gap: 10px }
.rep-opt {
  display: block; width: 100%;
  padding: 15px 18px;
  text-align: left;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-left: 3px solid var(--ink-100);
  border-radius: 0 10px 10px 0;
  cursor: pointer;
  font: inherit;
  transition: background .15s, border-color .15s;
}
.rep-opt:hover { background: #e7edf8; border-left-color: var(--blue-600) }
.rep-opt.rep-actif { background: #e7edf8; border-left-color: var(--blue-600) }
.rep-opt b { display: block; font-size: 15px; color: var(--ink-900) }
.rep-opt em { display: block; margin-top: 3px; font-style: normal; font-size: 13px; color: var(--ink-500) }
.rep-champs { display: grid; gap: 20px }
.rep-champ label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; color: var(--ink-700) }
.rep-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px }

.rep-resume {
  padding: 14px 18px;
  background: var(--navy-950);
  border-radius: 10px;
  margin-bottom: 18px;
}
.rep-resume b { display: block; font-size: 15.5px; color: #fff }
.rep-resume span { display: block; margin-top: 3px; font-size: 13px; color: var(--on-navy-400) }

.rep-bandeau {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 24px;
  align-items: center;
  padding: 20px 22px;
  background: var(--surface-2);
  border-radius: 12px;
}
.rep-duree { text-align: center; border-right: 1px solid var(--ink-100); padding-right: 20px }
.rep-duree b {
  display: block;
  font-family: var(--font-head);
  font-size: 25px; line-height: 1.15;
  letter-spacing: -.8px;
  color: var(--gold-500);
}
.rep-duree span { display: block; margin-top: 5px; font-size: 12px; font-weight: 600; color: var(--ink-500) }

.rep-titre-etapes { margin: 28px 0 12px; font-size: 16px }
.rep-liste { counter-reset: rep; margin: 0; padding: 0; list-style: none }
.rep-liste li {
  counter-increment: rep;
  position: relative;
  padding: 11px 0 11px 34px;
  border-bottom: 1px solid var(--ink-100);
}
.rep-liste li:last-child { border-bottom: none }
.rep-liste li::before {
  content: counter(rep);
  position: absolute; left: 0; top: 12px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(29, 78, 216, .10);
  color: var(--blue-700);
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.rep-liste li.rep-long::before { background: rgba(180, 83, 9, .13); color: #8a4109 }
.rep-et-t {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: baseline; justify-content: space-between;
  font-size: 14.5px; font-weight: 600; color: var(--ink-900);
}
.rep-et-d { font-size: 12.5px; font-weight: 700; color: var(--ink-500); white-space: nowrap }
.rep-liste li.rep-long .rep-et-d { color: #8a4109 }
.rep-liste em { display: block; margin-top: 3px; font-style: normal; font-size: 13px; color: var(--ink-500) }

.rep-alerte, .rep-gain { margin-top: 20px; padding: 16px 18px; border-radius: 0 10px 10px 0; font-size: 14px; line-height: 1.6 }
.rep-alerte { border-left: 3px solid #B42318; background: rgba(180, 35, 24, .05); color: var(--ink-700) }
.rep-gain { border-left: 3px solid var(--gold-500); background: rgba(201, 162, 39, .07); color: var(--ink-700) }
.rep-alerte b, .rep-gain b { display: block; margin-bottom: 5px; color: var(--ink-900) }
.rep-gain ul { margin: 9px 0 0; padding-left: 19px }
.rep-gain li { margin-bottom: 3px }
.rep-note { margin-top: 18px; font-size: 12.5px; line-height: 1.6; color: var(--ink-500) }

@media (max-width: 680px) {
  .rep-box { padding: 22px 20px 24px }
  .rep-bandeau { grid-template-columns: 1fr; gap: 16px }
  .rep-duree {
    text-align: left; border-right: 0; padding-right: 0;
    padding-bottom: 14px; border-bottom: 1px solid var(--ink-100);
  }
}

/* --- Preuve chiffree en tete de section ------------------------------
   Reservee aux faits sourcables. Le chiffre est gros, la source est
   visible a cote : un chiffre sans source se retourne contre celui qui
   l'affiche des qu'un lecteur le cherche. */
.preuve-chiffre {
  margin: 16px 0 0;
  padding: 14px 18px;
  border-left: 3px solid var(--blue-600);
  background: rgba(29, 78, 216, .05);
  border-radius: 0 8px 8px 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-700);
}
.preuve-chiffre b {
  font-family: var(--font-head);
  font-size: 20px;
  color: var(--blue-700);
  letter-spacing: -.5px;
}
.preuve-chiffre em { font-style: normal; font-size: 12.5px; color: var(--ink-500) }

/* --- Mega-menu « Nos solutions » : deux colonnes ---------------------
   Onze domaines plus l'offre transverse en une seule colonne de 280 px,
   cela faisait un menu de plus de 800 px de haut : il sortait de l'ecran
   et la derniere entree etait coupee. Deux colonnes ramenent la hauteur
   a six lignes.

   La reprise apres sinistre occupe une bande pleine largeur en pied de
   panneau : elle se voit sans entrer dans le decompte des onze, et elle
   est enfin sous « Nos solutions » et non sous « Assistance ».

   Le panneau est BLANC (--panel). Les couleurs d'accent sont donc les
   variantes sombres (--gold-500, --blue-700), pas celles prevues pour
   fond marine. */
.mega-list {
  width: 580px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Remplissage par COLONNE : la colonne de gauche porte les six domaines
     les plus demandes, dans l'ordre. Un visiteur qui parcourt la premiere
     colonne de haut en bas lit le classement ; en remplissage par ligne,
     il lisait les rangs 1, 3, 5, 7, 9, 11. */
  grid-template-rows: repeat(6, auto);
  grid-auto-flow: column;
  gap: 1px 6px;
  padding: 10px;
}
nav.main-nav > ul > li:hover .mega-list,
nav.main-nav > ul > li.mega-open .mega-list { display: grid; }

.mega-sep {
  grid-row: 7;
  grid-column: 1 / -1;
  margin: 8px 4px 2px;
  padding-top: 10px;
  border-top: 1px solid var(--ink-100);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gold-500);
}
.mega-list a.mega-list-plus {
  grid-row: 8;
  grid-column: 1 / -1;
  display: block;
  padding: 11px 14px 12px;
  background: var(--surface-2);
  border-left: 3px solid var(--gold-500);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.mega-list a.mega-list-plus:hover { background: #e7edf8; border-left-color: var(--blue-600) }
/* Deux entrees « Aussi » (PRA et NIS2) : cote a cote, au lieu de se superposer sur la meme ligne. */
.mega-list a.mega-list-plus:has(+ a.mega-list-plus) { grid-column: 1; }
.mega-list a.mega-list-plus + a.mega-list-plus { grid-column: 2; }
@media (max-width: 1120px) { .mega-list a.mega-list-plus:has(+ a.mega-list-plus), .mega-list a.mega-list-plus + a.mega-list-plus { grid-column: 1 / -1; } }
/* --- Vignettes photo dans les sous-menus (masquees sur petit ecran) --- */
.mega-thumb { flex: none; width: 38px; height: 38px; border-radius: 9px; object-fit: cover; background: var(--surface-2); }
.mega-list a { gap: 12px; }
.mega-list a .mega-list-title { flex: 1; }
.mega-list a.mega-list-plus { display: flex; align-items: center; }
.mega-list-plus .mega-list-txt { display: block; flex: 1; }
.mega-list a .mega-list-txt { display: block; flex: 1; }
.mega-list a .mega-list-txt .mega-list-sous { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--ink-500); }
@media (max-width: 1120px) { .mega-thumb { display: none; } }
.mega-list-plus .mega-list-sous {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-500);
}

@media (max-width: 1120px) {
  .mega-list { width: 100%; grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row }
  .mega-sep, .mega-list a.mega-list-plus { grid-row: auto }
  nav.main-nav > ul > li:hover .mega-list { display: none }
  nav.main-nav > ul > li.open .mega-list { display: grid }
}
@media (max-width: 760px) {
  .mega-list { width: 100%; grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row }
  .mega-sep, .mega-list a.mega-list-plus { grid-row: auto }
  nav.main-nav > ul > li:hover .mega-list { display: none }
  nav.main-nav > ul > li.open .mega-list { display: grid }
}

/* --- Pile de securite, page Cybersecurite ----------------------------
   Cinq couches, chacune avec les editeurs que nous exploitons. Les
   logos sont ceux deja presents dans assets/partners : on ne cite pas
   un editeur dont on ne revendique pas le partenariat ailleurs.
   Le numero de couche est decoratif (aria-hidden n'est pas necessaire :
   c'est un <span> sans role, lu comme du texte, et l'ordre a du sens). */
.pile-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 32px;
}
.pile-carte {
  position: relative;
  padding: 24px 24px 22px;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: 14px;
}
.pile-carte:nth-child(4) { grid-column: 1 / 2 }
.pile-num {
  display: block;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--gold-500);
}
.pile-carte h3 { margin: 6px 0 14px; font-size: 17px; line-height: 1.25 }
.pile-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--ink-100);
}
.pile-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-width: 92px;
  padding: 6px 12px;
  border: 1px solid var(--ink-100);
  border-radius: 8px;
  background: #fff;
}
.pile-logo img { max-width: 76px; max-height: 26px; width: auto; height: auto; object-fit: contain }
.pile-carte p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-700) }
@media (max-width: 980px) {
  .pile-grille { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .pile-carte:nth-child(4) { grid-column: auto }
}
@media (max-width: 620px) {
  .pile-grille { grid-template-columns: 1fr }
  .pile-carte { padding: 20px }
}

/* --- Correctif : les lignes de cout du simulateur --------------------
   J'ai reutilise .arret-ligne / .arret-total de l'ancien calculateur
   sans regarder leur definition : elles etaient ecrites pour
   .arret-sortie, dont le fond est marine. Sur le fond clair du
   simulateur, le texte sortait en blanc sur gris — illisible.
   On ne touche pas aux classes partagees, on surcharge dans .rep-cout.
   Le total passe en rouge d'alerte (#B42318, celui deja utilise pour
   les etats « a traiter ») : c'est un cout, pas un resultat neutre. */
.rep-cout .arret-ligne { color: var(--ink-700) }
.rep-cout .arret-ligne b { color: var(--ink-900) }
.rep-cout .arret-total {
  border-top-color: var(--ink-100);
  color: var(--ink-700);
  font-weight: 600;
}
.rep-cout .arret-total b { color: #B42318 }

/* --- Legende des illustrations .ill-parc -----------------------------
   Elles utilisaient .pc-cap, qui est en position:absolute avec un
   degrade : cette classe est faite pour se poser SUR une photo, dans un
   conteneur positionne. Sur une figure non positionnee, la legende
   s'echappait et venait recouvrir l'illustration. Ici : dans le flux,
   sous l'image, discrete. */
.ill-parc figcaption {
  margin-top: 13px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-500);
  text-align: center;
}


/* =====================================================================
   AMÉLIORATIONS 2026-10
   Regles ajoutees apres l'audit de l'automne 2026 (visuel, accessibilite,
   UX, mobile). Les corrections de valeurs (tailles de texte, couleurs,
   minmax(), echappement \2013, selecteur .blog-card h2...) ont ete faites
   sur place, a cote des regles d'origine ; ce bloc ne contient que ce qui
   est nouveau. Il est volontairement place en dernier : a specificite
   egale, il l'emporte.
   Chaque groupe peut etre retire seul sans toucher aux autres.
   ===================================================================== */

/* --- 1. Anneau de focus visible sur les fonds sombres ------------------
   Le bleu (#2563eb) tombait a 1,3 a 2,5:1 sur la marine et sur le degrade
   vert. La variable --focus est lue par la regle globale a:focus-visible. */
.cta-band, .section-methode, .section-familles, .section-temoin, .temoin-lien, .cuivre-recherche, .gain, .dl-chiffres, .rep-resume, .barre-mobile, footer.site-footer, .topbar { --focus: #ffffff; }

/* --- 2. Mouvement reduit / JavaScript absent ---------------------------
   .reveal et les chiffres animes demarrent a opacite 0 et ne sont rendus
   visibles que par main.js : sans script (ou script bloque), la page de
   contact et les chiffres cles restaient invisibles. */
@media (scripting: none) {
  .reveal { opacity: 1; transform: none; transition: none; }
  
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .diag-step.active { animation: none; }
}

/* Bouton « pause » du bandeau defilant (cree par main.js) */




/* --- 3. Bandeau du haut et en-tete -------------------------------------
   a) Texte « horaires » : l'attribut style="opacity:.6" donnait 3,9:1.
   b) Le bandeau mesurait 847 px de large et la page defilait lateralement
      entre 761 et 846 px (iPad portrait, iPhone paysage). Il disparait
      avec le menu burger (<= 1120 px) : le numero revient alors dans
      l'en-tete, qui est collant, donc toujours visible.
   c) Entre 1121 et 1239 px la marque, huit entrees de menu et le bouton
      depassaient de 49 px ; on resserre le menu et on retire l'entree
      « Contact », doublon du bouton « Nous contacter » voisin (elle reste
      sous Assistance et dans le pied de page). */
@media (max-width: 1120px) {
  .topbar { display: none; }
}
@media (min-width: 761px) and (max-width: 1120px) {
  .header-phone { display: flex; }
}
@media (min-width: 1121px) {
  nav.main-nav > ul > li > a[href="contact.html"],
  nav.main-nav > ul > li > a[href="/contact.html"] { display: none; }
}
@media (min-width: 1121px) and (max-width: 1239px) {
  .topbar-inner, .header-inner { padding-left: 20px; padding-right: 20px; }
  .topbar-left { gap: 16px; }
  .topbar-right { gap: 12px; }
  nav.main-nav > ul > li > a { padding-left: 7px; padding-right: 7px; }
}
/* Numero en pastille ronde quand la place le permet (le texte reste lu par
   les lecteurs d'ecran : il n'est que reduit a 0 px). */
@media (min-width: 1240px) {
  .header-phone {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; gap: 0; font-size: 0;
    border: 1px solid var(--ink-100); border-radius: 50%; background: var(--surface);
  }
  .header-phone:hover { border-color: var(--blue-600); }
  .header-phone svg { width: 20px; height: 20px; }
}

/* Menu deroulant : ouvert aussi au clavier (Tab sur « Nos solutions »).
   La classe .mega-ferme est posee par main.js quand on presse Echap. */
@media (min-width: 1121px) {
  nav.main-nav > ul > li:focus-within .mega-list { display: grid; }
}
nav.main-nav > ul > li.mega-ferme .mega-list { display: none !important; }

/* Entree « toutes nos solutions » ajoutee par main.js dans le panneau mobile */
.mega-list a.mega-all { display: none; }
@media (max-width: 1120px) {
  .mega-list a.mega-all { display: flex; color: var(--blue-600); }
  /* Bascule FR/EN et acces rapides, ajoutes par main.js dans le menu burger */
  
  nav.main-nav > ul > li.nav-rapide {
    display: flex; flex-direction: column; gap: 10px;
    margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--ink-100);
  }
  nav.main-nav > ul > li.nav-rapide > a { justify-content: center; padding: 13px 18px; font-size: 15px; font-weight: 600; border-radius: 4px; }
  nav.main-nav > ul > li.nav-rapide > a.btn-primary { color: #fff; }
  nav.main-nav > ul > li.nav-rapide > a.btn-ghost { color: var(--ink-900); border: 1px solid var(--ink-300); }
  nav.main-nav > ul > li.nav-rapide > a.nav-client { color: var(--ink-500); font-size: 14px; }
  /* Menu ouvert : la page dessous ne defile plus */
  html.menu-ouvert, html.menu-ouvert body { overflow: hidden; }
  nav.main-nav { overscroll-behavior: contain; }
}
.nav-rapide { display: none; }

/* --- 4. Banniere d'accueil : l'action avant le discours ----------------
   Le bouton « Demander un audit gratuit » etait a 801 px, hors ecran sur
   un portable 1366x768. Meme principe que le bloc mobile plus haut : seuls
   des <p> et des <div> changent de place, l'ordre de tabulation est
   conserve. Le lien .hero-prix reste avant les boutons dans le HTML. */
@media (min-width: 761px) {
  .hero-split > div:first-child { display: flex; flex-direction: column; align-items: flex-start; }
  .hero-split > div:first-child > .eyebrow      { order: 1; }
  .hero-split > div:first-child > h1            { order: 2; }
  .hero-split > div:first-child > .lede         { order: 3; }
  .hero-split > div:first-child > .hero-actions { order: 4; margin-top: 28px; }
  
  
  
  .hero:not(.page-hero) { padding-top: 56px; padding-bottom: 64px; }
}
/* Pages locales (15 pages) : le cartouche « intervention sous 4 h » passe
   apres les boutons, qui reviennent dans le premier ecran du telephone. */
@media (max-width: 760px) {
  .page-hero .hero-inner:has(> .engagement-line) { display: flex; flex-direction: column; }
  .page-hero .hero-inner:has(> .engagement-line) > .hero-actions   { order: 1; }
  .page-hero .hero-inner:has(> .engagement-line) > .engagement-line { order: 2; }
}

/* Fil d'Ariane et boutons de la banniere sur nos-solutions / fin-du-cuivre :
   ces classes n'avaient aucune regle (texte noir de 16 px, boutons colles). */
.fil { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 20px; font-family: var(--font-body); font-size: 13px; color: var(--ink-500); }
.fil a { color: var(--ink-500); }
.fil a:hover { color: var(--blue-600); }
.fil span { color: var(--ink-900); font-weight: 600; }
.hero-txt { display: block; }
.hero-cta { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }

/* Page de contact sur tablette et telephone : le formulaire est la
   conversion la plus directe, il passe avant les coordonnees. */
@media (max-width: 980px) {
  .contact-grid > .form-box { order: -1; }
}

/* --- 5. Blocs et mises en page ------------------------------------------ */
/* Bandeau Green IT : le bloc de texte pousse le bouton sous lui ; on lui
   donne une base de 520 px pour que le bouton reste a droite. Reserve aux
   ecrans larges : en colonne (mobile), une base de 520 px serait une hauteur. */
@media (min-width: 761px) {
  .cta-band > div:first-child { flex: 1 1 520px; min-width: 0; }
}

/* Photo « technicien » (359 x 640 px) : elle etait agrandie a 530 x 945 px,
   floue, et laissait un grand vide a cote du texte. On la cadre en 4/5. */
.media-panel.photo-certif:has(img[src*="technicien-intervention"]) { width: 100%; max-width: 420px; margin-inline: auto; }
.media-panel.photo-certif:has(img[src*="technicien-intervention"]) img {
  height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%;
}

/* Schema de supervision (1200 px de large, textes de 10 a 13 px) : a 375 px
   il tombait a 3 px de corps et devenait illisible. Sur telephone, on garde
   une echelle lisible et le panneau se fait defiler lateralement. */
@media (max-width: 760px) {
  .ill-parc { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 10px; }
  .ill-parc img { width: 880px; max-width: none; }
}

/* Deux liens-bandeaux consecutifs (accueil) : chacun portait 84 px de marge
   haute et basse pour une seule ligne de texte. */
section:has(> .container > .temoin-lien:only-child) { padding: calc(var(--rythme) * .35) 0; }
section:has(> .container > .temoin-lien:only-child) + section:has(> .container > .temoin-lien:only-child) { padding-top: 0; }

/* Colonnes de grille : une cellule ne force plus la largeur de la page */
.two-col > *, .hero-split > *, .contact-grid > * { min-width: 0; }
.estimator-slider-row { flex-wrap: wrap; }
.estimator-slider { min-width: 140px; }
.blog-meta-row { flex-wrap: wrap; gap: 4px 14px; }

/* --- 6. Liens, formulaires, pied de page -------------------------------- */
/* Un lien au milieu d'une phrase, de la meme couleur et sans soulignement,
   ne se distinguait que par le survol (WCAG 1.4.1). */
section p a:not([class]), section li a:not([class]), section dd a:not([class]), section figcaption a:not([class]) {
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
/* Rubrique « Green IT » : le vert d'accent (3,9:1) passe au vert fonce (5,5:1) */
.eyebrow[style*="--green-500"] { color: var(--green-600) !important; }
/* Champs obligatoires : asterisque rouge ; legende dans .form-legende */
.form-row:has(> :required) > label:not(.form-consent)::after { content: " *"; color: #b91c1c; font-weight: 700; }
.form-legende { margin: 0 0 16px; font-size: 13px; color: var(--ink-500); }
/* L'adresse du pied de page etait en 16 px, les liens voisins en 14 px */
.footer-col li:not(:has(a)) { font-size: 14px; color: var(--on-navy-400); }

/* Contour des commandes dont la bordure est le seul repere visuel : le gris
   --ink-100 ne faisait que 1,3:1 sur fond blanc (WCAG 1.4.11 demande 3:1).
   Les etats survol, actif et focus gardent leur propre couleur. */
.estimator-pill, .diag-option { border-color: var(--ink-300); }

/* Bandeau cookies : fixe en bas de page ; il ne bloque rien tant qu'il est
   masque. Un peu plus bas qu'avant (86 -> 76 px) : il recouvre le bas du
   premier ecran tant qu'on n'a pas clique. Sur telephone, texte et bouton
   passent sur une ligne (190 -> 125 px de haut). */
.cookie-banner:not(.visible) { pointer-events: none; }

@media (max-width: 760px) {
  
  .cookie-banner p { font-size: 12.5px; line-height: 1.4; }
  
}

/* --- 7. Telephones et petits ecrans ------------------------------------- */
@media (max-width: 760px) {
  /* Champs a 16 px : en dessous, iOS zoome la page a la prise de focus.
     Selecteur assez specifique pour ne pas avoir besoin de !important. */
  :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]) { font-size: 16px; }

  /* Textes d'appoint releves : 12,5 px en gris clair etait trop petit */
  .pillar-card .pillar-link { font-size: 13.5px; }
  .gain-note, .temoin-avis, .doc-note { font-size: 13px; }

  /* La barre d'appel fixe (70 px) ne doit pas cacher le bas du pied de page */
  footer.site-footer { padding-bottom: calc(30px + 76px + env(safe-area-inset-bottom, 0px)); }

  /* Le bouton de discussion ne mene qu'a la page de contact et recouvrait le
     texte ; la barre d'appel (Appeler / Devis) joue deja ce role. */
  .chat-lanceur { display: none; }

  /* Pied de page : deux colonnes (la grille a 1fr forcait 335 px a 320 px) */
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 20px; }
  .footer-col a { overflow-wrap: anywhere; }
}
@media (max-width: 560px) {
  .container { padding-left: 20px; padding-right: 20px; }
  

  .footer-grid { gap: 26px 20px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand p { max-width: none; }
  .footer-grid > .footer-col:nth-child(2) { grid-column: 1 / -1; }
  .footer-grid > .footer-col:nth-child(2) ul { columns: 2; column-gap: 20px; }
  .footer-grid > .footer-col:nth-child(2) li { break-inside: avoid; }
  .footer-bottom a { display: inline-block; padding: 8px 4px; }

  /* Estimateur : la case, le libelle et le prix ne tiennent pas sur une ligne */
  .estimator-check { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: start; }
  .estimator-check input { margin-top: 3px; }
  .estimator-check-price { grid-column: 2; margin-left: 0; }
}

/* Telephone en paysage : l'en-tete collant et la barre d'appel mangeaient
   40 % de la hauteur. L'en-tete defile avec la page, la barre s'amincit. */
@media (max-height: 500px) and (orientation: landscape) {
  .site-header { position: relative; }
  .barre-mobile { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  .barre-mobile a { padding: 8px 10px; }
}

/* Bandeau cookies sur ordinateur : une petite carte en bas a GAUCHE. La barre
   pleine largeur masquait le bouton « Demander un audit gratuit » sur un ecran
   de portable tant qu'on n'avait pas clique. A droite, la carte etait recouverte
   par la pastille de chat (bas 86 px, au-dessus de la carte) : « J'ai compris »
   etait coupe. A gauche, plus aucun chevauchement. Sur telephone, la barre
   basse (une ligne) reste la meilleure option. */
@media (min-width: 761px) {
  .cookie-banner {
    left: 20px; right: auto; bottom: 20px;
    width: min(380px, calc(100vw - 40px));
    border: 1px solid var(--ink-100); border-radius: 14px; overflow: hidden;
  }
  
  
}

/* Bande « Partenaires technologiques » de l'accueil : reprend la grille de
   a-propos.html en version compacte (10 logos), sous le bandeau de chiffres. */








/* --- Fond Higgsfield (06/10/2026) ---------------------------------
   Rubans lumineux bleus tres pales sur fond blanc, images generees avec
   Higgsfield. Calque fixe sous le motif SVG existant : il ne change ni
   le contraste ni la mise en page. L'accueil ajoute une boucle video
   derriere le hero (lecture geree par main.js : data-lecture-auto, pause
   hors champ, rien ne demarre avec « moins d'animations »). Sur mobile la
   video est masquee : l'image fixe suffit. */
.page-bg::before {
  content: "";
  position: absolute; inset: 0;
  background-color: #f4f7fc;
  background-image: url(../assets/fond/fond-site.jpg);
  background-image: image-set(url(../assets/fond/fond-site.webp) type("image/webp"), url(../assets/fond/fond-site.jpg) type("image/jpeg"));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: .75;
}



/* --- Mascotte : tete de la page Assistance technique ------------------
   Texte a gauche, husky qui salue a droite. Sur telephone la mascotte passe
   apres les boutons et le cartouche « 4 h » (comme sur les pages locales),
   en plus petit, pour que le numero reste dans le premier ecran. Rien ne
   demarre avec « moins d'animations » (gere par main.js). */
.hero-urgence { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.hero-urgence > * { min-width: 0; }
.urgence-accroche { margin: 14px 0 0; font-family: var(--font-display, inherit); font-size: 1.35rem; font-weight: 700; color: var(--blue-600); line-height: 1.3; }
.hero-urgence .hero-actions .btn { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.25; }
.hero-urgence .hero-actions .btn-ghost { flex-direction: row; align-items: center; gap: 8px; }
.btn-zone { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .85; }
.hero-urgence-mascotte { margin: 0; display: flex; justify-content: center; }
.hero-urgence-mascotte video { display: block; width: 100%; max-width: 380px; height: auto; border-radius: 22px; background: #eef2f8; box-shadow: 0 18px 40px rgba(11, 26, 51, .18); }
@media (max-width: 900px) {
  .hero-urgence { grid-template-columns: 1fr; gap: 28px; }
  .hero-urgence-mascotte video { max-width: 260px; }
}
@media (max-width: 760px) {
  .hero-urgence-txt { display: flex; flex-direction: column; }
  .hero-urgence-txt > .hero-actions   { order: 1; }
  .hero-urgence-txt > .engagement-line { order: 2; }
}

/* --- Mascotte flottante (husky), en bas a droite ----------------------
   Remplace la pastille bleue « Contacter un technicien » (qui ne menait
   qu'a la page Contact). La bulle de message depend de la page (voir
   main.js) ; elle s'ouvre seule une fois par session et par type de page,
   puis au survol ou au clavier. Le voyant vert = joignable (lundi-vendredi,
   9h-18h). Avec « moins d'animations » : image fixe, aucune flottaison. */










@keyframes mascotteFlotte { 0%, 100% { translate: 0 0 } 50% { translate: 0 -5px } }





/* ===== Fenetre cookies (17/10/2026) ======================================
   Modale a l'arrivee, choix obligatoire (« Je choisis » / « OK pour moi »).
   Carte blanche facon « Bonjour, c'est nous... les cookies ! », marque
   Assutech en haut a droite. Sur telephone : feuille ancree en bas. */
.cookie-modal {
  width: min(520px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: #1c2537;
  box-shadow: 0 30px 80px rgba(5, 12, 28, .45);
  overflow: hidden;
}
.cookie-modal::backdrop { background: rgba(5, 12, 28, .55); backdrop-filter: blur(2px); }
.cookie-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 24px 26px 0; }
.cookie-tete h2 { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 800; color: #0b1a33; letter-spacing: -.01em; }
.cookie-tete h2 span { display: block; font-size: 19px; font-weight: 400; color: #33405a; margin-bottom: 4px; letter-spacing: 0; }
.cookie-marque { display: inline-flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 800; color: #0b1a33; white-space: nowrap; }
.cookie-marque img { display: block; width: 40px; height: 40px; }
.cookie-vue { padding: 14px 26px 0; }
.cookie-vue p { margin: 0; font-size: 15px; line-height: 1.6; color: #5b6478; }
.cookie-encart { margin-top: 16px; padding: 14px 16px; border: 1px solid #e3e8f0; border-radius: 12px; box-shadow: 0 2px 10px rgba(11, 26, 51, .05); font-size: 14px; color: #33405a; }
.cookie-encart b { display: block; font-size: 16px; font-weight: 600; color: #0b1a33; margin-bottom: 4px; }
.cookie-encart ul { margin: 0; padding-left: 20px; list-style: disc; }
.cookie-encart li { display: list-item; }
.cookie-modal:focus { outline: none; }
.cookie-cats { list-style: none; margin: 0; padding: 0; border: 1px solid #e3e8f0; border-radius: 12px; }
.cookie-cats li { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 11px 14px; font-size: 14px; }
.cookie-cats li + li { border-top: 1px solid #edf0f5; }
.cookie-cats b { display: block; color: #0b1a33; font-weight: 600; }
.cookie-cats em { display: block; font-style: normal; font-size: 13px; color: #5b6478; }
.cookie-etat { flex: none; font-size: 12px; font-weight: 600; color: #1d4ed8; background: #eef3ff; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.cookie-lien { margin: 14px 0 0; padding: 0 26px 14px; font-size: 13px; text-align: center; }
.cookie-lien a { color: #5b6478; text-decoration: underline; text-underline-offset: 3px; }
.cookie-actions { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #e3e8f0; }
.cookie-btn { padding: 17px 12px; border: 0; background: #fff; color: #1c2537; font: 500 17px/1.2 inherit; font-family: inherit; cursor: pointer; }
.cookie-btn + .cookie-btn { border-left: 1px solid #e3e8f0; }
.cookie-btn:hover { background: #f4f6fa; }
.cookie-btn-ok { color: #1d4ed8; font-weight: 700; }
.cookie-btn:focus-visible { outline: 3px solid #1d4ed8; outline-offset: -3px; }
html.cookie-ouvert .barre-mobile, html.cookie-ouvert .chat-lanceur { visibility: hidden; }
@media (max-width: 560px) {
  .cookie-modal { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: 16px 16px 0 0; }
  .cookie-tete { padding: 20px 18px 0; }
  .cookie-tete h2 { font-size: 24px; }
  .cookie-tete h2 span { font-size: 16px; }
  .cookie-marque { font-size: 18px; }
  .cookie-marque img { width: 32px; height: 32px; }
  .cookie-vue { padding: 12px 18px 0; }
  .cookie-lien { padding: 0 18px 12px; }
}

/* Bandeaux du haut de page en mode nuit (17/10/2026), comme l'accueil :
   fond marine, reseau anime discret (js/fond-reseau.js), motif propre a
   chaque page conserve et passe en bleu clair. */
.page-hero { --focus: #fff; position: relative; isolation: isolate; background: radial-gradient(800px 420px at 85% 30%, rgba(29,78,216,.26), transparent 62%), linear-gradient(180deg, #071226, #0b1a33); }
.page-hero > .hero-reseau { position: absolute; inset: 0; z-index: 0; opacity: .65; pointer-events: none; }
.page-hero > .container { position: relative; z-index: 1; }
.page-hero .hero-bg { color: var(--bleu-sur-marine); opacity: .8; }
.page-hero .hero-bg--supervision { color: #3ddc97; }
.page-hero .hero-bg::after { background: linear-gradient(100deg, rgba(7,18,38,.92) 0%, rgba(7,18,38,.7) 40%, rgba(7,18,38,.12) 100%); }
.page-hero .hero-bg--reperes .repere path { stroke: currentColor; }
.page-hero .hero-bg--tags g.tag rect { fill: rgba(255,255,255,.05); stroke: currentColor; }
.page-hero .hero-bg--tags .tag-prix { fill: currentColor; }
.page-hero .hero-bg--tags svg { -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 38%, #000 68%); mask-image: linear-gradient(90deg, transparent 0, transparent 38%, #000 68%); }
@media (max-width: 760px) { .page-hero .hero-bg--tags svg { -webkit-mask-image: none; mask-image: none; opacity: .3; } }
.page-hero h1, .page-hero h2, .page-hero .breadcrumb .crumb-current, .page-hero .engagement-line b { color: #fff; }
.page-hero p, .page-hero .lede { color: var(--on-navy-200); }
.page-hero p a:not(.btn) { color: #fff; }
.page-hero .eyebrow, .page-hero .engagement-ic, .page-hero .urgence-accroche { color: var(--bleu-sur-marine); }
.page-hero .eyebrow::before { background: var(--bleu-sur-marine); }
.page-hero .breadcrumb, .page-hero .breadcrumb a, .page-hero .article-meta, .page-hero .article-meta-bar, .page-hero .article-meta time, .page-hero .article-meta-sep { color: var(--on-navy-400); }
.page-hero .breadcrumb a:hover { color: #fff; }
.page-hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,.32); }
.page-hero .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.page-hero .engagement-line { background: rgba(255,255,255,.05); border-color: rgba(127,163,238,.25); }
@media (max-width: 760px) { .page-hero > .hero-reseau { opacity: .4; } }

/* --- Accueil : bande « test d'éligibilité fibre », accrochée sous le bandeau du haut ------------
   Panneau sombre de la même famille que le bandeau (salle de supervision) : une fibre lumineuse le
   traverse (SVG + animation du tracé, coupée si l'utilisateur limite les animations). */
.bande-elig { position: relative; z-index: 2; padding: 6px 0 26px; background: var(--navy-950); }
.bande-elig-carte { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 34px; align-items: center;
  padding: 30px 34px; border-radius: 18px; color: #c3cddd;
  background: radial-gradient(120% 140% at 100% 0%, rgba(37, 99, 235, .32) 0%, rgba(37, 99, 235, 0) 55%), linear-gradient(135deg, #10233f 0%, #0b1a33 60%, #0a1830 100%);
  border: 1px solid rgba(127, 163, 238, .28); box-shadow: 0 26px 60px rgba(5, 14, 30, .45), inset 0 1px 0 rgba(255, 255, 255, .06); }
.bande-elig-fibre { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bande-elig-fibre path { fill: none; stroke: rgba(127, 163, 238, .16); stroke-width: 2; }
.bande-elig-fibre .bande-elig-flux { stroke: #7fa3ee; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 90 1400; filter: drop-shadow(0 0 6px rgba(127, 163, 238, .9)); animation: bande-elig-flux 5.5s linear infinite; }
@keyframes bande-elig-flux { from { stroke-dashoffset: 1490; } to { stroke-dashoffset: 0; } }
.bande-elig-txt, .bande-elig-droite { position: relative; }
.bande-elig-tag { display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--or-sur-marine); margin-bottom: 10px; }
.bande-elig-vif { width: 8px; height: 8px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 0 0 rgba(61, 220, 151, .6); animation: bande-elig-vif 2.2s ease-out infinite; }
@keyframes bande-elig-vif { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 151, .55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(61, 220, 151, 0); } }
.bande-elig h2 { color: #fff; font-size: 1.6rem; line-height: 1.22; margin: 0 0 14px; text-wrap: balance; }
.bande-elig h2 em { font-style: normal; color: var(--bleu-sur-marine); }
.bande-elig-puces { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.bande-elig-puces li { font-size: .82rem; font-weight: 600; color: #dbe3f1; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(127, 163, 238, .3); background: rgba(127, 163, 238, .08); }
.bande-elig-form { display: flex; gap: 8px; padding: 7px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.bande-elig-champ { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 10px; background: #fff; color: var(--blue-600); }
.bande-elig-champ input { flex: 1; min-width: 0; padding: 15px 0; border: 0; outline: 0; background: transparent; font-size: 1.02rem; font-family: inherit; color: var(--ink-900); }
.bande-elig-champ:focus-within { box-shadow: 0 0 0 3px rgba(127, 163, 238, .55); }
.bande-elig-form .btn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding-left: 22px; padding-right: 22px; }
.bande-elig-source { margin: 12px 4px 0; font-size: .8rem; color: var(--on-navy-500); }
@media (prefers-reduced-motion: reduce) { .bande-elig-fibre .bande-elig-flux, .bande-elig-vif { animation: none; } }
@media (max-width: 900px) { .bande-elig { padding: 0 0 18px; } .bande-elig-carte { grid-template-columns: 1fr; gap: 20px; padding: 24px 22px; } .bande-elig h2 { font-size: 1.4rem; } }
@media (max-width: 560px) { .bande-elig-form { flex-direction: column; } .bande-elig-form .btn { justify-content: center; } }

/* Partenaire sans logo fourni (Nucleon Security, 30/10/2026) : nom compos&eacute; en texte, en attendant le logo officiel. */
.pile-logo-texte, .partner-logo-texte { font-family: var(--font-head); font-weight: 800; font-size: 13px; line-height: 1.05; letter-spacing: -.01em; color: var(--ink-900); text-align: center; }