/* =====================================================================
   COMM ONE — audit.css (page Audit uniquement) · préfixe .ad-
   1 Hero + « Le diagnostic qui se dessine » · 2 Six points · 3 Étapes
   4 Ce que vous recevez · 5 Et après
   ===================================================================== */

/* ── 1. Hero ─────────────────────────────────────────────────────── */
.ad-hero{padding:clamp(16px,3vw,32px) 0 clamp(48px,7vw,96px)}
.ad-hero-panel{display:grid;gap:clamp(32px,4vw,56px);align-items:center;overflow:hidden;position:relative}
@media (min-width:1000px){.ad-hero-panel{grid-template-columns:1.05fr 1fr}}
.ad-hero-copy{max-width:40rem;position:relative;z-index:2}
.ad-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:24px}
.ad-kicker-t{font-weight:600;color:var(--encre-2);font-size:var(--fs-small)}
.ad-hero-sub{margin-top:24px}
.ad-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.ad-hero-tags{margin-top:28px}
.ad-hero-tags .dot{background:#C9A100}
@media (max-width:599px){.ad-hero-cta .btn{width:100%}}
.js-motion .ad-hero-copy>*{animation:adin 640ms var(--ease-out) both}
.js-motion .ad-hero-copy>:nth-child(2){animation-delay:80ms}.js-motion .ad-hero-copy>:nth-child(3){animation-delay:160ms}.js-motion .ad-hero-copy>:nth-child(4){animation-delay:240ms}
@keyframes adin{from{opacity:0;transform:translateY(12px)}}

/* signature : le rapport */
.ad-sig{margin:0;display:grid;justify-items:center;gap:14px}
.ad-rep{width:min(100%,430px);padding:22px;border-radius:var(--r-lg);background:var(--blanc);box-shadow:0 30px 60px -28px rgba(23,20,42,.35);transition:transform 600ms var(--spring-soft)}
.ad-rep-h{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1.5px solid var(--encre)}
.ad-rep-logo{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#2B1A0E;color:#F3D9A4;font:italic 400 1.1rem/1 Georgia,serif;flex:none}
.ad-rep-t{flex:1;display:grid}
.ad-rep-t b{font:800 1.0625rem/1.15 var(--f-titre)}
.ad-rep-t small{font-size:.8125rem;color:var(--encre-2)}
.ad-rep-tag{padding:6px 10px;border-radius:var(--r-pill);background:var(--citron);font:700 .75rem/1 var(--f-texte)}
.ad-axes{display:grid;gap:10px;margin-top:16px}
.ad-axes li{display:grid;grid-template-columns:1fr 34% 46px;align-items:center;gap:10px;font-size:.875rem;font-weight:600}
.ad-axes i{height:8px;border-radius:8px;background:var(--sable);overflow:hidden}
.ad-axes i b{display:block;height:100%;width:calc(var(--v)*100%);border-radius:inherit;background:var(--bar,var(--encre));transform-origin:left;transform:scaleX(0);
  transition:transform 700ms var(--ease-out);transition-delay:calc(var(--i)*140ms)}
.ad-axes li[style*="--v:.2"],.ad-axes li[style*="--v:.3"]{--bar:#E8742C}
.ad-axes li[style*="--v:.4"],.ad-axes li[style*="--v:.5"]{--bar:#C9A100}
.ad-axes li[style*="--v:.7"]{--bar:var(--vert)}
.ad-axe--time{--bar:var(--violet)!important}
.ad-axes em{font:700 .875rem/1 var(--f-chiffre);font-style:normal;text-align:right;opacity:0;transition:opacity 300ms;transition-delay:calc(var(--i)*140ms + 400ms)}
.ad-sig:not([data-s="0"]) .ad-axes i b{transform:none}
.ad-sig:not([data-s="0"]) .ad-axes em{opacity:1}
.ad-prio{margin-top:18px;padding:16px;border-radius:var(--r-md);background:var(--citron-teinte);clip-path:inset(0 0 100% 0 round var(--r-md));transition:clip-path 700ms var(--ease-inout)}
.ad-sig[data-s="2"] .ad-prio{clip-path:inset(0 0 0 0 round var(--r-md))}
.ad-prio-k{font:600 .75rem/1 var(--f-chiffre);letter-spacing:.08em;text-transform:uppercase;color:#7A5D00}
.ad-prio ol{display:grid;gap:8px;margin-top:10px}
.ad-prio li{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:10px;font-weight:600;font-size:.875rem;line-height:1.3;
  opacity:0;transform:translateX(-8px);transition:opacity 300ms,transform 420ms var(--ease-out);transition-delay:calc(500ms + var(--i)*160ms)}
.ad-prio li>span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--encre);color:var(--citron);font:700 .75rem/1 var(--f-chiffre)}
.ad-prio small{padding:3px 8px;border-radius:var(--r-pill);background:var(--c);color:var(--c-on);font-size:.6875rem;font-weight:700;white-space:nowrap}
.ad-sig[data-s="2"] .ad-prio li{opacity:1;transform:none}

/* ── 2. Six points ───────────────────────────────────────────────── */
.ad-grid{display:grid;gap:16px}
@media (min-width:700px){.ad-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.ad-grid{grid-template-columns:repeat(3,1fr);gap:20px}}
.ad-grid li{position:relative;padding:clamp(22px,3vw,30px);border-radius:var(--r-lg);background:var(--c-teinte)}
.ad-n{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--c);color:var(--c-on);font:700 .9375rem/1 var(--f-chiffre)}
.ad-grid h3{margin-top:16px}
.ad-grid p{margin-top:8px;color:var(--encre-2)}

/* ── 3. Étapes ───────────────────────────────────────────────────── */
.ad-steps{display:grid;gap:16px;counter-reset:ad}
@media (min-width:900px){.ad-steps{grid-template-columns:repeat(4,1fr);gap:20px}}
.ad-steps li{padding:24px;border-radius:var(--r-lg);background:var(--blanc);box-shadow:var(--ombre-1)}
.ad-step-k{display:inline-flex;padding:6px 12px;border-radius:var(--r-pill);background:var(--citron);font:700 .875rem/1 var(--f-chiffre)}
.ad-steps h3{margin-top:16px}
.ad-steps p{margin-top:8px;color:var(--encre-2)}

/* ── 4. Ce que vous recevez ──────────────────────────────────────── */
.ad-recv{display:grid;gap:clamp(32px,4vw,64px);align-items:center}
@media (min-width:1000px){.ad-recv{grid-template-columns:1fr 1fr}}
.ad-recv-l{display:grid;gap:12px;margin-top:28px}
.ad-recv-l li{position:relative;padding-left:30px;color:var(--encre-2)}
.ad-recv-l li::before{content:"";position:absolute;left:0;top:.4em;width:16px;height:16px;border-radius:50%;background:var(--citron);box-shadow:inset 0 0 0 4px var(--citron-teinte)}
.ad-recv-l b{color:var(--encre)}
.ad-gain{padding:clamp(24px,3vw,36px);border-radius:var(--r-lg);background:var(--nuit);color:var(--lait)}
.ad-gain-k{font:600 .75rem/1 var(--f-chiffre);letter-spacing:.08em;text-transform:uppercase;color:var(--brume)}
.ad-gain-row{display:grid;grid-template-columns:minmax(96px,auto) 1fr;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--trait-nuit)}
.ad-gain-row b{font:700 clamp(2.25rem,1.8rem + 2vw,3.25rem)/1 var(--f-chiffre);color:var(--citron)}
.ad-gain-row span{color:var(--brume)}
.ad-gain-n{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px;font-size:var(--fs-small);color:var(--brume)}

/* ── 5. Et après ─────────────────────────────────────────────────── */
.ad-next{display:grid;gap:10px}
.ad-next a{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:14px;padding:18px 22px;border-radius:var(--r-lg);background:var(--blanc);
  color:var(--encre);text-decoration:none;box-shadow:var(--ombre-1);transition:transform var(--t-sm) var(--ease-out),background-color var(--t-sm)}
.ad-next a:hover{transform:translateX(6px);background:var(--c-teinte)}
.ad-next .nav-dot{width:12px;height:12px}
.ad-next b{font:700 1.25rem/1.1 var(--f-titre)}
.ad-next span{color:var(--encre-2)}
.ad-next em{font-style:normal;font-size:1.25rem;color:var(--c-txt)}
@media (max-width:699px){.ad-next a{grid-template-columns:auto 1fr auto}.ad-next span{grid-column:2;grid-row:2}}

@media (prefers-reduced-motion:reduce){.ad-axes i b,.ad-axes em,.ad-prio,.ad-prio li{transition:none!important}}