/* ======================================================
   Iliade Digital — Page Audit Gratuit (TOKENS + HERO SIGNATURE FX)
   Fichier: /assets/css/page-audit-gratuit.css
   Objectifs:
   - Landing premium conversion
   - Animations premium (fond + blobs + "radar scan" dans le hero)
   - Container 1200 + gouttières (JAMAIS collé aux bords)
   - 100% branché sur variables.css (tokens Iliade)
   - Dashicons : TOUTES vertes + pastille/padding premium
   ====================================================== */

/* ======================================================
   0) Scope + garde-fous anti-thème (wrappers full-bleed)
   ====================================================== */
.il-audit{
  /* Token map (variables.css Iliade) */
  --brand: var(--brand-green, #17A051);

  --bg:    var(--bg, #ffffff);
  --bg2:   var(--surface-2, #F7F8FA);
  --text:  var(--text, #111827);
  --muted: var(--muted, #666672);
  --line:  var(--line, #E6E8EE);

  --radius:    var(--r-16, 16px);
  --radius-lg: var(--r-20, 20px);
  --radius-sm: var(--r-12, 12px);

  --shadow:  var(--shadow-sm, 0 10px 24px rgba(16, 19, 35, .08));
  --shadow2: var(--shadow-lg, 0 24px 60px rgba(16, 19, 35, .16));

  --container: var(--container, 1200px);
  --gutter:    var(--gutter, clamp(14px, 2.4vw, 24px));
  --gap:       clamp(16px, 2.2vw, 24px);

  --ease: var(--ease, cubic-bezier(.2,.8,.2,1));
  --t-fast: var(--t-fast, .15s);
  --t-med:  var(--t-med, .25s);

  --focus: var(--focus, 0 0 0 3px rgba(23,160,81,.25));

  color: var(--text);
  background: var(--bg);
  position: relative;
  overflow: clip;

  font-family: var(--font-sans, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);

  padding-inline: 0 !important;
  margin: 0 !important;
}

/* Box sizing scoped */
.il-audit,
.il-audit * ,
.il-audit *::before,
.il-audit *::after{ box-sizing: border-box; }

.il-audit img,
.il-audit svg,
.il-audit video,
.il-audit iframe{ max-width: 100%; height: auto; }

/* ✅ Container 1200 + gouttières (toujours) */
.il-audit__container{
  width: 100% !important;
  max-width: var(--container, 1200px) !important;
  margin-inline: auto !important;
  padding-inline: var(--gutter, clamp(14px, 2.4vw, 24px)) !important;
  box-sizing: border-box !important;
}

/* ✅ Verrouille aussi les wrappers WP fréquents (si le thème casse le layout) */
.page-template-page-audit-gratuit .site-main,
.page-template-page-audit-gratuit .site-content,
.page-template-page-audit-gratuit .content-area,
.page-template-page-audit-gratuit .entry-content{
  width: 100% !important;
  max-width: 100% !important;
}

/* ======================================================
   Dashicons — PREMIUM GLOBAL (Audit Gratuit)
   - TOUTES vertes (anti-thème)
   - Pastille/padding premium
   - Exception : boutons = currentColor
   ====================================================== */

/* Base: toutes les dashicons de la page audit */
.il-audit .dashicons{
  color: var(--brand) !important;
  opacity: .98;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Taille icône */
  font-size: 18px;
  line-height: 1;

  /* Pastille premium (padding interne) */
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--brand) 14%, transparent);
  box-shadow: 0 8px 22px rgba(23,160,81,.14);

  /* Micro-feel */
  transform: translateZ(0);
  transition:
    background var(--t-med) var(--ease),
    box-shadow var(--t-med) var(--ease),
    transform var(--t-med) var(--ease),
    opacity var(--t-med) var(--ease);
}

/* Titres avec icône: alignement clean */
.il-audit__kicker,
.il-audit__cardTitle,
.il-audit__sectionHead h2,
.il-audit__step h3,
.il-audit__infoCard h3,
.il-audit__finalCta h2{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Icônes structurantes: un peu plus "présentes" */
.il-audit__kicker .dashicons,
.il-audit__cardTitle .dashicons,
.il-audit__sectionHead h2 .dashicons,
.il-audit__step h3 .dashicons,
.il-audit__infoCard h3 .dashicons,
.il-audit__finalCta h2 .dashicons{
  background: color-mix(in oklab, var(--brand) 18%, transparent);
  box-shadow: 0 10px 26px rgba(23,160,81,.18);
}

/* Hover premium sur cartes/steps */
.il-audit__step:hover .dashicons,
.il-audit__infoCard:hover .dashicons{
  background: color-mix(in oklab, var(--brand) 26%, transparent);
  box-shadow: 0 14px 34px rgba(23,160,81,.26);
  transform: translateY(-1px);
}

/* ✅ BADGES: garder vert + pastille plus fine */
.il-audit__badge .dashicons{
  width: 26px;
  height: 26px;
  border-radius: 9px;
  font-size: 16px;
  background: color-mix(in oklab, var(--brand) 12%, transparent);
  box-shadow: none;
}

/* ✅ Labels champs: icône plus discrète mais verte */
.il-audit__field label .dashicons{
  width: 26px;
  height: 26px;
  border-radius: 9px;
  font-size: 16px;
  background: color-mix(in oklab, var(--brand) 10%, transparent);
  box-shadow: none;
  opacity: .96;
}

/* ✅ Trust + help + afterSubmit : vert aussi, mais soft */
.il-audit__trustItem .dashicons,
.il-audit__help .dashicons,
.il-audit__afterItem .dashicons,
.il-audit__cardSub .dashicons{
  width: 26px;
  height: 26px;
  border-radius: 9px;
  font-size: 16px;
  background: color-mix(in oklab, var(--brand) 10%, transparent);
  box-shadow: none;
  opacity: .92;
}

/* ✅ Boutons: icônes héritent de la couleur du bouton (blanc sur CTA) */
.il-audit__btn .dashicons,
.il-audit__submit .dashicons,
.il-audit__stickyBtn .dashicons{
  color: currentColor !important;
  background: transparent !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  opacity: .98;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .il-audit .dashicons{
    transition: none !important;
    transform: none !important;
  }
}

/* ======================================================
   1) Background animation layer (global)
   ====================================================== */
.il-audit__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 420px at 12% 18%,
      color-mix(in oklab, var(--brand) 18%, transparent),
      transparent 62%
    ),
    radial-gradient(900px 420px at 86% 22%,
      rgba(23,160,81,.10),
      transparent 60%
    ),
    linear-gradient(var(--bg), var(--bg));
}

.il-audit__gridlines{
  position: absolute;
  inset: 0;
  opacity: .08;
  background-image:
    linear-gradient(to right, rgba(16,19,35,.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16,19,35,.18) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(closest-side at 50% 35%, #000 55%, transparent 100%);
  transform: translateZ(0);
}

.il-audit__blob{
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 999px;
  filter: blur(30px);
  opacity: .18;
  transform: translateZ(0);
  background: radial-gradient(circle at 30% 30%,
    color-mix(in oklab, var(--brand) 82%, white),
    transparent 60%
  );
  animation: ilBlobFloat 16s ease-in-out infinite;
}

.il-audit__blob--a{ top: -220px; left: -180px; animation-duration: 18s; }
.il-audit__blob--b{ top: -160px; right: -220px; opacity: .14; animation-duration: 22s; animation-direction: reverse; }
.il-audit__blob--c{ bottom: -260px; left: 18%; width: 640px; height: 640px; opacity: .12; animation-duration: 26s; }

@keyframes ilBlobFloat{
  0%   { transform: translate3d(0,0,0) scale(1); }
  33%  { transform: translate3d(22px, 26px, 0) scale(1.05); }
  66%  { transform: translate3d(-16px, 14px, 0) scale(.99); }
  100% { transform: translate3d(0,0,0) scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .il-audit__blob{ animation: none; }
  .il-audit__gridlines{ opacity: .06; }
}

/* ======================================================
   2) HERO
   ====================================================== */
.il-audit__hero{
  position: relative;
  z-index: 1;
  padding-block: clamp(32px, 5.5vw, 70px);
  border-bottom: 1px solid var(--line);
  width: 100%;
}

.il-audit__heroGrid{
  display: grid;
  grid-template-columns: 1.15fr .95fr;
  gap: clamp(14px, 2.8vw, 28px);
  align-items: start;
}

@media (max-width: 980px){
  .il-audit__heroGrid{ grid-template-columns: 1fr; }
}

/* Contenu hero */
.il-audit__heroContent{ min-width: 0; }

.il-audit__kicker{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-weight: 900;
  letter-spacing: .2px;
  color: color-mix(in oklab, var(--brand) 74%, var(--text));
  background: rgba(23,160,81,.08);
  border: 1px solid rgba(23,160,81,.16);
  padding: 8px 12px;
  border-radius: 999px;
}
.il-audit__kicker .dashicons{
  width: 28px;
  height: 28px;
  border-radius: 10px;
}

.il-audit__h1{
  margin: 14px 0 10px;
  font-family: var(--font-head, var(--font-sans));
  font-size: clamp(28px, 4.2vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.il-audit__lead{
  margin: 0 0 12px;
  color: color-mix(in oklab, var(--text) 84%, var(--muted));
  font-size: clamp(16px, 2.1vw, 18px);
  line-height: 1.55;
  max-width: 62ch;
}
.il-audit__lead strong{ font-weight: 900; }

/* Bullets plus “light” */
.il-audit__bullets{
  margin: 12px 0 14px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}
.il-audit__bullets li{
  position: relative;
  padding-left: 30px;
  line-height: 1.45;
  color: color-mix(in oklab, var(--text) 84%, var(--muted));
}
.il-audit__bullets li strong{ font-weight: 900; }
.il-audit__bullets li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 16px;
  height: 16px;
  border-radius: 6px;
  background: color-mix(in oklab, var(--brand) 78%, white);
  box-shadow: 0 10px 24px rgba(16,19,35,.08);
  transform: translateY(-50%) rotate(10deg);
}
.il-audit__bullets li::after{
  content: "";
  position: absolute;
  left: 5px;
  top: .62em;
  width: 7px;
  height: 4px;
  border-left: 2px solid rgba(255,255,255,.95);
  border-bottom: 2px solid rgba(255,255,255,.95);
  transform: translateY(-50%) rotate(-45deg);
  opacity: .95;
}

/* CTA row */
.il-audit__ctaRow{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

/* Buttons (plus soft) */
.il-audit__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .1px;
  transition:
    transform var(--t-med) var(--ease),
    box-shadow var(--t-med) var(--ease),
    background var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease);
  will-change: transform;
}

.il-audit__btn:focus-visible{ outline: none; box-shadow: var(--focus); }

.il-audit__btn--primary{
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--brand) 92%, white),
    color-mix(in oklab, var(--brand) 72%, #101323)
  );
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.il-audit__btn--primary::after{
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.24) 28%, transparent 56%);
  transform: translateX(-60%);
  animation: ilShine 3.2s ease-in-out infinite;
  opacity: .52;
}
@keyframes ilShine{
  0%, 55% { transform: translateX(-70%); }
  100%    { transform: translateX(70%); }
}

.il-audit__btn--ghost{
  background: rgba(255,255,255,.68);
  color: var(--text);
  border-color: color-mix(in oklab, var(--brand) 14%, var(--line));
}

.il-audit__btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow2); }
.il-audit__btn:active{ transform: translateY(0); box-shadow: var(--shadow); }

/* Trust line */
.il-audit__trust{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 14px;
}
.il-audit__trustItem{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.il-audit__trustDot{
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--brand) 58%, var(--muted));
  opacity: .65;
}

