/*
 * SpaceNet — feuille de style unique (générée).
 *
 * NE PAS MODIFIER CE FICHIER. Il est produit par tools/build-css.sh
 * à partir de assets/css/src/ dans cet ordre :
 *   - src/tokens.css
 *   - src/main.css
 *   - src/v8.css
 *   - src/v81.css
 *   - src/v82.css
 *   - src/v83.css
 *
 * Généré le 2026-10-27 00:25 UTC
 */


/* ===== src/tokens.css ===== */
/*
 * SpaceNet — tokens de design.
 *
 * Source unique de vérité pour les couleurs, la typographie et les espacements.
 * Elementor et les templates PHP consomment ces variables ; aucune valeur
 * littérale ne doit être écrite ailleurs.
 */

:root {
  /* Fonds et surfaces */
  --sn-ink: #05090F;
  --sn-panel: #0A1320;
  --sn-panel-2: #0F1C2B;

  /* Filets */
  --sn-line: #1B2E43;
  --sn-line-soft: #142335;

  /* Accents */
  --sn-cyan: #2FDCE6;
  --sn-cyan-dim: #16A5B3;
  --sn-blue: #4C7DF0;

  /* Sémantique — distincte de l'accent de marque */
  --sn-ok: #3ECf8E;
  --sn-warn: #F4B13D;
  --sn-crit: #F2685C;

  /* Texte */
  --sn-text: #E7EFF8;
  --sn-muted: #8CA2BA;
  --sn-on-accent: #04222A;

  /* Typographie */
  --sn-display: "Sora", "Trebuchet MS", system-ui, sans-serif;
  --sn-body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --sn-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  /* Échelle typographique */
  --sn-fs-xs: 0.72rem;
  --sn-fs-sm: 0.875rem;
  --sn-fs-base: 1rem;
  --sn-fs-lg: 1.125rem;
  --sn-fs-xl: 1.375rem;
  --sn-fs-2xl: clamp(1.75rem, 4vw, 2.5rem);
  --sn-fs-3xl: clamp(2.375rem, 6.4vw, 4.25rem);

  /* Rythme */
  --sn-space-1: 0.5rem;
  --sn-space-2: 0.75rem;
  --sn-space-3: 1.125rem;
  --sn-space-4: 1.75rem;
  --sn-space-5: 2.75rem;
  --sn-space-6: 4.75rem;

  /* Grille */
  --sn-wrap: 1220px;
  --sn-gutter: 24px;

  /* Divers */
  --sn-radius: 16px;
  --sn-radius-sm: 8px;
  --sn-radius-lg: 18px;
  --sn-shadow-sm: 0 10px 32px rgba(0, 0, 0, 0.18);
  --sn-shadow-md: 0 22px 72px rgba(0, 0, 0, 0.28);
  --sn-ease: cubic-bezier(.2,.72,.2,1);
  --sn-focus: 2px solid var(--sn-cyan);
}

/*
 * Le site est volontairement mono-thème : fond marine profond, accents cyan,
 * conformément à la direction validée. Aucune inversion claire n'est prévue.
 * Le mode clair est une option chiffrée séparément ; s'il est commandé, les
 * tokens ci-dessus seront redéfinis sous [data-theme="light"] plutôt que
 * dupliqués dans les composants.
 */

/*
 * Polices locales.
 *
 * Servies depuis le serveur du site, jamais depuis Google : la même logique
 * que pour la mesure d'audience, et une requête tierce de moins.
 *
 * Six fichiers, sous-ensemble latin uniquement (U+0000-00FF, U+0152-0153…),
 * ce qui couvre entièrement le français — accents, cédille et la ligature œ
 * comprises — pour 120 Ko au total, mis en cache une fois pour toutes.
 *
 * Graisses retenues d'après l'usage réel de la feuille : 600 (14 occurrences),
 * 500 (4), 400 (2). Les graisses absentes sont synthétisées par le navigateur,
 * ce qui reste imperceptible à ces écarts.
 *
 * `font-display: swap` : le texte s'affiche immédiatement dans la police de
 * repli puis bascule. Jamais de page blanche en attendant une police.
 *
 * Sora et IBM Plex sont sous licence SIL Open Font 1.1 (voir
 * assets/fonts/LICENSE.txt) : redistribution autorisée.
 */

@font-face {
  font-family: "Sora";
  src: url("../fonts/sora-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("../fonts/sora-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/plex-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/plex-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/plex-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}


/* ===== src/main.css ===== */
/*
 * SpaceNet — styles du thème.
 * Toutes les couleurs proviennent de tokens.css. Aucune valeur littérale ici.
 */

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

body {
  margin: 0;
  background: var(--sn-ink);
  color: var(--sn-text);
  font-family: var(--sn-body);
  font-size: var(--sn-fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--sn-display);
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--sn-fs-3xl); font-weight: 600; }
h2 { font-size: var(--sn-fs-2xl); font-weight: 600; }
h3 { font-size: var(--sn-fs-xl); font-weight: 600; }

p { margin: 0 0 var(--sn-space-3); max-width: 68ch; }
a { color: var(--sn-cyan); }

:focus-visible {
  outline: var(--sn-focus);
  outline-offset: 3px;
  border-radius: 3px;
}

/*
 * Lien d'évitement : invisible jusqu'au focus clavier.
 *
 * z-index au-dessus de toute la pile (l'en-tête mobile fixe monte à 9990,
 * le tiroir de navigation à 9992) et position fixe pendant le focus, sinon
 * le lien apparaît hors écran dès que la page est défilée.
 */
.sn-skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 9999;
}
.sn-skip-link:focus,
.sn-skip-link:focus-visible {
  position: fixed;
  left: var(--sn-gutter);
  top: var(--sn-gutter);
  width: auto;
  height: auto;
  overflow: visible;
  padding: 0.7rem 1.1rem;
  border-radius: var(--sn-radius-sm, 6px);
  background: var(--sn-cyan);
  color: var(--sn-on-accent);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  outline: 3px solid var(--sn-on-accent);
  outline-offset: 2px;
}
.screen-reader-text:not(:focus) {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- grille ---------- */
.sn-wrap {
  width: 100%;
  max-width: var(--sn-wrap);
  margin-inline: auto;
  padding-inline: var(--sn-gutter);
}
.sn-section { padding-block: var(--sn-space-6); border-top: 1px solid var(--sn-line-soft); }
.sn-section:first-of-type { border-top: 0; }

.sn-grid { display: grid; gap: var(--sn-space-3); }
.sn-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sn-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .sn-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .sn-grid--3, .sn-grid--2 { grid-template-columns: 1fr; }
}

/* ---------- primitives ---------- */
.sn-eyebrow {
  margin: 0;
  font-family: var(--sn-mono);
  font-size: var(--sn-fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sn-cyan);
}
.sn-rail { border-left: 2px solid var(--sn-cyan); padding-left: var(--sn-space-4); }
.sn-lede { color: var(--sn-muted); font-size: var(--sn-fs-lg); max-width: 62ch; }

.sn-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--sn-radius);
  font-weight: 600;
  font-size: 0.94rem;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.sn-btn--primary { background: var(--sn-cyan); color: var(--sn-on-accent); }
.sn-btn--primary:hover { background: #5CE8EF; }
.sn-btn--ghost { border-color: var(--sn-line); color: var(--sn-text); }
.sn-btn--ghost:hover { border-color: var(--sn-cyan-dim); color: var(--sn-cyan); }
.sn-btn .sn-arw { transition: transform .15s; }
.sn-btn:hover .sn-arw { transform: translateX(3px); }

.sn-chip {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--sn-line);
  border-radius: 3px;
  font-family: var(--sn-mono);
  font-size: var(--sn-fs-xs);
  color: var(--sn-muted);
}
.sn-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }

/* ---------- en-tête ---------- */
.sn-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--sn-ink) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--sn-line-soft);
}
.sn-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sn-space-4);
  padding-block: 0.875rem;
}
.sn-brand { display: flex; align-items: center; gap: 0.7rem; margin-right: auto; text-decoration: none; color: inherit; }
.sn-brand__name { font-family: var(--sn-display); font-weight: 600; font-size: 1rem; display: block; }
.sn-brand__tag {
  display: block;
  margin-top: -2px;
  font-family: var(--sn-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sn-cyan-dim);
}

.sn-nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.sn-nav a {
  display: block;
  padding: 0.45rem 0.7rem;
  border-radius: 6px;
  font-size: 0.92rem;
  color: var(--sn-muted);
  text-decoration: none;
  transition: color .15s, background .15s;
}
.sn-nav a:hover { color: var(--sn-text); background: var(--sn-panel-2); }
.sn-nav .current-menu-item > a { color: var(--sn-cyan); }

.sn-lang { display: flex; flex: none; border: 1px solid var(--sn-line); border-radius: 999px; overflow: hidden; }
.sn-lang__item {
  padding: 0.3rem 0.75rem;
  font-family: var(--sn-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--sn-muted);
  text-decoration: none;
}
.sn-lang__item.is-current { background: var(--sn-cyan); color: var(--sn-on-accent); }

.sn-burger {
  display: none;
  padding: 0.45rem 0.7rem;
  background: none;
  border: 1px solid var(--sn-line);
  border-radius: 6px;
  color: var(--sn-text);
  cursor: pointer;
}
@media (max-width: 900px) {
  .sn-burger { display: inline-flex; }
  .sn-nav { display: none; flex-basis: 100%; }
  .sn-nav.is-open { display: block; }
  .sn-nav ul { flex-direction: column; padding-block: var(--sn-space-2); }
  .sn-header__inner { flex-wrap: wrap; }
  .sn-header__inner > .sn-btn { display: none; }
  .sn-nav__cta { padding: 0 0 var(--sn-space-2); }
}
/* Hors mobile, le bouton n'apparaît qu'une fois, à droite de l'en-tête. */
@media (min-width: 901px) { .sn-nav__cta { display: none; } }

/* ---------- cartes ---------- */
.sn-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: var(--sn-space-4) var(--sn-space-3) var(--sn-space-3);
  background: var(--sn-panel);
  border: 1px solid var(--sn-line-soft);
  border-top: 2px solid var(--sn-line);
  color: inherit;
  text-decoration: none;
  transition: border-top-color .18s, background .18s;
}
.sn-card:hover { border-top-color: var(--sn-cyan); background: var(--sn-panel-2); }
.sn-card__num { font-family: var(--sn-mono); font-size: var(--sn-fs-xs); letter-spacing: 0.14em; color: var(--sn-cyan-dim); }
.sn-card h3 { font-size: 1.15rem; line-height: 1.25; }
.sn-card p { flex: 1; margin: 0; color: var(--sn-muted); font-size: 0.93rem; }
.sn-card__more {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--sn-mono);
  font-size: var(--sn-fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sn-cyan);
}

/* ---------- listes ---------- */
.sn-ticks { display: flex; flex-direction: column; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.sn-ticks li { display: grid; grid-template-columns: 16px 1fr; gap: 0.75rem; color: var(--sn-muted); }
.sn-ticks li::before {
  content: "";
  width: 7px; height: 7px;
  margin-top: 0.55rem;
  background: var(--sn-cyan);
  transform: rotate(45deg);
}

/* ---------- méta d'article ---------- */
.sn-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 0 0 0.7rem;
  font-family: var(--sn-mono);
  font-size: var(--sn-fs-xs);
  letter-spacing: 0.06em;
  color: var(--sn-muted);
}
.sn-meta__cat { color: var(--sn-cyan); text-decoration: none; }

.sn-crumbs {
  margin-bottom: var(--sn-space-3);
  font-family: var(--sn-mono);
  font-size: var(--sn-fs-xs);
  letter-spacing: 0.08em;
  color: var(--sn-muted);
}
.sn-crumbs a { text-decoration: none; }

/* ---------- barre NIST CSF ---------- */
.sn-csf { background: var(--sn-panel); border-block: 1px solid var(--sn-line-soft); }
.sn-csf__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sn-space-4); padding-block: var(--sn-space-3); }
.sn-csf__label {
  flex: none;
  font-family: var(--sn-mono);
  font-size: var(--sn-fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sn-muted);
}
.sn-csf ol { display: flex; flex-wrap: wrap; gap: 0.6rem; flex: 1 1 420px; margin: 0; padding: 0; list-style: none; }
.sn-csf li { flex: 1 1 90px; display: flex; flex-direction: column; gap: 0.45rem; }
.sn-csf__name { font-family: var(--sn-mono); font-size: 0.72rem; color: var(--sn-text); }
.sn-csf__meter { height: 3px; background: var(--sn-line); border-radius: 2px; overflow: hidden; }
.sn-csf__meter i {
  display: block;
  height: 100%;
  background: var(--sn-cyan);
  border-radius: 2px;
  transform-origin: left;
  animation: sn-fill .9s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes sn-fill { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .sn-csf__meter i { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* ---------- contenu éditorial ---------- */
.sn-prose > * + * { margin-top: var(--sn-space-3); }
.sn-prose h2 { margin-top: var(--sn-space-5); }
.sn-prose blockquote {
  margin: var(--sn-space-4) 0;
  padding-left: var(--sn-space-3);
  border-left: 2px solid var(--sn-cyan);
  color: var(--sn-muted);
}
.sn-prose table { width: 100%; border-collapse: collapse; }
.sn-prose th, .sn-prose td { padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--sn-line-soft); text-align: left; }
.sn-table-scroll { overflow-x: auto; }

/* ---------- pied de page ---------- */
.sn-footer { margin-top: var(--sn-space-4); background: var(--sn-panel); border-top: 1px solid var(--sn-line-soft); }
.sn-footer__inner { display: grid; gap: var(--sn-space-4); grid-template-columns: 1.4fr 1fr 1fr; padding-block: var(--sn-space-5) var(--sn-space-3); }
@media (max-width: 700px) { .sn-footer__inner { grid-template-columns: 1fr; } }
.sn-footer h2 {
  margin-bottom: 0.8rem;
  font-family: var(--sn-mono);
  font-size: var(--sn-fs-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sn-muted);
}
.sn-footer ul { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.sn-footer a { color: var(--sn-muted); text-decoration: none; font-size: 0.92rem; }
.sn-footer a:hover { color: var(--sn-cyan); }
.sn-legal { border-top: 1px solid var(--sn-line-soft); }
.sn-footer .sn-legal__menu { flex-direction: row; flex-wrap: wrap; gap: 0.4rem 1.1rem; }
.sn-legal__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.85rem;
  padding-block: var(--sn-space-2);
  font-size: var(--sn-fs-sm);
  color: var(--sn-muted);
}

/* ---------- pagination ---------- */
.sn-pagination { display: flex; gap: 0.4rem; margin-top: var(--sn-space-4); }
.sn-pagination .page-numbers {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--sn-line);
  border-radius: var(--sn-radius);
  color: var(--sn-muted);
  text-decoration: none;
}
.sn-pagination .current { background: var(--sn-cyan); border-color: var(--sn-cyan); color: var(--sn-on-accent); }

/* ---------- fiche service ---------- */
.sn-service { display: grid; grid-template-columns: 1fr 320px; gap: var(--sn-space-5); align-items: start; }
@media (max-width: 900px) { .sn-service { grid-template-columns: 1fr; } }
.sn-service__body > section + section { margin-top: var(--sn-space-5); }
.sn-service__body h2 { font-size: 1.25rem; margin-bottom: var(--sn-space-2); }
.sn-service__body p { color: var(--sn-muted); }
.sn-service__aside { position: sticky; top: 92px; display: flex; flex-direction: column; gap: var(--sn-space-3); }
@media (max-width: 900px) { .sn-service__aside { position: static; } }

.sn-panel { padding: var(--sn-space-4) var(--sn-space-3); background: var(--sn-panel); border: 1px solid var(--sn-line-soft); }
.sn-fact { display: flex; flex-direction: column; gap: 0.15rem; margin: 0 0 var(--sn-space-3); }
.sn-fact span, .sn-fact__label {
  font-family: var(--sn-mono);
  font-size: var(--sn-fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sn-muted);
}
.sn-fact b { font-family: var(--sn-display); font-weight: 600; color: var(--sn-text); }
.sn-fact__label { display: block; margin-bottom: 0.7rem; }
.sn-btn--block { width: 100%; justify-content: center; }

.sn-deliv { display: grid; gap: 1px; background: var(--sn-line-soft); border: 1px solid var(--sn-line-soft); }
.sn-deliv > div { background: var(--sn-panel); padding: var(--sn-space-2) var(--sn-space-3); }
.sn-deliv b { display: block; font-family: var(--sn-display); font-size: 0.97rem; font-weight: 600; margin-bottom: 0.15rem; }
.sn-deliv span { color: var(--sn-muted); font-size: 0.9rem; }

/* ---------- secteurs ---------- */
.sn-industry { display: flex; align-items: flex-start; gap: var(--sn-space-3); padding-block: var(--sn-space-3); border-bottom: 1px solid var(--sn-line-soft); }
.sn-industries .sn-industry:first-child { border-top: 1px solid var(--sn-line-soft); }
.sn-industry__k { flex: none; width: 34px; padding-top: 0.3rem; font-family: var(--sn-mono); font-size: var(--sn-fs-xs); letter-spacing: 0.14em; color: var(--sn-cyan-dim); }
.sn-industry h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.sn-industry p { margin: 0; color: var(--sn-muted); max-width: 64ch; }

/* ---------- pages construites avec Elementor ---------- */
/* Elementor pose déjà sa propre largeur de conteneur : le wrapper du thème
   en ajouterait une seconde, imbriquée, et le contenu se retrouverait deux
   fois trop étroit. */
.sn-elementor-page .sn-main > .sn-section { padding-block: 0; border-top: 0; }
.sn-elementor-page .sn-main > .sn-section > .sn-wrap { max-width: none; padding-inline: 0; }

/* ---------- icônes et visuels générés ---------- */
.sn-icon { display: inline-block; vertical-align: middle; flex: none; }
.sn-icon--feature { color: var(--sn-cyan); margin-bottom: var(--sn-space-1); }

.sn-mark { flex: none; }
/* Logo téléversé depuis Personnaliser → Identité du site : hauteur bornée,
   sans quoi l'image s'affiche à sa taille d'origine dans l'en-tête. */
.sn-brand .custom-logo { height: 40px; width: auto; max-width: 240px; display: block; }

/* Le repli généré occupe exactement le même rapport que les images réelles :
   une carte sans image ne décale pas la grille. */
.sn-thumb { display: block; aspect-ratio: 5 / 3; overflow: hidden; }
.sn-thumb svg,
.sn-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sn-card__media { display: block; margin: calc(var(--sn-space-4) * -1) calc(var(--sn-space-3) * -1) var(--sn-space-2); }

/* Motif de treillis : posé sur une section depuis Elementor par
   background-image: var(--sn-lattice), ou via cette classe utilitaire. */
.sn-lattice { position: relative; isolation: isolate; }
.sn-lattice::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--sn-lattice);
  background-repeat: repeat;
  mask-image: linear-gradient(to bottom right, #000 10%, transparent 75%);
}

/* ---------- bloc icône ---------- */
.sn-iconbox { display: flex; gap: var(--sn-space-3); padding: var(--sn-space-4) var(--sn-space-3); background: var(--sn-panel); border: 1px solid var(--sn-line-soft); color: inherit; text-decoration: none; }
.sn-iconbox--stacked { flex-direction: column; gap: var(--sn-space-2); }
.sn-iconbox--inline { flex-direction: row; align-items: flex-start; }
.sn-iconbox h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.sn-iconbox p { margin: 0; color: var(--sn-muted); font-size: 0.93rem; }
a.sn-iconbox:hover { border-color: var(--sn-cyan-dim); }

