/* ==========================================================================
   SecuriKeys IT — Site vitrine
   Design tokens: navy #202631 / jaune #edff1c (CMJN 7/0/89/0)
   ========================================================================== */

:root {
  /* Brand */
  --navy-900: #12161d;
  --navy-800: #1a2029;
  --navy-700: #202631; /* brand primary */
  --navy-600: #2b3341;
  --navy-500: #3c465a;
  --navy-400: #5a6579;
  --navy-300: #3d5a99; /* brighter, visibly-blue accent for ambient hero motion */

  /* Bleu d'appel : le second bouton du bandeau doit se distinguer du citron
     sans lui disputer la vedette. Choisi pour tenir 4,8:1 avec du texte blanc
     tout en gardant 3,1:1 sur le fond navy — un bleu plus clair aurait mieux
     brillé mais rendu son propre libellé illisible. */
  /* Bleu adouci de la même façon : moins électrique sur fond blanc. */
  --blue-500: #2f74c9;
  --blue-600: #2865b0;

  /* Jaune de la marque, defini en quadrichromie : C7 / M0 / J89 / N0,
     converti tel quel en sRVB : #edff1c. Les tons 600 et 700 en derivent
     a teinte constante (64,8 deg). */
  --lime-500: #edff1c; /* jaune de marque, CMJN 7/0/89/0 */
  --lime-600: #d1e019;
  --lime-700: #97a400;
  --lime-100: #f8fbd6;
  --lime-050: #fcfdec;

  --white: #ffffff;
  --ink: #1a2029;
  --ink-soft: #545e6e;
  --ink-faint: #7c8698;

  --paper: #ffffff;
  --paper-soft: #f5f6f2;
  --paper-alt: #eef0ea;
  --line: #e2e4dc;
  --line-strong: #cdd0c6;

  --danger: #c0392b;
  --success: #1c7a4a;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(18, 22, 29, 0.06), 0 1px 1px rgba(18, 22, 29, 0.04);
  --shadow-md: 0 8px 24px rgba(18, 22, 29, 0.10);
  --shadow-lg: 0 20px 48px rgba(18, 22, 29, 0.16);
  /* Ombre neutre et non citronnée : un halo de la couleur du bouton lui
     donne un air d'enseigne lumineuse. Le gris pose l'élément sans le
     faire briller. */
  --shadow-lime: 0 6px 16px rgba(32, 38, 49, 0.16);

  /* Motion */
  --ease-out: cubic-bezier(.16,.84,.44,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;

  /* Radius */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Layout */
  --wrap: 1180px;
  --header-h: 76px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/* L'attribut hidden ne vaut display:none que par la feuille du navigateur :
   la moindre règle de classe qui fixe un display l'emporte sur elle, et
   l'élément « masqué » reste à l'écran. Ce !important remet l'attribut au
   niveau où on l'attend. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: "Poppins", sans-serif;
  color: var(--navy-700);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }

p { color: var(--ink-soft); }

img, svg { display: block; max-width: 100%; }

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

button { font-family: inherit; }

ul { list-style: none; padding: 0; }

input, textarea, select, button { font-family: inherit; font-size: 1rem; color: inherit; }

/* Consistent, visible focus ring everywhere (keyboard nav).
   Navy on light backgrounds (15:1); lime only on dark brand surfaces (11:1) —
   --lime-600 alone is under 3:1 on white and isn't safe as a default ring color. */
:focus-visible {
  outline: 2.5px solid var(--navy-700);
  outline-offset: 2px;
  border-radius: 4px;
}
.navy-surface :focus-visible,
.hero :focus-visible,
.packs :focus-visible,
.site-footer :focus-visible,
.site-header :focus-visible {
  outline-color: var(--lime-500);
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}

/* Visible uniquement pour les lecteurs d'écran. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--lime-500);
  color: var(--navy-700);
  font-weight: 700;
  padding: 12px 20px;
  z-index: 1000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

section { scroll-margin-top: calc(var(--header-h) + 12px); }

/* ==========================================================================
   Reveal-on-scroll (respects reduced motion via media query above)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Buttons — default / hover / active / focus / disabled / loading
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.98rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  user-select: none;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn svg { flex-shrink: 0; transition: transform var(--dur-base) var(--ease-out); }

.btn-primary {
  background: var(--lime-500);
  color: var(--navy-700);
  box-shadow: var(--shadow-lime);
}
.btn-primary:hover { background: var(--lime-600); box-shadow: 0 8px 20px rgba(32, 38, 49, 0.22); }
.btn-primary:hover svg { transform: translateX(3px); }
.btn-primary:disabled {
  background: var(--line-strong);
  color: var(--ink-faint);
  box-shadow: none;
  cursor: not-allowed;
}

.btn-blue {
  background: var(--blue-500);
  color: var(--white);
  box-shadow: 0 6px 16px rgba(32, 38, 49, 0.18);
}
.btn-blue:hover { background: var(--blue-600); box-shadow: 0 8px 20px rgba(32, 38, 49, 0.24); }
.btn-blue:hover svg { transform: translateX(3px); }

/* Les boutons ne coupent jamais leur libellé (white-space: nowrap plus haut).
   Pour un appel long, cette exception l'autorise sur deux lignes : c'est ce
   qui lui permet de rester à côté de son voisin au lieu de passer dessous. */
.btn-wrap { white-space: normal; text-align: center; line-height: 1.25; }

.btn-ghost-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,.4);
}
.btn-ghost-light:hover { border-color: var(--white); background: rgba(255,255,255,.08); }

.btn-outline {
  background: transparent;
  color: var(--navy-700);
  border-color: var(--line-strong);
}
.btn-outline:hover { border-color: var(--navy-700); background: var(--paper-soft); }

.btn-sm { min-height: 40px; padding: 8px 18px; font-size: 0.9rem; }
.btn-lg { min-height: 52px; padding: 14px 28px; font-size: 1.02rem; }

.btn-submit { position: relative; width: 100%; }
.btn-submit .btn-spinner {
  display: none;
  width: 18px; height: 18px;
  border: 2.5px solid rgba(32,38,49,.3);
  border-top-color: var(--navy-700);
  border-radius: 50%;
}
.btn-submit.is-loading { pointer-events: none; opacity: 0.85; }
.btn-submit.is-loading .btn-label { opacity: 0.6; }
.btn-submit.is-loading .btn-spinner { display: inline-block; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn-submit.is-loading .btn-spinner { animation-duration: 1.4s; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  height: var(--header-h);
  /* Blur lives on ::before (not the header itself) so the header never becomes
     a containing block for its position:fixed mobile-nav descendant. */
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Fond de la barre d'onglets, defini en quadrichromie :
     C85 / M73 / J53 / N65, converti tel quel en sRVB.
     Couleur pleine : a 94 % d'opacite la barre se teintait de ce qui
     defilait dessous et n'affichait jamais la valeur exacte. Le
     backdrop-filter qui l'accompagnait devient sans effet sous un fond
     opaque : retire, il coutait une couche de composition pour rien. */
  background: #0d182a;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  /* Plus large que la grille du site (1180px) : le contenu de la barre en
     réclame environ 1250. Le bloc reste centré, donc les marges gauche et
     droite sont égales quelle que soit la largeur d'écran. */
  max-width: 1400px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  flex-shrink: 0;
}
/* Desktop: centre the mark in the band between the screen edge and the first
   nav item, rather than sitting on the wrap's left padding.
     - flex:1 makes the link span that whole band, justify-content centres
       the image inside it (so it adapts to any nav width automatically);
     - the negative margin cancels the wrap's left offset — min() because
       that offset is 50vw-566px on wide screens but bottoms out at the
       24px padding once the wrap stops growing;
     - pointer-events keeps the clickable area on the image only, so the
       empty band doesn't become a giant invisible link. */
/* Only from 1180px up: below that the nav eats the band and the mark would
   end up jammed against the screen edge, so it stays left-aligned instead. */
.logo-word {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
  color: #ffffff;
  white-space: nowrap;
}
.logo-word strong { font-weight: 800; }
.logo-img {
  display: block;
  height: 52px;
  width: 52px;
  border-radius: 12px;
  object-fit: cover;
}
/* Transparent icon-only mark (no navy tile) — contain, no rounding needed. */
.logo-img--icon {
  border-radius: 0;
  object-fit: contain;
}
/* Lockup du PDF de marque, rogné sous le wordmark : icône « it » + SecuriKeys,
   sans la baseline « votre sérénité informatique » (illisible à cette taille).
   Plaque navy détourée, largeur auto pour conserver le ratio ~1.19:1. */
.logo-img--full {
  height: 56px;
  width: auto;
  border-radius: 0;
  object-fit: contain;
}

.main-nav ul { display: flex; gap: 30px; }
.main-nav a {
  font-weight: 500;
  color: rgba(255,255,255,.78);
  padding: 6px 2px;
  position: relative;
  transition: color var(--dur-fast);
}
.main-nav a::after {
  content: "";
  position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 2px; background: var(--lime-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.main-nav a:hover { color: var(--lime-500); }
.main-nav a:hover::after { transform: scaleX(1); }

/* "Nos packs" dropdown — hover/focus on desktop, always-expanded inline
   sublist on mobile (see the ≤768px override below). */
.nav-item-dropdown { position: relative; }
/* Stays display:inline (not inline-flex) so its box height matches the
   plain-text sibling links exactly — inline-flex computes height including
   full padding, unlike inline, and that made this one link visibly taller. */
.nav-item-dropdown > a { white-space: nowrap; }
.nav-dropdown-caret {
  display: inline; /* global `svg { display: block }` reset would otherwise force this onto its own line inside the inline trigger link */
  margin-left: 4px;
  vertical-align: middle;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav-item-dropdown:hover .nav-dropdown-caret,
.nav-item-dropdown:focus-within .nav-dropdown-caret { transform: rotate(180deg); }
.main-nav .nav-dropdown {
  display: block; /* .main-nav ul (class+type, more specific than .nav-dropdown alone) sets display:flex — override for this nested list */
  position: absolute;
  top: 100%; left: 50%;
  transform: translate(-50%, 6px);
  min-width: 210px;
  background: var(--navy-900);
  border: 1px solid var(--navy-500);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
  z-index: 50;
}
.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.nav-dropdown li + li { margin-top: 2px; }
.nav-dropdown a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  color: rgba(255,255,255,.82);
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}
.nav-dropdown a:hover, .nav-dropdown a:focus-visible { background: var(--navy-700); color: var(--lime-500); }
.nav-dropdown a::after { content: none; }

.header-actions { display: flex; align-items: center; gap: 18px; }
.header-phone {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: 0.92rem; color: #ffffff;
  white-space: nowrap;
}
.header-phone svg { color: var(--lime-500); }

.nav-mobile-extra { display: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.nav-toggle span {
  display: block; height: 2px; width: 22px; margin-inline: auto;
  background: #ffffff;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  background: var(--navy-700);
  color: var(--white);
  padding: 96px 0 84px;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.5;
  will-change: transform;
}
.hero-blob--navy {
  width: 460px; height: 460px;
  background: radial-gradient(circle at 62% 38%, var(--navy-500), var(--navy-700) 75%);
  bottom: -220px; left: -120px;
  opacity: 0.35;
  animation: heroDriftB 19s ease-in-out infinite;
  animation-delay: -6s;
}
.hero-blob--accent {
  width: 420px; height: 420px;
  background: radial-gradient(circle at 45% 55%, var(--navy-300), transparent 70%);
  top: 28%; left: 40%;
  opacity: 0.4;
  animation: heroDriftC 22s ease-in-out infinite;
  animation-delay: -11s;
}

@keyframes heroDriftB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(120px, -90px) scale(1.22); }
}
@keyframes heroDriftC {
  0%, 100% { transform: translate(-60px, 34px) scale(1); }
  50%      { transform: translate(90px, -70px) scale(1.28); }
}
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at top, black, transparent 75%);
}

/* Soft edge darkening — focuses the eye on the headline/CTA instead of the
   corners. Cheap, standard "premium SaaS hero" trick (Stripe/Linear/Vercel). */
.hero-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 42% 42%, transparent 42%, rgba(7,10,15,.4) 100%);
}

/* Fine static film-grain texture, blended softly over the hero so flat dark
   gradients don't look glassy/plasticky. Low opacity + overlay blend = felt,
   not seen. */
