/* ============================================================
   PINAPP INC. — CSS MASTER CORRECTIF V3
   Sources : PDF Audit 1 + 2 + ChatGPT + Screenshots iPhone
   ============================================================ */

@import url('./fonts.css');

/* ── 1. POLICES SF PRO NATIF APPLE (PDF : "polices impactantes")
   Pile 100 % Apple (fonts.css) — chargement zéro · natif iOS / macOS ── */
*,
*::before,
*::after {
  font-family: var(--font-apple-sans);
}

h1,
h2,
h3,
h4,
h5,
h6,
.nav__logo,
.footer__brand,
.offre-title,
.offre-gain,
.offre-price,
.formation-title,
.pack-duo-badge {
  font-family: var(--font-apple-display) !important;
  -webkit-font-smoothing: antialiased;
}

/* ── 2. MODE JOUR AVATAR 2 (PDF : "mode clair manque de personnalité")
   Eau Avatar 2 · mer de Pandora sous le soleil
   #0a3d52 = bleu océan profond lumineux (pas sombre) ── */
[data-theme='light'] {
  --bg: #0a3d52 !important;
  --bg-card: rgba(0, 180, 200, 0.08) !important;
  --text: #ffffff !important;
  --text-muted: rgba(255, 255, 255, 0.65) !important;
  --text-soft: rgba(255, 255, 255, 0.35) !important;
  --accent: #00e5d4 !important;
  --accent-2: #7dd4fc !important;
  --accent-3: #ffffff !important;
  --accent-4: #00b4d8 !important;
  --nacre: #e0f7ff !important;
  --card-border: rgba(0, 229, 212, 0.2) !important;
  --separator: rgba(0, 229, 212, 0.12) !important;
  --shadow: rgba(0, 20, 40, 0.3) !important;
  --shadow-lg: rgba(0, 20, 40, 0.5) !important;
  --btn-cta-bg: rgba(0, 100, 160, 0.9) !important;
  --btn-cta-bd: rgba(125, 212, 252, 0.4) !important;
  --btn-ghost-bd: rgba(255, 255, 255, 0.25) !important;
}

[data-theme='light'] .nav,
[data-theme='light'] #nav {
  background: rgba(8, 50, 70, 0.92) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

[data-theme='light'] .nav__drawer {
  background: rgba(6, 40, 56, 0.98) !important;
}

[data-theme='light'] .caustics {
  opacity: 1 !important;
}
[data-theme='light'] .caustics span:nth-child(1) {
  background: rgba(0, 229, 212, 0.28) !important;
}
[data-theme='light'] .caustics span:nth-child(2) {
  background: rgba(125, 212, 252, 0.2) !important;
}
[data-theme='light'] .caustics span:nth-child(3) {
  background: rgba(255, 255, 255, 0.14) !important;
}
[data-theme='light'] .caustics span:nth-child(4) {
  background: rgba(0, 180, 216, 0.1) !important;
}
[data-theme='light'] .water-surface {
  opacity: 1 !important;
}
[data-theme='light'] .water-reflets {
  opacity: 1 !important;
  background: linear-gradient(
    180deg,
    rgba(125, 212, 252, 0.2) 0%,
    rgba(0, 229, 212, 0.08) 50%,
    transparent 100%
  ) !important;
}
[data-theme='light'] #canvas-pandora {
  opacity: 0 !important;
}

/* ── 3. MOBILE FIRST — toutes corrections iPhone 390px
   (PDF : "rien ne va sur iPhone · grilles catastrophiques") ── */