/* ======================================================
   3) Form card (premium) + Radar FX placé uniquement dans le header
   ====================================================== */
.il-audit__cardWrap{ position: relative; min-width: 0; }

.il-audit__card{
  position: relative;
  background: rgba(255,255,255,.70);
  border: 1px solid color-mix(in oklab, var(--line) 88%, var(--brand));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow2);
  overflow: hidden;
  transform: translateZ(0);
  isolation: isolate;
}

/* Bordure “fine” animée, moins présente */
.il-audit__card::before{
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(23,160,81,.22),
    rgba(16,19,35,.08),
    rgba(23,160,81,.18)
  );
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .28;
  pointer-events: none;
  animation: ilBorder 8s linear infinite;
}
@keyframes ilBorder{
  0%{ filter: hue-rotate(0deg); }
  100%{ filter: hue-rotate(16deg); }
}

/* Card head */
.il-audit__cardHead{
  position: relative;
  z-index: 1;
  padding: 16px 16px 12px;
  border-bottom: 1px solid color-mix(in oklab, var(--line) 88%, var(--brand));
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.74));
  backdrop-filter: blur(10px);
  overflow: hidden;   /* confine le radar */
  isolation: isolate; /* confine blend/mask */
}

/* Head top (titre + badges) */
.il-audit__headTop{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
@media (max-width: 520px){
  .il-audit__headTop{
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Radar SIGNATURE: limité au header */
.il-audit__heroFx{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .9;
  mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
}

/* halo de fond du header */
.il-audit__heroFx::before{
  content:"";
  position:absolute;
  inset: 0;
  background:
    radial-gradient(520px 220px at 72% 0%,
      rgba(23,160,81,.14),
      transparent 65%
    ),
    radial-gradient(520px 240px at 20% 20%,
      rgba(23,160,81,.08),
      transparent 66%
    );
  opacity: .95;
}

/* Radar base */
.il-audit__radar{
  position:absolute;
  left: 74%;
  top: -92px;
  width: 300px;
  height: 300px;
  transform: translateX(-50%);
  border-radius: 999px;
  opacity: .92;
  background:
    radial-gradient(circle at 50% 50%,
      transparent 0 34%,
      rgba(23,160,81,.18) 34% 34.6%,
      transparent 34.6% 52%,
      rgba(23,160,81,.14) 52% 52.6%,
      transparent 52.6% 68%,
      rgba(23,160,81,.12) 68% 68.6%,
      transparent 68.6% 100%
    ),
    radial-gradient(circle at 50% 50%,
      rgba(23,160,81,.08),
      transparent 62%
    );
  mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 100%);
}

/* Scan conique */
.il-audit__scan{
  position:absolute;
  left: 74%;
  top: -92px;
  width: 300px;
  height: 300px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: conic-gradient(
    from 0deg,
    transparent 0 305deg,
    rgba(23,160,81,.14) 305deg 340deg,
    rgba(23,160,81,.24) 340deg 350deg,
    transparent 350deg 360deg
  );
  opacity: .86;
  animation: ilRadarSpin 5.2s linear infinite;
  mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 100%);
}
@keyframes ilRadarSpin{
  to{ transform: translateX(-50%) rotate(360deg); }
}

/* Orbits */
.il-audit__orbits{
  position:absolute;
  left: 74%;
  top: -92px;
  width: 300px;
  height: 300px;
  transform: translateX(-50%);
  border-radius: 999px;
  opacity: .85;
  background:
    radial-gradient(circle at 78% 44%, rgba(255,255,255,.80) 0 2px, transparent 3px),
    radial-gradient(circle at 30% 58%, rgba(255,255,255,.70) 0 2px, transparent 3px),
    radial-gradient(circle at 54% 24%, rgba(255,255,255,.66) 0 2px, transparent 3px),
    radial-gradient(circle at 64% 68%, rgba(255,255,255,.66) 0 2px, transparent 3px);
  mix-blend-mode: screen;
  animation: ilOrbits 7.2s ease-in-out infinite;
  mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 100%);
}
@keyframes ilOrbits{
  0%   { transform: translateX(-50%) rotate(0deg) scale(1); opacity: .78; }
  50%  { transform: translateX(-50%) rotate(180deg) scale(1.02); opacity: .92; }
  100% { transform: translateX(-50%) rotate(360deg) scale(1); opacity: .78; }
}