.hero-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
}

/* Real 3D depth field (replaces the flat CSS dot-particles above): a
   THREE.Points field with varied Z per particle + soft pointer parallax.
   See three-macbook/hero-depth-scene.js. Needs network access for the CDN
   modules — on file:// (or offline) this box just stays empty and the rest
   of the hero (blobs, grid, text) still renders normally. */
.hero-depth3d { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* react-three-fiber's <Canvas> sets pointer-events:auto inline on its own
   wrapper div (for raycasting/OrbitControls elsewhere) — that overrides the
   pointer-events:none above and silently swallows clicks on whatever sits
   behind this purely-decorative scene. Force it back off. */
.hero-depth3d, .hero-depth3d * { pointer-events: none !important; }

/* ==========================================================================
   Hero — rotating 3D MacBook (React Three Fiber, mounted by
   three-macbook/mac-scene.js into #hero-mac3d). Needs network access for the
   CDN modules; on file:// this box just stays empty, everything else on the
   page still works.
   ========================================================================== */
.hero-mac3d {
  position: absolute;
  top: 50%;
  right: 2%;
  transform: translateY(-50%);
  width: 460px;
  height: 460px;
  display: none;
  /* Le conteneur reste transparent aux événements — sa boîte de 460 px
     déborde sur le héros et bloquerait les clics alentour. Seul le canvas
     les reçoit, sinon le clic sur l'écran du portable n'atteint jamais
     Three.js. */
  pointer-events: none;
  z-index: 1;
  /* Soft navy vignette behind the (transparent-canvas) laptop, fading into
     the hero's own gradient — no visible rectangular panel seam, and the
     3D content itself stays un-clipped since this paints behind the canvas,
     not through a mask on it. */
  background: radial-gradient(circle at 50% 55%, #202631 0%, #202631 34%, rgba(32,38,49,.55) 55%, transparent 78%);
}
/* Uses .wrap's normal 1180px grid so the hero copy lines up with the header
   logo and every other section, instead of sitting in its own narrower,
   centred column. The copy itself is capped to a readable measure below.
   NOTE: these base rules must stay ABOVE the min-width:1180px block — same
   specificity, so whichever comes last wins, media query or not. */
.hero-inner { position: relative; }
.hero-inner > * { max-width: 720px; }

@media (min-width: 1180px) {
  .hero-mac3d {
    display: block;
    /* Centred in the space left over between the copy column and the screen
       edge, instead of pinned to the right.
         wrap content starts at  50vw - 566px   (1180px grid + 24px padding)
         copy is capped at 560px → its right edge is  50vw - 6px
         midpoint of the remaining gap to 100vw is    75vw - 3px
         minus half the 460px width →                 75vw - 233px
       Derived from those two constants, so the gap on each side of the
       laptop stays equal at every width and it can never reach the text. */
    right: auto;
    left: calc(75vw - 233px);
  }
  /* Cap the copy so it always stops well short of the laptop instead of
     running underneath — this width is what the calc() above assumes.
     Two classes deep on purpose: .hero-lead sets its own 620px further down
     the file and would otherwise win on source order alone. */
  .hero .hero-inner > * { max-width: 560px; }
}
.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--lime-500);
  margin-bottom: 18px;
}
/* lime-700 on a light surface is ~2.7:1 (fails WCAG AA text); navy reads as
   equally "brand" here and clears 15:1. */
.eyebrow-dark { color: var(--navy-700); }

.hero h1 { color: var(--white); margin-bottom: 20px; }
.text-lime { color: var(--lime-500); }

/* Sous-titre du bandeau d'accueil : il porte les mots-clés du métier, donc il
   doit être un vrai titre pour les moteurs. Mais visuellement il reste en
   retrait du h1 — plus petit, moins contrasté, sans couleur d'accent — sinon
   deux titres se disputeraient l'attention au même endroit. */
.hero-tagline {
  font-size: 1.22rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  color: rgba(255,255,255,.9);
  max-width: 620px;
  margin-bottom: 12px;
}

.hero-lead {
  font-size: 1.12rem;
  color: rgba(255,255,255,.78);
  max-width: 620px;
  margin-bottom: 34px;
}

.hero-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 14px; margin-bottom: 40px; }
/* Sur deux lignes, la paire mesure 531px : elle tient dans le plafond de 560px
   de la colonne de texte, donc les deux boutons restent côte à côte jusqu'en
   bas de la plage où le MacBook 3D est affiché. */
.hero-actions .btn-wrap { max-width: 270px; }

/* Plain text, middot-separated — matches the eyebrow above and the footer
   tagline, so it reads as a label, not a row of clickable filter chips. */
.hero-tags { display: flex; flex-wrap: wrap; align-items: center; }
.hero-tags li {
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255,255,255,.75);
}
.hero-tags li + li::before {
  content: "·";
  display: inline-block;
  margin: 0 12px;
  color: rgba(255,255,255,.35);
}

/* ==========================================================================
   Stats band
   ========================================================================== */
.stats { background: var(--navy-900); padding: 44px 0; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.stat-card { text-align: center; padding-inline: 12px; }
.stat-num, .stat-suffix {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 2.6rem;
  color: var(--lime-500);
}
.stat-suffix { font-size: 1.6rem; }
.stat-card p { color: rgba(255,255,255,.65); font-size: 0.92rem; margin-top: 6px; }

/* ==========================================================================
   Section heads (shared)
   ========================================================================== */
.section-head { max-width: 680px; margin-bottom: 48px; }
.section-head--center { max-width: 640px; margin-inline: auto; text-align: center; }
.section-lead { font-size: 1.04rem; margin-top: 10px; }

/* ==========================================================================
   Compétences — skill cards (link to expertise.html)
   ========================================================================== */
.competences { padding: 88px 0; background: var(--paper); position: relative; overflow: hidden; }
.competences::before {
  content: "";
  position: absolute;
  width: 560px; height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--lime-100), transparent 70%);
  top: -200px; right: -180px;
  opacity: 0.6;
  pointer-events: none;
  animation: lightDriftSlow 34s ease-in-out infinite;
}
@keyframes lightDriftSlow {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(40px, -30px) scale(1.1); }
}

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

.skill-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
  /* Brand navy card on the white section — high contrast by default, and it
     brightens on hover instead of the old grey→white shift. */
  background: var(--navy-700);
  border: 1px solid var(--navy-500);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              opacity var(--dur-slow) var(--ease-out);
  min-height: 44px;
}
.skill-card:hover, .skill-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--lime-500);
  background: var(--navy-600);
}
.skill-card:active { transform: translateY(-1px) scale(0.99); }

.skill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  /* Darker tile inside the navy card; flips to solid lime on hover so the
     colour change is unmistakable. */
  background: var(--navy-900);
  color: var(--lime-500);
  transition: background var(--dur-base), color var(--dur-base), transform var(--dur-base) var(--ease-out);
}
.skill-card:hover .skill-icon { background: var(--lime-500); color: var(--navy-700); transform: rotate(-6deg) scale(1.06); }

.skill-card h3 { font-size: 1.08rem; margin-bottom: 2px; color: var(--white); }
.skill-card p { font-size: 0.92rem; color: rgba(255,255,255,.72); }

.skill-more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--lime-500);
}
.skill-more svg { transition: transform var(--dur-base) var(--ease-out); }

/* Douzième tuile : ce n'est pas une expertise, c'est une invitation à
   demander. Le citron plein l'annonce avant même la lecture, et comble la
   place laissée vide en bout de dernière rangée. */
.skill-card--ask {
  background: var(--lime-500);
  border-color: var(--lime-600);
}
.skill-card--ask:hover,
.skill-card--ask:focus-visible {
  background: var(--lime-600);
  border-color: var(--navy-700);
}
.skill-card--ask .skill-icon { background: var(--navy-700); color: var(--lime-500); }
.skill-card--ask:hover .skill-icon { background: var(--navy-900); color: var(--lime-500); }
.skill-card--ask h3 { color: var(--navy-700); }
/* navy-800 sur citron : 8.9:1, largement au-dessus du seuil AA. */
.skill-card--ask p { color: var(--navy-800); }
.skill-card--ask .skill-more { color: var(--navy-700); }
.skill-card:hover .skill-more svg { transform: translateX(4px); }

/* ==========================================================================
   Why section
   ========================================================================== */
.why { padding: 88px 0; background: var(--paper-soft); position: relative; overflow: hidden; }
.why::before {
  content: "";
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(32,38,49,.05), transparent 70%);
  bottom: -200px; left: -160px;
  pointer-events: none;
  animation: lightDriftSlow 30s ease-in-out infinite reverse;
}
.why-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}
.why-list { display: flex; flex-direction: column; gap: 16px; margin: 26px 0 32px; }
.why-list li { display: flex; align-items: flex-start; gap: 12px; font-weight: 500; color: var(--ink); }
.why-list svg { flex-shrink: 0; margin-top: 1px; }

/* Méthode / équipe / certifications / partenaires / réalisations.
   auto-fit so the 5 cards reflow to 3+2 then 2+2+1 then 1 per row without
   leaving an awkward orphan at common widths. */
/* Colonnes fixes plutôt qu'auto-fit : la seconde rangée s'aligne à gauche,
   ce qui se lit comme une mise en page voulue et non comme un reste. */
.why-blocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 56px;
  row-gap: 46px;
  margin-top: 72px;
}
/* Pas de carte : ni fond, ni cadre, ni coin arrondi, ni ombre au survol.
   Un simple filet au-dessus suffit à structurer, et le bloc respire sur le
   fond de section au lieu de flotter dans une vignette. */
.why-block {
  padding-top: 22px;
  border-top: 1px solid var(--line-strong);
  display: flex;
  flex-direction: column;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.why-block h3 { font-size: 1.02rem; margin-bottom: 12px; letter-spacing: -0.01em; }
.why-block p { font-size: 0.94rem; color: var(--ink-soft); line-height: 1.65; }
.why-block-link {
  margin-top: auto;
  padding-top: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.85rem; font-weight: 700; color: var(--navy-700);
}
.why-block-link svg { transition: transform var(--dur-base) var(--ease-out); }
.why-block:hover .why-block-link svg { transform: translateX(4px); }
/* Placeholder copy the client still has to supply — deliberately visible so
   it can't ship unnoticed. Delete the <p> once the real content is in. */
.why-block-todo {
  margin-top: 12px;
  font-size: 0.85rem !important;
  font-style: italic;
  color: var(--ink-faint) !important;
}

.why-visual { display: flex; justify-content: center; }
.orbit-card {
  width: 280px; height: 280px;
  border-radius: 32px;
  background: var(--navy-700);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.orbit-card::before {
  content: "";
  position: absolute; inset: -14px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 40px;
}
.orbit-logo-img {
  width: 100%;
  height: 100%;
  border-radius: 32px;
  object-fit: cover;
  display: block;
}
/* The real "it" logo mark rebuilt as rotating 3D geometry (replaces the flat
   logo image above): see three-macbook/logo-scene.js. Fills the same navy
   card, so the box sizing/shadow/dashed-ring styling above is unchanged. */
.logo-3d { width: 100%; height: 100%; }

/* ==========================================================================
   Partenaires — technology/vendor wordmark chips.
   Real brand logos (Simple Icons CDN), shown in full color, sitting flat on
   the section background — no chip/pill container around them.
   ========================================================================== */
.partners { padding: 80px 0; background: var(--paper); }
.partners-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 48px;
  max-width: 980px;
  margin-inline: auto;
}
.partners-grid li.partner--logo {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-fast);
}
.partners-grid li.partner--logo img {
  height: 32px;
  width: auto;
  display: block;
}
.partners-grid li.partner--logo:hover {
  transform: translateY(-3px);
}

/* ==========================================================================
   Zone d'intervention — Hauts-de-France (bloc interne à "Pourquoi nous",
   d'où l'absence de fond/padding de section : il hérite de .why)
   ========================================================================== */
#zone { margin-top: 72px; }
/* Pleine largeur (le .section-head générique est bridé à 680px) : titre et
   accroche tiennent chacun sur une seule ligne sur écran large, et se
   replient naturellement en dessous. */
.zone-head { max-width: none; margin-bottom: 40px; }
.zone-head .section-lead { margin-top: 14px; font-size: 1.06rem; }

/* Carte des 5 départements — tracée à partir des contours officiels
   (data.gouv / IGN, version simplifiée), teintée dans les bleus de marque. */