/* ---------- treillis animé ---------- */
.sn-hero-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  /* Le dégradé évite que le motif concurrence le texte : il s'efface là où
     le titre est posé. */
  mask-image: linear-gradient(105deg, transparent 22%, #000 62%, #000 100%);
}
.sn-hero-field svg { width: 100%; height: 100%; opacity: .55; }
.sn-lattice-live--static .sn-pulse { opacity: .45; }
.sn-hero { position: relative; isolation: isolate; overflow: hidden; }

/* ---------- intégration Elementor ----------
   Valeurs par défaut alignées sur le thème. Tout réglage fait dans
   l'éditeur Elementor produit un sélecteur plus spécifique et l'emporte. */
.elementor-heading-title { line-height: 1.15; letter-spacing: var(--sn-tracking, -0.02em); }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.elementor-widget-button .elementor-button {
  background: var(--sn-cyan);
  color: var(--sn-on-accent);
  border-radius: var(--sn-radius);
  font-weight: 600;
  font-size: 0.94rem;
  padding: 0.8rem 1.3rem;
  transition: background .15s, border-color .15s, color .15s;
}
.elementor-widget-button .elementor-button:hover,
.elementor-widget-button .elementor-button:focus-visible { background: #5CE8EF; color: var(--sn-on-accent); }
.elementor-widget-button.sn-el-ghost .elementor-button { background: transparent; color: var(--sn-text); border: 1px solid var(--sn-line); }
.elementor-widget-button.sn-el-ghost .elementor-button:hover { border-color: var(--sn-cyan-dim); color: var(--sn-cyan); background: transparent; }

/* Treillis animé : le widget se place en fond du conteneur « sn-hero ». */
.sn-hero .elementor-widget-spacenet_hero_field {
  position: absolute !important;
  inset: 0;
  z-index: -1;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
}
.sn-hero .elementor-widget-spacenet_hero_field .elementor-widget-container,
.sn-hero .elementor-widget-spacenet_hero_field .sn-hero-field { height: 100%; }

/* Sections Elementor : filet de séparation cohérent avec les pages du thème. */
.e-con.sn-section-line { border-top: 1px solid var(--sn-line-soft); }

/* Formulaire Elementor Pro sur fond sombre. */
.elementor-form .elementor-field-group .elementor-field-textual,
.elementor-form select {
  background: var(--sn-panel);
  color: var(--sn-text);
  border: 1px solid var(--sn-line);
  border-radius: var(--sn-radius);
}
.elementor-form .elementor-field-textual:focus { border-color: var(--sn-cyan-dim); outline: 2px solid var(--sn-cyan); outline-offset: 1px; }
.elementor-form label { color: var(--sn-text); font-size: 0.9rem; }
.elementor-form .elementor-field-type-acceptance label { color: var(--sn-muted); }
.elementor-message.elementor-message-success { color: var(--sn-ok); }
.elementor-message.elementor-message-danger { color: var(--sn-crit); }
.elementor-form select option { background: var(--sn-panel); color: var(--sn-text); }

/* Marque du pied de page : le symbole reprend la couleur du texte, donc la
   déclinaison blanche du kit sur fond sombre, sans fichier supplémentaire. */
.sn-footer__brand { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 var(--sn-space-2); }
.sn-footer__brand .sn-brand__name { font-size: 1.05rem; }

/* ---------- impression ----------
   Devis, fiches service et pages légales sont souvent imprimés ou exportés en
   PDF : fond blanc, texte noir, et la marque passe en noir d'elle-même
   puisqu'elle hérite de la couleur du texte. */
@media print {
  :root {
    --sn-ink: #FFFFFF; --sn-panel: #FFFFFF; --sn-panel-2: #FFFFFF;
    --sn-text: #000000; --sn-muted: #333333;
    --sn-line: #BBBBBB; --sn-line-soft: #DDDDDD;
    --sn-cyan: #000000; --sn-cyan-dim: #444444; --sn-on-accent: #FFFFFF;
  }
  body { background: #FFFFFF; color: #000000; }
  .sn-header, .sn-burger, .sn-lang, .sn-legal, .elementor-form, .sn-pagination { display: none; }
  .sn-hero-field, .sn-lattice { display: none; }
  /* Les icônes restent visibles : seule l'animation n'a pas de sens sur papier. */
  .sn-anim--draw, .sn-anim--pulse, .sn-anim--beat, .sn-anim--float,
  .sn-anim--glow, .sn-anim--spin, .sn-anim--stack { animation: none !important; }
  .sn-icon path, .sn-icon circle, .sn-icon line, .sn-icon polyline, .sn-icon rect {
    stroke-dashoffset: 0 !important; stroke-dasharray: none !important; opacity: 1 !important;
  }
  .sn-card, .sn-panel, .sn-industry { border: 1px solid #BBBBBB; break-inside: avoid; }
  a { color: #000000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555555; }
  h1, h2, h3 { break-after: avoid; }
}

/* Fiche service : modalités du mandat et limite du service. */
.sn-fact__text { color: var(--sn-muted); font-size: 0.92rem; line-height: 1.6; margin: 0.35rem 0 var(--sn-space-3); }
.sn-note { border-top: 1px solid var(--sn-line-soft); padding-top: var(--sn-space-3); margin-top: var(--sn-space-5); }
.sn-note p:last-child { color: var(--sn-muted); font-size: 0.88rem; line-height: 1.6; max-width: 70ch; margin: 0.3rem 0 0; }

/* ==========================================================================
   Refonte des sections d'accueil (retours client du 5 octobre)
   Cartes de même hauteur, numéro en filigrane, icône posée dans une tuile,
   lien ancré en bas : la grille se lit comme un ensemble, pas comme six blocs
   de longueurs différentes.
   ========================================================================== */

.sn-grid { align-items: stretch; }

.sn-card {
  position: relative;
  height: 100%;
  overflow: hidden;
  padding: var(--sn-space-4) var(--sn-space-4) var(--sn-space-3);
  border-top-width: 1px;
  border-color: var(--sn-line-soft);
  border-radius: var(--sn-radius);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sn-cyan) 4%, transparent) 0%, transparent 42%),
    var(--sn-panel);
  transition: border-color .18s, transform .18s, background .18s;
}
/* Filet d'accent qui se déploie au survol. */
.sn-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--sn-cyan), var(--sn-blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s ease;
}
.sn-card:hover::before, .sn-card:focus-visible::before { transform: scaleX(1); }
.sn-card:hover { border-color: var(--sn-line); transform: translateY(-3px); }

/* Numéro en filigrane, dans l'angle : il situe la carte sans voler la vedette. */
.sn-card__num {
  position: absolute;
  top: var(--sn-space-3);
  right: var(--sn-space-4);
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: 0;
  color: color-mix(in srgb, var(--sn-text) 8%, transparent);
  pointer-events: none;
}

/* L'icône repose dans une tuile, pour un alignement net d'une carte à l'autre. */
.sn-card > .sn-icon {
  display: block;
  box-sizing: content-box;
  padding: 0.6rem;
  margin-bottom: var(--sn-space-2);
  border: 1px solid color-mix(in srgb, var(--sn-cyan) 22%, transparent);
  border-radius: var(--sn-radius);
  background: color-mix(in srgb, var(--sn-cyan) 8%, transparent);
  color: var(--sn-cyan);
  transition: background .18s, border-color .18s;
}
.sn-card:hover > .sn-icon { background: color-mix(in srgb, var(--sn-cyan) 14%, transparent); border-color: var(--sn-cyan-dim); }

.sn-card h3 { font-size: 1.12rem; line-height: 1.3; margin: 0; }
.sn-card p {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.65;
}
.sn-card__more { margin-top: auto; padding-top: var(--sn-space-3); }
.sn-card:hover .sn-card__more { color: var(--sn-cyan); }

/* ---------- encadrés « Pourquoi SpaceNet » : même traitement que les cartes */
.sn-iconbox {
  height: 100%;
  padding: var(--sn-space-4);
  border-radius: var(--sn-radius);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sn-cyan) 4%, transparent) 0%, transparent 42%),
    var(--sn-panel);
  transition: border-color .18s, transform .18s;
}
.sn-iconbox:hover { border-color: var(--sn-line); }
.sn-iconbox .sn-icon {
  display: block;
  box-sizing: content-box;
  flex: none;
  padding: 0.55rem;
  border: 1px solid color-mix(in srgb, var(--sn-cyan) 22%, transparent);
  border-radius: var(--sn-radius);
  background: color-mix(in srgb, var(--sn-cyan) 8%, transparent);
  color: var(--sn-cyan);
}
.sn-iconbox--stacked .sn-icon { margin-bottom: var(--sn-space-1, 0.5rem); }
.sn-iconbox h3 { font-size: 1.02rem; }
.sn-iconbox p { line-height: 1.65; }

/* ---------- section « Pour qui » : le texte respire à côté d'un panneau ---- */
.sn-dims { display: grid; gap: var(--sn-space-2); margin: 0; padding: 0; list-style: none; }
.sn-dims li {
  display: flex;
  align-items: baseline;
  gap: var(--sn-space-2);
  padding: var(--sn-space-2) var(--sn-space-3);
  border: 1px solid var(--sn-line-soft);
  border-left: 2px solid var(--sn-cyan-dim);
  border-radius: var(--sn-radius);
  background: var(--sn-panel);
  color: var(--sn-text);
  font-size: 0.95rem;
}
.sn-dims b { font-family: var(--sn-mono); font-size: var(--sn-fs-xs); letter-spacing: 0.14em; color: var(--sn-cyan); text-transform: uppercase; }

/* ---------- appel à l'action : un panneau, pas une zone vide --------------- */
.sn-cta-panel {
  position: relative;
  overflow: hidden;
  padding: var(--sn-space-5) var(--sn-space-4);
  border: 1px solid var(--sn-line);
  border-radius: var(--sn-radius);
  background:
    radial-gradient(1200px 240px at 15% 0%, color-mix(in srgb, var(--sn-cyan) 10%, transparent), transparent 70%),
    var(--sn-panel);
  text-align: center;
}
.sn-cta-panel .sn-lede { margin-inline: auto; }
.sn-cta-panel .e-con-inner, .sn-cta-panel > .elementor-widget { position: relative; z-index: 1; }

/* ---------- figures décoratives ---------- */
.sn-figure { color: var(--sn-cyan); display: block; width: 100%; max-width: 420px; margin: 0 auto var(--sn-space-3); }
.elementor-widget-spacenet_figure { overflow: visible; }
.sn-figure svg { width: 100%; height: auto; display: block; }
.sn-figure--flow { max-width: 360px; }
.sn-figure--grid { max-width: 380px; }

/* ---------- en-tête de section : filet d'accent devant le libellé -------- */
.sn-eyebrow { display: flex; align-items: center; gap: 0.6rem; }
.sn-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: linear-gradient(90deg, var(--sn-cyan), transparent);
  flex: none;
}

/* ==========================================================================
   Rythme des sections
   Chaque section a son traitement — fond, alignement, accent — mais toutes
   partagent la même grammaire : filet de liaison à gauche, libellé, titre,
   contenu. On lit une suite, pas une juxtaposition de blocs.
   ========================================================================== */

/* Liaison verticale : un trait pointillé relie une section à la suivante. */
.sn-sec { position: relative; }
.sn-sec::before {
  content: "";
  position: absolute;
  left: max(calc((100% - var(--sn-wrap)) / 2), var(--sn-gutter));
  top: 0;
  width: 1px;
  height: 56px;
  background: linear-gradient(180deg, var(--sn-cyan-dim), transparent);
  opacity: .55;
}
.sn-sec::after {
  content: "";
  position: absolute;
  left: calc(max(calc((100% - var(--sn-wrap)) / 2), var(--sn-gutter)) - 3px);
  top: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sn-cyan);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sn-cyan) 14%, transparent);
}
@media (max-width: 900px) { .sn-sec::before, .sn-sec::after { display: none; } }

/* Fond teinté, une section sur deux : la lecture respire. */
.sn-sec--tint {
  background:
    radial-gradient(900px 320px at 12% -10%, color-mix(in srgb, var(--sn-cyan) 7%, transparent), transparent 70%),
    var(--sn-panel);
  border-top: 1px solid var(--sn-line-soft);
  border-bottom: 1px solid var(--sn-line-soft);
}

/* Section « Pourquoi » : encadrés tenus par un rail d'accent. */
.sn-sec--why .sn-iconbox { border-left: 2px solid color-mix(in srgb, var(--sn-cyan) 45%, transparent); }

/* Section « Pour qui » : halo discret derrière la figure. */
.sn-sec--who { background: radial-gradient(760px 300px at 88% 40%, color-mix(in srgb, var(--sn-blue) 9%, transparent), transparent 70%); }

/* Appel à l'action : la dernière section ne prolonge pas le fil. */
.sn-cta-panel::before, .sn-cta-panel::after { display: none; }

/* ==========================================================================
   Fiche service — rythme et identité propre à chaque bloc
   --------------------------------------------------------------------------
   Chaque bloc de la fiche reçoit un traitement visuel distinct (panneau,
   étapes numérotées, cartes), mais tous partagent la même gouttière gauche :
   la lecture reste un seul fil, découpé, jamais une suite de modules
   étrangers les uns aux autres.
   ========================================================================== */

/* ---------- en-tête de fiche ---------- */
.sn-svc-head {
  position: relative;
  margin-bottom: var(--sn-space-5);
  padding-bottom: var(--sn-space-4);
  border-bottom: 1px solid var(--sn-line-soft);
}
.sn-svc-head__fig {
  position: absolute;
  inset-block: 50% auto;
  inset-inline-end: 0;
  transform: translateY(-50%);
  width: 220px;
  opacity: .5;
  pointer-events: none;
}
/* Sous 1100 px la figure chevaucherait le texte : on la retire plutôt que
   de rétrécir le titre, qui est l'information utile. */
@media (max-width: 1100px) { .sn-svc-head__fig { display: none; } }

/* ---------- gouttière commune ---------- */
.sn-service__body > .sn-blk {
  position: relative;
  padding-left: var(--sn-space-4);
}
.sn-service__body > .sn-blk::before {
  content: "";
  position: absolute;
  inset-block: .35rem 0;
  inset-inline-start: 0;
  width: 2px;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--sn-cyan) 55%, transparent),
    transparent 85%
  );
}
@media (max-width: 600px) {
  .sn-service__body > .sn-blk { padding-left: var(--sn-space-3); }
}

/* ---------- l'enjeu : un panneau, pas un paragraphe ---------- */
.sn-blk--problem {
  padding: var(--sn-space-4) var(--sn-space-4) var(--sn-space-4) var(--sn-space-4) !important;
  background:
    radial-gradient(520px 200px at 100% 0%, color-mix(in srgb, var(--sn-blue) 12%, transparent), transparent 70%),
    var(--sn-panel);
  border: 1px solid var(--sn-line-soft);
}
.sn-blk--problem::before { inset-block: 0; }
.sn-blk--problem p { font-size: 1.05rem; line-height: 1.75; color: var(--sn-text); max-width: 68ch; }

/* ---------- à qui ce service s'adresse : deux colonnes ---------- */
.sn-ticks--cols { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem var(--sn-space-4); }
@media (max-width: 760px) { .sn-ticks--cols { grid-template-columns: 1fr; } }

/* ---------- ce que le mandat comprend : étapes numérotées ---------- */
.sn-steps { counter-reset: sn-step; list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--sn-line-soft); border: 1px solid var(--sn-line-soft); }
.sn-steps li {
  counter-increment: sn-step;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  align-items: baseline;
  gap: var(--sn-space-2);
  padding: var(--sn-space-2) var(--sn-space-3);
  background: var(--sn-panel);
  transition: background .25s ease;
}
.sn-steps li:hover { background: var(--sn-panel-2); }
.sn-steps li::before {
  content: counter(sn-step, decimal-leading-zero);
  font-family: var(--sn-display);
  font-size: .8rem;
  letter-spacing: .08em;
  color: var(--sn-cyan);
}
.sn-steps li span { color: var(--sn-muted); }

/* ---------- notre démarche : panneau avec figure ---------- */
.sn-blk--approach { position: relative; overflow: hidden; }
.sn-blk--approach p { max-width: 62ch; }
.sn-blk__fig {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 160px;
  opacity: .35;
  pointer-events: none;
}
@media (max-width: 900px) { .sn-blk__fig { display: none; } }

/* ---------- livrables : cartes plutôt que lignes ---------- */
.sn-deliv--cards {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
}
.sn-deliv--cards > div {
  padding: var(--sn-space-3);
  border-top: 2px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.sn-deliv--cards > div:hover { border-top-color: var(--sn-cyan); background: var(--sn-panel-2); }

/* ---------- résultats visés : cartes légères ---------- */
.sn-ticks--cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sn-space-2); }
.sn-ticks--cards li {
  padding: var(--sn-space-3);
  background: var(--sn-panel);
  border: 1px solid var(--sn-line-soft);
  grid-template-columns: 16px 1fr;
  align-items: start;
}

/* ---------- rappel d'action en fin de fiche ---------- */
.sn-svc-cta {
  margin-top: var(--sn-space-6);
  padding: var(--sn-space-5) var(--sn-space-4);
  text-align: center;
  background:
    radial-gradient(620px 240px at 50% 0%, color-mix(in srgb, var(--sn-cyan) 10%, transparent), transparent 70%),
    var(--sn-panel);
  border: 1px solid var(--sn-line-soft);
}
.sn-svc-cta h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: var(--sn-space-2); }
.sn-svc-cta p { color: var(--sn-muted); max-width: 56ch; margin: 0 auto var(--sn-space-4); }
.sn-svc-cta .sn-eyebrow { justify-content: center; }

/* ==========================================================================
   Fond du site
   --------------------------------------------------------------------------
   Trois calques peints en CSS, posés une fois pour tout le site et fixés au
   viewport : une trame technique, deux halos de marque, un voile de balayage.
   Aucun média, aucun JavaScript, aucun repaint au défilement — seuls des
   `transform` et des `opacity` sont animés (feuille motion.css), ce qui reste
   sur le compositeur et ne coûte rien au fil principal.

   Le calque est décoratif : il est ignoré au clic, masqué aux lecteurs
   d'écran et absent de l'impression.
   ========================================================================== */
.sn-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict; /* isole le calque : aucun reflow du reste de la page */
}
.sn-bg > span { position: absolute; display: block; }

/* Trame : deux dégradés répétés valent une image de fond sans requête HTTP. */
.sn-bg__grid {
  inset: -50%;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--sn-cyan) 9%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--sn-cyan) 9%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  /* Le dégradé de masque éteint la trame vers les bords : elle suggère une
     profondeur au lieu de quadriller l'écran jusque dans les coins. */
  -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 10%, transparent 72%);
  opacity: .55;
}

/* Halos : la couleur de marque, très diluée, qui respire derrière le texte. */
.sn-bg__glow { border-radius: 50%; filter: blur(70px); will-change: transform; }
.sn-bg__glow--a {
  inset-block-start: -18vh;
  inset-inline-start: -10vw;
  width: 62vw;
  height: 62vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--sn-cyan) 24%, transparent), transparent 70%);
}
.sn-bg__glow--b {
  inset-block-end: -26vh;
  inset-inline-end: -14vw;
  width: 56vw;
  height: 56vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--sn-blue) 26%, transparent), transparent 70%);
}

