/* ===========================================================================
   insights.css — feuille partagée du cluster /insights (carrousels en pages SEO).
   Entièrement scopée sous .ix-page : aucune fuite vers le header/footer ni les
   autres pages. Identité « BD moderne » : fond bleu nuit profond + lueurs de
   marque (indigo→magenta→teal), étoiles/sparkles, titrages Bricolage très gras
   en blanc avec mots surlignés, cartes blanches à pastilles dégradées.
   ⚠️ Contrat de classes inchangé : insights.js dépend de .ix-article,
   .ix-stage-img, .ix-counter b, .ix-prev/.ix-next, .ix-dots button, .ix-panel.
   =========================================================================== */

/* Le fond nuit déborde sur tout le viewport (header/footer clairs gardent leur
   propre fond opaque). :has cible le body uniquement quand une .ix-page existe. */
body:has(.ix-page){ background:#070a1f; }

.ix-page{
  --ix-night:#070a1f; --ix-night2:#0b1030; --ix-panel-bg:#0e1430;
  --ix-card:#ffffff; --ix-card-ink:#141a33; --ix-card-muted:#5a6178; --ix-card-line:#e7e9f3;
  --ix-ink:#e9ecf8; --ix-soft:#c3c9e2; --ix-muted:#8e96b8; --ix-faint:#6b7299;
  --ix-indigo:#7c8cff; --ix-indigo-d:#5062ff; --ix-indigo-on:#aab4ff;
  --ix-teal:#54e6c8; --ix-pink:#ed3d74; --ix-gold:#f4c45a;
  --ix-line:rgba(255,255,255,.10); --ix-line2:rgba(255,255,255,.16);
  --ix-grad:linear-gradient(90deg,#5062ff 0%,#ed3d74 52%,#54e6c8 100%);
  --ix-grad-text:linear-gradient(96deg,#8c9bff 0%,#54e6c8 100%);
  --ix-glass:rgba(255,255,255,.045);
  --ix-display:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;
  --ix-sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --ix-mono:'JetBrains Mono',ui-monospace,monospace;
  --ix-wrap:1100px; --ix-read:730px;
  position:relative; display:block; isolation:isolate;
  color:var(--ix-ink); background:var(--ix-night);
  background-image:
    radial-gradient(900px 520px at 14% -4%, rgba(80,98,255,.30), transparent 60%),
    radial-gradient(820px 520px at 92% 4%, rgba(237,61,116,.20), transparent 58%),
    radial-gradient(1000px 700px at 50% 118%, rgba(84,230,200,.16), transparent 60%),
    linear-gradient(180deg,#0a0e26 0%, #070a1f 46%, #080b22 100%);
  font-family:var(--ix-sans); font-size:1.0625rem; line-height:1.72;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
/* Champ d'étoiles discret, fixe, sous le contenu (zéro impact sur le scroll-spy). */
.ix-page::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.7;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 22%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 73% 14%, rgba(170,196,255,.50), transparent 60%),
    radial-gradient(1px 1px at 42% 62%, rgba(255,255,255,.40), transparent 60%),
    radial-gradient(1.6px 1.6px at 88% 71%, rgba(132,231,255,.45), transparent 60%),
    radial-gradient(1px 1px at 28% 84%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1.3px 1.3px at 61% 38%, rgba(255,255,255,.30), transparent 60%);
}
.ix-page *{ box-sizing:border-box; }
.ix-wrap{ position:relative; width:100%; max-width:var(--ix-wrap); margin:0 auto; padding:0 24px; }
.ix-read{ max-width:var(--ix-read); margin-inline:auto; }

/* Sparkle décoratif réutilisable (✦) — posé via les hooks data-spark. */
.ix-spark{ position:absolute; color:var(--ix-gold); font-size:1.4rem; line-height:1;
  filter:drop-shadow(0 0 10px rgba(244,196,90,.55)); pointer-events:none; z-index:0; }
.ix-spark.t{ color:var(--ix-teal); filter:drop-shadow(0 0 10px rgba(84,230,200,.5)); }

/* ---- Eyebrow / tag éditorial ---- */
.ix-eyebrow{
  display:inline-flex; align-items:center; gap:.62em;
  font-family:var(--ix-mono); font-weight:600; font-size:.74rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ix-indigo-on);
}
.ix-eyebrow::before{ content:""; width:30px; height:2px; border-radius:2px;
  background:var(--ix-grad); display:inline-block; }
.ix-tag{
  display:inline-block; font-family:var(--ix-mono); font-weight:600;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:rgba(124,140,255,.14);
  border:1px solid rgba(124,140,255,.36); border-radius:999px; padding:.36em .95em;
  box-shadow:0 0 0 1px rgba(124,140,255,.06), 0 8px 22px -16px rgba(80,98,255,.8);
}

/* ===================== HERO ===================== */
.ix-hero{ position:relative; padding:60px 0 10px; }
.ix-hero .ix-wrap{ display:grid; gap:36px; align-items:center; }
@media(min-width:920px){
  .ix-hero{ padding:84px 0 16px; }
  .ix-hero .ix-wrap{ grid-template-columns:1.05fr .95fr; gap:54px; }
}
.ix-hero-txt h1{
  font-family:var(--ix-display); font-weight:800;
  font-size:clamp(2.3rem,6vw,4rem); line-height:1.0;
  letter-spacing:-.02em; color:#fff; margin:.42em 0 .4em;
  text-wrap:balance;
}
/* Mot(s) surligné(s) dans le titre : <em>/<i>/.hl -> dégradé de marque. */
.ix-hero-txt h1 em, .ix-hero-txt h1 i, .ix-hero-txt h1 .hl{
  font-style:normal;
  background:var(--ix-grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ix-lede{
  font-family:var(--ix-sans); font-size:clamp(1.08rem,2.1vw,1.3rem);
  line-height:1.56; color:var(--ix-soft); margin:0 0 1.25em; font-weight:400;
}
.ix-byline{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6em;
  font-size:.9rem; color:var(--ix-muted);
}
.ix-byline b{ color:#fff; font-weight:700; }
.ix-byline .ix-dot{ width:4px; height:4px; border-radius:50%; background:var(--ix-faint); display:inline-block; }
.ix-hero-fig{ position:relative; margin:0; }
.ix-hero-fig img{
  display:block; width:100%; height:auto; max-height:78vh; object-fit:contain;
  border-radius:20px; border:1px solid var(--ix-line2);
  background:var(--ix-night2);
  box-shadow:0 40px 90px -42px rgba(80,98,255,.7), 0 0 0 1px rgba(255,255,255,.04);
}
.ix-hero-fig::after{ content:""; position:absolute; inset:-1px; border-radius:21px; padding:1px;
  background:var(--ix-grad); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.5; pointer-events:none; }

/* ===================== CORPS — planche par planche ===================== */
.ix-body{ padding:36px 0 8px; }
.ix-step{ padding:30px 0; }
.ix-step + .ix-step{ border-top:1px solid var(--ix-line); }
.ix-figure{ margin:0 auto 26px; max-width:560px; text-align:center; }
.ix-figure img{
  display:block; width:auto; height:auto; max-width:100%; max-height:82vh; margin-inline:auto;
  border-radius:16px; border:1px solid var(--ix-line2); background:var(--ix-night2);
  box-shadow:0 28px 60px -34px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.03);
}
.ix-figcaption{
  margin-top:.7em; font-size:.82rem; color:var(--ix-faint);
  text-align:center; font-style:italic;
}
.ix-text{ max-width:var(--ix-read); margin-inline:auto; }
.ix-text h2{
  font-family:var(--ix-display); font-weight:800;
  font-size:clamp(1.55rem,3.1vw,2.1rem); line-height:1.12;
  letter-spacing:-.014em; color:#fff; margin:0 0 .6em; text-wrap:balance;
}
.ix-text h2 em, .ix-text h2 i, .ix-text h2 .hl{ font-style:normal;
  background:var(--ix-grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ix-text p{ margin:0 0 1.05em; color:var(--ix-soft); }
.ix-text p:last-child{ margin-bottom:0; }
.ix-text a{ color:var(--ix-indigo-on); text-decoration:none;
  border-bottom:1px solid rgba(124,140,255,.4); transition:border-color .15s,color .15s; }
.ix-text a:hover{ color:var(--ix-teal); border-bottom-color:var(--ix-teal); }
.ix-text strong,.ix-text b{ color:#fff; font-weight:700; }
.ix-text em,.ix-text i{ font-style:italic; color:#dfe4ff; }

/* ---- Pull-quote (citation crawlable) ---- */
.ix-pull{
  max-width:780px; margin:6px auto 0; padding:6px 0 0;
  position:relative; text-align:center;
}
.ix-pull blockquote{
  margin:0; font-family:var(--ix-display); font-weight:700; font-style:normal;
  font-size:clamp(1.4rem,2.9vw,1.95rem); line-height:1.28; color:#fff;
  letter-spacing:-.01em;
}
.ix-pull blockquote::before{
  content:"\201C"; display:block; font-family:var(--ix-display); font-weight:800;
  font-size:3.4rem; line-height:.55;
  background:var(--ix-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:.16em;
}
.ix-pull cite{
  display:block; margin-top:1em; font-family:var(--ix-mono);
  font-style:normal; font-size:.76rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ix-faint);
}
.ix-step.is-quote{ background:radial-gradient(680px 240px at 50% 50%, rgba(124,140,255,.10), transparent 70%); }

/* ---- Encadré source / référence ---- */
.ix-ref{
  max-width:var(--ix-read); margin:18px auto 0; padding:16px 20px;
  background:var(--ix-glass); border:1px solid var(--ix-line);
  border-left:3px solid transparent;
  border-image:linear-gradient(180deg,#5062ff,#54e6c8) 1; border-radius:0 12px 12px 0;
  font-size:.93rem; line-height:1.55; color:var(--ix-soft);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.ix-ref b{ color:#fff; }
.ix-ref a{ color:var(--ix-indigo-on); text-decoration:none; border-bottom:1px solid rgba(124,140,255,.4); }
.ix-ref .ix-src{ display:block; margin-top:.5em; font-family:var(--ix-mono); font-size:.74rem; color:var(--ix-faint); }

/* ===================== CLÔTURE ===================== */
.ix-close{
  position:relative; margin-top:18px; padding:54px 0 60px;
  background:linear-gradient(180deg,transparent, rgba(124,140,255,.08));
  border-top:1px solid var(--ix-line);
}
.ix-close .ix-read{ text-align:center; }
.ix-close h2{
  font-family:var(--ix-display); font-weight:800;
  font-size:clamp(1.7rem,3.6vw,2.3rem); line-height:1.1; color:#fff; margin:0 0 .55em; text-wrap:balance;
}
.ix-close h2 em, .ix-close h2 .hl{ font-style:normal;
  background:var(--ix-grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ix-close p{ margin:0 auto 1.6em; max-width:600px; color:var(--ix-soft); }
.ix-ctas{ display:flex; gap:13px; justify-content:center; flex-wrap:wrap; }
.ix-btn{
  display:inline-flex; align-items:center; gap:.5em; font-family:var(--ix-sans);
  font-weight:700; font-size:.97rem; text-decoration:none; border-radius:999px;
  padding:13px 26px; transition:transform .15s,box-shadow .2s,background .2s,border-color .2s,filter .2s;
}
.ix-btn.primary{ background:var(--ix-grad); background-size:160% 100%; color:#fff;
  box-shadow:0 18px 36px -16px rgba(80,98,255,.85); }
.ix-btn.primary:hover{ transform:translateY(-2px); background-position:100% 0; filter:saturate(1.1); }
.ix-btn.ghost{ background:rgba(255,255,255,.04); color:#fff; border:1.5px solid var(--ix-line2); }
.ix-btn.ghost:hover{ border-color:var(--ix-indigo); background:rgba(124,140,255,.12); }

/* ---- Lire aussi ---- */
.ix-related{ padding:46px 0 64px; border-top:1px solid var(--ix-line); }
.ix-related .ix-eyebrow{ display:block; text-align:center; margin-bottom:22px; }
.ix-rel-grid{ display:grid; gap:18px; grid-template-columns:1fr; }
@media(min-width:740px){ .ix-rel-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1000px){ .ix-rel-grid.is-3{ grid-template-columns:repeat(3,1fr); } }
/* Cartes blanches (façon planches BD) sur fond nuit. */
.ix-rel-card{
  position:relative; display:flex; flex-direction:column; gap:8px; padding:22px 22px 20px;
  background:var(--ix-card); color:var(--ix-card-ink);
  border:1px solid var(--ix-card-line); border-radius:16px; overflow:hidden;
  text-decoration:none; transition:transform .2s,box-shadow .2s; isolation:isolate;
}
.ix-rel-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--ix-grad); }
.ix-rel-card:hover{ transform:translateY(-5px); box-shadow:0 28px 50px -24px rgba(0,0,0,.7); }
.ix-rel-card .ix-rk{ margin-top:4px; font-family:var(--ix-mono); font-size:.71rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ix-indigo-d); }
.ix-rel-card h3{ font-family:var(--ix-display); font-weight:800; font-size:1.2rem; line-height:1.16; color:var(--ix-card-ink); margin:0; }
.ix-rel-card p{ margin:0; font-size:.92rem; color:var(--ix-card-muted); line-height:1.5; }
.ix-rel-card .ix-arr{ margin-top:auto; padding-top:8px; font-weight:700; color:var(--ix-indigo-d); font-size:.9rem; }

/* ===================== HUB /insights/ ===================== */
.ix-hub-hero{ position:relative; padding:72px 0 16px; text-align:center; }
.ix-hub-hero h1{
  font-family:var(--ix-display); font-weight:800;
  font-size:clamp(2.4rem,5.4vw,3.7rem); line-height:1.02; color:#fff; margin:.4em 0 .35em; text-wrap:balance;
}
.ix-hub-hero h1 em, .ix-hub-hero h1 .hl{ font-style:normal;
  background:var(--ix-grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ix-hub-hero .ix-lede{ max-width:680px; margin-inline:auto; }
.ix-hub{ padding:34px 0 72px; }
.ix-hub-grid{ display:grid; gap:24px; grid-template-columns:1fr; }
@media(min-width:680px){ .ix-hub-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1000px){ .ix-hub-grid{ grid-template-columns:repeat(3,1fr); } }
.ix-card{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--ix-card); color:var(--ix-card-ink);
  border:1px solid var(--ix-card-line); border-radius:20px;
  text-decoration:none;
  box-shadow:0 18px 40px -30px rgba(0,0,0,.85);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s;
}
.ix-card:hover{ transform:translateY(-7px); box-shadow:0 40px 70px -34px rgba(80,98,255,.55); }
.ix-card-cover{ display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:top center; background:var(--ix-night2); border-bottom:1px solid var(--ix-card-line); }
.ix-card-b{ display:flex; flex-direction:column; gap:9px; padding:20px 22px 22px; }
.ix-card-b .ix-rk{ font-family:var(--ix-mono); font-size:.71rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ix-indigo-d); }
.ix-card-b h2{ font-family:var(--ix-display); font-weight:800; font-size:1.3rem; line-height:1.14; color:var(--ix-card-ink); margin:0; }
.ix-card-b p{ margin:0; font-size:.93rem; line-height:1.5; color:var(--ix-card-muted); }
.ix-card-b .ix-arr{ margin-top:4px; font-weight:700; color:var(--ix-indigo-d); font-size:.9rem; }

/* ===================== a11y / responsive / motion ===================== */
.ix-page a:focus-visible,
.ix-page button:focus-visible{ outline:2.5px solid var(--ix-teal); outline-offset:3px; border-radius:4px; }
@media(max-width:520px){
  .ix-wrap{ padding:0 18px; }
  .ix-hero{ padding:44px 0 6px; }
}
@media (prefers-reduced-motion: reduce){
  .ix-page *{ transition:none !important; animation:none !important; }
  .ix-card:hover,.ix-rel-card:hover,.ix-btn.primary:hover{ transform:none; }
}

/* ===================== ARTICLE — lecteur synchronisé (carrousel ⟷ texte) ===================== */
/* Défilement doux scopé + offset header pour les sauts de planche. */
html:has(.ix-article){ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html:has(.ix-article){ scroll-behavior:auto; } }

.ix-duo-wrap{ padding:14px 0 6px; }

/* Planche en flux (mobile + sans JS) : empilée au-dessus de son texte, bornée à la hauteur d'écran. */
.ix-pfig{ margin:0 auto 18px; max-width:480px; text-align:center; }
.ix-pfig img{ display:block; width:auto; height:auto; max-width:100%; max-height:78vh; margin-inline:auto;
  border-radius:16px; border:1px solid var(--ix-line2); background:var(--ix-night2);
  box-shadow:0 28px 60px -34px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.03); }
.ix-panel{ padding:26px 0; scroll-margin-top:100px; }
.ix-panel + .ix-panel{ border-top:1px solid var(--ix-line); }
.ix-panel .ix-text{ max-width:var(--ix-read); margin-inline:auto; }

/* Scène = carrousel de gauche. N'apparaît qu'en mode synchronisé (classe .ix-on posée par JS, desktop). */
.ix-stage{ display:none; }
.ix-stage-img{ display:block; max-width:100%; max-height:74vh; width:auto; height:auto; margin:0 auto;
  border-radius:18px; border:1px solid var(--ix-line2); background:var(--ix-night2);
  box-shadow:0 36px 80px -36px rgba(80,98,255,.6), 0 0 0 1px rgba(255,255,255,.04); }
.ix-stage-ctrl{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:20px; }
.ix-stage-btn{ width:44px; height:44px; flex:none; border-radius:50%; border:1.5px solid var(--ix-line2);
  background:var(--ix-glass); color:#fff; font-size:1.5rem; line-height:1; cursor:pointer;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; transition:background .2s,border-color .2s,transform .15s; }
.ix-stage-btn:hover:not(:disabled){ border-color:var(--ix-indigo); background:rgba(124,140,255,.16); transform:translateY(-1px); }
.ix-stage-btn:disabled{ opacity:.3; cursor:default; }
.ix-counter{ font-family:var(--ix-mono); font-size:.85rem; color:var(--ix-muted); font-variant-numeric:tabular-nums; min-width:62px; text-align:center; }
.ix-counter b{ color:#fff; }
.ix-dots{ display:flex; flex-wrap:wrap; justify-content:center; gap:9px; list-style:none; margin:16px auto 0; padding:0; max-width:280px; }
.ix-dots button{ width:9px; height:9px; padding:0; border-radius:50%; border:1.5px solid var(--ix-line2); background:transparent; cursor:pointer; transition:background .2s,border-color .2s,transform .2s; }
.ix-dots button:hover{ border-color:var(--ix-indigo); }
.ix-dots button.is-active{ background:var(--ix-teal); border-color:var(--ix-teal); transform:scale(1.35); box-shadow:0 0 10px rgba(84,230,200,.6); }
.ix-stage-btn:focus-visible,.ix-dots button:focus-visible{ outline:2.5px solid var(--ix-teal); outline-offset:3px; }

@media(min-width:980px){
  .ix-article.ix-on .ix-duo{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:54px; align-items:start; }
  .ix-article.ix-on .ix-stage{ display:block; position:sticky; top:92px; height:calc(100vh - 116px); }
  .ix-article.ix-on .ix-stage-inner{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
  .ix-article.ix-on .ix-pfig{ display:none; }                 /* la planche passe sur la scène de gauche */
  .ix-article.ix-on .ix-panel{ border-top:none; min-height:80vh; display:flex; flex-direction:column; justify-content:center; padding:4vh 0; }
  .ix-article.ix-on .ix-panel .ix-text{ max-width:none; margin:0; }
  .ix-article.ix-on .ix-panel .ix-pull{ margin-left:0; margin-right:auto; text-align:left; }
}