@media (max-width: 768px) {
  /* ─ TOUTES LES GRILLES → 1 COLONNE ─ */
  [style*='grid-template-columns: 1fr 1fr'],
  [style*='grid-template-columns:1fr 1fr'],
  [style*='grid-template-columns: repeat(2'],
  [style*='grid-template-columns:repeat(2'],
  [style*='grid-template-columns: repeat(auto-fit'],
  [style*='grid-template-columns:repeat(auto-fit'],
  .services__grid,
  .offres__grid,
  .formations__grid,
  .auralis__inner,
  .pack-duo__inner,
  .duo__cards,
  .studio-grid,
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* ─ TYPOGRAPHIE MOBILE ─ */
  h1 {
    font-size: clamp(28px, 8vw, 38px) !important;
    letter-spacing: -0.03em !important;
    line-height: 1.05 !important;
  }
  h2 {
    font-size: clamp(22px, 6vw, 28px) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
  }
  h3 {
    font-size: clamp(16px, 4.5vw, 20px) !important;
    line-height: 1.3 !important;
  }

  /* ─ PRIX — jamais > 26px sur mobile ─
     (PDF : "prix géant sur 5 lignes") */
  .offre-price,
  .offre-gain,
  .pack-price,
  [style*='font-size:32px'],
  [style*='font-size: 32px'],
  [style*='font-size:36px'],
  [style*='font-size: 36px'],
  [style*='font-size:40px'],
  [style*='font-size: 40px'],
  [style*='font-size:44px'],
  [style*='font-size: 44px'],
  [style*='font-size:48px'],
  [style*='font-size: 48px'],
  [style*='font-size:56px'],
  [style*='font-size: 56px'],
  [style*='font-size:64px'],
  [style*='font-size: 64px'],
  [style*='font-size:72px'],
  [style*='font-size:80px'],
  [style*='font-size:88px'] {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }

  /* ─ BOUTONS HERO — 1 colonne, pleine largeur ─
     (Audit : "3 boutons qui se chevauchent") */
  .hero .btn,
  .hero__ctas .btn,
  section:first-of-type .btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 50px !important;
    font-size: 15px !important;
    margin-bottom: 10px !important;
  }

  /* ─ SCROLL-SNAP SAFARI ─
     (Audit : "scroll-snap non fonctionnel") */
  .snap-container {
    height: 100svh !important;
    height: -webkit-fill-available !important;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: y mandatory !important;
    overscroll-behavior-y: contain !important;
  }
  .snap-section {
    min-height: 100svh !important;
    min-height: -webkit-fill-available !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    padding-top: 80px !important;
    padding-bottom: 48px !important;
  }

  /* ─ TOUCH TARGETS 44px — Apple HIG ─ */
  .nav__burger,
  .nav__theme,
  .carousel-btn,
  .sector-btn,
  .carousel-cat,
  .nav-dot {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* ─ SAFE AREA iPhone notch + home indicator ─ */
  .nav,
  #nav {
    padding-top: env(safe-area-inset-top, 0px) !important;
    height: calc(64px + env(safe-area-inset-top, 0px)) !important;
  }
  footer {
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 40px) !important;
  }
  .snap-section {
    padding-top: max(80px, calc(64px + env(safe-area-inset-top, 0px))) !important;
  }

  /* ─ DRAWER MOBILE scrollable ─
     (Audit : "pas de menu burger · drawer inaccessible") */
  .nav__drawer {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: calc(100svh - 64px) !important;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 32px) !important;
    display: none;
  }
  .nav__drawer.open {
    display: flex !important;
  }

  /* ─ BURGER TOUJOURS VISIBLE ─
     (Audit : "burger absent sur iPhone") */
  .nav__burger {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 10px !important;
    z-index: 200 !important;
  }
  .nav__burger span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: var(--text, #f0f8ff) !important;
    border-radius: 1px !important;
    transition:
      transform 0.3s,
      opacity 0.3s !important;
  }

  /* ─ NAV MENU DESKTOP → MASQUÉ ─ */
  .nav__menu,
  .nav__cta {
    display: none !important;
  }

  /* ─ CONTAINER PADDING ─ */
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ─ CARDS ─ */
  .card,
  .offre-card,
  .formation-card {
    padding: 20px !important;
    border-radius: 16px !important;
  }

  /* ─ AURORA MOCK — plus d'italique · taille lisible ─
     (Audit : "mock Aurora illisible en 2 colonnes") */
  .aurora-mock,
  [class*='aurora'] p,
  [class*='aurora'] blockquote {
    font-style: normal !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  /* ─ HINT DÉFILER — ne chevauche pas les boutons ─ */
  .hero__scroll,
  .scroll-hint,
  [style*='bottom:32px'][style*='left:50%'],
  [style*='bottom: 32px'] {
    display: none !important;
  }

  /* ─ DONUT / GRAPHIQUES ─ */
  .donut-wrap {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .bar-chart {
    height: 90px !important;
  }
  .bar-label {
    font-size: 9px !important;
  }

  /* ─ CAROUSEL MICHA ─ */
  .carousel-item {
    flex: 0 0 240px !important;
    height: 170px !important;
  }

  /* ─ STORYBOARD TIMELINE ─ */
  [style*='grid-template-columns: 1fr 1fr'][class*='story'],
  .drawer-story-cards {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ─ ÉTUDES CITÉES — lisibles ─ */
  .etude-cite {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .etude-cite-bar {
    width: 100% !important;
    height: 3px !important;
  }

  /* ─ FOOTER LINKS ─ */
  .footer__links {
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* --- Page À propos : rythme vertical, scroll moins bloquant, timelines lisibles --- */
  .page-a-propos .snap-container {
    scroll-snap-type: y proximity !important;
  }
  .page-a-propos .snap-section {
    scroll-snap-stop: normal !important;
    padding-bottom: 44px !important;
  }
  .page-a-propos .a-propos-bio-grid {
    gap: 28px !important;
  }
  .page-a-propos .pinapp-duo-portraits {
    gap: 24px !important;
    margin-bottom: 28px !important;
  }
  .page-a-propos .pinapp-duo-portraits figcaption {
    text-align: center;
    padding-inline: 6px;
    line-height: 1.45;
  }
  /* Micha : même lecture que Lauralie (parcours puis portrait) */
  .page-a-propos #micha-story .a-propos-bio-grid > div:first-child {
    order: 2;
  }
  .page-a-propos #micha-story .a-propos-bio-grid > div:last-child {
    order: 1;
  }
  .page-a-propos #derriere-pinapp p[style*='font-size: 18px'] {
    font-size: 16px !important;
    line-height: 1.65 !important;
  }
  .page-a-propos .a-propos-timeline > div:first-child {
    left: 10px !important;
  }
  .page-a-propos .a-propos-timeline-item > div:first-child {
    left: 6px !important;
  }
  .page-a-propos .a-propos-timeline-item {
    padding-left: 28px !important;
    gap: 14px !important;
  }
  .page-a-propos #pourquoi [style*='font-size: 64px'] {
    font-size: clamp(34px, 12vw, 44px) !important;
    line-height: 1.05 !important;
  }
}