.hdf-map-wrap {
  max-width: 900px;
  margin: 0 auto 56px;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.hdf-map { width: 100%; height: auto; display: block; overflow: visible; }

/* ---- Carte en relief ------------------------------------------------------ */
.hdf3d {
  position: relative;
  /* Le viewBox annonce 760x560 mais les contours n'en occupent que 434x528 :
     la région est plus HAUTE que large. Inclinée à 58°, sa profondeur se
     comprime de 0,85, ce qui donne un rapport apparent proche du carré. */
  aspect-ratio: 1 / 0.97;
  max-width: 660px;
  margin: 0 auto;
}
.hdf3d canvas { display: block; width: 100%; height: 100%; }
/* Le SVG ne sert plus qu'au repli : dès que le WebGL a pris la main, il sort
   du flux. Tant que rien n'a démarré, c'est lui qu'on voit. */
.hdf3d.is-ready > .hdf-map { display: none; }
.hdf3d:not(.is-ready) { aspect-ratio: auto; }

.hdf3d-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hdf3d-label {
  position: absolute;
  top: 0;
  left: 0;
  /* Le script écrit un translate() en pixels ; la mise en place autour du point
     se fait ici, pour qu'il n'ait pas à connaître la largeur du libellé. */
  margin: -10px 0 0 10px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: rgba(18, 22, 29, 0.86);
  color: var(--white);
  font-family: "Poppins", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.hdf3d-label.is-visible { opacity: 1; }
/* Posée à gauche du point : soit par préférence (ville serrée contre une
   voisine), soit parce que le script a vu qu'à droite elle sortirait du cadre.
   « translate » agit avant « transform », les deux se composent donc sans que
   le script ait à connaître la largeur du libellé. */
.hdf3d-label--gauche { margin-left: -8px; translate: -100% 0; }
.hdf3d-label--siege {
  background: var(--lime-500);
  color: var(--navy-700);
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  box-shadow: 0 4px 12px rgba(32, 38, 49, 0.22);
  /* Toujours affiché : il ne doit pas passer sous une étiquette de ville. */
  z-index: 2;
}

@media (max-width: 600px) {
  /* Le conteneur ne fait plus que ~340px : au-delà de trois villes par
     département, les étiquettes se chevauchent. On garde les plus connues,
     celles que le module a classées en tête. */
  .hdf3d-label--secondaire { display: none; }
  .hdf3d-label { font-size: 0.72rem; padding: 2px 7px; margin: -9px 0 0 8px; }
  .hdf3d-label--siege { font-size: 0.73rem; }
}

/* Sur écran tactile la carte se pilote au doigt : un département reste choisi
   jusqu'au suivant. On l'annonce, faute de curseur pour le suggérer. */
.hdf3d-aide {
  display: none;
  margin: 6px 0 0;
  text-align: center;
  font-size: 0.82rem;
  color: var(--ink-faint);
}
@media (hover: none) {
  .hdf3d-aide { display: block; }
}
/* Crisp white borders do the separating work, so the five blues can stay in a
   tight, elegant range instead of turning into a rainbow. */
.hdf-shapes path {
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linejoin: round;
  transition: fill var(--dur-base) var(--ease-out);
}
.hdf-shapes path:hover { fill: var(--lime-600); }
.hdf-dept-name {
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: 18px;
  fill: #fff; pointer-events: none;
  paint-order: stroke; stroke: rgba(18,22,29,.35); stroke-width: 3px; stroke-linejoin: round;
}
.hdf-dept-code {
  font-family: "Poppins", sans-serif; font-weight: 800; font-size: 13px;
  fill: var(--lime-500); letter-spacing: 0.06em; pointer-events: none;
  paint-order: stroke; stroke: rgba(18,22,29,.45); stroke-width: 3px; stroke-linejoin: round;
}
.hdf-dot { fill: rgba(255,255,255,.92); }
.hdf-city {
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 12.5px;
  fill: #fff; pointer-events: none;
  paint-order: stroke; stroke: rgba(18,22,29,.7); stroke-width: 3.2px; stroke-linejoin: round;
}
/* Siège social : repère lime avec halo pulsé, seul point en couleur d'accent. */
.hdf-hq { fill: var(--lime-500); stroke: var(--navy-900); stroke-width: 1.6; }
.hdf-hq-halo { fill: var(--lime-500); opacity: 0.28; animation: hdfPulse 2.8s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes hdfPulse {
  0%, 100% { transform: scale(1);   opacity: 0.28; }
  50%      { transform: scale(1.35); opacity: 0.10; }
}
.hdf-hq-label {
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: 14px;
  fill: #fff; pointer-events: none;
  paint-order: stroke; stroke: rgba(18,22,29,.7); stroke-width: 3.2px; stroke-linejoin: round;
}
.hdf-hq-sub {
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 10.5px;
  fill: var(--lime-500); letter-spacing: 0.04em; pointer-events: none;
  paint-order: stroke; stroke: rgba(18,22,29,.7); stroke-width: 3px; stroke-linejoin: round;
}
.zone-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px 40px;
}
.zone-note { padding-left: 18px; border-left: 2px solid var(--lime-500); }
.zone-note h3 { font-size: 1rem; margin-bottom: 8px; }
.zone-note p { font-size: 0.94rem; color: var(--ink-soft); }

/* ==========================================================================
   Packs — pricing accordion
   ========================================================================== */
.packs { padding: 88px 0; background: var(--navy-700); position: relative; overflow: hidden; }
.packs-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.packs-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}
.packs-blob--a {
  width: 480px; height: 480px;
  background: radial-gradient(circle at 35% 35%, var(--lime-700), transparent 72%);
  top: -180px; right: -120px;
  opacity: 0.3;
  animation: packsDriftA 24s ease-in-out infinite;
}
.packs-blob--b {
  width: 420px; height: 420px;
  background: radial-gradient(circle at 60% 40%, var(--navy-300), transparent 72%);
  bottom: -180px; left: -100px;
  opacity: 0.35;
  animation: packsDriftB 28s ease-in-out infinite;
  animation-delay: -8s;
}
@keyframes packsDriftA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-70px, 60px) scale(1.15); }
}
@keyframes packsDriftB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(80px, -50px) scale(1.18); }
}
/* Subtle 3D depth field behind the pricing cards, paused off-screen — see
   three-macbook/packs-depth-scene.js. */
.packs-depth3d { position: absolute; inset: 0; pointer-events: none; }
/* Same react-three-fiber pointer-events:auto override as .hero-depth3d —
   without this, this decorative canvas eats every click meant for the pack
   accordion buttons underneath it. */
.packs-depth3d, .packs-depth3d * { pointer-events: none !important; }
.packs .eyebrow { color: var(--lime-500); }
.packs h2 { color: var(--white); }
.packs .section-lead { color: rgba(255,255,255,.68); }

.packs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

.pack-card {
  background: var(--navy-800);
  border: 1.5px solid var(--navy-500);
  border-radius: var(--r-lg);
  overflow: hidden;
  scroll-margin-top: calc(var(--header-h) + 12px);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
              opacity var(--dur-slow) var(--ease-out);
}
.pack-card:hover { border-color: var(--navy-400); }
.pack-card.is-featured {
  border-color: var(--lime-500);
  box-shadow: 0 0 0 1px var(--lime-500), var(--shadow-lg);
}

.pack-badge {
  display: none;
  background: var(--lime-500);
  color: var(--navy-700);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 7px;
}
.pack-card.is-featured .pack-badge { display: block; }

.pack-head {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--white);
  padding: 28px 26px 22px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pack-head:hover .pack-name { color: var(--lime-500); }

.pack-name { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1.2rem; transition: color var(--dur-fast); }
.pack-role { font-size: 0.86rem; color: rgba(255,255,255,.55); margin-bottom: 10px; }

.pack-price { display: flex; align-items: baseline; gap: 6px; }
.pack-price .amount { font-family: "Poppins", sans-serif; font-size: 2.1rem; font-weight: 800; color: var(--lime-500); }
.pack-price .period { font-size: 0.85rem; color: rgba(255,255,255,.55); }
.pack-from { font-size: 0.76rem; color: rgba(255,255,255,.45); margin-top: 2px; }

.pack-toggle {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--white);
}
.pack-toggle svg { transition: transform var(--dur-base) var(--ease-out); }
.pack-head[aria-expanded="true"] .pack-toggle svg { transform: rotate(180deg); }

/* The accordion body: JS measures content height and sets max-height inline,
   which animates reliably across browsers (grid-template-rows transitions
   are unsupported/buggy on older Safari/iOS). */
.pack-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-in-out);
}
.pack-body-inner { overflow: hidden; }

.pack-features {
  padding: 4px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  border-top: 1px solid var(--navy-500);
  padding-top: 18px;
  margin: 0 26px;
}
.pack-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: rgba(255,255,255,.82);
}
.pack-features svg { flex-shrink: 0; margin-top: 2px; color: var(--lime-500); }
.pack-features .pack-includes-label {
  color: var(--lime-500);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 6px 0 -2px;
}

.pack-note {
  margin: 14px 26px 0;
  font-size: 0.78rem;
  color: rgba(255,255,255,.5);
  font-style: italic;
}
.pack-cta { margin: 20px 26px 26px; display: block; text-align: center; }

/* Static variant used on /infogerance/ — the packs are laid out fully
   open (no accordion, no JS), since that page exists to present the offer
   in full and search engines should read it without running scripts. */
.pack-card--static { display: flex; flex-direction: column; }
.pack-static-head { display: flex; flex-direction: column; gap: 6px; padding: 28px 26px 22px; color: var(--white); }
.pack-card--static .pack-features { margin-top: auto; }

/* ==========================================================================
   Contact / form
   ========================================================================== */
.contact { padding: 96px 0; background: var(--paper); position: relative; overflow: hidden; }
.contact::before {
  content: "";
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--lime-050), transparent 72%);
  top: -180px; left: -160px;
  pointer-events: none;
  animation: lightDriftSlow 32s ease-in-out infinite;
  animation-delay: -10s;
}
.contact-inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
}

.contact-info { margin-top: 30px; display: flex; flex-direction: column; gap: 16px; }
.contact-info li { display: flex; align-items: center; gap: 12px; color: var(--ink); font-weight: 500; }
.contact-info svg { color: var(--navy-700); flex-shrink: 0; }
.contact-info a:hover { text-decoration: underline; }

.contact-form {
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 7px;
  color: var(--navy-700);
}
.field label span { color: var(--danger); }

.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--white);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  min-height: 48px;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--navy-400); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--lime-600);
  box-shadow: 0 0 0 4px var(--lime-100);
}
.field select { cursor: pointer; }

.field.has-error input, .field.has-error textarea { border-color: var(--danger); }
.field.has-error .field-error { display: block; }
.field-error {
  display: none;
  color: var(--danger);
  font-size: 0.82rem;
  margin-top: 6px;
  font-weight: 500;
}

.field input:disabled, .field select:disabled, .field textarea:disabled {
  background: var(--paper-alt);
  color: var(--ink-faint);
  cursor: not-allowed;
}

.form-status {
  margin-top: 14px;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: center;
  min-height: 1.2em;
}
.form-status.is-success { color: var(--success); }
.form-status.is-error { color: var(--danger); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--navy-900); color: rgba(255,255,255,.7); padding-top: 72px; }
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-brand p { margin-top: 16px; color: rgba(255,255,255,.55); font-size: 0.92rem; }
.footer-nav h3, .footer-contact h3 {
  color: var(--white); font-size: 0.9rem; letter-spacing: 0.06em;
  text-transform: uppercase; margin-bottom: 18px;
}
.footer-nav ul, .footer-contact address { display: flex; flex-direction: column; gap: 12px; font-style: normal; }
.footer-nav a:hover, .footer-contact a:hover { color: var(--lime-500); }
.footer-contact address { line-height: 1.8; color: rgba(255,255,255,.6); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding: 22px 24px;
  font-size: 0.82rem;
  color: rgba(255,255,255,.4);
}

/* ==========================================================================
   Expertise detail page (expertise-*.html) — one page per skill. Editorial,
   typography-led layout: quiet numerals instead of repeated stock icons,
   no stacked "feature cards", generous asymmetric whitespace. The kind of
   restraint that reads as considered rather than templated.
   ========================================================================== */
