/* =========================================================
   P2CI — Cybersécurité & conformité réglementaire
   Feuille de style principale
   ========================================================= */

:root {
  --navy-950: #060f1d;
  --navy-900: #0b1b33;
  --navy-800: #11264a;
  --navy-700: #1b3764;
  --ink: #0f172a;
  --muted: #51607a;
  --line: #e3e8f0;
  --bg: #f6f8fb;        /* survol du menu, en-tete des tableaux */
  --bg-alt: #e9eef6;    /* sections alternees : assez marque pour detacher les cartes blanches */
  --white: #fff;

  --accent: #e03a22;        /* rouge P2CI (logo) */
  --accent-hover: #ae2c19;
  --accent-fort: #c9301a;   /* texte et aplats : #e03a22 ne tient pas le contraste AA */
  --accent-bright: #ff7a66; /* déclinaison lisible sur fond marine */
  --accent-soft: #fdefed;

  --rgpd: #5b6cff;
  --nis2: #f59e0b;
  --iso: #10b981;
  --ia: #0891b2;
  --nlpd: #7c3aed;
  --aircyber: #0369a1;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 18px 40px -20px rgba(11, 27, 51, .28);

  /* Polices système : aucun appel à un service tiers (pas de transfert d'IP) */
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --font-head: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--accent-fort); }
/* Sur fond marine, le rouge profond tombe a 3,2:1 : on sert la declinaison claire. */
.hero a:not(.btn), .section-dark a:not(.btn) { color: var(--accent-bright); }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 .6em;
  color: var(--navy-900);
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 750; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 3px; border-radius: 4px; }

.container { width: min(1180px, 100% - 40px); margin-inline: auto; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #fff; color: var(--navy-900); padding: 10px 16px; border-radius: 8px; font-weight: 700;
}
.skip-link:focus { left: 16px; top: 16px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border-radius: 999px; border: 2px solid transparent;
  font: inherit; font-weight: 650; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--accent-fort); color: #fff; box-shadow: 0 10px 24px -12px rgba(224, 58, 34, .55); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-light { background: #fff; color: var(--navy-900); }
.btn-light:hover { background: #eef3f9; }
.btn-outline { background: #fff; border-color: var(--line); color: var(--navy-900); }
.btn-outline:hover { border-color: var(--navy-700); }
.btn-outline-light { border-color: rgba(255, 255, 255, .35); color: #fff; }
.btn-outline-light:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .6); }
.btn-sm { padding: 9px 18px; font-size: .95rem; }
.btn-block { width: 100%; }

/* ---------- En-tête ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.site-header.scrolled { border-color: var(--line); box-shadow: 0 6px 24px -16px rgba(11, 27, 51, .35); }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 74px; }

.brand {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; color: var(--navy-900);
}
.brand-logo { display: block; height: 34px; width: auto; flex: none; }
.brand-sub {
  display: block; white-space: nowrap; padding-left: 12px; border-left: 1px solid var(--line);
  font-size: .66rem; font-weight: 700; line-height: 1.35; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.brand-light { color: #fff; }
.brand-light .brand-logo { filter: brightness(0) invert(1); } /* logo rouge passé en blanc sur fond sombre */
.brand-light { flex-direction: column; align-items: flex-start; gap: 10px; }
.brand-light .brand-sub { color: #8fa1bf; border-left: 0; padding-left: 0; } /* pied de page : signature sous le logo */
/* Signature masquee sur les petits mobiles, ou la place manque reellement. */
@media (max-width: 560px) { .site-header .brand-sub { display: none; } }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a { white-space: nowrap; }
.nav a:not(.btn) {
  padding: 8px 14px; border-radius: 999px; text-decoration: none;
  color: var(--ink); font-weight: 560; font-size: .97rem;
}
.nav a:not(.btn):hover { background: var(--bg); }
/* Page active (aria-current="page") ou section de l'accueil affichée (aria-current="location") */
.nav a:not(.btn)[aria-current] { color: var(--accent-fort); background: var(--accent-soft); }
.nav .btn { margin-left: 10px; }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--line); background: #fff; color: var(--navy-900); cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .i-close { display: none; }
.nav-toggle[aria-expanded="true"] .i-open { display: none; }
.nav-toggle[aria-expanded="true"] .i-close { display: block; }

@media (max-width: 1159px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none; position: absolute; top: 74px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 12px 20px 22px; background: #fff;
    border-bottom: 1px solid var(--line); box-shadow: 0 20px 30px -20px rgba(11, 27, 51, .3);
  }
  .nav.open { display: flex; }
  .nav a:not(.btn) { padding: 12px 14px; border-radius: 10px; }
  .nav .btn { margin: 10px 0 0; }
}

/* ---------- Hero accueil ---------- */
.hero, .page-hero {
  position: relative; overflow: hidden; color: #c7d3e6;
  background:
    radial-gradient(1100px 560px at 88% -12%, rgba(200, 51, 30, .3), transparent 60%),
    radial-gradient(900px 520px at -12% 115%, rgba(91, 108, 255, .24), transparent 60%),
    var(--navy-900);
}
.hero::before, .page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 25%, transparent 75%);
  mask-image: radial-gradient(ellipse at 60% 40%, #000 25%, transparent 75%);
}
/* Hauteur du hero sur grand ecran.
   A 92/108 de marges et un titre a 3,5rem, il mesurait 861px : sur un portable
   1440x900 le bandeau clients commencait a 936px, donc hors de vue. Or c'est la
   preuve la plus immediate du site, autant qu'elle se devine sans defiler.
   Marges resserrees et titre ramene a 2,75rem, ce qui reste tres au-dessus du
   corps de texte. Les tailles mobiles, definies plus bas, ne changent pas. */
.hero { padding-block: 54px 58px; }
.hero h1 { font-size: clamp(2.2rem, 4.2vw, 3.25rem); }
/* Au-dela de 960 px le hero a deux colonnes, et le titre n'a plus la largeur de
   la fenetre mais celle de sa colonne : 463 px a 961 px de fenetre, 646 px au-dela
   de 1220. « Sécurisez votre entreprise. » mesure douze fois la taille de police,
   si bien que les 4.2vw d'origine ne laissaient que 2 a 4 % de marge. Assez sur
   le papier, pas en pratique : un rendu de police un peu plus large, ou la police
   de secours affichee avant le chargement, et la premiere phrase se brisait en
   deux. La pente ci-dessous suit la colonne et non la fenetre, et garde 9 a 12 %
   de marge d'un bout a l'autre, au prix de 4 px sur les grands ecrans. En dessous
   de 961 px, une seule colonne : le titre a toute la largeur et la regle ci-dessus
   suffit. */