@media (max-width: 480px) {
  .page-a-propos .pinapp-duo-portraits {
    gap: 20px !important;
  }
  .page-a-propos .a-propos-timeline-item {
    padding-left: 24px !important;
  }
  .page-a-propos #derriere-pinapp h1[style*='clamp(40px'] {
    margin-bottom: 22px !important;
  }
}

/* ── 4. EMOJIS → SVG (PDF : "zéro emoji dans site Apple/Tesla")
   Appliqué via masquage — les SVG sont injectés via JS ── */
.emoji-replace {
  display: none !important;
}

/* ── 5. LEVIERS PSYCHOLOGIQUES (PDF ChatGPT : "biais cognitifs")
   Urgence · ancrage · preuve sociale ── */
.urgence-banner {
  animation: urgence-pulse 3s ease-in-out infinite !important;
}
@keyframes urgence-pulse {
  0%,
  100% {
    border-color: rgba(224, 64, 251, 0.15);
  }
  50% {
    border-color: rgba(224, 64, 251, 0.35);
  }
}

/* ── 6. MICRO-DOPAMINE FORMATIONS (PDF ChatGPT : "gamification")
   Barre de progression visible ── */
.formation-card:hover .formation-price {
  color: var(--accent) !important;
  transition: color 0.3s !important;
}