.xp-back-wrap { background: var(--paper); padding: 22px 0; }
.xp-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.88rem; font-weight: 600; color: var(--ink-soft);
}
.xp-back svg { transition: transform var(--dur-fast) var(--ease-out); }
.xp-back:hover { color: var(--navy-700); }
.xp-back:hover svg { transform: translateX(-3px); }

/* Renvoi vers l'offre ESN depuis l'accueil, entre les packs et les
   partenaires. Reprend le navy, le filigrane et le rythme du bandeau des
   pages ESN — mais son titre est un h2 : l'accueil a deja son h1, et une
   page n'en porte qu'un. */
.esn-bande {
  background: var(--navy-700);
  padding: 96px 0 104px;
  position: relative;
  overflow: hidden;
}
/* Deux colonnes plutot qu'un logo en position absolue : pose au-dessus du
   texte, il le chevauchait de 141 px vers 1024 px de large. En grille, le
   chevauchement est impossible quelle que soit la largeur. */
.esn-bande-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 56px;
  align-items: center;
}
.esn-bande-mark { width: 240px; height: auto; justify-self: end; pointer-events: none; }
.esn-bande-inner { max-width: 860px; }
.esn-bande .eyebrow { color: var(--lime-500); font-size: 0.9rem; margin-bottom: 20px; }
.esn-bande .btn { padding: 17px 34px; min-height: 58px; font-size: 1.08rem; }
.esn-bande h2 {
  color: var(--white);
  font-size: clamp(2rem, 1.3rem + 3.3vw, 3.9rem);
  letter-spacing: -0.015em;
  line-height: 1.12;
  margin-bottom: 26px;
}
.esn-bande-lead {
  font-size: 1.18rem;
  color: rgba(255, 255, 255, 0.78);
  max-width: 700px;
  margin-bottom: 36px;
}
@media (max-width: 1080px) {
  /* Sous cette largeur la colonne de texte devient trop etroite pour un
     titre de cette taille : le logo cede la place. */
  .esn-bande-grille { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .esn-bande-mark { display: none; }
}
@media (max-width: 900px) {
  .esn-bande { padding: 60px 0 64px; }
}

.xp-hero { background: var(--navy-700); padding: 68px 0 72px; position: relative; overflow: hidden; }
/* Brand mark, same spot on every expertise page — decorative, sits behind
   the copy and never competes with it. */
.xp-hero-mark {
  position: absolute;
  top: 50%; right: 4%;
  transform: translateY(-50%);
  width: 190px; height: auto;
  opacity: 1;
  pointer-events: none;
}
.xp-hero-inner { position: relative; max-width: 700px; }
/* Le mot de l'expertise est passe sous le titre : il separe desormais la
   phrase de choc de la phrase explicative. Les marges sont reparties pour
   que les blancs percus soient egaux de part et d'autre : l'interlignage de
   la phrase grise ajoute deja de l'air au-dessus de ses capitales, pas le
   titre sous ses jambages. Mesure a l'ecran : 30 px de chaque cote.
   Total des marges inchange : 42 px. */
.xp-hero-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 17px; }
.xp-hero-kicker svg { width: 18px; height: 18px; color: var(--lime-500); flex-shrink: 0; }
.xp-hero-kicker .eyebrow { margin-bottom: 0; }
/* Nom du domaine, au-dessus du titre : il situe la page dans l'offre avant
   que le titre ne pose sa question. En casse de titre, pour se distinguer du
   verbe en capitales qui suit le titre — deux reperes de nature differente
   n'ont pas a se ressembler. */
.xp-hero-domain {
  color: var(--lime-500);
  font-family: "Poppins", sans-serif;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.xp-hero h1 { color: var(--white); margin-bottom: 25px; letter-spacing: -0.01em; }
.xp-hero-lead { font-size: 1.1rem; color: rgba(255,255,255,.78); max-width: 600px; }

/* Page infogérance : le globe 3D tient le rôle de visuel de tête, à la place
   du filigrane du logo — les deux au même endroit se gêneraient. */
.xp-hero--globe { padding-bottom: 84px; }
.xp-hero--globe .xp-hero-mark { display: none; }
/* Hero en deux colonnes : le texte reprend la grille du site (au lieu d'être
   centré comme sur les pages expertise) et libère la droite pour le globe. */
.xp-hero--globe .xp-hero-inner { max-width: var(--wrap); }
.xp-hero--globe .xp-hero-inner > * { max-width: 600px; }
.xp-hero-globe {
  position: absolute;
  top: 50%; right: 3%;
  transform: translateY(-50%);
  width: 400px; height: 400px;
}
/* R3F pose pointer-events: auto en style inline sur son conteneur : sans ce
   passage en force, le canvas avalerait les clics de la section. */
.xp-hero-globe, .xp-hero-globe * { pointer-events: none !important; }

@media (max-width: 1150px) {
  .xp-hero-globe { width: 300px; height: 300px; right: 1%; }
  .xp-hero--globe .xp-hero-inner > * { max-width: 460px; }
}

/* Pages ESN : la liste des situations laissait la moitie droite vide. Elle
   accueille desormais la photo du metier. Le gabarit reste a une colonne
   partout ailleurs — les pages d'expertise n'ont pas d'image a y mettre. */
.xp-pain--illustre .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
/* Le texte reprend toute sa colonne : le plafond de 640 px le laisserait
   flotter loin de l'image. */
.xp-pain--illustre h2,
.xp-pain--illustre .xp-pain-list { max-width: none; }
.xp-pain-visuel {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--navy-700);   /* tenu avant l'arrivee de l'image */
  aspect-ratio: 4 / 3;
}
.xp-pain-visuel img { width: 100%; height: 100%; object-fit: cover; }
/* Le visuel Wi-Fi est le seul en portrait : cadre au centre, il coupe la
   borne au plafond et il ne reste qu'un homme qui leve le bras. Cadre par
   le haut, la borne et le geste restent dans l'image. */
.xp-pain-visuel--haut img { object-position: center top; }

@media (max-width: 900px) {
  /* Une colonne : l'image passe sous la liste et s'aplatit, pour ne pas
     coûter un ecran entier de defilement sur telephone. */
  .xp-pain--illustre .wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .xp-pain-visuel { aspect-ratio: 16 / 9; }
}
.xp-pain { padding: 72px 0 12px; }
.xp-pain h2 { max-width: 640px; margin-bottom: 32px; }
.xp-pain-list { display: flex; flex-direction: column; max-width: 640px; margin-bottom: 8px; }
.xp-pain-list li {
  display: flex; align-items: baseline; gap: 20px;
  font-size: 1.04rem; font-weight: 500; color: var(--ink);
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.xp-pain-list li:first-child { padding-top: 0; }
.xp-pain-list li:last-child { border-bottom: none; }
.xp-pain-num {
  flex-shrink: 0;
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: 0.82rem;
  color: var(--lime-700);
  font-variant-numeric: tabular-nums;
}

.xp-definition { padding: 64px 0 76px; }
.xp-definition-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: start; }
.xp-definition p { font-size: 1.1rem; color: var(--ink); }
.xp-stat { border-left: 2px solid var(--lime-500); padding-left: 22px; }
.xp-stat-label { font-weight: 700; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; }
.xp-stat p { color: var(--ink); font-size: 0.98rem; margin: 0; }

.xp-why { background: var(--paper-soft); padding: 68px 0; }
.xp-why-inner { max-width: 680px; }
.xp-why h2 { margin-bottom: 16px; }
.xp-why p { font-size: 1.06rem; }

.xp-process { padding: 76px 0; }
.xp-process h2 { max-width: 640px; margin-bottom: 44px; }
.xp-process-grid { display: grid; }
.xp-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 8px 24px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
}
.xp-process-grid .xp-step:last-child { border-bottom: 1px solid var(--line); }
.xp-step-num {
  font-family: "Poppins", sans-serif; font-weight: 800; font-size: 1.6rem;
  color: var(--line-strong);
  line-height: 1;
}
.xp-step h3 { font-size: 1.1rem; margin-bottom: 10px; grid-column: 2; }
/* One short plain-language paragraph per step, capped at a comfortable
   measure so it stays easy to read rather than running the full width. */
.xp-step p {
  grid-column: 2;
  max-width: 62ch;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}

.xp-features { padding: 76px 0; }
.xp-features h2 { max-width: 640px; margin-bottom: 44px; }
/* Deux grilles de prestations se suivent sur la page SecuriBox : sans
   changement de fond elles se liraient comme une seule longue liste. */
.xp-features--soft { background: var(--paper-soft); }
.xp-features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 48px; }
.xp-feature { padding-left: 18px; border-left: 2px solid var(--lime-500); }
.xp-feature h3 { font-size: 1rem; margin-bottom: 6px; }
.xp-feature p { font-size: 0.94rem; margin: 0; }

.xp-closing { background: var(--navy-700); padding: 80px 0; text-align: center;
  /* Le robot qui passe la tête déborde volontairement : c'est cette section
     qui le rogne, d'où position/overflow ici. */
  position: relative; overflow: hidden; }
.xp-closing-inner { position: relative; z-index: 1; }
.xp-closing-inner { max-width: 680px; margin-inline: auto; }
.xp-closing-tagline {
  font-family: "Poppins", sans-serif; font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  letter-spacing: -0.01em;
  color: var(--lime-500); margin-bottom: 16px;
}
.xp-closing-sub { color: rgba(255,255,255,.75); font-size: 1.06rem; margin-bottom: 32px; }

@media (max-width: 900px) {
  .xp-definition-grid { grid-template-columns: 1fr; }
  .xp-stat { border-left: none; border-top: 2px solid var(--lime-500); padding: 22px 0 0; }
  .xp-features-grid { grid-template-columns: 1fr; }
  .xp-step { grid-template-columns: 44px 1fr; }
  .xp-step-num { font-size: 1.3rem; }
  .xp-hero-mark { display: none; } /* would sit under the headline at this width */
  .xp-hero-globe { display: none; } /* idem : plus de place à côté du titre */
  .xp-hero--globe { padding-bottom: 72px; }
}

/* ==========================================================================
   Blog / Actualités
   ========================================================================== */
.blog-hero { padding: 64px 0 48px; background: var(--paper-soft); text-align: center; }
.blog-hero .eyebrow { margin-bottom: 12px; }
.blog-hero h1 { max-width: 640px; margin-inline: auto; margin-bottom: 14px; }
.blog-hero p { max-width: 560px; margin-inline: auto; font-size: 1.04rem; }

.blog-grid-section { padding: 64px 0 88px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--lime-500); }
.blog-card-tag { color: var(--navy-700); font-weight: 700; font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; }
.blog-card time { color: var(--ink-faint); font-size: 0.82rem; }
.blog-card h2 { font-size: 1.14rem; margin: 2px 0 2px; }
.blog-card p { font-size: 0.92rem; color: var(--ink-soft); }
.blog-card-more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 700; color: var(--navy-700); }
.blog-card-more svg { transition: transform var(--dur-base) var(--ease-out); }
.blog-card:hover .blog-card-more svg { transform: translateX(4px); }

/* Article reading page */
.article-header { padding: 56px 0 36px; background: var(--paper-soft); }
.article-header .wrap { max-width: 720px; }
.article-tag { color: var(--navy-700); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; display: inline-block; }
.article-header h1 { margin-bottom: 14px; }
.article-meta { color: var(--ink-faint); font-size: 0.9rem; }

.article-body { padding: 48px 0 72px; }
.article-body .wrap { max-width: 720px; }
.article-body p { font-size: 1.06rem; line-height: 1.75; color: var(--ink); margin-bottom: 22px; }
.article-body h2 { font-size: 1.4rem; margin: 40px 0 16px; }
.article-body ul { display: flex; flex-direction: column; gap: 12px; margin: 0 0 26px; }
.article-body ul li { display: flex; align-items: flex-start; gap: 10px; font-size: 1.02rem; color: var(--ink); }
.article-body ul svg { flex-shrink: 0; margin-top: 5px; color: var(--lime-600); }
.article-cta {
  background: var(--lime-050);
  border-left: 3px solid var(--lime-500);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 22px 24px;
  margin: 36px 0;
}
.article-cta p { margin-bottom: 14px; font-size: 1rem; }

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

