/* =============================================================
   AI-Evident — feuille de style commune
   Charte : indigo profond #2E1A6B, fond blanc / gris très clair,
   motif hexagones/circuits en accent discret (jamais dans le texte)
   ============================================================= */

/* Police Inter auto-hébergée (plus de requête vers fonts.googleapis.com /
   fonts.gstatic.com à chaque chargement de page) */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Police Fraunces auto-hébergée (titres, citations, prix) — même origine
   que Inter ci-dessus : aucun appel à Google Fonts. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fraunces-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fraunces-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/fraunces-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/fraunces-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fraunces-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fraunces-latin-ext-400-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --indigo: #2E1A6B;
  --indigo-dark: #1E1149;
  --indigo-light: #4C34A8;
  --indigo-tint: #EFEDF9;
  --bg: #FFFFFF;
  --bg-soft: #F7F6FB;
  --text: #201A38;
  --text-muted: #5B5770;
  --border: #E5E2F0;
  --shadow: 0 12px 32px rgba(46, 26, 107, 0.08);
  --radius: 10px;
  /* Niveaux de résultat du Test AI Act — teintes douces accordées au violet
     du site (même registre de saturation/luminosité que --indigo). */
  --result-red: #B3453F;
  --result-red-tint: #F7E8E6;
  --result-orange: #B3703A;
  --result-orange-tint: #F7EDE0;
  --result-green: #3F7A5C;
  --result-green-tint: #E7F1EC;
  --max-width: 1160px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-sans: var(--font);
  --font-display: "Fraunces", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Garantit que l'attribut hidden l'emporte toujours sur une règle display
   définie ailleurs (même spécificité) : évite les éléments "cachés" qui
   restent visibles à cause d'un display:flex/grid concurrent. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--indigo);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

/* Liens dans le texte courant : le contraste entre la couleur des liens et
   celle du texte n'est que de 1,17:1, d'où ce soulignement permanent
   (hors menu, boutons et pied de page, qui ont leur propre traitement). */
.article-body p a,
.article-body li a,
.article-lead a,
.lead a,
.form-note a,
.teaser-line a,
.diag-disclaimer a,
.diag-motif a,
.cookie-banner-text a,
.video-consent-text a,
.audit-section p a,
.audit-section li a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* Focus clavier visible, partout */
:focus-visible {
  outline: 3px solid var(--indigo-light);
  outline-offset: 3px;
}
.hero-dark :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible {
  outline-color: #fff;
}

h1, h2, h3, h4 {
  font-family: var(--font);
  color: var(--indigo);
  line-height: 1.22;
  margin: 0 0 0.6em;
  font-weight: 700;
  letter-spacing: -0.01em;
}

h1, h2 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.15rem); }
h3 { font-size: 1.25rem; }

/* Mot(s) entre astérisques dans certains titres : italique, violet clair */
h1 em, h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--indigo-light);
}

p { margin: 0 0 1em; color: var(--text); }

.text-muted { color: var(--text-muted); }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}
.container-wide { max-width: 1320px; }

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--indigo);
  color: #fff;
  padding: 10px 16px;
  z-index: 1000;
  border-radius: 0 0 6px 0;
}
.skip-link:focus {
  left: 0;
  top: 0;
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease, box-shadow 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

/* Règle de spécificité volontairement renforcée (.btn.btn-primary) : un bouton
   garde toujours sa couleur de texte propre, quel que soit le conteneur
   (nav, footer, carte...) qui définirait par ailleurs un style pour ses liens "a". */
.btn.btn-primary {
  background: var(--indigo);
  color: #fff;
}
.btn.btn-primary:hover {
  background: var(--indigo-dark);
  box-shadow: 0 0 0 1px rgba(76, 52, 168, 0.25), 0 0 24px rgba(139, 110, 255, 0.55);
}

.btn.btn-outline {
  background: transparent;
  border-color: var(--indigo);
  color: var(--indigo);
}
.btn.btn-outline:hover { background: var(--indigo-tint); }

.btn.btn-ghost {
  background: transparent;
  color: var(--indigo);
  padding: 13px 8px;
}
.btn-ghost:hover { text-decoration: underline; background: none; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 1.8em;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--indigo);
  letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; }
.brand img {
  height: 32px;
  width: auto;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 26px;
  margin: 0;
  padding: 0;
}

