/* ═══════════════════════════════════════════════════════════════════
   v3-polish.css — Couche "premium editorial" inspirée de index v3
   Superposition NON-destructive : évite tout conflit ::before/::after
   avec les pages en injectant des divs dédiés via shared.js.
   Lire APRÈS toutes les autres feuilles de style.
   ─────────────────────────────────────────────────────────────────── */

:root {
  --polish-ease: cubic-bezier(.22,1,.36,1);
  --polish-grain-opacity: .022;
}

/* ══════════ 1. NOISE GRAIN — texture papier luxe (body-wide) ══════════ */
.polish-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: var(--polish-grain-opacity);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px;
}
body.dark-hero .polish-grain {
  opacity: .028;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ══════════ 2. HERO AMBIENT GLOW — radial wash coloré ══════════ */
.hero { position: relative; }
.hero .hero-ambient-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 80% 15%, rgba(var(--page-accent-rgb, 77,128,240), .16) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 8% 92%, rgba(var(--page-accent-rgb, 77,128,240), .11) 0%, transparent 52%);
  opacity: .9;
  animation: polishAmbientBreath 16s ease-in-out infinite;
  mix-blend-mode: screen;
}
body:not(.dark-hero) .hero .hero-ambient-glow { mix-blend-mode: normal; opacity: .55; }
@keyframes polishAmbientBreath {
  0%, 100% { opacity: .85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.05); }
}

/* ══════════ 3. HERO CORNER FRAME — quatre ticks éditoriaux ══════════ */
.polish-hero-frame {
  position: absolute;
  inset: clamp(1.5rem, 3vh, 2.5rem) clamp(1.5rem, 4vw, 3rem);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transform: scale(.985);
  transition: opacity 1s var(--polish-ease) .15s,
              transform 1s var(--polish-ease) .15s;
  background:
    linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.28)) top    left  / 28px 1px no-repeat,
    linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.28)) top    left  / 1px 28px no-repeat,
    linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.28)) top    right / 28px 1px no-repeat,
    linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.28)) top    right / 1px 28px no-repeat,
    linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.28)) bottom left  / 28px 1px no-repeat,
    linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.28)) bottom left  / 1px 28px no-repeat,
    linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.28)) bottom right / 28px 1px no-repeat,
    linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.28)) bottom right / 1px 28px no-repeat;
}
body:not(.dark-hero) .polish-hero-frame {
  background:
    linear-gradient(rgba(30,42,66,.18), rgba(30,42,66,.18)) top    left  / 28px 1px no-repeat,
    linear-gradient(rgba(30,42,66,.18), rgba(30,42,66,.18)) top    left  / 1px 28px no-repeat,
    linear-gradient(rgba(30,42,66,.18), rgba(30,42,66,.18)) top    right / 28px 1px no-repeat,
    linear-gradient(rgba(30,42,66,.18), rgba(30,42,66,.18)) top    right / 1px 28px no-repeat,
    linear-gradient(rgba(30,42,66,.18), rgba(30,42,66,.18)) bottom left  / 28px 1px no-repeat,
    linear-gradient(rgba(30,42,66,.18), rgba(30,42,66,.18)) bottom left  / 1px 28px no-repeat,
    linear-gradient(rgba(30,42,66,.18), rgba(30,42,66,.18)) bottom right / 28px 1px no-repeat,
    linear-gradient(rgba(30,42,66,.18), rgba(30,42,66,.18)) bottom right / 1px 28px no-repeat;
}
body.loaded .polish-hero-frame { opacity: 1; transform: scale(1); }
@media (max-width: 640px) { .polish-hero-frame { display: none; } }

/* ══════════ 4. EYEBROW PILLS — glass premium + dot pulse + shine ══════════ */
/* Liquid-glass utilise .hero .hero-eyebrow (spec 0,2,1) + !important.
   On matche avec body.hero .hero-eyebrow (0,2,2) + !important. */
body .eyebrow,
body .why-eyebrow,
body .hero-eyebrow,
body .hero .eyebrow,
body .hero .why-eyebrow,
body .hero .hero-eyebrow {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: .55rem !important;
  /* Glass stack plus profond — blur augmenté + saturation + highlights internes */
  backdrop-filter: blur(26px) saturate(2) !important;
  -webkit-backdrop-filter: blur(26px) saturate(2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.08),
    inset 0 0 20px rgba(255,255,255,.06),
    0 10px 28px -12px rgba(var(--page-accent-rgb, 77,128,240), .45),
    0 2px 6px rgba(0,0,0,.12) !important;
  transition: transform .35s var(--polish-ease),
              box-shadow .35s var(--polish-ease),
              border-color .35s var(--polish-ease) !important;
}
body .eyebrow:hover,
body .why-eyebrow:hover,
body .hero-eyebrow:hover,
body .hero .eyebrow:hover,
body .hero .why-eyebrow:hover,
body .hero .hero-eyebrow:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(0,0,0,.08),
    inset 0 0 24px rgba(255,255,255,.09),
    0 14px 36px -12px rgba(var(--page-accent-rgb, 77,128,240), .58),
    0 3px 10px rgba(0,0,0,.14) !important;
}