/* Voile de balayage : une bande claire qui traverse lentement la trame. */
.sn-bg__scan {
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 35%,
    color-mix(in srgb, var(--sn-cyan) 5%, transparent) 50%,
    transparent 65%
  );
  opacity: 0;
}

/* Le contenu passe devant le décor. */
.sn-header, .sn-main, .sn-footer, .sn-skip { position: relative; z-index: 1; }

/* Sur mobile, les halos flous coûtent cher en GPU pour un gain visuel faible
   sur petit écran : on garde la trame seule. */
@media (max-width: 600px) {
  .sn-bg__glow, .sn-bg__scan { display: none; }
}

@media print { .sn-bg { display: none; } }

/* ==========================================================================
   Section « Pour qui / Who we help »
   --------------------------------------------------------------------------
   L'intro occupe toute la largeur, les quatre dimensions se rangent en ligne
   sous elle, et la figure orbitale devient le décor de la section plutôt
   qu'un bloc de contenu : elle remplit le vide à droite au lieu d'en créer un
   sous le texte.
   ========================================================================== */
.sn-sec--who { position: relative; overflow: hidden; }

/* Le widget figure est sorti du flux : il n'occupe plus de hauteur. */
.sn-sec--who .elementor-widget-spacenet_figure {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: -6%;
  transform: translateY(-50%);
  width: min(620px, 52%);
  opacity: .22;
  z-index: 0;
  pointer-events: none;
  /* Estompe le bord gauche de la figure pour qu'elle ne vienne jamais
     concurrencer le texte, quelle que soit la largeur de la fenêtre. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 38%);
  mask-image: linear-gradient(to right, transparent, #000 38%);
}
/* Le reste du contenu passe devant le décor — en excluant explicitement la
   figure, sans quoi cette règle lui rendrait son position: relative. */
.sn-sec--who > .e-con-inner > *:not(.elementor-widget-spacenet_figure),
.sn-sec--who > .elementor-widget:not(.elementor-widget-spacenet_figure) { position: relative; z-index: 1; }

.sn-sec--who .sn-lede,
.sn-sec--who p { max-width: 64ch; }

/* Les quatre dimensions : une ligne de cartes, pas une colonne étroite. */
.sn-sec--who .sn-dims {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sn-space-3);
  margin-top: var(--sn-space-4);
}
.sn-sec--who .sn-dims li {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  padding: var(--sn-space-3);
  border-left-width: 1px;
  border-top: 2px solid transparent;
  line-height: 1.45;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.sn-sec--who .sn-dims li:hover {
  border-top-color: var(--sn-cyan);
  background: var(--sn-panel-2);
  transform: translateY(-2px);
}
/* Le numéro devient une pastille : il se lit comme un repère, pas comme du texte. */
.sn-sec--who .sn-dims b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid color-mix(in srgb, var(--sn-cyan) 35%, transparent);
  border-radius: var(--sn-radius);
  background: color-mix(in srgb, var(--sn-cyan) 10%, transparent);
  letter-spacing: 0.06em;
}

@media (max-width: 1000px) {
  .sn-sec--who .sn-dims { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sn-sec--who .elementor-widget-spacenet_figure { opacity: .12; }
}
@media (max-width: 560px) {
  .sn-sec--who .sn-dims { grid-template-columns: 1fr; }
  .sn-sec--who .elementor-widget-spacenet_figure { display: none; }
}

/* ---------- panneau d'appel à l'action : corrections de mise en page -------
   Elementor applique le retrait vertical de la section à son conteneur
   intérieur. Le panneau ayant déjà son propre retrait, les deux s'additionnent
   et creusent une zone vide sous les boutons : on neutralise celui du
   conteneur. La rangée de boutons, elle, hérite d'un alignement à gauche alors
   que tout le reste du panneau est centré. */
/* !important assumé : Elementor écrit ce retrait dans sa feuille propre à la
   page, chargée après celle du thème et plus spécifique. C'est le seul endroit
   du thème où l'on reprend la main sur une valeur générée. */
.sn-cta-panel > .e-con-inner {
  padding-block: 0 !important;
  row-gap: var(--sn-space-3);
}
.sn-cta-panel > .e-con-inner > .e-con,
.sn-cta-panel > .e-con-inner > .e-con > .e-con-inner {
  justify-content: center;
  width: 100%;
}

/* ==========================================================================
   Visuels de marque
   --------------------------------------------------------------------------
   Le bandeau d'accueil peut recevoir une photographie, injectée comme variable
   CSS par le thème. Sans image choisie, la variable n'existe pas : la règle ne
   produit rien et le bandeau reste tel quel. L'image est décorative — c'est un
   fond, jamais une information — d'où l'absence de balise img et de texte
   alternatif.
   ========================================================================== */
.sn-hero { position: relative; isolation: isolate; }
.sn-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--sn-hero-image, none);
  background-size: cover;
  background-position: center;
  opacity: .42;
  /* Le texte doit rester lisible : l'image s'efface vers la gauche, là où se
     trouvent le titre et le chapô, et vers le bas, pour rejoindre la section
     suivante sans couture. */
  -webkit-mask-image: linear-gradient(to right, transparent 4%, #000 62%),
                      linear-gradient(to bottom, #000 55%, transparent 97%);
  mask-image: linear-gradient(to right, transparent 4%, #000 62%),
              linear-gradient(to bottom, #000 55%, transparent 97%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
@media (max-width: 760px) {
  /* Sur mobile le texte occupe toute la largeur : l'image passe derrière, très
     en retrait, plutôt que de concurrencer la lecture. */
  .sn-hero::after { opacity: .2; -webkit-mask-image: none; mask-image: none; }
}

/* ---------- visuel d'une fiche service ---------- */
.sn-svc-media {
  margin-bottom: var(--sn-space-4);
  overflow: hidden;
  border: 1px solid var(--sn-line-soft);
  border-radius: var(--sn-radius);
  line-height: 0;
}
.sn-svc-media img { width: 100%; height: clamp(180px, 26vw, 300px); object-fit: cover; }

/* ---------- carte de service avec image ----------
   L'image occupe la pleine largeur de la carte, en 16/9 imposé : les six
   visuels ont le même format, mais une image déposée plus tard ne doit pas
   pouvoir déformer la grille. */
.sn-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1px solid var(--sn-line-soft);
}
/* Le numéro en filigrane passe devant l'image, dans un coin assombri pour
   rester lisible quel que soit le visuel. */
.sn-card:has(.sn-card__media) .sn-card__num {
  z-index: 2;
  text-shadow: 0 1px 10px var(--sn-ink);
}

/* ---------- bandeaux d'image ----------
   Deux usages : une bande pleine largeur entre deux sections (page Pour qui),
   et un en-tête sur les pages légales, qui sont autrement du texte nu. Dans
   les deux cas l'image est bornée en hauteur et recadrée au centre : une image
   plus haute que prévu ne doit pas pousser le contenu hors de l'écran. */
.sn-band { padding-block: 0 !important; }
.sn-band img,
.sn-page-band img {
  display: block;
  width: 100%;
  object-fit: cover;
}
.sn-band img { height: clamp(180px, 26vw, 360px); }

.sn-page-band {
  margin: 0 0 var(--sn-space-5);
  overflow: hidden;
  border: 1px solid var(--sn-line-soft);
  border-radius: var(--sn-radius);
  line-height: 0;
}
.sn-page-band img { height: clamp(120px, 16vw, 200px); }

/* ---------- garde-fou contre le défilement horizontal ----------
   Plusieurs éléments décoratifs débordent volontairement de leur section
   (figures calées en négatif, halos du fond). Chaque section les rogne déjà,
   mais une seule qui échappe à la règle suffit à créer une barre de défilement
   horizontale sur toute la page — un défaut très visible sur mobile.

   `clip` et non `hidden` : hidden sur html/body transforme l'élément en
   conteneur de défilement et casse `position: sticky` (colonne latérale des
   fiches service). clip coupe sans rien de tout cela. */
html, body { overflow-x: clip; }

/* La section « Pour qui » porte sa figure en absolu : on s'assure que le
   rognage l'emporte sur les styles générés par Elementor. */
.sn-sec--who { overflow: hidden; }

/* ==========================================================================
   Barre d'onglets mobile
   --------------------------------------------------------------------------
   Reprend les codes d'une application : fixe en bas, à portée du pouce,
   toujours visible. Elle ne remplace pas le menu déroulant de l'en-tête, qui
   garde le menu complet et le sélecteur de langue — elle met les quatre
   destinations principales à un seul geste.
   ========================================================================== */
.sn-tabbar { display: none; }

@media (max-width: 900px) {
  .sn-tabbar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 60;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 2px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--sn-ink) 88%, transparent);
    border-top: 1px solid var(--sn-line-soft);
    /* Le flou laisse deviner le contenu qui passe dessous : la barre se lit
       comme une surface posée sur la page, pas comme un bandeau opaque. */
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  .sn-tabbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    /* 52 px : au-dessus du minimum recommandé pour une cible tactile. */
    min-height: 52px;
    padding: 6px 2px;
    border-radius: var(--sn-radius);
    color: var(--sn-muted);
    font-size: 0.68rem;
    line-height: 1.15;
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: none;
    transition: color .2s ease, background .2s ease;
  }
  .sn-tabbar__item span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .sn-tabbar__item .sn-icon { flex: none; }

  .sn-tabbar__item:active { background: var(--sn-panel-2); }

  /* Page courante : la couleur suffit, sans pastille ni soulignement qui
     alourdiraient une barre déjà dense. */
  .sn-tabbar__item[aria-current="page"] { color: var(--sn-cyan); }

  .sn-tabbar__item--accent { color: var(--sn-cyan); }
  .sn-tabbar__item--accent[aria-current="page"],
  .sn-tabbar__item--accent:active {
    background: color-mix(in srgb, var(--sn-cyan) 14%, transparent);
  }

  /* Le pied de page ne doit pas finir caché sous la barre. */
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }

  /* Le menu déroulant s'ouvre par-dessus : la barre ne doit pas flotter
     au-dessus de lui. */
  .sn-nav.is-open ~ .sn-tabbar,
  body:has(.sn-nav.is-open) .sn-tabbar { display: none; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .sn-tabbar__item { transition: none; }
}

/* ==========================================================================
   SpaceNet 8.0 — premium cybersecurity consulting foundation
   --------------------------------------------------------------------------
   Intent: SaaS-level polish without presenting SpaceNet as a software vendor.
   The visual language stays advisory-first: clear hierarchy, generous space,
   subtle data/decision motifs, strong conversion points and restrained motion.
   ========================================================================== */

/* ---------- global rhythm ------------------------------------------------ */
body {
  background:
    radial-gradient(1000px 520px at 50% -220px, color-mix(in srgb, var(--sn-blue) 10%, transparent), transparent 72%),
    var(--sn-ink);
}

.sn-wrap { max-width: var(--sn-wrap); }

.sn-main { min-height: 60vh; }

.sn-sec > .e-con-inner,
.sn-page-hero > .e-con-inner,
.sn-hero--home > .e-con-inner {
  width: 100%;
}

/* ---------- header ------------------------------------------------------- */
.sn-header {
  background: color-mix(in srgb, var(--sn-ink) 76%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  backdrop-filter: blur(20px) saturate(130%);
  border-bottom-color: color-mix(in srgb, var(--sn-line) 74%, transparent);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .14);
}
.sn-header__inner {
  min-height: 76px;
  padding-block: .75rem;
  gap: 1.15rem;
}
.sn-brand { gap: .8rem; }
.sn-brand__name { font-size: .98rem; letter-spacing: -.01em; white-space: nowrap; }
.sn-brand .sn-mark { filter: drop-shadow(0 0 13px color-mix(in srgb, var(--sn-cyan) 22%, transparent)); }
.sn-brand .custom-logo { height: 42px; max-width: 255px; }

.sn-nav ul { gap: .12rem; }
.sn-nav a {
  position: relative;
  padding: .58rem .72rem;
  border-radius: var(--sn-radius-sm);
  font-size: .9rem;
  font-weight: 500;
}
.sn-nav a::after {
  content: "";
  position: absolute;
  left: .72rem;
  right: .72rem;
  bottom: .28rem;
  height: 1px;
  background: var(--sn-cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s var(--sn-ease);
}
.sn-nav a:hover::after,
.sn-nav .current-menu-item > a::after { transform: scaleX(1); }
.sn-nav a:hover { background: color-mix(in srgb, var(--sn-panel-2) 72%, transparent); }

.sn-lang {
  border-color: color-mix(in srgb, var(--sn-line) 82%, transparent);
  background: color-mix(in srgb, var(--sn-panel) 76%, transparent);
  padding: 2px;
  gap: 1px;
}
.sn-lang__item { border-radius: 999px; padding: .32rem .66rem; }

.sn-header__inner > .sn-btn,
.sn-nav__cta .sn-btn {
  min-height: 42px;
  padding-inline: 1rem;
}

/* ---------- buttons ------------------------------------------------------ */
.sn-btn,
.elementor-widget-button .elementor-button {
  border-radius: 10px;
  min-height: 46px;
  justify-content: center;
  letter-spacing: -.005em;
  transition:
    transform .2s var(--sn-ease),
    box-shadow .2s var(--sn-ease),
    background .2s var(--sn-ease),
    border-color .2s var(--sn-ease),
    color .2s var(--sn-ease);
}
.sn-btn--primary,
.elementor-widget-button:not(.sn-el-ghost) .elementor-button {
  box-shadow: 0 8px 26px color-mix(in srgb, var(--sn-cyan) 18%, transparent);
}
.sn-btn:hover,
.elementor-widget-button .elementor-button:hover { transform: translateY(-1px); }
.sn-btn--primary:hover,
.elementor-widget-button:not(.sn-el-ghost) .elementor-button:hover {
  box-shadow: 0 12px 34px color-mix(in srgb, var(--sn-cyan) 26%, transparent);
}
.sn-arw { transition: transform .2s var(--sn-ease); }
.sn-btn:hover .sn-arw,
.sn-card:hover .sn-arw { transform: translateX(4px); }

/* ---------- home hero ---------------------------------------------------- */
.sn-hero--home {
  min-height: min(780px, calc(100vh - 76px));
  border-bottom: 1px solid color-mix(in srgb, var(--sn-line) 60%, transparent);
  background:
    radial-gradient(720px 420px at 86% 48%, color-mix(in srgb, var(--sn-cyan) 9%, transparent), transparent 72%),
    radial-gradient(680px 360px at 14% 24%, color-mix(in srgb, var(--sn-blue) 8%, transparent), transparent 74%);
}
.sn-hero--home .sn-hero-field { opacity: .72; }
.sn-hero__layout { width: 100%; }
.sn-hero__copy,
.sn-hero__visual { min-width: 0; }
.sn-hero__copy { flex: 0 1 57%; max-width: 690px; }
.sn-hero__visual { flex: 1 1 43%; min-height: 470px; }
.sn-hero__copy h1 {
  max-width: 13ch;
  font-size: clamp(3.05rem, 6vw, 5.15rem);
  line-height: .99;
  letter-spacing: -.045em;
}
.sn-hero__copy .sn-lede {
  max-width: 58ch;
  font-size: clamp(1.05rem, 1.55vw, 1.22rem);
  line-height: 1.72;
}
.sn-hero__actions { gap: .75rem !important; align-items: center; }

.sn-risk-map {
  position: relative;
  width: min(100%, 470px);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  border: 1px solid color-mix(in srgb, var(--sn-line) 72%, transparent);
  border-radius: 28px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--sn-cyan) 6%, transparent), transparent 38%),
    color-mix(in srgb, var(--sn-panel) 84%, transparent);
  box-shadow: var(--sn-shadow-md), inset 0 1px 0 color-mix(in srgb, var(--sn-text) 5%, transparent);
  overflow: hidden;
  isolation: isolate;
}
.sn-risk-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--sn-line) 30%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--sn-line) 30%, transparent) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(circle at 50% 48%, #000 0%, transparent 76%);
  mask-image: radial-gradient(circle at 50% 48%, #000 0%, transparent 76%);
  opacity: .55;
  z-index: -2;
}
.sn-risk-map__halo {
  position: absolute;
  inset: 25%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sn-cyan) 22%, transparent), transparent 67%);
  filter: blur(16px);
  z-index: -1;
}
.sn-risk-map__ring {
  position: absolute;
  left: 50%; top: 50%;
  border: 1px solid color-mix(in srgb, var(--sn-cyan) 28%, transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.sn-risk-map__ring--a { width: 54%; height: 54%; }
.sn-risk-map__ring--b { width: 78%; height: 78%; border-style: dashed; border-color: color-mix(in srgb, var(--sn-blue) 26%, transparent); }
.sn-risk-map__axis { position: absolute; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sn-cyan) 26%, transparent), transparent); }
.sn-risk-map__axis--x { left: 9%; right: 9%; top: 50%; height: 1px; }
.sn-risk-map__axis--y { top: 9%; bottom: 9%; left: 50%; width: 1px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--sn-cyan) 26%, transparent), transparent); }
.sn-risk-map__core {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 118px;
  height: 118px;
  border: 1px solid color-mix(in srgb, var(--sn-cyan) 46%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--sn-ink) 80%, transparent);
  box-shadow: 0 0 0 12px color-mix(in srgb, var(--sn-cyan) 4%, transparent), 0 0 42px color-mix(in srgb, var(--sn-cyan) 14%, transparent);
  text-align: center;
}
.sn-risk-map__core small {
  display: block;
  margin-bottom: -23px;
  font: 500 .62rem/1 var(--sn-mono);
  letter-spacing: .18em;
  color: var(--sn-muted);
}
.sn-risk-map__core strong {
  font: 600 1.35rem/1 var(--sn-display);
  letter-spacing: -.03em;
}
.sn-risk-map__node {
  position: absolute;
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  padding: .42rem .68rem;
  border: 1px solid color-mix(in srgb, var(--sn-line) 94%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--sn-ink) 78%, transparent);
  box-shadow: var(--sn-shadow-sm);
  font: 500 .63rem/1 var(--sn-mono);
  letter-spacing: .11em;
  color: var(--sn-muted);
}
.sn-risk-map__node::before {
  content: "";
  width: 6px; height: 6px;
  margin-right: .42rem;
  border-radius: 50%;
  background: var(--sn-cyan);
  box-shadow: 0 0 12px color-mix(in srgb, var(--sn-cyan) 60%, transparent);
}
.sn-risk-map__node--risk { top: 13%; left: 8%; }
.sn-risk-map__node--gov { top: 18%; right: 5%; }
.sn-risk-map__node--res { bottom: 15%; left: 6%; }
.sn-risk-map__node--dec { bottom: 10%; right: 6%; }

/* ---------- section headers --------------------------------------------- */
.sn-sec .sn-eyebrow,
.sn-page-hero .sn-eyebrow { margin-bottom: .15rem; }
.sn-sec > .e-con-inner > .elementor-widget-heading:first-of-type .elementor-heading-title,
.sn-page-hero .elementor-heading-title { max-width: 17ch; }
.sn-sec .sn-lede { max-width: 66ch; }