/* Particules confinées */
.il-audit__particles{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 132px;
  opacity: .70;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.64) 0 1.5px, transparent 2.6px),
    radial-gradient(circle at 38% 30%, rgba(255,255,255,.64) 0 1.4px, transparent 2.5px),
    radial-gradient(circle at 62% 22%, rgba(255,255,255,.64) 0 1.6px, transparent 2.8px),
    radial-gradient(circle at 80% 34%, rgba(255,255,255,.64) 0 1.5px, transparent 2.6px),
    radial-gradient(circle at 28% 56%, rgba(255,255,255,.50) 0 1.2px, transparent 2.3px),
    radial-gradient(circle at 72% 60%, rgba(255,255,255,.50) 0 1.3px, transparent 2.4px);
  background-repeat: no-repeat;
  filter: drop-shadow(0 12px 26px rgba(16,19,35,.10));
  animation: ilParticlesFall 3.0s linear infinite;
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
  transform: translateZ(0);
}
@keyframes ilParticlesFall{
  0%   { transform: translate3d(0,-10px,0); opacity: .0; }
  10%  { opacity: .70; }
  100% { transform: translate3d(0,22px,0); opacity: .0; }
}
.il-audit__particles::after{
  content:"";
  position:absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.00) 0px,
      rgba(255,255,255,.00) 10px,
      rgba(255,255,255,.10) 11px,
      rgba(255,255,255,.00) 14px
    );
  opacity: .18;
  mix-blend-mode: overlay;
  animation: ilScanLines 1.7s linear infinite;
  mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
}
@keyframes ilScanLines{
  from { transform: translateY(-18px); }
  to   { transform: translateY(18px); }
}