/* Dot pulse INJECTÉ via JS comme <span class="polish-dot"> pour éviter
   conflits avec ::before existants de certaines pages. */
.polish-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  animation: polishPulseDot 2.4s ease-in-out infinite;
  flex-shrink: 0;
  display: inline-block;
}
@keyframes polishPulseDot {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .45; transform: scale(.78); }
}

/* Shine sweep — overlay via .polish-shine injecté JS */
.polish-shine {
  position: absolute;
  top: 0; left: -120%;
  width: 55%; height: 100%;
  background: linear-gradient(110deg,
              transparent 0%,
              rgba(255,255,255,.30) 50%,
              transparent 100%);
  transform: skewX(-18deg);
  transition: left .9s var(--polish-ease);
  pointer-events: none;
  z-index: 2;
}
.eyebrow:hover .polish-shine,
.why-eyebrow:hover .polish-shine,
.hero-eyebrow:hover .polish-shine,
.pill-border-anim:hover .polish-shine,
.btn-p:hover .polish-shine,
.btn-t:hover .polish-shine { left: 140%; }

/* ══════════ 5. CTA BUTTONS — depth premium + glossy sweep ══════════ */
.btn-p, .btn-t {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .4s var(--polish-ease),
              box-shadow .4s var(--polish-ease);
  text-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.btn-p:hover, .btn-t:hover {
  transform: translateY(-3px) scale(1.015);
}
/* Le shine sweep est ajouté par JS comme .polish-shine (défini ci-dessus).
   Les box-shadow restent pilotés par chaque page.css pour respecter la couleur. */

/* Ghost CTA */
.btn-g {
  transition: transform .35s var(--polish-ease),
              border-color .35s var(--polish-ease),
              background .35s var(--polish-ease),
              box-shadow .35s var(--polish-ease);
}
.btn-g:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(var(--page-accent-rgb, 77,128,240), .18);
}

/* ══════════ 6. CARDS — wash accent injecté via .polish-wash ══════════ */
/* Plutôt qu'écraser ::before/::after déjà utilisés par les pages,
   on injecte un <span class="polish-wash"> en premier enfant de chaque card. */
.rank-card,
.constat-card,
.step-card,
.feat-card,
.gamif-card,
.activity-card,
.partner-card,
.parents-card,
.philo-card {
  position: relative;
  isolation: isolate;
  /* Glass premium — blur plus ample + saturation 2x + highlights internes */
  backdrop-filter: blur(32px) saturate(2) !important;
  -webkit-backdrop-filter: blur(32px) saturate(2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(30,42,66,.06),
    inset 0 0 40px rgba(255,255,255,.04),
    0 1px 0 rgba(255,255,255,.45),
    0 14px 38px -18px rgba(30,42,66,.18),
    0 4px 12px rgba(30,42,66,.05) !important;
  transition: transform .5s var(--polish-ease),
              box-shadow .5s var(--polish-ease),
              border-color .35s var(--polish-ease),
              backdrop-filter .35s var(--polish-ease) !important;
}

/* Cards typées "stats / statement / testimonial" → texte centré */
.step-card,
.rank-card,
.philo-card,
.parents-card,
.partner-card {
  text-align: center !important;
}
.step-card > *:not(.polish-wash):not(.polish-vline),
.rank-card > *:not(.polish-wash):not(.polish-vline),
.philo-card > *:not(.polish-wash):not(.polish-vline),
.parents-card > *:not(.polish-wash):not(.polish-vline),
.partner-card > *:not(.polish-wash):not(.polish-vline) {
  margin-left: auto;
  margin-right: auto;
}

.polish-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .6s var(--polish-ease);
  background: radial-gradient(ellipse 85% 70% at 0% 0%,
              rgba(var(--page-accent-rgb, 77,128,240), .12) 0%,
              transparent 55%);
}
.polish-vline {
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 2px;
  background: linear-gradient(180deg,
              transparent 0%,
              rgb(var(--page-accent-rgb, 77,128,240)) 20%,
              rgb(var(--page-accent-rgb, 77,128,240)) 80%,
              transparent 100%);
  box-shadow: 0 0 14px rgba(var(--page-accent-rgb, 77,128,240), .55);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .55s var(--polish-ease);
  border-radius: 2px;
  z-index: 1;
  pointer-events: none;
}