/* ---------- services ----------------------------------------------------- */
.sn-sec--services .sn-grid,
.sn-page-hero + .sn-sec .sn-grid { gap: 18px; }
.sn-card {
  min-height: 300px;
  padding: 2rem 2rem 1.7rem;
  border: 1px solid color-mix(in srgb, var(--sn-line) 78%, transparent);
  border-radius: var(--sn-radius-lg);
  background:
    radial-gradient(420px 190px at 0% 0%, color-mix(in srgb, var(--sn-cyan) 7%, transparent), transparent 68%),
    linear-gradient(180deg, color-mix(in srgb, var(--sn-panel-2) 42%, transparent), color-mix(in srgb, var(--sn-panel) 92%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sn-text) 3.5%, transparent);
  gap: .9rem;
  transition: transform .24s var(--sn-ease), border-color .24s var(--sn-ease), box-shadow .24s var(--sn-ease), background .24s var(--sn-ease);
}
.sn-card::before {
  left: 2rem;
  right: 2rem;
  width: auto;
  height: 1px;
  transform-origin: center;
  background: linear-gradient(90deg, transparent, var(--sn-cyan), var(--sn-blue), transparent);
}
.sn-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--sn-cyan) 28%, var(--sn-line));
  box-shadow: 0 20px 54px rgba(0,0,0,.22), inset 0 1px 0 color-mix(in srgb, var(--sn-text) 5%, transparent);
}
.sn-card__num {
  position: static;
  order: -1;
  align-self: flex-start;
  min-width: 42px;
  padding: .36rem .48rem;
  border: 1px solid color-mix(in srgb, var(--sn-cyan) 24%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--sn-cyan) 6%, transparent);
  font: 500 .68rem/1 var(--sn-mono);
  letter-spacing: .13em;
  color: var(--sn-cyan);
}
.sn-card h3 {
  max-width: 21ch;
  margin-top: .3rem;
  font-size: clamp(1.28rem, 2vw, 1.55rem);
  line-height: 1.22;
  letter-spacing: -.025em;
}
.sn-card p {
  -webkit-line-clamp: 4;
  font-size: .98rem;
  line-height: 1.7;
}
.sn-card__more {
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--sn-line) 55%, transparent);
  font-size: .69rem;
}

/* ---------- principles / about ------------------------------------------ */
.sn-sec--why .sn-iconbox,
.sn-about__principles .sn-iconbox {
  min-height: 230px;
  border: 1px solid color-mix(in srgb, var(--sn-line) 74%, transparent);
  border-left-width: 1px;
  border-radius: var(--sn-radius-lg);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sn-text) 3%, transparent);
}
.sn-sec--why .sn-iconbox::before,
.sn-about__principles .sn-iconbox::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  border-radius: var(--sn-radius-lg) 0 0 var(--sn-radius-lg);
  background: linear-gradient(180deg, var(--sn-cyan), transparent 80%);
  opacity: .75;
}
.sn-sec--why .sn-iconbox { position: relative; overflow: hidden; }
.sn-iconbox .sn-icon {
  border-radius: 10px;
  padding: .65rem;
}

.sn-about__intro { margin-bottom: 2rem; }
.sn-about__copy { flex: 1 1 62%; }
.sn-about__copy p { font-size: 1.02rem; line-height: 1.8; }
.sn-about__visual { flex: 0 1 38%; }
.sn-about__visual .sn-figure {
  margin: 0 auto;
  padding: 1.35rem;
  border: 1px solid var(--sn-line-soft);
  border-radius: var(--sn-radius-lg);
  background: color-mix(in srgb, var(--sn-panel) 76%, transparent);
  box-shadow: var(--sn-shadow-sm);
}
.sn-about__principles { margin-top: 1rem; }

/* ---------- who we help -------------------------------------------------- */
.sn-sec--who {
  background:
    radial-gradient(760px 360px at 92% 42%, color-mix(in srgb, var(--sn-blue) 10%, transparent), transparent 72%),
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--sn-panel) 38%, transparent), transparent);
}
.sn-sec--who .sn-dims { gap: 14px; }
.sn-sec--who .sn-dims li {
  min-height: 142px;
  justify-content: space-between;
  padding: 1.45rem;
  border: 1px solid color-mix(in srgb, var(--sn-line) 78%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--sn-line) 78%, transparent);
  border-radius: var(--sn-radius-lg);
  background: color-mix(in srgb, var(--sn-panel) 82%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sn-text) 3%, transparent);
}
.sn-sec--who .sn-dims li:hover {
  border-color: color-mix(in srgb, var(--sn-cyan) 24%, var(--sn-line));
  background: color-mix(in srgb, var(--sn-panel-2) 86%, transparent);
}
.sn-sec--who .sn-dims b { border-radius: 999px; }

/* ---------- universal CTA ----------------------------------------------- */
.sn-cta-panel,
.sn-svc-cta {
  border-radius: 22px;
  border-color: color-mix(in srgb, var(--sn-cyan) 18%, var(--sn-line));
  background:
    radial-gradient(760px 280px at 50% -20%, color-mix(in srgb, var(--sn-cyan) 12%, transparent), transparent 72%),
    linear-gradient(135deg, color-mix(in srgb, var(--sn-panel-2) 88%, transparent), var(--sn-panel));
  box-shadow: var(--sn-shadow-sm), inset 0 1px 0 color-mix(in srgb, var(--sn-text) 4%, transparent);
}
.sn-cta-panel { max-width: calc(var(--sn-wrap) - 48px); margin-inline: auto; }
.sn-cta-panel h2 { max-width: 18ch; margin-inline: auto; }
.sn-cta-panel .sn-lede { max-width: 58ch; }
.sn-svc-cta { padding: clamp(2.2rem, 5vw, 4rem); }
.sn-svc-cta h2 { max-width: 18ch; margin-inline: auto; }

/* ---------- page hero ---------------------------------------------------- */
.sn-page-hero {
  min-height: 410px;
  display: flex;
  align-items: flex-end;
  border-bottom: 1px solid var(--sn-line-soft);
  background:
    radial-gradient(740px 300px at 85% 30%, color-mix(in srgb, var(--sn-blue) 10%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--sn-panel) 22%, transparent), transparent);
}
.sn-page-hero h1 { max-width: 18ch; }
.sn-page-hero .sn-lede { max-width: 68ch; }

/* ---------- service detail ---------------------------------------------- */
.single-sn_service .sn-section > .sn-wrap { max-width: 1180px; }
.sn-svc-head {
  min-height: 280px;
  display: flex;
  align-items: flex-end;
  margin: 0 0 3.3rem;
  padding: 2.2rem 2.35rem;
  border: 1px solid var(--sn-line-soft);
  border-radius: 22px;
  background:
    radial-gradient(560px 260px at 100% 15%, color-mix(in srgb, var(--sn-cyan) 9%, transparent), transparent 70%),
    linear-gradient(145deg, color-mix(in srgb, var(--sn-panel-2) 75%, transparent), var(--sn-panel));
  overflow: hidden;
  box-shadow: var(--sn-shadow-sm), inset 0 1px 0 color-mix(in srgb, var(--sn-text) 4%, transparent);
}
.sn-svc-head .sn-rail { max-width: 790px; border-left: 0; padding-left: 0; }
.sn-svc-head .sn-icon { margin-bottom: .75rem; padding: .62rem; border: 1px solid color-mix(in srgb, var(--sn-cyan) 24%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--sn-cyan) 7%, transparent); }
.sn-svc-head h1 { max-width: 18ch; font-size: clamp(2.7rem, 5.2vw, 4.55rem); line-height: 1.01; letter-spacing: -.045em; }
.sn-svc-head__fig { width: 290px; opacity: .28; right: -20px; }

.sn-service { grid-template-columns: minmax(0, 1fr) 330px; gap: clamp(2rem, 4vw, 4rem); }
.sn-service__body > section + section { margin-top: 3.4rem; }
.sn-service__body h2 { font-size: clamp(1.28rem, 2.4vw, 1.62rem); letter-spacing: -.025em; }
.sn-service__body > .sn-blk { padding-left: 1.75rem; }
.sn-blk--problem {
  padding: 2rem !important;
  border-radius: var(--sn-radius-lg);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sn-text) 3%, transparent);
}
.sn-ticks--cols { gap: .8rem 1.15rem; }
.sn-ticks--cols li,
.sn-ticks--cards li {
  border-radius: var(--sn-radius);
}
.sn-steps {
  gap: 10px;
  border: 0;
  background: transparent;
}
.sn-steps li {
  min-height: 66px;
  padding: 1rem 1.15rem;
  border: 1px solid var(--sn-line-soft);
  border-radius: var(--sn-radius);
}
.sn-steps li::before { font-size: .7rem; }
.sn-deliv--cards { gap: 12px; border: 0; background: transparent; }
.sn-deliv--cards > div {
  min-height: 118px;
  padding: 1.2rem;
  border: 1px solid var(--sn-line-soft);
  border-top: 1px solid var(--sn-line-soft);
  border-radius: var(--sn-radius);
}
.sn-ticks--cards { gap: 12px; }
.sn-ticks--cards li { min-height: 104px; }
.sn-service__aside { top: 104px; }
.sn-service__aside .sn-panel {
  padding: 1.4rem;
  border-radius: var(--sn-radius-lg);
  background: linear-gradient(160deg, color-mix(in srgb, var(--sn-panel-2) 80%, transparent), var(--sn-panel));
  box-shadow: var(--sn-shadow-sm), inset 0 1px 0 color-mix(in srgb, var(--sn-text) 3%, transparent);
}

/* ---------- contact ------------------------------------------------------ */
.sn-sec--contact .sn-grid { gap: 24px; align-items: stretch; }
.sn-contact-form,
.sn-contact-aside {
  height: 100%;
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--sn-line-soft);
  border-radius: var(--sn-radius-lg);
  background: color-mix(in srgb, var(--sn-panel) 86%, transparent);
  box-shadow: var(--sn-shadow-sm), inset 0 1px 0 color-mix(in srgb, var(--sn-text) 3%, transparent);
}
.sn-contact-form .elementor-widget-container { height: 100%; }
.elementor-form .elementor-field-group .elementor-field-textual,
.elementor-form select {
  min-height: 48px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--sn-ink) 48%, var(--sn-panel));
}
.elementor-form textarea.elementor-field-textual { min-height: 150px; resize: vertical; }
.elementor-form .elementor-field-group { margin-bottom: 16px; }
.elementor-form label { margin-bottom: 7px; font-weight: 500; }
.sn-contact-aside h3 { margin-top: 1.25rem; font-size: 1rem; }
.sn-contact-aside h3:first-child { margin-top: 0; }
.sn-contact-aside .sn-figure { margin-top: auto; opacity: .7; }

/* ---------- footer ------------------------------------------------------- */
.sn-footer {
  margin-top: clamp(3rem, 8vw, 7rem);
  border-top: 1px solid var(--sn-line-soft);
  background:
    radial-gradient(820px 280px at 8% 0%, color-mix(in srgb, var(--sn-cyan) 6%, transparent), transparent 72%),
    color-mix(in srgb, var(--sn-panel) 48%, var(--sn-ink));
}
.sn-footer__inner {
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.sn-footer__brand { margin-bottom: 1rem; }
.sn-footer h2 { margin-bottom: 1rem; font-size: .78rem; font-family: var(--sn-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sn-muted); }
.sn-footer ul { gap: .62rem; }
.sn-footer a { color: var(--sn-muted); }
.sn-footer a:hover { color: var(--sn-cyan); }
.sn-legal { border-top-color: color-mix(in srgb, var(--sn-line) 70%, transparent); }

/* ---------- responsive --------------------------------------------------- */
@media (max-width: 980px) {
  .sn-hero__layout,
  .sn-about__intro { flex-wrap: wrap !important; }
  .sn-hero__copy,
  .sn-hero__visual,
  .sn-about__copy,
  .sn-about__visual { flex-basis: 100%; max-width: none; }
  .sn-hero__copy h1 { max-width: 14ch; }
  .sn-hero__visual { min-height: auto; padding-top: 1.6rem; }
  .sn-risk-map { width: min(100%, 540px); }
  .sn-about__visual .sn-figure { max-width: 420px; }
}

@media (max-width: 760px) {
  :root { --sn-gutter: 18px; }
  .sn-header__inner { min-height: 68px; }
  .sn-brand__name { font-size: .9rem; }
  .sn-brand .sn-mark { width: 29px; height: 29px; }
  .sn-lang { order: 2; }
  .sn-burger { order: 3; border-radius: var(--sn-radius-sm); }
  .sn-nav { order: 4; }

  .sn-hero--home { min-height: auto; }
  .sn-hero__copy h1 { font-size: clamp(2.65rem, 13vw, 4.15rem); }
  .sn-hero__actions { flex-direction: column !important; align-items: stretch !important; }
  .sn-hero__actions .elementor-widget-button { width: 100%; }
  .sn-hero__actions .elementor-button { width: 100%; }
  .sn-risk-map { border-radius: 20px; }

  .sn-card { min-height: 0; padding: 1.5rem; border-radius: 15px; }
  .sn-card::before { left: 1.5rem; right: 1.5rem; }
  .sn-card h3 { max-width: none; }

  .sn-page-hero { min-height: 330px; }
  .sn-svc-head { min-height: 0; padding: 1.5rem; border-radius: 16px; }
  .sn-svc-head h1 { font-size: clamp(2.25rem, 10vw, 3.2rem); }
  .sn-service__body > .sn-blk { padding-left: 1.1rem; }
  .sn-blk--problem { padding: 1.4rem !important; }
  .sn-cta-panel,
  .sn-svc-cta { border-radius: 16px; }
}

@media (max-width: 520px) {
  .sn-risk-map__node { font-size: .54rem; padding: .34rem .5rem; }
  .sn-risk-map__core { width: 96px; height: 96px; }
  .sn-risk-map__core strong { font-size: 1.1rem; }
  .sn-risk-map__node--risk { top: 10%; left: 5%; }
  .sn-risk-map__node--gov { top: 20%; right: 3%; }
  .sn-risk-map__node--res { bottom: 16%; left: 3%; }
  .sn-risk-map__node--dec { bottom: 8%; right: 4%; }
}

/* Elementor may omit flex alignment when imported across minor versions; the
   semantic classes are the stable source of truth for these two layouts. */
.sn-hero__layout,
.sn-about__intro { align-items: center; }


/* ===== src/v8.css ===== */
/*
 * SpaceNet Cybersécurité 8.0 LTS
 * Final presentation layer: signature, interaction, accessibility and mobile.
 *
 * This file intentionally sits after main.css. It is the stable LTS surface:
 * legacy component rules remain backward-compatible while the final visual
 * system is centralized here. Client copy lives in SpaceNet Core, never here.
 */

:root {
  --sn-surface-glass: color-mix(in srgb, var(--sn-panel) 82%, transparent);
  --sn-surface-raised: color-mix(in srgb, var(--sn-panel-2) 76%, var(--sn-panel));
  --sn-border-premium: color-mix(in srgb, var(--sn-line) 82%, transparent);
  --sn-border-accent: color-mix(in srgb, var(--sn-cyan) 28%, var(--sn-line));
  --sn-glow-soft: 0 20px 70px color-mix(in srgb, var(--sn-cyan) 8%, transparent);
  --sn-glow-card: 0 24px 64px rgba(0, 0, 0, .24);
  --sn-ease-out: cubic-bezier(.16, 1, .3, 1);
  --sn-header-h: 76px;
  --sn-copy: 68ch;
}

html { scroll-padding-top: calc(var(--sn-header-h) + 24px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

::selection { background: color-mix(in srgb, var(--sn-cyan) 28%, transparent); color: var(--sn-text); }

body {
  min-width: 320px;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.sn-nav-open { overflow: hidden; }

/* ---------------------------------------------------------------- header */
.sn-header {
  transition: background .28s var(--sn-ease-out), box-shadow .28s var(--sn-ease-out), border-color .28s var(--sn-ease-out);
}
.sn-header__inner {
  transition: min-height .28s var(--sn-ease-out), padding .28s var(--sn-ease-out);
}
.sn-header.is-scrolled {
  background: color-mix(in srgb, var(--sn-ink) 91%, transparent);
  border-bottom-color: var(--sn-border-premium);
  box-shadow: 0 12px 48px rgba(0, 0, 0, .26);
}
.sn-header.is-scrolled .sn-header__inner { min-height: 66px; padding-block: .45rem; }
.sn-header.is-scrolled .sn-brand .sn-mark { transform: scale(.92); }
.sn-brand .sn-mark { transition: transform .28s var(--sn-ease-out), filter .28s var(--sn-ease-out); }

.sn-burger {
  position: relative;
  z-index: 72;
  align-items: center;
  gap: .6rem;
  min-height: 42px;
  padding-inline: .75rem;
}
.sn-burger__label { font: 500 .74rem/1 var(--sn-mono); letter-spacing: .08em; text-transform: uppercase; }
.sn-burger__icon { position: relative; display: grid; gap: 5px; width: 17px; }
.sn-burger__icon i { display: block; width: 17px; height: 1px; background: currentColor; transition: transform .25s var(--sn-ease-out), opacity .2s; }
.sn-burger[aria-expanded="true"] .sn-burger__icon i:first-child { transform: translateY(3px) rotate(45deg); }
.sn-burger[aria-expanded="true"] .sn-burger__icon i:last-child { transform: translateY(-3px) rotate(-45deg); }

.sn-nav-backdrop { display: none; }

/* ------------------------------------------------------- SpaceNet signature */
.sn-sec,
.sn-page-hero,
.sn-service-page { isolation: isolate; }

.sn-sec > .e-con-inner::before,
.sn-page-hero > .e-con-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--sn-gutter);
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, var(--sn-cyan), transparent);
  opacity: .72;
}

.sn-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  width: fit-content;
  font-weight: 500;
}
.sn-eyebrow::before {
  content: "";
  width: 16px;
  height: 1px;
  background: var(--sn-cyan);
  box-shadow: 0 0 12px color-mix(in srgb, var(--sn-cyan) 55%, transparent);
}

/* --------------------------------------------------------------- typography */
h1, h2, h3 { text-wrap: balance; }
.sn-lede { text-wrap: pretty; }
.sn-prose { max-width: 820px; }
.sn-prose p, .sn-prose li { max-width: var(--sn-copy); }
.sn-prose h2 { margin-top: 2.6em; padding-top: .3em; font-size: clamp(1.35rem, 2.7vw, 1.8rem); }
.sn-prose h3 { margin-top: 2em; font-size: 1.12rem; }
.sn-prose a { text-underline-offset: .18em; text-decoration-thickness: 1px; }
.sn-prose ul, .sn-prose ol { padding-left: 1.2rem; }

/* ----------------------------------------------------------------- buttons */
.sn-btn,
.elementor-widget-button .elementor-button {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.sn-btn::after,
.elementor-widget-button .elementor-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.14) 48%, transparent 74%);
  transform: translateX(-130%);
  transition: transform .7s var(--sn-ease-out);
  pointer-events: none;
}
.sn-btn:hover::after,
.elementor-widget-button .elementor-button:hover::after { transform: translateX(130%); }

/* ------------------------------------------------------------------- hero */
.sn-hero--home {
  min-height: min(820px, calc(100svh - var(--sn-header-h)));
  overflow: clip;
}
.sn-hero--home::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 150px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--sn-ink) 72%, transparent));
  pointer-events: none;
  z-index: 0;
}
.sn-hero__copy { position: relative; z-index: 3; }
.sn-hero__copy h1 { text-shadow: 0 14px 52px rgba(0,0,0,.25); }
.sn-hero__copy .sn-lede { color: color-mix(in srgb, var(--sn-text) 68%, var(--sn-muted)); }
.sn-hero__visual { perspective: 1100px; }