/* Titre/sub */
.il-audit__cardTitle{
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-head, var(--font-sans));
  font-size: 18px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.il-audit__cardSub{
  position: relative;
  z-index: 1;
  margin: 10px 0 0;
  display: flex;
  gap: 10px;
  align-items: center;
  color: color-mix(in oklab, var(--text) 68%, var(--muted));
  font-size: 14px;
  line-height: 1.45;
}

/* Badges */
.il-audit__badgeRow{
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.il-audit__badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--brand) 16%, var(--line));
  background: rgba(255,255,255,.76);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12px;
  color: color-mix(in oklab, var(--text) 82%, var(--muted));
}

/* Notices */
.il-audit__notice{
  position: relative;
  z-index: 1;
  margin: 12px 16px 0;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow);
  font-size: 14px;
  line-height: 1.45;
}
.il-audit__notice strong{ font-weight: 900; }
.il-audit__notice--ok{
  border-color: color-mix(in oklab, var(--brand) 32%, var(--line));
  background: color-mix(in oklab, var(--brand) 9%, rgba(255,255,255,.92));
}
.il-audit__notice--err{
  border-color: color-mix(in oklab, #E24A4A 35%, var(--line));
  background: color-mix(in oklab, #E24A4A 10%, rgba(255,255,255,.92));
}

/* Reduce motion global */
@media (prefers-reduced-motion: reduce){
  .il-audit__scan,
  .il-audit__orbits,
  .il-audit__particles,
  .il-audit__btn--primary::after,
  .il-audit__card::before{
    animation: none !important;
  }
}

/* ======================================================
   4) Form (HTML natif) — propre + aéré
   ====================================================== */
.il-audit__form{
  position: relative;
  z-index: 1;
  padding: 14px 16px 16px;
}

/* Honeypot */
.il-audit__hp{
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  white-space: nowrap !important;
}

.il-audit__fieldGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 680px){
  .il-audit__fieldGrid{ grid-template-columns: 1fr; }
}

.il-audit__field{ min-width: 0; }
.il-audit__field--full{ grid-column: 1 / -1; }

/* Labels plus “légers” */
.il-audit__field label{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 950;
  font-size: 12.5px;
  line-height: 1.25;
  margin: 2px 0 8px;
  color: color-mix(in oklab, var(--text) 86%, var(--muted));
}
.il-audit__req{ opacity: .9; }
.il-audit__opt{
  font-weight: 900;
  font-size: 12px;
  opacity: .65;
}

/* Champs */
.il-audit__field input,
.il-audit__field select,
.il-audit__field textarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid color-mix(in oklab, var(--line) 90%, var(--brand));
  background: rgba(255,255,255,.84);
  color: var(--text);
  padding: 11px 12px;
  font-size: 15px;
  line-height: 1.35;
  transition:
    box-shadow var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease),
    background var(--t-med) var(--ease);
  outline: none;
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
}