@media (min-width: 961px) {
  .hero h1 { font-size: clamp(2.2rem, calc(4.9vw - 12px), 3rem); }
}
.hero .lead { font-size: 1.27rem; }
.hero .hero-actions { margin-top: 26px; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.hero h1, .page-hero h1 { color: #fff; }
/* « Prouvez votre conformite. » occupe sa propre ligne : les deux phrases du
   titre se repondent, et enchainees elles se coupaient n'importe ou — « Prouvez
   votre / conformite. » sur un ecran large. « width: fit-content » garde le
   degrade cale sur le texte et non sur toute la largeur de la colonne.
   Seul le titre de l'accueil est vise : les pages interieures sont en
   « .page-hero » et gardent leur titre d'un seul tenant. */
.hero h1 em { display: block; width: fit-content; }
.hero h1 em, .page-hero h1 em {
  font-style: normal;
  background: linear-gradient(90deg, #ff7a66, #ffb8ad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lead { font-size: 1.2rem; max-width: 40em; }
.hero .lead, .page-hero .lead { color: #b3c1d8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero-trust {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  list-style: none; padding: 0; margin: 22px 0 0; font-size: .95rem; color: #9fb0cc;
}
.hero-trust li { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust svg { width: 18px; height: 18px; color: var(--accent-bright); }

/* Marques de confiance du hero : deux logos officiels et la note Google.
   Les logos sont fournis en noir sur fond blanc ; desatures puis inverses, ils
   deviennent clairs sur le fond sombre, sans decoupe ni retouche du fichier.
   Cybermalveillance porte un texte fin, « professionnel reference », illisible
   a l'opacite commune : il recoit la sienne, et un peu de hauteur en plus. */
.hero-badges { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 16px; }
.hero-badges img {
  height: 44px; width: auto;
  filter: grayscale(1) invert(1) brightness(1.35);
  mix-blend-mode: screen; opacity: .7; transition: opacity .2s ease;
}
.hero-badges img[src*="cybermalveillance"] { height: 50px; opacity: .95; }
.hero-badges img:hover { opacity: 1; }
.google-rating {
  display: flex; flex-direction: column; gap: 5px;
  text-decoration: none !important; opacity: .92; transition: opacity .2s ease;
  padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .14);
}
.google-rating:hover { opacity: 1; }
.google-rating-stars { display: flex; gap: 1px; }
.google-rating-stars svg { width: 15px; height: 15px; fill: #f2b134; }
.google-rating-text { font-size: .82rem; color: #9fb0cc; white-space: nowrap; }
.google-rating-text strong { color: #fff; font-weight: 700; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.hero .eyebrow, .page-hero .eyebrow, .section-dark .eyebrow { color: var(--accent-bright); }

/* Illustration animée de l'accueil : bouclier central relié aux 4 référentiels */
.hero-visual { position: relative; width: 100%; max-width: 480px; margin-inline: auto; }
.hero-visual svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------- Hero pages internes ---------- */
.page-hero { padding-block: 72px 84px; }
.page-hero .container { position: relative; }
.page-hero .lead { margin-top: 8px; }
.breadcrumb { font-size: .88rem; color: #8fa1bf; margin-bottom: 22px; }
.breadcrumb a { color: #c7d3e6; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span[aria-hidden] { margin-inline: 8px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.fact {
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13);
  padding: 12px 18px; border-radius: 12px; font-size: .92rem; color: #b3c1d8;
}
.fact b { color: #fff; font-family: var(--font-head); font-size: 1.1rem; margin-right: 4px; }

/* ---------- Sections ---------- */
.section { padding-block: 96px; }
.section-sm { padding-block: 64px; }
.section-alt { background: var(--bg-alt); }
.section-dark { background: var(--navy-900); color: #c7d3e6; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-head { max-width: 740px; margin-bottom: 52px; }
.section-head.center { text-align: center; margin-inline: auto; }
.section-head.center .eyebrow::after { content: ""; width: 22px; height: 2px; background: currentColor; }
.section-head p { color: var(--muted); font-size: 1.1rem; margin-bottom: 0; }
.section-dark .section-head p { color: #9fb0cc; }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.split-wide { grid-template-columns: 1.1fr .9fr; }
@media (max-width: 920px) { .split, .split-wide { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- Cartes ---------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #d3dbe7; }
.card h3 { margin-bottom: .45em; }
.card p { color: var(--muted); margin-bottom: 0; font-size: 1rem; }
.card-meta { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink, var(--accent)); margin-bottom: 10px; }
.card-num {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--c-soft, var(--accent-soft)); color: var(--c-ink, var(--accent));
  font-weight: 800; font-size: .9rem; margin-bottom: 14px;
}

.icon {
  width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center;
  background: var(--c-soft, var(--accent-soft)); color: var(--c-ink, var(--accent)); margin-bottom: 18px;
}
.icon svg { width: 24px; height: 24px; }

/* Couleurs par référentiel */
.t-rgpd { --c: var(--rgpd); --c-soft: #eef0ff; --c-ink: #3f4fd6; }
.t-nis2 { --c: var(--nis2); --c-soft: #fff3dc; --c-ink: #9a5800; }
.t-iso  { --c: var(--iso);  --c-soft: #e1f7ee; --c-ink: #067a55; }
.t-ia   { --c: var(--ia);   --c-soft: #e0f4f8; --c-ink: #0e6b82; }
.t-nlpd { --c: var(--nlpd); --c-soft: #f1eafe; --c-ink: #5b21b6; }
.t-aircyber { --c: var(--aircyber); --c-soft: #e2f0fa; --c-ink: #075985; }
.status-nlpd { border-top: 4px solid var(--nlpd); }

/* Bandeau « Nous intervenons aussi en Suisse » (accueil) */
.ch-band {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 28px 32px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--c, var(--nlpd));
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.ch-band .icon { margin: 0; flex: none; }
.ch-band-text { flex: 1 1 320px; }
.ch-band h2 { font-size: 1.4rem; margin-bottom: 6px; }
.ch-band p { margin: 0; color: var(--muted); }

/* Tableau comparatif texte (nLPD / RGPD) */
.matrix.compare td { text-align: left; vertical-align: top; color: #334155; font-size: .95rem; }
.matrix.compare tbody th { vertical-align: top; width: 22%; }

.tag {
  display: inline-block; padding: 7px 16px; border-radius: 999px;
  font-size: .95rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  background: var(--c-soft, var(--accent-soft)); color: var(--c-ink, var(--accent));
}
.page-hero .tag { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1px var(--c); margin-bottom: 18px; }

/* Piliers : 3 par ligne, la dernière ligne incomplète est centrée */
.pillars { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.pillars > .pillar { flex: 0 1 calc(33.333% - 16px); }
@media (max-width: 980px) { .pillars > .pillar { flex-basis: calc(50% - 12px); } }
@media (max-width: 640px) { .pillars > .pillar { flex-basis: 100%; } }

.pillar {
  position: relative; display: flex; flex-direction: column;
  padding: 36px 30px 30px; border-radius: var(--radius-lg); overflow: hidden;
}
.pillar::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--c); }
.pillar .tag { align-self: flex-start; margin-bottom: 18px; }
.pillar h3 { font-size: 1.35rem; }
.pillar ul { list-style: none; padding: 0; margin: 20px 0 28px; display: grid; gap: 9px; font-size: .96rem; }
/* Évite les mots isolés en fin de ligne dans les cartes */
.pillar h3, .pillar li, .pillar > p, .card h3, .card > p { text-wrap: pretty; }
.pillar li { display: flex; gap: 10px; align-items: flex-start; }
.pillar li svg { width: 18px; height: 18px; flex: none; color: var(--c-ink); margin-top: 4px; }
.more {
  margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; text-decoration: none; color: var(--c-ink, var(--accent));
}
.more svg { width: 18px; height: 18px; transition: transform .2s; }
.more:hover svg { transform: translateX(4px); }

/* Listes à puces cochées */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.checklist li { position: relative; padding-left: 34px; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .18em; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239f111b' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.section-dark .checklist li::before {
  background-color: rgba(255, 122, 102, .14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6b75' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* Chiffres clés */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
}
/* Colonne flexible : les étiquettes (RGPD, NIS2…) sont calées en bas, donc alignées d'un bloc à l'autre */
.stat { display: flex; flex-direction: column; align-items: flex-start; background: #fff; padding: 30px 26px; }
.stat b {
  display: block; font-family: var(--font-head); font-size: 2.5rem; font-weight: 800;
  letter-spacing: -.03em; line-height: 1.05; color: var(--navy-900);
}
.stat > span:not(.tag) { display: block; margin: 10px 0 16px; font-size: .95rem; color: var(--muted); }
.stat .tag { margin-top: auto; }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stats { grid-template-columns: 1fr; } }

/* Matrice de convergence */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.matrix { width: 100%; border-collapse: collapse; min-width: 580px; font-size: .98rem; }
.matrix th, .matrix td { padding: 16px 22px; text-align: center; border-bottom: 1px solid var(--line); }
.matrix th:first-child, .matrix td:first-child { text-align: left; }
.matrix thead th { background: var(--bg); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.matrix tbody th { font-weight: 600; color: var(--navy-900); }
.matrix tbody tr:last-child th, .matrix tbody tr:last-child td { border-bottom: 0; }
.m { display: inline-block; width: 16px; height: 16px; border-radius: 50%; vertical-align: middle; }
.m-full { background: var(--accent); }
.m-part { background: linear-gradient(90deg, var(--accent) 50%, #dce4ee 50%); }
.m-none { background: #e7ecf3; }
.legend { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 16px; font-size: .88rem; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }

/* Étapes de la méthode */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
.step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; }
.step::before {
  counter-increment: step; content: "0" counter(step);
  display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent); font-family: var(--font-head); font-weight: 800; margin-bottom: 18px;
}
.step h3 { margin-bottom: .4em; }
.step p { color: var(--muted); font-size: 1rem; margin: 0; }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* Feuille de route verticale */
.roadmap { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; counter-reset: rm; }
.roadmap li { position: relative; padding-left: 66px; min-height: 44px; }
.roadmap li::before {
  counter-increment: rm; content: counter(rm);
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; border: 2px solid var(--accent);
  color: var(--accent); font-weight: 800;
}
.roadmap li::after { content: ""; position: absolute; left: 21px; top: 48px; bottom: -20px; width: 2px; background: var(--line); }
.roadmap li:last-child::after { display: none; }
.roadmap h3 { font-size: 1.08rem; margin-bottom: 4px; padding-top: 9px; }
.roadmap p { color: var(--muted); margin: 0; font-size: 1rem; }

/* Délais NIS2 */
.deadlines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.deadline {
  position: relative; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius); padding: 30px 26px;
}
.deadline b { display: block; font-family: var(--font-head); font-size: 2.6rem; font-weight: 800; color: var(--nis2); line-height: 1; margin-bottom: 14px; }
.deadline h3 { font-size: 1.1rem; }
.deadline p { margin: 0; color: #9fb0cc; font-size: .98rem; }
@media (max-width: 820px) { .deadlines { grid-template-columns: 1fr; } }
.deadlines-4 { grid-template-columns: repeat(4, 1fr); }
.deadlines-4 .deadline b { font-size: 1.75rem; }
.t-ia .deadline b { color: #5fd4ea; }
@media (max-width: 980px) { .deadlines-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .deadlines-4 { grid-template-columns: 1fr; } }
.calendar-note { margin: 28px 0 0; font-size: .92rem; color: #9fb0cc; max-width: 60em; }

/* Niveaux de risque (page IA) */
.risk-card { border-top: 4px solid var(--rc); }
.risk-label { display: inline-block; margin-bottom: 10px; font-size: .75rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--rc-ink); }
.risk-card ul { margin: 14px 0 0; padding-left: 1.1em; color: var(--muted); font-size: .95rem; }
.risk-card li { margin-bottom: 4px; }
.risk-unacceptable { --rc: #b42318; --rc-ink: #b42318; }
.risk-high         { --rc: #f59e0b; --rc-ink: #9a5800; }
.risk-limited      { --rc: #0891b2; --rc-ink: #0e6b82; }
.risk-minimal      { --rc: #10b981; --rc-ink: #067a55; }
.status-ia { border-top: 4px solid var(--ia); }

/* Statuts NIS2 */
.status-card { border-radius: var(--radius-lg); padding: 32px; border: 1px solid var(--line); background: #fff; }
.status-card h3 { font-size: 1.35rem; }
.status-card p { color: var(--muted); }
.status-card dl { margin: 22px 0 0; display: grid; gap: 14px; }
.status-card dt { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.status-card dd { margin: 2px 0 0; font-weight: 600; color: var(--navy-900); }
.status-ee { border-top: 4px solid var(--nis2); }
.status-ei { border-top: 4px solid var(--accent); }

.sector-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 14px 0 0; }
.sector-list li { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: .9rem; }

/* Callout */
.callout {
  border-left: 4px solid var(--accent); background: var(--accent-soft);
  padding: 22px 26px; border-radius: 0 var(--radius) var(--radius) 0; color: #4a0a10;
}
.callout strong { color: var(--navy-900); }
.callout p:last-child { margin-bottom: 0; }

/* Thèmes annexe A */
.theme-card b { display: block; font-family: var(--font-head); font-size: 3rem; font-weight: 800; line-height: 1; color: var(--iso); margin-bottom: 10px; }

/* ---------- Autodiagnostic NIS2 ---------- */
.checker { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 920px) { .checker { grid-template-columns: 1fr; gap: 36px; } }
.checker-intro p { color: #9fb0cc; font-size: 1.08rem; }
.checker-intro .checklist { margin-top: 26px; font-size: .98rem; }
.checker-form {
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-lg); padding: 32px;
}
@media (max-width: 520px) { .checker-form { padding: 24px 20px; } }
.checker-form fieldset { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.checker-form legend, .checker-form .lbl { display: block; font-weight: 650; color: #fff; margin-bottom: 10px; font-size: .98rem; padding: 0; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill span {
  display: inline-block; padding: 9px 16px; border-radius: 999px; cursor: pointer; font-size: .93rem;
  border: 1px solid rgba(255, 255, 255, .2); color: #d2dcec; transition: background .15s, border-color .15s, color .15s;
}
.pill span:hover { border-color: rgba(255, 255, 255, .45); }
.pill input:checked + span { background: var(--accent-bright); border-color: var(--accent-bright); color: var(--navy-950); font-weight: 650; }
.pill input:focus-visible + span { outline: 3px solid var(--accent-bright); outline-offset: 2px; }

.checker-form select {
  width: 100%; font: inherit; padding: 13px 14px; border-radius: 10px;
  background: var(--navy-800); color: #fff; border: 1px solid rgba(255, 255, 255, .2);
}
.checker-form select:focus { outline: none; border-color: var(--accent-bright); box-shadow: 0 0 0 4px rgba(255, 122, 102, .2); }
.checker-form .hint { font-size: .8rem; color: #7f8fab; margin: 16px 0 0; }

.result { margin-top: 22px; border-radius: 14px; padding: 22px 24px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .04); }
.result:empty { display: none; }
.result-badge { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; margin-bottom: 10px; }
.result h3 { font-size: 1.2rem; margin-bottom: 8px; }
.result p { margin: 0 0 14px; color: #c7d3e6; font-size: .97rem; }
.result p:last-child { margin-bottom: 0; }
.result[data-level="ee"] { border-color: rgba(245, 158, 11, .55); }
.result[data-level="ee"] .result-badge { background: rgba(245, 158, 11, .18); color: #fbbf24; }
.result[data-level="ei"] { border-color: rgba(255, 122, 102, .55); }
.result[data-level="ei"] .result-badge { background: rgba(255, 122, 102, .16); color: var(--accent-bright); }
.result[data-level="out"] .result-badge { background: rgba(255, 255, 255, .1); color: #d2dcec; }
.result[data-level="error"] { border-color: rgba(248, 113, 113, .6); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; max-width: 880px; }
.faq.center { margin-inline: auto; text-align: left; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 24px; transition: border-color .2s; }
.faq details[open] { border-color: #c9d3e1; }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 20px 0; font-weight: 700; color: var(--navy-900);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 1.6rem; font-weight: 400; line-height: 1; color: var(--accent); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding-bottom: 20px; color: var(--muted); }
.faq details > div p:last-child { margin-bottom: 0; }

/* ---------- Bandeau CTA ---------- */
.cta-band {
  position: relative; overflow: hidden;
  display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap;
  padding: 56px; border-radius: 28px; color: #b3c1d8;
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(200, 51, 30, .32), transparent 60%),
    linear-gradient(120deg, var(--navy-800), var(--navy-900));
}
.cta-band h2 { color: #fff; margin-bottom: .3em; }
.cta-band p { margin: 0; max-width: 36em; }
.cta-band .hero-actions { margin-top: 0; }
@media (max-width: 640px) { .cta-band { padding: 36px 26px; } }

/* ---------- Formulaire de contact ---------- */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.field { display: grid; gap: 7px; margin-bottom: 20px; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 650; font-size: .95rem; color: var(--navy-900); }
.req { color: #b42318; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; padding: 13px 14px;
  border: 1px solid #d3dbe7; border-radius: 10px; background: #fff; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(224, 58, 34, .15); }
[aria-invalid="true"] { border-color: #d92d20 !important; }
.captcha { max-width: 340px; gap: 6px; }
.captcha-question { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--navy-900); }
.captcha input { max-width: 110px; }
.captcha-aide { font-size: .82rem; color: var(--muted); }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; color: var(--muted); margin-bottom: 22px; }
.consent input { width: 19px; height: 19px; margin-top: 3px; flex: none; accent-color: var(--accent); }
.consent input[aria-invalid="true"] { outline: 2px solid #d92d20; outline-offset: 2px; }
.form-note { font-size: .82rem; color: var(--muted); margin: 18px 0 0; }
.form-status { margin-top: 18px; padding: 14px 16px; border-radius: 10px; font-size: .95rem; }
.form-status:empty { display: none; }
.form-status.ok { background: #e7f6ee; color: #0d5132; }
.form-status.error { background: #fef0ef; color: #912018; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } .form-card { padding: 26px 20px; } }

.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; }
.contact-list .icon { margin: 0; width: 44px; height: 44px; flex: none; }
.contact-list b { display: block; color: var(--navy-900); }
.contact-list a { color: var(--ink); }

/* ---------- Pages de contenu (légal) ---------- */
.prose { max-width: 800px; }
.prose h2 { font-size: 1.55rem; margin-top: 2em; }
.prose h3 { margin-top: 1.6em; }
.prose p, .prose li { color: #334155; }
.prose ul { padding-left: 1.2em; }
.todo { background: #fff3dc; color: #7a4500; padding: 1px 6px; border-radius: 4px; font-weight: 600; }

/* ---------- Pied de page ---------- */
.site-footer { background: var(--navy-950); color: #8fa1bf; padding-block: 64px 30px; font-size: .95rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 40px; }
.footer-grid p { margin-top: 18px; max-width: 30em; }
.site-footer h4 { color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.site-footer a { color: #b9c6dc; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .85rem;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* Compteurs animés : chiffres à chasse fixe pour éviter les tremblements pendant le comptage */
.count-num { display: inline; margin: 0; font: inherit; color: inherit; font-variant-numeric: tabular-nums; }

/* Adresse e-mail protégée : masquée le temps que le script la reconstitue (évite d'afficher « [at] ») */
.js .email-protect:not([data-ready]) { visibility: hidden; }

/* Champ piege a robots : hors ecran, jamais visible ni accessible au clavier */
.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Divers ---------- */
.mt-lg { margin-top: 48px; }
.muted { color: var(--muted); }

/* Hero sur une colonne.
   Le texte et l'animation sont deux blocs voisins, ce qui convient aux deux colonnes
   du bureau mais impose, une fois empiles, de tout lire avant de voir l'animation.
   « display: contents » efface la boite du conteneur de texte : ses enfants deviennent
   des elements de la colonne, et l'animation se glisse entre le paragraphe
   d'introduction et les boutons. L'ordre du document reste inchange, donc la lecture
   par un lecteur d'ecran et le parcours au clavier ne bougent pas.
   Ses 357 px repoussent les boutons vers 1000 px : c'est assume, l'animation porte
   les cinq expertises et doit etre vue avant l'appel a l'action.
   « align-items » repasse a stretch : herite de center, il centrerait chaque
   paragraphe sur sa propre largeur. */
@media (max-width: 960px) {
  .hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero-grid > div:first-child { display: contents; }
  .hero-grid .eyebrow { order: 1; }
  .hero-grid h1       { order: 2; }
  .hero-grid .lead    { order: 3; }
  /* Remontee de 10 % de sa hauteur : 374 px de cote ici, donc 37 px de plus. */
  .hero-visual        { order: 4; max-width: 420px; margin-block: 10px 0; }
  .hero-actions       { order: 5; }
  .hero-badges        { order: 6; }
  .hero-trust         { order: 7; }
  /* La legende du schema est retiree une fois empile : elle s'intercale entre
     l'animation et les boutons, ou elle n'a plus de support visuel. */
  .hero { padding-block: 72px 84px; }
}
@media (max-width: 560px) {
  /* 20,3 px sur une colonne de 335 px, c'est l'echelle d'un ecran large : sept
     lignes et 235 px avant d'arriver a l'animation. 17,6 px en font six. */
  .hero .lead { font-size: 1.1rem; }
  .hero-visual  { max-width: 100%; margin-block: 6px 0; } /* 308 px de cote, 10 % = 31 px */
  /* Empiles, les deux boutons prenaient la largeur de leur texte : 274 et 271 px
     dans 350 disponibles, soit deux bords droits decales. Pleine largeur, ils
     forment un bloc net et la zone tactile couvre toute la ligne. */
  .hero .hero-actions { margin-top: 12px; flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-trust   { margin-top: 26px; }
  .hero-badges  { gap: 14px; margin-top: 22px; }
  .hero-badges img { height: 38px; }
  .hero-badges img[src*="cybermalveillance"] { height: 43px; }
  .hero { padding-block: 60px 60px; }
}
@media (max-width: 640px) { .section { padding-block: 72px; } }

/* Apparition au défilement (activée seulement si JS disponible) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }

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

/* ---------- Bandeau clients ----------
   Les logos sont des aplats noirs : sur fond clair ils se lisent tels quels,
   simplement attenues. Au survol ils reprennent toute leur densite. */
.bandeau-clients { padding: 30px 0 26px; background: var(--white); border-block: 1px solid var(--line); }
.clients-titre {
  margin: 0 0 20px; text-align: center;
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.clients-cadre {
  /* Meme largeur que .container : le defilement commence au logo
     et finit au bord du bouton « Nous contacter ». */
  width: min(1180px, 100% - 40px); margin-inline: auto;
  position: relative; overflow: hidden;
}
.clients-voile {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, var(--white) 0%, transparent 9%, transparent 91%, var(--white) 100%);
}
.clients-piste { display: flex; width: max-content; animation: defilement-clients 46s linear infinite; }
.bandeau-clients:hover .clients-piste { animation-play-state: paused; }
.clients-groupe { display: flex; align-items: center; gap: 36px; padding-right: 36px; }
.client-logo {
  /* Reglages repris a l identique d intruzion.net */
  display: block; flex: none; width: 110px; height: 110px; object-fit: contain;
  filter: grayscale(1) brightness(.9); opacity: .85;
  transition: opacity .25s ease;
}
.client-logo:hover { opacity: 1; }

/* Les 22 logos fournis n ont pas la meme densite : la luminance de leur encre
   va de 64 (Trignat, aplat presque noir) a 254 (Work2000, blanc pur, dessine
   pour le fond sombre d origine). On ramene chacun dans la meme plage visuelle,
   sinon le bandeau alterne des taches noires et des trous. */
.client-logo[src*="Trignat"] { filter: grayscale(1) brightness(1.85); }
.client-logo[src*="Alpao"],
.client-logo[src*="INSA"],
.client-logo[src*="Klasmann"] { filter: grayscale(1) brightness(1.45); }
.client-logo[src*="Intelliwan"],
.client-logo[src*="A2A"],
.client-logo[src*="Immo"],
.client-logo[src*="ADT"],
.client-logo[src*="gillet"] { filter: grayscale(1) brightness(1.2); }
/* Logos blancs, dessines pour le fond sombre d origine. Les inverser donne
   du noir pur, qu aucun eclaircissement ne rattrape : multiplier du noir reste
   du noir. On les fond donc sur le blanc de la page, ce qui les amene au gris
   moyen des autres. */
.client-logo[src*="work2000"],
.client-logo[src*="step_nb"],
.client-logo[src*="Fluoptics"] { filter: grayscale(1) invert(1); opacity: .55; }
.client-logo[src*="work2000"]:hover,
.client-logo[src*="step_nb"]:hover,
.client-logo[src*="Fluoptics"]:hover { opacity: .8; }
@keyframes defilement-clients { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .clients-piste { animation: none; } }
@media (max-width: 640px) { .client-logo { width: 88px; height: 88px; } .clients-groupe { gap: 28px; padding-right: 28px; } }

/* ---------- Avis clients ---------- */
.avis { display: flex; flex-direction: column; gap: 16px; }
.avis-etoiles { display: flex; gap: 3px; }
.avis-etoiles svg { width: 17px; height: 17px; fill: #f59e0b; }
.avis-texte {
  margin: 0; font-size: 1rem; line-height: 1.65; color: var(--ink);
  font-style: italic; text-wrap: pretty;
}
.avis-auteur {
  margin-top: auto; padding-top: 6px;
  font-size: .9rem; font-weight: 650; color: var(--navy-900);
}
.avis-auteur span { display: block; font-weight: 400; color: var(--muted); }
.avis-lien { margin: 30px 0 0; text-align: center; font-size: .92rem; }

/* ---------------------------------------------------------------
   Blog : articles repris d'intruzion.net et page d'index
   --------------------------------------------------------------- */
/* Ligne d'informations sous le titre d'un article. Les separateurs sont des
   elements decoratifs : ils ne doivent rien dire a un lecteur d'ecran. */
.meta-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 18px; font-size: .95rem; color: #9fb0cc;
}
.meta-row span { opacity: .5; }

.article-layout { display: block; }
.prose blockquote {
  margin: 1.8em 0; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--accent); color: var(--navy-900); font-size: 1.08rem;
}
.prose a { color: var(--accent-fort); }
.prose > :first-child { margin-top: 0; }

/* Index : le titre de chaque carte est un lien, mais la carte entiere doit
   rester cliquable, sinon la zone utile se limite a une ligne de texte. */
.liste-articles .card { position: relative; }
.liste-articles .card h2 { font-size: 1.16rem; line-height: 1.32; margin: .5em 0 .55em; }
.liste-articles .card h2 a { color: var(--navy-900); text-decoration: none; }
.liste-articles .card h2 a::after { content: ""; position: absolute; inset: 0; }
.liste-articles .card:hover h2 a { color: var(--accent-fort); }
.liste-articles .card p { font-size: .96rem; }

/* ---------------------------------------------------------------
   Menu : groupes deroulants
   Dix entrees a plat devenaient illisibles. Elles sont regroupees sous
   « Conformite » et « Certifications », ce qui ramene le menu a cinq entrees.
   Sur ordinateur, le survol et le focus suffisent a ouvrir un groupe : le
   deroulant fonctionne donc sans JavaScript, y compris au clavier.
   --------------------------------------------------------------- */
.nav-groupe { position: relative; }
.nav-bouton {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 12px; border: 0; border-radius: 10px;
  background: none; font: inherit; font-weight: 600; color: inherit;
  cursor: pointer; white-space: nowrap;
}
.nav-bouton:hover { background: var(--bg); }
.nav-bouton svg { width: 14px; height: 14px; transition: transform .18s ease; }
.nav-bouton[aria-expanded="true"] svg { transform: rotate(180deg); }
/* Le groupe qui contient la page courante porte la meme couleur que le lien actif. */
.nav-groupe:has(a[aria-current]) > .nav-bouton { color: var(--accent-fort); background: var(--accent-soft); }

.nav-sous {
  display: none; flex-direction: column; gap: 2px;
  padding: 8px; border-radius: 14px; background: #fff;
  border: 1px solid var(--line); box-shadow: 0 22px 34px -22px rgba(11, 27, 51, .4);
}
.nav-sous a { display: block; }

@media (min-width: 1160px) {
  .nav-sous {
    position: absolute; top: 100%; left: 0; z-index: 40; min-width: 216px;
  }
  /* Le panneau doit toucher le bouton. Avec le moindre interstice, le pointeur
     qui descend vers les items quitte le groupe, le survol tombe et le menu se
     referme : il ne reste alors que le clic pour l'ouvrir.
     L'ecart visuel est recree par une marge interieure, qui elle appartient au
     panneau et conserve donc le survol. */
  .nav-sous { padding-top: 14px; }
  /* Sans script : le survol ou le passage au clavier ouvre le groupe. */
  .nav-groupe:hover > .nav-sous,
  .nav-groupe:focus-within > .nav-sous,
  .nav-bouton[aria-expanded="true"] + .nav-sous { display: flex; }
}

@media (max-width: 1159px) {
  /* Dans le tiroir, un groupe est une section que l'on deplie sur place. */
  .nav-bouton { width: 100%; justify-content: space-between; padding: 12px 14px; }
  .nav-sous { border: 0; box-shadow: none; padding: 2px 0 6px 14px; background: none; }
  .nav-bouton[aria-expanded="true"] + .nav-sous { display: flex; }
}

/* ================= Animation du hero, reprise d'intruzion.net =================
   Jauge de risque qui descend a mesure que les actions se cochent. Moteur :
   assets/js/hero-scenes.js. Les quatre variables ci-dessous viennent de
   l'ancienne feuille et restent confinees a ce bloc. La classe « pill » de
   l'original devient « dash-pill » : le formulaire de contact utilise deja ce
   nom pour ses etiquettes. */
.dash-wrap {
  --line-dark: rgba(255, 255, 255, .12);
  --on-dark-muted: #aab6c6;
  --shadow-lg: 0 24px 60px -20px rgba(8, 14, 24, .45);
  --steel: #2a5b8c;
}
/* Dashboard visual */
.dash {
  background: linear-gradient(180deg, #1c2736, #16202d);
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; padding: 22px;
  box-shadow: var(--shadow-lg); font-size: .9rem;
}
.dash-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line-dark); margin-bottom: 18px; }
.dash-title { font-family: var(--font-head); font-weight: 700; color: #fff; font-size: 1rem; }
.dash-sub { color: var(--on-dark-muted); font-size: .8rem; }
.dash-pill { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; padding: 4px 10px; border-radius: 99px; letter-spacing: .02em; }
.dash-pill--ok { background: rgba(79, 197, 131, .14); color: #6ad69a; }
.dash-pill--warn { background: rgba(240, 170, 60, .15); color: #f2b651; }
.dash-pill--risk { background: rgba(255, 90, 115, .15); color: #ff7d91; }
.dash-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: block; }
/* Carte en perspective, comme sur le site actuel */
.dash-wrap { position: relative; perspective: 1500px; }
.dash-wrap::before { content: ""; position: absolute; inset: -60px -40px; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 280px 240px at 50% 40%, rgba(209, 31, 61, .22), transparent 100%); animation: dash-glow 5s ease-in-out infinite; }
.dash-3d { position: relative; z-index: 1; transform-style: preserve-3d; transform: rotateY(-18deg) rotateX(4deg); animation: dash-breathe 7s ease-in-out infinite, dash-in .9s cubic-bezier(.22, 1, .36, 1) both; }
.dash-3d .dash { position: relative; overflow: hidden; box-shadow: 34px 44px 60px -28px rgba(0, 0, 0, .55); transition: box-shadow .4s ease; }
.dash.state-high { box-shadow: 34px 44px 60px -28px rgba(0, 0, 0, .55), 0 0 32px 4px rgba(209, 31, 61, .45); }
.dash.state-mod { box-shadow: 34px 44px 60px -28px rgba(0, 0, 0, .55), 0 0 28px 2px rgba(240, 170, 60, .3); }
.dash.state-ok { box-shadow: 34px 44px 60px -28px rgba(0, 0, 0, .55), 0 0 28px 2px rgba(79, 197, 131, .3); }
.dash-pill { transition: background .3s, color .3s; }
.dash-pill--risk.pulse { animation: risk-pulse 1.6s ease-in-out infinite; }
.dash-ticker { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-dark); font-size: .82rem; color: var(--on-dark-muted); min-height: 40px; }
.dash-pulse { width: 7px; height: 7px; border-radius: 50%; background: #4fc583; position: relative; flex: none; }
.dash-pulse::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid #4fc583; animation: dash-ring 1.8s ease-out infinite; }
@media (max-width: 980px) {
  .dash-wrap { perspective: 900px; max-width: 480px; margin: 0 auto; }
  /* L'angle est repris sur la transformation elle-meme et pas seulement dans
     l'animation : « mouvement reduit » coupe toutes les animations du site, et
     la carte retombait alors sur les -18deg du bureau, trop larges pour un
     telephone. */
  .dash-3d { transform: rotateY(-10deg) rotateX(2deg); animation-name: dash-breathe-m, dash-in; }
}
@media (prefers-reduced-motion: reduce) {
  .dash-3d, .dash-wrap::before, .dash-scan, .dash-pulse::after { animation: none; }
}
.timeline li.done::before { background: var(--steel); }
/* ===== Scènes du hero (animations enchaînées) ===== */
.hero-scenes { position: relative; height: 486px; padding: 0 !important; }
.hero-scenes .scene { position: absolute; inset: 16px 18px 38px; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .6s ease, transform .6s ease, visibility .6s; }
.hero-scenes .scene.on { opacity: 1; visibility: visible; transform: none; }
.hero-scenes .scene > .dash-ticker { margin-top: auto; }
.hero-scenes .v2-stage { flex: 1; min-height: 0; }
.hero-scenes .v2-synth .dash-ticker { margin-top: auto; }
.scene-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 8px; }
.scene-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(255,255,255,.25); cursor: pointer; transition: width .3s, background .3s; }
.scene-dots button[aria-selected="true"] { width: 26px; background: #ff6b82; }
.scene-dots button:hover { background: rgba(255,255,255,.55); }
.hero-scenes .map { flex: 1; min-height: 0; }
.hero-scenes .v4-callout { flex: none; }
/* 3 · Jauge */
.v3-body { display: grid; grid-template-columns: 190px 1fr; gap: 24px; align-items: center; flex: 1; padding: 6px 0 4px; }
.gauge { position: relative; width: 190px; height: 190px; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.g-track { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 14; }
.g-val { fill: none; stroke: #ff7a66; stroke-width: 14; stroke-linecap: round; stroke-dasharray: 515.2; stroke-dashoffset: 113; transition: stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1), stroke .6s; filter: drop-shadow(0 0 6px currentColor); }
.g-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.g-center b { font-family: var(--font-head); font-size: 3rem; color: #fff; line-height: 1; }
.g-center span { color: var(--on-dark-muted); font-size: .85rem; }
.g-center small { margin-top: 6px; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--on-dark-muted); }
.v3-list { list-style: none; margin: 0; padding: 0; }
.v3-list li { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line-dark); color: var(--on-dark-muted); font-size: .88rem; transition: color .4s; }
.v3-list li:last-child { border-bottom: 0; }
.v3-list .ck { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #4a5a70; transition: all .35s; position: relative; }
.v3-list li.done { color: #fff; }
.v3-list li.done .ck { background: #1f8a4c; border-color: #4fc583; box-shadow: 0 0 10px rgba(79,197,131,.5); }
.v3-list li.done .ck::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@media (max-width: 640px) {
  .v3-body { grid-template-columns: 1fr; justify-items: center; }
  .gauge { width: 150px; height: 150px; }
  .hero-scenes { height: 560px; }
}
.hero-scenes .g-center small { max-width: 104px; text-align: center; line-height: 1.35; font-size: .66rem; letter-spacing: .08em; }
.hero-scenes.single { height: auto; }
.hero-scenes.single .scene { position: relative; inset: auto; padding: 18px 20px; gap: 6px; }
.hero-scenes.single .v3-body { padding: 14px 0 10px; }
/* Jauge du hero agrandie */
.hero-scenes .v3-body { grid-template-columns: 220px 1fr; gap: 22px; }
.hero-scenes .gauge { width: 220px; height: 220px; }
.hero-scenes .g-center b { font-size: 3.5rem; }
.hero-scenes .g-center small { max-width: 124px; }
@media (max-width: 640px) {
  .hero-scenes .v3-body { grid-template-columns: 1fr; }
  .hero-scenes .gauge { width: 180px; height: 180px; }
  .hero-scenes .g-center b { font-size: 3rem; }
}

/* ===== Carte du hero, hero empile (tablette et grand telephone) =====
   Sous 960 px le hero passe sur une colonne et la carte tombe a 420 px de large,
   mais la jauge gardait ses 220 px du bureau : il restait 160 px a la liste, dont
   chaque ligne se brisait en trois. 610 px de haut pour cinq actions. */
@media (max-width: 960px) {
  .hero-scenes .v3-body { grid-template-columns: 150px 1fr; gap: 16px; }
  .hero-scenes .gauge { width: 150px; height: 150px; }
  .hero-scenes .g-center b { font-size: 2.4rem; }
  .hero-scenes .g-center small { max-width: 92px; font-size: .6rem; }
  .hero-scenes .v3-list li { padding: 6px 0; font-size: .8rem; line-height: 1.35; }
  .hero-scenes.single .scene { padding: 16px 16px 14px; }
}

/* ===== Carte du hero sur telephone =====
   Empilee, la jauge au-dessus de ses cinq lignes donnait une carte de 660 px :
   tout l'ecran d'un telephone, boutons repousses hors de vue. Elle repasse a
   cote de la liste en 104 px, ce qui ramene l'ensemble sous 340 px. Les regles
   640 px ci-dessus sont volontairement laissees en place : elles servent les
   autres scenes du moteur, celles-ci ne visent que « .hero-scenes ». */
@media (max-width: 640px) {
  /* Carte a plat. La perspective decale les bords (26 px a gauche, 358 a droite
     dans 375) et penche le texte : lisible sur un grand ecran, genant sur un
     telephone ou la carte occupe toute la largeur. Seule l'apparition est
     conservee ; « dash-in » est redeclare en entier, car une liste d'un seul nom
     reprendrait la duree de « dash-breathe », soit 7 s en boucle. */
  /* A plat, la carte n'a plus l'ombre oblique qui la detachait du premier bouton :
     les 12 px herites de « .hero-actions » les collaient l'un a l'autre. Marges de
     flex, donc pas de fusion : 16 + 12 = 28 px. */
  .hero-visual { margin-bottom: 16px; }
  .dash-wrap { perspective: none; }
  .dash-3d { transform: none; animation: dash-in .9s cubic-bezier(.22, 1, .36, 1) both; }
  /* L'ombre portee etait decalee de 34 px pour suivre la rotation ; a plat elle
     se recentre. Le halo colore du niveau de risque, lui, reste. */
  .dash-3d .dash { box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .6); }
  .dash.state-high { box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .6), 0 0 32px 4px rgba(209, 31, 61, .45); }
  .dash.state-mod { box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .6), 0 0 28px 2px rgba(240, 170, 60, .3); }
  .dash.state-ok { box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .6), 0 0 28px 2px rgba(79, 197, 131, .3); }
  /* Le halo deborde de 40 px de chaque cote : trop large une fois la carte
     ramenee a la largeur de l'ecran. */
  .dash-wrap::before { inset: -20px; }
  .hero-scenes.single .scene { padding: 14px 14px 12px; gap: 4px; }
  .hero-scenes .dash-top { padding-bottom: 8px; margin-bottom: 4px; }
  .hero-scenes .dash-title { font-size: .92rem; }
  .hero-scenes .v3-body { grid-template-columns: 104px 1fr; justify-items: stretch; align-items: center; gap: 14px; padding: 6px 0 4px; }
  .hero-scenes .gauge { width: 104px; height: 104px; }
  /* Anneau epaissi : a 104 px, 14 px de trait paraissent un filet. */
  .hero-scenes .g-track, .hero-scenes .g-val { stroke-width: 16; }
  .hero-scenes .g-center b { font-size: 1.8rem; }
  .hero-scenes .g-center span { font-size: .68rem; }
  /* « Avant audit » ne tient plus dans l'anneau ; le bandeau du bas le dit. */
  .hero-scenes .g-center small { display: none; }
  .hero-scenes .v3-list li { padding: 3px 0; gap: 8px; font-size: .74rem; line-height: 1.3; border-bottom: 0; }
  .hero-scenes .v3-list .ck { width: 14px; height: 14px; border-width: 1.5px; }
  .hero-scenes .v3-list li.done .ck::after { left: 3.5px; top: 0; width: 4px; height: 8px; }
  .hero-scenes .dash-ticker { margin-top: 6px; padding-top: 8px; min-height: 0; font-size: .74rem; }
}

/* ===== Carte du hero, grille a deux colonnes etroite (961 a 1150 px) =====
   La mise en page compacte s'arretait a 960 px, juste la ou commence la plage la
   plus serree : la carte y fait 368 a 433 px, moins qu'une tablette, pendant que
   la jauge garde les 220 px dessines pour un grand ecran. Il restait 150 px a la
   liste et chaque ligne se brisait en quatre. Portables en 1024 et fenetres non
   agrandies. Au-dela de 1150 px la carte retrouve sa place et rien ne change. */
@media (min-width: 961px) and (max-width: 1100px) {
  .hero-scenes.single .scene { padding: 16px 16px 14px; }
  .hero-scenes .dash-top { padding-bottom: 10px; margin-bottom: 6px; }
  .hero-scenes .dash-title { font-size: .95rem; }
  .hero-scenes .v3-body { grid-template-columns: 118px 1fr; gap: 14px; padding: 8px 0 6px; }
  .hero-scenes .gauge { width: 118px; height: 118px; }
  .hero-scenes .g-track, .hero-scenes .g-val { stroke-width: 16; }
  .hero-scenes .g-center b { font-size: 2rem; }
  .hero-scenes .g-center span { font-size: .7rem; }
  /* « Avant audit » ne tient plus dans l'anneau ; le bandeau du bas le dit. */
  .hero-scenes .g-center small { display: none; }
  .hero-scenes .v3-list li { padding: 5px 0; gap: 8px; font-size: .78rem; line-height: 1.35; }
  .hero-scenes .v3-list .ck { width: 16px; height: 16px; border-width: 1.5px; }
  .hero-scenes .v3-list li.done .ck::after { left: 4px; top: 0.5px; width: 4px; height: 9px; }
  .hero-scenes .dash-ticker { margin-top: 8px; padding-top: 10px; min-height: 0; font-size: .76rem; }
}
/* 1101 a 1250 px : la carte gagne 60 px mais reste loin des 470 px pour lesquels
   la jauge de 220 a ete dessinee. Palier intermediaire, sans quoi on retombait a
   570 px de haut et quatre lignes par action juste au-dessus de la plage reglee
   ci-dessus. Au-dela de 1250 px la carte a sa largeur definitive et garde la
   grande jauge d'origine. */
@media (min-width: 1101px) and (max-width: 1250px) {
  .hero-scenes.single .scene { padding: 16px 18px 14px; }
  .hero-scenes .v3-body { grid-template-columns: 150px 1fr; gap: 18px; padding: 10px 0 8px; }
  .hero-scenes .gauge { width: 150px; height: 150px; }
  .hero-scenes .g-center b { font-size: 2.5rem; }
  .hero-scenes .g-center small { max-width: 96px; font-size: .62rem; }
  .hero-scenes .v3-list li { padding: 6px 0; font-size: .82rem; line-height: 1.35; }
  .hero-scenes .dash-ticker { min-height: 0; font-size: .8rem; }
}
@keyframes dash-glow { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes dash-breathe { 0%, 100% { transform: rotateY(-18deg) rotateX(4deg); } 50% { transform: rotateY(-15.5deg) rotateX(5.5deg); } }
@keyframes dash-breathe-m { 0%, 100% { transform: rotateY(-10deg) rotateX(2deg); } 50% { transform: rotateY(-8deg) rotateX(3.5deg); } }
@keyframes dash-in { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes risk-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 115, .5); } 50% { box-shadow: 0 0 12px 2px rgba(255, 90, 115, .5); } }
@keyframes dash-ring { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }