/* ==========================================================================
   IAGOV Solutions — V5
   Système visuel dérivé du sceau : hexagone + double chevron, navy & champagne.
   Aucune dépendance. À servir depuis /assets/iagov-v5.css
   ========================================================================== */

:root{
  --navy:#0b1f3a; --navy-700:#112a4d; --navy-900:#081627; --navy-line:#2f5590;
  --gold:#c9a961; --gold-700:#b8964b; --gold-ink:#4a3a14;
  --grad-gold:linear-gradient(135deg,#e9cf8e 0%,#c9a961 48%,#a9842f 100%);
  --grad-ink:linear-gradient(168deg,#112a4d 0%,#0b1f3a 54%,#081627 100%);

  --bg:#fbfaf7; --white:#fff; --surface:#f6f7f9;
  --border:#e4e8ee; --border-strong:#d3d9e2;
  --text:#0c1726; --muted:#43505f; --subtle:#6b7787; --faint:#8595ad;
  --on-navy:#b8c4d6; --on-navy-dim:#8ea4c6; --gold-light:#dcc07e;

  --ok-bg:#d6f4e7; --ok-fg:#065f46;
  --soon-bg:#fdf0d2; --soon-fg:#8a5a13;
  --beta-bg:#e5edff; --beta-fg:#1d4ed8;
  --quote-bg:#f6efd9; --quote-fg:#4a3a14;
  --neutral-bg:#eef1f5; --neutral-fg:#43505f;

  --r:16px; --r-lg:22px; --r-xl:30px; --pill:999px;
  --sh:0 10px 30px -12px rgba(11,31,58,.18);
  --sh-lg:0 30px 60px -24px rgba(11,31,58,.24);
  --ease:cubic-bezier(.22,1,.36,1);
  --container:1200px;
  --pad:clamp(20px,5vw,40px);
  --section:clamp(72px,10vw,112px);

  --header-bg:rgba(251,250,247,.82); --hairline:#eef1f5;

  --f-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --f-display:'Fraunces',Georgia,'Times New Roman',serif;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{font-family:var(--f-sans);font-size:16px;line-height:1.65;color:var(--text);
  background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none;padding:0}
a{color:var(--text);text-decoration:none;transition:color .2s}
a:hover{color:var(--gold-700)}
::selection{background:rgba(201,169,97,.4)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

h1,h2,h3{font-family:var(--f-display);font-weight:600;line-height:1.1;
  letter-spacing:-.018em;text-wrap:balance;font-optical-sizing:auto}
h1{font-size:clamp(2.6rem,1.4rem + 3.4vw,4.1rem);line-height:1.04;letter-spacing:-.022em}
h2{font-size:clamp(2rem,1.3rem + 2vw,2.9rem)}
h3{font-size:1.42rem;letter-spacing:-.015em}
p{text-wrap:pretty}
em{font-style:italic}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--section)}
.section--white{background:var(--white);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section--ink{background:var(--grad-ink);color:#fff}
.sr-only{position:absolute;left:-9999px;top:0}
.sr-only:focus{left:16px;top:16px;z-index:200;background:var(--navy);color:#fff;
  padding:10px 16px;border-radius:12px}

/* --- signes du sceau ------------------------------------------------------ */
.chev{width:24px;height:17px;flex:none;fill:none;stroke:var(--gold);
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.chev--sm{width:17px;height:12px}
.chev--on-ink{stroke:var(--gold-light)}
.seal{flex:none}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-700);margin-bottom:20px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold)}
.eyebrow--on-ink{color:var(--gold-light)}
.eyebrow--center{gap:0}
.eyebrow--center::before{display:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:var(--pill);font-weight:600;font-size:.93rem;
  line-height:1;border:1px solid transparent;white-space:nowrap;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,border-color .2s}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.btn--lg{padding:17px 30px;font-size:1rem}
.btn--gold{background:var(--grad-gold);color:var(--gold-ink)}
.btn--gold:hover{color:var(--gold-ink);box-shadow:0 18px 50px -20px rgba(201,169,97,.55)}
.btn--ghost{border-color:var(--border-strong);color:var(--text)}
.btn--ghost:hover{color:var(--text);border-color:var(--subtle)}
.btn--on-ink{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.06);color:#fff}
.btn--on-ink:hover{color:#fff;background:rgba(255,255,255,.12)}

/* --- header --------------------------------------------------------------- */
.header{position:sticky;top:0;z-index:60;padding-block:14px;
  background:var(--header-bg);backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid var(--border)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:16px 24px}
.brand{display:inline-flex;align-items:center;gap:11px;flex:none}
.brand__word{display:inline-flex;align-items:baseline;gap:7px}
.brand__name{font-family:var(--f-display);font-weight:600;font-size:1.3rem;letter-spacing:-.02em}
.brand__name b{color:var(--gold);font-weight:600}
.brand__sub{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--subtle)}
.nav{display:flex;align-items:center;gap:2px;font-size:.92rem;font-weight:500}
.nav a{padding:8px 13px;border-radius:var(--pill);color:var(--muted)}
.nav a:hover{color:var(--text);background:var(--surface)}
.nav>.btn{display:none}
.header__cta{display:flex;align-items:center;gap:10px}
.burger{display:none;width:42px;height:42px;border-radius:var(--pill);
  border:1px solid var(--border-strong);position:relative;flex:none}
.burger span,.burger span::before,.burger span::after{content:"";position:absolute;
  left:50%;top:50%;width:18px;height:2px;background:var(--text);border-radius:2px;
  translate:-50% -50%;transition:translate .3s var(--ease),rotate .3s var(--ease),background .2s}
.burger span::before{translate:-50% -7px}
.burger span::after{translate:-50% 5px}

/* --- hero ----------------------------------------------------------------- */
.hero{position:relative;background:var(--grad-ink);color:#fff;overflow:hidden}
.hero__hex{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  fill:none;stroke:var(--navy-line);stroke-width:1;opacity:.2;
  -webkit-mask-image:radial-gradient(72% 78% at 62% 34%,#000,transparent 76%);
  mask-image:radial-gradient(72% 78% at 62% 34%,#000,transparent 76%)}
.hero__glow{position:absolute;top:-180px;right:-120px;width:680px;height:680px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(201,169,97,.18),rgba(201,169,97,0) 66%)}
.hero__inner{position:relative;display:flex;flex-wrap:wrap;gap:64px;align-items:center;
  padding-block:clamp(72px,10vw,120px) clamp(72px,9vw,116px)}
.hero__copy{flex:1 1 480px;min-width:0}
.hero h1{margin-bottom:26px}
.hero h1 em{color:var(--gold-light)}
.hero__lead{font-size:1.24rem;line-height:1.6;color:var(--on-navy);max-width:52ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin:38px 0 34px}
.hero__signals{display:flex;flex-wrap:wrap;gap:12px 26px;font-size:.92rem;color:var(--on-navy-dim)}
.hero__signals li{display:inline-flex;align-items:center;gap:9px}
.hero__visual{flex:1 1 360px;min-width:0;display:flex;justify-content:center}
.honeycomb{width:100%;max-width:474px;height:auto}
.honeycomb .hc__n{font-family:var(--f-display);font-weight:600;font-size:19px;
  fill:#fff;text-anchor:middle}
.honeycomb .hc__r{font-family:var(--f-sans);font-size:10.5px;letter-spacing:1px;
  fill:rgba(255,255,255,.62);text-anchor:middle}
.honeycomb path{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* --- bandeau de confiance ------------------------------------------------- */
.trust{background:var(--navy);border-top:1px solid rgba(255,255,255,.07)}
.trust__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px 22px;padding-block:24px;font-size:.88rem;color:var(--on-navy-dim)}
.trust__sep{color:var(--navy-line)}
.trust strong{color:var(--gold-light);font-weight:600}

/* --- têtes de section ----------------------------------------------------- */
.head{max-width:760px;margin:0 auto clamp(44px,6vw,62px);text-align:center}
.head--left{margin-inline:0;text-align:left}
.head p{font-size:1.1rem;color:var(--muted);margin-top:18px}
.head--left p{margin-top:14px}

.cols3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:44px;max-width:1120px}
.cols3 p{font-size:1.04rem;line-height:1.72;color:var(--muted)}

/* --- cartes produit ------------------------------------------------------- */
.grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:24px}
.card{display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--border);border-radius:var(--r);padding:30px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:var(--sh-lg)}
.card--tint{background:var(--bg)}
.badge{display:inline-flex;align-items:center;font-size:.72rem;font-weight:700;
  letter-spacing:.04em;padding:5px 11px;border-radius:var(--pill);width:fit-content}
.badge--ok{background:var(--ok-bg);color:var(--ok-fg)}
.badge--soon{background:var(--soon-bg);color:var(--soon-fg)}
.badge--beta{background:var(--beta-bg);color:var(--beta-fg)}
.badge--quote{background:var(--quote-bg);color:var(--quote-fg)}
.badge--neutral{background:var(--neutral-bg);color:var(--neutral-fg)}
.card__badge{margin:20px 0 12px}
.card h3{margin-bottom:6px}
.card__tag{font-size:.87rem;color:var(--subtle);margin-bottom:14px}
.card p{font-size:.96rem;line-height:1.6;color:var(--muted);margin-bottom:22px}
.card__link{margin-top:auto;font-size:.9rem;font-weight:600;color:var(--gold-700)}
.card__meta{margin-top:auto;font-size:.82rem;color:var(--faint)}
.card--post h3{font-size:1.2rem;line-height:1.28;letter-spacing:-.01em;margin:18px 0 12px}
.card--post p{font-size:.94rem;margin-bottom:20px}

/* --- arguments ------------------------------------------------------------ */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2px;background:var(--border);border:1px solid var(--border);
  border-radius:18px;overflow:hidden}
.feature{background:var(--bg);padding:36px 32px}
.feature__head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.feature h3{font-size:1.2rem;letter-spacing:-.01em}
.feature p{font-size:.96rem;line-height:1.65;color:var(--muted)}

/* --- chiffres ------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:32px;text-align:center}
.stat__n{font-family:var(--f-display);font-size:clamp(2.4rem,1.6rem + 2.2vw,3.4rem);
  font-weight:600;line-height:1}
.stat__n--gold{color:var(--gold-light)}
.stat__l{font-size:.92rem;color:var(--on-navy-dim);margin-top:12px}

/* --- bandeau vitrine ------------------------------------------------------ */
.banner{display:flex;flex-wrap:wrap;gap:32px 44px;align-items:center;
  justify-content:space-between;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:clamp(30px,4vw,48px)}
.banner__copy{flex:1 1 420px;min-width:0}
.banner h2{font-size:clamp(1.6rem,1.2rem + 1.2vw,2rem);margin-bottom:14px}
.banner p{font-size:1.02rem;color:var(--muted);max-width:52ch}
.banner strong{color:var(--text)}

/* --- citations ------------------------------------------------------------ */
.quote{display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--border);border-radius:var(--r);padding:34px}
.quote blockquote{font-family:var(--f-display);font-size:1.1rem;line-height:1.55;
  color:var(--text);margin:22px 0 26px}
.quote__who{margin-top:auto;padding-top:20px;border-top:1px solid var(--hairline)}
.quote__who strong{display:block;font-size:.9rem;font-weight:600}
.quote__who span{font-size:.83rem;color:var(--subtle)}

/* --- FAQ ----------------------------------------------------------------- */
.faq{max-width:880px;margin-inline:auto}
.faq__item{border-bottom:1px solid var(--border)}
.faq__q{list-style:none;width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:22px;padding:24px 0;text-align:left;font-size:1.06rem;font-weight:600;color:var(--text)}
.faq__q::-webkit-details-marker{display:none}
.faq__q::marker{content:""}
.faq__ico{flex:none;width:26px;height:26px;position:relative}
.faq__ico::before,.faq__ico::after{content:"";position:absolute;left:50%;top:50%;
  background:var(--gold-700);border-radius:2px;translate:-50% -50%;
  transition:rotate .3s var(--ease),opacity .2s}
.faq__ico::before{width:14px;height:2px}
.faq__ico::after{width:2px;height:14px}
.faq__item[open] .faq__ico::after{rotate:90deg;opacity:0}
.faq__a{overflow:hidden;max-height:0;transition:max-height .35s var(--ease)}
.faq__item[open] .faq__a{max-height:520px}
.faq__a p{font-size:1rem;line-height:1.7;color:var(--muted);margin-bottom:26px;max-width:68ch}

/* --- CTA ----------------------------------------------------------------- */
.cta{position:relative;overflow:hidden;background:var(--grad-ink);color:#fff;
  border-radius:var(--r-xl);padding:clamp(48px,7vw,80px) clamp(28px,5vw,56px);text-align:center}
.cta__glow{position:absolute;top:-160px;left:50%;translate:-50% 0;width:620px;height:620px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(201,169,97,.22),rgba(201,169,97,0) 66%)}
.cta__inner{position:relative}
.cta .seal{margin:0 auto 32px}
.cta p{font-size:1.1rem;color:rgba(255,255,255,.8);max-width:52ch;margin-inline:auto;margin-top:18px}
.cta__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:36px}