.il-audit__field select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, color-mix(in oklab, var(--text) 48%, transparent) 50%),
    linear-gradient(135deg, color-mix(in oklab, var(--text) 48%, transparent) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) 52%,
    calc(100% - 12px) 52%,
    0 0;
  background-size: 6px 6px, 6px 6px, 100% 100%;
  background-repeat: no-repeat;
  padding-right: 38px;
}

.il-audit__field textarea{
  resize: vertical;
  min-height: 106px;
}

.il-audit__field input::placeholder,
.il-audit__field textarea::placeholder{
  color: color-mix(in oklab, var(--muted) 84%, transparent);
}

.il-audit__field input:hover,
.il-audit__field select:hover,
.il-audit__field textarea:hover{
  border-color: color-mix(in oklab, var(--brand) 22%, var(--line));
  background: rgba(255,255,255,.92);
}

.il-audit__field input:focus-visible,
.il-audit__field select:focus-visible,
.il-audit__field textarea:focus-visible{
  border-color: color-mix(in oklab, var(--brand) 45%, var(--line));
  box-shadow: var(--focus);
}

/* Help text (sous champs) */
.il-audit__help{
  margin: 8px 2px 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: color-mix(in oklab, var(--text) 60%, var(--muted));
}

/* Consent */
.il-audit__consent{
  margin: 14px 2px 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.76);
  box-shadow: 0 10px 22px rgba(16,19,35,.05);
}

