/* Influpact — styles propres au site (3D « Le pacte en orbite », menu, accessibilité).
   Tailwind est généré à part dans tailwind.css. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-var-latin.woff2') format('woff2-variations'), url('fonts/inter-var-latin.woff2') format('woff2');
}

:root {
  --ink: #0F172A;
  --indigo: #4F46E5;
  --violet: #7C3AED;
  --mint: #6EE7B7;
  --paper: #F8FAFC;
}

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 5.5rem; }
body { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }

.text-gradient {
  background: linear-gradient(90deg, var(--indigo), var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.text-gradient-creator {
  background: linear-gradient(90deg, var(--violet), #C026D3);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Accessibilité ---------- */
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--ink); color: #fff; padding: .75rem 1rem; border-radius: .5rem; font-weight: 600;
  transition: top .15s;
}
.skip-link:focus { top: 1rem; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--indigo); outline-offset: 3px; border-radius: 6px;
}
.on-dark a:focus-visible, .on-dark button:focus-visible { outline-color: #fff; }

/* ---------- Menu mobile ---------- */
.mobile-menu[hidden] { display: none; }
.menu-btn .bar { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s, opacity .2s; }
.menu-btn .bar + .bar { margin-top: 5px; }
.menu-btn[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Fond du hero ---------- */
.hero-bg {
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(124, 58, 237, .14), transparent 60%),
    radial-gradient(50rem 30rem at -10% 20%, rgba(79, 70, 229, .12), transparent 60%),
    linear-gradient(180deg, #fff, var(--paper));
}
.hero-bg::after { /* grille en perspective, comme un sol */
  content: ""; position: absolute; inset: auto 0 0 0; height: 55%;
  background-image:
    linear-gradient(rgba(79, 70, 229, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 70, 229, .10) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: perspective(600px) rotateX(62deg); transform-origin: bottom;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
          mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  pointer-events: none; z-index: -1;
}

/* ---------- Scène 3D : « Le pacte en orbite » ---------- */
.scene {
  position: relative; width: 100%; max-width: 520px; aspect-ratio: 1 / 1; margin-inline: auto;
  perspective: 900px; perspective-origin: 50% 40%;
}
.stage {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(var(--rx, 10deg)) rotateY(var(--ry, -14deg));
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

/* Les deux cercles du logo, en anneaux épais entrelacés */
.ring {
  position: absolute; left: 50%; top: 50%; width: 62%; aspect-ratio: 1; margin: -31% 0 0 -31%;
  border-radius: 50%; transform-style: preserve-3d;
  background: conic-gradient(from 210deg, #A5B4FC, var(--indigo) 30%, #312E81 55%, var(--indigo) 75%, #C7D2FE);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 18px), #000 calc(100% - 17px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 18px), #000 calc(100% - 17px));
  filter: drop-shadow(0 18px 24px rgba(49, 46, 129, .25));
}
.ring-a { transform: translateZ(-70px) translateX(-16%) rotateY(58deg); }
.ring-b {
  transform: translateZ(-70px) translateX(16%) rotateX(62deg);
  background: conic-gradient(from 30deg, #DDD6FE, var(--violet) 30%, #4C1D95 55%, var(--violet) 75%, #E9D5FF);
}
.ring-spin-a { animation: spinA 38s linear infinite; }
.ring-spin-b { animation: spinB 46s linear infinite; }
@keyframes spinA { to { transform: translateZ(-70px) translateX(-16%) rotateY(58deg) rotateZ(360deg); } }
@keyframes spinB { to { transform: translateZ(-70px) translateX(16%) rotateX(62deg) rotateZ(-360deg); } }

/* Halo lumineux derrière le centre */
.glow {
  position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; margin: -23% 0 0 -23%; border-radius: 50%;
  background: radial-gradient(circle, rgba(110, 231, 183, .35), rgba(124, 58, 237, .12) 55%, transparent 70%);
  transform: translateZ(-110px); filter: blur(6px);
}

/* Liens SVG entre les cartes et le centre */
.links { position: absolute; inset: 0; width: 100%; height: 100%; transform: translateZ(-20px); overflow: visible; }
.links path { fill: none; stroke: url(#linkGrad); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 6 8; }
.links-anim path { animation: flow 2.4s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -28; } }

/* Cartes flottantes */
.card3d {
  position: absolute; transform-style: preserve-3d;
  background: #fff; border-radius: 16px; padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 2px rgba(15, 23, 42, .06),
    0 14px 28px -10px rgba(49, 46, 129, .28);
  color: var(--ink); font-size: 13px; line-height: 1.35; white-space: nowrap;
}
.card3d::before { /* lumière en haut à gauche */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 45%);
}
.card3d .k { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #64748B; }
.card3d .v { display: block; font-weight: 700; }
.card3d .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

.card-center {
  left: 50%; top: 50%; width: 220px; margin: -62px 0 0 -110px; padding: 16px 18px;
  transform: translateZ(60px); white-space: normal;
  border: 1px solid #E0E7FF;
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 4px rgba(15, 23, 42, .06),
    0 30px 50px -18px rgba(79, 70, 229, .45);
}
.card-center .title { font-size: 16px; font-weight: 800; margin: 2px 0 8px; }
.card-center .row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #334155; margin-top: 4px; }
.card-center .check { color: #059669; font-weight: 800; }

.c1 { left: 4%;  top: 12%; transform: translateZ(30px); }
.c2 { right: 2%; top: 22%; transform: translateZ(30px); }
.c3 { left: 14%; bottom: 8%; transform: translateZ(0); }
.c4 { right: 8%; bottom: 14%; transform: translateZ(45px); }

/* Entrée unique, en CSS pur : le contenu reste visible même si le JavaScript échoue */
@keyframes enter { from { opacity: 0; } }
.card3d, .ring, .links, .glow { animation: enter .6s ease-out both; }
.c1 { animation-delay: .08s; } .c2 { animation-delay: .16s; } .c3 { animation-delay: .24s; } .c4 { animation-delay: .32s; }

/* Flottaison légère, ajoutée par le JS (désactivée en mouvement réduit, sur mobile et via le bouton pause) */
.float-1 { animation: enter .6s ease-out both, float1 7s ease-in-out .6s infinite; }
.float-2 { animation: enter .6s ease-out both, float2 8s ease-in-out .6s infinite; }
.float-3 { animation: enter .6s ease-out both, float3 6.5s ease-in-out .6s infinite; }
@keyframes float1 { 50% { translate: 0 -7px; } }
@keyframes float2 { 50% { translate: 0 6px; } }
@keyframes float3 { 50% { translate: 0 -5px; } }

/* Pause (WCAG 2.2.2) : toutes les animations de la scène s'arrêtent */
/* (l'entrée « enter » continue de jouer : seul le mouvement continu est figé) */
.scene.is-paused .float-1, .scene.is-paused .float-2, .scene.is-paused .float-3 { animation-play-state: running, paused; }
.scene.is-paused .ring, .scene.is-paused .links path { animation-play-state: paused; }

.scene-caption { display: flex; justify-content: center; align-items: center; gap: .75rem; flex-wrap: wrap; font-size: 12px; color: #64748B; margin-top: .25rem; }
.anim-toggle {
  font: inherit; font-weight: 600; color: #4338CA; background: #fff; border: 1px solid #C7D2FE;
  border-radius: 999px; padding: .3rem .75rem; cursor: pointer;
}
.anim-toggle:hover { background: #EEF2FF; }
.creator .anim-toggle { color: #6D28D9; border-color: #DDD6FE; }

/* Variante créateurs : dominante violette */
.scene-creator .card-center { border-color: #EDE9FE; box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(15,23,42,.06), 0 30px 50px -18px rgba(124,58,237,.45); }

/* ---------- Touches 3D secondaires ---------- */

/* Cartes de fonctions, légèrement étagées */
.tilt-grid { perspective: 1200px; }
.tilt-card {
  transform: rotateX(6deg) translateZ(0); transform-origin: 50% 100%;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 18px 30px -22px rgba(49, 46, 129, .35);
}
.tilt-card:nth-child(2) { transform: rotateX(6deg) translateZ(24px); }
.tilt-card:hover, .tilt-card:focus-within {
  transform: rotateX(0) translateZ(36px);
  box-shadow: 0 2px 4px rgba(15, 23, 42, .06), 0 30px 50px -24px rgba(79, 70, 229, .45);
}
.icon3d {
  width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 20px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .18), 0 10px 18px -8px rgba(49, 46, 129, .6);
}

/* Étapes en escalier 3D */
.steps3d { perspective: 1400px; }
.step3d {
  position: relative; background: #fff; border: 1px solid #E2E8F0; border-radius: 18px; padding: 24px;
  /* Escalier : chaque marche monte d'un cran, le texte reste à plat pour rester lisible */
  transform: translateY(calc(var(--i) * -12px));
  box-shadow: 0 1px 0 #fff inset, 0 calc(10px + var(--i) * 6px) calc(24px + var(--i) * 6px) -14px rgba(49, 46, 129, .35);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s;
}
.step3d:hover { transform: translateY(calc(var(--i) * -12px - 6px)); box-shadow: 0 1px 0 #fff inset, 0 calc(18px + var(--i) * 6px) calc(34px + var(--i) * 6px) -16px rgba(79, 70, 229, .45); }
.step-num {
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; margin-bottom: 14px;
  background: radial-gradient(circle at 30% 30%, #818CF8, var(--indigo) 60%, #3730A3);
  box-shadow: 0 8px 14px -6px rgba(79, 70, 229, .7);
}
.creator .step-num { background: radial-gradient(circle at 30% 30%, #C4B5FD, var(--violet) 60%, #5B21B6); box-shadow: 0 8px 14px -6px rgba(124, 58, 237, .7); }

/* Sceau en relief (CTA final) */
.seal { width: 92px; height: 56px; position: relative; margin: 0 auto 1.5rem; perspective: 400px; }
.seal span {
  position: absolute; top: 0; width: 56px; height: 56px; border-radius: 50%;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .25));
}
.seal span:first-child { left: 0; background: conic-gradient(#fff, #C7D2FE, #fff, #A5B4FC, #fff); transform: rotateY(28deg); }
.seal span:last-child { right: 0; background: conic-gradient(#fff, #DDD6FE, #fff, #C4B5FD, #fff); transform: rotateY(-28deg); }

/* Icônes SVG (Lucide, ISC) à la place des emojis — 09/10/2026, checklist UI/UX Pro Max */
.ico { display: block; flex: none; }
.ico-tile {
  width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--indigo); background: linear-gradient(145deg, #EEF2FF, #E0E7FF);
  box-shadow: inset 0 1px 0 #fff, 0 8px 16px -10px rgba(79, 70, 229, .55);
}
.creator .ico-tile { color: var(--violet); background: linear-gradient(145deg, #F5F3FF, #EDE9FE); box-shadow: inset 0 1px 0 #fff, 0 8px 16px -10px rgba(124, 58, 237, .55); }
.ico-tile.ico-dark { color: #C4B5FD; background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15); }
.icon3d .ico { width: 24px; height: 24px; }
.card3d .check { display: inline-flex; align-items: center; color: #059669; }

/* Verre mesuré sur les cartes de la scène (fond de secours opaque) */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .card3d {
    background: rgba(255, 255, 255, .80);
    -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
    border-color: rgba(79, 70, 229, .16);
  }
  .card-center { background: rgba(255, 255, 255, .90); }
}

/* Prix : carte mise en avant, en léger relief */
.price-feature { transform: translateY(-8px); box-shadow: 0 30px 60px -30px rgba(79, 70, 229, .55); }

/* Apparition au défilement : activée par le JS seulement une fois l'observateur prêt */
.reveal-on .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease-out, transform .6s ease-out; }
.reveal-on .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Pages légales ---------- */
.legal h2 { font-size: 1.35rem; font-weight: 800; color: var(--ink); margin: 2.5rem 0 .75rem; letter-spacing: -.01em; }
.legal h3 { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 1.5rem 0 .5rem; }
.legal p, .legal li { color: #334155; line-height: 1.75; }
.legal p + p { margin-top: .75rem; }
.legal ul { list-style: disc; padding-left: 1.25rem; margin: .5rem 0; }
.legal li + li { margin-top: .35rem; }
.legal a { color: var(--indigo); text-decoration: underline; }
.legal table { width: 100%; border-collapse: collapse; margin: .75rem 0; font-size: .925rem; }
.legal th, .legal td { text-align: left; vertical-align: top; border: 1px solid #E2E8F0; padding: .6rem .75rem; color: #334155; }
.legal th { background: var(--paper); color: var(--ink); font-weight: 700; }
.legal-scroll { overflow-x: auto; }

/* ---------- Mobile : scène simplifiée et statique ---------- */
@media (max-width: 1023px) {
  .scene { max-width: 380px; }
  .stage { transform: rotateX(8deg) rotateY(-8deg) !important; }
  .card3d { font-size: 12px; padding: 10px 12px; }
  .card-center { width: 190px; margin: -56px 0 0 -95px; }
  .float-1, .float-2, .float-3, .ring-spin-a, .ring-spin-b, .links-anim path { animation: none; }
  .anim-toggle { display: none; }
  .c4 { display: none; }
  .steps3d .step3d { transform: none; }
  .tilt-card, .tilt-card:nth-child(2) { transform: none; }
}
@media (max-width: 400px) {
  .scene { max-width: 92%; }
  .card3d { white-space: normal; max-width: 44vw; font-size: 11px; }
  .card-center { width: 168px; max-width: none; margin: -60px 0 0 -84px; }
  .c1 { left: 0; top: 3%; }
  .c2 { right: 0; top: auto; bottom: 5%; }
  .c3 { display: none; }
}

/* ---------- Mouvement réduit : tout est figé ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal-on .reveal { opacity: 1; transform: none; }
}