/* ── POLICE, HÉBERGÉE ICI ET NON CHEZ GOOGLE ──
       Elle était chargée depuis fonts.googleapis.com / fonts.gstatic.com, ce qui
       envoyait l'adresse IP de chaque visiteur à Google LLC. Or confidentialite.html
       énumère cinq sous-traitants — Supabase, Stripe, Prodigi, Resend, OVH — et Google
       n'en fait pas partie : la page de confidentialité se contredisait en se chargeant.
       Fichier variable (300→700) copié dans le dépôt, licence OFL, l'auto-hébergement
       est expressément permis. Supprime au passage une dépendance réseau au chargement,
       comme la règle déjà posée pour le back-office (« ni CDN, ni webfont externe »).
       Les deux sous-ensembles reprennent le découpage de Google : `latin` couvre le
       français et l'espagnol, `latin-ext` est là pour la suite (traductions en/es). */
    @font-face {
      font-family: 'Space Grotesk';
      font-style: normal;
      font-weight: 300 700;
      font-display: swap;
      src: url('/assets/fonts/space-grotesk-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: 'Space Grotesk';
      font-style: normal;
      font-weight: 300 700;
      font-display: swap;
      src: url('/assets/fonts/space-grotesk-latin-ext.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --black: #080808;
      --surface: #121212;
      --surface2: #1a1a1a;
      --yellow: #F5AB00;
      --blue: #3B7DF5;
      --white: #F0EDE8;
      --muted: #555;
      /* Gris lisible, pour le texte qu'on attend d'un visiteur qu'il lise.
         `--muted` (#555) donne **2,5:1** sur le fond de page — sous le seuil AA de
         4,5:1 pour du petit texte. Il reste bon pour ce qui est décoratif (filets,
         intitulés de section en capitales). Tout ce qui porte une information —
         un prix, une mention « tirages inclus », une explication — passe ici :
         #888 donne 5,7:1 sur #080808 et 5,3:1 sur les cartes. Même correction que
         celle faite sur web/event/index.html le 2026-08-03. */
      --muted-text: #888;
      --radius: 16px;
    }

    html { scroll-behavior: smooth; }

    body {
      background: var(--black);
      color: var(--white);
      font-family: 'Space Grotesk', -apple-system, sans-serif;
      overflow-x: hidden;
      line-height: 1.6;
    }

    /* ── ANIMATED BACKGROUND ── */
    .bg-canvas {
      position: fixed;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(120px);
      opacity: 0.18;
      will-change: transform;
    }

    .blob-1 {
      width: 600px; height: 600px;
      background: var(--yellow);
      top: -150px; left: -100px;
      animation: drift1 18s ease-in-out infinite alternate;
    }

    .blob-2 {
      width: 500px; height: 500px;
      background: var(--blue);
      bottom: -100px; right: -80px;
      animation: drift2 22s ease-in-out infinite alternate;
    }

    .blob-3 {
      width: 350px; height: 350px;
      background: #ff6b35;
      top: 40%; left: 50%;
      transform: translate(-50%, -50%);
      animation: drift3 26s ease-in-out infinite alternate;
      opacity: 0.08;
    }

    @keyframes drift1 {
      from { transform: translate(0, 0) scale(1); }
      to   { transform: translate(200px, 150px) scale(1.2); }
    }
    @keyframes drift2 {
      from { transform: translate(0, 0) scale(1); }
      to   { transform: translate(-180px, -120px) scale(1.15); }
    }
    @keyframes drift3 {
      from { transform: translate(-50%, -50%) scale(0.9); }
      to   { transform: translate(-30%, -60%) scale(1.3); }
    }

    /* Grain overlay */
    .grain {
      position: fixed;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
      opacity: 0.04;
    }

    /* ── LAYOUT ── */
    section, header, footer { position: relative; z-index: 2; }

    .container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 2rem;
    }

    /* ── NAV ── */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      padding: 1.2rem 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(255,255,255,0.05);
      background: rgba(8,8,8,0.7);
    }

    .nav-logo {
      display: flex;
      align-items: center;
      gap: 0.7rem;
      text-decoration: none;
      color: var(--white);
    }

    .nav-logo img { width: 32px; height: 32px; border-radius: 8px; display: block; }

    .nav-brand {
      font-size: 0.95rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .nav-links {
      display: flex;
      gap: 2rem;
      list-style: none;
    }

    .nav-links a {
      color: var(--muted);
      text-decoration: none;
      font-size: 0.85rem;
      letter-spacing: 0.04em;
      transition: color 0.2s;
    }
    .nav-links a:hover { color: var(--white); }

    .nav-cta {
      background: var(--yellow);
      color: #000 !important;
      padding: 0.5rem 1.2rem;
      border-radius: 100px;
      font-weight: 600 !important;
      font-size: 0.82rem !important;
      letter-spacing: 0.03em !important;
      transition: opacity 0.2s !important;
    }
    .nav-cta:hover { opacity: 0.85; }

    /* ── HERO ── */
    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding: 8rem 0 5rem;
    }

    .hero-inner {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 2rem;
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.78rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--yellow);
      font-weight: 500;
      margin-bottom: 1.8rem;
    }

    .hero-eyebrow::before {
      content: '';
      display: block;
      width: 28px;
      height: 1px;
      background: var(--yellow);
    }

    .hero h1 {
      font-size: clamp(3.2rem, 8vw, 7.5rem);
      font-weight: 700;
      line-height: 1;
      letter-spacing: -0.03em;
      max-width: 900px;
      margin-bottom: 1.8rem;
    }

    .hero h1 em {
      font-style: normal;
      color: transparent;
      -webkit-text-stroke: 1.5px rgba(240,237,232,0.25);
    }

    .hero h1 .accent { color: var(--yellow); }

    .hero-sub {
      font-size: 1.15rem;
      color: #999;
      max-width: 520px;
      line-height: 1.7;
      margin-bottom: 2.8rem;
    }

    .hero-actions {
      display: flex;
      gap: 1rem;
      align-items: center;
      flex-wrap: wrap;
    }

    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: var(--yellow);
      color: #000;
      padding: 0.9rem 2rem;
      border-radius: 100px;
      font-weight: 600;
      font-size: 0.95rem;
      text-decoration: none;
      letter-spacing: 0.01em;
      transition: transform 0.2s, opacity 0.2s;
    }
    .btn-primary:hover { transform: translateY(-1px); opacity: 0.9; }

    .btn-secondary {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: transparent;
      color: var(--white);
      padding: 0.9rem 2rem;
      border-radius: 100px;
      font-weight: 500;
      font-size: 0.95rem;
      text-decoration: none;
      border: 1px solid rgba(255,255,255,0.12);
      transition: border-color 0.2s, background 0.2s;
    }
    .btn-secondary:hover { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.04); }

    .hero-scroll {
      margin-top: 5rem;
      display: flex;
      align-items: center;
      gap: 0.8rem;
      color: var(--muted);
      font-size: 0.78rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .scroll-line {
      width: 40px;
      height: 1px;
      background: var(--muted);
      animation: scrollPulse 2s ease-in-out infinite;
    }
    @keyframes scrollPulse {
      0%,100% { opacity: 0.4; } 50% { opacity: 1; }
    }

    /* ── CONCEPT ── */
    .concept {
      padding: 7rem 0;
    }

    .label {
      display: inline-block;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 1.4rem;
    }

    .concept-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
    }

    .concept h2 {
      font-size: clamp(2rem, 4vw, 3.2rem);
      font-weight: 700;
      letter-spacing: -0.025em;
      line-height: 1.15;
      margin-bottom: 1.4rem;
    }

    .concept p {
      color: #888;
      font-size: 1rem;
      line-height: 1.8;
      margin-bottom: 1rem;
    }

    .steps {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .step {
      display: flex;
      gap: 1.2rem;
      align-items: flex-start;
      padding: 1.4rem 0;
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .step:last-child { border-bottom: none; }

    .step-num {
      flex-shrink: 0;
      width: 36px; height: 36px;
      border-radius: 50%;
      background: var(--surface2);
      border: 1px solid rgba(255,255,255,0.08);
      display: flex; align-items: center; justify-content: center;
      font-size: 0.72rem;
      font-weight: 600;
      color: var(--yellow);
      letter-spacing: 0.02em;
    }

    .step-body h4 {
      font-size: 0.95rem;
      font-weight: 600;
      margin-bottom: 0.2rem;
    }

    .step-body p {
      font-size: 0.85rem;
      color: var(--muted);
      margin: 0;
      line-height: 1.5;
    }

    /* ── FEATURES ── */
    .features {
      padding: 7rem 0;
    }

    .features-header {
      text-align: center;
      margin-bottom: 4rem;
    }

    .features-header h2 {
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 700;
      letter-spacing: -0.025em;
      margin-bottom: 0.8rem;
    }

    .features-header p {
      color: #777;
      max-width: 480px;
      margin: 0 auto;
    }

    .modes {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
    }

    .mode-card {
      background: var(--surface);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 24px;
      padding: 2.5rem;
      position: relative;
      overflow: hidden;
      transition: border-color 0.3s;
    }
    .mode-card:hover { border-color: rgba(255,255,255,0.14); }

    .mode-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
    }

    .mode-card.yellow::before { background: linear-gradient(90deg, var(--yellow), transparent); }
    .mode-card.blue::before   { background: linear-gradient(90deg, var(--blue), transparent); }

    .mode-badge {
      display: inline-block;
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 0.3rem 0.8rem;
      border-radius: 100px;
      margin-bottom: 1.5rem;
    }

    .mode-card.yellow .mode-badge { background: rgba(245,171,0,0.12); color: var(--yellow); }
    .mode-card.blue .mode-badge   { background: rgba(59,125,245,0.12); color: var(--blue); }

    .mode-card h3 {
      font-size: 1.4rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      margin-bottom: 0.6rem;
    }

    .mode-card .desc {
      color: #777;
      font-size: 0.9rem;
      line-height: 1.7;
      margin-bottom: 1.8rem;
    }

    .feature-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
    }

    .feature-list li {
      display: flex;
      align-items: flex-start;
      gap: 0.65rem;
      font-size: 0.88rem;
      color: #aaa;
    }

    .feature-list li::before {
      content: '→';
      flex-shrink: 0;
      font-size: 0.8rem;
      margin-top: 0.05rem;
    }

    .mode-card.yellow .feature-list li::before { color: var(--yellow); }
    .mode-card.blue .feature-list li::before   { color: var(--blue); }

    /* ── PRICING ── */
    .pricing {
      padding: 7rem 0;
    }

    .pricing-header {
      text-align: center;
      margin-bottom: 4rem;
    }

    .pricing-header h2 {
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 700;
      letter-spacing: -0.025em;
      margin-bottom: 0.8rem;
    }

    .pricing-header p { color: #777; }

    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.2rem;
      max-width: 800px;
      margin: 0 auto;
    }

    .price-card {
      background: var(--surface);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 20px;
      padding: 2rem 1.5rem;
      text-align: center;
      position: relative;
      transition: border-color 0.3s, transform 0.3s;
    }
    .price-card:hover { border-color: rgba(245,171,0,0.3); transform: translateY(-3px); }

    .price-card.featured {
      border-color: rgba(245,171,0,0.4);
      background: rgba(245,171,0,0.04);
    }

    .featured-tag {
      position: absolute;
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--yellow);
      color: #000;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 0.25rem 0.9rem;
      border-radius: 100px;
    }

    /* Pictogramme de pellicule — bobine dont l'amorce se déroule.
       C'était un émoji 🎞 identique sur les trois cartes. Un émoji est rendu par la
       police système : Apple Color Emoji sur Mac, Segoe UI Emoji sur Windows, Noto sur
       Linux — trois dessins différents pour un seul code, et aucun qu'on contrôle.
       Même raisonnement que pour le back-office le 2026-08-02.
       Le format est écrit **au moyeu**, là où il l'est sur une vraie bobine : le
       pictogramme porte l'information au lieu de décorer à côté d'elle. */
    .film-icon {
      display: block;
      height: 60px;
      width: auto;
      margin: 0 auto 0.9rem;
      color: var(--yellow);
    }

    .film-icon .rim  { fill: none; stroke: currentColor; stroke-width: 2.2; }
    .film-icon .wind { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: 0.35; }
    .film-icon .hub  { fill: currentColor; }
    .film-icon .lead { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
    .film-icon .perf { fill: currentColor; opacity: 0.55; }
    /* Le nombre est posé sur le moyeu plein : il lui faut la couleur du fond de carte,
       pas celle du texte. 10,1:1 sur le jaune. */
    .film-icon .num {
      fill: #0d0d0d;
      font: 700 13px 'Space Grotesk', sans-serif;
      letter-spacing: -0.02em;
    }

    .price-poses {
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--muted-text);
      margin-bottom: 0.5rem;
    }

    .price-amount {
      font-size: 2.6rem;
      font-weight: 700;
      color: var(--yellow);
      letter-spacing: -0.03em;
    }

    .price-amount span {
      font-size: 1rem;
      font-weight: 400;
      color: var(--muted-text);
      letter-spacing: 0;
    }

    .price-detail {
      font-size: 0.78rem;
      color: var(--muted-text);
      margin-top: 0.5rem;
    }

    /* Bandeau « Prix de lancement ».
       Volontairement sans prix barré : afficher « ~~12 €~~ 9,99 € » est une annonce de
       réduction au sens de l'art. L.112-1-1 du code de la consommation, qui impose que
       le prix de référence soit le plus bas pratiqué dans les 30 jours précédents.
       L'app n'ayant jamais été vendue, ce prix n'existe pas. Même règle que dans l'app
       et dans get-pricing, qui ne renvoie aucun prix de référence. */
    .promo-banner {
      display: flex;
      align-items: center;
      gap: 1.1rem;
      max-width: 800px;
      margin: 0 auto 1.8rem;
      padding: 1.15rem 1.6rem;
      border-radius: 18px;
      /* Aplat plein, et non un fond teinté : c'est le seul endroit de la page qui
         inverse le contraste, donc le seul qu'on ne peut pas traverser sans le voir. */
      background: var(--yellow);
      color: #0a0a0a;
    }

    .promo-tag {
      flex-shrink: 0;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      background: rgba(0,0,0,0.18);
      padding: 0.32rem 0.75rem;
      border-radius: 100px;
      white-space: nowrap;
    }

    .promo-txt {
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      line-height: 1.35;
    }

    .promo-sub {
      display: block;
      font-size: 0.83rem;
      font-weight: 400;
      letter-spacing: 0;
      opacity: 0.72;
      margin-top: 0.15rem;
    }

    /* Sous-titre de famille tarifaire (Pellicule solo / Mode événement) */
    .price-family {
      display: flex;
      align-items: center;
      gap: 1rem;
      max-width: 800px;
      margin: 0 auto 1.5rem;
    }

    .price-family h3 {
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted-text);
      white-space: nowrap;
    }

    .price-family::after {
      content: '';
      flex: 1;
      height: 1px;
      background: rgba(255,255,255,0.06);
    }

    .price-family + .pricing-grid { margin-bottom: 4rem; }

    /* ── ÉVÉNEMENT : prix continu ──
       Pas de carte par palier : les paliers 100/250/500 ont été supprimés le
       2026-08-02 au profit d'un prix continu. Une grille de cartes réintroduirait
       visuellement les seuils qu'on vient de retirer. */
    .event-price {
      max-width: 800px;
      margin: 0 auto;
      background: var(--surface);
      border: 1px solid rgba(59,125,245,0.18);
      border-radius: 20px;
      padding: 2.2rem 2rem;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 2.5rem;
      align-items: center;
    }

    .event-price-lead { text-align: center; }

    /* « À partir de » n'est pas un ornement : il change le sens du montant qui suit.
       Il doit être lisible au même titre que le prix. */
    .event-price-from {
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--muted-text);
      margin-bottom: 0.4rem;
    }

    .event-price-amount {
      font-size: 2.6rem;
      font-weight: 700;
      color: var(--blue);
      letter-spacing: -0.03em;
      line-height: 1;
    }

    .event-price-amount span {
      font-size: 1rem;
      font-weight: 400;
      color: var(--muted-text);
      letter-spacing: 0;
    }

    .event-price-note {
      font-size: 0.78rem;
      color: var(--muted-text);
      margin-top: 0.6rem;
    }

    .event-examples {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.1rem;
    }

    .event-examples li {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.55rem 0;
      border-bottom: 1px solid rgba(255,255,255,0.05);
      font-size: 0.88rem;
      color: #aaa;
    }
    .event-examples li:last-child { border-bottom: none; }

    .event-examples .cfg { color: #aaa; }
    .event-examples .amt { color: var(--white); font-weight: 600; white-space: nowrap; }

    .event-examples-caption {
      font-size: 0.75rem;
      color: var(--muted-text);
      margin-top: 0.8rem;
      line-height: 1.5;
    }

    /* ── CTA BAND ── */
    .cta-band {
      padding: 6rem 0;
      text-align: center;
    }

    .cta-inner {
      background: linear-gradient(135deg, rgba(245,171,0,0.08) 0%, rgba(59,125,245,0.06) 100%);
      border: 1px solid rgba(245,171,0,0.12);
      border-radius: 28px;
      padding: 5rem 3rem;
      max-width: 700px;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
    }

    .cta-inner::before {
      content: '';
      position: absolute;
      width: 300px; height: 300px;
      background: var(--yellow);
      border-radius: 50%;
      top: -150px; right: -100px;
      filter: blur(100px);
      opacity: 0.08;
    }

    .cta-inner h2 {
      font-size: clamp(1.8rem, 4vw, 2.8rem);
      font-weight: 700;
      letter-spacing: -0.025em;
      margin-bottom: 1rem;
      position: relative;
    }

    .cta-inner p {
      color: #888;
      margin-bottom: 2.2rem;
      position: relative;
    }

    /* ── FOOTER ── */
    footer {
      border-top: 1px solid rgba(255,255,255,0.06);
      padding: 3rem 0;
    }

    .footer-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1.5rem;
    }

    .footer-left {
      display: flex;
      align-items: center;
      gap: 0.6rem;
    }


    .footer-brand {
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #444;
    }

    .footer-links {
      display: flex;
      gap: 2rem;
      list-style: none;
      flex-wrap: wrap;
    }

    .footer-links a {
      font-size: 0.8rem;
      color: #444;
      text-decoration: none;
      transition: color 0.2s;
    }
    .footer-links a:hover { color: #888; }

    .footer-copy {
      font-size: 0.78rem;
      color: #333;
    }

    /* ── DIVIDER ── */
    .divider {
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
    }

    /* ── RESPONSIVE ── */

    /* ── FAQ ──
       <details>/<summary> natifs : accordéon accessible au clavier, annoncé
       correctement par VoiceOver, et sans une ligne de JavaScript. Le contenu
       replié reste dans le DOM — Google l'indexe, contrairement à ce que fait un
       accordéon qui charge sa réponse au clic. */
    .faq { padding: 7rem 0; }

    .faq-header { text-align: center; margin-bottom: 3rem; }

    .faq-header h2 {
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 700;
      letter-spacing: -0.025em;
      margin-bottom: 0.8rem;
    }

    .faq-header p { color: var(--muted-text); }

    .faq-list { max-width: 780px; margin: 0 auto; display: grid; gap: 0.8rem; }

    .faq-item {
      background: var(--surface);
      border: 1px solid #1f1f1f;
      border-radius: var(--radius);
      overflow: hidden;
    }

    .faq-item[open] { border-color: rgba(245,171,0,0.35); }

    .faq-item summary {
      cursor: pointer;
      list-style: none;
      padding: 1.15rem 1.4rem;
      font-size: 1.02rem;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    /* Safari dessine son propre triangle et le place avant le texte : il double
       le chevron ci-dessous et casse l'alignement. */
    .faq-item summary::-webkit-details-marker { display: none; }

    .faq-item summary::after {
      content: "";
      flex: none;
      width: 9px;
      height: 9px;
      margin-top: -5px;
      border-right: 2px solid var(--yellow);
      border-bottom: 2px solid var(--yellow);
      transform: rotate(45deg);
      transition: transform 0.2s ease, margin 0.2s ease;
    }

    .faq-item[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }

    .faq-item summary:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; }

    .faq-answer { padding: 0 1.4rem 1.3rem; color: var(--muted-text); line-height: 1.65; }
    .faq-answer p + p { margin-top: 0.7rem; }

    .faq-more { text-align: center; margin-top: 2.2rem; font-size: 0.95rem; color: var(--muted-text); }
    .faq-more a { color: var(--yellow); }

    /* ── CTA COLLANT, SUR TÉLÉPHONE UNIQUEMENT ──
       Sous 768 px, `.nav-links` passe en display:none — et le seul appel à
       l'action du site disparaissait avec elle dès que le visiteur quittait le
       hero. Cette barre le lui rend, sans jamais l'imposer avant qu'il ait vu la
       proposition : elle n'apparaît qu'une fois le bouton du hero dépassé.

       Le bouton n'est PAS recopié ici : il est cloné à l'exécution depuis
       `.hero-actions .btn-primary` (script en bas de page). C'est ce qui évite
       d'ajouter un troisième endroit à modifier le jour de la mise en vente —
       le clone suit ce que devient l'original, App Store compris.

       `display: none` hors affichage plutôt qu'une opacité ou un aria-hidden :
       un lien invisible mais focalisable est un piège au clavier, et un
       aria-hidden posé sur un lien focalisable est une faute WCAG. Caché ainsi,
       il sort de l'arbre d'accessibilité comme de l'ordre de tabulation. */
    .mobile-cta {
      display: none;
      position: fixed;
      left: 0; right: 0; bottom: 0;
      z-index: 120;
      padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
      background: rgba(8,8,8,0.85);
      backdrop-filter: blur(20px);
      border-top: 1px solid rgba(255,255,255,0.08);
    }

    .mobile-cta .btn-primary { width: 100%; justify-content: center; }

    @media (max-width: 768px) {
      /* La barre collante n'existe que sur téléphone, et seulement une fois le
         CTA du hero dépassé — c'est le script en bas de page qui pose
         `body.cta-docked`. Le pied de page gagne alors la hauteur de la barre,
         sinon la dernière ligne (« © 2026 UNSEEN Factory ») passe dessous. */
      body.cta-docked .mobile-cta { display: block; }
      body.cta-docked footer { padding-bottom: 6rem; }

      .concept-grid, .modes { grid-template-columns: 1fr; }
      .pricing-grid { grid-template-columns: 1fr; max-width: 360px; }
      .nav-links { display: none; }
      .footer-inner { flex-direction: column; align-items: flex-start; }

      .event-price { grid-template-columns: 1fr; gap: 1.8rem; padding: 1.8rem 1.4rem; }
      /* La pastille et le texte ne tiennent pas côte à côte sous 768 px : la pastille
         passe au-dessus plutôt que de comprimer la phrase, qui porte le prix. */
      .promo-banner { flex-direction: column; align-items: flex-start; gap: 0.7rem; }
      /* Un exemple tarifaire qui se casse en deux lignes devient illisible :
         la configuration et son montant doivent rester sur la même ligne. */
      .event-examples li { font-size: 0.82rem; }
    }

/* ── SÉLECTEUR DE LANGUE ──
   Trois liens, pas un <select> : ce sont de vraies URL, donc elles doivent être
   des liens — indexables, ouvrables dans un nouvel onglet, annoncés comme tels. */
.language-switch {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  margin-left: 16px;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.language-switch a {
  padding: 4px 7px;
  border-radius: 6px;
  color: #8a8a8a;
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.language-switch a:hover {
  color: #F0EDE8;
  background-color: rgba(255, 255, 255, 0.06);
}
.language-switch a[aria-current="page"] {
  color: #080808;
  background-color: #F5AB00;
  font-weight: 600;
}