/* ==========================================================================
   Responsive — Tablet (≤1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  .skills-grid { grid-template-columns: repeat(2, 1fr); }
  .packs-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .why-inner { grid-template-columns: 1fr; }
  /* Deux colonnes : à trois, les paragraphes tombent sous les 30 caractères
     par ligne et le texte se hache. */
  .why-blocks { grid-template-columns: repeat(2, 1fr); column-gap: 40px; }
  .why-visual { order: -1; }
  .orbit-card { width: 220px; height: 220px; }
  .contact-inner { grid-template-columns: 1fr; gap: 40px; }
  .stats-grid { gap: 20px; }
}

/* ==========================================================================
   Responsive — Mobile (≤768px)
   ========================================================================== */
@media (max-width: 768px) {
  :root { --header-h: 68px; }

  .hero { padding: 56px 0 56px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  /* Empilés, les boutons prennent toute la largeur : le plafond qui les gardait
     côte à côte sur grand écran n'a plus lieu d'être et laisserait le bouton
     bleu plus étroit que son voisin. */
  .hero-actions .btn, .hero-actions .btn-wrap { width: 100%; max-width: none; }

  .stats-grid { grid-template-columns: 1fr; gap: 28px; }

  .competences, .why, .packs, .contact { padding: 60px 0; }
  .skills-grid { grid-template-columns: 1fr; }
  .why-blocks { grid-template-columns: 1fr; row-gap: 34px; margin-top: 48px; }

  .form-row { grid-template-columns: 1fr; }
  .contact-form { padding: 24px; }

  .footer-inner { grid-template-columns: 1fr; gap: 36px; padding-bottom: 36px; }
  .footer-bottom { flex-direction: column; gap: 6px; text-align: center; }

  /* Au doigt, ces liens ne faisaient que 20px de haut — mesuré à 375px. Le
     rembourrage vertical les amène à 40px sans écarter le texte, la marge
     négative compensant l'espacement de la liste. */
  .footer-nav ul { gap: 0; }
  .footer-nav a {
    display: block;
    padding: 10px 0;
    margin: -1px 0;
  }
  .footer-contact address a { display: inline-block; padding: 7px 0; }
  /* Le téléphone et l'e-mail de la zone de contact souffraient du même défaut. */
  .contact-info a { display: inline-block; padding: 7px 0; }
}

@media (max-width: 480px) {
  .wrap { padding-inline: 18px; }
  h1 { font-size: 1.9rem; }
  .pack-price .amount { font-size: 1.8rem; }
}



/* ==========================================================================
   Robot qui passe la tête
   ==========================================================================
   Le corps sort du cadre, seule la tête dépasse. Le décalage est fait dans la
   scène 3D (pose « coucou ») ; ici on place la boîte assez bas et assez à
   droite pour que la section la coupe. */
.peek-robot {
  position: absolute;
  right: -60px;
  /* La boîte descend sous la section : seule sa moitié haute reste visible,
     soit exactement la tête et le bras levé. */
  bottom: -238px;
  width: 460px;
  height: 460px;
  z-index: 0;
}
.peek-robot, .peek-robot * { pointer-events: none !important; }

@media (max-width: 1100px) {
  .peek-robot { right: -70px; bottom: -207px; width: 400px; height: 400px; }
}

/* Variante au coin haut-gauche des pages expertise. Le bord gauche de la
   section fait la coupe : on ne voit que la moitié droite du robot. Il arrive
   en glissant, un peu après le chargement — assez tard pour que la page soit
   lue d'abord, assez tôt pour être remarqué. */
.peek-corner {
  position: absolute;
  /* La coupe doit tomber au niveau du cou. Le robot penché place sa tête vers
     x ≈ +0,75 dans la scène ; en pixels sur un rendu de 440px, cela revient à
     ne laisser dépasser qu'environ 185px. */
  left: -255px;
  top: max(6px, calc(50% - 112px));
  width: 440px;
  height: 440px;
  z-index: 0;
  animation: peekIn 720ms var(--ease-out) 700ms both;
}
@keyframes peekIn {
  from { transform: translateX(-90px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  /* Pas de glissement, mais il doit rester visible : sans « both » et sans
     état final explicite, il resterait bloqué en opacity 0. */
  .peek-corner { animation: none; opacity: 1; transform: none; }
}

/* Contrainte à respecter : la tête est au centre du rendu, donc la partie
   visible (largeur + décalage, le décalage étant négatif) doit rester
   SUPÉRIEURE à la moitié de la largeur. Sinon la coupe passe au-delà de la
   tête et il ne reste qu'un bras qui dépasse.
   Sous 1240px on rétrécit donc la boîte au lieu de la décaler davantage.
   Le texte du bandeau commence à (largeur - 700) / 2 ; garder 20px d'écart
   devient impossible sous 1120px. */
@media (max-width: 1240px) {
  /* Boîte réduite : la tête reste à la même fraction, soit 150 x 360/440. */
  .peek-corner { left: -210px; width: 360px; height: 360px; top: max(6px, calc(50% - 92px)); }
}
@media (max-width: 1120px) {
  .peek-corner { display: none; }
}
/* Sous 900px il n'est pas monté du tout (voir le script de la page) : pas de
   boucle de rendu inutile sur téléphone. */
@media (max-width: 900px) {
  .peek-robot { display: none; }
}

/* ==========================================================================
   Page ESN — délégation de compétences
   ========================================================================== */
.esn-publics { padding: 68px 0 4px; }
.esn-publics h2 { margin-bottom: 14px; }
.esn-lead { max-width: 68ch; font-size: 1.06rem; margin-bottom: 32px; }
/* Sous un titre de section, le chapeau doit coller au titre. */
.xp-features h2 + .esn-lead { margin-top: -18px; margin-bottom: 30px; }
.esn-publics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.esn-public {
  background: var(--paper-soft);
  border-radius: var(--r-lg);
  padding: 26px 28px;
  border-top: 3px solid var(--lime-500);
}
.esn-public h3 { margin-bottom: 10px; }
.esn-public p { font-size: 0.96rem; }

/* Bloc candidats : une ESN a deux publics, le client et le consultant. On le
   garde nettement plus discret que le reste — la page s'adresse d'abord aux
   clients, ce bloc ne doit pas lui voler la vedette. */
.esn-candidats { padding: 64px 0; background: var(--paper-soft); }
.esn-candidats-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
}
.esn-candidats h2 { font-size: 1.5rem; margin-bottom: 10px; }
.esn-candidats p { max-width: 56ch; }
.esn-candidats-actions { display: flex; flex-direction: column; gap: 12px; }
.esn-candidats-actions .btn { white-space: nowrap; }

@media (max-width: 900px) {
  .esn-publics-grid { grid-template-columns: 1fr; }
  .esn-candidats-inner { grid-template-columns: 1fr; gap: 24px; }
  .esn-candidats-actions { flex-direction: row; flex-wrap: wrap; }
}

/* Bouton « Nous rejoindre » du bandeau ESN — citron de la marque, sans halo.
   Le « it » du logo était citron, ce qui interdisait tout fond citron : il
   disparaissait. Le bouton utilise donc une variante navy du logo
   (logo-icon-bleu.png), ce qui lève la contrainte.
   Pas de box-shadow citron comme sur .btn-primary : la section est déjà
   sombre, le contraste seul détache le bouton.
   Navy sur citron : 11,1:1 au repos, 9,6:1 au survol. */
.btn-rejoindre {
  margin-top: 30px;
  background: var(--lime-500);
  border-color: var(--lime-500);
  color: var(--navy-700);
  box-shadow: none;
  padding-left: 18px;
}
.btn-rejoindre:hover {
  background: var(--lime-600);
  border-color: var(--lime-600);
  box-shadow: none;
}
.btn-rejoindre-it {
  width: 22px;
  height: auto;
  margin-right: 2px;
  /* La flèche du bouton descend au survol pour annoncer où mène le lien ; le
     logo, lui, ne bouge pas. */
  transition: transform var(--dur-base) var(--ease-out);
}
.btn-rejoindre:hover .btn-rejoindre-it { transform: scale(1.08); }
.btn-rejoindre:hover svg { transform: translateY(3px); }

/* ---- Formulaire de candidature ------------------------------------------ */
.candidature-form { max-width: 720px; }
.field-option {
  /* .field label span est en rouge pour l'astérisque des champs obligatoires :
     il faut annuler cette couleur ici, sinon « facultatif » s'affiche en rouge
     et signale exactement l'inverse de ce qu'il dit. */
  color: var(--ink-faint);
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--ink-faint);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 6px;
}
.field label .field-option { color: var(--ink-faint); }
.field-aide { font-size: 0.84rem; color: var(--ink-faint); margin-top: 6px; }

/* Piège à robots : hors écran et hors du parcours au clavier. Un display:none
   serait repéré par les automates un peu sérieux. */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Le champ fichier natif ne se met pas en forme : on le masque et on habille
   son label, qui déclenche le même sélecteur. */
.fichier { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.fichier input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
}
.fichier-bouton {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--paper);
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--navy-700);
  cursor: pointer;
  margin-bottom: 0;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.fichier-bouton:hover { border-color: var(--navy-700); background: var(--paper-soft); }
.fichier-bouton:active { transform: scale(0.97); }
/* Le focus clavier porte sur l'input masqué : on le reporte visuellement sur
   le bouton, sinon la tabulation semble sauter le champ. */
.fichier input[type="file"]:focus-visible + .fichier-bouton {
  outline: 2.5px solid var(--navy-700);
  outline-offset: 2px;
}
.fichier-nom { font-size: 0.9rem; color: var(--ink-faint); }
.fichier-nom.is-rempli { color: var(--ink); font-weight: 600; }
.field.has-error .fichier-bouton { border-color: var(--danger); }

/* Case de consentement. La case native ne se met pas en forme de façon fiable
   d'un navigateur à l'autre : on la masque visuellement — sans la retirer du
   parcours au clavier — et on dessine un carré à côté. */