.rank-card:hover      .polish-wash,
.constat-card:hover   .polish-wash,
.step-card:hover      .polish-wash,
.feat-card:hover      .polish-wash,
.gamif-card:hover     .polish-wash,
.activity-card:hover  .polish-wash,
.partner-card:hover   .polish-wash,
.parents-card:hover   .polish-wash,
.philo-card:hover     .polish-wash { opacity: 1; }

.rank-card:hover      .polish-vline,
.constat-card:hover   .polish-vline,
.step-card:hover      .polish-vline,
.feat-card:hover      .polish-vline,
.gamif-card:hover     .polish-vline,
.activity-card:hover  .polish-vline,
.partner-card:hover   .polish-vline,
.parents-card:hover   .polish-vline,
.philo-card:hover     .polish-vline { transform: scaleY(1); }

/* Lift premium — glass encore plus intense au hover */
.rank-card:hover,
.step-card:hover,
.feat-card:hover,
.gamif-card:hover,
.activity-card:hover,
.partner-card:hover,
.parents-card:hover,
.philo-card:hover {
  transform: translateY(-6px);
  backdrop-filter: blur(40px) saturate(2.4) !important;
  -webkit-backdrop-filter: blur(40px) saturate(2.4) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(30,42,66,.06),
    inset 0 0 48px rgba(255,255,255,.06),
    0 1px 0 rgba(255,255,255,.55),
    0 28px 58px -18px rgba(var(--page-accent-rgb, 77,128,240), .38),
    0 16px 36px -14px rgba(30, 42, 66, .16) !important;
  border-color: rgba(var(--page-accent-rgb, 77,128,240), .4) !important;
}

/* ══════════ 7. KPI NUMBERS — glow au hover ══════════ */
.hero-kpis > div {
  transition: transform .4s var(--polish-ease),
              border-color .4s var(--polish-ease),
              box-shadow .4s var(--polish-ease);
}
.hero-kpis > div:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px -16px rgba(var(--page-accent-rgb, 77,128,240), .38);
}
.kpi-num { transition: text-shadow .5s var(--polish-ease), transform .5s var(--polish-ease); }
.hero-kpis > div:hover .kpi-num {
  text-shadow: 0 0 26px rgba(var(--page-accent-rgb, 77,128,240), .50);
  transform: translateY(-1px);
}