/* --- footer -------------------------------------------------------------- */
.footer{background:var(--bg);border-top:1px solid var(--border);
  padding-top:76px;padding-bottom:30px}
.footer__grid{display:flex;flex-wrap:wrap;gap:40px;margin-bottom:52px}
.footer__brand{flex:1 1 280px;min-width:0}
.footer__brand .brand{margin-bottom:18px}
.footer__brand p{font-size:.92rem;line-height:1.65;color:var(--subtle);
  margin-bottom:14px;max-width:34ch}
.footer__brand a{font-size:.92rem;color:var(--gold-700);font-weight:600}
.footer__links{flex:1 1 440px;min-width:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:32px}
.footer h4{font-size:.76rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);margin-bottom:18px}
.footer__links ul{display:grid;gap:11px;font-size:.92rem}
.footer__links a{color:var(--muted)}
.footer__bottom{border-top:1px solid var(--border);padding-top:26px;display:flex;
  flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.84rem;color:var(--faint)}

/* --- révélation au scroll ------------------------------------------------ */
[data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:var(--d,0ms)}
[data-reveal].is-in{opacity:1;transform:none}


/* ==========================================================================
   Thème sombre — reprend les paires de la V4, appliquées aux tokens V5.
   ========================================================================== */
:root[data-theme=dark]{
  --bg:#070f1c; --white:#0d1a30; --surface:#122337;
  --border:#1d3050; --border-strong:#284069; --hairline:#1d3050;
  --header-bg:rgba(7,15,28,.82);
  --text:#eef3fb; --muted:#b8c4d6; --subtle:#8595ad; --faint:#8595ad;
  --gold:#dcc07e; --gold-700:#cbab63;
  --ok-bg:#0d3a2b; --ok-fg:#7fe9c2;
  --soon-bg:#38280c; --soon-fg:#f0cf8c;
  --beta-bg:#12224a; --beta-fg:#93b4ff;
  --quote-bg:#241d0d; --quote-fg:#f2e4bf;
  --neutral-bg:#122337; --neutral-fg:#b8c4d6;
  --sh:0 10px 30px -12px rgba(0,0,0,.55);
  --sh-lg:0 30px 60px -24px rgba(0,0,0,.65);
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --bg:#070f1c; --white:#0d1a30; --surface:#122337;
    --border:#1d3050; --border-strong:#284069; --hairline:#1d3050;
    --header-bg:rgba(7,15,28,.82);
    --text:#eef3fb; --muted:#b8c4d6; --subtle:#8595ad; --faint:#8595ad;
    --gold:#dcc07e; --gold-700:#cbab63;
    --ok-bg:#0d3a2b; --ok-fg:#7fe9c2;
    --soon-bg:#38280c; --soon-fg:#f0cf8c;
    --beta-bg:#12224a; --beta-fg:#93b4ff;
    --quote-bg:#241d0d; --quote-fg:#f2e4bf;
    --neutral-bg:#122337; --neutral-fg:#b8c4d6;
    --sh:0 10px 30px -12px rgba(0,0,0,.55);
    --sh-lg:0 30px 60px -24px rgba(0,0,0,.65);
  }
}
/* Le sceau du header garde son hexagone navy : sur fond sombre il faut la
   variante éclaircie, sinon il se fond dans l'arrière-plan. */