.field-consent { margin: 24px 0 20px; }
.consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  max-width: 62ch;
  margin-bottom: 0;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.consent input[type="checkbox"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
}
.consent-case {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  margin-top: 1px;
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  background: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.consent:hover .consent-case { border-color: var(--navy-700); }
.consent input:checked + .consent-case {
  background: var(--lime-500);
  border-color: var(--lime-600);
  color: var(--navy-700);
}
/* Le focus porte sur la case masquée : on le reporte sur le carré dessiné,
   sinon la tabulation semble ne rien sélectionner. */
.consent input:focus-visible + .consent-case {
  outline: 2.5px solid var(--navy-700);
  outline-offset: 2px;
}
.consent-texte {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
/* `.field label span` colore les astérisques en rouge et l'emporte ici par
   spécificité — sur le libellé comme sur le carré, dont le crochet SVG hérite
   la couleur. On reprend la main avec des sélecteurs plus précis, en laissant
   le rouge à la seule astérisque. */
.field label .consent-texte { color: var(--ink-soft); font-weight: 400; }
/* `.field label` est en gras : il faut la même spécificité pour revenir à
   du texte courant, une case de consentement n'étant pas un intitulé. */
.field label.consent { font-weight: 400; margin-bottom: 4px; }
.field label .consent-case { color: transparent; }
.field label .consent-texte span { color: var(--danger); }
.field label input:checked + .consent-case { color: var(--navy-700); }
.field-consent.has-error .consent-case { border-color: var(--danger); }
.field-consent.has-error .field-error { display: block; margin-left: 34px; }

.candidature-form .btn-submit { width: auto; min-width: 240px; margin-top: 6px; }
.candidature-rgpd {
  font-size: 0.84rem;
  color: var(--ink-faint);
  max-width: 62ch;
  margin-top: 18px;
}
.candidature-rgpd a { text-decoration: underline; }
.candidature-repli { margin-top: 24px; font-size: 0.94rem; }
.candidature-repli a { font-weight: 600; color: var(--navy-700); text-decoration: underline; }

@media (max-width: 560px) {
  .candidature-form .btn-submit { width: 100%; }
  .fichier { gap: 10px; }
}

/* ==========================================================================
   Test d'intrusion — page cybersécurité
   ========================================================================== */
.xp-pentest { padding: 72px 0 76px; border-top: 1px solid var(--line); }
.xp-pentest h2 { max-width: 22ch; margin-bottom: 18px; }
.xp-pentest-lead { font-size: 1.1rem; color: var(--ink); max-width: 68ch; margin-bottom: 40px; }

.xp-pentest-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  margin-bottom: 44px;
}
.xp-pentest-card {
  background: var(--paper-soft);
  border-radius: var(--r-lg);
  padding: 28px 30px;
  /* Un liseré citron à gauche : les deux angles de test se lisent comme deux
     volets d'une même prestation, pas comme deux services séparés. */
  border-left: 3px solid var(--lime-500);
}
.xp-pentest-tag {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.xp-pentest-card h3 { margin-bottom: 12px; }
.xp-pentest-card p { max-width: 52ch; }

.xp-pentest-cve { max-width: 70ch; }
.xp-pentest-cve h3 { margin-bottom: 14px; }
.xp-pentest-cve p + p { margin-top: 14px; }
.xp-pentest-cve code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background: var(--paper-alt);
  padding: 2px 7px;
  border-radius: 5px;
  color: var(--navy-700);
}
.xp-pentest-note {
  margin-top: 20px;
  padding: 18px 22px;
  background: var(--lime-050);
  border-radius: var(--r-md);
  color: var(--ink);
}

.xp-pentest-livrable { max-width: 70ch; margin-top: 40px; }
.xp-pentest-livrable h3 { margin-bottom: 12px; }

@media (max-width: 900px) {
  .xp-pentest { padding: 56px 0 60px; }
  .xp-pentest-grid { grid-template-columns: 1fr; gap: 18px; }
  .xp-pentest-card { padding: 24px 22px; }
  .xp-pentest-note { padding: 16px 18px; }
}

/* ==========================================================================
   Robots 3D dans les pages — bandeau actualités et FAQ
   ========================================================================== */
/* R3F pose pointer-events: auto en style inline sur son conteneur : sans ce
   passage en force, le canvas avalerait les clics de la section. */
.blog-hero-robot, .blog-hero-robot *,
.faq-hero-robot, .faq-hero-robot * { pointer-events: none !important; }

/* ---- Bandeau « Actualités et conseils » ---------------------------------- */
.blog-hero--robot {
  background: var(--navy-700);
  padding: 56px 0 60px;
  overflow: hidden;
  /* Le bandeau d'origine est centré ; en deux colonnes il faut repasser à
     gauche, sinon le texte flotte au milieu de sa colonne. */
  text-align: left;
}
.blog-hero--robot h1,
.blog-hero--robot p { margin-inline: 0; }
.blog-hero-inner {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
  align-items: center;
}
.blog-hero--robot h1 { color: var(--white); margin-bottom: 16px; }
.blog-hero--robot .eyebrow { margin-bottom: 14px; }
.blog-hero-lead {
  color: rgba(255,255,255,.78);
  font-size: 1.06rem;
  max-width: 58ch;
  margin-bottom: 26px;
}
.blog-hero-robot { width: 340px; height: 340px; justify-self: end; }

/* ---- En-tête de la FAQ --------------------------------------------------- */
.faq-hero { background: var(--paper-soft); padding: 52px 0 60px; }
.faq-hero-inner {
  display: grid;
  grid-template-columns: 1fr 320px;
  column-gap: 40px;
  row-gap: 0;
  align-items: center;
}
.faq-hero-copy h1 { margin-bottom: 14px; }
.faq-hero-lead { font-size: 1.06rem; max-width: 60ch; margin-bottom: 26px; }
/* Aligné en bas plutôt qu'au centre, et descendu de 24 px de plus : le bas
   du canevas est vide sur une quarantaine de pixels sous l'ombre portée, et
   sans ce rattrapage la pointe de la bulle viserait ce vide. */
.faq-hero-robot {
  width: 320px; height: 320px;
  justify-self: end;
  align-self: end;
  margin-bottom: -24px;
}

/* ---- Champ de question --------------------------------------------------- */
.robot-ask { max-width: 560px; }
.robot-ask-row { display: flex; gap: 10px; }
.robot-ask input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 12px 18px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--paper);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.robot-ask input:focus { border-color: var(--navy-700); outline: none; }
.robot-ask input::placeholder { color: var(--ink-faint); }

.robot-suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.robot-suggestions-label { font-size: 0.86rem; color: var(--ink-faint); }
.robot-suggestion {
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink-soft);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-size: 0.86rem;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.robot-suggestion:hover { border-color: var(--navy-700); color: var(--navy-700); }
.robot-suggestion:active { transform: scale(0.97); }

/* ---- Bulle de réponse ---------------------------------------------------- */
/* Une bulle de parole, pas une carte : la pointe part vers le robot, et
   l'apparition s'ouvre depuis cette pointe plutôt que depuis le centre —
   sinon la bulle semble surgir d'ailleurs que de sa bouche. */
.robot-reponse {
  display: none;
  position: relative;
  grid-column: 1 / -1;
  margin: 12px 0 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--lime-500);
  border-radius: 20px;
  box-shadow: var(--shadow-md);
  padding: 24px 28px;
  transform-origin: calc(100% - 161px) 0;
  animation: robotReponseIn var(--dur-base) var(--ease-out) both;
}
.robot-reponse.is-visible { display: block; }
/* Quand l'assistant passe la main, le liseré cesse d'être « validant ». */
.robot-reponse--relais { border-left-color: var(--navy-400); }

/* La pointe : deux triangles superposés, l'un pour le liseré, l'autre pour
   le fond. Le second recouvre le premier sur un pixel afin qu'aucune ligne
   ne barre l'intérieur de la bulle. */
.robot-reponse::before,
.robot-reponse::after {
  content: "";
  position: absolute;
  /* 161 px : la tête du robot, mesurée depuis le bord droit du bandeau. */
  right: 161px;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
}
.robot-reponse::before {
  top: -15px;
  border-bottom: 15px solid var(--line);
}
.robot-reponse::after {
  top: -13px;
  border-bottom: 14px solid var(--paper);
}

@keyframes robotReponseIn {
  from { opacity: 0; transform: scale(0.97) translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.robot-reponse-titre {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: var(--navy-700);
  margin-bottom: 10px;
}
.robot-reponse p + p { margin-top: 10px; }
.robot-reponse-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.robot-reponse .faq-a-lien { margin-top: 14px; }

/* ---- Liste des questions ------------------------------------------------- */
.faq-section { padding: 64px 0 80px; }
.faq-section h2 { margin-bottom: 10px; }
.faq-intro { max-width: 62ch; margin-bottom: 34px; }
.faq-list { max-width: 820px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item h3 { margin: 0; font-size: inherit; font-weight: inherit; }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 20px 4px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy-700);
  transition: color var(--dur-fast) var(--ease-out);
}
.faq-q:hover { color: var(--navy-500); }
.faq-chevron {
  flex-shrink: 0;
  color: var(--ink-faint);
  transition: transform var(--dur-base) var(--ease-out);
}
.faq-item.is-open .faq-chevron { transform: rotate(180deg); }

/* Hauteur mesurée en JS : voir robot-faq.js. La transition porte sur
   max-height, seule propriété animable de façon fiable ici. */
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-base) var(--ease-out);
}
.faq-a-inner { padding: 0 4px 24px; max-width: 68ch; }
.faq-a-inner p + p { margin-top: 12px; }
.faq-a-lien {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--navy-700);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
}
.faq-a-lien:hover { border-bottom-color: var(--navy-700); }

/* Question désignée par l'assistant : un fond citron très pâle qui s'efface. */
.faq-item.is-cible { animation: faqCible 2.2s var(--ease-out) both; }
@keyframes faqCible {
  0%, 60% { background: var(--lime-050); }
  100% { background: transparent; }
}

.faq-relais {
  max-width: 820px;
  margin-top: 44px;
  padding: 30px 34px;
  background: var(--paper-soft);
  border-radius: var(--r-lg);
}
.faq-relais h3 { margin-bottom: 8px; }
.faq-relais-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

@media (max-width: 900px) {
  /* Sous 900px le robot n'est pas monté du tout (voir le script de la page) :
     plus de place, et pas de boucle de rendu inutile sur téléphone. */
  .blog-hero-robot, .faq-hero-robot { display: none; }
  .blog-hero-inner, .faq-hero-inner { grid-template-columns: 1fr; }
  /* Plus de robot à l'écran : une bulle sans personne pour la dire n'a plus
     de sens, elle redevient une simple réponse. */
  .robot-reponse { margin-top: 24px; }
  .robot-reponse::before, .robot-reponse::after { display: none; }

  /* Au doigt : mesurées à 31px pour les suggestions et 27px pour les liens de
     réponse. Le rembourrage les amène au-dessus de 40px sans changer leur
     dessin sur grand écran. */
  .robot-suggestion { padding: 11px 15px; }
  .faq-a-lien { display: inline-flex; align-items: center; padding: 8px 0; }
}

@media (max-width: 480px) {
  /* Sur un écran étroit, 28 px de marge intérieure de chaque côté mangent un
     sixième de la largeur de lecture. */
  .robot-reponse { padding: 20px 18px; border-radius: 16px; }
  .robot-ask-row { flex-direction: column; }
  .robot-ask-row .btn { width: 100%; }
  .faq-q { font-size: 0.99rem; padding: 18px 2px; }
  .faq-relais { padding: 24px 22px; }
}


/* ==========================================================================
   En-tête intermédiaire
   ==========================================================================
   Mesuré : la barre complète réclame 1282px, et 1140px une fois compactée
   (téléphone réduit à son icône, écarts resserrés). D'où ces deux seuils —
   ils ont été relevés quand l'entrée « ESN » est venue allonger le menu. */
@media (min-width: 1181px) and (max-width: 1290px) {
  .main-nav ul { gap: 22px; }
  .header-actions { gap: 12px; }
  .header-actions .header-phone span { display: none; }
  .header-actions .btn-sm { padding: 8px 14px; }
}

/* ==========================================================================
   Navigation repliée
   ==========================================================================
   Point de rupture volontairement plus large que celui des mises en page :
   même compactée, la barre horizontale réclame 1140px. En dessous, on bascule
   sur le menu burger. */
/* Le document ne défile plus derrière le menu ouvert. */
body.nav-ouvert { overflow: hidden; }

@media (max-width: 1180px) {
  .main-nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: var(--white);
    padding: 28px 24px;
    transform: translateX(100%);
    transition: transform var(--dur-base) var(--ease-out);
    overflow-y: auto;
    /* Pas de -webkit-overflow-scrolling: touch — obsolète depuis iOS 13, et il
       isole le panneau sur sa propre couche, d'où des restes d'affichage
       (texte figé, fond non repeint) quand on fait défiler un élément fixe. */
    /* Arrivé en butée, le défilement s'arrête au panneau au lieu d'entraîner
       la page derrière — sans quoi le menu paraît glisser sous le doigt. */
    overscroll-behavior: contain;
  }
  /* La barre d'adresse mobile fait varier la hauteur de la fenêtre : dvh suit
     ce mouvement, 100% ne le suit pas et laisse le bas du menu hors d'écran. */
  @supports (height: 100dvh) {
    .main-nav { bottom: auto; height: calc(100dvh - var(--header-h)); }
  }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav ul { flex-direction: column; gap: 4px; }
  .main-nav a { display: block; padding: 14px 6px; font-size: 1.05rem; border-bottom: 1px solid var(--line); color: var(--navy-700); }
  .main-nav a:hover { color: var(--lime-700); }

  /* Pas de survol au doigt : les trois chapitres deviennent des listes
     dépliables. Dépliées en permanence, elles faisaient 23 liens à faire
     défiler ; repliées, le menu tient sans défilement.
     Le sélecteur reprend la spécificité de la règle de base
     (.main-nav .nav-dropdown) pour l'emporter au lieu de perdre en silence. */
  .nav-item-dropdown > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .nav-dropdown-caret {
    flex: none;
    color: var(--navy-500);
    transition: transform var(--dur-base) var(--ease-out);
  }
  /* Le chapitre ouvert se marque par le poids et le chevron retourné. Le lime
     de survol (2,67:1 sur blanc) reste acceptable le temps d'un survol, pas
     comme état permanent : ici c'est du navy, 18:1. */
  .nav-item-dropdown.is-expanded > a {
    color: var(--navy-900);
    font-weight: 700;
  }
  .nav-item-dropdown.is-expanded > a .nav-dropdown-caret {
    transform: rotate(180deg);
    color: var(--navy-900);
  }
  .main-nav .nav-dropdown {
    position: static;
    width: 100%;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none;
    background: transparent;
    /* The desktop panel's border/radius would draw a stray box around the
       inline sublist here — the panel styling doesn't apply on touch. */
    border: none;
    border-radius: 0;
    padding: 0 0 0 14px;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--dur-base) var(--ease-out);
  }
  /* Le survol ouvre le panneau sur grand écran ; au doigt il se déclenche à
     tort au moindre appui, d'où cette remise à zéro explicite. */
  .main-nav .nav-item-dropdown:hover .nav-dropdown,
  .main-nav .nav-item-dropdown:focus-within .nav-dropdown {
    opacity: 1; visibility: visible; transform: none;
  }
  /* 12 expertises à ~41 px : le plafond doit dépasser le contenu réel, sinon
     la liste se coupe. Il ne sert qu'à rendre la transition animable. */
  .main-nav .nav-item-dropdown.is-expanded > .nav-dropdown {
    max-height: 680px;
    padding-bottom: 6px;
  }
  .nav-dropdown a { padding: 10px 6px; font-size: 0.95rem; color: var(--ink-soft); border-bottom: none; }

  .header-actions { display: none; }
  .nav-toggle { display: flex; }

  .nav-mobile-extra {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
  }
  .nav-mobile-extra .header-phone {
    justify-content: center;
    font-size: 1rem;
    padding: 10px;
    color: var(--navy-700);
  }
  .nav-mobile-extra .header-phone svg { color: var(--navy-700); }
  .nav-mobile-extra .btn { width: 100%; }
}