/* ══════════ 8. SECTION NUMBERING — grand chiffre éditorial v3 ══════════ */
.polish-chapter-num {
  position: absolute;
  top: clamp(.75rem, 2vh, 1.5rem);
  right: clamp(1rem, 4vw, 3rem);
  font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
  font-weight: 300;
  font-size: clamp(4rem, 9vw, 8rem);
  line-height: .85;
  letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--page-accent-rgb, 77,128,240), .26);
  background: linear-gradient(180deg,
              rgba(var(--page-accent-rgb, 77,128,240), .10) 0%,
              transparent 70%);
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .9s var(--polish-ease), transform .9s var(--polish-ease);
}
section.polish-chaptered.in-view .polish-chapter-num {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════ 9. FOCUS RING premium ══════════ */
:focus-visible {
  outline: 2px solid rgb(var(--page-accent-rgb, 77,128,240)) !important;
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: 0 0 0 6px rgba(var(--page-accent-rgb, 77,128,240), .16);
}

/* ══════════ 10. HERO TITLES — lettrage editorial ══════════ */
.hero h1,
.hero-title-anim {
  font-feature-settings: 'kern' 1, 'liga' 1, 'ss01' 1;
  text-rendering: optimizeLegibility;
  text-wrap: balance;
}
/* Soulignement animé sous les spans accent du hero (via .polish-underline) */
.hero h1 .acc-r,
.hero h1 .acc-b,
.hero h1 .acc-o,
.hero h1 .acc-g,
.hero h1 .acc-t { position: relative; display: inline-block; }

.polish-underline {
  position: absolute;
  left: 0; right: 0;
  bottom: -.08em;
  height: 2px;
  background: linear-gradient(90deg,
              transparent,
              currentColor 20%,
              currentColor 80%,
              transparent);
  opacity: 0;
  transform: scaleX(.3);
  transform-origin: center;
  transition: opacity 1s var(--polish-ease) .5s,
              transform 1s var(--polish-ease) .5s;
  pointer-events: none;
}
.hero.hero-ready .polish-underline,
body.loaded .hero .polish-underline {
  opacity: .55;
  transform: scaleX(1);
}

/* ══════════ 11. FLOAT — utilitaire ══════════ */
.polish-float {
  animation: polishFloat 6s ease-in-out infinite;
  will-change: transform;
}
@keyframes polishFloat {
  0%, 100% { transform: translateY(0)   rotate(-1.5deg); }
  50%      { transform: translateY(-10px) rotate(1.5deg); }
}

/* ══════════ 12. LINKS inline — soulignement animé ══════════ */
main p a:not([class]),
main li a:not([class]) {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size .4s var(--polish-ease);
}
main p a:not([class]):hover,
main li a:not([class]):hover {
  background-size: 100% 1px;
}

/* ══════════ 13. NAV depth au scroll ══════════ */
nav {
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
}
nav.scrolled {
  box-shadow: 0 6px 22px -10px rgba(30,42,66,.14);
}

/* ══════════ 14. RESPECT prefers-reduced-motion ══════════ */
@media (prefers-reduced-motion: reduce) {
  .polish-grain { display: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ══════════ 15. (Fallback retiré) ══════════
   Les 4 pages déclarent --page-accent-rgb dans leur propre :root.
   Pas besoin de fallback ici — sinon il écrasait les pages. */

/* ══════════ 16. PILL-BORDER-ANIM — GLASS HALO (version qui reste) ══════════
   Overflow VISIBLE pour laisser vivre le border conic-gradient rotatif
   de shared.css::before. Glass profond + radial wash accent + halo animé. */
body .pill-border-anim {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background:
    radial-gradient(ellipse 120% 80% at 50% 50%,
      rgba(var(--page-accent-rgb, 77,128,240), .16) 0%,
      rgba(var(--page-accent-rgb, 77,128,240), .06) 40%,
      transparent 75%),
    linear-gradient(180deg,
      rgba(0,0,0,.50) 0%,
      rgba(0,0,0,.62) 100%) !important;
  backdrop-filter: blur(34px) saturate(2.2) !important;
  -webkit-backdrop-filter: blur(34px) saturate(2.2) !important;
  padding: 2.2rem 2.6rem !important;
  border-radius: 26px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.22),
    inset 0 0 80px rgba(255,255,255,.06),
    0 0 0 1px rgba(var(--page-accent-rgb, 77,128,240), .18),
    0 10px 28px -8px rgba(var(--page-accent-rgb, 77,128,240), .35),
    0 28px 64px -20px rgba(0,0,0,.55),
    0 6px 18px rgba(0,0,0,.24) !important;
  animation: pillHaloBreath 5s ease-in-out infinite;
  transition: transform .5s var(--polish-ease),
              box-shadow .5s var(--polish-ease),
              backdrop-filter .5s var(--polish-ease) !important;
}
@keyframes pillHaloBreath {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.28),
      inset 0 -1px 0 rgba(0,0,0,.22),
      inset 0 0 80px rgba(255,255,255,.06),
      0 0 0 1px rgba(var(--page-accent-rgb, 77,128,240), .18),
      0 10px 28px -8px rgba(var(--page-accent-rgb, 77,128,240), .35),
      0 28px 64px -20px rgba(0,0,0,.55),
      0 6px 18px rgba(0,0,0,.24);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.32),
      inset 0 -1px 0 rgba(0,0,0,.22),
      inset 0 0 100px rgba(var(--page-accent-rgb, 77,128,240), .08),
      0 0 0 1px rgba(var(--page-accent-rgb, 77,128,240), .28),
      0 14px 42px -8px rgba(var(--page-accent-rgb, 77,128,240), .5),
      0 28px 64px -20px rgba(0,0,0,.55),
      0 6px 18px rgba(0,0,0,.24);
  }
}
body .pill-border-anim > * {
  flex: 0 1 auto;
  position: relative;
  z-index: 2;
}
body .pill-border-anim:hover {
  transform: translateY(-4px) scale(1.01);
  animation-play-state: paused;
  backdrop-filter: blur(42px) saturate(2.5) !important;
  -webkit-backdrop-filter: blur(42px) saturate(2.5) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.22),
    inset 0 0 120px rgba(var(--page-accent-rgb, 77,128,240), .1),
    0 0 0 1px rgba(var(--page-accent-rgb, 77,128,240), .5),
    0 20px 52px -8px rgba(var(--page-accent-rgb, 77,128,240), .65),
    0 36px 80px -20px rgba(0,0,0,.6),
    0 8px 22px rgba(0,0,0,.28) !important;
}
body .pill-border-anim > div:nth-child(2) > div > div {
  letter-spacing: .07em !important;
}
body .pill-border-anim > div:nth-child(2) {
  gap: 1.8rem !important;
}
body .pill-border-anim > div:nth-child(2) > div[style*="font-size:1.2rem"] {
  font-size: 1.8rem !important;
  font-weight: 300 !important;
  opacity: .75;
  animation: chevronPulse 2.6s ease-in-out infinite;
  transform-origin: center;
}
@keyframes chevronPulse {
  0%, 100% { opacity: .65; transform: translateX(0); }
  50%      { opacity: 1;   transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  body .pill-border-anim { animation: none !important; }
  body .pill-border-anim > div:nth-child(2) > div[style*="font-size:1.2rem"] { animation: none !important; }
}