/* ── 7. ANIMATIONS AMÉLIORÉES (PDF : "animations encore plus impactantes") ── */
.anim-up {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.anim-up.visible {
  opacity: 1 !important;
  transform: none !important;
}

/* ── 8. EU AI ACT BADGE (PDF : "100% transparent · EU AI Act") ── */
.ai-badge {
  font-size: 9px !important;
  opacity: 0.7 !important;
}

/* ── 9. RAYONS & MOUVEMENT MODE JOUR (PDF Avatar 2 · calques absents du bundle)
   La couche .light-rays est dans index / offres / diagnostic mais sans CSS dédié. ── */
.light-rays {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  background:
    radial-gradient(ellipse 90% 55% at 50% -25%, rgba(255, 255, 255, 0.22), transparent 58%),
    radial-gradient(ellipse 70% 50% at 85% 25%, rgba(0, 229, 212, 0.14), transparent 55%),
    radial-gradient(ellipse 50% 40% at 12% 40%, rgba(125, 212, 252, 0.1), transparent 50%);
  animation: pinapp-light-rays-drift 16s ease-in-out infinite alternate;
}
[data-theme='light'] .light-rays,
html[data-theme='light'] .light-rays {
  opacity: 1 !important;
}
@keyframes pinapp-light-rays-drift {
  0% {
    transform: translateY(0) scale(1);
    filter: hue-rotate(0deg);
  }
  100% {
    transform: translateY(1.5vh) scale(1.02);
    filter: hue-rotate(12deg);
  }
}

/* Caustiques / surface eau : forcer lecture des keyframes en mode jour + respect reduced-motion */
[data-theme='light'] .caustics span,
html[data-theme='light'] .caustics span {
  animation-play-state: running !important;
}
[data-theme='light'] .water-surface,
html[data-theme='light'] .water-surface {
  animation-play-state: running !important;
}
[data-theme='light'] .water-reflets,
html[data-theme='light'] .water-reflets {
  animation-play-state: running !important;
}
@media (prefers-reduced-motion: reduce) {
  .light-rays,
  [data-theme='light'] .caustics span,
  html[data-theme='light'] .caustics span {
    animation: none !important;
  }
}

/* ============================================================
   PINAPP — EXECUTIVE FINISH (dernier maillon en cascade)
   Apple HIG · Tesla UI · agencement premium KR
   ============================================================ */

:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(0, 229, 204, 0.42);
  --focus-ring-light: 0 0 0 2px var(--bg), 0 0 0 4px rgba(127, 255, 234, 0.5);
  --text-muted: rgba(240, 248, 255, 0.5);
  --text-soft: rgba(240, 248, 255, 0.32);
  --card-border: rgba(255, 255, 255, 0.065);
  --shadow: rgba(0, 0, 0, 0.28);
  --shadow-lg: rgba(0, 0, 0, 0.42);
}

[data-theme='light'] {
  --text-muted: rgba(240, 255, 253, 0.54);
  --text-soft: rgba(240, 255, 253, 0.32);
  --card-border: rgba(255, 255, 255, 0.12);
  --focus-ring: var(--focus-ring-light);
}

html {
  -webkit-tap-highlight-color: transparent;
}

body {
  font-feature-settings:
    'kern' 1,
    'liga' 1,
    'calt' 1;
  text-rendering: optimizeLegibility;
  line-height: 1.65;
}

::selection {
  background: rgba(0, 229, 204, 0.22);
  color: var(--text);
}

[data-theme='light'] ::selection {
  background: rgba(127, 255, 234, 0.2);
}

:focus:not(:focus-visible) {
  outline: none;
}
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 6px;
}
.btn:focus-visible,
.nav__cta:focus-visible,
.nav__theme:focus-visible,
.nav__burger:focus-visible,
.nav-dot:focus-visible {
  border-radius: 100px;
}
.nav__link:focus-visible {
  border-radius: 10px;
}

h1,
h2,
h3,
h4 {
  font-feature-settings:
    'kern' 1,
    'liga' 1;
  text-wrap: balance;
}