/* ==========================================================================
   Print
   ========================================================================== */
@media print {
  .site-header, .hero-bg, .hero-mac3d, .nav-toggle,
  .hero-depth3d, .logo-3d, .packs-depth3d { display: none; }
}

/* ==========================================================================
   Pré-audit express (/pre-audit/)
   ========================================================================== */
.pa-hero {
  background: var(--navy-700);
  padding: 56px 0 60px;
}
.pa-hero h1 { color: var(--white); margin-bottom: 16px; }
.pa-hero-lead {
  color: rgba(255,255,255,.78);
  font-size: 1.06rem;
  max-width: 62ch;
}

.pa-section { background: var(--paper-soft); padding: 44px 0 80px; }
.pa-card {
  max-width: 720px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: 34px 34px 32px;
  /* L'en-tête est collant : sans cette marge, le haut de la carte se glisse
     dessous à chaque changement de question. */
  scroll-margin-top: calc(var(--header-h) + 18px);
}
.pa-title {
  font-family: "Poppins", sans-serif;
  font-size: 1.42rem;
  font-weight: 700;
  color: var(--navy-700);
  margin-bottom: 8px;
}
.pa-sub { color: var(--ink-soft); font-size: 0.98rem; margin-bottom: 26px; }

/* ---- Choix du profil ------------------------------------------------------ */
.pa-profils {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
}
.pa-profil {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 22px 22px 20px;
  text-align: left;
  background: var(--paper);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.pa-profil:hover {
  border-color: var(--navy-700);
  background: var(--lime-050);
  box-shadow: var(--shadow-sm);
}
.pa-profil:active { transform: scale(0.985); }
.pa-profil-icone { color: var(--navy-700); margin-bottom: 6px; }
.pa-profil-titre {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 1.06rem;
  color: var(--navy-700);
}
.pa-profil-sous { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.45; }

.pa-rassure {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  padding: 16px 0 0;
  margin: 0;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.pa-rassure li { display: flex; align-items: center; gap: 7px; }
.pa-rassure li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--lime-600);
  flex: none;
}

/* ---- Bandeau du questionnaire --------------------------------------------- */
.pa-quiz-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pa-badge-profil {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy-700);
  background: var(--lime-050);
  border: 1px solid var(--lime-100);
  border-radius: var(--r-pill);
  padding: 4px 12px;
}
.pa-changer {
  background: none;
  border: 0;
  padding: 2px 4px;
  font-family: inherit;
  font-size: 0.86rem;
  color: var(--ink-faint);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.pa-changer:hover { color: var(--navy-700); }

.pa-progress-track {
  height: 6px;
  background: var(--line);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin: 18px 0 6px;
}
.pa-progress-fill {
  height: 100%;
  width: 10%;
  background: var(--navy-700);
  border-radius: var(--r-pill);
  transition: width var(--dur-slow) var(--ease-out);
}
.pa-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin-bottom: 26px;
}

/* ---- Une question --------------------------------------------------------- */
.pa-step { display: none; }
.pa-step.active { display: block; animation: paFade var(--dur-base) var(--ease-out) both; }
@keyframes paFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.pa-q-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.pa-qnum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 27px; height: 27px;
  border-radius: 50%;
  background: var(--navy-700);
  color: var(--lime-500);
  font-weight: 700;
  font-size: 0.82rem;
}
.pa-q-title {
  font-family: "Poppins", sans-serif;
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--navy-700);
  margin-top: 1px;
}
.pa-q-helper { font-size: 0.88rem; color: var(--ink-soft); margin: 0 0 16px 37px; }
.pa-q-helper:empty { display: none; }
.pa-mainfield { margin: 0 0 14px 37px; }
.pa-field--decale { margin: 16px 0 4px 37px; }

/* Boutons de réponse principaux : le choix retenu prend le liseré navy et un
   fond citron très pâle — le citron pur n'a aucun contraste sur du blanc. */
.pa-options { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 6px 37px; }
.pa-opt { position: relative; }
.pa-opt input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pa-opt label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 17px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--paper);
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.pa-opt label:hover { border-color: var(--navy-400); }
.pa-opt .dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  flex: none;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.pa-opt input:checked + label {
  border-color: var(--navy-700);
  background: var(--lime-050);
  color: var(--navy-700);
  font-weight: 600;
}
.pa-opt input:checked + label .dot { background: var(--navy-700); border-color: var(--navy-700); }
.pa-opt input:focus-visible + label { outline: 2px solid var(--navy-700); outline-offset: 2px; }

/* ---- Questions de relance -------------------------------------------------- */
.pa-followups {
  display: none;
  margin: 16px 0 4px 37px;
  padding: 18px 18px 6px;
  background: var(--paper-soft);
  border-left: 3px solid var(--lime-500);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.pa-followups.show { display: block; animation: paFade var(--dur-base) var(--ease-out) both; }

.pa-field { margin-bottom: 16px; }
.pa-field-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy-700);
  margin-bottom: 7px;
}
.pa-field-note { font-size: 0.82rem; color: var(--ink-faint); margin: -4px 0 8px; }

.pa-chiplist { display: flex; flex-wrap: wrap; gap: 8px; }
.pa-chip { position: relative; }
.pa-chip input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pa-chip label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1.3px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: 0.86rem;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.pa-chip label:hover { border-color: var(--navy-400); }
.pa-chip .box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  flex: none;
  border: 1.5px solid var(--line-strong);
  border-radius: 3px;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.pa-chip input:checked + label {
  border-color: var(--navy-700);
  background: var(--lime-050);
  color: var(--navy-700);
  font-weight: 600;
}
.pa-chip input:checked + label .box { background: var(--navy-700); border-color: var(--navy-700); }
.pa-chip input:checked + label .box::after {
  content: "";
  width: 4px; height: 8px;
  border-right: 2px solid var(--lime-500);
  border-bottom: 2px solid var(--lime-500);
  transform: rotate(45deg) translate(-1px, -1px);
}
.pa-chip input:focus-visible + label { outline: 2px solid var(--navy-700); outline-offset: 2px; }