.sn-risk-map {
  --sn-tilt-x: 0deg;
  --sn-tilt-y: 0deg;
  --sn-map-x: 0px;
  --sn-map-y: 0px;
  transform: translate3d(var(--sn-map-x), var(--sn-map-y), 0) rotateX(var(--sn-tilt-x)) rotateY(var(--sn-tilt-y));
  transform-style: preserve-3d;
  transition: transform .5s var(--sn-ease-out), border-color .35s var(--sn-ease-out), box-shadow .35s var(--sn-ease-out);
  box-shadow: 0 36px 100px rgba(0,0,0,.34), inset 0 1px 0 color-mix(in srgb, var(--sn-text) 7%, transparent), 0 0 0 1px rgba(255,255,255,.01);
}
.sn-risk-map::after {
  content: "";
  position: absolute;
  inset: 10%;
  border: 1px solid color-mix(in srgb, var(--sn-cyan) 8%, transparent);
  border-radius: 22px;
  clip-path: polygon(0 0, 25% 0, 25% 1px, 1px 1px, 1px 25%, 0 25%, 0 0, 100% 0, 100% 25%, calc(100% - 1px) 25%, calc(100% - 1px) 1px, 75% 1px, 75% 0, 100% 0, 100% 100%, 75% 100%, 75% calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) 75%, 100% 75%, 100% 100%, 0 100%, 0 75%, 1px 75%, 1px calc(100% - 1px), 25% calc(100% - 1px), 25% 100%, 0 100%);
  pointer-events: none;
}
.sn-risk-map__core,
.sn-risk-map__node { transform-style: preserve-3d; }
.sn-risk-map__core { transform: translate(-50%, -50%) translateZ(28px); }
.sn-risk-map__node { transform: translateZ(18px); }
.sn-risk-map:hover { border-color: var(--sn-border-accent); box-shadow: 0 42px 110px rgba(0,0,0,.4), 0 0 64px color-mix(in srgb, var(--sn-cyan) 9%, transparent); }

/* --------------------------------------------------------------- services */
.sn-sec--services .sn-grid,
.sn-page-hero + .sn-sec .sn-grid { grid-auto-rows: 1fr; }

.sn-card {
  position: relative;
  isolation: isolate;
  min-height: 318px;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(420px 220px at -10% -12%, color-mix(in srgb, var(--sn-cyan) 9%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--sn-panel-2) 62%, transparent), color-mix(in srgb, var(--sn-panel) 94%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sn-text) 4%, transparent);
  transition: transform .3s var(--sn-ease-out), border-color .3s var(--sn-ease-out), box-shadow .3s var(--sn-ease-out), background .3s var(--sn-ease-out);
}
.sn-card::before {
  content: "";
  position: absolute;
  left: 2rem;
  right: 2rem;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--sn-cyan), color-mix(in srgb, var(--sn-blue) 70%, var(--sn-cyan)), transparent 72%);
  transform: scaleX(.24);
  transform-origin: left;
  opacity: .64;
  transition: transform .35s var(--sn-ease-out), opacity .35s;
}
.sn-card::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -72px;
  bottom: -78px;
  border: 1px solid color-mix(in srgb, var(--sn-cyan) 10%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 28px color-mix(in srgb, var(--sn-cyan) 2%, transparent), 0 0 0 56px color-mix(in srgb, var(--sn-blue) 2%, transparent);
  pointer-events: none;
  z-index: -1;
}
.sn-card:hover {
  transform: translateY(-5px);
  border-color: var(--sn-border-accent);
  box-shadow: var(--sn-glow-card), 0 0 54px color-mix(in srgb, var(--sn-cyan) 6%, transparent);
}
.sn-card:hover::before { transform: scaleX(1); opacity: 1; }
.sn-card__num { font-weight: 600; }
.sn-card h3 { font-size: clamp(1.2rem, 2.1vw, 1.52rem); max-width: 22ch; }
.sn-card p { line-height: 1.72; }
.sn-card__more { margin-top: .7rem; }

/* -------------------------------------------------------- approved About */
.sn-sec--about-home,
.sn-sec--about { overflow: clip; }
.sn-about__principles--home { margin-top: 1.25rem; }
.sn-sec--why .sn-iconbox,
.sn-about__principles .sn-iconbox {
  position: relative;
  min-height: 230px;
  border-radius: 18px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--sn-panel-2) 58%, transparent), color-mix(in srgb, var(--sn-panel) 92%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sn-text) 4%, transparent);
  transition: transform .3s var(--sn-ease-out), border-color .3s var(--sn-ease-out), background .3s var(--sn-ease-out);
}
.sn-sec--why .sn-iconbox:hover,
.sn-about__principles .sn-iconbox:hover { transform: translateY(-4px); border-color: var(--sn-border-accent); }

/* ------------------------------------------------------------- who we help */
.sn-sec--who .sn-dims { counter-reset: sn-dim; }
.sn-sec--who .sn-dims li {
  position: relative;
  overflow: hidden;
  transition: transform .28s var(--sn-ease-out), border-color .28s var(--sn-ease-out), background .28s var(--sn-ease-out);
}
.sn-sec--who .sn-dims li::after {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  right: -64px;
  bottom: -64px;
  border: 1px solid color-mix(in srgb, var(--sn-cyan) 12%, transparent);
  border-radius: 50%;
}
.sn-sec--who .sn-dims li:hover { transform: translateY(-3px); }

/* -------------------------------------------------------------- CTA panel */
.sn-cta-panel,
.sn-svc-cta {
  position: relative;
  overflow: hidden;
}
.sn-cta-panel::after,
.sn-svc-cta::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -220px;
  top: -250px;
  border: 1px solid color-mix(in srgb, var(--sn-cyan) 12%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 48px color-mix(in srgb, var(--sn-cyan) 2%, transparent), 0 0 0 96px color-mix(in srgb, var(--sn-blue) 2%, transparent);
  pointer-events: none;
}

/* ------------------------------------------------------------- page heroes */
.sn-page-hero { min-height: 440px; overflow: clip; }
.sn-page-hero::before {
  content: "";
  position: absolute;
  right: max(var(--sn-gutter), calc((100vw - var(--sn-wrap))/2));
  top: 50%;
  width: min(34vw, 430px);
  aspect-ratio: 1;
  transform: translateY(-45%);
  border: 1px solid color-mix(in srgb, var(--sn-cyan) 9%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 44px color-mix(in srgb, var(--sn-cyan) 2%, transparent), 0 0 0 88px color-mix(in srgb, var(--sn-blue) 2%, transparent);
  pointer-events: none;
}

/* ----------------------------------------------------------- service pages */
.single-sn_service .sn-section > .sn-wrap { max-width: 1220px; }
.sn-svc-head {
  position: relative;
  min-height: 360px;
  align-items: center;
  padding: clamp(2rem, 5vw, 3.5rem);
  background:
    radial-gradient(620px 300px at 92% 30%, color-mix(in srgb, var(--sn-cyan) 10%, transparent), transparent 72%),
    linear-gradient(145deg, color-mix(in srgb, var(--sn-panel-2) 78%, transparent), color-mix(in srgb, var(--sn-panel) 96%, transparent));
}
.sn-svc-head__meta { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.sn-svc-head__meta .sn-icon { margin: 0; }
.sn-svc-head__num {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 38px;
  padding-inline: .65rem;
  border: 1px solid color-mix(in srgb, var(--sn-cyan) 24%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--sn-cyan) 6%, transparent);
  font: 600 .73rem/1 var(--sn-mono);
  letter-spacing: .12em;
  color: var(--sn-cyan);
}
.sn-svc-head__meta .sn-eyebrow { margin: 0; }
.sn-svc-head__meta .sn-eyebrow::before { display: none; }
.sn-svc-head h1 { position: relative; z-index: 2; }
.sn-svc-head .sn-lede { max-width: 66ch; }
.sn-svc-head__fig { display: none; }

.sn-service-signature {
  position: absolute;
  right: clamp(1rem, 5vw, 4rem);
  top: 50%;
  width: min(34%, 330px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  opacity: .78;
  pointer-events: none;
}
.sn-service-signature__ring,
.sn-service-signature__line,
.sn-service-signature__node { position: absolute; display: block; }
.sn-service-signature__ring {
  left: 50%; top: 50%;
  border: 1px solid color-mix(in srgb, var(--sn-cyan) 24%, transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.sn-service-signature__ring--a { width: 54%; height: 54%; }
.sn-service-signature__ring--b { width: 86%; height: 86%; border-style: dashed; border-color: color-mix(in srgb, var(--sn-blue) 22%, transparent); }
.sn-service-signature__line { left: 12%; right: 12%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sn-cyan) 50%, transparent), transparent); transform-origin: center; }
.sn-service-signature__line--b { transform: rotate(90deg); }
.sn-service-signature__node { width: 8px; height: 8px; border-radius: 50%; background: var(--sn-cyan); box-shadow: 0 0 18px color-mix(in srgb, var(--sn-cyan) 70%, transparent); }
.sn-service-signature__node--a { left: 16%; top: 42%; }
.sn-service-signature__node--b { right: 20%; top: 20%; }
.sn-service-signature__node--c { right: 25%; bottom: 18%; }

/* Small geometric variation per client-approved service, purely decorative. */
.sn-service-page--tprm .sn-service-signature__line--a { transform: rotate(-28deg); }
.sn-service-page--tprm .sn-service-signature__line--b { transform: rotate(32deg); }
.sn-service-page--vuln .sn-service-signature__ring--a { border-radius: 24%; transform: translate(-50%, -50%) rotate(18deg); }
.sn-service-page--health .sn-service-signature__line--a { transform: rotate(45deg); }
.sn-service-page--health .sn-service-signature__line--b { transform: rotate(-45deg); }
.sn-service-page--governance .sn-service-signature__ring--a { border-radius: 10%; transform: translate(-50%, -50%) rotate(45deg); }
.sn-service-page--ai .sn-service-signature__ring--a { border-radius: 28%; }
.sn-service-page--ai .sn-service-signature__ring--b { border-radius: 32%; transform: translate(-50%, -50%) rotate(22deg); }

.sn-service__body { counter-reset: sn-service-section; }
.sn-service__body > .sn-blk:not(.sn-note) { counter-increment: sn-service-section; }
.sn-service__body > .sn-blk:not(.sn-note) > h2 { display: flex; align-items: baseline; gap: .8rem; }
.sn-service__body > .sn-blk:not(.sn-note) > h2::before {
  content: counter(sn-service-section, decimal-leading-zero);
  flex: none;
  font: 600 .65rem/1 var(--sn-mono);
  letter-spacing: .12em;
  color: var(--sn-cyan-dim);
}
.sn-service__body > .sn-blk {
  border-left: 1px solid color-mix(in srgb, var(--sn-line) 78%, transparent);
  padding-left: 2rem;
}
.sn-service__body > .sn-blk::before { background: var(--sn-cyan); }
.sn-blk--problem { border: 1px solid var(--sn-border-premium) !important; }
.sn-blk--problem > h2::before { color: var(--sn-cyan) !important; }
.sn-steps li,
.sn-deliv--cards > div,
.sn-ticks--cards li {
  transition: transform .25s var(--sn-ease-out), border-color .25s var(--sn-ease-out), background .25s var(--sn-ease-out);
}
.sn-steps li:hover,
.sn-deliv--cards > div:hover,
.sn-ticks--cards li:hover { transform: translateY(-2px); border-color: var(--sn-border-accent); }
.sn-service__aside .sn-panel { border-color: var(--sn-border-premium); }
.sn-service__aside .sn-panel::before {
  content: "";
  display: block;
  width: 42px;
  height: 2px;
  margin-bottom: 1.25rem;
  background: linear-gradient(90deg, var(--sn-cyan), transparent);
}

/* --------------------------------------------------------------- contact */
.sn-sec--contact .sn-contact-form,
.sn-sec--contact .sn-contact-aside { border-color: var(--sn-border-premium); }
.sn-contact-aside a { overflow-wrap: anywhere; }
.elementor-form .elementor-field-textual,
.elementor-form select,
.elementor-form textarea {
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.elementor-form .elementor-field-textual:focus,
.elementor-form select:focus,
.elementor-form textarea:focus {
  border-color: var(--sn-cyan) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sn-cyan) 12%, transparent) !important;
  background: color-mix(in srgb, var(--sn-panel-2) 62%, var(--sn-ink)) !important;
}

/* ---------------------------------------------------------- legal content */
.page .sn-prose > :first-child { margin-top: 0; }
.page .sn-prose h2 { padding-top: .85rem; border-top: 1px solid var(--sn-line-soft); }
.page .sn-prose strong { color: var(--sn-text); }

/* ---------------------------------------------------------------- footer */
.sn-footer { position: relative; overflow: clip; }
.sn-footer::before {
  content: "";
  position: absolute;
  right: -140px;
  top: -180px;
  width: 430px;
  height: 430px;
  border: 1px solid color-mix(in srgb, var(--sn-cyan) 8%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 52px color-mix(in srgb, var(--sn-cyan) 2%, transparent), 0 0 0 104px color-mix(in srgb, var(--sn-blue) 2%, transparent);
  pointer-events: none;
}
.sn-footer__inner, .sn-legal__inner { position: relative; z-index: 1; }
.sn-footer a { transition: color .2s var(--sn-ease-out), transform .2s var(--sn-ease-out); }
.sn-footer li a { display: inline-block; }
.sn-footer li a:hover { transform: translateX(2px); }

/* -------------------------------------------------------------- reveal UX */
.sn-reveal { will-change: opacity, transform; }
.sn-reveal.is-in { transition-timing-function: var(--sn-ease-out); }

/* ---------------------------------------------------------- accessibility */
@media (forced-colors: active) {
  .sn-card, .sn-iconbox, .sn-risk-map, .sn-svc-head, .sn-panel, .sn-cta-panel { border: 1px solid CanvasText; }
  .sn-btn--primary { border: 1px solid ButtonText; }
}

/* --------------------------------------------------------------- responsive */
@media (max-width: 1020px) {
  .sn-service-signature { opacity: .34; right: 1rem; width: 300px; }
  .sn-svc-head .sn-rail { max-width: 75%; }
}

@media (max-width: 900px) {
  :root { --sn-header-h: 68px; }

  .sn-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 58;
    background: rgba(2, 6, 11, .62);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s var(--sn-ease-out), visibility .25s;
  }
  body.sn-nav-open .sn-nav-backdrop { opacity: 1; visibility: visible; }

  .sn-nav {
    display: flex;
    position: fixed;
    z-index: 64;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(88vw, 430px);
    padding: calc(var(--sn-header-h) + 2.25rem) 1.5rem 2rem;
    background:
      radial-gradient(420px 300px at 100% 0%, color-mix(in srgb, var(--sn-cyan) 10%, transparent), transparent 72%),
      color-mix(in srgb, var(--sn-panel) 96%, var(--sn-ink));
    border-left: 1px solid var(--sn-border-premium);
    box-shadow: -34px 0 80px rgba(0,0,0,.42);
    transform: translateX(104%);
    visibility: hidden;
    transition: transform .36s var(--sn-ease-out), visibility .36s;
    flex-direction: column;
    overflow-y: auto;
  }
  .sn-nav.is-open { display: flex; transform: none; visibility: visible; }
  .sn-nav ul { width: 100%; gap: .35rem; }
  .sn-nav li { width: 100%; }
  .sn-nav a {
    width: 100%;
    padding: .85rem .25rem;
    border-radius: 0;
    border-bottom: 1px solid var(--sn-line-soft);
    font-family: var(--sn-display);
    font-size: clamp(1.3rem, 5vw, 1.75rem);
    color: var(--sn-text);
  }
  .sn-nav a::after { left: .25rem; right: auto; bottom: .58rem; width: 38px; }
  .sn-nav__cta { display: block; width: 100%; margin-top: auto; padding-top: 2rem; }
  .sn-nav__cta .sn-btn { width: 100%; }
  .sn-lang { position: relative; z-index: 70; }
  .sn-burger { position: relative; z-index: 70; }

  .sn-service { grid-template-columns: 1fr; }
  .sn-service__aside { position: static; order: -1; }
  .sn-service__aside .sn-panel { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; }
  .sn-service__aside .sn-panel::before { grid-column: 1 / -1; margin-bottom: 0; }
  .sn-service__aside .sn-btn { white-space: nowrap; }
}

@media (max-width: 760px) {
  .sn-sec > .e-con-inner::before,
  .sn-page-hero > .e-con-inner::before { left: 18px; }

  .sn-hero--home { padding-top: .6rem; }
  .sn-hero__visual { padding-top: .5rem; }
  .sn-risk-map { width: min(100%, 440px); }

  .sn-card { min-height: 0; }
  .sn-sec--why .sn-iconbox,
  .sn-about__principles .sn-iconbox { min-height: 0; }

  .sn-page-hero { min-height: 340px; }
  .sn-page-hero::before { width: 250px; right: -90px; opacity: .55; }

  .sn-svc-head { min-height: 0; padding: 1.5rem; }
  .sn-svc-head .sn-rail { max-width: 100%; }
  .sn-service-signature { width: 230px; right: -100px; opacity: .2; }
  .sn-service__body > .sn-blk { padding-left: 1.1rem; }
  .sn-service__aside .sn-panel { grid-template-columns: 1fr; }
  .sn-service__aside .sn-btn { width: 100%; }

  .sn-footer__inner { grid-template-columns: 1fr; }
  .sn-legal__inner { align-items: flex-start; }
}

@media (max-width: 520px) {
  .sn-header__inner { gap: .6rem; }
  .sn-brand__name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
  .sn-lang__item { padding-inline: .52rem; }
  .sn-burger__label { display: none; }

  .sn-risk-map { aspect-ratio: 1 / 1.06; }
  .sn-risk-map::after { inset: 7%; }

  .sn-svc-head__meta { flex-wrap: wrap; }
  .sn-svc-head h1 { font-size: clamp(2.15rem, 11vw, 3rem); }

  .sn-cta-panel .elementor-widget-container,
  .sn-svc-cta { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sn-header, .sn-header__inner, .sn-nav, .sn-nav-backdrop,
  .sn-card, .sn-iconbox, .sn-risk-map, .sn-btn, .elementor-button,
  .sn-steps li, .sn-deliv--cards > div, .sn-ticks--cards li { transition: none !important; }
  .sn-risk-map { transform: none !important; }
  .sn-btn::after, .elementor-widget-button .elementor-button::after { display: none; }
}

/* SpaceNet 8 removes the legacy app-style mobile tabbar: the client-approved navigation
   remains in the header/menu on every viewport. */
@media (max-width: 900px) {
  body { padding-bottom: 0 !important; }
  .sn-tabbar { display: none !important; }
}


/* ===== src/v81.css ===== */
/*
 * SpaceNet Cybersécurité 8.1
 * Mobile-first UX + final responsive/navigation polish.
 * Loaded after v8.css and intentionally limited to presentation overrides.
 */

:root {
  --sn-header-h: 62px;
  --sn-mobile-bar-h: 72px;
  --sn-admin-offset: 0px;
}

body.admin-bar { --sn-admin-offset: 32px; }

/* ------------------------------------------------------- mobile-first shell */
.sn-header {
  top: var(--sn-admin-offset);
  z-index: 80;
}

.sn-header__inner {
  min-height: var(--sn-header-h);
  flex-wrap: nowrap;
  gap: .55rem;
  padding-block: .45rem;
}

.sn-brand {
  min-width: 42px;
  margin-right: auto;
}

.sn-brand__desktop { display: none; }
.sn-brand__mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
}
.sn-brand__mobile .sn-mark { width: 31px; height: 31px; }
.sn-brand__mobile-image { display: block; width: 31px; height: 31px; object-fit: contain; }
.sn-brand__image { display: block; width: auto; max-width: 245px; height: 40px; object-fit: contain; }