:root[data-theme=dark] .brand .seal path:first-child{fill:#16335c;stroke:#2f5590;stroke-width:1.6}
@media(prefers-color-scheme:dark){
  :root:not([data-theme=light]) .brand .seal path:first-child{fill:#16335c;stroke:#2f5590;stroke-width:1.6}
}

/* --- bascule clair / sombre --------------------------------------------- */
.theme-toggle{width:38px;height:38px;border-radius:var(--pill);display:inline-grid;
  place-items:center;border:1px solid var(--border-strong);color:var(--subtle);
  flex:none;transition:color .2s,border-color .2s,rotate .2s}
.theme-toggle:hover{color:var(--text);rotate:-12deg}
.theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .sun{display:none}
:root[data-theme=dark] .theme-toggle .sun{display:block}
:root[data-theme=dark] .theme-toggle .moon{display:none}
@media(prefers-color-scheme:dark){
  :root:not([data-theme=light]) .theme-toggle .sun{display:block}
  :root:not([data-theme=light]) .theme-toggle .moon{display:none}
}

/* ==========================================================================
   Points de rupture — repris de la V4
   ========================================================================== */
@media(max-width:940px){
  .nav,.header__cta .btn{display:none}
  .header__cta .theme-toggle{display:inline-grid}
  .burger{display:block}
  .nav.is-open{display:flex;flex-direction:column;align-items:stretch;gap:4px;
    position:fixed;inset:82px 16px auto;padding:16px;background:var(--white);
    border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-lg);
    max-height:calc(100dvh - 110px);overflow-y:auto;z-index:70}
  .nav.is-open a{padding:12px 14px;font-size:1rem}
  .nav.is-open .btn{display:inline-flex;margin-top:8px}
  body.menu-open .burger span{background:transparent}
  body.menu-open .burger span::before{translate:-50% -50%;rotate:45deg}
  body.menu-open .burger span::after{translate:-50% -50%;rotate:-45deg}
}
@media(max-width:620px){
  .hero__lead{font-size:1.1rem}
  .hero__cta .btn{width:100%}
  .feature{padding:28px 24px}
  .card{padding:24px}
}
@media(max-width:480px){
  .footer__links{grid-template-columns:1fr}
  .trust__sep{display:none}
  .trust__inner{flex-direction:column;gap:8px}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;
    scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
}

/* ==========================================================================
   V5 — familles de composants des pages internes
   Ajoutées après l'accueil : tarifs, comparatif, étapes, corps d'article,
   en-tête de page interne, blocs deux colonnes.
   ========================================================================== */

/* --- en-tête de page interne --------------------------------------------- */
/* Volontairement clair, pas le dégradé navy du hero : la page d'accueil garde
   son entrée sombre comme signature, les pages internes respirent. */
.page-hero{padding-top:clamp(56px,7vw,84px);padding-bottom:clamp(36px,5vw,56px);
  border-bottom:1px solid var(--border);background:var(--bg)}
.page-hero h1{font-size:clamp(2.1rem,1.5rem + 2.2vw,3.2rem);margin-bottom:20px}
.page-hero__lead{font-size:clamp(1.06rem,1rem + .4vw,1.24rem);line-height:1.6;
  color:var(--muted);max-width:60ch}
.page-hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.page-hero__meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px;
  font-size:.9rem;color:var(--subtle)}