.pa-text {
  width: 100%;
  padding: 10px 12px;
  border: 1.3px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-family: inherit;
  font-size: 0.94rem;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.pa-text:focus {
  outline: none;
  border-color: var(--navy-700);
  box-shadow: 0 0 0 3px var(--lime-050);
}

.pa-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
/* Le bouton « Précédent » disparaît sans se replier : la première question ne
   doit pas décaler les deux autres commandes. */
.pa-nav .btn:disabled { opacity: 0; pointer-events: none; }
.pa-nav #paNext:disabled { opacity: 1; }

/* ---- La synthèse ----------------------------------------------------------- */
#pa-results { animation: paFade var(--dur-slow) var(--ease-out) both; }
.pa-result-head { text-align: center; margin-bottom: 24px; }
.pa-score-ring {
  position: relative;
  width: 104px; height: 104px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: conic-gradient(var(--pa-jauge, var(--navy-700)) calc(var(--score, 0) * 1%), var(--line) 0);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pa-score-ring[data-niveau="ok"] { --pa-jauge: #1c7a4a; }
.pa-score-ring[data-niveau="warn"] { --pa-jauge: #8a5a00; }
.pa-score-ring[data-niveau="bad"] { --pa-jauge: #b3261e; }
.pa-score-ring::before {
  content: "";
  position: absolute;
  inset: 9px;
  background: var(--paper);
  border-radius: 50%;
}
.pa-score-num {
  position: relative;
  font-family: "Poppins", sans-serif;
  font-size: 1.36rem;
  font-weight: 800;
  color: var(--navy-700);
}
.pa-result-title {
  font-family: "Poppins", sans-serif;
  font-size: 1.24rem;
  font-weight: 700;
  color: var(--navy-700);
  margin-bottom: 4px;
}
.pa-result-sub { font-size: 0.94rem; color: var(--ink-soft); }

.pa-risk-list { list-style: none; margin: 0 0 26px; padding: 0; }
.pa-risk-item {
  display: flex;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.96rem;
}
.pa-risk-item:last-child { border-bottom: none; }
.pa-risk-label { color: var(--ink); }
.pa-risk-detail { font-size: 0.85rem; color: var(--ink-soft); margin-top: 2px; }
.pa-risk-flag {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 21px; height: 21px;
  margin-top: 2px;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 800;
}
.pa-risk-flag.ok { background: #e7f4ec; color: #1c7a4a; }
.pa-risk-flag.warn { background: #fbe9d7; color: #8a5a00; }
.pa-risk-flag.bad { background: #fdecea; color: #b3261e; }
.pa-risk-flag.info { background: var(--paper-alt); color: var(--navy-700); }

.pa-envoi { border-top: 1px solid var(--line); padding-top: 24px; }
.pa-envoi-note { font-size: 0.86rem; color: var(--ink-soft); margin: 4px 0 16px; }
.pa-cta-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pa-erreur { font-size: 0.85rem; color: var(--danger); margin-top: 8px; }
.pa-erreur a { color: var(--danger); }
.pa-sent-badge {
  display: inline-block;
  margin-top: 14px;
  padding: 9px 15px;
  border-radius: var(--r-sm);
  background: #e7f4ec;
  color: #1c7a4a;
  font-size: 0.88rem;
  font-weight: 600;
}
.pa-sent-badge::before { content: "✓ "; }

.pa-suite {
  margin-top: 28px;
  padding: 24px 24px 22px;
  background: var(--paper-soft);
  border-radius: var(--r-md);
}
.pa-suite h3 { font-size: 1.04rem; color: var(--navy-700); margin-bottom: 8px; }
.pa-suite p { font-size: 0.94rem; color: var(--ink-soft); margin-bottom: 16px; }

@media (max-width: 620px) {
  .pa-card { padding: 24px 18px 22px; border-radius: var(--r-md); }
  .pa-profils { grid-template-columns: 1fr; }
  /* Sur écran étroit, le retrait de 37 px sous la pastille numérotée coûte un
     dixième de la largeur : les réponses repassent au bord. */
  .pa-q-helper, .pa-mainfield, .pa-options, .pa-followups, .pa-field--decale { margin-left: 0; }
  .pa-followups { padding: 16px 14px 4px; }
  .pa-q-title { font-size: 1rem; }
  .pa-nav { flex-direction: row; }
  .pa-nav .btn { flex: 1; }
  .pa-cta-row .btn { flex: 1 1 auto; }
}


/* ==========================================================================
   Au revoir — petit robot en bas de la page d'accueil
   ========================================================================== */
.merci {
  background: var(--paper-soft);
  padding: 10px 0 0;
  overflow: hidden;
}
.merci-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.merci-robot { width: 200px; height: 200px; flex: none; }
/* Le <Canvas> de React Three Fiber se pose un pointer-events en ligne : sans
   ce !important, il avalerait les clics de la zone. */
.merci-robot, .merci-robot * { pointer-events: none !important; }

.merci-bulle {
  position: relative;
  /* Remontée à hauteur de tête. Relevé sur un rendu : dans un canevas de
     200px, le centre de la tête est à 54px du haut, soit 46px au-dessus du
     centre du canevas. La marge basse vaut donc le double, l'alignement
     centré ne remontant l'élément que de la moitié. Et une marge gauche
     négative rattrape le vide que le robot laisse à droite de son canevas. */
  margin: 0 0 92px -18px;
  padding: 11px 19px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--navy-700);
  white-space: nowrap;
}
/* La pointe part vers la gauche, vers le robot. Deux triangles superposés :
   le liseré, puis le fond qui le recouvre d'un pixel. */
.merci-bulle::before,
.merci-bulle::after {
  content: "";
  position: absolute;
  top: 50%;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}
.merci-bulle::before {
  left: -10px;
  margin-top: -9px;
  border-right: 10px solid var(--line);
}
.merci-bulle::after {
  left: -8px;
  margin-top: -8px;
  border-right: 9px solid var(--paper);
}

@media (max-width: 600px) {
  /* Il doit rester visible sur téléphone : on le réduit plutôt que de le
     masquer. À 130px, la tête tombe à 51px du haut, soit 14px au-dessus du
     centre. */
  .merci-robot { width: 130px; height: 130px; }
  .merci-bulle {
    margin: 0 0 60px -12px;
    padding: 9px 14px;
    font-size: 0.86rem;
    white-space: normal;
    max-width: 42vw;
  }
}


/* ======================================================================
   Bandes photo — une respiration visuelle entre deux longues sections de
   texte. Purement décoratives : l'alt reste vide, toute l'information est
   portée par le texte alentour.
   ====================================================================== */
.photo-band {
  position: relative;
  height: 320px;
  overflow: hidden;
  /* Fond tenu avant l'arrivée de l'image : pas de flash blanc. */
  background: var(--navy-700);
}
.photo-band img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Voile navy : rattache la photo à la palette et évite qu'une image claire
   ne perce un trou blanc au milieu de la page. */
.photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(32, 38, 49, 0.16), rgba(32, 38, 49, 0.40));
  pointer-events: none;
}
@media (max-width: 900px) {
  .photo-band { height: 240px; }
}
@media (max-width: 560px) {
  /* Plus basse sur téléphone : une bande décorative ne doit pas coûter un
     écran entier de défilement. */
  .photo-band { height: 170px; }
}


/* ======================================================================
   Métiers ESN — beaucoup d'intitulés de poste pour peu de place. Des puces
   qui s'enroulent restent lisibles sans allonger la page, là où des blocs
   descriptifs auraient doublé la hauteur de la section.
   ====================================================================== */
.esn-jobs { padding: 80px 0; background: var(--paper-alt); }
.esn-jobs h2 { margin-bottom: 34px; }
.esn-familles { display: flex; flex-direction: column; gap: 30px; }
.esn-famille h3 {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.esn-metiers { display: flex; flex-wrap: wrap; gap: 10px; }
.esn-metiers li {
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--lime-500);
  border-radius: 4px;
  background: var(--white);
  font-size: 0.93rem;
  font-weight: 500;
  /* navy-700 sur blanc : 15,2:1, largement au-dessus du seuil AA. */
  color: var(--navy-700);
}
@media (max-width: 640px) {
  .esn-jobs { padding: 56px 0; }
  .esn-metiers li { font-size: 0.88rem; padding: 8px 13px; }
}


/* ======================================================================
   Barre d'onglets centrée. En flex avec « space-between », la barre se
   calait sur la largeur du logo à gauche et du bloc téléphone à droite,
   qui ne sont pas de même largeur : elle finissait 208 px trop à droite.
   Trois colonnes dont les deux extrêmes sont égales placent la barre au
   centre réel de l'en-tête, quelles que soient les largeurs des côtés.
   Bornée au-dessus du seuil du menu déroulant : en dessous, la barre est
   un panneau fixe et la disposition en flex doit rester telle quelle.
   ====================================================================== */
@media (min-width: 1181px) {
  .header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  /* Sans « start », la grille étirerait le logo sur tout le tiers gauche et
     rendrait cette zone vide cliquable. */
  .logo { margin-right: 0; justify-self: start; }
  .header-actions { justify-self: end; }
}


/* La bande datacenter est insérée au milieu de la section « Pourquoi nous »,
   juste après la grille de cartes — laquelle n'a aucune marge basse : la
   photo venait donc coller au bord des cartes. Les 72 px repris ici sont
   ceux qui existent déjà sous la bande, l'espacement devient symétrique.
   Les deux autres bandes séparent des sections qui ont leur propre
   respiration (70 px avant, 88 px après) et n'ont rien à corriger. */
.photo-band--datacenter { margin-top: 72px; }
@media (max-width: 560px) {
  .photo-band--datacenter { margin-top: 48px; }
}


/* ======================================================================
   Nos clients — bandeau défilant + grille complète.
   Les logos viennent de sources hétérogènes : certains PNG transparents,
   certains JPEG à fond blanc. Une tuile blanche sous chacun les met au
   même niveau, quel que soit le fichier d'origine.
   ====================================================================== */
.clients { padding: 80px 0; background: var(--paper); overflow: hidden; }
.clients .section-head { margin-bottom: 0; }

/* Le titre est un bouton : il déplie la grille. Il doit rester un h2 pour
   la structure du document, d'où le bouton à l'intérieur. */
.clients-titre { margin: 0; }
.clients-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  /* Le titre est la seule commande de la section : sa zone tactile doit
     atteindre les 44 px recommandés, que la hauteur du texte ne donne pas. */
  padding: 8px 6px;
  margin: -8px -6px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: color var(--dur-fast) var(--ease-out);
}
.clients-toggle:hover { color: var(--navy-500); }
.clients-toggle svg {
  flex: none;
  color: var(--navy-500);
  transition: transform var(--dur-base) var(--ease-out);
}
.clients-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.clients-bandeau {
  position: relative;
  margin-top: 34px;
  overflow: hidden;
  /* Les logos s'effacent aux deux bords au lieu d'apparaître d'un coup. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.clients-piste { display: flex; gap: 18px; width: max-content; }
/* La classe n'est posée qu'une fois la piste dupliquée par clients.js :
   animer une piste simple laisserait un grand vide à mi-course. */
.clients-piste.is-anime { animation: clients-defile linear infinite; }
.clients-bandeau:hover .clients-piste.is-anime { animation-play-state: paused; }
@keyframes clients-defile {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.client-tuile {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: var(--white);
}
.client-tuile img {
  /* Dimensions en pixels, jamais en pourcentage. Dans une piste dont la
     hauteur dépend de son contenu, « max-height: 100% » n'a pas de
     référence : la règle est ignorée, l'image se cale sur sa largeur et
     déborde de sa case — c'est ce qui coupait les logos.
     object-fit: contain garantit qu'aucune marque n'est recadrée ni
     déformée : elle est mise en boîte, avec du blanc autour. */
  width: 152px;
  height: 78px;
  object-fit: contain;
}

.clients-tous {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 18px;
  margin-top: 34px;
}

@media (prefers-reduced-motion: reduce) {
  /* Mouvement désactivé côté système : le bandeau devient une rangée que
     l'on fait défiler soi-même. */
  .clients-piste.is-anime { animation: none; }
  .clients-bandeau { overflow-x: auto; }
}
@media (max-width: 640px) {
  .clients { padding: 56px 0; }
  .client-tuile { padding: 11px; }
  .client-tuile img { width: 120px; height: 62px; }
  .clients-tous { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
}

/* ======================================================================
   Affiche SecuriScan — ouverture en grand depuis l'écran du MacBook 3D.
   Le cadre part de la position du portable (FLIP piloté par securiscan.js)
   pour que la page semble sortir de l'écran plutôt que d'apparaître
   par-dessus.
   ====================================================================== */
body.securiscan-ouvert { overflow: hidden; }

.securiscan-couche {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  padding: 24px;
}
.securiscan-fond {
  position: absolute;
  inset: 0;
  background: rgba(12, 14, 19, 0.72);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.securiscan-couche.is-ouvert .securiscan-fond { opacity: 1; }

.securiscan-cadre {
  position: relative;
  width: min(1280px, 100%);
  /* Le format de l'affiche, pour qu'elle ne soit ni rognée ni étirée. Elle
     est désormais dessinée au format de l'écran du portable (1,46 : 0,86),
     ce qui évite tout recadrage entre la texture et la page ouverte. */
  aspect-ratio: 1.46 / 0.86;
  max-height: calc(100vh - 48px);
  border-radius: 14px;
  overflow: hidden;
  background: #0f1117;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
  transform-origin: center;
  transition: transform 420ms var(--ease-out), opacity 260ms var(--ease-out);
}
.securiscan-page {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.securiscan-fermer {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(15, 17, 23, 0.7);
  color: #fff;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.securiscan-fermer:hover { background: rgba(15, 17, 23, 0.95); }

@media (prefers-reduced-motion: reduce) {
  .securiscan-cadre, .securiscan-fond { transition: none; }
}
@media (max-width: 720px) {
  .securiscan-couche { padding: 12px; }
  .securiscan-cadre { border-radius: 10px; }
  .securiscan-fermer { top: 8px; right: 8px; }
}


/* Le canvas doit recevoir les clics : son conteneur est en pointer-events:
   none pour ne pas bloquer le héros alentour, et sans cette ligne le clic
   sur l'écran du portable n'atteint jamais Three.js. */
.hero-mac3d canvas { pointer-events: auto; }


/* Commande réservée au clavier : hors écran en permanence, ramenée à la vue
   dès qu'elle prend le focus. Même mécanique que .skip-link — pas de
   display:none ni de visibility:hidden, qui la sortiraient de l'ordre de
   tabulation et la rendraient inatteignable. */
.lien-clavier {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--lime-500);
  color: var(--navy-700);
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 12px 20px;
  border: 0;
  border-radius: 0 0 8px 0;
  z-index: 1000;
  cursor: pointer;
}
.lien-clavier:focus { left: 0; }

/* Mentions légales : la ligne d'attribution du générateur, en fin de page.
   Discrète, elle ne doit pas se lire comme un paragraphe du texte légal. */
/* Mentions légales : une vraie liste à puces. Le site supprime les marqueurs
   partout (ul { list-style: none }) et les articles de blog les remplacent par
   des pictos SVG — inadaptés à l'énumération de droits, où l'on attend une
   liste sobre et non une check-list. */
.article-body .ml-liste { display: block; margin: 0 0 26px; padding-left: 22px; list-style: disc; }
.article-body .ml-liste li { display: list-item; font-size: 1.02rem; color: var(--ink); margin-bottom: 8px; }
.article-body .ml-liste li::marker { color: var(--lime-700); }

.ml-source {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
  color: var(--ink-faint);
}

/* ===========================================================================
   Catalogues — cartes de documents téléchargeables
   Reprend le dessin des tuiles d'expertise, mais sur fond clair : ces cartes
   ouvrent un PDF, pas une page du site, et cette différence doit se voir.
   =========================================================================== */
.documents { padding: 76px 0 88px; }
.doc-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.doc-carte {
  display: flex; flex-direction: column;
  padding: 28px 26px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.doc-carte:hover, .doc-carte:focus-visible {
  transform: translateY(-4px);
  border-color: var(--lime-500);
  box-shadow: var(--shadow-md);
}
.doc-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-bottom: 18px;
  border-radius: var(--r-md);
  background: var(--navy-700); color: var(--lime-500);
}
.doc-carte:hover .doc-icone { background: var(--lime-500); color: var(--navy-700); }
.doc-carte h3 { font-size: 1.12rem; margin-bottom: 8px; color: var(--navy-700); }
.doc-carte p { font-size: 0.95rem; margin: 0 0 10px; }
.doc-meta {
  font-family: "Poppins", sans-serif; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint);
  margin: 0 0 18px !important;
}
.doc-lien {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 0.94rem; color: var(--lime-700);
}
.doc-carte:hover .doc-lien svg { transform: translateY(2px); }
.doc-lien svg { transition: transform var(--dur-fast) var(--ease-out); }

@media (max-width: 900px) { .doc-grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .doc-grille { grid-template-columns: 1fr; } .documents { padding: 56px 0 64px; } }