.sn-header__inner > .sn-btn { display: none; }

/* ------------------------------------------------------------ language UI */
.sn-lang {
  order: 2;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sn-panel) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--sn-line) 86%, transparent);
  overflow: visible;
}
.sn-lang__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  min-width: 44px;
  min-height: 36px;
  padding: .35rem .48rem;
  border-radius: 999px;
  font-family: var(--sn-mono);
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1;
  color: var(--sn-muted);
  text-decoration: none;
  transition: color .2s var(--sn-ease-out), background .2s var(--sn-ease-out), box-shadow .2s var(--sn-ease-out);
}
.sn-lang__flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  min-width: 18px;
  font-size: .92rem;
  line-height: 1;
}
.sn-lang__flag img {
  display: block;
  width: 18px;
  height: 12px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
}
.sn-lang__item.is-current {
  color: var(--sn-on-accent);
  background: var(--sn-cyan);
  box-shadow: 0 5px 16px color-mix(in srgb, var(--sn-cyan) 18%, transparent);
}

/* --------------------------------------------------------------- top menu */
.sn-burger {
  order: 3;
  display: inline-flex;
  min-width: 42px;
  min-height: 42px;
  padding: .55rem .62rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--sn-panel) 72%, transparent);
  border-color: color-mix(in srgb, var(--sn-line) 82%, transparent);
}
.sn-burger__label { display: none; }

.sn-nav-backdrop {
  inset: calc(var(--sn-admin-offset) + var(--sn-header-h)) 0 0;
}

.sn-nav {
  top: calc(var(--sn-admin-offset) + var(--sn-header-h));
  bottom: 0;
  width: min(91vw, 390px);
  padding: 1.35rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--sn-line-soft);
}
.sn-nav a {
  min-height: 54px;
  display: flex;
  align-items: center;
}
.sn-nav__cta { padding-bottom: calc(var(--sn-mobile-bar-h) + .5rem); }

/* ------------------------------------------------------ fixed mobile tabs */
body {
  padding-bottom: calc(var(--sn-mobile-bar-h) + env(safe-area-inset-bottom));
}

.sn-tabbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 78;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  min-height: var(--sn-mobile-bar-h);
  padding: 6px max(6px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--sn-ink) 92%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--sn-line) 86%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  backdrop-filter: blur(20px) saturate(135%);
  box-shadow: 0 -18px 48px rgba(0,0,0,.26);
}
.sn-tabbar__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 56px;
  padding: 5px 3px;
  border-radius: 11px;
  color: var(--sn-muted);
  text-decoration: none;
  transition: color .2s var(--sn-ease-out), background .2s var(--sn-ease-out), transform .2s var(--sn-ease-out);
}
.sn-tabbar__item::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 50%;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: var(--sn-cyan);
  transform: translateX(-50%) scaleX(0);
  transition: transform .2s var(--sn-ease-out);
}
.sn-tabbar__icon { display: inline-flex; line-height: 0; }
.sn-tabbar__label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 600 .62rem/1.1 var(--sn-body);
  letter-spacing: -.01em;
}
.sn-tabbar__item[aria-current="page"] {
  color: var(--sn-cyan);
  background: color-mix(in srgb, var(--sn-cyan) 7%, transparent);
}
.sn-tabbar__item[aria-current="page"]::before { transform: translateX(-50%) scaleX(1); }
.sn-tabbar__item--accent { color: color-mix(in srgb, var(--sn-cyan) 82%, var(--sn-text)); }
.sn-tabbar__item:active { transform: scale(.97); }
body.sn-nav-open .sn-tabbar { opacity: 0; visibility: hidden; pointer-events: none; }

/* ------------------------------------------------------------- page rhythm */
.sn-main { min-height: 66vh; }
.sn-hero::after { background-image: var(--sn-hero-image-mobile, var(--sn-hero-image, none)); }
.sn-sec > .e-con-inner,
.sn-page-hero > .e-con-inner,
.sn-hero--home > .e-con-inner { padding-inline: 18px !important; }

.sn-page-hero {
  min-height: 300px;
  padding-top: .25rem;
}
.sn-page-hero .elementor-heading-title,
.sn-page-hero h1 {
  max-width: 15ch;
  font-size: clamp(2.55rem, 11.5vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.04em;
}
.sn-page-hero .sn-lede { font-size: 1rem; line-height: 1.65; }

.sn-hero--home { min-height: auto; }
.sn-hero__copy h1 {
  max-width: 12.8ch;
  font-size: clamp(2.65rem, 13vw, 4.2rem);
  line-height: .99;
}
.sn-hero__copy .sn-lede { font-size: 1rem; line-height: 1.65; }
.sn-hero__actions { width: 100%; }

.sn-card {
  padding: 1.45rem;
  border-radius: 15px;
}
.sn-card h3 { margin-top: .25rem; font-size: 1.2rem; line-height: 1.22; }
.sn-card p { line-height: 1.68; }
.sn-card__more { margin-top: .95rem; }

.sn-sec--why .sn-iconbox,
.sn-about__principles .sn-iconbox { padding: 1.35rem; }

.sn-sec--who .sn-dims {
  grid-template-columns: 1fr;
  gap: 10px;
}
.sn-sec--who .sn-dims li {
  min-height: 90px;
  padding: 1rem 1.05rem;
}

.sn-cta-panel {
  margin-inline: 12px;
  border-radius: 18px;
}
.sn-cta-panel .sn-el-ghost { display: none !important; }

.sn-footer {
  margin-top: clamp(1.75rem, 6vw, 3.25rem);
}
.sn-footer__inner { padding-block: 2.8rem; }
.sn-footer p,
.sn-footer a { font-size: .94rem; }
.sn-legal { padding-bottom: .35rem; }

/* Legal / long form reading on mobile. */
.page .sn-prose { font-size: 1rem; line-height: 1.75; }
.page .sn-prose h2 { scroll-margin-top: calc(var(--sn-header-h) + var(--sn-admin-offset) + 18px); }

/* ---------------------------------------------------------- tiny screens */
@media (max-width: 380px) {
  .sn-header__inner { gap: .38rem; }
  .sn-lang__item { min-width: 40px; padding-inline: .38rem; }
  .sn-lang__flag { width: 16px; min-width: 16px; }
  .sn-lang__flag img { width: 16px; height: 11px; }
  .sn-tabbar__label { font-size: .58rem; }
  .sn-page-hero .elementor-heading-title,
  .sn-page-hero h1 { font-size: clamp(2.25rem, 11vw, 3.2rem); }
}

/* --------------------------------------------------------------- tablet */
@media (min-width: 560px) {
  .sn-sec--who .sn-dims { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sn-card { padding: 1.6rem; }
}

@media (min-width: 761px) {
  :root { --sn-header-h: 68px; }

  .sn-header__inner { gap: .8rem; padding-block: .55rem; }
  .sn-brand__desktop { display: inline-flex; align-items: center; gap: .72rem; }
  .sn-brand__mobile { display: none; }
  .sn-brand__name { display: block; font-size: .92rem; }
  .sn-brand__image { height: 38px; }

  .sn-burger__label { display: inline; }
  .sn-lang__item { min-width: 49px; padding-inline: .56rem; }

  .sn-hero::after { background-image: var(--sn-hero-image, none); }
  .sn-page-hero { min-height: 350px; }
  .sn-page-hero .elementor-heading-title,
  .sn-page-hero h1 { font-size: clamp(3rem, 7vw, 4.6rem); }

}

/* -------------------------------------------------------------- desktop */
@media (min-width: 901px) {
  :root { --sn-header-h: 76px; --sn-mobile-bar-h: 0px; }

  body { padding-bottom: 0; }
  .sn-tabbar { display: none !important; }
  .sn-footer { padding-bottom: 0; margin-top: clamp(2rem, 4vw, 3.75rem); }

  .sn-header__inner { min-height: 76px; gap: 1rem; padding-block: .7rem; }
  .sn-burger { display: none; }
  .sn-nav-backdrop { display: none; }
  .sn-nav {
    position: static;
    display: block;
    width: auto;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    transform: none;
    visibility: visible;
    overflow: visible;
  }
  .sn-nav ul { width: auto; }
  .sn-nav li { width: auto; }
  .sn-nav a { min-height: 0; display: block; }
  .sn-brand__name { font-size: 1rem; }
  .sn-brand__image { height: 42px; }
  .sn-header__inner > .sn-btn { display: inline-flex; }

  .sn-lang__item { min-width: 52px; min-height: 38px; padding-inline: .62rem; }

  .sn-page-hero { min-height: 410px; }
  .sn-page-hero .elementor-heading-title,
  .sn-page-hero h1 { max-width: 18ch; font-size: clamp(3.2rem, 5.3vw, 5rem); }

  .sn-hero__copy h1 { max-width: 15.5ch; }
  .sn-card { padding: 1.8rem; }
  .sn-card h3 { font-size: clamp(1.25rem, 1.8vw, 1.52rem); }

  .sn-sec--who .sn-dims { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .sn-sec--who .sn-dims li { min-height: 112px; }

  .sn-footer p,
  .sn-footer a { font-size: .95rem; }
}

/* --------------------------------------------------------- WP admin bar */
@media (max-width: 782px) {
  body.admin-bar { --sn-admin-offset: 46px; }
}

/* -------------------------------------------------------- accessibility */
.sn-brand:focus-visible,
.sn-lang__item:focus-visible,
.sn-tabbar__item:focus-visible,
.sn-burger:focus-visible {
  outline: var(--sn-focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .sn-tabbar__item,
  .sn-tabbar__item::before,
  .sn-lang__item { transition: none !important; }
}


/* ===== src/v82.css ===== */
/*
 * SpaceNet Cybersécurité 8.2
 * Mega menu + reliable mobile header visibility.
 * Loaded after v81.css.
 */

/* ------------------------------------------------------- navigation shell */
.sn-header {
  isolation: isolate;
}

.sn-nav__menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sn-menu-item__row {
  display: flex;
  align-items: center;
  min-width: 0;
}

.sn-mega-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--sn-muted);
  cursor: pointer;
  transition: color .2s var(--sn-ease-out), background .2s var(--sn-ease-out), border-color .2s var(--sn-ease-out), transform .2s var(--sn-ease-out);
}
.sn-mega-toggle span {
  display: block;
  font-size: 1rem;
  line-height: 1;
  transform: translateY(-1px);
  transition: transform .22s var(--sn-ease-out);
}
.sn-menu-item--mega.is-mega-open > .sn-menu-item__row .sn-mega-toggle span {
  transform: translateY(1px) rotate(180deg);
}
.sn-mega-toggle:hover,
.sn-mega-toggle:focus-visible {
  color: var(--sn-cyan);
  background: color-mix(in srgb, var(--sn-cyan) 7%, transparent);
  border-color: color-mix(in srgb, var(--sn-cyan) 25%, var(--sn-line));
}

/* --------------------------------------------------------------- mega UI */
.sn-mega {
  --sn-mega-cols: 3;
}

.sn-mega__shell {
  border: 1px solid var(--sn-border-premium, var(--sn-line));
  background:
    radial-gradient(540px 260px at 16% -10%, color-mix(in srgb, var(--sn-cyan) 9%, transparent), transparent 72%),
    radial-gradient(420px 260px at 96% 110%, color-mix(in srgb, #3154ff 8%, transparent), transparent 74%),
    color-mix(in srgb, var(--sn-panel) 97%, var(--sn-ink));
  box-shadow: 0 28px 90px rgba(0, 0, 0, .42);
}

.sn-mega__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.sn-mega__eyebrow {
  font: 600 .64rem/1 var(--sn-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sn-cyan);
}

.sn-mega__all {
  display: inline-flex !important;
  align-items: center;
  gap: .45rem;
  width: auto !important;
  min-height: 0 !important;
  padding: .48rem .65rem !important;
  border: 0 !important;
  border-radius: 8px !important;
  font: 600 .72rem/1 var(--sn-mono) !important;
  letter-spacing: .04em;
  color: var(--sn-text) !important;
  background: color-mix(in srgb, var(--sn-panel-2) 72%, transparent);
  text-decoration: none;
}
.sn-mega__all span { color: var(--sn-cyan); }

.sn-mega__grid {
  display: grid;
  gap: 10px;
}

.sn-mega__service {
  position: relative;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start !important;
  gap: .85rem;
  width: 100% !important;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--sn-line) 84%, transparent) !important;
  background: color-mix(in srgb, var(--sn-panel-2) 58%, transparent);
  text-decoration: none;
  overflow: hidden;
}
.sn-mega__service::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 54px;
  height: 1px;
  background: linear-gradient(90deg, var(--sn-cyan), transparent);
  opacity: .65;
  transform-origin: left;
  transform: scaleX(.55);
  transition: transform .22s var(--sn-ease-out), opacity .22s var(--sn-ease-out);
}
.sn-mega__service:hover::before,
.sn-mega__service:focus-visible::before {
  opacity: 1;
  transform: scaleX(1);
}

.sn-mega__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 20px;
  margin-top: .05rem;
  border: 1px solid color-mix(in srgb, var(--sn-cyan) 32%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--sn-cyan) 8%, transparent);
  font: 600 .58rem/1 var(--sn-mono);
  letter-spacing: .05em;
  color: var(--sn-cyan);
}

.sn-mega__copy {
  display: block;
  min-width: 0;
}
.sn-mega__copy strong {
  display: block;
  font-family: var(--sn-display);
  font-weight: 600;
  color: var(--sn-text);
}
.sn-mega__copy small {
  display: block;
  margin-top: .38rem;
  color: var(--sn-muted);
  font-family: var(--sn-body);
  font-weight: 400;
}
.sn-mega__arrow {
  align-self: center;
  color: var(--sn-cyan);
  transition: transform .2s var(--sn-ease-out);
}
.sn-mega__service:hover .sn-mega__arrow,
.sn-mega__service:focus-visible .sn-mega__arrow {
  transform: translateX(4px);
}

/* -------------------------------------------------------------- mobile */
@media (max-width: 900px) {
  /* A fixed header is used by default because sticky headers can disappear
     inside builders/containers with overflow or transform rules. */
  body.sn-mobile-header-fixed .sn-header {
    position: fixed !important;
    top: var(--sn-admin-offset) !important;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9990 !important;
    /*
     * Le fond et le flou sont déportés sur un pseudo-élément.
     *
     * backdrop-filter posé sur l'en-tête lui-même en faisait le bloc conteneur
     * de tous ses descendants en position fixe. Le tiroir de navigation, calé
     * sur `top: hauteur d'en-tête` et `bottom: 0`, se retrouvait borné par la
     * boîte de l'en-tête (76 px) au lieu de la fenêtre : il s'ouvrait sur
     * 46 px de haut, et le menu mobile était inutilisable.
     *
     * Sur le pseudo-élément, l'effet visuel est identique mais l'en-tête
     * redevient un parent ordinaire pour le positionnement.
     */
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 10px 32px rgba(0, 0, 0, .16);
  }
  body.sn-mobile-header-fixed .sn-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--sn-ink) 94%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    backdrop-filter: blur(18px) saturate(135%);
  }
  body.sn-mobile-header-fixed .sn-header + .sn-main {
    padding-top: var(--sn-header-h);
  }

  .sn-header__inner {
    position: relative;
    z-index: 9992;
    width: 100%;
  }
  /*
   * Place pour la barre d'onglets en bas de page.
   *
   * La version 8 avait supprimé cette barre et mis le retrait du corps à zéro
   * en !important. La 8.1 a réintroduit la barre sans lever cette règle : le
   * pied de page passait donc sous la barre, et ses derniers liens — mentions
   * légales, confidentialité — devenaient inatteignables.
   *
   * Le retrait est rétabli, et conditionné à la classe que le thème pose
   * seulement quand la barre est réellement active.
   */
  body.sn-mobile-tabbar-enabled {
    padding-bottom: calc(var(--sn-mobile-bar-h) + env(safe-area-inset-bottom)) !important;
  }

  .sn-nav-backdrop {
    z-index: 9980 !important;
  }
  .sn-nav {
    z-index: 9991 !important;
    overscroll-behavior: contain;
  }

  /* The mobile header intentionally shows the mark only. */
  .sn-brand__desktop { display: none !important; }
  .sn-brand__mobile { display: inline-flex !important; }
  .sn-brand__mobile-image,
  .sn-brand__mobile .sn-mark {
    width: 32px;
    height: 32px;
  }

  .sn-nav__menu {
    display: flex !important;
    flex-direction: column;
    gap: .22rem !important;
    width: 100%;
    padding: 0 !important;
  }
  .sn-menu-item {
    width: 100%;
  }
  .sn-menu-item__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .35rem;
    width: 100%;
  }
  .sn-menu-item__row > .sn-nav__link {
    min-width: 0;
  }
  .sn-mega-toggle {
    display: inline-flex;
    width: 44px;
    height: 44px;
    border-color: color-mix(in srgb, var(--sn-line) 72%, transparent);
  }
  .sn-menu-item--mega-no-mobile .sn-mega-toggle,
  .sn-menu-item--mega-no-mobile .sn-mega {
    display: none !important;
  }

  /* Mobile mega = compact accordion inside the drawer. */
  .sn-mega {
    position: static;
    width: 100%;
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: max-height .36s var(--sn-ease-out), opacity .2s var(--sn-ease-out), transform .28s var(--sn-ease-out), visibility .28s;
  }
  .sn-menu-item--mega.is-mega-open > .sn-mega {
    max-height: 760px;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .sn-mega__shell {
    margin: .25rem 0 .8rem;
    padding: .8rem;
    border-radius: 14px;
    box-shadow: none;
    background: color-mix(in srgb, var(--sn-panel-2) 76%, transparent);
  }
  .sn-mega__top {
    padding: .05rem .1rem .7rem;
  }
  .sn-mega__eyebrow {
    font-size: .58rem;
  }
  .sn-mega__all {
    font-size: .62rem !important;
  }
  .sn-mega__grid {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .sn-mega__service {
    min-height: 0 !important;
    padding: .78rem .82rem !important;
    border-radius: 11px !important;
    font-size: 1rem !important;
    line-height: 1.25 !important;
  }
  .sn-mega__copy strong {
    font-size: .94rem;
    line-height: 1.22;
  }
  .sn-mega__copy small {
    display: none;
  }
  .sn-mega__arrow {
    font-size: .9rem;
  }

  /* Stronger visibility for top controls on very small screens. */
  .sn-lang,
  .sn-burger {
    flex: none;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .sn-burger {
    color: var(--sn-text);
    background: color-mix(in srgb, var(--sn-panel-2) 82%, transparent);
  }

  body.sn-mobile-tabbar-disabled {
    padding-bottom: env(safe-area-inset-bottom);
  }
  body.sn-mobile-tabbar-disabled .sn-tabbar {
    display: none !important;
  }
}

@media (max-width: 380px) {
  .sn-header__inner {
    padding-inline: 12px;
    gap: .28rem;
  }
  .sn-brand {
    min-width: 34px;
  }
  .sn-brand__mobile {
    width: 34px;
    height: 34px;
  }
  .sn-brand__mobile-image,
  .sn-brand__mobile .sn-mark {
    width: 29px;
    height: 29px;
  }
  .sn-lang__item {
    min-width: 36px;
    min-height: 34px;
    padding-inline: .28rem;
    gap: .2rem;
  }
  .sn-lang__code {
    font-size: .59rem;
  }
  .sn-burger {
    min-width: 38px;
    min-height: 38px;
    padding: .45rem .5rem;
  }
}

/* ------------------------------------------------------------- desktop */
@media (min-width: 901px) {
  .sn-header {
    z-index: 900;
  }
  .sn-nav {
    position: static;
  }
  .sn-nav__menu {
    display: flex;
    align-items: center;
    gap: .12rem;
  }
  .sn-menu-item {
    position: relative;
  }
  .sn-menu-item--mega {
    position: static;
  }
  .sn-menu-item__row {
    gap: .1rem;
  }
  .sn-menu-item--mega .sn-mega-toggle {
    display: inline-flex;
    width: 30px;
    height: 30px;
    margin-left: -.22rem;
  }

  /*
   * Ancrage du panneau.
   *
   * `fixed` ne donnait pas le résultat attendu : .sn-header porte un
   * backdrop-filter, ce qui en fait le bloc conteneur des descendants en
   * position fixe. Le décalage « hauteur d'en-tête » s'appliquait donc une
   * seconde fois, à partir du haut de l'en-tête et non du haut de la fenêtre,
   * et le panneau s'ouvrait 49 px trop bas. Entre l'onglet et le panneau
   * s'installait une bande morte : le pointeur qui descendait la traversait,
   * quittait l'élément de menu, et le panneau se refermait avant d'être
   * atteint — les services étaient visibles mais pas cliquables.
   *
   * `absolute` + `top: 100%` colle le panneau sous l'en-tête, qui est déjà
   * positionné, sans dépendre d'aucune variable de hauteur.
   */
  .sn-mega {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 910;
    width: min(1180px, calc(100vw - 36px));
    padding-top: 10px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -8px) scale(.992);
    transform-origin: 50% 0;
    transition: opacity .18s var(--sn-ease-out), transform .22s var(--sn-ease-out), visibility .22s;
  }
  /*
   * Pont de survol.
   *
   * Les entrées de menu s'arrêtent avant le bas de l'en-tête : il reste une
   * bande d'une vingtaine de pixels qui n'appartient à aucune des deux zones.
   * Ce pseudo-élément la couvre. Il est transparent, descend de l'élément de
   * menu — le survol reste donc actif — et hérite du `pointer-events: none` du
   * panneau fermé, donc il n'intercepte rien tant que le menu n'est pas ouvert.
   */
  .sn-mega::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: -26px;
    height: 26px;
  }

  .sn-menu-item--mega:hover > .sn-mega,
  .sn-menu-item--mega:focus-within > .sn-mega,
  .sn-menu-item--mega.is-mega-open > .sn-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
  }
  .sn-mega__shell {
    padding: 1.15rem;
    border-radius: 18px;
  }
  .sn-mega__top {
    min-height: 42px;
    margin-bottom: .75rem;
    padding: 0 .2rem;
  }
  .sn-mega__grid {
    grid-template-columns: repeat(var(--sn-mega-cols), minmax(0, 1fr));
  }
  .sn-mega__service {
    min-height: 112px !important;
    padding: 1rem 1rem .95rem !important;
    border-radius: 13px !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
  }
  .sn-mega__copy strong {
    font-size: .98rem;
    line-height: 1.2;
  }
  .sn-mega__copy small {
    font-size: .78rem;
    line-height: 1.45;
  }
  .sn-mega__service:hover,
  .sn-mega__service:focus-visible {
    background: color-mix(in srgb, var(--sn-cyan) 5%, var(--sn-panel-2));
    border-color: color-mix(in srgb, var(--sn-cyan) 24%, var(--sn-line)) !important;
  }
}