.main-nav a:not(.btn) {
  color: var(--text);
  font-weight: 500;
  font-size: 0.98rem;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.main-nav a:not(.btn):hover { color: var(--indigo); text-decoration: none; }
.main-nav a[aria-current="page"] {
  color: var(--indigo);
  border-bottom-color: var(--indigo);
  font-weight: 600;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 20px;
  margin: 0 auto;
  background: var(--indigo);
}

/* ---------- Hero / bandeaux avec motif hexagones ---------- */
.hex-corner {
  position: absolute;
  width: 440px;
  max-width: 55vw;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.hex-corner.top-right { top: 0; right: 0; }
.hex-corner.bottom-left {
  bottom: 0;
  left: 0;
  transform: scale(-1, -1);
}
.hex-corner--inset.top-right { top: 12px; right: 40px; width: 360px; }
.hex-corner--inset.bottom-left { bottom: 12px; left: 40px; width: 360px; }

/* ---------- Accueil : haut de page (.hd) ----------
   Issu de _figures/accueil-hero-clair.html. Fond clair, faisceaux et grille
   animés, lueur qui suit la souris, tableau de bord décoratif incliné en 3D
   (ordinateur uniquement), cartes de référentiels avec icônes SVG générées
   par script, puis bandeau « La conformité, en 3 étapes » (.st). */
.hd {
  --ink: #0F0A2E;
  --v1: #4B33A6;
  --v2: #7A5EE6;
  --v3: #A48BFF;
  --lav: #CFC6F2;
  --txt: #D9D0FA;
  --mx: 70%;
  --my: 40%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #1E1446;
  font-family: var(--font-sans);
  padding: 72px 24px 56px;
  background: linear-gradient(170deg, #FBFAFF 0%, #F3EFFD 55%, #EAE2FC 100%);
}
.hd * { box-sizing: border-box; }
.hd-glow {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(40% 50% at 78% 30%, rgba(164, 139, 255, 0.35), transparent 70%), radial-gradient(30% 40% at 8% 80%, rgba(207, 198, 242, 0.6), transparent 70%);
}
.hd-beam {
  position: absolute;
  z-index: -2;
  pointer-events: none;
  width: 140%;
  height: 2px;
  left: -20%;
  top: 42%;
  transform: rotate(-14deg);
  background: linear-gradient(90deg, transparent, rgba(164, 139, 255, 0) 20%, rgba(164, 139, 255, 0.5) 55%, rgba(255, 255, 255, 0.9) 62%, rgba(164, 139, 255, 0) 85%, transparent);
  filter: blur(1px);
  opacity: 0.7;
  animation: hd-beam 9s ease-in-out infinite;
}
.hd-beam.b2 { top: 70%; transform: rotate(-8deg); opacity: 0.35; animation-duration: 12s; animation-delay: -4s; }
@keyframes hd-beam {
  0%, 100% { transform: translateX(-8%) rotate(-14deg); }
  50% { transform: translateX(8%) rotate(-14deg); }
}
.hd-grid-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image: linear-gradient(rgba(122, 94, 230, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(122, 94, 230, 0.1) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(420px circle at var(--mx) var(--my), #000, transparent 75%);
  mask-image: radial-gradient(420px circle at var(--mx) var(--my), #000, transparent 75%);
}
.hd::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(500px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.8), rgba(164, 139, 255, 0.08) 40%, transparent 65%);
}

.hd-in { max-width: 1260px; margin: 0 auto; }
.hd-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; align-items: center; }

/* Colonne texte */
.hd-k {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #E3DDF5;
  background: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #4B33A6;
  text-transform: uppercase;
}
.hd-k::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--v3); box-shadow: 0 0 12px var(--v3); }
.hd-t {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 4.8vw, 4.3rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #1E1446;
}
.hd-t em {
  display: block;
  font-style: normal;
  background: linear-gradient(90deg, #4B33A6, #7A5EE6 50%, #A48BFF);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hd-shine 7s ease-in-out infinite alternate;
}
@keyframes hd-shine { to { background-position: 100% 0; } }
.hd-lead { margin: 24px 0 0; max-width: 42ch; font-size: clamp(1.08rem, 1.4vw, 1.22rem); line-height: 1.6; color: #544B70; }
.hd-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hd-b {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1.02rem;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
}
.hd-b.p { color: #fff; background: linear-gradient(90deg, #4B33A6, #7A5EE6); box-shadow: 0 14px 34px rgba(75, 51, 166, 0.35); }
.hd-b.p::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: hd-btn 4.5s ease-in-out infinite;
}
@keyframes hd-btn {
  0%, 60% { left: -60%; }
  100% { left: 130%; }
}
.hd-b.s { color: #1E1446; border: 1.5px solid #1E1446; }
.hd-b svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform 0.3s; }
.hd-b:hover { transform: translateY(-3px); }
.hd-b:hover svg { transform: translateX(4px); }
.hd-b.p:hover { box-shadow: 0 20px 44px rgba(122, 94, 230, 0.6); }
.hd-b.s:hover { background: rgba(30, 20, 70, 0.06); }
.hd-b:focus-visible { outline: 3px solid var(--v3); outline-offset: 3px; }

/* Tableau de bord (exemple de restitution) */
.hd-dash-wrap { perspective: 1400px; }
.hd-dash {
  --rx: 6deg;
  --ry: -12deg;
  position: relative;
  color: #fff;
  border-radius: 22px;
  padding: 18px;
  background: linear-gradient(160deg, rgba(40, 28, 110, 0.85), rgba(18, 12, 58, 0.92));
  border: 1px solid rgba(164, 139, 255, 0.45);
  box-shadow: 0 40px 90px rgba(75, 51, 166, 0.35), 0 0 60px rgba(122, 94, 230, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hd-dash::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(380px circle at var(--gx, 60%) var(--gy, 20%), rgba(255, 255, 255, 0.1), transparent 60%);
}
.hd-ex {
  position: absolute;
  right: 18px;
  top: -13px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #fff;
  color: var(--v1);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}
.hd-bar { display: flex; align-items: center; gap: 10px; padding: 2px 4px 14px; border-bottom: 1px solid rgba(164, 139, 255, 0.18); font-size: 0.8rem; color: #B9AEE6; }
.hd-bar b { color: #fff; font-weight: 700; }
.hd-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); }
.hd-bar i:first-child { background: #7A5EE6; }
.hd-bar span { margin-left: auto; }
.hd-body { display: grid; grid-template-columns: 1.05fr 1fr; gap: 12px; margin-top: 14px; }
.hd-panel { border-radius: 14px; padding: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(164, 139, 255, 0.18); }
.hd-panel h4 { margin: 0 0 10px; font-size: 0.78rem; font-weight: 600; color: #D9D0FA; }
/* Anneau */
.hd-ring { display: flex; align-items: center; gap: 14px; }
.hd-ring svg { width: 110px; height: 110px; flex: none; transform: rotate(-90deg); }
.hd-ring .bg { fill: none; stroke: rgba(164, 139, 255, 0.18); stroke-width: 10; }
.hd-ring .fg {
  fill: none;
  stroke: url(#hd-g);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 1.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  filter: drop-shadow(0 0 6px rgba(164, 139, 255, 0.7));
}
.hd-ring-v { position: relative; }
.hd-ring-v b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.35rem; font-weight: 800; line-height: 1; text-align: center; }
.hd-ring-v b small { display: block; font-size: 0.62rem; font-weight: 500; color: #B9AEE6; margin-top: 3px; }
.hd-leg { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.74rem; color: #D9D0FA; }
.hd-leg li { display: flex; align-items: center; gap: 7px; }
.hd-leg i { width: 8px; height: 8px; border-radius: 50%; }
/* Indicateurs */
.hd-kpis { display: grid; gap: 8px; }
.hd-kpi { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(164, 139, 255, 0.18); }
.hd-kpi .ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(122, 94, 230, 0.25); }
.hd-kpi svg { width: 16px; height: 16px; stroke: #E4DEF7; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hd-kpi div { font-size: 0.7rem; color: #B9AEE6; line-height: 1.25; }
.hd-kpi b { display: block; font-size: 1.05rem; color: #fff; font-weight: 700; }
/* Chaîne */
.hd-flow { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 8px; }
.hd-node {
  padding: 10px 8px;
  border-radius: 12px;
  text-align: center;
  font-size: 0.74rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(164, 139, 255, 0.25);
  transition: background 0.5s, box-shadow 0.5s, border-color 0.5s;
}
.hd-node.is-on { background: rgba(122, 94, 230, 0.35); border-color: var(--v3); box-shadow: 0 0 18px rgba(164, 139, 255, 0.5); }
.hd-arr { width: 26px; height: 2px; background: linear-gradient(90deg, rgba(164, 139, 255, 0.2), var(--v3)); position: relative; }
.hd-arr::after { content: ""; position: absolute; right: -1px; top: -3px; border: 4px solid transparent; border-left-color: var(--v3); }
/* Courbe */
.hd-chart { grid-column: 1 / -1; }
.hd-chart svg { width: 100%; height: 70px; display: block; overflow: visible; }
.hd-chart .ln {
  fill: none;
  stroke: url(#hd-g);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke-dashoffset 2.2s 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  filter: drop-shadow(0 0 6px rgba(164, 139, 255, 0.6));
}
.hd-chart .area { fill: url(#hd-a); opacity: 0; transition: opacity 1.2s 1.2s; }
.hd.is-in .hd-chart .ln { stroke-dashoffset: 0; }
.hd.is-in .hd-chart .area { opacity: 1; }

/* Référentiels */
.hd-refs { margin-top: 56px; }
.hd-refs-t { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; font-weight: 600; color: #1E1446; font-size: 0.95rem; }
.hd-refs-t::before, .hd-refs-t::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(122, 94, 230, 0.4), transparent); }
.hd-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.hd-card {
  --cx: 50%;
  --cy: 50%;
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  isolation: isolate;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #fff;
  box-shadow: 0 10px 26px rgba(75, 51, 166, 0.08);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.35s, box-shadow 0.35s;
}
.hd-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.35s;
  background: radial-gradient(200px circle at var(--cx) var(--cy), rgba(122, 94, 230, 0.14), transparent 60%);
}
.hd-card:hover { transform: translateY(-4px); border-color: #D8CDF8; box-shadow: 0 18px 40px rgba(75, 51, 166, 0.16); }
.hd-card:hover::before { opacity: 1; }
.hd-card b { display: block; font-size: 0.98rem; color: #1E1446; }
.hd-card span { display: block; margin-top: 3px; font-size: 0.8rem; color: #6E6787; line-height: 1.35; }

/* Icônes des cadres de référence : SVG générées par accueil-hero.js
   (drapeau européen, globe 42001, jauge NIST, cadenas RGPD), posées sur une
   pastille sombre pour rester lisibles (traits blancs). */
.hd-card .logo {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(145deg, #2C1C66, #4B33A6);
  box-shadow: 0 8px 18px rgba(75, 51, 166, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s;
}
.hd-card .logo svg { width: 70%; height: 70%; overflow: visible; }
.hd-card:hover .logo { transform: scale(1.08); box-shadow: 0 12px 26px rgba(75, 51, 166, 0.4), 0 0 0 4px rgba(164, 139, 255, 0.2); }
.hd-card .logo[data-ic="eu"] { background: radial-gradient(circle at 35% 30%, #2A3FA8, #14246E); }
.hd-card .logo .star { fill: #FFCC00; transform-box: fill-box; transform-origin: center; }
.hd-card:hover .logo .stars { animation: hd-stars 6s linear infinite; transform-origin: 50px 50px; }
@keyframes hd-stars { to { transform: rotate(360deg); } }
.hd-card .logo .ln { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.hd-card .logo .thin { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 3; }
.hd-card .logo .txt { fill: #fff; font-family: var(--font-sans); font-weight: 800; text-anchor: middle; dominant-baseline: central; }
.hd-card:hover .logo .needle { transform: rotate(55deg); }
.hd-card .logo .needle { transform-origin: 50px 62px; transform: rotate(-35deg); transition: transform 0.8s cubic-bezier(0.3, 1.4, 0.4, 1); }
.hd-card:hover .logo .shackle { transform: translateY(-5px); }
.hd-card .logo .shackle { transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.4, 1); }
@media (prefers-reduced-motion: reduce) {
  .hd-card .logo, .hd-card .logo * { animation: none !important; transition: none !important; }
}

/* Apparition */
.hd.js .rv { opacity: 0; transform: translateY(18px); }
.hd.js.is-in .rv { opacity: 1; transform: none; transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: calc(var(--i, 0) * 100ms); }
.hd.js .hd-dash-wrap { opacity: 0; transform: translateX(40px); }
.hd.js.is-in .hd-dash-wrap { opacity: 1; transform: none; transition: opacity 1.2s 0.3s ease, transform 1.2s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }

@media (max-width: 1060px) {
  .hd-top { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .hd-dash { --rx: 0deg; --ry: 0deg; }
  .hd-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .hd { padding: 56px 16px 44px; }
  .hd-b { width: 100%; justify-content: center; }
  .hd-body { grid-template-columns: minmax(0, 1fr); }
  .hd-flow { grid-template-columns: 1fr; justify-items: stretch; }
  .hd-arr { display: none; }
  .hd-flow, .hd-chart { display: none; }
  .hd-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hd-kpi { flex-direction: column; align-items: flex-start; padding: 10px; }
  .hd-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hd-card { flex-direction: column; align-items: flex-start; padding: 14px; }
  .hd-card .logo { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .hd *, .hd *::before, .hd *::after { animation: none !important; transition: none !important; }
  .hd.js .rv, .hd.js .hd-dash-wrap { opacity: 1; transform: none; }
  .hd-chart .ln { stroke-dashoffset: 0; }
  .hd-chart .area { opacity: 1; }
}

/* « La conformité, en 3 étapes » (.st), posé ici à l'intérieur de .hd : son
   propre fond/halo est neutralisé pour continuer celui du haut de page. */
.hd .st { background: none; padding: 64px 0 0; overflow: visible; }
.hd .st::before { display: none; }

/* ---------- Accueil : La conformité, en 3 étapes (.st) ---------- */
.st {
  --ink: #1E1446;
  --v1: #4B33A6;
  --v2: #7A5EE6;
  --v3: #A48BFF;
  --lav: #ECE8F8;
  --txt: #544B70;
  --line: #E3DDF5;
  --mx: 50%;
  --my: 30%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  font-family: var(--font-sans);
  color: var(--ink);
  padding: 84px 24px 92px;
  background: linear-gradient(180deg, #FBFAFF 0%, #F3EFFD 60%, #ECE5FD 100%);
}
.st * { box-sizing: border-box; }
.st::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(560px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.85), rgba(122, 94, 230, 0.07) 40%, transparent 65%);
}
.st-blob { position: absolute; z-index: -2; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.st-blob.b1 { width: 480px; height: 480px; right: -160px; top: -180px; background: #DCD1FF; opacity: 0.8; animation: st-drift 20s ease-in-out infinite alternate; }
.st-blob.b2 { width: 420px; height: 420px; left: -180px; bottom: -200px; background: #E4DAFF; opacity: 0.9; animation: st-drift 24s ease-in-out infinite alternate-reverse; }
@keyframes st-drift { to { transform: translate(50px, 40px) scale(1.12); } }
.st-in { max-width: 1240px; margin: 0 auto; }

.st-k { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; color: var(--v1); }
.st-k::after { content: ""; width: 46px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--v2), transparent); }
.st-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); }
.st-title em { font-style: normal; background: linear-gradient(90deg, var(--v1), var(--v2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Les 3 étapes */
.st-list { position: relative; list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.st-rail {
  position: absolute;
  left: 16%;
  right: 16%;
  top: 62px;
  height: 2px;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, #CFC2F5 0 6px, transparent 6px 12px);
}
.st-rail i {
  position: absolute;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--v2);
  box-shadow: 0 0 0 4px rgba(122, 94, 230, 0.2), 0 0 14px var(--v2);
  left: 0;
  animation: st-travel 4.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes st-travel {
  0% { left: 0; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

.st-item { --cx: 50%; --cy: 50%; position: relative; z-index: 1; }
.st-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  height: 100%;
  padding: 24px 22px 24px 26px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid #fff;
  box-shadow: 0 12px 32px rgba(75, 51, 166, 0.09);
  text-decoration: none;
  color: inherit;
  isolation: isolate;
  overflow: hidden;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s, border-color 0.45s;
}
.st-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s;
  background: radial-gradient(280px circle at var(--cx) var(--cy), rgba(122, 94, 230, 0.14), transparent 60%);
}
.st-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
  background: radial-gradient(240px circle at var(--cx) var(--cy), var(--v2), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.st-num {
  position: absolute;
  left: 14px;
  top: 12px;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--lav);
  color: var(--v1);
  font-size: 0.78rem;
  font-weight: 700;
  transition: background 0.4s, color 0.4s;
}
.st-ic {
  position: relative;
  width: 76px;
  height: 76px;
  margin-top: 10px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff, #ECE6FD);
  box-shadow: inset 0 0 0 1px #E3DDF5, 0 10px 24px rgba(75, 51, 166, 0.12);
  transition: box-shadow 0.45s, transform 0.45s;
}
.st-ic::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px dashed rgba(122, 94, 230, 0.35);
  opacity: 0;
  transition: opacity 0.4s;
  animation: st-spin 14s linear infinite;
}
@keyframes st-spin { to { transform: rotate(360deg); } }
.st-ic svg { width: 34px; height: 34px; stroke: var(--v1); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.st-ic svg .dr { stroke-dasharray: 90; stroke-dashoffset: 0; }
.st-card h3 { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--ink); }
.st-card p { margin: 6px 0 0; font-size: 0.95rem; line-height: 1.55; color: var(--txt); }
.st-go { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--lav); transition: background 0.4s, transform 0.4s; }
.st-go svg { width: 18px; height: 18px; stroke: var(--v1); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.4s; }

/* Étape active (cycle automatique) et survol */
.st-item.is-on .st-card, .st-card:hover { border-color: #D8CDF8; box-shadow: 0 22px 48px rgba(75, 51, 166, 0.16); }
.st-item.is-on .st-num { background: linear-gradient(135deg, var(--v1), var(--v2)); color: #fff; }
.st-item.is-on .st-ic { box-shadow: inset 0 0 0 1px #CFC2F5, 0 14px 30px rgba(122, 94, 230, 0.28); }
.st-item.is-on .st-ic::before { opacity: 1; }
.st-item.is-on .st-ic svg .dr { animation: st-draw 1.2s ease both; }
@keyframes st-draw { from { stroke-dashoffset: 90; } to { stroke-dashoffset: 0; } }
@media (hover: hover) {
  .st-card:hover { transform: translateY(-8px) scale(1.02); }
  .st-card:hover::before, .st-card:hover::after { opacity: 1; }
  .st-card:hover .st-go { background: var(--v1); transform: translateX(3px); }
  .st-card:hover .st-go svg { stroke: #fff; }
  .st-card:hover .st-ic { transform: rotate(-6deg) scale(1.05); }
}
.st-card:focus-visible { outline: 3px solid var(--v2); outline-offset: 3px; }

/* Apparition */
.st.js .rv { opacity: 0; transform: translateY(22px); }
.st.js .rv.is-in { opacity: 1; transform: none; transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }

@media (max-width: 980px) {
  .st-list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .st-rail { left: 63px; right: auto; top: 40px; bottom: 40px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, #CFC2F5 0 6px, transparent 6px 12px); }
  .st-rail i { display: none; }
}
@media (max-width: 520px) {
  .st { padding: 64px 16px 72px; }
  .st-card { gap: 14px; padding: 22px 16px 20px 20px; }
  .st-ic { width: 60px; height: 60px; }
  .st-ic svg { width: 28px; height: 28px; }
  .st-rail { left: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .st *, .st *::before, .st *::after { animation: none !important; transition: none !important; }
  .st.js .rv { opacity: 1; transform: none; }
}

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg-soft) 0%, #fff 100%);
  padding: 88px 0 76px;
  border-bottom: 1px solid var(--border);
}

/* ---------- Hero sombre (accueil) : bloc chiffres clés / schéma ---------- */
.hero-dark {
  background: linear-gradient(165deg, #241659 0%, var(--indigo-dark) 60%, #150c38 100%);
  border-bottom: none;
  padding-top: 80px;
  padding-bottom: 76px;
  min-height: 690px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-dark::before,
.hero-dark::after {
  content: "";
  position: absolute;
  inset: -15%;
  z-index: 0;
  pointer-events: none;
}
.hero-dark::before {
  background:
    radial-gradient(32% 40% at 18% 12%, rgba(150, 120, 255, 0.55), transparent 70%),
    radial-gradient(26% 34% at 88% 6%, rgba(255, 255, 255, 0.16), transparent 70%),
    radial-gradient(40% 50% at 62% 88%, rgba(107, 74, 220, 0.45), transparent 70%),
    radial-gradient(20% 26% at 40% 55%, rgba(255, 255, 255, 0.08), transparent 70%);
  filter: blur(18px);
  animation: hero-glow-drift 16s ease-in-out infinite alternate;
}
.hero-dark::after {
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.06) 50%, transparent 60%);
  animation: hero-sheen-sweep 9s ease-in-out infinite;
}
@keyframes hero-glow-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(2%, -3%, 0) scale(1.06); }
}
@keyframes hero-sheen-sweep {
  0%, 100% { transform: translateX(-8%); opacity: 0.5; }
  50% { transform: translateX(8%); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-dark::before, .hero-dark::after { animation: none; }
}
.hero-dark .hex-corner { z-index: 1; }

@keyframes badge-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* Cluster dispersé (disposition dynamique, non alignée) */
.badge-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 48px;
}
.badge-cluster .badge-chip {
  display: inline-block;
}
.badge-cluster .badge-chip:nth-child(1) { transform: rotate(-9deg) translateY(8px); }
.badge-cluster .badge-chip:nth-child(2) { transform: rotate(6deg) translateY(-12px); }
.badge-cluster .badge-chip:nth-child(3) { transform: rotate(-5deg) translateY(4px); }
.badge-cluster .badge-chip:nth-child(4) { transform: rotate(8deg) translateY(-6px); }
.badge-cluster img {
  width: 58px;
  display: block;
  animation: badge-float 3.2s ease-in-out infinite;
}
.badge-cluster .badge-chip:nth-child(2) img { animation-delay: 0.4s; }
.badge-cluster .badge-chip:nth-child(3) img { animation-delay: 0.8s; }
.badge-cluster .badge-chip:nth-child(4) img { animation-delay: 1.2s; }
@media (prefers-reduced-motion: reduce) {
  .badge-cluster img { animation: none; }
}

/* Bloc "Garanties" : regroupe visuellement les pictos plats */
.guarantees-band {
  margin-top: 24px;
  padding: 26px 24px 30px;
  text-align: center;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, var(--indigo-tint) 0%, rgba(239, 237, 250, 0) 100%);
  border-radius: 0 0 var(--radius) var(--radius);
}
.guarantees-band .badge-cluster--flat { margin-top: 0; }

/* Variante pictos plats monochromes (au lieu des badges illustrés) */
.badge-cluster--flat .badge-chip {
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.flat-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--indigo-tint);
  color: var(--indigo);
  font-size: 1.3rem;
  font-weight: 700;
  animation: badge-float 3.2s ease-in-out infinite;
}
.badge-cluster--flat .badge-chip:nth-child(2) .flat-icon { animation-delay: 0.4s; }
.badge-cluster--flat .badge-chip:nth-child(3) .flat-icon { animation-delay: 0.8s; }
.badge-cluster--flat .badge-chip:nth-child(4) .flat-icon { animation-delay: 1.2s; }
.flat-icon-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .flat-icon { animation: none; }
}

.hero-stats-title {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto 36px;
  text-align: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.4rem);
}

.hero .hero-showcase {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  align-items: stretch;
  margin-top: 36px;
}

.hero-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  padding: 20px 18px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-left: 3px solid #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.hero-stat:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.4);
  border-left-color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 30px rgba(255, 255, 255, 0.35);
}
.hero-stat-hex {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 1.5;
  margin-bottom: 4px;
  display: block;
}
.hero-stat-num {
  position: relative;
  font-size: 2.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  text-shadow: 0 0 22px rgba(255, 255, 255, 0.5);
}
.hero-stat-label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.45;
}
.hero-stat-note {
  display: block;
  margin-top: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.45;
}
.hero-stat-source {
  font-size: 0.72rem;
}

@media (max-width: 760px) {
  .hero .hero-showcase { grid-template-columns: minmax(0, 1fr); }
  .hero-stats-title { text-align: left; }
}

@media (min-width: 1280px) {
  .hero-stat { padding: 28px 28px 26px; }
  .hero-stat-num { font-size: 3.25rem; }
  .hero-stat-label { font-size: 1.05rem; line-height: 1.45; }
  .hero-stat-note { font-size: 1.05rem; }
  .hero-stat-source { font-size: 0.9rem; }
}

/* Scrim indigo : garantit la lisibilité du texte au-dessus d'une photo de fond */
.section-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right, rgba(46, 26, 107, 0.9) 0%, rgba(46, 26, 107, 0.55) 40%, rgba(46, 26, 107, 0.08) 80%, transparent 100%);
}

.contact-visual {
  margin-top: 24px;
  aspect-ratio: 4 / 3;
}

/* Bandeau CTA de fin de page */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--indigo);
  color: #fff;
  padding: 64px 0;
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,0.82); }
.cta-band .cta-row { justify-content: center; }
.cta-band .btn-outline { border-color: #fff; color: #fff; transition: background 0.15s ease, box-shadow 0.2s ease, transform 0.1s ease; }
.cta-band .btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 24px rgba(255, 255, 255, 0.55);
}
.cta-band .btn-primary { background: #fff; color: var(--indigo); }
.cta-band .btn-primary:hover { background: #EDEBF7; }
.cta-band .hex-corner { opacity: 0.6; }

/* ---------- Sections génériques ---------- */
section { padding: 72px 0; }
.section-soft { background: var(--bg-soft); }
.section-indigo-tint { background: linear-gradient(180deg, #EFECFA 0%, #F6F4FC 100%); }
.section-subtle-gradient { background: linear-gradient(160deg, #F2EFFA 0%, #FFFFFF 50%, #F0EDF9 100%); }
.section-decorated { position: relative; overflow: hidden; }
.section-tight { padding: 48px 0; }
.section-header {
  max-width: 680px;
  margin: 0 0 44px;
}
.section-header.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ---------- Grilles / cartes ---------- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 26px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.card:hover {
  border-color: var(--indigo-light);
  box-shadow: 0 0 0 1px rgba(76, 52, 168, 0.12), 0 10px 30px rgba(76, 52, 168, 0.14), 0 0 26px rgba(139, 110, 255, 0.22);
  background: #fff;
}

.feature-card {
  background: linear-gradient(165deg, #E7E1FA 0%, #fff 75%);
}
.feature-card .icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--indigo-tint);
  color: var(--indigo);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  font-size: 1.3rem;
  font-weight: 700;
}

.framework-stack {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.framework-stack li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
}
.framework-stack .framework-name {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.95rem;
}
.framework-stack li.current {
  background: var(--indigo);
  border-color: var(--indigo);
}
.framework-stack li.current .framework-name {
  color: #fff;
  font-weight: 700;
}
.framework-stack .framework-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.18);
  padding: 3px 8px;
  border-radius: 999px;
}

.feature-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.feature-list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.92rem;
  color: var(--text-muted);
}
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--indigo);
}

/* ---------- Animation à l'arrivée (cascade + reveal) ---------- */
.cascade-item,
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.cascade-item.in-view,
.reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cascade-item, .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* divider with subtle hex accent */
.divider {
  position: relative;
  height: 1px;
  background: var(--border);
  margin: 0;
  overflow: visible;
}

/* ---------- Formulaire : .form-status gardé (ancré par script.js), le
   reste de l'ancien style de ce bloc vit désormais dans le composant .cf
   plus bas. ---------- */
.form-status {
  margin-top: 16px;
  font-weight: 600;
  display: none;
}
.form-status.visible { display: block; }
.form-status.success { color: #1a7f4b; }
.form-status.error { color: #b23434; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--indigo-dark);
  color: rgba(255,255,255,0.75);
  padding: 52px 0 28px;
}
.site-footer p { color: inherit; }
.site-footer .footer-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 36px;
}
.site-footer .brand {
  color: #fff;
}
.footer-nav {
  display: flex;
  gap: 60px;
  flex-wrap: wrap;
}
.footer-nav h4 {
  color: #fff;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.footer-nav ul { list-style: none; margin: 0; padding: 0; }
.footer-nav li { margin-bottom: 10px; }
.footer-nav a { color: rgba(255,255,255,0.75); }
.footer-nav a:hover { color: #fff; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-legal a {
  color: rgba(255,255,255,0.55);
}

.footer-legal a:hover {
  color: #FFFFFF;
}

.footer-legal .sep {
  opacity: 0.5;
}

.footer-hosting-note {
  display: block;
  width: 100%;
  font-size: 0.78rem;
  opacity: 1;
  margin-top: 6px;
}

.footer-legal button.cookie-manage-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: rgba(255,255,255,0.55);
}

.footer-legal button.cookie-manage-link:hover {
  color: #FFFFFF;
}

/* ---------- Ressources / Articles ---------- */
.resource-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.resource-card p.text-muted { flex: 1; }
.resource-date {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 10px 0 0;
}
.resource-card .resource-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-weight: 600;
  color: var(--indigo);
}
.resource-card:hover .resource-link { text-decoration: underline; }

/* ---------- Gabarit page article ---------- */

/* Mini-hero d'article : même famille de dégradé que le Hero sombre de l'Accueil */
.article-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, #241659 0%, var(--indigo-dark) 60%, #150c38 100%);
  padding: 40px 0 38px;
}
.article-hero .hex-corner { z-index: 1; opacity: 0.85; }
.article-hero .container {
  position: relative;
  z-index: 2;
  max-width: 760px;
}
.article-hero h1 {
  color: #fff;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.7rem);
  margin-bottom: 0;
}

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 18px;
}
.breadcrumb a { color: rgba(255, 255, 255, 0.65); }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb .sep { color: rgba(255, 255, 255, 0.32); }
.breadcrumb .current {
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 320px;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.article-byline {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.article-meta .article-category {
  display: inline-block;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}
.article-meta .dot { color: rgba(255, 255, 255, 0.35); }
.article-meta .article-readtime {
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
}

/* Corps de l'article : colonne de lecture contrainte */
.article-section { padding-top: 56px; padding-bottom: 20px; }
.article-body {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.06rem;
  line-height: 1.75;
}
.article-body p { margin-bottom: 1.3em; }
.article-body .article-lead {
  font-size: 1.2rem;
  color: var(--text-muted);
}
.article-body h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.4rem;
  margin: 1.9em 0 0.75em;
}
.article-body h2::before {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  background: var(--indigo-light);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.article-body ul { padding-left: 20px; margin: 0 0 1.3em; }
.article-body li { margin-bottom: 0.5em; color: var(--text-muted); }

/* Callout : phrase-question mise en avant */
.article-callout {
  position: relative;
  margin: 1.6em 0;
  padding: 18px 24px 18px 26px;
  background: var(--indigo-tint);
  border-left: 3px solid var(--indigo);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--indigo);
}
.article-callout::before {
  content: "\201C";
  color: var(--indigo-light);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 800;
  margin-right: 3px;
}

/* Liens externes : soulignés + icône, pour signaler la sortie du site */
.article-body a.external-link {
  color: var(--indigo-light);
  font-weight: 600;
  text-decoration: underline;
}
.article-body a.external-link .ext-icon {
  display: inline-block;
  width: 0.72em;
  height: 0.72em;
  margin-left: 2px;
  vertical-align: 0.05em;
}

/* ---------- Vidéo et transcription (page article vidéo) ---------- */
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin: 0.4em 0 1.6em;
  background: var(--indigo-dark);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-consent-play {
  opacity: 0.9;
}

.video-consent-title {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0;
}

.video-consent-external-link {
  color: rgba(255,255,255,0.75);
  font-size: 0.85rem;
  text-decoration: underline;
}

.video-consent-external-link:hover { color: #FFFFFF; }

.video-consent-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  background: linear-gradient(180deg, rgba(30,17,73,0.55), rgba(30,17,73,0.85));
}

.video-consent-text {
  color: #FFFFFF;
  max-width: 460px;
  font-size: 0.9rem;
  margin: 0;
}

.video-consent-text a {
  color: #FFFFFF;
  text-decoration: underline;
}

.video-consent-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #FFFFFF;
  font-size: 0.85rem;
  max-width: 420px;
  text-align: left;
  cursor: pointer;
}

.video-consent-checkbox input { width: auto; margin-top: 3px; cursor: pointer; }

.video-consent-overlay .btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- Bandeau cookies ---------- */
.cookie-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.cookie-banner-text {
  flex: 1 1 320px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.cookie-banner-text p { margin: 0 0 6px; }
.cookie-banner-status { font-weight: 700; color: var(--text); }
.cookie-banner-text a { color: var(--indigo); font-weight: 600; }

.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cookie-banner .btn {
  padding: 10px 20px;
  font-size: 0.9rem;
}

@media (max-width: 640px) {
  .cookie-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 18px;
  }
  /* Page Test : bandeau remonté sous l'en-tête plutôt qu'en bas, pour ne
     jamais recouvrir la carte de réponse en cours. */
  .diag-page .cookie-banner {
    top: 76px;
    bottom: auto;
  }
}

.article-transcript {
  margin: 0 0 1.8em;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-soft);
  padding: 4px 20px;
}
.article-transcript summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--indigo);
  padding: 14px 0;
  list-style: none;
}
.article-transcript summary::-webkit-details-marker { display: none; }
.article-transcript summary::before {
  content: "â–¸";
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.2s ease;
}
.article-transcript[open] summary::before { transform: rotate(90deg); }
.article-transcript .transcript-body { padding-bottom: 18px; color: var(--text-muted); }
.article-transcript .transcript-body p { margin-bottom: 1em; }

/* Fragment "Calendrier de l'AI Act" : même classe sur toutes ses copies
   (ressources.html, ressources/ai-act-en-90-secondes.html,
   article-obligations-ai-act-haut-risque.html, audit-ai-act.html). */
.ai-act-calendar table { border-collapse: collapse; width: 100%; }
.ai-act-calendar thead th {
  text-transform: none;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: left;
  padding: 0 14px 8px 22px;
}
.ai-act-calendar thead th:first-child { padding-left: 22px; }
.ai-act-calendar tbody tr { position: relative; }
.ai-act-calendar td {
  padding: 10px 14px 10px 0;
  vertical-align: top;
  border-bottom: none;
  color: var(--text);
}
.ai-act-calendar td:first-child {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--indigo);
  position: relative;
  padding-left: 22px;
  width: 1%;
}
.ai-act-calendar td:first-child::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
}
.ai-act-calendar td:first-child::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border);
}
.ai-act-calendar tr.is-past td:first-child { color: var(--text-muted); }
.ai-act-calendar tr.is-next td:first-child::after {
  background: var(--indigo-light);
  border-color: var(--indigo-light);
  box-shadow: 0 0 0 4px rgba(139, 110, 255, 0.25);
}
.ai-act-calendar .calendar-next-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--indigo-light);
  margin-top: 2px;
}
.ai-act-calendar .article-ref-note {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.ai-act-calendar .article-ref-note a { text-decoration: underline; }
@media (max-width: 480px) {
  .ai-act-calendar td { display: block; padding-left: 22px; }
  .ai-act-calendar td:first-child { padding-bottom: 2px; }
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2em 0 1.6em;
  font-size: 0.92rem;
}
.article-body th, .article-body td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.article-body th {
  color: var(--indigo);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.article-body td { color: var(--text-muted); }

.article-note {
  margin: 1.4em 0;
  padding: 16px 20px;
  background: var(--indigo-tint);
  border-left: 3px solid var(--indigo-light);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.95rem;
  color: var(--text);
}
.article-note strong { color: var(--indigo); }

.article-ref-note {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: -0.8em;
}

.article-refs { padding-left: 20px; }
.article-refs li { margin-bottom: 0.7em; }

/* ---------- Utilitaires ---------- */
.badge {
  display: inline-block;
  background: var(--indigo-tint);
  color: var(--indigo);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}

.stat {
  text-align: center;
}
.stat .num {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--indigo);
  display: block;
}
.stat .label {
  color: var(--text-muted);
  font-size: 0.92rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}

@media (min-width: 1025px) {
  .nav-contact-item { display: none; }
}

@media (max-width: 1024px) {
  .main-nav { position: relative; }
  .main-nav ul {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
    flex-direction: column;
    gap: 0;
    min-width: 220px;
    padding: 8px;
    display: none;
  }
  .main-nav.open ul { display: flex; }
  .main-nav ul li { width: 100%; }
  .main-nav ul a {
    display: block;
    padding: 12px 14px;
    border-bottom: none;
  }
  .main-nav .btn { display: none; }
  .nav-toggle { display: flex; }
  .nav-contact-item { display: list-item; }
}

@media (max-width: 760px) {
  .hero { padding: 56px 0 48px; }
  section { padding: 52px 0; }
  .cta-band { padding: 48px 0; }
  .hero.hero-dark {
    padding: 44px 0 52px;
    min-height: auto;
  }
}

/* ---------- Test AI Act (diagnostic) — refonte présentation ----------
   Habillage issu de _figures/test-question-composant.html : fond lavande
   animé, carte en verre dépoli, cartes de réponse à pictogramme. Le moteur
   du test (diagnostic-ai-act.js) n'est pas concerné : seules les fonctions
   de rendu de sa section INTERFACE produisent cette nouvelle présentation,
   sur les mêmes questions/réponses/résultats. */
.diag-wrapper { max-width: 700px; }

/* Section pleine largeur (fond lavande, halos, lueur) : pas de max-width ni
   de marge, le centrage et la limite de largeur du contenu (1100px) sont
   posés sur .diag-app, à l'intérieur. */
.diag-stage {
  --dq-mx: 50%;
  --dq-my: 30%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 36px 0 170px;
  background: linear-gradient(170deg, #F8F6FE 0%, var(--indigo-tint) 55%, #E7E2F7 100%);
}
@media (min-width: 900px) { .diag-stage { padding: 44px 0 90px; } }
.diag-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(560px circle at var(--dq-mx) var(--dq-my), rgba(255, 255, 255, 0.8), rgba(76, 52, 168, 0.06) 40%, transparent 65%);
}
.diag-blob {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.diag-blob-1 { width: 380px; height: 380px; right: -150px; top: -130px; background: #D7CBF7; opacity: 0.75; animation: diagBlobDrift 20s ease-in-out infinite alternate; }
.diag-blob-2 { width: 340px; height: 340px; left: -150px; bottom: -150px; background: #DED2FA; opacity: 0.85; animation: diagBlobDrift 25s ease-in-out infinite alternate-reverse; }
@keyframes diagBlobDrift { to { transform: translate(36px, 28px) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .diag-blob { animation: none; } }

.diag-app { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 0 24px; }

.diag-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.diag-hero-line {
  margin: 14px 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
}

.diag-footnote {
  max-width: 700px;
  margin: 40px auto 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: center;
}

/* Progression : 5 points reliés par une ligne qui se remplit */
.diag-progress-mini { margin: 0 0 28px; }
.diag-progress-track {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 4px;
}
.diag-progress-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 4px;
  background: rgba(76, 52, 168, 0.15);
}
.diag-progress-bar-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 4px;
  width: var(--diag-p, 0%);
  background: linear-gradient(90deg, var(--indigo), var(--indigo-light));
  transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.diag-progress-dot {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #CFC2F5;
  transition: background 0.3s, border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.diag-progress-dot.is-done { background: var(--indigo); border-color: var(--indigo); }
.diag-progress-dot.is-now { background: #fff; border-color: var(--indigo-light); transform: scale(1.3); box-shadow: 0 0 0 5px rgba(76, 52, 168, 0.18); }
.diag-progress-text {
  margin: 12px 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}
.diag-progress-text b { color: var(--indigo); }

/* Transition entre questions : fondu de base, glissement ajouté par JS
   (diag-slide-out/diag-slide-in) pendant la navigation. */
.diag-fade { animation: diagFadeIn 0.25s ease both; }
@keyframes diagFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.diag-slide-out { animation: diagSlideOut 0.26s ease forwards; }
.diag-slide-in { animation: diagSlideIn 0.46s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes diagSlideOut {
  to { opacity: 0; transform: translateX(-24px); }
}
@keyframes diagSlideIn {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .diag-fade, .diag-progress-dot { animation: none; transition: none; }
  .diag-slide-out, .diag-slide-in { animation: none !important; }
}

.diag-question-title {
  margin: 0 0 16px;
  outline: none;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem);
  line-height: 1.25;
}

.diag-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

.diag-help {
  margin: 0 0 20px;
  font-size: 0.92rem;
}
.diag-help summary {
  cursor: pointer;
  color: var(--indigo);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.diag-help summary::-webkit-details-marker { display: none; }
.diag-help p {
  margin: 10px 0 0;
  color: var(--text-muted);
}

/* Carte de question en verre dépoli (question + réponses + actions), et
   écran de résultat posé dans la même carte (même fond, contenu inchangé). */
.diag-form,
.diag-result {
  position: relative;
  margin-top: 4px;
  padding: 32px 32px 26px;
  border-radius: 24px;
  isolation: isolate;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 56px rgba(46, 26, 107, 0.14);
}
@media (max-width: 640px) {
  .diag-form, .diag-result { padding: 24px 18px 20px; border-radius: 20px; }
}

/* Grille de cartes de réponse, nombre de colonnes posé par le script
   (--diag-cols) selon la règle : 3 col. pour 3 réponses, 2 col. pour 2 ou 4,
   grille existante à 3 col. (lignes multiples) au-delà. Toujours 1 colonne
   sous 640px. */
.diag-tile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0 0 20px;
}
@media (min-width: 640px) {
  .diag-tile-grid { grid-template-columns: repeat(var(--diag-cols, 3), minmax(0, 1fr)); }
}
.diag-tile-grid > .diag-help { grid-column: 1 / -1; }

.diag-card {
  --ox: 50%;
  --oy: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  isolation: isolate;
  overflow: hidden;
  min-height: 92px;
  padding: 20px 44px 18px 20px;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  cursor: pointer;
  line-height: 1.45;
  font-size: 0.95rem;
  color: var(--text);
  background: #fff;
  box-shadow: 0 6px 18px rgba(46, 26, 107, 0.06);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
@media (max-width: 759px) {
  .diag-card { flex-direction: row; align-items: center; min-height: 0; padding: 14px 44px 14px 14px; gap: 12px; }
}
.diag-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  border-radius: inherit;
  transition: opacity 0.35s ease;
  background: radial-gradient(180px circle at var(--ox) var(--oy), rgba(76, 52, 168, 0.14), transparent 60%);
}
@media (hover: hover) {
  .diag-card:hover { transform: translateY(-4px); border-color: #CFC2F5; box-shadow: 0 16px 34px rgba(46, 26, 107, 0.15); }
  .diag-card:hover::before { opacity: 1; }
  .diag-card:hover .diag-card-icon { transform: rotate(-8deg) scale(1.08); }
}
.diag-card:has(input:checked),
.diag-card.is-selected {
  border-color: var(--indigo-light);
  background: linear-gradient(160deg, #fff, var(--indigo-tint));
  box-shadow: 0 14px 32px rgba(46, 26, 107, 0.16);
}
.diag-card:has(input:checked) .diag-card-icon { background: linear-gradient(135deg, var(--indigo), var(--indigo-light)); color: #fff; }
.diag-card:focus-within { box-shadow: 0 0 0 3px var(--indigo-tint), 0 0 0 1px var(--indigo); }
.diag-card input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  outline: none;
}
.diag-card b { font-weight: 600; }
.diag-card small { display: block; margin-top: 4px; color: var(--text-muted); font-size: 0.85rem; font-weight: 400; }
.diag-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--indigo-tint);
  color: var(--indigo);
  transition: background 0.3s ease, color 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.diag-card-icon svg { width: 22px; height: 22px; }

/* Coche ronde en haut à droite de chaque carte, dessinée à la sélection */
.diag-card-check {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid #CFC2F5;
  display: grid;
  place-items: center;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.diag-card-check svg {
  width: 13px;
  height: 13px;
  stroke: #fff;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset 0.3s ease 0.05s;
}
.diag-card:has(input:checked) .diag-card-check { background: var(--indigo-light); border-color: var(--indigo-light); }
.diag-card:has(input:checked) .diag-card-check svg { stroke-dashoffset: 0; }

/* « Je ne sais pas », extrait de la grille, en bouton pointillé pleine largeur */
.diag-dk {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 20px;
  padding: 14px;
  border-radius: 16px;
  border: 1.5px dashed var(--border);
  color: var(--text-muted);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.diag-dk input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  outline: none;
}
.diag-dk:hover { background: rgba(255, 255, 255, 0.7); border-color: var(--indigo-light); color: var(--indigo); }
.diag-dk:focus-within { box-shadow: 0 0 0 3px var(--indigo-tint), 0 0 0 1px var(--indigo); }
.diag-dk:has(input:checked) { border-style: solid; border-color: var(--indigo-light); background: #fff; color: var(--indigo); }
@media (prefers-reduced-motion: reduce) {
  .diag-card, .diag-card::before, .diag-card-icon, .diag-card-check svg, .diag-dk { transition: none; }
}

.diag-option-group { margin-bottom: 24px; }

.diag-option-group-title {
  font-size: 1rem;
  margin: 0 0 12px;
  color: var(--indigo);
}

.diag-error {
  color: #B3261E;
  font-weight: 600;
  min-height: 1.2em;
  margin: 0 0 14px;
}

.diag-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.diag-actions .diag-help { margin: 0; }
.diag-actions .diag-help p {
  position: absolute;
  right: 0;
  margin-top: 8px;
  max-width: 320px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 2;
}
.diag-actions .diag-help[open] { position: relative; }

.diag-back-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--text-muted);
  text-decoration: underline;
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
}
.diag-back-link:hover { color: var(--indigo); }

.diag-result-actions { margin-top: 28px; }

/* Formulaire de demande de rapport PDF, affiché sous le bouton
   « Recevoir mon rapport PDF » : e-mail (obligatoire, avec une note de
   finalité), organisation et fonction (facultatifs), case facultative pour
   être recontacté(e). Envoi vers Formspree avant déclenchement du
   téléchargement, que la case soit cochée ou non. */
.diag-report-slot:empty { margin: 0; }
.diag-report {
  margin-top: 18px;
  padding: 24px 22px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(207, 198, 242, 0.6);
  box-shadow: 0 10px 28px rgba(46, 26, 107, 0.08);
}
.diag-report h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--text);
}
.diag-report > p {
  margin: 0 0 18px;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}
.diag-report-form { display: flex; flex-direction: column; gap: 14px; }
.diag-report-row { display: flex; flex-direction: column; gap: 6px; }
.diag-report-row label { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.diag-report-row input[type="email"],
.diag-report-row input[type="text"] {
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.diag-report-row input:focus-visible {
  outline: none;
  border-color: var(--indigo-light);
  box-shadow: 0 0 0 3px var(--indigo-tint);
}
.diag-report-email-note { margin: 2px 0 0; font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; }
.diag-report-email-note a { text-decoration: underline; }
.diag-report-recontact { flex-direction: row; align-items: flex-start; gap: 10px; }
.diag-report-recontact input {
  margin-top: 3px;
  flex: none;
  width: 18px;
  height: 18px;
  accent-color: var(--indigo);
}
.diag-report-recontact label { font-size: 0.85rem; font-weight: 400; color: var(--text-muted); line-height: 1.5; }
.diag-report-form button[type="submit"] { align-self: flex-start; }
.diag-report-form button[type="submit"]:disabled { opacity: 0.65; cursor: not-allowed; }
.diag-report-note { margin: 0; font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; }
.diag-report-note a { text-decoration: underline; }
@media (max-width: 480px) {
  .diag-report { padding: 20px 16px; }
}

/* Badge de niveau (résultat) */
.diag-result-badge {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 18px;
}
.diag-result-badge.is-red { background: var(--result-red-tint); color: var(--result-red); }
.diag-result-badge.is-orange { background: var(--result-orange-tint); color: var(--result-orange); }
.diag-result-badge.is-violet { background: var(--indigo-tint); color: var(--indigo); }
.diag-result-badge.is-green { background: var(--result-green-tint); color: var(--result-green); }

.diag-result-synthesis {
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--text);
  margin: 0 0 24px;
  max-width: 62ch;
}

.diag-result-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0 0 20px;
}
@media (min-width: 760px) {
  .diag-result-top { grid-template-columns: repeat(3, 1fr); }
}
.diag-result-top-block {
  background: #fff;
  padding: 18px 20px;
}
.diag-result-top-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  color: var(--indigo);
  margin-bottom: 10px;
}
.diag-result-top-icon svg { width: 100%; height: 100%; }
.diag-result-top-label {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.diag-result-top-value {
  margin: 0;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}

/* Petites cartes additionnelles (rôle, transparence, GPAI, compléments) */
.diag-compact-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0 0 20px;
}
@media (min-width: 640px) {
  .diag-compact-cards { grid-template-columns: repeat(2, 1fr); }
}
.diag-compact-card {
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.diag-compact-card-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--indigo);
}
.diag-compact-card-icon svg { width: 100%; height: 100%; }
.diag-compact-card h3 { margin: 0 0 4px; font-size: 0.95rem; color: var(--indigo); }
.diag-compact-card p { margin: 0; font-size: 0.88rem; color: var(--text-muted); }

.diag-role-toggle {
  background: none;
  border: none;
  padding: 0;
  margin-top: 6px;
  color: var(--indigo);
  text-decoration: underline;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.diag-role-editor:not([hidden]) {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.diag-role-editor .diag-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.88rem;
}

/* Détail complet (repliable) */
.diag-detail { margin: 0 0 24px; }
.diag-detail-summary {
  cursor: pointer;
  color: var(--indigo);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  list-style: none;
}
.diag-detail-summary::-webkit-details-marker { display: none; }
.diag-detail-body { margin-top: 18px; }

.diag-block {
  margin: 0 0 20px;
  padding: 18px 20px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.diag-block h3 {
  margin: 0 0 10px;
  font-size: 1.05rem;
  color: var(--indigo);
}

.diag-block ul {
  margin: 0;
  padding-left: 20px;
}

.diag-block li { margin-bottom: 0.5em; }

.diag-motif {
  font-weight: 600;
  color: var(--text-muted);
  margin: -4px 0 20px;
}

.diag-clarifications { background: var(--indigo-tint); border-color: var(--indigo-light); }

.diag-disclaimer {
  font-size: 0.88rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 0 0 24px;
}

@media print {
  .site-header, .site-footer, .diag-actions, .skip-link, .cookie-banner, .diag-role-toggle, .diag-role-editor { display: none !important; }
  .diag-progress-mini { display: none !important; }
  body { background: #fff; }
}

/* =============================================================
   Page audit (audit-ai-act.html)
   Classes propres à cette page, préfixées "audit-". N'utilise que
   les variables de :root et la police du site ; aucune nouvelle
   couleur. Les H2 de cette page reprennent la puce hexagonale des
   H2 d'articles (sauf dans le bandeau final, non concerné ici car
   hors de .audit-section).
   ============================================================= */

.audit-section h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.4rem;
  margin: 0 0 0.9em;
}
.audit-section h2::before {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  background: var(--indigo-light);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.audit-section { padding: 72px 0; }
.audit-section-soft { background: var(--bg-soft); }

.audit-section p,
.audit-section li { max-width: 68ch; }

/* ---- B. À qui s'adresse cet audit : voir composant .ap plus bas ---- */

/* ---- C. Ce que couvre l'audit et Livrables : voir composant .ac plus bas ---- */
.audit-steps-wrap { position: relative; }
.audit-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: audit-step;
}
.audit-steps li {
  counter-increment: audit-step;
  position: relative;
  display: flex;
  gap: 20px;
  margin-bottom: 28px;
}
.audit-steps li:last-child { margin-bottom: 0; }
.audit-steps li p { margin: 0; padding-top: 8px; color: var(--text); }
.audit-steps li strong { color: var(--indigo); font-weight: 600; }
.audit-steps li::before {
  content: counter(audit-step);
  flex: none;
  width: 44px;
  height: 44px;
  background: var(--indigo);
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  position: relative;
  z-index: 2;
}
.audit-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 21px;
  top: 44px;
  bottom: -28px;
  width: 2px;
  background: var(--border);
  z-index: 1;
}
.audit-steps-light {
  position: absolute;
  left: 21px;
  top: 22px;
  width: 2px;
  height: 0;
  background: linear-gradient(to bottom, var(--indigo-light), rgba(139, 110, 255, 0.6));
  transition: height 1.2s ease;
  z-index: 1;
}
.audit-steps.in-view .audit-steps-light { height: calc(100% - 44px); }
@media (prefers-reduced-motion: reduce) {
  .audit-steps-light { transition: none; }
}

/* ---- D. Déroulé, durée et tarif : voir composant .ad plus bas ---- */

/* ---- E. Notre approche : voir composant .mc plus bas ---- */

/* ---- G. Questions fréquentes : voir composant .fq plus bas ---- */

/* ---------- Cartes tarifs numérotées (accueil + réutilisable) ---------- */
.section-header-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 36px;
}
.section-header-row h2 { margin: 10px 0 0; }
.tarif-detail-link {
  font-weight: 600;
  color: var(--indigo);
  text-decoration: underline;
  white-space: nowrap;
}
@media (min-width: 640px) {
  .section-header-row { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}
.tarif-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.tarif-card {
  background: #fff;
  padding: 28px 24px;
  position: relative;
}
/* Coins arrondis du groupe (repris carte par carte, le conteneur n'étant
   plus en overflow:hidden pour laisser respirer l'agrandissement au survol). */
.tarif-card:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.tarif-card:last-child { border-radius: 0 0 var(--radius) var(--radius); }
@media (min-width: 760px) {
  .tarif-card:first-child { border-radius: var(--radius) 0 0 var(--radius); }
  .tarif-card:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
}
.tarif-card-num {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.tarif-card-name {
  margin: 0 0 18px;
  font-weight: 600;
  color: var(--text);
}
.tarif-card-price {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 500;
  color: var(--indigo);
  margin: 0 0 18px;
  line-height: 1.15;
}
.tarif-card-desc { margin: 0; color: var(--text-muted); font-size: 0.92rem; }
.tarif-card-featured {
  background: var(--indigo-tint);
  border: 1px solid var(--indigo);
  margin: -1px;
  position: relative;
  z-index: 1;
}
@media (min-width: 760px) {
  .tarif-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Agrandissement au survol (souris uniquement) : une seule carte mise en
   avant à la fois, la carte 02 cède sa place si une autre est survolée. */
@media (hover: hover) {
  .tarif-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-radius 0.25s ease, background 0.25s ease;
  }
  .tarif-card:hover,
  .tarif-card:focus-within {
    transform: translateY(-8px) scale(1.04);
    box-shadow: 0 18px 40px rgba(30, 20, 70, 0.15);
    border-radius: 16px;
    z-index: 2;
    background: var(--indigo-tint);
  }
  .tarif-grid:has(.tarif-card:hover, .tarif-card:focus-within) .tarif-card-featured:not(:hover):not(:focus-within) {
    background: #fff;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tarif-card { transition: none; }
}

/* ---------- Page Offre : cartes tarifs (grille 3 puis 2, classes explicites) ---------- */
.offer-tarif-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: stretch;
  overflow: visible;
}
.tarif-1, .tarif-2, .tarif-3, .tarif-4, .tarif-5 { grid-column: auto; }
.offer-tarif-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}
.offer-tarif-price {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 500;
  color: var(--indigo);
  margin: 0 0 16px;
  line-height: 1.15;
}
.offer-tarif-name { margin: 0 0 10px; font-weight: 600; color: var(--text); }
.offer-tarif-desc { margin: 0 0 20px; color: var(--text-muted); font-size: 0.92rem; flex: 1; }
.offer-tarif-link { position: relative; font-weight: 600; color: var(--indigo); text-decoration: underline; margin-top: auto; }
/* Carte entière cliquable vers le lien, sans toucher au HTML : le lien
   lui-même porte le ::after, mais celui-ci est positionné par rapport à
   la carte (plus proche ancêtre en position:relative). */
.offer-tarif-link::after { content: ""; position: absolute; inset: 0; }
.offer-tarif-arrow { display: inline-block; transition: transform 0.25s ease; }
.offer-tarif-featured {
  background: var(--indigo-tint);
  border-color: var(--indigo);
}
@media (min-width: 860px) {
  .offer-tarif-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px; }
  .tarif-1, .tarif-2, .tarif-3 { grid-column: span 2; }
  .tarif-4 { grid-column: 2 / span 2; }
  .tarif-5 { grid-column: 4 / span 2; }
}

/* Agrandissement au survol (souris uniquement) : une seule carte mise en
   avant a la fois, la carte "Diagnostic express" cede sa place si une
   autre carte est survolee. */
@media (hover: hover) {
  .offer-tarif-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
  }
  .offer-tarif-card:hover,
  .offer-tarif-card:focus-within {
    transform: translateY(-8px) scale(1.04);
    box-shadow: 0 18px 40px rgba(30, 20, 70, 0.15);
    background: var(--indigo-tint);
    border-color: var(--indigo);
    z-index: 2;
  }
  .offer-tarif-grid:is(:hover, :focus-within) .tarif-2:not(:hover):not(:focus-within) {
    background: #fff;
    border-color: var(--border);
  }
  .offer-tarif-card:hover .offer-tarif-arrow,
  .offer-tarif-card:focus-within .offer-tarif-arrow {
    transform: translateX(4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .offer-tarif-card, .offer-tarif-arrow { transition: none; }
}

/* ---------- Page Audit : liste d'intro en puces ---------- */
.audit-lead-list {
  margin: 0 0 1em;
  padding-left: 20px;
  color: var(--text);
}
.audit-lead-list li { margin-bottom: 0.3em; }

/* ---------- Encadré auteur sur fond sombre (article-hero) ---------- */
.article-hero .article-byline { color: rgba(255, 255, 255, 0.65); }
.article-hero .article-byline a { color: #fff; text-decoration: underline; }
.article-hero .article-byline a:hover { color: rgba(255, 255, 255, 0.8); }

/* ---------- Composant calendrier AI Act (page calendrier-ai-act.html) ----------
   Issu de _figures/calendrier-ai-act-composant.html. Les teintes qui
   correspondaient déjà à une variable du site (encre, violet, fond, teinte
   indigo) réutilisent ces variables ; les autres (violet clair d'accent,
   ligne de frise, gris muet, rouge/orange/teal des pastilles) sont propres
   au composant, sans équivalent exact dans la charte. */
.cal {
  container-type: inline-size;
  --cal-ink: var(--indigo-dark);
  --cal-violet: var(--indigo-light);
  --cal-violet-2: #7A5EE6;
  --cal-lav: var(--indigo-tint);
  --cal-bg: var(--bg-soft);
  --cal-line: #DCD6EE;
  --cal-muted: #6E6787;
  --cal-red: #C2415B;
  --cal-red-bg: #FBEAEE;
  --cal-orange: #C46A1B;
  --cal-orange-bg: #FCF0E3;
  --cal-teal: #2B7A78;
  --cal-teal-bg: #E5F3F2;
  --cal-display: var(--font-display);
  --cal-sans: var(--font-sans);
  font-family: var(--cal-sans);
  color: var(--cal-ink);
}
.cal * { box-sizing: border-box; }

.cal-next { display: none; }
.cal.is-ready .cal-next {
  display: block;
  background: var(--cal-ink);
  color: #fff;
  border-radius: 20px;
  padding: 28px 32px;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
}
.cal-next::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(122, 94, 230, 0.45), transparent 70%);
}
.cal-next-body { position: relative; z-index: 1; }
.cal-next-kicker { font-size: 0.85rem; color: #CFC6F2; margin: 0 0 6px; }
/* Sélecteur de classe (plus précis que la règle globale `p { color: var(--text) }`)
   pour éviter d'écraser le blanc hérité de .cal-next sans !important. */
.cal-next-date { font-family: var(--cal-display); font-size: 1.7rem; font-weight: 400; margin: 0 0 8px; color: #fff; }
.cal-next-text { margin: 0; font-size: 1rem; line-height: 1.55; color: #EDEAF8; max-width: 60ch; }

/* Liste (mobile et sans JavaScript) */
.cal-track { list-style: none; margin: 0; padding: 0 0 0 28px; position: relative; }
.cal-track::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--cal-line);
  border-radius: 2px;
}
.cal-item { position: relative; padding: 0 0 28px; }
.cal-node { all: unset; display: block; cursor: default; }
.cal-dot {
  position: absolute;
  left: -28px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--cal-violet);
  display: grid;
  place-items: center;
}
.cal-date { display: block; font-family: var(--cal-display); font-size: 1.15rem; font-weight: 500; }
.cal-short { display: block; font-size: 0.95rem; font-weight: 600; margin-top: 2px; }
.cal-detail { margin-top: 6px; color: var(--cal-muted); font-size: 0.95rem; line-height: 1.6; }
.cal-detail p { margin: 0; }
.cal-detail p + p { margin-top: 8px; }
.cal-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cal-tag { font-size: 0.75rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--cal-lav); color: var(--cal-violet); }
.cal-tag[data-t="interdit"] { background: var(--cal-red-bg); color: var(--cal-red); }
.cal-tag[data-t="haut"] { background: var(--cal-orange-bg); color: var(--cal-orange); }
.cal-tag[data-t="transp"] { background: var(--cal-teal-bg); color: var(--cal-teal); }

/* États */
.cal-item.is-past .cal-dot { background: var(--cal-violet); border-color: var(--cal-violet); }
.cal-item.is-past .cal-dot::after {
  content: "";
  width: 6px;
  height: 3px;
  border: solid #fff;
  border-width: 0 0 2px 2px;
  transform: translateY(-1px) rotate(-45deg);
}
.cal-item.is-past .cal-date, .cal-item.is-past .cal-short { color: var(--cal-muted); }
.cal-item.is-next .cal-dot {
  width: 20px;
  height: 20px;
  left: -30px;
  top: 2px;
  background: var(--cal-violet-2);
  border-color: #fff;
  box-shadow: 0 0 0 4px rgba(122, 94, 230, 0.25);
}
.cal-item.is-next .cal-dot::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--cal-violet-2);
  animation: cal-ring 2.4s ease-out infinite;
}
@keyframes cal-ring {
  from { transform: scale(1); opacity: 0.8; }
  to { transform: scale(2.2); opacity: 0; }
}
.cal-status { display: none; }
.cal.is-ready .cal-status {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--cal-sans);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cal-violet);
  vertical-align: middle;
}
.cal-item.is-past .cal-status { color: var(--cal-muted); }
.cal-today { display: none; }