.il-audit__consent input{
  margin-top: 2px;
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
}

.il-audit__consent span{
  display: block;
  font-size: 13.5px;
  line-height: 1.45;
  color: color-mix(in oklab, var(--text) 82%, var(--muted));
}
.il-audit__consent strong{ font-weight: 900; }

/* Submit */
.il-audit__submit{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-weight: 950;
  letter-spacing: .1px;
  color: #fff;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--brand) 92%, white),
    color-mix(in oklab, var(--brand) 72%, #101323)
  );
  box-shadow: var(--shadow2);
  transition:
    transform var(--t-med) var(--ease),
    box-shadow var(--t-med) var(--ease),
    filter var(--t-med) var(--ease);
  position: relative;
  overflow: hidden;
}
.il-audit__submit:focus-visible{
  outline: none;
  box-shadow: var(--focus), var(--shadow2);
}
.il-audit__submit:hover{
  transform: translateY(-1px);
  box-shadow: 0 26px 66px rgba(16,19,35,.18);
  filter: saturate(1.02);
}
.il-audit__submit:active{
  transform: translateY(0);
  box-shadow: var(--shadow);
}

/* After submit (box pro) */
.il-audit__afterSubmit{
  margin-top: 12px;
  display: grid;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid color-mix(in oklab, var(--brand) 14%, var(--line));
  background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.74));
  box-shadow: 0 14px 34px rgba(16,19,35,.06);
}
.il-audit__afterItem{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: color-mix(in oklab, var(--text) 78%, var(--muted));
  line-height: 1.55;
  font-size: 13.5px;
}
.il-audit__afterItem strong{ font-weight: 950; }

/* ======================================================
   5) Sections (Comment / Recevez / FAQ)
   ====================================================== */
.il-audit__section{
  position: relative;
  z-index: 1;
  padding-block: clamp(24px, 4.2vw, 52px);
}

.il-audit__section--alt{
  background:
    radial-gradient(840px 360px at 18% 20%,
      rgba(23,160,81,.10),
      transparent 62%
    ),
    linear-gradient(var(--bg2), var(--bg2));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.il-audit__sectionHead{
  margin-bottom: 16px;
}

.il-audit__sectionHead h2{
  margin: 0 0 10px;
  font-family: var(--font-head, var(--font-sans));
  letter-spacing: -0.01em;
  font-size: clamp(20px, 2.5vw, 28px);
  line-height: 1.15;
}

.il-audit__sectionHead p{
  margin: 0;
  max-width: 78ch;
  color: color-mix(in oklab, var(--text) 76%, var(--muted));
  line-height: 1.6;
}

/* Steps */
.il-audit__steps{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 980px){
  .il-audit__steps{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .il-audit__steps{ grid-template-columns: 1fr; }
}

.il-audit__step{
  background: rgba(255,255,255,.82);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 14px;
  box-shadow: 0 12px 28px rgba(16,19,35,.05);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.il-audit__step h3{
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
  color: color-mix(in oklab, var(--text) 90%, var(--muted));
}
.il-audit__step p{
  margin: 0;
  color: color-mix(in oklab, var(--text) 76%, var(--muted));
  line-height: 1.55;
  font-size: 14px;
}
.il-audit__step:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 56px rgba(16,19,35,.09);
  border-color: color-mix(in oklab, var(--brand) 18%, var(--line));
}

/* Callout */
.il-audit__callout{
  margin-top: 16px;
  padding: 16px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in oklab, var(--brand) 18%, var(--line));
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.74));
  box-shadow: var(--shadow2);
  display: grid;
  gap: 12px;
}
.il-audit__callout p{
  margin: 0;
  color: color-mix(in oklab, var(--text) 80%, var(--muted));
  line-height: 1.6;
}
.il-audit__callout .il-audit__btn{ justify-self: start; }

/* Cards (recevez) */
.il-audit__cards{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 980px){
  .il-audit__cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .il-audit__cards{ grid-template-columns: 1fr; }
}

