/* =========================================================
   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;
  --white: #fff;

  --accent: #9f111b;        /* rouge P2CI (logo) */
  --accent-hover: #7f0d16;
  --accent-bright: #ff6b75; /* déclinaison lisible sur fond marine */
  --accent-soft: #fbeaeb;

  --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); }
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); color: #fff; box-shadow: 0 10px 24px -12px rgba(159, 17, 27, .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); 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, 30, 45, .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); }
.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; }
.hero h1 em, .page-hero h1 em {
  font-style: normal;
  background: linear-gradient(90deg, #ff6b75, #ffb3a7);
  -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-visual-caption { margin: 4px 0 0; text-align: center; font-size: .85rem; color: #8fa1bf; }
.hv-label { font: 700 14px/1 var(--font); fill: #fff; letter-spacing: .03em; }

.hv-spin, .hv-spin-rev, .hv-pulse, .hv-glow { transform-box: view-box; transform-origin: 240px 240px; }
.hv-spin     { animation: hv-spin 60s linear infinite; }
.hv-spin-rev { animation: hv-spin 90s linear infinite reverse; }
.hv-glow     { animation: hv-glow 4s ease-in-out infinite; }
.hv-pulse    { opacity: 0; animation: hv-pulse 4s ease-out infinite; }
.hv-pulse-2  { animation-delay: 2s; }
.hv-flow     { stroke-dasharray: 3 15; animation: hv-flow 1.4s linear infinite; }
.hv-node     { animation: hv-float 6s ease-in-out infinite; animation-delay: calc(var(--d) * -1.5); }
.hv-halo     { transform-box: fill-box; transform-origin: center; opacity: 0; animation: hv-halo 4s ease-out infinite; animation-delay: var(--d); }
.hv-shield   { animation: hv-float 5s ease-in-out infinite; }
/* Logo central : le P se trace, se remplit, reflet et onde, puis recommence (cycle de 7 s).
   État de repos visible (logo plein) pour les visiteurs qui désactivent les animations. */
.hv-logo-draw  { stroke-dasharray: 100; stroke-dashoffset: 0; animation: hv-logo-draw 7s ease-in-out infinite; }
.hv-logo-fill  { animation: hv-logo-fill 7s ease-in-out infinite; }
.hv-logo-shine { animation: hv-logo-shine 7s ease-in-out infinite; }
.hv-logo-ring  { opacity: 0; transform-box: fill-box; transform-origin: center; animation: hv-logo-ring 7s ease-out infinite; }

@keyframes hv-spin  { to { transform: rotate(360deg); } }
@keyframes hv-glow  { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes hv-pulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.7); opacity: 0; } }
@keyframes hv-flow  { to { stroke-dashoffset: -36; } }
@keyframes hv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes hv-halo  { 0% { transform: scale(1); opacity: .9; } 35%, 100% { transform: scale(1.3); opacity: 0; } }
@keyframes hv-logo-draw  { 0% { stroke-dashoffset: 100; opacity: 1; } 30%, 88% { stroke-dashoffset: 0; opacity: 1; } 94%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes hv-logo-fill  { 0%, 28% { opacity: 0; } 38%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes hv-logo-shine { 0%, 42% { transform: translateX(0); } 60%, 100% { transform: translateX(3600px); } }
@keyframes hv-logo-ring  { 0%, 40% { opacity: 0; transform: scale(1); } 43% { opacity: .9; transform: scale(1); } 62%, 100% { opacity: 0; transform: scale(1.3); } }

/* Badges agrandis quand l'illustration rétrécit (propriété « scale », cumulable avec l'animation de flottement) */
.hv-node { transform-box: fill-box; transform-origin: center; }
@media (max-width: 960px) { .hv-node { scale: 1.2; } }
@media (max-width: 560px) { .hv-node { scale: 1.4; } }

/* ---------- 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); }
.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, 107, 117, .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, 107, 117, .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, 107, 117, .55); }
.result[data-level="ei"] .result-badge { background: rgba(255, 107, 117, .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, 30, 45, .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(159, 17, 27, .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: 374px; margin-block: -51px 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-visual-caption { display: none; }
  .hero { padding-block: 72px 84px; }
}
@media (max-width: 560px) {
  .hero-visual  { max-width: 308px; margin-block: -50px 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. */
  /* « Reellement securise. » commence sa propre ligne : sur un telephone, la
     coupure tombait au milieu de la seconde phrase. « width: fit-content »
     garde le degrade cale sur le texte et non sur toute la largeur du bloc. */
  .hero h1 em { display: block; width: fit-content; }
  .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); }
.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); }
.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); 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; }
}