/* Frise horizontale : dès que le calendrier lui-même (pas le viewport)
   dispose d'au moins 900px de large. En dessous, liste verticale. */
@container (min-width: 900px) {
  .cal.is-ready .cal-frame { background: var(--cal-bg); border-radius: 20px; padding: 40px 32px 32px; }
  .cal.is-ready .cal-track { display: grid; grid-template-columns: repeat(var(--cal-n), 1fr); padding: 0; position: relative; }
  .cal.is-ready .cal-track::before { left: calc(50% / var(--cal-n)); right: calc(50% / var(--cal-n)); top: 40px; bottom: auto; height: 3px; width: auto; }
  .cal.is-ready .cal-progress {
    position: absolute;
    top: 40px;
    height: 3px;
    left: calc(50% / var(--cal-n));
    background: linear-gradient(90deg, var(--cal-violet), var(--cal-violet-2));
    border-radius: 3px;
    transform-origin: left;
    animation: cal-grow 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  @keyframes cal-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
  .cal.is-ready .cal-today { display: block; position: absolute; top: 0; transform: translateX(-50%); text-align: center; pointer-events: none; }
  .cal-today span { display: inline-block; font-size: 0.72rem; font-weight: 600; color: #fff; background: var(--cal-ink); padding: 3px 9px; border-radius: 999px; }
  .cal-today::after { content: ""; display: block; width: 2px; height: 22px; margin: 2px auto 0; background: var(--cal-ink); }
  .cal.is-ready .cal-item { padding: 0; }
  .cal.is-ready .cal-node {
    all: unset;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    padding: 62px 6px 14px;
    cursor: pointer;
    border-radius: 12px;
    position: relative;
    transition: background 0.2s;
  }
  .cal.is-ready .cal-node:hover { background: rgba(75, 51, 166, 0.06); }
  .cal.is-ready .cal-node:focus-visible { outline: 2px solid var(--cal-violet); outline-offset: 2px; }
  .cal.is-ready .cal-dot { left: 50%; top: 32px; transform: translateX(-50%); width: 20px; height: 20px; transition: transform 0.2s; }
  .cal.is-ready .cal-item.is-next .cal-dot { left: 50%; top: 30px; width: 24px; height: 24px; }
  .cal.is-ready .cal-node:hover .cal-dot { transform: translateX(-50%) scale(1.15); }
  .cal.is-ready .cal-date {
    font-size: 1rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cal.is-ready .cal-short { font-size: 0.82rem; font-weight: 500; color: var(--cal-muted); margin-top: 6px; line-height: 1.35; }
  .cal.is-ready .cal-status { display: block; margin: 8px 0 0; }
  .cal.is-ready .cal-node[aria-pressed="true"] { background: #fff; box-shadow: 0 6px 20px rgba(30, 20, 70, 0.08); }
  .cal.is-ready .cal-node[aria-pressed="true"] .cal-date { color: var(--cal-violet); }
  .cal.is-ready .cal-node[aria-pressed="true"]::after {
    content: "";
    position: absolute;
    bottom: -17px;
    left: 50%;
    width: 16px;
    height: 16px;
    background: #fff;
    transform: translateX(-50%) rotate(45deg);
    box-shadow: 4px 4px 8px rgba(30, 20, 70, 0.05);
  }
  .cal.is-ready .cal-detail, .cal.is-ready .cal-item .cal-tags { display: none; }
  .cal.is-ready .cal-panel {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 32px;
    margin-top: 16px;
    background: #fff;
    border-radius: 16px;
    padding: 28px 32px;
    box-shadow: 0 6px 20px rgba(30, 20, 70, 0.06);
    min-height: 150px;
  }
  .cal-panel-date { font-family: var(--cal-display); font-size: 1.9rem; line-height: 1.1; margin: 0; }
  .cal-panel-when { margin: 10px 0 0; font-size: 0.9rem; font-weight: 600; color: var(--cal-violet); }
  .cal.is-ready .cal-panel .cal-detail { display: block; margin: 0 0 12px; font-size: 1.05rem; color: #3A3355; }
  .cal-panel.is-swap { animation: cal-fade 0.35s ease both; }
  @keyframes cal-fade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
}
.cal-panel { display: none; }
.cal-frame { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .cal *, .cal *::before, .cal *::after { animation: none !important; transition: none !important; }
}

/* ---------- Accueil : composant "Notre différence" (version claire) ----------
   Issu de _figures/difference-composant.html. Fond propre au composant
   (dégradé lavande clair + trame d'hexagones qui s'éclaire autour de la
   souris) : plus de photo de fond, --d-photo n'existe plus. */
.diff {
  --d-ink: #1E1446;
  --d-violet: #4B33A6;
  --d-violet-2: #7A5EE6;
  --d-lav: #ECE8F8;
  --d-text: #544B70;
  --d-display: var(--font-display);
  --d-sans: var(--font-sans);
  --mx: 70%;
  --my: 40%;
  position: relative;
  overflow: hidden;
  color: var(--d-ink);
  font-family: var(--d-sans);
  background: linear-gradient(160deg, #FBFAFF 0%, #F3EFFD 55%, #EDE7FC 100%);
  padding: 112px 24px;
}
.diff * { box-sizing: border-box; }
.diff::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0l28 16v32L28 64 0 48V16zM28 64v33M0 48l-28 16M56 48l28 16' fill='none' stroke='%237A5EE6' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 56px 97px;
  -webkit-mask-image: radial-gradient(380px circle at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0.06) 100%);
  mask-image: radial-gradient(380px circle at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0.06) 100%);
}
.diff-blob { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.diff-blob.b1 { width: 560px; height: 560px; left: -180px; top: -200px; background: #DCD1FF; opacity: 0.8; animation: diff-drift 20s ease-in-out infinite alternate; }
.diff-blob.b2 { width: 480px; height: 480px; right: -140px; bottom: -200px; background: #E6DCFF; opacity: 0.9; animation: diff-drift 24s ease-in-out infinite alternate-reverse; }
.diff-blob.b3 { width: 320px; height: 320px; left: 45%; top: 30%; background: #F1E4FF; opacity: 0.7; animation: diff-drift 28s ease-in-out infinite alternate; }
@keyframes diff-drift { to { transform: translate(50px, 40px) scale(1.1); } }
.diff-inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 5fr) 7fr;
  gap: 72px;
  align-items: start;
}
.diff-head { position: sticky; top: 120px; }
.diff-title {
  font-family: var(--d-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--d-ink);
}
.diff-title em { font-style: italic; color: var(--d-violet); }
.diff-lead { margin: 24px 0 0; font-size: 1.15rem; line-height: 1.6; color: var(--d-text); max-width: 36ch; }
.diff-note { margin: 12px 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--d-text); opacity: 0.8; max-width: 36ch; }

.diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.diff-card {
  --cx: 50%;
  --cy: 50%;
  position: relative;
  border-radius: 20px;
  padding: 32px 30px 30px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid #E3DDF5;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(75, 51, 166, 0.07);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.35s, box-shadow 0.35s, background 0.35s;
  isolation: isolate;
}
.diff-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.35s;
  background: radial-gradient(360px circle at var(--cx) var(--cy), rgba(122, 94, 230, 0.16), transparent 60%);
}
.diff-card::after {
  content: "";
  position: absolute;
  left: 30px;
  right: 30px;
  top: -1px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--d-violet), var(--d-violet-2), #C9B8FF);
  transform: scaleX(0.18);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.diff-card:nth-child(2) { transform: translateY(48px); }
.diff-card:nth-child(4) { transform: translateY(48px); }
.diff-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  background: linear-gradient(140deg, var(--d-violet), var(--d-violet-2));
  box-shadow: 0 8px 18px rgba(75, 51, 166, 0.28);
}
.diff-icon svg { width: 24px; height: 24px; stroke: #fff; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.diff-card h3 { font-family: var(--d-display); font-weight: 500; font-size: 1.45rem; line-height: 1.2; margin: 0 0 12px; color: var(--d-ink); }
.diff-card p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--d-text); }

@media (hover: hover) {
  .diff-card:hover { background: #fff; border-color: #CFC2F5; box-shadow: 0 22px 50px rgba(75, 51, 166, 0.16); }
  .diff-card:hover::after { transform: scaleX(1); }
  .diff-card:hover::before { opacity: 1; }
  .diff-card:nth-child(odd):hover { transform: translateY(-6px); }
  .diff-card:nth-child(even):hover { transform: translateY(42px); }
  .diff-card:hover .diff-icon svg .draw { animation: diff-draw 0.9s ease both; }
}
@keyframes diff-draw {
  from { stroke-dashoffset: 60; }
  to { stroke-dashoffset: 0; }
}
.diff-icon .draw { stroke-dasharray: 60; }

/* Apparition au défilement */
.diff.js .diff-card { opacity: 0; translate: 0 24px; }
.diff.js .diff-card.is-in {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.7s ease, translate 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.35s, border-color 0.35s, background 0.35s, box-shadow 0.35s;
}

@media (max-width: 980px) {
  .diff { padding: 80px 20px; }
  .diff-inner { grid-template-columns: 1fr; gap: 48px; }
  .diff-head { position: static; }
  .diff-card:nth-child(2), .diff-card:nth-child(4) { transform: none; }
  .diff-card:nth-child(even):hover { transform: translateY(-6px); }
}
@media (max-width: 620px) {
  .diff-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .diff *, .diff *::before, .diff *::after { transition: none !important; animation: none !important; }
  .diff.js .diff-card { opacity: 1; translate: none; }
}

/* ---------- Offre.html : composant bandeau du haut (.oh) ----------
   Issu de _figures/offre-bandeau-composant.html. Remplace entièrement
   l'ancien bandeau (.hero-photo-dark, désormais supprimé) : motif
   hexagonal et photo de fond remplacés par les halos et le réseau SVG
   du composant. */
.oh {
  --oh-ink: #FFFFFF;
  --oh-violet: #CFC6F2;
  --oh-violet-2: #A48BFF;
  --oh-text: #E4DEF7;
  --oh-bg: linear-gradient(120deg, #1E1446 0%, #2C1C66 100%);
  --oh-line: rgba(255, 255, 255, 0.08);
  --oh-display: var(--font-display);
  --oh-sans: var(--font-sans);
  position: relative;
  overflow: hidden;
  background: var(--oh-bg);
  color: var(--oh-ink);
  font-family: var(--oh-sans);
  padding: 120px 24px 104px;
  border-bottom: 1px solid var(--oh-line);
}
.oh * { box-sizing: border-box; }

/* Halos de couleur qui dérivent lentement */
.oh-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.45; pointer-events: none; }
.oh-blob.b1 { width: 520px; height: 520px; right: -120px; top: -180px; background: #5B3FD1; animation: oh-drift 18s ease-in-out infinite alternate; }
.oh-blob.b2 { width: 420px; height: 420px; right: 22%; bottom: -260px; background: #4B33A6; animation: oh-drift 22s ease-in-out infinite alternate-reverse; }
.oh-blob.b3 { width: 300px; height: 300px; left: -120px; top: 40px; background: #3A2690; animation: oh-drift 26s ease-in-out infinite alternate; }
@keyframes oh-drift { to { transform: translate(40px, 30px) scale(1.08); } }

/* Réseau d'hexagones à droite, suit légèrement la souris */
.oh-net { position: absolute; right: 3%; top: 50%; width: min(500px, 38vw); transform: translateY(-50%); pointer-events: none; }
.oh-net svg { width: 100%; height: auto; display: block; overflow: visible; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.oh-net .hx { fill: #33227A; stroke: rgba(255, 255, 255, 0.75); stroke-width: 1.8; }
.oh-net .hx-main { fill: url(#oh-hub); stroke: #fff; stroke-width: 2.5; }
.oh-net .hub-g { filter: drop-shadow(0 0 18px rgba(164, 139, 255, 0.75)); animation: oh-breathe 3.2s ease-in-out infinite; }
@keyframes oh-breathe { 50% { filter: drop-shadow(0 0 34px rgba(164, 139, 255, 1)); } }
.oh-net .ln { stroke: rgba(255, 255, 255, 0.45); stroke-width: 1.6; stroke-dasharray: 5 6; fill: none; }
.oh-net .dot { fill: #fff; opacity: 0.8; }
.oh-net .pulse {
  fill: none;
  stroke: #E6DDFF;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 18 400;
  filter: drop-shadow(0 0 6px #A48BFF);
  stroke-dashoffset: 414;
  animation: oh-run 4s linear infinite;
}
.oh-net .pulse.p2 { animation-delay: 1.3s; }
.oh-net .pulse.p3 { animation-delay: 2.6s; }
@keyframes oh-run { to { stroke-dashoffset: 0; } }
.oh-net text { font-family: var(--oh-display); font-size: 19px; fill: #fff; text-anchor: middle; dominant-baseline: central; }
.oh-net text.t-sm { font-family: var(--oh-sans); font-size: 13.5px; font-weight: 600; fill: #fff; }

.oh-inner { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; }
.oh-content { max-width: 720px; }
.oh-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; font-size: 0.9rem; font-weight: 600; color: var(--oh-violet); }
.oh-kicker::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--oh-violet-2); }
.oh-title {
  font-family: var(--oh-display);
  font-weight: 400;
  font-size: clamp(2.3rem, 4.4vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0;
  color: #fff;
}
.oh-title em { font-style: italic; color: var(--oh-violet); }
.oh-lead { margin: 26px 0 0; font-size: 1.15rem; line-height: 1.65; color: var(--oh-text); max-width: 58ch; }

@property --oh-ang {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.oh-quote {
  position: relative;
  margin: 48px 0 0;
  max-width: 700px;
  padding: 34px 38px 38px 96px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(122, 94, 230, 0.28), rgba(255, 255, 255, 0.05) 60%);
  box-shadow: 0 20px 60px rgba(10, 5, 40, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  isolation: isolate;
}
.oh-quote::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  z-index: -1;
  background: conic-gradient(from var(--oh-ang), rgba(164, 139, 255, 0.15), #A48BFF, #F2C6FF, #fff, #A48BFF, rgba(164, 139, 255, 0.15) 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: oh-spin 6s linear infinite;
}
@keyframes oh-spin { to { --oh-ang: 360deg; } }
.oh-quote::after {
  content: "\201C";
  position: absolute;
  left: 24px;
  top: -8px;
  font-family: var(--oh-display);
  font-size: 8rem;
  line-height: 1;
  background: linear-gradient(160deg, #F2C6FF, #A48BFF 60%, #5B3FD1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(164, 139, 255, 0.6));
}
.oh-quote p { margin: 0; font-family: var(--oh-display); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.6; color: #fff; }
.oh-measure .txt {
  background: linear-gradient(90deg, #F2C6FF, #fff, #A48BFF, #F2C6FF);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: oh-shine 4s linear infinite;
  font-weight: 500;
}
.oh-sheen { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; }
.oh-sheen::before {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -30%;
  width: 150px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08) 20%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0.08) 80%, transparent);
  transform: rotate(18deg);
  animation: oh-sweep 5s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
@keyframes oh-sweep { 0% { left: -30%; } 55%, 100% { left: 120%; } }
.oh-quote p { position: relative; z-index: 1; }
@keyframes oh-shine { to { background-position: -250% 0; } }
.oh-quote .w { display: inline-block; opacity: 0; transform: translateY(10px); filter: blur(4px); }
.oh-quote.is-on .w {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease;
  transition-delay: calc(var(--i) * 70ms + 0.5s);
}
.oh-measure { position: relative; display: inline-block; font-style: italic; padding-bottom: 6px; white-space: nowrap; }
.oh-ruler { position: absolute; left: -2px; right: -2px; bottom: -6px; width: calc(100% + 4px); height: 12px; overflow: visible; }
.oh-ruler path { fill: none; stroke: #A48BFF; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.oh-ruler .base { stroke-width: 2; filter: drop-shadow(0 0 4px rgba(164, 139, 255, 0.9)); }
.oh-ruler .clip-r { transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(0.6, 0, 0.2, 1); }
.oh-quote.is-on .oh-ruler .clip-r { transform: scaleX(1); transition-delay: calc(var(--n) * 70ms + 0.7s); }
.oh-measure::after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px #A48BFF, 0 0 0 3px rgba(164, 139, 255, 0.35);
  opacity: 0;
}
.oh-quote.is-on .oh-measure::after { animation: oh-slide 1.1s cubic-bezier(0.6, 0, 0.2, 1) forwards; animation-delay: calc(var(--n) * 70ms + 0.7s); }
@keyframes oh-slide { 0% { left: 0; opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 9px); opacity: 1; } }
.oh-quote-sign { display: block; margin-top: 26px; font-family: var(--oh-sans); font-size: 0.85rem; color: var(--oh-violet); }

/* Apparition */
.oh.js .oh-anim { opacity: 0; transform: translateY(18px); }
.oh.js.is-in .oh-anim { opacity: 1; transform: none; transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.oh.js.is-in .oh-anim:nth-child(2) { transition-delay: 0.1s; }
.oh.js.is-in .oh-anim:nth-child(3) { transition-delay: 0.2s; }
.oh.js.is-in .oh-anim:nth-child(4) { transition-delay: 0.3s; }

@media (max-width: 1100px) {
  .oh-net { opacity: 0.4; right: -80px; }
}
@media (max-width: 760px) {
  .oh { padding: 80px 20px 72px; }
  .oh-quote { padding: 56px 22px 28px; }
  .oh-quote::after { left: 14px; top: -18px; font-size: 6rem; }
  .oh-net { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .oh * { animation: none !important; transition: none !important; }
  .oh.js .oh-anim { opacity: 1; transform: none; }
  .oh-quote .w { opacity: 1; transform: none; filter: none; }
  .oh-ruler .clip-r { transform: none; }
  .oh-measure::after { display: none; }
  .oh-quote::before, .oh-measure .txt { animation: none; }
  .oh-sheen { display: none; }
}

/* ---------- Accueil : composant "Notre offre" (.po) ----------
   Issu de _figures/offre-accueil-composant.html. Fond clair propre au
   composant : ancien fond (section-indigo-tint), motifs hexagonaux et
   flèche entre piliers retirés. border-top : filet de séparation avec la
   section "Notre différence" qui précède (même registre de fond clair). */
.po {
  --p-ink: #1E1446;
  --p-violet: #4B33A6;
  --p-violet-2: #7A5EE6;
  --p-lav: #ECE8F8;
  --p-text: #544B70;
  --p-line: #E3DDF5;
  --p-display: var(--font-display);
  --p-sans: var(--font-sans);
  position: relative;
  overflow: hidden;
  font-family: var(--p-sans);
  color: var(--p-ink);
  background: linear-gradient(180deg, #F7F4FE 0%, #F1ECFD 100%);
  padding: 104px 24px 96px;
  border-top: 1px solid var(--p-line);
}
.po * { box-sizing: border-box; }
.po-blob { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.po-blob.b1 { width: 520px; height: 520px; right: -160px; top: -160px; background: #DCD1FF; opacity: 0.8; animation: po-drift 22s ease-in-out infinite alternate; }
.po-blob.b2 { width: 460px; height: 460px; left: -160px; bottom: -200px; background: #E3D8FF; opacity: 0.9; animation: po-drift 26s ease-in-out infinite alternate-reverse; }
@keyframes po-drift { to { transform: translate(50px, 40px) scale(1.1); } }
.po-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; }

/* En-tête */
.po-head { text-align: center; max-width: 760px; margin: 0 auto; }
.po-kicker {
  display: inline-block;
  margin: 0 0 18px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--p-line);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--p-violet);
}
.po-title { font-family: var(--p-display); font-weight: 400; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.12; letter-spacing: -0.01em; margin: 0; color: var(--p-ink); }
.po-title em { font-style: italic; color: var(--p-violet); }
.po-lead { margin: 20px auto 0; font-size: 1.12rem; line-height: 1.6; color: var(--p-text); max-width: 56ch; }

/* Les deux piliers */
.po-pillars { display: grid; grid-template-columns: 1fr 120px 1fr; align-items: stretch; margin-top: 64px; }
.po-card {
  --rx: 0deg;
  --ry: 0deg;
  --cx: 50%;
  --cy: 50%;
  position: relative;
  border-radius: 24px;
  padding: 36px 36px 34px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--p-line);
  box-shadow: 0 14px 40px rgba(75, 51, 166, 0.08);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s;
  isolation: isolate;
  overflow: hidden;
}
.po-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s;
  background: radial-gradient(380px circle at var(--cx) var(--cy), rgba(122, 94, 230, 0.14), transparent 60%);
}
.po-card:hover { box-shadow: 0 26px 60px rgba(75, 51, 166, 0.16); }
.po-card:hover::before { opacity: 1; }
.po-num {
  position: absolute;
  right: 24px;
  bottom: -14px;
  font-family: var(--p-display);
  font-size: 6.5rem;
  line-height: 1;
  font-weight: 400;
  background: linear-gradient(180deg, rgba(122, 94, 230, 0.22), rgba(122, 94, 230, 0));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
}
.po-tag { margin: 0 0 10px; font-size: 0.85rem; font-weight: 600; color: var(--p-violet-2); }
.po-card h3 { font-family: var(--p-display); font-weight: 500; font-size: clamp(1.5rem, 2.2vw, 1.9rem); line-height: 1.15; margin: 0; color: var(--p-ink); }

/* Étapes animées dans chaque pilier */
.po-steps { list-style: none; margin: 30px 0 0; padding: 0; display: flex; gap: 6px; flex-wrap: nowrap; align-items: center; position: relative; z-index: 1; }
.po-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--p-lav);
  color: var(--p-violet);
  font-weight: 600;
  font-size: 0.9rem;
  transition: background 0.45s, color 0.45s, box-shadow 0.45s, transform 0.45s;
}
.po-step i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #fff; font-style: normal; font-size: 0.72rem; color: var(--p-violet); }
.po-sep { flex: none; width: 14px; height: 2px; border-radius: 2px; background: var(--p-line); }
.po-step.is-lit {
  background: linear-gradient(135deg, var(--p-violet), var(--p-violet-2));
  color: #fff;
  box-shadow: 0 8px 20px rgba(75, 51, 166, 0.3);
  transform: translateY(-2px);
}
.po-step.is-lit i { color: var(--p-violet); }

/* Liaison animée entre les piliers */
.po-link { position: relative; display: grid; place-items: center; }
.po-link svg { width: 100%; height: 60px; overflow: visible; }
.po-link .track { stroke: #CFC2F5; stroke-width: 2; stroke-dasharray: 4 7; fill: none; animation: po-dash 1.2s linear infinite; }
@keyframes po-dash { to { stroke-dashoffset: -11; } }
.po-link .head { fill: none; stroke: var(--p-violet-2); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.po-link .orb {
  fill: #fff;
  stroke: var(--p-violet-2);
  stroke-width: 2;
  filter: drop-shadow(0 0 6px rgba(122, 94, 230, 0.8));
  animation: po-orb 2.4s cubic-bezier(0.5, 0, 0.3, 1) infinite;
}
@keyframes po-orb {
  0% { transform: translateX(0); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(96px); opacity: 0; }
}

/* Cadres de référence — pastilles avec les icônes actuelles du site */
.po-frames { margin-top: 56px; text-align: center; }
.po-frames-title { margin: 0 0 16px; font-size: 0.9rem; font-weight: 600; color: var(--p-text); }
.po-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; list-style: none; margin: 0; padding: 0; }
.po-chips li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px 9px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--p-line);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--p-ink);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s, border-color 0.3s;
}
.po-chips li:hover { transform: translateY(-4px); border-color: #CFC2F5; box-shadow: 0 12px 26px rgba(75, 51, 166, 0.14); }
.po-chips img { width: 26px; height: 26px; display: block; }

/* Bouton */
.po-cta { text-align: center; margin-top: 44px; }
.po-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  padding: 17px 34px;
  border-radius: 999px;
  background: var(--p-ink);
  color: #fff;
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  box-shadow: 0 14px 30px rgba(30, 20, 70, 0.25);
  transition: transform 0.3s, box-shadow 0.3s;
}
.po-btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  animation: po-shine 4s ease-in-out infinite;
}
@keyframes po-shine {
  0%, 60% { left: -60%; }
  100% { left: 130%; }
}
.po-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform 0.3s; }
.po-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(30, 20, 70, 0.3); }
.po-btn:hover svg { transform: translateX(4px); }
.po-btn:focus-visible { outline: 3px solid var(--p-violet-2); outline-offset: 3px; }

/* Apparition */
.po.js .po-rv { opacity: 0; transform: translateY(22px); }
.po.js .po-rv.is-in { opacity: 1; transform: none; transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.po.js .po-card.po-rv.is-in { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); }

@media (max-width: 860px) {
  .po { padding: 80px 20px 72px; }
  .po-pillars { grid-template-columns: 1fr; grid-template-rows: auto 72px auto; }
  .po-link svg { transform: rotate(90deg); width: 96px; }
  .po-card { padding: 30px 26px; }
  .po-num { font-size: 5rem; }
  .po-steps { flex-direction: column; align-items: flex-start; gap: 0; }
  .po-sep { width: 2px; height: 12px; margin-left: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .po *, .po *::before, .po *::after { animation: none !important; transition: none !important; }
  .po.js .po-rv { opacity: 1; transform: none; }
  .po-link .orb { display: none; }
}

/* ---------- Accueil : lumière au survol (cartes 78 % / 35 M€) ----------
   Inspiré de _figures/rendu-lumiere-accueil.html. Couche ajoutée par-dessus
   le bloc .hero-showcase existant (inchangé) : calques injectés par
   assets/js/hero-lumiere.js (halo, glow par carte) + agrandissement au
   survol des cartes .hero-stat. Désactivé sans souris/pointeur fin et avec
   prefers-reduced-motion. */
@media (hover: hover) and (pointer: fine) {
  .hero-stat {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.4s ease;
  }
  .hero-stat:hover {
    transform: translateY(-6px) scale(1.04);
    z-index: 4;
  }

  .hl-layer {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  .hl-layer.is-active { opacity: 1; }

  .hl-halo {
    position: absolute;
    left: 0;
    top: 0;
    width: 560px;
    height: 560px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(200, 185, 255, 0.1) 42%, transparent 72%);
    mix-blend-mode: screen;
    filter: blur(4px);
  }

  .hl-card {
    position: absolute;
    border-radius: var(--radius);
    background: radial-gradient(220px circle at var(--hl-cx, 50%) var(--hl-cy, 50%), rgba(255, 255, 255, 0.35), transparent 65%);
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 0.35s ease;
  }
  .hl-card.is-hot { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-stat:hover { transform: none; }
  .hl-layer { display: none !important; }
}

/* ---------- Accueil : composant "Ressources / Comprendre l'AI Act" ----------
   Issu de _figures/ressources-accueil-composant.html. Remplace l'ancien
   style de cette seule section (grid-2/resource-card restent utilisés par
   d'autres pages et ne sont pas touchés). */
.rs {
  --r-ink: #1E1446;
  --r-violet: #4B33A6;
  --r-violet-2: #7A5EE6;
  --r-lav: #ECE8F8;
  --r-text: #544B70;
  --r-line: #E3DDF5;
  --r-display: var(--font-display);
  --r-sans: var(--font-sans);
  position: relative;
  overflow: hidden;
  font-family: var(--r-sans);
  color: var(--r-ink);
  background: linear-gradient(180deg, #F8F6FE 0%, #F2EEFD 100%);
  padding: 104px 24px;
}
.rs * { box-sizing: border-box; }
.rs-blob { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.rs-blob.b1 { width: 520px; height: 520px; left: -180px; top: -160px; background: #E0D6FF; opacity: 0.8; animation: rs-drift 22s ease-in-out infinite alternate; }
.rs-blob.b2 { width: 440px; height: 440px; right: -140px; bottom: -180px; background: #E6DCFF; opacity: 0.9; animation: rs-drift 26s ease-in-out infinite alternate-reverse; }
@keyframes rs-drift { to { transform: translate(50px, 40px) scale(1.1); } }
.rs-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; }

/* En-tête */
.rs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 44px; flex-wrap: wrap; }
.rs-kicker {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--r-line);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--r-violet);
}
.rs-title { font-family: var(--r-display); font-weight: 400; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; letter-spacing: -0.01em; margin: 0; }
.rs-all { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--r-violet); text-decoration: none; padding: 10px 0; }
.rs-all svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform 0.3s; }
.rs-all:hover svg { transform: translateX(4px); }

/* Grille : la vidéo en grand à gauche, les articles empilés à droite */
.rs-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; }
.rs-list { display: grid; gap: 16px; }

.rs-card {
  --cx: 50%;
  --cy: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--r-line);
  box-shadow: 0 12px 34px rgba(75, 51, 166, 0.07);
  isolation: isolate;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s, border-color 0.4s;
}
.rs-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  background: radial-gradient(340px circle at var(--cx) var(--cy), rgba(122, 94, 230, 0.13), transparent 60%);
}
.rs-card a.rs-link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.rs-card:focus-within { outline: 3px solid var(--r-violet-2); outline-offset: 3px; }
.rs-card a.rs-link { text-decoration: none; color: inherit; }
.rs-card a.rs-link:focus { outline: none; }

.rs-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--r-lav);
  color: var(--r-violet);
}
.rs-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rs-tag[data-t="video"] { background: #FBEAF4; color: #B23A7A; }
.rs-tag[data-t="gouv"] { background: #E5F3F2; color: #2B7A78; }
.rs-tag[data-t="conf"] { background: #FCF0E3; color: #B4610F; }

.rs-card h3 { font-family: var(--r-display); font-weight: 500; line-height: 1.2; margin: 14px 0 0; color: var(--r-ink); }
.rs-card p { margin: 10px 0 0; color: var(--r-text); line-height: 1.6; }
.rs-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: auto; padding-top: 20px; font-size: 0.85rem; color: #7A7294; }
.rs-go { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-weight: 600; font-size: 0.95rem; color: var(--r-violet); }
.rs-go svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform 0.3s; }

/* Carte vidéo */
.rs-video .rs-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: radial-gradient(circle at 30% 20%, #7A5EE6 0%, transparent 55%), linear-gradient(135deg, #2C1C66, #1E1446);
}
.rs-thumb svg.hexes { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; }
.rs-thumb .hx { fill: none; stroke: rgba(207, 198, 242, 0.6); stroke-width: 1; }
.rs-thumb .hx.f { animation: rs-float 6s ease-in-out infinite alternate; }
.rs-thumb .hx.f2 { animation: rs-float 8s ease-in-out infinite alternate-reverse; }
@keyframes rs-float { to { transform: translateY(-10px); } }
.rs-thumb-title { position: absolute; left: 28px; bottom: 24px; right: 120px; font-family: var(--r-display); font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.1; color: #fff; }
.rs-thumb-title em { font-style: italic; color: #CFC6F2; }
.rs-dur { position: absolute; right: 20px; bottom: 20px; padding: 4px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 0.8rem; font-weight: 600; }
.rs-play {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 76px;
  height: 76px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.rs-play::before, .rs-play::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  animation: rs-ring 2.6s ease-out infinite;
}
.rs-play::after { animation-delay: 1.3s; }
@keyframes rs-ring { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.9); opacity: 0; } }
.rs-play svg { width: 26px; height: 26px; fill: var(--r-violet); margin-left: 4px; }
.rs-video .rs-body { display: flex; flex-direction: column; flex: 1; padding: 26px 28px; }
.rs-video h3 { font-size: 1.55rem; }

/* Cartes articles (horizontales) */
.rs-art { padding: 24px 26px 22px; }
.rs-art h3 { font-size: 1.22rem; }
.rs-art p { font-size: 0.95rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rs-art .rs-meta { padding-top: 14px; }
.rs-art::after {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(var(--r-violet), var(--r-violet-2));
  transform: scaleY(0.25);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (hover: hover) {
  .rs-card:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(75, 51, 166, 0.16); border-color: #CFC2F5; }
  .rs-card:hover::before { opacity: 1; }
  .rs-card:hover .rs-go svg { transform: translateX(5px); }
  .rs-video:hover .rs-play { transform: translate(-50%, -50%) scale(1.12); }
  .rs-art:hover::after { transform: scaleY(1); }
}

/* Apparition */
.rs.js .rv { opacity: 0; transform: translateY(22px); }
.rs.js .rv.is-in { opacity: 1; transform: none; transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s, border-color 0.4s; }

@media (max-width: 900px) {
  .rs { padding: 80px 20px; }
  .rs-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .rs *, .rs *::before, .rs *::after { animation: none !important; transition: none !important; }
  .rs.js .rv { opacity: 1; transform: none; }
}

/* ---------- Page Audit : composant d'en-tête (haut de page uniquement) ----------
   Issu de _figures/audit-hero-composant.html. L'encadré Durée/Tarif/Premier
   échange a été retiré (ces informations figurent déjà plus bas, section
   "Déroulé, durée et tarif"). */
.ah {
  --a-ink: #1E1446;
  --a-violet: #4B33A6;
  --a-violet-2: #7A5EE6;
  --a-lav: #ECE8F8;
  --a-text: #544B70;
  --a-line: #E3DDF5;
  --a-ok: #2B7A78;
  --a-display: var(--font-display);
  --a-sans: var(--font-sans);
  position: relative;
  overflow: hidden;
  font-family: var(--a-sans);
  color: var(--a-ink);
  background: linear-gradient(180deg, #F8F6FE 0%, #F3EFFD 100%);
  padding: 88px 24px 96px;
}
.ah * { box-sizing: border-box; }
.ah-blob { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.ah-blob.b1 { width: 560px; height: 560px; right: -180px; top: -200px; background: #DCD1FF; opacity: 0.8; animation: ah-drift 22s ease-in-out infinite alternate; }
.ah-blob.b2 { width: 420px; height: 420px; left: -160px; bottom: -200px; background: #E6DCFF; opacity: 0.9; animation: ah-drift 26s ease-in-out infinite alternate-reverse; }
@keyframes ah-drift { to { transform: translate(50px, 40px) scale(1.1); } }
.ah-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; }

.ah-title { font-family: var(--a-display); font-weight: 400; font-size: clamp(2.3rem, 4.6vw, 3.8rem); line-height: 1.06; letter-spacing: -0.015em; margin: 0; max-width: 20ch; }
.ah-title em { font-style: italic; color: var(--a-violet); }
.ah-lead { margin: 24px 0 0; font-size: 1.2rem; line-height: 1.6; color: var(--a-text); max-width: 62ch; }

/* Les 4 questions de l'audit */
.ah-steps { position: relative; list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: q; }
.ah-track { position: absolute; left: 40px; right: 40px; top: 40px; height: 2px; background: var(--a-line); border-radius: 2px; pointer-events: none; }
.ah-track i {
  position: absolute;
  inset: 0;
  transform-origin: left;
  transform: scaleX(var(--prog, 0));
  background: linear-gradient(90deg, var(--a-violet), var(--a-violet-2));
  border-radius: 2px;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ah-track b {
  position: absolute;
  top: 50%;
  left: calc(var(--prog, 0) * 100%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 2px solid var(--a-violet-2);
  box-shadow: 0 0 0 5px rgba(122, 94, 230, 0.18), 0 0 18px rgba(122, 94, 230, 0.7);
  transition: left 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ah-step {
  --cx: 50%;
  --cy: 50%;
  position: relative;
  border-radius: 20px;
  padding: 22px 22px 24px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--a-line);
  box-shadow: 0 10px 28px rgba(75, 51, 166, 0.07);
  isolation: isolate;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s, border-color 0.4s, background 0.4s;
}
.ah-step::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  background: radial-gradient(260px circle at var(--cx) var(--cy), rgba(122, 94, 230, 0.14), transparent 60%);
}
.ah-ico {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--a-lav);
  color: var(--a-violet);
  transition: background 0.4s, color 0.4s, box-shadow 0.4s;
}
.ah-ico svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ah-ico .ok { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(0.6); transition: opacity 0.35s, transform 0.35s; }
.ah-ico .ok svg { stroke-width: 2.4; }
.ah-ico .base { transition: opacity 0.3s; }
.ah-q { margin: 18px 0 0; font-size: 1.06rem; font-weight: 600; line-height: 1.4; color: var(--a-ink); }
.ah-q::before { counter-increment: q; content: "Question " counter(q); display: block; margin-bottom: 6px; font-size: 0.78rem; font-weight: 600; color: var(--a-violet-2); }

/* Étape « vérifiée » */
.ah-step.is-done { border-color: #CFC2F5; background: #fff; }
.ah-step.is-done .ah-ico { background: linear-gradient(135deg, var(--a-violet), var(--a-violet-2)); color: #fff; box-shadow: 0 8px 18px rgba(75, 51, 166, 0.28); }
.ah-step.is-done .ah-ico .base { opacity: 0; }
.ah-step.is-done .ah-ico .ok { opacity: 1; transform: none; }
.ah-step.is-now { border-color: var(--a-violet-2); box-shadow: 0 18px 40px rgba(75, 51, 166, 0.16); transform: translateY(-4px); }

@media (hover: hover) {
  .ah-step:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 22px 48px rgba(75, 51, 166, 0.16); }
  .ah-step:hover::before { opacity: 1; }
}

/* Résultat de l'audit */
.ah-out {
  position: relative;
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  border-radius: 20px;
  background: linear-gradient(120deg, #2C1C66, #4B33A6);
  color: #fff;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(44, 28, 102, 0.28);
  opacity: 0.35;
  filter: saturate(0.4);
  transition: opacity 0.6s, filter 0.6s, transform 0.6s;
}
.ah-out.is-on { opacity: 1; filter: none; }
.ah-out::after {
  content: "";
  position: absolute;
  top: -50%;
  bottom: -50%;
  left: -30%;
  width: 120px;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  animation: ah-sweep 5s ease-in-out infinite;
}
@keyframes ah-sweep { 0%, 60% { left: -30%; } 100% { left: 130%; } }
.ah-out-ico { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.25); }
.ah-out-ico svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ah-out p { margin: 0; font-size: 1.15rem; line-height: 1.45; }
.ah-out p strong { font-family: var(--a-display); font-weight: 400; font-size: 1.35rem; color: #fff; }
.ah-out p span { color: #D9D0FA; }

/* Boutons (style du site) */
.ah-cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.ah-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 32px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
}
.ah-btn.p { background: var(--a-ink); color: #fff; box-shadow: 0 14px 30px rgba(30, 20, 70, 0.25); }
.ah-btn.s { background: #fff; color: var(--a-ink); border: 1.5px solid var(--a-ink); }
.ah-btn:hover { transform: translateY(-2px); }
.ah-btn:focus-visible { outline: 3px solid var(--a-violet-2); outline-offset: 3px; }

/* Apparition */
.ah.js .rv { opacity: 0; transform: translateY(20px); }
.ah.js .rv.is-in { opacity: 1; transform: none; transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }

@media (max-width: 980px) {
  .ah-steps { grid-template-columns: 1fr 1fr; }
  .ah-track { display: none; }
}
@media (max-width: 620px) {
  .ah { padding: 64px 20px 72px; }
  .ah-steps { grid-template-columns: 1fr; }
  .ah-out { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .ah *, .ah *::before, .ah *::after { animation: none !important; transition: none !important; }
  .ah.js .rv { opacity: 1; transform: none; }
}

/* ---------- Page Audit : composant "À qui s'adresse cet audit" ----------
   Issu de _figures/audit-public-composant.html. border-top : filet de
   séparation avec le haut de page (.ah), même registre de fond lavande,
   directement adjacent dans le DOM. */
.ap {
  --p-ink: #1E1446;
  --p-violet: #4B33A6;
  --p-violet-2: #7A5EE6;
  --p-lav: #ECE8F8;
  --p-text: #544B70;
  --p-line: #E3DDF5;
  --p-display: var(--font-display);
  --p-sans: var(--font-sans);
  --mx: 60%;
  --my: 50%;
  position: relative;
  overflow: hidden;
  font-family: var(--p-sans);
  color: var(--p-ink);
  padding: 96px 24px;
  background: linear-gradient(150deg, #F4F0FE 0%, #ECE5FD 55%, #E4DAFB 100%);
  border-top: 1px solid var(--p-line);
}
.ap * { box-sizing: border-box; }
.ap::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(600px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.65), rgba(122, 94, 230, 0.06) 40%, transparent 65%);
}
.ap-blob { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.ap-blob.b1 { width: 520px; height: 520px; right: -160px; top: -180px; background: #D4C6FF; opacity: 0.85; animation: ap-drift 20s ease-in-out infinite alternate; }
.ap-blob.b2 { width: 460px; height: 460px; left: -180px; bottom: -220px; background: #DCCFFF; opacity: 0.9; animation: ap-drift 25s ease-in-out infinite alternate-reverse; }
.ap-blob.b3 { width: 300px; height: 300px; left: 42%; top: 10%; background: #F3E6FF; opacity: 0.8; animation: ap-drift 28s ease-in-out infinite alternate; }
@keyframes ap-drift { to { transform: translate(50px, 40px) scale(1.12); } }
.ap-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; align-items: center; }
.ap-who > *, .ap-flow > * { min-width: 0; }

.ap-title { font-family: var(--p-display); font-weight: 400; font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1.1; margin: 0; }
.ap-title em { font-style: italic; color: var(--p-violet); }
.ap-text { margin: 24px 0 0; font-family: var(--p-display); font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.55; color: #3A3355; }
.ap-text mark { background: none; color: var(--p-ink); position: relative; white-space: nowrap; font-weight: 500; }
.ap-text mark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.08em;
  height: 0.38em;
  z-index: -1;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(122, 94, 230, 0.28), rgba(201, 184, 255, 0.35));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ap.is-in .ap-text mark::after { transform: scaleX(1); }
.ap.is-in .ap-text mark:nth-of-type(2)::after { transition-delay: 0.15s; }
.ap.is-in .ap-text mark:nth-of-type(3)::after { transition-delay: 0.3s; }
.ap.is-in .ap-text mark:nth-of-type(4)::after { transition-delay: 0.45s; }
.ap-text mark { isolation: isolate; }

/* Visuel à droite (décoratif, aria-hidden) */
.ap-visual {
  position: relative;
  padding: 28px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 50px rgba(75, 51, 166, 0.12);
}
.ap-who { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ap-tile {
  --cx: 50%;
  --cy: 50%;
  position: relative;
  border-radius: 18px;
  padding: 20px 16px 18px;
  background: #fff;
  border: 1px solid var(--p-line);
  text-align: center;
  box-shadow: 0 8px 22px rgba(75, 51, 166, 0.06);
  isolation: isolate;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s, border-color 0.4s;
}
.ap-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s;
  background: radial-gradient(200px circle at var(--cx) var(--cy), rgba(122, 94, 230, 0.16), transparent 60%);
}
.ap-tile .ic {
  width: 52px;
  height: 52px;
  margin: 0 auto;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--p-violet), var(--p-violet-2));
  box-shadow: 0 8px 18px rgba(75, 51, 166, 0.28);
}
.ap-tile svg { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ap-tile b { display: block; margin-top: 12px; font-size: 0.95rem; font-weight: 600; line-height: 1.3; }

/* Les 3 façons d'utiliser l'IA */
.ap-flow { position: relative; margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ap-flow::before { content: ""; position: absolute; left: 16%; right: 16%; top: 50%; height: 2px; background: var(--p-line); transform: translateY(-50%); }
.ap-verb {
  position: relative;
  z-index: 1;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--p-line);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--p-violet);
  transition: background 0.5s, color 0.5s, box-shadow 0.5s, transform 0.5s;
}
.ap-verb i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ap-verb.is-on {
  background: linear-gradient(135deg, var(--p-violet), var(--p-violet-2));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(75, 51, 166, 0.3);
  transform: translateY(-3px) scale(1.05);
}

.ap-saas { margin-top: 22px; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px; background: #fff; border: 1px dashed #C9BCF3; }
.ap-saas .cloud { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--p-lav); }
.ap-saas svg { width: 22px; height: 22px; stroke: var(--p-violet); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ap-saas span { font-size: 0.95rem; color: var(--p-text); line-height: 1.4; }
.ap-saas strong { color: var(--p-ink); font-weight: 600; }
.ap-saas .spark { animation: ap-twinkle 2.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes ap-twinkle { 50% { opacity: 0.3; transform: scale(0.7); } }

@media (hover: hover) {
  .ap-tile:hover { transform: translateY(-6px) scale(1.04); box-shadow: 0 20px 44px rgba(75, 51, 166, 0.16); border-color: #CFC2F5; }
  .ap-tile:hover::before { opacity: 1; }
}

/* Apparition */
.ap.js .rv { opacity: 0; transform: translateY(20px); }
.ap.js.is-in .rv { opacity: 1; transform: none; transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.ap.js.is-in .rv:nth-child(2) { transition-delay: 0.12s; }

@media (max-width: 900px) {
  .ap { padding: 72px 20px; }
  .ap-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ap-text mark { white-space: normal; }
}
@media (max-width: 520px) {
  .ap-visual { padding: 18px; }
  .ap-who { gap: 10px; }
  .ap-tile { padding: 16px 8px; }
  .ap-tile .ic { width: 44px; height: 44px; }
  .ap-tile b { font-size: 0.82rem; }
  .ap-verb { padding: 8px 10px; font-size: 0.78rem; gap: 6px; }
  .ap-flow { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .ap *, .ap *::before, .ap *::after { animation: none !important; transition: none !important; }
  .ap.js .rv { opacity: 1; transform: none; }
  .ap .ap-text mark::after { transform: none; }
}

/* ---------- Page Audit : composant "Ce que couvre l'audit" / "Livrables" ----------
   Issu de _figures/audit-couverture-composant.html. border-top : filet de
   séparation avec la section "À qui s'adresse cet audit" (.ap), même fond
   lavande, directement adjacente dans le DOM. top de .ac-deliv aligné sur
   la valeur déjà utilisée ailleurs sur le site pour un panneau sticky sous
   l'en-tête (voir .diff-head). */
.ac {
  --c-ink: #1E1446;
  --c-violet: #4B33A6;
  --c-violet-2: #7A5EE6;
  --c-lav: #ECE8F8;
  --c-text: #544B70;
  --c-line: #E3DDF5;
  --c-display: var(--font-display);
  --c-sans: var(--font-sans);
  --mx: 40%;
  --my: 40%;
  position: relative;
  font-family: var(--c-sans);
  color: var(--c-ink);
  padding: 96px 24px 104px;
  background: linear-gradient(150deg, #F4F0FE 0%, #ECE5FD 55%, #E4DAFB 100%);
  border-top: 1px solid var(--c-line);
}
.ac * { box-sizing: border-box; }
.ac::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(600px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.65), rgba(122, 94, 230, 0.06) 40%, transparent 65%);
}
/* Clipping des halos décoratifs isolé sur ce calque : .ac lui-même reste en
   overflow visible, condition requise pour que .ac-deliv (position:sticky)
   fonctionne (un ancêtre en overflow:hidden casse le sticky). */
.ac-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ac-blob { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.ac-blob.b1 { width: 520px; height: 520px; right: -160px; top: -180px; background: #D4C6FF; opacity: 0.85; animation: ac-drift 20s ease-in-out infinite alternate; }
.ac-blob.b2 { width: 460px; height: 460px; left: -180px; bottom: -220px; background: #DCCFFF; opacity: 0.9; animation: ac-drift 25s ease-in-out infinite alternate-reverse; }
.ac-blob.b3 { width: 300px; height: 300px; left: 40%; top: 30%; background: #F3E6FF; opacity: 0.8; animation: ac-drift 28s ease-in-out infinite alternate; }
@keyframes ac-drift { to { transform: translate(50px, 40px) scale(1.12); } }

.ac-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.ac-h { font-family: var(--c-display); font-weight: 400; font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.1; margin: 0 0 30px; }

/* Parcours de l'audit (étapes) */
.ac-steps { position: relative; list-style: none; margin: 0; padding: 0 0 0 64px; }
.ac-rail { position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px; background: rgba(122, 94, 230, 0.18); border-radius: 2px; }
.ac-rail i {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(var(--fill, 0) * 100%);
  border-radius: 2px;
  background: linear-gradient(var(--c-violet), var(--c-violet-2));
  box-shadow: 0 0 12px rgba(122, 94, 230, 0.6);
  transition: height 0.25s linear;
}
.ac-step {
  --cx: 50%;
  --cy: 50%;
  position: relative;
  margin-bottom: 14px;
  padding: 20px 24px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 24px rgba(75, 51, 166, 0.07);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  isolation: isolate;
  cursor: default;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s, background 0.4s, border-color 0.4s;
}
.ac-step::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s;
  background: radial-gradient(300px circle at var(--cx) var(--cy), rgba(122, 94, 230, 0.14), transparent 60%);
}
.ac-dot {
  position: absolute;
  left: -64px;
  top: 50%;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--c-line);
  color: var(--c-violet);
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 6px 16px rgba(75, 51, 166, 0.08);
  transition: background 0.5s, color 0.5s, box-shadow 0.5s, transform 0.5s;
}
.ac-step.is-on .ac-dot {
  background: linear-gradient(135deg, var(--c-violet), var(--c-violet-2));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(75, 51, 166, 0.32);
}
.ac-step h3 { margin: 0; font-size: 1.08rem; font-weight: 600; color: var(--c-ink); }
.ac-step p { margin: 6px 0 0; font-size: 0.98rem; line-height: 1.5; color: var(--c-text); }

/* Livrables */
.ac-deliv { position: sticky; top: 120px; }
.ac-card {
  position: relative;
  border-radius: 26px;
  padding: 34px 30px 30px;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(150deg, #2C1C66 0%, #1E1446 100%);
  box-shadow: 0 30px 70px rgba(30, 20, 70, 0.35);
}
.ac-card::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -160px;
  top: -160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(122, 94, 230, 0.55), transparent 65%);
  pointer-events: none;
}
.ac-card::after {
  content: "";
  position: absolute;
  top: -50%;
  bottom: -50%;
  left: -40%;
  width: 110px;
  transform: rotate(18deg);
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  animation: ac-sweep 7s ease-in-out infinite;
}
@keyframes ac-sweep { 0%, 65% { left: -40%; } 100% { left: 140%; } }
.ac-card .ac-h { position: relative; color: #fff; margin-bottom: 22px; }
.ac-card .ac-h em { font-style: italic; color: #CFC6F2; }
.ac-dl { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ac-li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.4s, border-color 0.4s, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s, opacity 0.4s;
}
.ac-li .doc {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: background 0.4s;
}
.ac-li svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ac-li b { display: block; font-weight: 600; font-size: 1rem; }
.ac-li span { display: block; margin-top: 3px; font-size: 0.9rem; color: #CFC6F2; line-height: 1.4; }
.ac-li.is-hi { background: rgba(164, 139, 255, 0.2); border-color: rgba(207, 198, 242, 0.5); transform: translateX(-6px); box-shadow: 0 10px 30px rgba(10, 5, 40, 0.35); }
.ac-li.is-hi .doc { background: linear-gradient(135deg, #7A5EE6, #A48BFF); }
.ac-dl.has-hi .ac-li:not(.is-hi) { opacity: 0.45; }
.ac-hint { position: relative; margin: 18px 0 0; font-size: 0.82rem; color: #A99FD6; }

@media (hover: hover) {
  .ac-step:hover { transform: translateX(6px) scale(1.02); background: #fff; border-color: #CFC2F5; box-shadow: 0 18px 40px rgba(75, 51, 166, 0.15); }
  .ac-step:hover::before { opacity: 1; }
  .ac-step:hover .ac-dot { transform: scale(1.08) rotate(-6deg); }
}

@media (max-width: 980px) {
  .ac { padding: 72px 20px; }
  .ac-inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .ac-deliv { position: static; }
  .ac-hint { display: none; }
}
@media (max-width: 520px) {
  .ac-steps { padding-left: 54px; }
  .ac-dot { left: -54px; width: 40px; height: 40px; margin-top: -20px; border-radius: 13px; }
  .ac-rail { left: 19px; }
  .ac-card { padding: 28px 20px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .ac *, .ac *::before, .ac *::after { animation: none !important; transition: none !important; }
}

/* ---------- Page Audit : composant "Déroulé, durée et tarif" ----------
   Issu de _figures/audit-deroule-composant.html. L'étape "Diagnostic
   express" de l'escalier a été retirée (son prix de 3 300 € / 3 jours
   n'est pas celui de l'audit et créait une confusion) ; l'escalier ne
   compte donc plus que 3 marches. border-top : filet de séparation avec
   la section "Ce que couvre l'audit" / "Livrables" (.ac) qui précède,
   même fond lavande, directement adjacente dans le DOM. */
.ad {
  --d-ink: #1E1446;
  --d-violet: #4B33A6;
  --d-violet-2: #7A5EE6;
  --d-lav: #ECE8F8;
  --d-text: #544B70;
  --d-line: #E3DDF5;
  --d-display: var(--font-display);
  --d-sans: var(--font-sans);
  --mx: 50%;
  --my: 30%;
  position: relative;
  overflow: hidden;
  font-family: var(--d-sans);
  color: var(--d-ink);
  padding: 96px 24px 104px;
  background: linear-gradient(150deg, #F4F0FE 0%, #ECE5FD 55%, #E4DAFB 100%);
  border-top: 1px solid var(--d-line);
}
.ad * { box-sizing: border-box; }
.ad::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(600px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.65), rgba(122, 94, 230, 0.06) 40%, transparent 65%);
}
.ad-blob { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.ad-blob.b1 { width: 520px; height: 520px; right: -160px; top: -180px; background: #D4C6FF; opacity: 0.85; animation: ad-drift 20s ease-in-out infinite alternate; }
.ad-blob.b2 { width: 460px; height: 460px; left: -180px; bottom: -220px; background: #DCCFFF; opacity: 0.9; animation: ad-drift 25s ease-in-out infinite alternate-reverse; }
@keyframes ad-drift { to { transform: translate(50px, 40px) scale(1.12); } }
.ad-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; }
.ad-h { font-family: var(--d-display); font-weight: 400; font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.1; margin: 0; }

/* 1. Déroulé */
.ad-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ad-dur {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid #fff;
  box-shadow: 0 8px 20px rgba(75, 51, 166, 0.08);
  font-size: 0.95rem;
  color: var(--d-text);
}
.ad-dur svg { width: 18px; height: 18px; stroke: var(--d-violet); fill: none; stroke-width: 1.8; stroke-linecap: round; }
.ad-dur b { color: var(--d-ink); font-weight: 600; }
.ad-flow { position: relative; list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ad-line { position: absolute; left: 12.5%; right: 12.5%; top: 27px; height: 3px; border-radius: 3px; background: rgba(122, 94, 230, 0.18); pointer-events: none; }
.ad-line i {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  transform-origin: left;
  transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--d-violet), var(--d-violet-2));
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ad-line b {
  position: absolute;
  top: 50%;
  left: calc(var(--p, 0) * 100%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  box-shadow: 0 0 0 5px rgba(122, 94, 230, 0.25), 0 0 22px rgba(122, 94, 230, 0.9);
  transition: left 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ad-st { --cx: 50%; --cy: 50%; position: relative; text-align: center; }
.ad-node {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--d-line);
  color: var(--d-violet);
  box-shadow: 0 8px 20px rgba(75, 51, 166, 0.1);
  transition: background 0.5s, color 0.5s, box-shadow 0.5s, transform 0.5s;
}
.ad-node svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ad-st.is-on .ad-node {
  background: linear-gradient(135deg, var(--d-violet), var(--d-violet-2));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 12px 26px rgba(75, 51, 166, 0.35);
  transform: translateY(-3px);
}
.ad-st p { margin: 16px auto 0; max-width: 24ch; font-weight: 600; font-size: 1rem; line-height: 1.45; color: var(--d-ink); }

/* 2. Où se situe l'audit dans notre offre : un escalier (3 marches) */
.ad-offer { margin-top: 80px; }
.ad-sub { font-family: var(--d-display); font-weight: 400; font-size: clamp(1.5rem, 2.3vw, 1.9rem); margin: 0 0 8px; }
.ad-sub-lead { margin: 0; color: var(--d-text); }
.ad-stairs { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: end; min-height: 400px; }
.ad-stp {
  --cx: 50%;
  --cy: 50%;
  --h: 60%;
  position: relative;
  height: var(--h);
  display: flex;
  flex-direction: column;
  padding: 24px 22px 22px;
  border-radius: 22px 22px 14px 14px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid #fff;
  box-shadow: 0 12px 30px rgba(75, 51, 166, 0.08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  isolation: isolate;
  transform-origin: bottom;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s;
}
.ad-stp:nth-child(1) { --h: 60%; }
.ad-stp:nth-child(2) { --h: 85%; }
.ad-stp:nth-child(3) { --h: 100%; }
.ad-stp::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s;
  background: radial-gradient(280px circle at var(--cx) var(--cy), rgba(122, 94, 230, 0.15), transparent 60%);
}
.ad-stp .n { font-size: 0.8rem; font-weight: 600; color: var(--d-violet-2); }
.ad-stp h4 { margin: 8px 0 0; font-size: 1.08rem; font-weight: 600; line-height: 1.3; }
.ad-stp .price { margin: 12px 0 0; font-family: var(--d-display); font-size: 1.6rem; line-height: 1.1; color: var(--d-violet); }
.ad-stp p { margin: 10px 0 0; font-size: 0.92rem; line-height: 1.5; color: var(--d-text); }
/* L'audit : vous êtes ici */
.ad-stp.is-here {
  background: linear-gradient(160deg, #3A2690 0%, #1E1446 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 26px 60px rgba(30, 20, 70, 0.35);
}
.ad-stp.is-here::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;
  background: conic-gradient(from var(--ang, 0deg), rgba(164, 139, 255, 0.15) 0 65%, #A48BFF 82%, #fff 90%, rgba(164, 139, 255, 0.15) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: ad-spin 5s linear infinite;
}
@property --ang {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes ad-spin { to { --ang: 360deg; } }
.ad-stp.is-here .n { color: #CFC6F2; }
.ad-stp.is-here h4 { color: #fff; }
.ad-stp.is-here .price { color: #fff; }
.ad-stp.is-here p { color: #D9D0FA; }
.ad-here {
  position: absolute;
  top: -14px;
  left: 22px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #fff;
  color: var(--d-violet);
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(75, 51, 166, 0.25);
}
.ad-here::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--d-violet-2);
  box-shadow: 0 0 0 0 rgba(122, 94, 230, 0.6);
  animation: ad-ping 1.8s ease-out infinite;
  vertical-align: 1px;
}
@keyframes ad-ping { to { box-shadow: 0 0 0 8px rgba(122, 94, 230, 0); } }
.ad-stp .go { margin-top: auto; padding-top: 16px; }
.ad-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  background: #fff;
  color: var(--d-ink);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 0.3s, box-shadow 0.3s;
}
.ad-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform 0.3s; }
.ad-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25); }
.ad-btn:hover svg { transform: translateX(4px); }
.ad-btn:focus-visible { outline: 3px solid #A48BFF; outline-offset: 3px; }

/* Montée de l'escalier à l'apparition */
.ad.js .ad-stp { transform: scaleY(0.15); opacity: 0; }
.ad.js .ad-stairs.is-in .ad-stp { transform: none; opacity: 1; transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s, box-shadow 0.45s; }
.ad.js .ad-stairs.is-in .ad-stp:nth-child(2) { transition-delay: 0.12s; }
.ad.js .ad-stairs.is-in .ad-stp:nth-child(3) { transition-delay: 0.24s; }

@media (hover: hover) {
  .ad-stp:hover { transform: translateY(-8px) scale(1.03); box-shadow: 0 26px 56px rgba(75, 51, 166, 0.18); }
  .ad-stp:hover::before { opacity: 1; }
  .ad.js .ad-stairs.is-in .ad-stp:hover { transform: translateY(-8px) scale(1.03); }
}

@media (max-width: 900px) {
  .ad { padding: 72px 20px; }
  .ad-flow { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .ad-line { display: none; }
  .ad-stairs { grid-template-columns: 1fr; min-height: 0; gap: 22px; }
  .ad-stp { height: auto !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ad *, .ad *::before, .ad *::after { animation: none !important; transition: none !important; }
  .ad.js .ad-stp { transform: none; opacity: 1; }
}

/* ---------- Page Audit : composant "De l'audit à la mise en conformité" ----------
   Issu de _figures/audit-conformite-composant.html. Fond violet nuit propre
   au composant, remplace le fond clair de l'ancienne section. Section
   directement adjacente à .ad (clair) au-dessus et .audit-section (clair)
   en dessous : aucun filet ajouté ici (transition de couleur volontaire,
   pas un "même fond" à distinguer), juste pas de bord ni d'espace parasite
   entre les sections. */
.mc {
  --m-lav: #CFC6F2;
  --m-text: #DCD4F7;
  --m-glow: #A48BFF;
  --m-violet: #7A5EE6;
  --m-display: var(--font-display);
  --m-sans: var(--font-sans);
  --mx: 30%;
  --my: 30%;
  position: relative;
  overflow: hidden;
  font-family: var(--m-sans);
  color: #fff;
  padding: 104px 24px 112px;
  background: linear-gradient(140deg, #1E1446 0%, #24175A 50%, #2C1C66 100%);
}
.mc * { box-sizing: border-box; }
.mc::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(560px circle at var(--mx) var(--my), rgba(164, 139, 255, 0.22), transparent 65%);
}
.mc::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0l28 16v32L28 64 0 48V16zM28 64v33' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(500px circle at var(--mx) var(--my), #000, transparent 75%);
  mask-image: radial-gradient(500px circle at var(--mx) var(--my), #000, transparent 75%);
}
.mc-blob { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; }
.mc-blob.b1 { width: 560px; height: 560px; right: -200px; top: -220px; background: #5B3FD1; opacity: 0.55; animation: mc-drift 22s ease-in-out infinite alternate; }
.mc-blob.b2 { width: 460px; height: 460px; left: -200px; bottom: -240px; background: #4B33A6; opacity: 0.6; animation: mc-drift 26s ease-in-out infinite alternate-reverse; }
@keyframes mc-drift { to { transform: translate(50px, 40px) scale(1.12); } }

.mc-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.mc-title { font-family: var(--m-display); font-weight: 400; font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.1; margin: 0; }
.mc-title em { font-style: italic; color: var(--m-lav); }
.mc-lead { margin: 28px 0 0; font-family: var(--m-display); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.25; color: #fff; }
.mc-lead span { position: relative; white-space: nowrap; }
.mc-lead span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--m-glow), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mc.is-in .mc-lead span::after { transform: scaleX(1); }
.mc-p { margin: 22px 0 0; font-size: 1.08rem; line-height: 1.65; color: var(--m-text); max-width: 56ch; }

/* Les 4 chantiers de la mise en conformité (décoratif) */
.mc-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.mc-chips li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px 10px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.95rem;
  font-weight: 500;
  color: #fff;
  transition: background 0.5s, border-color 0.5s, box-shadow 0.5s, transform 0.5s;
}
.mc-chips svg { width: 18px; height: 18px; stroke: var(--m-lav); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.5s; }
.mc-chips li.is-on {
  background: linear-gradient(135deg, rgba(122, 94, 230, 0.55), rgba(164, 139, 255, 0.35));
  border-color: rgba(207, 198, 242, 0.6);
  box-shadow: 0 0 24px rgba(164, 139, 255, 0.45);
  transform: translateY(-2px);
}
.mc-chips li.is-on svg { stroke: #fff; }

/* Carte de droite */
.mc-card {
  --cx: 50%;
  --cy: 50%;
  position: relative;
  border-radius: 26px;
  padding: 32px 30px 28px;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px rgba(5, 2, 25, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.mc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s;
  background: radial-gradient(320px circle at var(--cx) var(--cy), rgba(164, 139, 255, 0.25), transparent 60%);
}
.mc-card:hover::before { opacity: 1; }
.mc-card h3 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--m-lav); }

/* La chaîne d'expertise */
.mc-chain { position: relative; list-style: none; margin: 20px 0 0; padding: 0 0 0 46px; display: grid; gap: 14px; }
.mc-chain::before { content: ""; position: absolute; left: 15px; top: 14px; bottom: 14px; width: 2px; background: rgba(255, 255, 255, 0.14); border-radius: 2px; }
.mc-run {
  position: absolute;
  left: 11px;
  top: 14px;
  width: 10px;
  height: 28px;
  border-radius: 10px;
  background: linear-gradient(transparent, #fff, transparent);
  filter: drop-shadow(0 0 8px var(--m-glow));
  animation: mc-run 3.2s cubic-bezier(0.5, 0, 0.3, 1) infinite;
}
@keyframes mc-run {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(var(--run, 180px)); opacity: 0; }
}
.mc-chain li.lk { position: relative; font-size: 1.08rem; font-weight: 500; line-height: 1.35; color: #fff; }
.mc-chain li.lk::before {
  content: "";
  position: absolute;
  left: -39px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-radius: 6px;
  transform: rotate(45deg);
  background: #2C1C66;
  border: 2px solid rgba(207, 198, 242, 0.6);
  transition: background 0.5s, border-color 0.5s, box-shadow 0.5s;
}
.mc-chain li.lk.is-on::before { background: var(--m-violet); border-color: #fff; box-shadow: 0 0 16px var(--m-glow); }

.mc-sep { height: 1px; margin: 26px 0 22px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent); }
.mc-refs-p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--m-text); }
.mc-refs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.mc-refs li {
  padding: 7px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.88rem;
  font-weight: 600;
  transition: transform 0.3s, background 0.3s;
}
.mc-refs li:hover { transform: translateY(-3px); background: rgba(164, 139, 255, 0.25); }
.mc-legal {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 22px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.mc-legal .ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(164, 139, 255, 0.2); }
.mc-legal svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mc-legal p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--m-text); }

/* Apparition */
.mc.js .rv { opacity: 0; transform: translateY(22px); }
.mc.js.is-in .rv { opacity: 1; transform: none; transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.mc.js.is-in .rv:nth-child(2) { transition-delay: 0.15s; }

@media (max-width: 960px) {
  .mc { padding: 80px 20px; }
  .mc-inner { grid-template-columns: minmax(0, 1fr); gap: 44px; }
}
@media (max-width: 420px) {
  .mc-lead span { white-space: normal; }
  .mc-card { padding: 26px 20px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .mc *, .mc *::before, .mc *::after { animation: none !important; transition: none !important; }
  .mc.js .rv { opacity: 1; transform: none; }
  .mc-run { display: none; }
}

/* ---------- Page Audit : composant "Questions fréquentes" ----------
   Issu de _figures/faq-composant.html. Ni la section précédente
   (Calendrier, fond blanc) ni la suivante (Pour aller plus loin, fond
   --bg-soft) ne partagent le même fond lavande : aucun filet ajouté.
   .fq lui-même reste en overflow visible (le cadrage des halos est isolé
   sur .fq-bg) : un ancêtre en overflow:hidden casse le position:sticky de
   .fq-side, comme déjà rencontré sur .ac-deliv plus haut. */
.fq {
  --f-ink: #1E1446;
  --f-violet: #4B33A6;
  --f-violet-2: #7A5EE6;
  --f-lav: #ECE8F8;
  --f-text: #544B70;
  --f-line: #E3DDF5;
  --f-display: var(--font-display);
  --f-sans: var(--font-sans);
  --mx: 70%;
  --my: 30%;
  position: relative;
  font-family: var(--f-sans);
  color: var(--f-ink);
  padding: 104px 24px 112px;
  background: linear-gradient(150deg, #F4F0FE 0%, #ECE5FD 55%, #E4DAFB 100%);
}
.fq * { box-sizing: border-box; }
.fq::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(600px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.7), rgba(122, 94, 230, 0.06) 40%, transparent 65%);
}
.fq-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.fq-blob { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.fq-blob.b1 { width: 520px; height: 520px; right: -160px; top: -180px; background: #D4C6FF; opacity: 0.85; animation: fq-drift 20s ease-in-out infinite alternate; }
.fq-blob.b2 { width: 460px; height: 460px; left: -180px; bottom: -220px; background: #DCCFFF; opacity: 0.9; animation: fq-drift 25s ease-in-out infinite alternate-reverse; }
@keyframes fq-drift { to { transform: translate(50px, 40px) scale(1.12); } }
.fq-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 64px; align-items: start; }

/* Colonne gauche */
.fq-side { position: sticky; top: 120px; }
.fq-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.1; margin: 0; }
.fq-title em { font-style: italic; color: var(--f-violet); }
.fq-mark { position: relative; width: 120px; height: 120px; margin: 34px 0 0; }
.fq-mark svg { width: 100%; height: 100%; overflow: visible; }
.fq-mark .hx { fill: url(#fq-g); stroke: #fff; stroke-width: 3; filter: drop-shadow(0 14px 26px rgba(75, 51, 166, 0.35)); }
.fq-mark .q { font-family: var(--f-display); font-size: 58px; fill: #fff; text-anchor: middle; dominant-baseline: central; }
.fq-mark .ring { fill: none; stroke: rgba(122, 94, 230, 0.35); stroke-width: 1.5; stroke-dasharray: 3 8; transform-origin: 60px 60px; animation: fq-spin 30s linear infinite; }
.fq-mark .float { animation: fq-float 5s ease-in-out infinite; transform-origin: center; }
@keyframes fq-spin { to { transform: rotate(360deg); } }
@keyframes fq-float { 50% { transform: translateY(-8px); } }
.fq-cta {
  margin-top: 34px;
  padding: 22px 22px 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px rgba(75, 51, 166, 0.1);
}
.fq-cta p { margin: 0; font-weight: 600; font-size: 1.05rem; }
.fq-cta span { display: block; margin-top: 4px; font-size: 0.92rem; color: var(--f-text); font-weight: 400; }
.fq-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--f-ink);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(30, 20, 70, 0.22);
  transition: transform 0.3s;
}
.fq-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform 0.3s; }
.fq-btn:hover { transform: translateY(-2px); }
.fq-btn:hover svg { transform: translateX(4px); }
.fq-btn:focus-visible { outline: 3px solid var(--f-violet-2); outline-offset: 3px; }

/* Questions */
.fq-list { display: grid; gap: 14px; }
.fq-item {
  --cx: 50%;
  --cy: 50%;
  position: relative;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(75, 51, 166, 0.07);
  isolation: isolate;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s, background 0.4s, border-color 0.4s;
}
.fq-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  background: radial-gradient(340px circle at var(--cx) var(--cy), rgba(122, 94, 230, 0.13), transparent 60%);
}
.fq-item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(var(--f-violet), var(--f-violet-2));
  transform: scaleY(0);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.fq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px 22px 28px;
  cursor: pointer;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--f-ink);
  border-radius: 20px;
}
.fq-item summary::-webkit-details-marker { display: none; }
.fq-item summary:focus-visible { outline: 3px solid var(--f-violet-2); outline-offset: 2px; }
.fq-plus {
  flex: none;
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--f-lav);
  transition: background 0.4s, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s;
}
.fq-plus::before, .fq-plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  border-radius: 2px;
  background: var(--f-violet);
  transition: background 0.4s, transform 0.45s;
}
.fq-plus::after { transform: rotate(90deg); }
.fq-ans { overflow: hidden; }
.fq-ans > div { padding: 0 28px 24px 28px; color: var(--f-text); font-size: 1rem; line-height: 1.65; }
.fq-ans p { margin: 0; }
.fq-ans p + p { margin-top: 10px; }

.fq-item[open] { background: #fff; border-color: #CFC2F5; box-shadow: 0 20px 46px rgba(75, 51, 166, 0.15); }
.fq-item[open]::after { transform: scaleY(1); }
.fq-item[open] .fq-plus { background: linear-gradient(135deg, var(--f-violet), var(--f-violet-2)); box-shadow: 0 8px 18px rgba(75, 51, 166, 0.3); }
.fq-item[open] .fq-plus::before { transform: rotate(45deg); }
.fq-item[open] .fq-plus::after { transform: rotate(135deg); }
.fq-item[open] .fq-plus::before, .fq-item[open] .fq-plus::after { background: #fff; }

@media (hover: hover) {
  .fq-item:hover { transform: translateX(6px) scale(1.01); box-shadow: 0 18px 40px rgba(75, 51, 166, 0.14); }
  .fq-item:hover::before { opacity: 1; }
  .fq-item:not([open]):hover .fq-plus { transform: scale(1.1); }
}

/* Apparition */
.fq.js .rv { opacity: 0; transform: translateY(20px); }
.fq.js .rv.is-in { opacity: 1; transform: none; transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s, background 0.4s; }

@media (max-width: 900px) {
  .fq { padding: 80px 20px; }
  .fq-inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .fq-side { position: static; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; }
  .fq-mark { width: 80px; height: 80px; margin: 0; }
  .fq-cta { display: none; }
  .fq-cta-m { display: block !important; }
}
.fq-cta-m { display: none; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) {
  .fq *, .fq *::before, .fq *::after { animation: none !important; transition: none !important; }
  .fq.js .rv { opacity: 1; transform: none; }
}

/* ---------- Page Ressources : en-tête + grille ----------
   Issu de _figures/ressources-page-composant.html. Thème "regl"
   (Réglementation) ajouté : l'article "AI Act en France : qui contrôle"
   porte ce badge sur le site, distinct de "Gouvernance IA" ; sa couleur
   reprend --indigo-light/--indigo, déjà la charte du site. Sans JavaScript,
   toutes les cartes restent visibles (seul .is-out masque une carte, classe
   ajoutée uniquement par le script de filtrage). */
.rp {
  --r-ink: #1E1446;
  --r-violet: #4B33A6;
  --r-violet-2: #7A5EE6;
  --r-lav: #ECE8F8;
  --r-text: #544B70;
  --r-line: #E3DDF5;
  --r-glow: #A48BFF;
  --r-display: var(--font-display);
  --r-sans: var(--font-sans);
  font-family: var(--r-sans);
  color: var(--r-ink);
}
.rp * { box-sizing: border-box; }

/* --- 1. En-tête : aurore violette + lumière qui suit la souris --- */
.rp-hero {
  --mx: 60%;
  --my: 40%;
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 110px 24px 120px;
  background: linear-gradient(130deg, #1E1446 0%, #2A1B6B 55%, #3A2690 100%);
}
.rp-aur {
  position: absolute;
  inset: -30%;
  pointer-events: none;
  opacity: 0.85;
  filter: blur(60px);
  background:
    radial-gradient(40% 35% at 20% 30%, rgba(122, 94, 230, 0.55), transparent 70%),
    radial-gradient(35% 30% at 80% 20%, rgba(164, 139, 255, 0.38), transparent 70%),
    radial-gradient(45% 40% at 60% 85%, rgba(91, 63, 209, 0.55), transparent 70%);
  animation: rp-aurora 18s ease-in-out infinite alternate;
}
@keyframes rp-aurora {
  50% { transform: translate(4%, -3%) rotate(6deg) scale(1.05); }
  100% { transform: translate(-3%, 4%) rotate(-4deg) scale(1.08); }
}
.rp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(520px circle at var(--mx) var(--my), rgba(190, 170, 255, 0.28), transparent 65%);
}
.rp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0l28 16v32L28 64 0 48V16zM28 64v33' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(420px circle at var(--mx) var(--my), #000, transparent 75%);
  mask-image: radial-gradient(420px circle at var(--mx) var(--my), #000, transparent 75%);
}
.rp-hero-in { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; }
.rp-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px; font-size: 0.9rem; font-weight: 600; color: #CFC6F2; }
.rp-kicker::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--r-glow); }
.rp-title { font-family: var(--r-display); font-weight: 400; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.04; letter-spacing: -0.015em; margin: 0; max-width: 18ch; color: #fff; }
.rp-title em {
  font-style: italic;
  background: linear-gradient(90deg, #CFC6F2, #FFFFFF, #CFC6F2);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rp-shine 6s linear infinite;
}
@keyframes rp-shine { to { background-position: -200% 0; } }
.rp-lead { margin: 24px 0 0; font-size: 1.2rem; line-height: 1.6; color: #E4DEF7; max-width: 58ch; }

/* Filtres par thème */
.rp-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 40px 0 0; padding: 0; list-style: none; }
.rp-f {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-weight: 600;
  font-size: 0.92rem;
  transition: background 0.3s, border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.rp-f i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, #fff); }
.rp-f:hover { background: rgba(255, 255, 255, 0.16); transform: translateY(-2px); }
.rp-f:focus-visible { outline: 3px solid var(--r-glow); outline-offset: 3px; }
.rp-f[aria-pressed="true"] { background: #fff; color: var(--r-ink); border-color: #fff; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25); }
.rp-f b { font-weight: 600; opacity: 0.6; }

/* --- 2. Liste des ressources --- */
.rp-list {
  --mx: 50%;
  --my: 20%;
  position: relative;
  overflow: hidden;
  padding: 72px 24px 110px;
  background: linear-gradient(180deg, #F4F0FE 0%, #ECE5FD 60%, #E6DDFC 100%);
}
.rp-list::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(640px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.7), transparent 65%);
}
.rp-blob { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.rp-blob.b1 { width: 520px; height: 520px; right: -180px; top: 10%; background: #D4C6FF; opacity: 0.8; animation: rp-drift 22s ease-in-out infinite alternate; }
.rp-blob.b2 { width: 480px; height: 480px; left: -180px; bottom: -160px; background: #E2D2FF; opacity: 0.9; animation: rp-drift 26s ease-in-out infinite alternate-reverse; }
@keyframes rp-drift { to { transform: translate(50px, 40px) scale(1.12); } }
.rp-grid { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

.rp-card {
  --cx: 50%;
  --cy: 50%;
  --c: #7A5EE6;
  --c2: #4B33A6;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 12px 34px rgba(75, 51, 166, 0.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s, opacity 0.4s;
}
.rp-card[data-t="video"] { --c: #5B3FD1; --c2: #1E1446; }
.rp-card[data-t="aiact"] { --c: #7A5EE6; --c2: #3A2690; }
.rp-card[data-t="conf"] { --c: #4B33A6; --c2: #2C1C66; }
.rp-card[data-t="gouv"] { --c: #9C85FF; --c2: #4B33A6; }
.rp-card[data-t="regl"] { --c: #4C34A8; --c2: #2E1A6B; }
/* Bordure lumineuse qui suit la souris */
.rp-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
  background: radial-gradient(260px circle at var(--cx) var(--cy), var(--c), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.rp-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  background: radial-gradient(320px circle at var(--cx) var(--cy), color-mix(in srgb, var(--c) 16%, transparent), transparent 60%);
}

/* Bandeau coloré du thème */
.rp-top {
  position: relative;
  height: 130px;
  border-radius: 23px 23px 0 0;
  overflow: hidden;
  background: radial-gradient(circle at 25% 20%, color-mix(in srgb, var(--c) 85%, #fff), transparent 60%), linear-gradient(135deg, var(--c), var(--c2));
}
.rp-top svg { position: absolute; right: -10px; top: -6px; width: 170px; height: 150px; opacity: 0.35; transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.rp-top .hx { fill: none; stroke: #fff; stroke-width: 1.4; }
.rp-top .ico {
  position: absolute;
  left: 24px;
  bottom: 20px;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.rp-top .ico svg { position: static; width: 22px; height: 22px; opacity: 1; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rp-top .ico svg.fill { fill: #fff; stroke: none; }

.rp-body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 22px; }
.rp-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--c2);
  background: color-mix(in srgb, var(--c) 14%, #fff);
}
.rp-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.rp-card h2, .rp-card h3 { font-family: var(--r-display); font-weight: 500; font-size: 1.3rem; line-height: 1.22; margin: 14px 0 0; }
.rp-card a.rp-link { color: inherit; text-decoration: none; }
.rp-card a.rp-link::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 24px; }
.rp-card:focus-within { outline: 3px solid var(--r-violet-2); outline-offset: 3px; }
.rp-card a.rp-link:focus { outline: none; }
.rp-card p { margin: 10px 0 0; font-size: 0.96rem; line-height: 1.6; color: var(--r-text); }
.rp-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: auto; padding-top: 20px; font-size: 0.85rem; color: #7A7294; }
.rp-go { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-weight: 600; font-size: 0.95rem; color: var(--c2); }
.rp-go svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform 0.3s; }

/* Carte vidéo à la une : sur 2 colonnes */
.rp-card.is-feat { grid-column: span 2; flex-direction: row; }
.rp-card.is-feat .rp-top { height: auto; flex: 1.1; border-radius: 23px 0 0 23px; min-height: 300px; }
.rp-card.is-feat .rp-body { flex: 1; padding: 30px 30px 26px; }
.rp-card.is-feat h2 { font-size: 1.75rem; }
.rp-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78px;
  height: 78px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.rp-play::before, .rp-play::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.75);
  animation: rp-ring 2.6s ease-out infinite;
}
.rp-play::after { animation-delay: 1.3s; }
@keyframes rp-ring { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.9); opacity: 0; } }
.rp-play svg { position: static !important; width: 26px !important; height: 26px !important; opacity: 1 !important; fill: var(--c2); margin-left: 4px; }
.rp-feat-t { position: absolute; left: 28px; bottom: 24px; right: 28px; font-family: var(--r-display); font-size: 1.6rem; line-height: 1.1; color: #fff; }
.rp-feat-t em { font-style: italic; color: #CFC6F2; }

@media (hover: hover) {
  .rp-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 30px 60px color-mix(in srgb, var(--c2) 22%, transparent); }
  .rp-card:hover::before, .rp-card:hover::after { opacity: 1; }
  .rp-card:hover .rp-top svg { transform: rotate(20deg) scale(1.15); }
  .rp-card:hover .rp-go svg { transform: translateX(5px); }
  .rp-card.is-feat:hover .rp-play { transform: translate(-50%, -50%) scale(1.12); }
}

/* Filtrage */
.rp-card.is-out { display: none; }
.rp-card.is-pop { animation: rp-pop 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes rp-pop { from { opacity: 0; transform: translateY(16px) scale(0.97); } }
.rp-empty { display: none; grid-column: 1 / -1; text-align: center; color: var(--r-text); }

/* Apparition */
.rp.js .rv { opacity: 0; transform: translateY(24px); }
.rp.js .rv.is-in { opacity: 1; transform: none; transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s; }

@media (max-width: 980px) {
  .rp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .rp-hero { padding: 80px 20px 88px; }
  .rp-list { padding: 56px 20px 80px; }
  .rp-grid { grid-template-columns: minmax(0, 1fr); }
  .rp-card.is-feat { grid-column: auto; flex-direction: column; }
  .rp-card.is-feat .rp-top { min-height: 220px; border-radius: 23px 23px 0 0; }
  .rp-card.is-feat h2 { font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rp *, .rp *::before, .rp *::after { animation: none !important; transition: none !important; }
  .rp.js .rv { opacity: 1; transform: none; }
}

/* Évite que l'en-tête collant (~82px) ne cache le haut de la cible visée
   lors d'un défilement vers une ancre : #contact-form reste utilisé par les
   liens "Nous contacter" du site, #formulaire par le bouton "Accéder au
   formulaire" de l'en-tête Contact (id du composant .cf, sur la section qui
   enveloppe la carte coordonnées + le formulaire). */
#contact-form, #formulaire { scroll-margin-top: 100px; }

/* ---------- Page Contact : en-tête ----------
   Issu de _figures/contact-hero-composant.html. Le reste de la page
   (illustration, coordonnées, formulaire) n'est pas concerné. color explicite
   sur .ct-title : la règle globale h1,h2,h3,h4{color:var(--indigo)} écraserait
   sinon la teinte du composant (pas un bug de lisibilité ici, fond clair des
   deux côtés, mais united avec la teinte exacte voulue). */
.ct {
  --c-ink: #1E1446;
  --c-violet: #4B33A6;
  --c-violet-2: #7A5EE6;
  --c-lav: #ECE8F8;
  --c-text: #544B70;
  --c-line: #E3DDF5;
  --c-display: var(--font-display);
  --c-sans: var(--font-sans);
  --mx: 60%;
  --my: 40%;
  position: relative;
  overflow: hidden;
  font-family: var(--c-sans);
  color: var(--c-ink);
  padding: 96px 24px 104px;
  background: linear-gradient(150deg, #F7F4FE 0%, #EEE8FD 55%, #E6DDFC 100%);
}
.ct * { box-sizing: border-box; }
.ct::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(560px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.75), rgba(122, 94, 230, 0.07) 40%, transparent 65%);
}
.ct-blob { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.ct-blob.b1 { width: 540px; height: 540px; right: -160px; top: -200px; background: #D4C6FF; opacity: 0.85; animation: ct-drift 20s ease-in-out infinite alternate; }
.ct-blob.b2 { width: 460px; height: 460px; left: -200px; bottom: -240px; background: #DCCFFF; opacity: 0.9; animation: ct-drift 25s ease-in-out infinite alternate-reverse; }
.ct-blob.b3 { width: 320px; height: 320px; left: 38%; top: 20%; background: #F1E8FF; opacity: 0.8; animation: ct-drift 28s ease-in-out infinite alternate; }
@keyframes ct-drift { to { transform: translate(50px, 40px) scale(1.12); } }

.ct-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.ct-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--c-line);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-violet);
}
.ct-kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-violet-2);
  box-shadow: 0 0 0 0 rgba(122, 94, 230, 0.5);
  animation: ct-ping 2s ease-out infinite;
}
@keyframes ct-ping { to { box-shadow: 0 0 0 9px rgba(122, 94, 230, 0); } }
.ct-title { font-family: var(--c-display); font-weight: 400; font-size: clamp(2.4rem, 4.8vw, 3.9rem); line-height: 1.05; letter-spacing: -0.015em; margin: 0; color: var(--c-ink); }
.ct-title em { font-style: italic; color: var(--c-violet); }
.ct-lead { margin: 24px 0 0; font-size: 1.2rem; line-height: 1.6; color: var(--c-text); max-width: 46ch; }

.ct-points { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 12px; }
.ct-points li { display: flex; align-items: center; gap: 12px; font-weight: 500; color: var(--c-ink); }
.ct-points .ic {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--c-violet), var(--c-violet-2));
  box-shadow: 0 8px 18px rgba(75, 51, 166, 0.25);
}
.ct-points svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.ct-go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 34px;
  padding: 16px 28px;
  border-radius: 999px;
  background: var(--c-ink);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 14px 30px rgba(30, 20, 70, 0.25);
  transition: transform 0.3s, box-shadow 0.3s;
}
.ct-go svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; animation: ct-bob 1.8s ease-in-out infinite; }
@keyframes ct-bob { 50% { transform: translateY(4px); } }
.ct-go:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(30, 20, 70, 0.3); }
.ct-go:focus-visible { outline: 3px solid var(--c-violet-2); outline-offset: 3px; }

/* Visuel : un échange qui s'écrit (décoratif) */
.ct-chat {
  --cx: 50%;
  --cy: 50%;
  position: relative;
  border-radius: 28px;
  padding: 28px 26px 26px;
  isolation: isolate;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px rgba(75, 51, 166, 0.16);
}
.ct-chat::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s;
  background: radial-gradient(300px circle at var(--cx) var(--cy), rgba(122, 94, 230, 0.16), transparent 60%);
}
.ct-chat:hover::before { opacity: 1; }
.ct-chat-top { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--c-line); }
.ct-av { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--c-ink); }
.ct-av svg { width: 22px; height: 22px; }
.ct-chat-top b { display: block; font-size: 0.98rem; }
.ct-chat-top div span { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--c-text); }
.ct-chat-top div span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #7A5EE6; }
.ct-msgs { display: grid; gap: 12px; min-height: 250px; align-content: start; }
.ct-m {
  margin: 0;
  max-width: 88%;
  padding: 14px 16px;
  border-radius: 18px;
  font-size: 0.96rem;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.5s, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ct-m.is-on { opacity: 1; transform: none; }
.ct-m.you { justify-self: end; background: #fff; border: 1px solid var(--c-line); border-bottom-right-radius: 6px; color: var(--c-ink); }
.ct-m.us {
  justify-self: start;
  background: linear-gradient(135deg, var(--c-violet), var(--c-violet-2));
  color: #fff;
  border-bottom-left-radius: 6px;
  box-shadow: 0 10px 24px rgba(75, 51, 166, 0.25);
}
.ct-typing { justify-self: start; display: none; gap: 5px; padding: 14px 16px; border-radius: 18px; border-bottom-left-radius: 6px; background: var(--c-lav); }
.ct-typing.is-on { display: inline-flex; }
.ct-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-violet-2); animation: ct-dot 1.2s ease-in-out infinite; }
.ct-typing i:nth-child(2) { animation-delay: 0.15s; }
.ct-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ct-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-5px); opacity: 1; }
}
.ct-ex { position: absolute; right: 20px; top: 24px; font-size: 0.75rem; font-weight: 600; color: var(--c-violet-2); }

/* Apparition */
.ct.js .rv { opacity: 0; transform: translateY(18px); }
.ct.js.is-in .rv { opacity: 1; transform: none; transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.ct.js.is-in .rv:nth-child(2) { transition-delay: 0.15s; }

@media (max-width: 900px) {
  .ct { padding: 72px 20px 80px; }
  .ct-inner { grid-template-columns: minmax(0, 1fr); gap: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .ct *, .ct *::before, .ct *::after { animation: none !important; transition: none !important; }
  .ct.js .rv { opacity: 1; transform: none; }
  .ct-m { opacity: 1; transform: none; }
}

/* ---------- Page Contact : coordonnées + formulaire ----------
   Issu de _figures/contact-formulaire-composant.html. --c-photo pointe vers
   la photo déjà utilisée sur cette section (assets/img/illustration-contact.png),
   pas l'image de capture de l'aperçu. .contact-form et .form-status sont
   conservés comme attributs sur le formulaire pour que la logique d'envoi
   existante (assets/js/script.js) continue de fonctionner sans y toucher. */
.cf {
  --c-ink: #1E1446;
  --c-violet: #4B33A6;
  --c-violet-2: #7A5EE6;
  --c-lav: #ECE8F8;
  --c-text: #544B70;
  --c-line: #E3DDF5;
  --c-display: var(--font-display);
  --c-sans: var(--font-sans);
  --c-photo: url("../img/illustration-contact.png");
  --mx: 50%;
  --my: 40%;
  position: relative;
  overflow: hidden;
  font-family: var(--c-sans);
  color: var(--c-ink);
  padding: 20px 24px 96px;
  isolation: isolate;
}
.cf * { box-sizing: border-box; }
.cf-photo { position: absolute; inset: 0; z-index: -3; background: var(--c-photo) center top / cover no-repeat; }
.cf-veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(244, 240, 254, 0.55), rgba(236, 229, 253, 0.72) 60%, rgba(228, 218, 251, 0.85));
  -webkit-mask-image: radial-gradient(420px circle at var(--mx) var(--my), rgba(0, 0, 0, 0.25), #000 70%);
  mask-image: radial-gradient(420px circle at var(--mx) var(--my), rgba(0, 0, 0, 0.25), #000 70%);
}
.cf-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(520px circle at var(--mx) var(--my), rgba(164, 139, 255, 0.18), transparent 65%);
}

.cf-inner { max-width: 1390px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr); gap: 62px; align-items: start; }

/* Cartes en verre */
.cf-card {
  --cx: 50%;
  --cy: 50%;
  position: relative;
  border-radius: 26px;
  isolation: isolate;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 30px 70px rgba(75, 51, 166, 0.18);
}
.cf-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  background: radial-gradient(340px circle at var(--cx) var(--cy), rgba(122, 94, 230, 0.12), transparent 60%);
}
.cf-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
  background: radial-gradient(260px circle at var(--cx) var(--cy), #7A5EE6, transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.cf-card:hover::before, .cf-card:hover::after { opacity: 1; }

/* Carte coordonnées */
.cf-info { padding: 34px 34px 30px; overflow: hidden; }
.cf-info::selection { background: var(--c-lav); }
.cf-logo { position: relative; width: 96px; height: 96px; }
.cf-logo .ring { position: absolute; inset: -8px; border-radius: 50%; border: 1.5px dashed rgba(122, 94, 230, 0.4); animation: cf-spin 24s linear infinite; }
@keyframes cf-spin { to { transform: rotate(360deg); } }
.cf-logo .disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, #fff, #E7E1F8);
  box-shadow: 0 12px 26px rgba(75, 51, 166, 0.22);
}
.cf-logo .disc img { width: 62%; height: 62%; object-fit: contain; display: block; }
.cf-hello { margin: 26px 0 0; font-family: var(--c-display); font-size: 1.7rem; line-height: 1.2; }
.cf-hello em { font-style: italic; color: var(--c-violet); }
.cf-rows { display: grid; gap: 12px; margin-top: 24px; }
.cf-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--c-line);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s, border-color 0.35s;
}
.cf-row:hover { transform: translateX(4px); border-color: #CFC2F5; box-shadow: 0 12px 28px rgba(75, 51, 166, 0.12); }
.cf-row .ic {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--c-violet), var(--c-violet-2));
  box-shadow: 0 8px 18px rgba(75, 51, 166, 0.28);
}
.cf-row .ic svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cf-row small { display: block; font-size: 0.78rem; font-weight: 600; color: #7A7294; }
.cf-row a, .cf-row b { display: block; margin-top: 2px; font-weight: 600; font-size: 1.02rem; color: var(--c-ink); text-decoration: none; word-break: break-word; }
.cf-row a:hover { color: var(--c-violet); }
.cf-copy {
  all: unset;
  margin-left: auto;
  flex: none;
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: var(--c-lav);
  transition: background 0.3s;
}
.cf-copy:hover { background: #DCD3F7; }
.cf-copy:focus-visible { outline: 3px solid var(--c-violet-2); outline-offset: 2px; }
.cf-copy svg { width: 18px; height: 18px; stroke: var(--c-violet); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cf-copy .ok { display: none; }
.cf-copy.is-done .ok { display: block; }
.cf-copy.is-done .cp { display: none; }
.cf-toast {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--c-ink);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}
.cf-copy.is-done .cf-toast { opacity: 1; transform: none; }
/* Réseau d'hexagones animé, en filigrane */
.cf-net { position: absolute; right: -30px; top: -20px; width: 260px; opacity: 0.55; pointer-events: none; }
.cf-net path { fill: none; stroke: #B9A9F2; stroke-width: 1.2; stroke-dasharray: 4 6; animation: cf-dash 2.4s linear infinite; }
.cf-net polygon { fill: none; stroke: #B9A9F2; stroke-width: 1.4; }
.cf-net circle { fill: var(--c-violet-2); animation: cf-blink 3s ease-in-out infinite; }
.cf-net circle:nth-of-type(2) { animation-delay: 1s; }
.cf-net circle:nth-of-type(3) { animation-delay: 2s; }
@keyframes cf-dash { to { stroke-dashoffset: -20; } }
@keyframes cf-blink { 50% { opacity: 0.25; } }

/* Formulaire */
.cf-form { padding: 38px 40px 36px; }
.cf-form h2 { margin: 0; font-family: var(--c-display); font-weight: 400; font-size: 1.6rem; color: var(--c-ink); }
.cf-form h2 + p { margin: 6px 0 26px; color: var(--c-text); font-size: 0.95rem; }
.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cf-f { position: relative; }
.cf-f.full { grid-column: 1 / -1; }
.cf-f input, .cf-f textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--c-ink);
  padding: 26px 16px 10px;
  border-radius: 16px;
  background: rgba(246, 244, 252, 0.9);
  border: 1.5px solid var(--c-line);
  outline: none;
  resize: vertical;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.cf-f textarea { min-height: 150px; }
.cf-f label {
  position: absolute;
  left: 17px;
  top: 18px;
  font-size: 1rem;
  color: #7A7294;
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.25s;
}
.cf-f label i { font-style: normal; color: var(--c-violet-2); }
.cf-f input:focus, .cf-f textarea:focus { background: #fff; border-color: var(--c-violet-2); box-shadow: 0 0 0 5px rgba(122, 94, 230, 0.14), 0 12px 26px rgba(75, 51, 166, 0.1); }
.cf-f input:focus + label, .cf-f input:not(:placeholder-shown) + label,
.cf-f textarea:focus + label, .cf-f textarea:not(:placeholder-shown) + label { transform: translateY(-10px) scale(0.78); color: var(--c-violet); font-weight: 600; }
.cf-f .ok {
  position: absolute;
  right: 14px;
  top: 18px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--c-violet-2);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.3s, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1.4);
}
.cf-f .ok svg { width: 12px; height: 12px; stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cf-f.is-valid .ok { opacity: 1; transform: none; }
.cf-hint { display: flex; justify-content: space-between; margin-top: 6px; font-size: 0.82rem; color: #7A7294; }
.cf-note { margin: 18px 0 0; font-size: 0.85rem; color: #7A7294; }

/* Case à cocher */
.cf-consent { display: flex; gap: 14px; align-items: flex-start; margin-top: 14px; cursor: pointer; color: var(--c-text); font-size: 0.95rem; line-height: 1.5; }
.cf-consent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cf-box {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 8px;
  border: 1.5px solid #C9BCF3;
  background: #fff;
  display: grid;
  place-items: center;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.cf-box svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset 0.35s 0.05s; }
.cf-consent input:checked + .cf-box { background: linear-gradient(135deg, var(--c-violet), var(--c-violet-2)); border-color: transparent; }
.cf-consent input:checked + .cf-box svg { stroke-dashoffset: 0; }
.cf-consent input:focus-visible + .cf-box { box-shadow: 0 0 0 4px rgba(122, 94, 230, 0.3); }

/* Bouton */
.cf-send {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 17px 34px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 1.05rem;
  color: #fff;
  background: var(--c-ink);
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(30, 20, 70, 0.25);
  transition: transform 0.3s, box-shadow 0.3s, background 0.4s;
}
.cf-send::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  animation: cf-shine 4s ease-in-out infinite;
}
@keyframes cf-shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.cf-send svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.35s; }
.cf-send:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(30, 20, 70, 0.3); }
.cf-send:hover svg { transform: translate(4px, -4px); }
.cf-send:focus-visible { outline: 3px solid var(--c-violet-2); outline-offset: 3px; }
.cf-send.is-busy { pointer-events: none; background: var(--c-violet); }
.cf-send.is-busy svg { animation: cf-fly 0.9s ease-in-out infinite; }
@keyframes cf-fly { 50% { transform: translate(6px, -6px); opacity: 0.3; } }
.cf-send.is-sent { background: linear-gradient(135deg, var(--c-violet), var(--c-violet-2)); }

@media (max-width: 980px) {
  .cf { padding: 20px 20px 72px; }
  .cf-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 560px) {
  .cf-grid { grid-template-columns: 1fr; }
  .cf-form { padding: 28px 22px; }
  .cf-info { padding: 28px 22px; }
  .cf-send { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cf *, .cf *::before, .cf *::after { animation: none !important; transition: none !important; }
}

/* ---------- Page Offre : piliers ----------
   Issu de _figures/offre-pilier-composant.html. Une seule section porte le
   dégradé SVG #pl-g (Pilier 1) : .pl-hex polygon le référence par id depuis
   n'importe quelle section de la page. Pilier 1 et Pilier 2 ont exactement
   la même mise en page (texte/photo à gauche, étapes à droite) ; .pl-2 ne
   sert qu'au filet de séparation, même fond que Pilier 1 et directement
   adjacente. */
.pl {
  --p-ink: #1E1446;
  --p-violet: #4B33A6;
  --p-violet-2: #7A5EE6;
  --p-lav: #ECE8F8;
  --p-text: #544B70;
  --p-line: #E3DDF5;
  --p-display: var(--font-display);
  --p-sans: var(--font-sans);
  --mx: 30%;
  --my: 40%;
  position: relative;
  overflow: hidden;
  font-family: var(--p-sans);
  color: var(--p-ink);
  padding: 96px 24px 104px;
  background: linear-gradient(150deg, #F7F4FE 0%, #EEE8FD 55%, #E6DDFC 100%);
}
.pl-2 { border-top: 1px solid var(--p-line); }
.pl * { box-sizing: border-box; }
.pl::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(600px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.75), rgba(122, 94, 230, 0.06) 40%, transparent 65%);
}
.pl-blob { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.pl-blob.b1 { width: 520px; height: 520px; right: -180px; top: -140px; background: #D4C6FF; opacity: 0.85; animation: pl-drift 20s ease-in-out infinite alternate; }
.pl-blob.b2 { width: 460px; height: 460px; left: -200px; bottom: -220px; background: #DCCFFF; opacity: 0.9; animation: pl-drift 25s ease-in-out infinite alternate-reverse; }
@keyframes pl-drift { to { transform: translate(50px, 40px) scale(1.12); } }
.pl-in { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }

.pl-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--p-line);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--p-violet);
}
.pl-tag b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--p-violet); color: #fff; font-size: 0.72rem; }
.pl-title { font-family: var(--p-display); font-weight: 400; font-size: clamp(2.1rem, 3.8vw, 3.1rem); line-height: 1.08; letter-spacing: -0.01em; margin: 0; color: var(--p-ink); }
.pl-lead { margin: 20px 0 0; font-size: 1.1rem; line-height: 1.65; color: var(--p-text); max-width: 54ch; }
.pl-lead a {
  color: var(--p-violet);
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(var(--p-violet-2), var(--p-violet-2)) left bottom / 0 2px no-repeat;
  transition: background-size 0.4s;
}
.pl-lead a:hover { background-size: 100% 2px; }

/* Photo : relief 3D + reflet qui suit la souris */
.pl-photo-wrap { perspective: 1100px; margin-top: 34px; }
.pl-photo {
  --rx: 0deg;
  --ry: 0deg;
  --gx: 50%;
  --gy: 50%;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.5s;
  box-shadow: 0 30px 60px rgba(30, 20, 70, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.pl-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.pl-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
  mix-blend-mode: screen;
  background: radial-gradient(360px circle at var(--gx) var(--gy), rgba(255, 236, 190, 0.35), rgba(164, 139, 255, 0.15) 40%, transparent 65%);
}
.pl-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(30, 20, 70, 0.55));
}
.pl-photo:hover::before { opacity: 1; }
.pl-photo:hover img { transform: scale(1.08); }
.pl-badge {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  transform: translateZ(40px);
}
.pl-badge i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; }
.pl-badge svg { width: 16px; height: 16px; stroke: var(--p-violet); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pl-more { margin: 22px 0 0; font-style: italic; color: var(--p-text); }
.pl-more a { color: var(--p-violet); font-weight: 600; }

/* Étapes */
.pl-steps { position: relative; list-style: none; margin: 0; padding: 0 0 0 66px; display: grid; gap: 18px; }
.pl-rail { position: absolute; left: 23px; top: 30px; bottom: 30px; width: 2px; background: rgba(122, 94, 230, 0.18); border-radius: 2px; }
.pl-rail i {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(var(--fill, 0) * 100%);
  border-radius: 2px;
  background: linear-gradient(var(--p-violet), var(--p-violet-2));
  box-shadow: 0 0 12px rgba(122, 94, 230, 0.6);
  transition: height 0.25s linear;
}
.pl-st {
  --cx: 50%;
  --cy: 50%;
  position: relative;
  padding: 22px 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(75, 51, 166, 0.08);
  isolation: isolate;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s, background 0.4s, border-color 0.4s;
}
.pl-st::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s;
  background: radial-gradient(300px circle at var(--cx) var(--cy), rgba(122, 94, 230, 0.14), transparent 60%);
}
.pl-hex {
  position: absolute;
  left: -66px;
  top: 50%;
  width: 48px;
  height: 54px;
  margin-top: -27px;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--p-violet);
  transition: color 0.5s, transform 0.5s;
}
.pl-hex svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pl-hex polygon { fill: #fff; stroke: #CFC2F5; stroke-width: 2; transition: fill 0.5s, stroke 0.5s; }
.pl-hex span { position: relative; }
.pl-st.is-on .pl-hex { color: #fff; }
.pl-st.is-on .pl-hex polygon { fill: url(#pl-g); stroke: #fff; filter: drop-shadow(0 6px 12px rgba(75, 51, 166, 0.35)); }
.pl-st h3 { margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--p-ink); }
.pl-st p { margin: 8px 0 0; color: var(--p-text); line-height: 1.6; }
@media (hover: hover) {
  .pl-st:hover { transform: translateX(6px) scale(1.02); background: #fff; border-color: #CFC2F5; box-shadow: 0 20px 44px rgba(75, 51, 166, 0.16); }
  .pl-st:hover::before { opacity: 1; }
  .pl-st:hover .pl-hex { transform: rotate(30deg); }
  .pl-st:hover .pl-hex span { display: inline-block; transform: rotate(-30deg); }
}

/* Apparition */
.pl.js .rv { opacity: 0; transform: translateY(22px); }
.pl.js .rv.is-in { opacity: 1; transform: none; transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s, background 0.4s; }

@media (max-width: 960px) {
  .pl { padding: 72px 20px 80px; }
  .pl-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 520px) {
  .pl-steps { padding-left: 56px; }
  .pl-hex { left: -56px; width: 40px; height: 46px; margin-top: -23px; }
  .pl-rail { left: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .pl *, .pl *::before, .pl *::after { animation: none !important; transition: none !important; }
  .pl.js .rv { opacity: 1; transform: none; }
}

/* ---------- Page Offre : "Services à forte valeur ajoutée" ----------
   Issu de _figures/offre-services-composant.html. border-top : filet de
   séparation avec le Pilier 2 (.pl-2) qui précède, même fond lavande,
   directement adjacent. Pas de filet avec Tarifs qui suit (.section-subtle-
   gradient utilise un dégradé différent). Les repères de la boussole
   (Priorités/Risque/Rythme/Moyens) sont légèrement reculés par rapport à
   l'aperçu pour ne jamais être traversés par l'aiguille à 90°/270°. */
.sv {
  --s-ink: #1E1446;
  --s-violet: #4B33A6;
  --s-violet-2: #7A5EE6;
  --s-lav: #ECE8F8;
  --s-text: #544B70;
  --s-line: #E3DDF5;
  --s-glow: #A48BFF;
  --s-display: var(--font-display);
  --s-sans: var(--font-sans);
  --mx: 50%;
  --my: 20%;
  position: relative;
  overflow: hidden;
  font-family: var(--s-sans);
  color: var(--s-ink);
  padding: 96px 24px 104px;
  background: linear-gradient(150deg, #F7F4FE 0%, #EEE8FD 55%, #E6DDFC 100%);
  border-top: 1px solid var(--s-line);
}
.sv * { box-sizing: border-box; }
.sv::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(620px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.75), rgba(122, 94, 230, 0.06) 40%, transparent 65%);
}
.sv-blob { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.sv-blob.b1 { width: 520px; height: 520px; right: -180px; top: -160px; background: #D4C6FF; opacity: 0.85; animation: sv-drift 20s ease-in-out infinite alternate; }
.sv-blob.b2 { width: 460px; height: 460px; left: -200px; bottom: -220px; background: #DCCFFF; opacity: 0.9; animation: sv-drift 25s ease-in-out infinite alternate-reverse; }
@keyframes sv-drift { to { transform: translate(50px, 40px) scale(1.12); } }
.sv-in { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; }

.sv-head { text-align: center; max-width: 720px; margin: 0 auto 52px; }
.sv-kicker { display: inline-block; margin: 0 0 16px; padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--s-line); font-size: 0.85rem; font-weight: 600; color: var(--s-violet); }
.sv-title { font-family: var(--s-display); font-weight: 400; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; margin: 0; color: var(--s-ink); }
.sv-title em { font-style: italic; color: var(--s-violet); }
.sv-lead { margin: 18px auto 0; font-size: 1.1rem; line-height: 1.6; color: var(--s-text); }

.sv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: stretch; }
.sv-card {
  --rx: 0deg;
  --ry: 0deg;
  --cx: 50%;
  --cy: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 50px rgba(75, 51, 166, 0.12);
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.5s;
}
.sv-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
  background: radial-gradient(280px circle at var(--cx) var(--cy), var(--s-violet-2), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.sv-card:hover { box-shadow: 0 34px 70px rgba(75, 51, 166, 0.2); }
.sv-card:hover::before { opacity: 1; }

/* Visuel en tête de carte (décoratif) */
.sv-vis {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: radial-gradient(circle at 25% 15%, #8B6EFF, transparent 55%), linear-gradient(140deg, #4B33A6, #2C1C66);
}
.sv-vis::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(260px circle at var(--cx) var(--cy), rgba(255, 255, 255, 0.22), transparent 60%);
}
.sv-badge {
  position: absolute;
  left: 24px;
  top: 22px;
  z-index: 1;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Formation : trois niveaux empilés qui s'allument */
.sv-levels { position: absolute; right: 28px; bottom: 26px; left: 150px; display: grid; gap: 9px; justify-items: end; }
.sv-lv {
  height: 34px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: background 0.5s, box-shadow 0.5s, transform 0.5s;
}
.sv-lv:nth-child(1) { width: 52%; }
.sv-lv:nth-child(2) { width: 76%; }
.sv-lv:nth-child(3) { width: 100%; }
.sv-lv i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); transition: background 0.5s, box-shadow 0.5s; }
.sv-lv.is-on { background: rgba(255, 255, 255, 0.28); box-shadow: 0 0 26px rgba(164, 139, 255, 0.7); transform: translateX(-6px); }
.sv-lv.is-on i { background: #fff; box-shadow: 0 0 10px #fff; }

/* Advisory : boussole dont l'aiguille pivote */
.sv-comp { position: absolute; right: 34px; bottom: 18px; width: 160px; height: 160px; }
.sv-comp svg { width: 100%; height: 100%; overflow: visible; }
.sv-comp .ring { fill: none; stroke: rgba(255, 255, 255, 0.35); stroke-width: 1.5; }
.sv-comp .ring2 { fill: none; stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; stroke-dasharray: 3 6; transform-origin: 80px 80px; animation: sv-spin 30s linear infinite; }
.sv-comp .tick { stroke: rgba(255, 255, 255, 0.6); stroke-width: 2; stroke-linecap: round; }
.sv-comp .needle { transform-origin: 80px 80px; transition: transform 1.1s cubic-bezier(0.3, 1.4, 0.4, 1); }
.sv-comp .n1 { fill: #fff; }
.sv-comp .n2 { fill: rgba(255, 255, 255, 0.35); }
.sv-comp .hub { fill: #fff; filter: drop-shadow(0 0 8px #A48BFF); }
/* text-anchor n'est pas fixé ici : une règle CSS sur cette propriété
   écraserait l'attribut text-anchor de chaque <text> (end/start/middle
   selon sa position autour du cadran), qui doit rester la seule source. */
.sv-comp text { fill: rgba(255, 255, 255, 0.85); font-size: 11px; font-weight: 600; dominant-baseline: central; font-family: var(--s-sans); }
@keyframes sv-spin { to { transform: rotate(360deg); } }

/* Corps */
.sv-body { display: flex; flex-direction: column; flex: 1; padding: 28px 30px 30px; }
.sv-card h3 { margin: 0; font-family: var(--s-display); font-weight: 500; font-size: 1.6rem; line-height: 1.2; color: var(--s-ink); }
.sv-card .intro { margin: 12px 0 0; color: var(--s-text); line-height: 1.6; }
.sv-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.sv-li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid transparent;
  transition: background 0.4s, border-color 0.4s, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sv-li .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--s-lav); color: var(--s-violet); transition: background 0.4s, color 0.4s, box-shadow 0.4s; }
.sv-li .ic svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sv-li b { display: block; font-weight: 600; color: var(--s-ink); }
.sv-li span { display: block; margin-top: 3px; font-size: 0.95rem; line-height: 1.5; color: var(--s-text); }
.sv-li.is-on { background: #fff; border-color: #CFC2F5; transform: translateX(4px); }
.sv-li.is-on .ic { background: linear-gradient(135deg, var(--s-violet), var(--s-violet-2)); color: #fff; box-shadow: 0 8px 18px rgba(75, 51, 166, 0.28); }

.sv-cta { display: flex; justify-content: center; margin-top: 44px; }
.sv-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 999px;
  background: var(--s-ink);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 14px 30px rgba(30, 20, 70, 0.25);
  transition: transform 0.3s;
}
.sv-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform 0.3s; }
.sv-btn:hover { transform: translateY(-2px); }
.sv-btn:hover svg { transform: translateX(4px); }
.sv-btn:focus-visible { outline: 3px solid var(--s-violet-2); outline-offset: 3px; }

/* Apparition */
.sv.js .rv { opacity: 0; transform: translateY(22px); }
.sv.js .rv.is-in { opacity: 1; transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.5s; }

@media (max-width: 900px) {
  .sv { padding: 72px 20px 80px; }
  .sv-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .sv-levels { left: 24px; bottom: 20px; }
  .sv-vis { height: 210px; }
  .sv-comp { width: 130px; height: 130px; right: 20px; }
  .sv-body { padding: 24px 20px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .sv *, .sv *::before, .sv *::after { animation: none !important; transition: none !important; }
  .sv.js .rv { opacity: 1; transform: none; }
}