.page-hero__meta li{display:inline-flex;align-items:center;gap:9px}

/* --- étapes -------------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.step{position:relative;padding:30px 28px;border-radius:var(--r);
  background:var(--white);border:1px solid var(--border)}
.step__n{width:46px;height:46px;display:grid;place-items:center;margin-bottom:18px;
  background:var(--grad-ink);color:var(--gold-light);
  font-family:var(--f-display);font-weight:600;font-size:1.15rem;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%)}
.step h3{font-size:1.12rem;letter-spacing:-.01em;margin-bottom:8px}
.step p{font-size:.94rem;line-height:1.65;color:var(--muted)}

/* --- tarifs -------------------------------------------------------------- */
.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:16px;align-items:stretch}
.plan{display:flex;flex-direction:column;position:relative;padding:26px 24px;
  border-radius:var(--r);background:var(--white);border:1px solid var(--border);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.plan:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.plan--feat{border-color:var(--gold);box-shadow:0 0 0 1.5px var(--gold),var(--sh)}
.plan--feat:hover{box-shadow:0 0 0 1.5px var(--gold),var(--sh-lg)}
.plan__badge{position:absolute;top:-12px;left:50%;translate:-50% 0;
  background:var(--grad-gold);color:var(--gold-ink);font-weight:700;font-size:.72rem;
  letter-spacing:.05em;padding:4px 14px;border-radius:var(--pill);white-space:nowrap}
.plan__name{font-family:var(--f-display);font-weight:600;font-size:1.18rem;
  letter-spacing:-.01em}
.plan__tag{font-size:.84rem;color:var(--subtle);margin-bottom:18px}
.plan__price{font-family:var(--f-display);font-size:2.5rem;font-weight:600;
  line-height:1;letter-spacing:-.02em}
.plan__price small{font-family:var(--f-sans);font-size:.8rem;font-weight:500;
  color:var(--subtle);letter-spacing:0}
.plan__unit{font-size:.84rem;color:var(--subtle);margin:8px 0 22px}
.plan ul{display:grid;gap:10px;margin-bottom:24px}
.plan li strong{color:var(--text);font-weight:600}
.plan li{font-size:.88rem;line-height:1.5;color:var(--muted);
  padding-left:26px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:5px;width:16px;height:12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 19' fill='none' stroke='%23b8964b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3,10 L13,2 L23,10'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat}
.plan .btn{margin-top:auto;width:100%}
.muted{color:var(--faint)}
.pricing__foot{text-align:center;color:var(--subtle);font-size:.92rem;margin-top:28px}

/* --- comparatif ---------------------------------------------------------- */
.compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.compare__col{padding:28px;border-radius:var(--r);background:var(--white);
  border:1px solid var(--border)}
.compare__col h3{display:flex;align-items:center;gap:12px;font-size:1.12rem;
  letter-spacing:-.01em;margin-bottom:18px}
.compare__col.is-us{border-color:var(--gold);box-shadow:0 0 0 1.5px var(--gold)}
.compare__col p{font-size:.95rem;line-height:1.65;color:var(--muted)}
.compare__col p + p{margin-top:12px}
.compare__col .muted{font-size:.88rem;color:var(--faint)}
.compare__col h3 .badge{font-weight:700}
.compare__col ul{display:grid;gap:11px}
.compare__col li{font-size:.92rem;line-height:1.55;color:var(--muted);
  padding-left:24px;position:relative}
.compare__col li::before{content:"—";position:absolute;left:0;color:var(--faint)}
.compare__col.is-us li::before{content:"";top:5px;width:15px;height:11px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 19' fill='none' stroke='%23b8964b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3,10 L13,2 L23,10'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat}

/* --- bloc deux colonnes -------------------------------------------------- */
.feature2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(32px,5vw,64px);align-items:center}
.feature2 + .feature2{margin-top:clamp(56px,8vw,96px)}
.feature2__media{border-radius:var(--r-lg);background:var(--grad-ink);
  aspect-ratio:5/4;display:grid;place-content:center;justify-items:center;gap:16px;
  padding:36px;text-align:center;color:#fff;overflow:hidden}
.feature2__media p{font-size:.9rem;color:rgba(255,255,255,.72);max-width:32ch}
.feature2__media strong{font-family:var(--f-display);font-size:1.25rem;
  font-weight:600;color:var(--gold-light)}
.feature2 h2{font-size:clamp(1.7rem,1.3rem + 1.4vw,2.3rem);margin-bottom:16px}
.feature2 p{color:var(--muted)}
.checks{display:grid;gap:12px;margin-top:22px}
.checks li{position:relative;padding-left:30px;color:var(--muted);
  font-size:.96rem;line-height:1.6}
.checks li::before{content:"";position:absolute;left:0;top:6px;width:18px;height:13px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 19' fill='none' stroke='%23b8964b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3,10 L13,2 L23,10'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat}

/* --- corps d'article ----------------------------------------------------- */
.prose{max-width:760px;margin-inline:auto}
.prose > * + *{margin-top:1.15em}
.prose p{font-size:1.06rem;line-height:1.78;color:var(--muted)}
.prose h2{font-size:clamp(1.5rem,1.2rem + 1vw,1.85rem);margin-top:2em;
  padding-top:1.1em;border-top:1px solid var(--border)}
.prose h3{font-size:1.24rem;margin-top:1.6em}
.prose ul,.prose ol{display:grid;gap:10px;padding-left:0}
.prose ul li{position:relative;padding-left:28px;font-size:1.02rem;
  line-height:1.7;color:var(--muted)}
.prose ul li::before{content:"";position:absolute;left:0;top:8px;width:16px;height:12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 19' fill='none' stroke='%23b8964b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3,10 L13,2 L23,10'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat}
.prose ol{counter-reset:o;list-style:none}
.prose ol li{counter-increment:o;position:relative;padding-left:34px;
  font-size:1.02rem;line-height:1.7;color:var(--muted)}
.prose ol li::before{content:counter(o);position:absolute;left:0;top:2px;
  width:22px;height:22px;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:600;font-size:.8rem;
  color:var(--gold-ink);background:var(--grad-gold);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%)}
.prose a{color:var(--gold-700);text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--text);font-weight:600}
.prose blockquote{border-left:3px solid var(--gold);padding:6px 0 6px 22px;
  font-family:var(--f-display);font-size:1.15rem;line-height:1.6;color:var(--text)}
.prose table{width:100%;border-collapse:collapse;font-size:.95rem}
.prose th,.prose td{text-align:left;padding:13px 14px;
  border-bottom:1px solid var(--border)}
.prose th{background:var(--surface);font-weight:600;color:var(--text);
  font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}
.prose td{color:var(--muted)}
.prose figure{margin-top:1.6em}
.prose figcaption{font-size:.85rem;color:var(--faint);margin-top:10px}
.prose__meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.86rem;
  color:var(--faint);margin-bottom:8px}

.callout{position:relative;padding:22px 24px 22px 26px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--border)}
.callout::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:3px;
  background:var(--grad-gold);border-radius:3px}