/* -------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sn-mega,
  .sn-mega-toggle,
  .sn-mega-toggle span,
  .sn-mega__service,
  .sn-mega__service::before,
  .sn-mega__arrow {
    transition: none !important;
  }
}

/* -------------------------------------------------------- forced colors */
@media (forced-colors: active) {
  .sn-mega__shell,
  .sn-mega__service,
  .sn-mega-toggle {
    border: 1px solid CanvasText !important;
  }
}

/* Keep the standard nav underline on top-level links only. */
.sn-mega__service::after,
.sn-mega__all::after {
  display: none !important;
  content: none !important;
}

/* Active-state compatibility with the wrapper introduced for the mega toggle. */
.sn-nav .current-menu-item > .sn-menu-item__row > .sn-nav__link,
.sn-nav .current_page_item > .sn-menu-item__row > .sn-nav__link {
  color: var(--sn-cyan);
}
.sn-nav .current-menu-item > .sn-menu-item__row > .sn-nav__link::after,
.sn-nav .current_page_item > .sn-menu-item__row > .sn-nav__link::after {
  transform: scaleX(1);
}

/* ------------------------------------------------------- drapeaux de langue */
/*
 * Le drapeau est désormais un SVG : il lui faut une taille explicite et un
 * léger arrondi, sinon il se confond avec le fond sombre de la pastille.
 */
.sn-lang__flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.sn-lang__flag .sn-flag,
.sn-lang__flag img {
  display: block;
  width: 18px;
  height: 12px;
  border-radius: 2px;
  /* Un filet discret détache le blanc du drapeau français du fond clair de la
     langue active, et le bleu marine de l'Union Jack du fond sombre. */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22);
}

/* ------------------------------------------- en-tête fixe et barre d'admin */
@media (max-width: 782px) {
  /*
   * Sous 783 px, WordPress passe sa barre d'administration en position
   * absolue : elle défile avec la page au lieu de rester en haut. L'espace de
   * 46 px réservé pour elle n'avait donc plus d'objet dès le premier
   * défilement, et laissait une bande vide au-dessus de l'en-tête fixe, par
   * laquelle on voyait passer le contenu.
   *
   * L'espace n'est conservé qu'en haut de page, tant que la barre est encore
   * visible ; `is-scrolled` est posée par le thème au-delà de 18 px.
   */
  body.admin-bar.sn-mobile-header-fixed .sn-header.is-scrolled {
    top: 0 !important;
  }
  body.sn-mobile-header-fixed .sn-header { transition: top .2s var(--sn-ease-out); }
}

@media (max-width: 380px) {
  /* Aligné sur la règle existante qui réduit les drapeaux en image. */
  .sn-lang__flag .sn-flag { width: 16px; height: 11px; }
}


/* ====================================================================== */
/* 8.3 — Accessibilité et finitions du pied de page                       */
/* ====================================================================== */

/*
 * Les deux paragraphes du pied de page portaient leurs styles en attribut
 * style=. Déplacés ici : la couleur devient pilotable par les tokens, et le
 * balisage redevient lisible.
 */
.sn-footer__blurb,
.sn-footer__contact {
  color: var(--sn-muted);
  font-size: 0.92rem;
}
.sn-footer__blurb { max-width: 38ch; }
.sn-footer__contact { margin-top: var(--sn-space-2); }

/* Les colonnes du pied sont devenues des <nav> : elles restent des cellules. */
.sn-footer__col { display: block; }

/*
 * Le menu légal est maintenant enveloppé dans un <nav> nommé. On ne met pas
 * display:contents : certains lecteurs d'écran retirent de l'arbre
 * d'accessibilité un landmark ainsi effacé du rendu. Le <nav> reste donc une
 * vraie cellule flex, à la place qu'occupait la liste.
 */
.sn-legal__nav { display: flex; }

/*
 * Anneau de focus homogène.
 *
 * Plusieurs composants redéfinissaient leur propre focus, avec des épaisseurs
 * et des décalages différents. WCAG 2.1 — 2.4.7 demande un indicateur
 * visible ; 1.4.11 demande 3:1 de contraste avec le fond adjacent. Le cyan
 * de marque sur l’encre du site est mesuré à 11,9:1 — très au-delà du seuil.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--sn-cyan);
  outline-offset: 2px;
  border-radius: 4px;
}

/*
 * Cible du lien d'évitement. <main> porte tabindex="-1" : sans ce réglage,
 * Chrome et Safari dessinent un anneau de focus autour de toute la page
 * quand on l'active, ce qui est à la fois laid et déroutant.
 */
.sn-main:focus { outline: none; }
.sn-main:focus-visible { outline: none; }

/*
 * Zones tactiles. WCAG 2.2 — 2.5.8 demande 24 px minimum ; les
 * recommandations des plateformes vont à 44 px. Les liens du pied et de la
 * barre de mentions étaient en dessous sur mobile.
 */
@media (max-width: 700px) {
  .sn-footer__col a,
  .sn-legal__menu a {
    display: inline-block;
    min-height: 24px;
    padding-block: 0.35rem;
  }
}

/*
 * Lecture au clavier du méga-menu : le panneau doit rester ouvert tant qu'un
 * de ses liens a le focus, y compris quand la souris n'est plus dessus.
 * focus-within est déjà posé plus haut pour le survol ; on s'assure ici que
 * l'état ne dépend pas d'une classe JavaScript.
 */
.sn-menu-item--mega:focus-within > .sn-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Les éléments purement décoratifs ne doivent jamais capter le focus. */
.sn-bg,
.sn-bg * { pointer-events: none; }


/* ====================================================================== */
/* 8.3 — Signature de marque au premier affichage                         */
/* ====================================================================== */

/*
 * Le balayage est injecté par le JavaScript, pas par le balisage : sans
 * JavaScript il n'existe pas, et le bandeau reste exactement tel quel. Il est
 * retiré du DOM à la fin de l'animation — rien ne persiste.
 */
.sn-hero--home { position: relative; }

.sn-hero__sweep {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 4;
  display: block;
  height: 38%;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--sn-cyan) 7%, transparent) 55%,
    color-mix(in srgb, var(--sn-cyan) 26%, transparent) 92%,
    var(--sn-cyan) 100%
  );
  mix-blend-mode: screen;
  opacity: 0;
  animation: sn-hero-sweep 1.5s cubic-bezier(.33, .06, .22, 1) forwards;
}

@keyframes sn-hero-sweep {
  0%   { transform: translateY(-100%); opacity: 0; }
  12%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translateY(260%); opacity: 0; }
}

/*
 * Le titre se révèle derrière le passage du balayage plutôt qu'avant : c'est
 * ce décalage qui donne l'impression que le scan « révèle » la page.
 */
.sn-hero--home.is-sweeping .sn-hero__copy h1 {
  animation: sn-hero-lock .9s .25s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes sn-hero-lock {
  from { opacity: .55; letter-spacing: .012em; }
  to   { opacity: 1;   letter-spacing: normal; }
}

/* Ceinture et bretelles : le réglage du thème et la préférence système. */
.sn-motion-off .sn-hero__sweep,
.sn-motion-off .sn-hero--home.is-sweeping .sn-hero__copy h1 { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .sn-hero__sweep { display: none; }
  .sn-hero--home.is-sweeping .sn-hero__copy h1 { animation: none; }
}


/* ====================================================================== */
/* 8.3 — Pages « Déroulement d'un mandat » et « Questions fréquentes »     */
/* ====================================================================== */

/*
 * Déroulement : quatre étapes empilées, reliées par un filet vertical. Les
 * classes .sn-steps existantes visent des <li> ; ici les étapes sont des
 * conteneurs Elementor, d'où un nom distinct plutôt qu'une surcharge
 * fragile.
 */
/*
 * Bloc centré et borné : à pleine largeur de section (1120 px) les quatre
 * étapes laissaient la moitié droite vide. 840 px tient la mesure de lecture
 * et équilibre le blanc des deux côtés.
 */
/*
 * Bloc centré et borné.
 *
 * À pleine largeur de section (1120 px) les quatre étapes laissaient la
 * moitié droite vide. 840 px tient la mesure de lecture et équilibre le blanc.
 *
 * Deux contraintes d'Elementor obligent à forcer :
 *   - .e-con reçoit une marge calculée depuis ses propres variables, qui
 *     l'emporte sur margin-inline:auto ; d'où align-self ;
 *   - .e-con et les widgets se dimensionnent sur leur contenu, d'où les
 *     width:100% explicites, sans quoi les cartes restent à 673 px.
 * Les !important sont nécessaires : les règles d'Elementor sont plus
 * spécifiques et chargées après celles du thème.
 */
.sn-flow {
  position: relative;
  gap: 0 !important;
}
.sn-sec .sn-flow.e-con {
  align-self: center !important;
  width: 100%;
  max-width: 840px;
}
.sn-flow > .sn-flow__item.e-con,
.sn-flow > .sn-flow__item > .elementor-widget {
  width: 100% !important;
  max-width: none !important;
}

.sn-flow > .sn-flow__item {
  position: relative;
  padding-block: 1.5rem;
  padding-inline-start: 2.1rem;
  border-inline-start: 1px solid var(--sn-line-soft);
}
.sn-flow > .sn-flow__item:first-child { padding-block-start: 0.4rem; }
.sn-flow > .sn-flow__item:last-child  { border-inline-start-color: transparent; }

/* Le point de jalon sur le filet. */
.sn-flow > .sn-flow__item::before {
  content: "";
  position: absolute;
  inset-inline-start: -5px;
  inset-block-start: 1.95rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sn-cyan);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sn-cyan) 16%, transparent);
}
.sn-flow > .sn-flow__item:first-child::before { inset-block-start: 0.85rem; }

.sn-flow .elementor-widget-spacenet_icon_box { max-width: none; }

@media (max-width: 600px) {
  .sn-flow > .sn-flow__item { padding-inline-start: 1.5rem; }
}

/*
 * FAQ : une question par bloc, séparées par un filet. Pas d'accordéon —
 * replier des réponses de trois lignes ajoute un clic sans rien gagner, et
 * le texte replié est moins bien indexé.
 */
.sn-faq { gap: 0 !important; }

.sn-faq > .sn-faq__item {
  padding-block: 1.6rem;
  border-block-start: 1px solid var(--sn-line-soft);
}
.sn-faq > .sn-faq__item:first-child { border-block-start: 0; padding-block-start: 0; }

.sn-faq__item h2 {
  font-size: var(--sn-fs-lg, 1.12rem);
  font-weight: 600;
  color: var(--sn-text);
  margin-bottom: 0.55rem;
}
.sn-faq__item p {
  color: var(--sn-muted);
  max-width: 76ch;
  margin-bottom: 0;
}

/* Deux actions côte à côte en bas d'une fiche service et sur Déroulement. */
.sn-svc-cta__actions,
.sn-who__link {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
}
.sn-svc-cta__actions { margin-top: 0.25rem; }
.sn-who__link { margin-top: 1.1rem; }

/* Signature du concepteur dans la barre de mentions, si le client l'accepte. */
.sn-credit { color: var(--sn-muted); }
.sn-credit a { color: var(--sn-muted); text-decoration: none; border-bottom: 1px solid transparent; }
.sn-credit a:hover { color: var(--sn-cyan); border-bottom-color: currentColor; }

/* Widget anti-pourriel Cloudflare Turnstile dans les formulaires Elementor. */
.sn-turnstile {
  margin-block: 0.35rem 1rem;
  min-height: 65px;      /* réserve la place : évite que le bouton saute au rendu */
  display: flex;
}
.sn-turnstile iframe { max-width: 100%; }


/* ====================================================================== */
/* 8.4 — Impression                                                       */
/* ====================================================================== */

/*
 * Une fiche service imprimée part chez un décideur qui n'a pas vu le site.
 * Le bloc d'impression de main.css couvrait la version 1.x ; il manquait
 * tout ce qui a été ajouté depuis — fond animé, barre d'onglets mobile,
 * méga-menu, anti-pourriel — plus les finitions propres au papier.
 */
@media print {

  /* Chrome et Safari n'impriment pas les fonds par défaut : inutile d'y
     compter, tout doit rester lisible en noir sur blanc. */
  .sn-bg,
  .sn-tabbar,
  .sn-skip-link,
  .sn-turnstile,
  .sn-mega,
  .sn-mega-toggle,
  .sn-nav-backdrop,
  .sn-svc-cta__actions,
  .sn-who__link,
  .sn-btn,
  .elementor-button-wrapper { display: none !important; }

  /* Le corps ne doit plus réserver la place de la barre d'onglets. */
  body.sn-mobile-tabbar-enabled { padding-bottom: 0 !important; }

  @page {
    margin: 16mm 14mm 18mm;
  }

  html, body {
    background: #FFFFFF !important;
    color: #000000 !important;
    font-size: 11pt;
    line-height: 1.45;
  }

  /*
   * Un lien imprimé sans son adresse est un lien perdu. On n'écrit que les
   * liens externes et absolus : afficher « (#contenu) » après chaque ancre
   * interne ne ferait qu'encombrer.
   */
  .sn-main a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #444;
    word-break: break-all;
  }

  /* Pas de coupure au milieu d'une idée. */
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  .sn-flow__item,
  .sn-faq__item,
  .sn-blk,
  .sn-steps li,
  figure, table { break-inside: avoid; page-break-inside: avoid; }

  /* Les figures décoratives n'apportent rien sur papier et mangent une page. */
  .elementor-widget-spacenet_figure,
  .sn-band,
  .sn-page-band { display: none !important; }

  /* Les visuels de contenu restent, mais bornés en hauteur. */
  .sn-main img { max-width: 100% !important; max-height: 90mm; height: auto; }

  /*
   * Provenance en pied de chaque page imprimée. Sans cela, une fiche qui
   * circule n'indique plus d'où elle vient ni de quand elle date.
   */
  .sn-print-source { display: block !important; }
}

/* Masquée à l'écran, révélée par la règle d'impression ci-dessus. */
.sn-print-source { display: none; }


/* ===== src/v83.css ===== */
/*
 * Couche v8.3 — veille cybersécurité et bloc « Notre héritage ».
 *
 * Aucune dépendance JavaScript : la navigation entre rubriques est faite
 * d'ancres, et la liste reste parfaitement lisible sans styles.
 */

/* ------------------------------------------------------------- veille */

.sn-feed {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
}

/*
 * Sommaire des rubriques. Volontairement NON collant : au-dessus d'une grille
 * de cartes, une barre collante chevauche le contenu qu'elle recouvre et sa
 * teinte pleine jure avec le fond dégradé de la section.
 */
.sn-feed__nav {
  margin-bottom: 36px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--sn-line, #1B2E43);
}