.il-audit__infoCard{
  background: rgba(255,255,255,.84);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 14px;
  box-shadow: 0 12px 28px rgba(16,19,35,.05);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.il-audit__infoCard h3{
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}
.il-audit__infoCard p{
  margin: 0;
  color: color-mix(in oklab, var(--text) 76%, var(--muted));
  line-height: 1.55;
  font-size: 14px;
}
.il-audit__infoCard:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 56px rgba(16,19,35,.09);
  border-color: color-mix(in oklab, var(--brand) 18%, var(--line));
}

.il-audit__seoText{
  margin: 16px 0 0;
  color: color-mix(in oklab, var(--text) 78%, var(--muted));
  line-height: 1.65;
  max-width: 88ch;
}
.il-audit__seoText strong{ font-weight: 950; }

/* ======================================================
   6) FAQ (details/summary)
   ====================================================== */
.il-audit__faq{
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.il-audit__qa{
  background: rgba(255,255,255,.84);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(16,19,35,.05);
  overflow: hidden;
}

.il-audit__qa summary{
  list-style: none;
  cursor: pointer;
  padding: 14px 14px;
  font-weight: 950;
  color: color-mix(in oklab, var(--text) 90%, var(--muted));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  outline: none;
}
.il-audit__qa summary::-webkit-details-marker{ display: none; }

.il-audit__qa summary::after{
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid color-mix(in oklab, var(--text) 50%, transparent);
  border-bottom: 2px solid color-mix(in oklab, var(--text) 50%, transparent);
  transform: rotate(45deg);
  transition: transform var(--t-med) var(--ease);
  opacity: .9;
  flex: 0 0 auto;
}
.il-audit__qa[open] summary::after{ transform: rotate(-135deg); }

.il-audit__qa summary:focus-visible{ box-shadow: var(--focus); }

.il-audit__qa > div{
  padding: 0 14px 14px;
  color: color-mix(in oklab, var(--text) 76%, var(--muted));
  line-height: 1.6;
  font-size: 14px;
}
.il-audit__qa > div p{ margin: 0; }

/* ======================================================
   7) Final CTA
   ====================================================== */
.il-audit__finalCta{
  margin-top: 16px;
  padding: 18px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in oklab, var(--brand) 18%, var(--line));
  background:
    radial-gradient(720px 260px at 20% 20%,
      rgba(23,160,81,.10),
      transparent 62%
    ),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.74));
  box-shadow: var(--shadow2);
  display: grid;
  gap: 10px;
  text-align: left;
}

.il-audit__finalCta h2{
  margin: 0;
  font-family: var(--font-head, var(--font-sans));
  font-size: clamp(18px, 2.4vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.il-audit__finalCta p{
  margin: 0;
  color: color-mix(in oklab, var(--text) 78%, var(--muted));
  line-height: 1.6;
}

.il-audit__finalCta strong{ font-weight: 950; }

.il-audit__finalCta .il-audit__btn{
  justify-self: start;
  margin-top: 4px;
}

/* ======================================================
   8) Sticky mobile CTA (bottom)
   ====================================================== */
.il-audit__stickyCta{
  position: sticky;
  bottom: 0;
  z-index: 20;
  padding: 10px var(--gutter);
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid color-mix(in oklab, var(--line) 86%, transparent);
}

.il-audit__stickyBtn{
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 950;
  letter-spacing: .1px;
  color: #fff;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--brand) 92%, white),
    color-mix(in oklab, var(--brand) 72%, #101323)
  );
  box-shadow: var(--shadow2);
  border: 0;
  padding: 10px 14px;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}

.il-audit__stickyBtn:focus-visible{
  outline: none;
  box-shadow: var(--focus), var(--shadow2);
}

.il-audit__stickyBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 26px 66px rgba(16,19,35,.18);
}

@media (min-width: 981px){
  /* sticky CTA uniquement mobile */
  .il-audit__stickyCta{
    position: static;
    border-top: 0;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
  }
  .il-audit__stickyBtn{ display: none; }
}

/* ======================================================
   9) Robustesse / compat
   ====================================================== */

/* Fallback si overflow: clip pas supporté */
@supports not (overflow: clip){
  .il-audit{ overflow: hidden; }
}

/* Empêche certains thèmes de casser les formulaires */
.il-audit__form input,
.il-audit__form select,
.il-audit__form textarea,
.il-audit__form button{
  font-family: inherit;
}