.callout p{font-size:.98rem;line-height:1.7;color:var(--muted)}
.callout strong{color:var(--text)}

/* --- table des matières -------------------------------------------------- */
.toc{padding:24px 26px;border-radius:var(--r);background:var(--bg);
  border:1px solid var(--border)}
.toc h4{font-size:.76rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.toc ol{display:grid;gap:9px;list-style:none;counter-reset:t;padding-left:0}
.toc li{font-size:.94rem}
.toc a{color:var(--muted)}
.toc a:hover{color:var(--gold-700)}

@media(max-width:620px){
  .plan{padding:22px 20px}
  .prose p,.prose ul li,.prose ol li{font-size:1rem}
  .prose h2{margin-top:1.6em}
}


/* ==========================================================================
   Menu déroulant « Produits »
   Rétabli : la V4 avait un déroulant (.nav__dd/.nav__menu), la V5 livrée l'a
   remplacé par un lien vers #solutions — depuis une page produit il fallait
   repasser par l'accueil pour changer de produit. Le brief autorise ces ajouts
   ici même : « tout ce qui manque s'ajoute dans iagov-v5.css, avec les tokens
   existants ». Aucun token nouveau n'est introduit.
   ========================================================================== */
.nav__dd{position:relative}
.nav__dd>a::after{content:"";display:inline-block;width:5px;height:5px;margin-left:7px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  rotate:45deg;translate:0 -2px;transition:rotate .25s var(--ease)}
.nav__dd:hover>a::after,.nav__dd:focus-within>a::after{rotate:225deg;translate:0 1px}
.nav__menu{position:absolute;top:calc(100% + 8px);left:50%;translate:-50% 0;
  min-width:312px;padding:10px;display:grid;gap:2px;
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
.nav__dd:hover .nav__menu,.nav__dd:focus-within .nav__menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav__menu a{display:grid;grid-template-columns:30px 1fr;align-items:center;gap:12px;
  padding:9px 11px;border-radius:var(--r)}
.nav__menu a:hover{background:var(--surface)}
.nav__menu svg{display:block;width:30px;height:30px}
.nav__menu strong{display:block;font-size:.9rem;font-weight:600;color:var(--text)}
.nav__menu span span{display:block;font-size:.77rem;color:var(--subtle)}

/* Dans le panneau burger, le déroulant est déjà déplié : pas de survol au doigt. */
.nav.is-open .nav__dd{display:block}
.nav.is-open .nav__menu{position:static;translate:none;transform:none;opacity:1;
  visibility:visible;min-width:0;padding:2px 0 6px 12px;background:transparent;
  border:0;box-shadow:none}
.nav.is-open .nav__dd>a::after{display:none}


/* ==========================================================================
   Compatibilité V4 -> V5
   Quatre classes utilitaires de la V4 portaient du style réel et n'ont pas
   d'équivalent nommé en V5. Sans ces règles, leur effet est simplement perdu
   sur les pages converties (intro non hiérarchisée, contenu pleine largeur,
   boutons qui ne remplissent plus leur colonne). Valeurs alignées sur les
   équivalents V5 : .lead sur .page-hero__lead, .maxw-narrow sur .prose.
   ========================================================================== */
.lead{font-size:clamp(1.06rem,1rem + .4vw,1.24rem);line-height:1.6;color:var(--muted);max-width:60ch}
.maxw-narrow{max-width:760px;margin-inline:auto}
.text-center{text-align:center}
.btn--block{width:100%}

/* La flèche des liens et boutons : la V4 l'animait au survol. On garde ce
   micro-mouvement, sinon les 75 <span class="arrow"> deviennent inertes. */
.btn .arrow,.card__link .arrow{transition:transform .25s var(--ease)}
.btn:hover .arrow,.card:hover .card__link .arrow{transform:translate(4px)}


/* ==========================================================================
   page-hero : y porter le langage de la marque
   Le brief veut les pages internes CLAIRES (« la page d'accueil garde son
   entrée sombre comme signature, les pages internes respirent »). Mais la
   règle livrée se réduisait à `background:var(--bg)` + un filet : ni texture,
   ni lueur, ni accent — d'où l'impression de page fade à côté des pages
   produit, qui ont les quatre.
   On ajoute donc, en restant clair, les deux motifs du héros : la trame de
   points champagne (celle des visuels OG et du bloc .cta) et la lueur
   champagne en haut à droite. Mêmes valeurs rgba que .hero__glow, donc même
   famille visuelle. Tout en CSS : aucun markup à toucher sur les 20 pages.
   ========================================================================== */
.page-hero{position:relative;overflow:hidden}
.page-hero>*{position:relative;z-index:1}

/* trame de points, estompée vers le bas pour ne pas concurrencer le texte */
.page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(201,169,97,.18) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(82% 92% at 72% 8%,#000,transparent 78%);
  mask-image:radial-gradient(82% 92% at 72% 8%,#000,transparent 78%)}

/* lueur champagne, reprise de .hero__glow */
.page-hero::after{content:"";position:absolute;top:-200px;right:-140px;
  width:640px;height:640px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(201,169,97,.17),rgba(201,169,97,0) 66%)}

/* le fil d'Ariane et le badge des articles gardent leur place au-dessus */
.page-hero .card__link,.page-hero .badge{position:relative;z-index:2}


/* ==========================================================================
   page-hero en navy — demande explicite : « juste le haut comme sur toutes
   les autres ». Le brief V5 le voulait clair (« les pages internes
   respirent »), mais l'écart avec les pages produit était trop visible : on
   aligne. La trame de points et la lueur champagne ajoutées plus haut
   fonctionnent maintenant sur navy, exactement comme dans .hero.
   ========================================================================== */
.page-hero{background:var(--grad-ink);color:#fff;border-bottom:0}
.page-hero h1{color:#fff}
.page-hero h1 em{color:var(--gold-light)}
.page-hero .eyebrow{color:var(--gold-light)}
.page-hero__lead,.page-hero .lead{color:var(--on-navy)}
.page-hero .muted,.page-hero .prose__meta,.page-hero__meta{color:var(--on-navy-dim)}
.page-hero .card__link{color:var(--gold-light)}
/* le fil d'Ariane « Tous les articles » et le badge de rubrique restent nets */
.page-hero .badge{background:rgba(255,255,255,.10);color:#fff;
  border-color:rgba(255,255,255,.22)}
/* la trame et la lueur montent en intensité : sur navy, il faut plus de
   contraste que sur le fond crème pour rester perceptibles */
.page-hero::before{background-image:radial-gradient(circle,rgba(201,169,97,.22) 1px,transparent 1px)}
.page-hero::after{background:radial-gradient(circle,rgba(201,169,97,.20),rgba(201,169,97,0) 66%)}