@media (min-width: 900px) {
  h1 {
    letter-spacing: -0.038em;
  }
  h2 {
    letter-spacing: -0.032em;
  }
}

.label {
  letter-spacing: 0.16em;
  font-weight: 600;
  margin-bottom: 14px;
  opacity: 0.95;
}

.nav {
  transition:
    transform 0.35s var(--ease-out-expo),
    background 0.45s var(--ease-standard),
    border-color 0.35s var(--ease-standard);
  border-bottom-color: rgba(255, 255, 255, 0.04);
}

.nav__link {
  transition:
    color 0.28s var(--ease-standard),
    background 0.28s var(--ease-standard);
}

.nav__cta {
  transition:
    opacity 0.28s var(--ease-standard),
    transform 0.35s var(--ease-out-expo),
    box-shadow 0.35s var(--ease-out-expo);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

@media (hover: hover) {
  .nav__cta:hover {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.08) inset,
      0 10px 28px rgba(0, 0, 0, 0.2);
  }
}

.card {
  transition:
    transform 0.45s var(--ease-out-expo),
    box-shadow 0.45s var(--ease-out-expo),
    border-color 0.35s var(--ease-standard);
  box-shadow:
    var(--glass-edge),
    var(--glass-edge-soft),
    0 4px 24px var(--shadow),
    0 1px 0 rgba(255, 255, 255, 0.03) inset;
}

@media (hover: hover) {
  .card:hover {
    transform: translateY(-2px);
    box-shadow:
      var(--glass-edge),
      var(--glass-edge-soft),
      0 16px 48px var(--shadow-lg),
      0 1px 0 rgba(255, 255, 255, 0.05) inset;
    border-color: rgba(0, 229, 204, 0.12);
  }
}

.btn {
  transition:
    opacity 0.28s var(--ease-standard),
    transform 0.4s var(--ease-out-expo),
    box-shadow 0.4s var(--ease-out-expo),
    border-color 0.28s var(--ease-standard),
    color 0.28s var(--ease-standard);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

.btn--primary {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 8px 24px rgba(0, 0, 0, 0.18);
}

@media (hover: hover) {
  .btn:hover {
    opacity: 1;
    transform: translateY(-1px);
  }
  .btn--ghost:hover {
    transform: translateY(-1px);
  }
}

.nav-dot {
  transition:
    transform 0.4s var(--ease-out-expo),
    background 0.3s var(--ease-standard),
    box-shadow 0.4s var(--ease-out-expo);
}
.nav-dot.active {
  transform: scale(1.35);
  box-shadow: 0 0 6px rgba(0, 229, 204, 0.35);
}

.shimmer {
  animation-duration: 8s;
  animation-timing-function: ease-in-out;
}

main a:not([class]):not(.btn):not(.nav__link):not(.skip-link) {
  text-decoration: underline;
  text-decoration-color: rgba(0, 229, 204, 0.35);
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.25s var(--ease-standard);
}
@media (hover: hover) {
  main a:not([class]):not(.btn):not(.nav__link):not(.skip-link):hover {
    text-decoration-color: rgba(0, 229, 204, 0.75);
  }
}

[data-theme='light'] main a:not([class]):not(.btn):not(.nav__link):not(.skip-link) {
  text-decoration-color: rgba(127, 255, 234, 0.35);
}
@media (hover: hover) {
  [data-theme='light'] main a:not([class]):not(.btn):not(.nav__link):not(.skip-link):hover {
    text-decoration-color: rgba(127, 255, 234, 0.75);
  }
}

.checklist li {
  line-height: 1.55;
  letter-spacing: 0.01em;
}

.nav__drawer a {
  transition:
    color 0.28s var(--ease-standard),
    background 0.28s var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .btn,
  .nav__cta,
  .nav__link,
  .nav,
  .nav-dot,
  .shimmer {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  @media (hover: hover) {
    .card:hover,
    .btn:hover,
    .nav__cta:hover {
      transform: none !important;
    }
  }
}