.sn-feed__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sn-feed__nav a {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sn-muted, #8CA2BA);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

.sn-feed__nav a:hover,
.sn-feed__nav a:focus-visible {
  color: var(--sn-cyan, #2FDCE6);
  border-bottom-color: currentColor;
}

.sn-feed__cat {
  margin-bottom: 56px;
  /* L'en-tête du site est fixe : une ancre doit s'arrêter en dessous. */
  scroll-margin-top: calc(var(--sn-header-h, 76px) + 24px);
}

/*
 * Enveloppe de la piste. Au-dessus du point de rupture elle ne fait rien :
 * la grille s'affiche normalement et les flèches sont retirées du rendu.
 */
.sn-feed__piste {
  position: relative;
}

.sn-feed__fleche {
  display: none;
}

.sn-feed__cat-title {
  margin: 0 0 24px;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  line-height: 1.3;
}

/* Grille fluide : deux colonnes dès que la largeur le permet, une seule sinon. */
.sn-feed__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 24px;
}

.sn-feed__item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--sn-line, #1B2E43);
  border-radius: 14px;
  background: var(--sn-panel, #0A1320);
  transition: border-color 0.2s var(--sn-ease, ease), transform 0.2s var(--sn-ease, ease);
}

.sn-feed__item:hover,
.sn-feed__item:focus-within {
  border-color: var(--sn-feed-teinte, var(--sn-cyan, #2FDCE6));
  transform: translateY(-2px);
}

/* ------------------------------------------------------------- vignette */

/*
 * Aucun flux d'avis de sécurité ne publie d'image : la vignette est un SVG
 * généré côté serveur, teinté par source. Elle est décorative — « aria-hidden »
 * côté HTML — et n'entraîne aucune requête réseau.
 */
.sn-feed__cover {
  position: relative;
  height: 104px;
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 85% 0%, color-mix(in srgb, var(--sn-feed-teinte, #2FDCE6) 32%, transparent) 0%, transparent 62%),
    linear-gradient(135deg, var(--sn-panel-2, #0F1C2B) 0%, var(--sn-ink, #05090F) 100%);
  border-bottom: 1px solid var(--sn-line, #1B2E43);
}

/* Repli pour les navigateurs sans color-mix(). */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .sn-feed__cover {
    background: linear-gradient(135deg, var(--sn-panel-2, #0F1C2B) 0%, var(--sn-ink, #05090F) 100%);
  }
}

.sn-feed__motif {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sn-feed__traits line {
  stroke: color-mix(in srgb, var(--sn-feed-teinte, #2FDCE6) 55%, transparent);
  stroke-width: 1;
}

.sn-feed__points circle {
  fill: var(--sn-feed-teinte, #2FDCE6);
  opacity: 0.75;
}

/* Sigle de la source. Une abréviation, jamais un logo de marque. */
.sn-feed__sigle {
  position: absolute;
  top: 12px;
  left: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--sn-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--sn-ink, #05090F);
  background: var(--sn-feed-teinte, #2FDCE6);
}

/* Numéro d'avis extrait du titre (CVE, USN, AV…), jamais déduit. */
.sn-feed__ref {
  position: absolute;
  right: 14px;
  bottom: 12px;
  max-width: calc(100% - 28px);
  padding: 3px 9px;
  border: 1px solid var(--sn-line, #1B2E43);
  border-radius: 6px;
  font-family: var(--sn-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  color: var(--sn-text, #E7EFF8);
  background: color-mix(in srgb, var(--sn-ink, #05090F) 78%, transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----------------------------------------------------------------- corps */

.sn-feed__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 18px 20px 20px;
}

.sn-feed__title {
  margin: 0 0 10px;
  font-size: 1rem;
  line-height: 1.4;
  /* Les titres d'avis contiennent des identifiants non sécables. */
  overflow-wrap: anywhere;
}

.sn-feed__excerpt {
  margin: 0 0 14px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--sn-muted, #8CA2BA);
}

.sn-feed__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 0.8125rem;
  color: var(--sn-muted, #8CA2BA);
}

.sn-feed__source {
  font-weight: 600;
  color: var(--sn-text, #E7EFF8);
}

.sn-feed__sep {
  opacity: 0.5;
}

/* « auto » aligne le lien en bas : les cartes d'une rangée restent régulières. */
.sn-feed__link {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  min-height: 24px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sn-cyan, #2FDCE6);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.sn-feed__link:hover,
.sn-feed__link:focus-visible {
  border-bottom-color: currentColor;
}

.sn-feed__updated,
.sn-feed__stale {
  margin: 0 0 8px;
  font-size: 0.8125rem;
  color: var(--sn-muted, #8CA2BA);
}

.sn-feed__stale {
  color: var(--sn-warn, #F4B13D);
}

/* Avertissement sur les contenus tiers : visible, jamais décoratif. */
.sn-feed__notice {
  margin-top: 32px;
  padding: 18px 20px;
  border-left: 3px solid var(--sn-cyan, #2FDCE6);
  border-radius: 0 10px 10px 0;
  background: var(--sn-panel, #0A1320);
}

.sn-feed__notice p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--sn-muted, #8CA2BA);
}

.sn-feed--empty p {
  color: var(--sn-muted, #8CA2BA);
}

@media (prefers-reduced-motion: reduce) {
  .sn-feed__item {
    transition: none;
  }

  .sn-feed__item:hover,
  .sn-feed__item:focus-within {
    transform: none;
  }
}

/*
 * Mobile et petite tablette : chaque rubrique devient un carrousel à glisser.
 * Empilées, huit cartes par rubrique font quatre écrans de défilement vertical
 * avant d'atteindre la rubrique suivante — le visiteur abandonne avant la fin.
 *
 * Fait entièrement en CSS : « scroll-snap » natif, donc inertie du système,
 * accessible au clavier (le focus d'un lien fait défiler la piste), et rien à
 * charger. La carte occupe 84 % de la largeur pour que la suivante dépasse :
 * c'est ce débord qui indique qu'on peut glisser, sans texte d'explication.
 */
@media (max-width: 767px) {
  .sn-feed__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    grid-template-columns: none;
    gap: 14px;

    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--sn-gutter, 20px);
    /* Évite que le glissement déclenche le retour arrière du navigateur. */
    overscroll-behavior-x: contain;

    /* Les cartes atteignent les bords de l'écran, le texte reste aligné. */
    margin-inline: calc(-1 * var(--sn-gutter, 20px));
    padding-inline: var(--sn-gutter, 20px);
    padding-bottom: 14px;
  }

  .sn-feed__fleche {
    display: inline-flex;
  }

  .sn-feed__item {
    scroll-snap-align: start;
    /* La translation au survol ferait sauter la piste pendant le glissement. */
    transform: none !important;
  }

  .sn-feed__cover {
    height: 88px;
  }

  .sn-feed__body {
    padding: 16px 18px 18px;
  }

  /*
   * Flèches centrées verticalement sur la carte. Le décalage de 7 px compense
   * le « padding-bottom » de la piste (14 px réservés à la barre de
   * défilement) : sans lui, les flèches tomberaient sous le centre réel.
   *
   * À cette hauteur elles passent au-dessus du texte : d'où le fond opaque à
   * 82 % et le flou d'arrière-plan, qui gardent le titre lisible derrière.
   */
  .sn-feed__fleche {
    position: absolute;
    top: calc(50% - 7px);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44 px : cible tactile confortable, au-delà du minimum de 24 px. */
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    transform: translateY(-50%);

    color: var(--sn-text, #E7EFF8);
    background: color-mix(in srgb, var(--sn-ink, #05090F) 82%, transparent);
    border: 1px solid var(--sn-line, #1B2E43);
    border-radius: 999px;
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: opacity 0.18s var(--sn-ease, ease), background-color 0.18s var(--sn-ease, ease);
  }

  .sn-feed__fleche svg {
    width: 20px;
    height: 20px;
  }

  .sn-feed__fleche--prec {
    left: 2px;
  }

  .sn-feed__fleche--suiv {
    right: 2px;
  }

  .sn-feed__fleche:hover {
    background: var(--sn-panel-2, #0F1C2B);
  }

  /*
   * Une flèche qui ne mène nulle part s'efface mais garde sa place : la piste
   * ne se décale pas pendant le défilement. Elle cesse aussi d'intercepter le
   * toucher, pour ne pas voler le début d'un glissement.
   */
  .sn-feed__fleche[disabled] {
    opacity: 0;
    pointer-events: none;
  }

  /* Piste trop courte pour défiler : le script retire les deux boutons. */
  .sn-feed__fleche[hidden] {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .sn-feed__fleche {
      transition: none;
    }
  }

  /* Barre de défilement discrète : elle sert de repère de progression. */
  .sn-feed__list::-webkit-scrollbar {
    height: 4px;
  }

  .sn-feed__list::-webkit-scrollbar-thumb {
    background: var(--sn-line, #1B2E43);
    border-radius: 999px;
  }

  .sn-feed__list {
    scrollbar-width: thin;
    scrollbar-color: var(--sn-line, #1B2E43) transparent;
  }
}

/* À l'impression, aucune piste horizontale : tout doit apparaître. */
@media print {
  .sn-feed__fleche {
    display: none;
  }

  .sn-feed__list {
    display: block;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
}

/* ---------------------------------------------------------- héritage */

.sn-sec--heritage .sn-feed,
.sn-sec--heritage .sn-flow.e-con {
  align-self: center !important;
  width: 100%;
  max-width: 840px;
}

.sn-sec--heritage .sn-flow > .elementor-widget {
  width: 100% !important;
  max-width: none !important;
}

.sn-sec--heritage p {
  font-size: 1.0625rem;
  line-height: 1.75;
}

.sn-sec--heritage p + p {
  margin-top: 1em;
}

/* ------------------------------------------------------------ impression */

@media print {
  .sn-feed__nav,
  .sn-feed__link span[aria-hidden='true'] {
    display: none;
  }

  .sn-feed__item {
    border: 1px solid #ccc;
    break-inside: avoid;
  }

  /* À l'impression, l'URL de la source doit rester vérifiable. */
  .sn-feed__link::after {
    content: ' (' attr(href) ')';
    font-weight: 400;
    word-break: break-all;
  }
}

/*
 * Contact : le panneau « Coordonnées » est un conteneur Elementor (e-con).
 * Les règles .e-con d'Elementor, chargées après le thème, remettaient sa
 * marge intérieure, son rayon et son fond à zéro : le texte collait à la
 * bordure. On reprend la main avec une spécificité supérieure, en
 * réglant aussi les variables qu'Elementor lit.
 */
body .sn-sec--contact .e-con.sn-contact-aside {
  --padding-top: clamp(1.4rem, 3vw, 2rem);
  --padding-right: clamp(1.4rem, 3vw, 2rem);
  --padding-bottom: clamp(1.4rem, 3vw, 2rem);
  --padding-left: clamp(1.4rem, 3vw, 2rem);
  --padding-block-start: var(--padding-top);
  --padding-block-end: var(--padding-bottom);
  --padding-inline-start: var(--padding-left);
  --padding-inline-end: var(--padding-right);
  --border-radius: var(--sn-radius-lg);
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--sn-border-premium, var(--sn-line-soft));
  border-radius: var(--sn-radius-lg);
  background: color-mix(in srgb, var(--sn-panel) 86%, transparent);
  box-shadow: var(--sn-shadow-sm), inset 0 1px 0 color-mix(in srgb, var(--sn-text) 3%, transparent);
  overflow: hidden;
}
body .sn-sec--contact .sn-contact-aside h3 { margin: 1.5rem 0 .5rem; }
body .sn-sec--contact .sn-contact-aside h3:first-child { margin-top: 0; }
body .sn-sec--contact .sn-contact-aside p { margin: 0 0 1rem; }
body .sn-sec--contact .sn-contact-aside p:last-child { margin-bottom: 0; }
body .sn-sec--contact .sn-contact-aside strong { color: var(--sn-text); font-weight: 600; }

/* ======================================================================
 * En-tête « capsule flottante » (bureau, ≥ 901 px).
 *
 * L'en-tête reste collant mais devient transparent : c'est la rangée
 * intérieure qui porte le verre dépoli, la bordure et les coins arrondis,
 * détachée du haut de la fenêtre. Le méga-menu reste ancré sur
 * .sn-header (top: 100 %) et s'ouvre donc juste sous la capsule.
 * Mobile : inchangé.
 * ==================================================================== */

/* Chevron dessiné en CSS — le glyphe « ⌄ » s'affichait comme un « v » décalé. */
.sn-mega-toggle span {
  width: 7px;
  height: 7px;
  font-size: 0 !important;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.sn-menu-item--mega.is-mega-open > .sn-menu-item__row .sn-mega-toggle span {
  transform: translateY(2px) rotate(225deg);
}

@media (min-width: 901px) {
  body .sn-header,
  body .sn-header.is-scrolled {
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding-top: 14px;
    transition: padding-top .28s var(--sn-ease-out);
  }
  body .sn-header.is-scrolled { padding-top: 8px; }

  body .sn-header .sn-header__inner {
    width: calc(100% - 2 * var(--sn-gutter));
    max-width: calc(var(--sn-wrap) - 2 * var(--sn-gutter));
    min-height: 64px;
    padding: .55rem .55rem .55rem 1.3rem;
    gap: 1rem;
    border: 1px solid var(--sn-line);
    border-radius: 18px;
    background: linear-gradient(180deg,
      color-mix(in srgb, #0E1A2A 88%, transparent),
      color-mix(in srgb, #080F19 88%, transparent));
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    backdrop-filter: blur(16px) saturate(130%);
    box-shadow:
      0 18px 50px rgba(0, 0, 0, .35),
      inset 0 1px 0 color-mix(in srgb, var(--sn-text) 5%, transparent);
  }
  body .sn-header.is-scrolled .sn-header__inner {
    min-height: 58px;
    padding-block: .4rem;
    border-color: color-mix(in srgb, var(--sn-cyan) 16%, var(--sn-line));
  }

  /* Liens : plus lisibles que le gris actuel. */
  body .sn-header .sn-nav__link { color: #C9D6E4; }
  body .sn-header .sn-nav__link:hover,
  body .sn-header .current-menu-item > .sn-menu-item__row > .sn-nav__link { color: var(--sn-text); }
  body .sn-header .sn-nav__menu { gap: .9rem; }
  body .sn-header .sn-menu-item--mega .sn-mega-toggle { width: 22px; margin-left: -.45rem; color: #C9D6E4; }

  /* Sélecteur de langue : compact, sans drapeaux, avec un globe. */
  body .sn-header .sn-lang {
    height: 44px;
    padding: 3px 3px 3px 30px;
    gap: 2px;
    border-radius: 12px;
    border: 1px solid var(--sn-line-soft);
    background: color-mix(in srgb, var(--sn-panel) 60%, transparent);
    position: relative;
  }
  body .sn-header .sn-lang::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    background: var(--sn-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.3'%3E%3Ccircle cx='8' cy='8' r='6.3'/%3E%3Cpath d='M1.7 8h12.6M8 1.7c1.8 1.9 2.7 4 2.7 6.3S9.8 12.4 8 14.3C6.2 12.4 5.3 10.3 5.3 8S6.2 3.6 8 1.7Z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.3'%3E%3Ccircle cx='8' cy='8' r='6.3'/%3E%3Cpath d='M1.7 8h12.6M8 1.7c1.8 1.9 2.7 4 2.7 6.3S9.8 12.4 8 14.3C6.2 12.4 5.3 10.3 5.3 8S6.2 3.6 8 1.7Z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  }
  body .sn-header .sn-lang__flag { display: none; }
  body .sn-header .sn-lang__item {
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 0 .6rem;
    border-radius: 9px;
    font-family: var(--sn-mono);
    font-size: .78rem;
    letter-spacing: .04em;
    color: var(--sn-muted);
    background: transparent;
  }
  body .sn-header .sn-lang__item:hover { color: var(--sn-text); }
  body .sn-header .sn-lang__item.is-current {
    color: var(--sn-text);
    background: color-mix(in srgb, var(--sn-cyan) 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sn-cyan) 28%, transparent);
  }

  /* Bouton : même hauteur que la langue, léger halo. */
  body .sn-header .sn-header__inner > .sn-btn {
    min-height: 44px;
    padding-inline: 1.1rem;
    border-radius: 12px;
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--sn-cyan) 40%, transparent),
      0 8px 26px color-mix(in srgb, var(--sn-cyan) 22%, transparent);
  }
}

/* Capsule : rien ne passe à la ligne (le libellé français est long). */
@media (min-width: 901px) {
  body .sn-header .sn-nav__link,
  body .sn-header .sn-header__inner > .sn-btn { white-space: nowrap; }
}
/* Petits écrans de bureau : on resserre au lieu de laisser déborder. */
@media (min-width: 901px) and (max-width: 1140px) {
  body .sn-header .sn-header__inner { gap: .55rem; padding-left: .9rem; }
  body .sn-header .sn-nav__menu { gap: .1rem; }
  body .sn-header .sn-nav__link { padding-inline: .5rem; font-size: .86rem; }
  body .sn-header .sn-brand__name { font-size: .9rem; }
  body .sn-header .sn-lang { padding-left: 3px; }
  body .sn-header .sn-lang::before { display: none; }
  body .sn-header .sn-header__inner > .sn-btn { padding-inline: .85rem; font-size: .84rem; }
}

/*
 * Langues : codes seuls « FR / EN », sans drapeaux (demande du client).
 */
.sn-lang__flag { display: none !important; }
.sn-lang__code { position: static !important; width: auto; height: auto; overflow: visible; clip: auto; }
@media (min-width: 901px) {
  body .sn-header .sn-lang { padding-left: 3px; }
  body .sn-header .sn-lang::before { display: none; }
  body .sn-header .sn-lang__item { padding: 0 .7rem; }
}

/* En-tête : bouton plus discret, logo un peu plus grand (bureau). */
@media (min-width: 901px) {
  body .sn-header .sn-header__inner > .sn-btn {
    min-height: 38px;
    padding-inline: .9rem;
    font-size: .82rem;
    border-radius: 10px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--sn-cyan) 35%, transparent), 0 6px 18px color-mix(in srgb, var(--sn-cyan) 16%, transparent);
  }
  body .sn-header .sn-lang { height: 38px; border-radius: 10px; }
  body .sn-header .sn-lang__item { border-radius: 7px; }
  body .sn-header .sn-brand .sn-mark { width: 40px; height: 40px; }
  body .sn-header .sn-brand__name { font-size: 1.1rem; }
  body .sn-header .sn-brand__image { height: 50px; max-width: 280px; }
}
@media (min-width: 901px) and (max-width: 1140px) {
  body .sn-header .sn-brand .sn-mark { width: 36px; height: 36px; }
  body .sn-header .sn-brand__name { font-size: 1rem; }
  body .sn-header .sn-header__inner > .sn-btn { padding-inline: .75rem; font-size: .8rem; }
}

/* Bouton d'en-tête : boîte compacte, texte à taille normale (demande client). */
@media (min-width: 901px) {
  body .sn-header .sn-header__inner > .sn-btn,
  body .sn-header .sn-header__inner > .sn-btn:is(*) {
    min-height: 0;
    height: 34px;
    padding: 0 .8rem;
    font-size: .9rem;
    line-height: 1;
    border-radius: 9px;
    gap: .4rem;
  }
  body .sn-header .sn-lang { height: 34px; border-radius: 9px; }
  body .sn-header .sn-lang__item { font-size: .78rem; padding: 0 .6rem; }
}
@media (min-width: 901px) and (max-width: 1140px) {
  body .sn-header .sn-header__inner > .sn-btn:is(*) { font-size: .84rem; padding: 0 .65rem; }
}

/* Veille sur l'accueil : les trois dernières entrées sur une rangée. */
@media (min-width: 1024px) {
  .sn-feed--latest .sn-feed__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sn-feed--latest .sn-feed__notice { margin-top: 20px; }
.sn-sec--updates-home .sn-feed--latest { margin: 8px 0 24px; }