/* ============================================================
   Base commune (V8) : couleurs, typo, fond, boutons, surfaces, panneaux, animations.
   Utilisée par toutes les pages du site.

   DA : celle des montages vidéo d'Adrien. Noir chaud, fumée rouge lente concentrée en haut de page
   (assets/fond.js), gros mots blancs en Inter très gras, mots-clés en serif gras italique rouge néon.
   Format : pensé pour le téléphone (colonne de 480 px). À partir de 1024 px, chaque page a sa vraie mise en page large
   (règles @media (min-width: 1024px) dans chaque page), et les fenêtres s'élargissent un peu.
   Mouvement : deux boucles infinies au maximum sur une page (la fumée, le point vert « en ligne »).
   Performance : aucune surface n'utilise de flou d'arrière-plan (backdrop-filter),
   qui obligerait le navigateur à recalculer le flou à chaque image du fond animé.
   ============================================================ */
@import url("polices.css");

:root {
  --fond: #0b0707;
  --surface: rgba(20, 11, 11, .92);
  --surface-2: #1b1010;
  --surface-3: rgba(255, 240, 235, .045);
  --bordure: rgba(255, 235, 230, .1);
  --bordure-forte: rgba(255, 235, 230, .2);
  --texte: #f7f2ee;
  --texte-2: #d3c7c2;
  --texte-3: #9d8e89;
  --rouge: #d4141c;      /* boutons, aplats : rouge profond */
  --rouge-vif: #ff1e1e;  /* mots-clés, chiffres : le rouge néon des montages */
  --rouge-sombre: #5e0a0e;
  --halo: 0 0 12px rgba(255, 20, 20, .5), 0 0 30px rgba(255, 0, 0, .22);
  --vert: #4cc38a;
  --or: #f5b94b;

  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Inter", ui-sans-serif, system-ui, sans-serif;
  --cle: "Tinos", "Times New Roman", Times, serif;
  --main: "Caveat", "Segoe Print", cursive;
  --mono: var(--sans);   /* anciens noms gardés pour les pages */
  --serif: var(--cle);

  --colonne: 480px;      /* largeur d'un écran de téléphone */
  --ease: cubic-bezier(.22, .8, .2, 1);
  --ease-sortie: cubic-bezier(.16, 1, .3, 1);
  --ease-ressort: cubic-bezier(.3, 1.3, .6, 1);
  --rayon: 18px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; font-synthesis: none; }
body {
  min-height: 100vh;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.bloque { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--rouge); color: #fff; }
:focus-visible { outline: 2px solid var(--texte); outline-offset: 3px; border-radius: 6px; }

/* ---------------- Fond : dégradé CSS immobile, recouvert par la fumée animée quand elle démarre ---------------- */
.scene {
  position: fixed; inset: 0; z-index: -10; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(ellipse 95% 52% at 50% -6%, rgba(212, 20, 28, .4), transparent 62%),
    radial-gradient(ellipse 55% 38% at 18% 18%, rgba(94, 10, 14, .45), transparent 70%),
    var(--fond);
}
.scene .image { display: none; } /* ancien repli photo (fond.jpg) : plus utilisé */
.scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s ease; }
.scene.anime canvas { opacity: 1; }

/* ---------------- Typo (comme dans les montages) ----------------
   .display    : gros mots blancs, Inter très gras
   .display em : le mot-clé, serif gras italique rouge néon (« CHIFFRE », « POUR LES TDAH ») */
.display { font-family: var(--display); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
.display em, .accent { font-family: var(--cle); font-style: italic; font-weight: 700; font-size: 1.1em; line-height: .9; letter-spacing: -.025em; color: var(--rouge-vif); text-shadow: var(--halo); padding-right: .06em; }
.majuscules { text-transform: uppercase; }
.surtitre { display: inline-flex; align-items: center; gap: 9px; font: 700 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--rouge-vif); }
.surtitre::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: currentColor; box-shadow: 0 0 8px rgba(255, 20, 20, .7); }
.doux { color: var(--texte-2); }
.discret { color: var(--texte-3); }
/* Annotation « au feutre » : seule utilisation de l'écriture manuscrite */
.note-main { font: 700 24px/1.05 var(--main); color: var(--rouge-vif); }
.ombre-texte { text-shadow: 0 2px 18px rgba(0, 0, 0, .75); }
.chiffre { font-family: var(--display); font-weight: 900; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }

/* Mot néon : les lettres s'allument dans le désordre, puis le mot se fixe (la signature des montages).
   Le script (panneaux.js) découpe les .neon en lettres, ajoute .vu quand le mot apparaît (à chaque passage),
   puis .fini à la fin : la lettre devient du texte normal, allumé, sans dépendre de la fin de l'animation
   (certains navigateurs ne la terminaient pas, et des lettres restaient éteintes).
   --n0 sur l'élément : retard de départ (ex. attendre que le titre soit écrit). */
.neon .lettre { opacity: 0; }
.neon.vu .lettre { opacity: 1; animation: neon-lettre .34s linear backwards; animation-delay: calc(var(--n0, 0ms) + var(--dl, 0ms)); }
.neon.fini .lettre { opacity: 1; animation: none; }
@keyframes neon-lettre { 0% { opacity: 0; } 1%, 29% { opacity: .9; } 30%, 54% { opacity: .15; } 55%, 74% { opacity: 1; } 75%, 99% { opacity: .4; } 100% { opacity: 1; } }
.neon .mot-n { display: inline-block; white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------- Apparitions ---------------- */
.entre { opacity: 0; transform: translateY(14px); animation: entre .8s var(--ease-sortie) forwards; animation-delay: var(--d, 0s); }
@keyframes entre { to { opacity: 1; transform: none; } }
.revele { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease-sortie), transform .9s var(--ease-sortie); transition-delay: var(--d, 0s); }
.revele.vu { opacity: 1; transform: none; }

/* ---------------- Surfaces ---------------- */
.verre {
  position: relative; isolation: isolate;
  background: var(--surface);
  border-radius: var(--rayon);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 24px 50px -30px rgba(0, 0, 0, .9);
}
.verre::before { /* bordure fine, un peu plus claire en haut */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(170deg, rgba(255, 240, 235, .2), rgba(255, 240, 235, .07) 40%, rgba(255, 240, 235, .04));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.verre.rouge { background: linear-gradient(145deg, rgba(96, 8, 12, .9), rgba(20, 10, 10, .94) 62%); }
.verre.rouge::before { background: linear-gradient(160deg, rgba(255, 30, 30, .7), rgba(255, 30, 30, .14) 45%, rgba(255, 255, 255, .03)); }

/* ---------------- Boutons ---------------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 0 26px; border-radius: 14px; border: 0; cursor: pointer;
  font: 700 16px/1 var(--sans); text-decoration: none; white-space: nowrap;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .2s;
  -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 19px; height: 19px; fill: currentColor; flex-shrink: 0; }
.btn-primaire {
  color: #fff; background: linear-gradient(180deg, #f02020, #b80e16);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .26) inset, 0 -1px 0 rgba(0, 0, 0, .25) inset, 0 14px 34px -14px rgba(212, 20, 28, .85);
}
.btn-primaire:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .26) inset, 0 20px 40px -14px rgba(212, 20, 28, 1); }
.btn-primaire:active { transform: translateY(0) scale(.98); }
.btn-fantome { color: var(--texte); background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 1px var(--bordure-forte) inset; }
.btn-fantome:hover { background: rgba(255, 255, 255, .1); transform: translateY(-2px); }
.btn-large { width: 100%; }
.btn .fleche { transition: transform .3s var(--ease); }
.btn:hover .fleche { transform: translateX(4px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
/* Action secondaire : un lien souligné, pas un deuxième gros bouton */
.lien-action {
  display: inline-flex; align-items: center; gap: 8px; padding: 0; background: none; border: 0; cursor: pointer;
  font: 700 16px/1.3 var(--sans); color: var(--texte);
  text-decoration: underline; text-decoration-color: var(--rouge-vif); text-decoration-thickness: 2px; text-underline-offset: 6px;
  transition: text-decoration-color .2s;
}
.lien-action:hover { text-decoration-color: var(--texte); }

/* « Le 3e offert » : une pastille dorée avec un cadeau, bien visible partout où le pack est proposé */
.offert { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; border-radius: 999px; font: 800 12px/1 var(--sans); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; color: #2a1600; background: linear-gradient(180deg, #ffd98a, #f5b94b); box-shadow: 0 0 0 1px rgba(255, 225, 160, .7) inset, 0 8px 22px -8px rgba(245, 185, 75, .9); }
.offert svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
/* Bouton d'action principal : le texte à gauche, la flèche dans un carré arrondi à droite (moins « bouton générique ») */
.btn-cta { justify-content: space-between; gap: 18px; padding: 0 7px 0 24px; min-width: min(100%, 340px); }
.btn-cta .fleche { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px; font-size: 18px; background: rgba(255, 255, 255, .16); box-shadow: 0 0 0 1px rgba(255, 255, 255, .24) inset; }
.btn-cta:hover .fleche { background: rgba(255, 255, 255, .26); }

/* ---------------- Étiquettes ---------------- */
.puce { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; font: 600 13px/1.2 var(--sans); color: var(--texte-2); background: rgba(20, 10, 11, .72); box-shadow: 0 0 0 1px var(--bordure) inset; }
.puce b { color: var(--rouge-vif); font-weight: 700; }
.point-vert { width: 8px; height: 8px; border-radius: 50%; background: var(--vert); box-shadow: 0 0 10px var(--vert); animation: respire 2.6s ease-in-out infinite; }
@keyframes respire { 50% { opacity: .45; } }

/* ---------------- Panneaux (fenêtre sur ordi, tiroir sur mobile) ---------------- */
.voile { position: fixed; inset: 0; z-index: 80; background: rgba(8, 3, 4, .8); opacity: 0; transition: opacity .3s; }
.voile.ouvert { opacity: 1; }
.panneau {
  position: fixed; z-index: 90; left: 50%; top: 50%;
  width: min(var(--colonne), calc(100% - 32px)); max-height: min(88vh, 880px);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #1b1010, #0f0808); border-radius: 24px;
  box-shadow: 0 0 0 1px var(--bordure), 0 50px 120px -30px rgba(0, 0, 0, .95), 0 0 80px -30px rgba(212, 20, 28, .35);
  opacity: 0; transform: translate(-50%, -46%) scale(.97);
  transition: opacity .35s var(--ease), transform .5s var(--ease-sortie);
}
.panneau.ouvert { opacity: 1; transform: translate(-50%, -50%); }
.panneau-tete { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px 24px; border-bottom: 1px solid var(--bordure); }
.panneau-tete .surtitre::before { display: none; }
.fermer {
  margin-left: auto; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; flex-shrink: 0;
  display: grid; place-items: center; background: rgba(255, 255, 255, .06); border: 0; box-shadow: 0 0 0 1px var(--bordure) inset; color: var(--texte);
  transition: background .2s, transform .4s var(--ease);
}
.fermer svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.fermer:hover { background: var(--rouge); transform: rotate(90deg); }
.poignee { display: none; }
.panneau-corps { overflow-y: auto; padding: 26px 26px 10px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #3a2a2a transparent; }
.panneau-pied { padding: 14px 26px calc(18px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--bordure); display: grid; gap: 8px; }
.panneau-pied .note { font-size: 13px; color: var(--texte-2); text-align: center; }
.panneau.ouvert .cascade > * { animation: entre .6s var(--ease-sortie) both; }
.panneau.ouvert .cascade > *:nth-child(2) { animation-delay: .05s; }
.panneau.ouvert .cascade > *:nth-child(n+3) { animation-delay: .1s; }

@media (min-width: 1024px) {
  .panneau { width: min(600px, calc(100% - 64px)); }
}
@media (max-width: 640px) {
  .panneau {
    left: 0; right: 0; top: auto; bottom: 0; width: 100%;
    max-height: calc(93vh - env(safe-area-inset-top, 0px));
    border-radius: 24px 24px 0 0;
    transform: translateY(100%); opacity: 1;
  }
  .panneau.ouvert { transform: none; }
  .poignee { display: block; width: 40px; height: 5px; border-radius: 5px; background: #4a3535; margin: 9px auto 0; }
  .panneau-tete { padding: 10px 14px 12px 20px; }
  .panneau-corps { padding: 22px 20px 10px; }
  .panneau-pied { padding-inline: 20px; }
}

/* ---------------- Animations de texte ----------------
   [data-mots]  : chaque mot sort d'un masque, par le bas (une seule fois)
   .surligne    : un trait de feutre rouge se dessine sous la phrase clé
   .allume      : le texte s'éclaire mot après mot pendant le scroll */
[data-mots] .mot { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em .05em .16em; margin: -.1em -.05em -.16em; }
[data-mots] .mot > span { display: inline-block; transform: translateY(112%); transition: transform 1s var(--ease-sortie); transition-delay: calc(var(--i) * 50ms + var(--d0, 0ms)); }
[data-mots].vu .mot > span { transform: none; }
.surligne {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5c30-4 62-5.5 98-4.2 32 1 66 2.8 98 1.2' fill='none' stroke='%23d4141c' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100% / 0% .42em;
  padding-bottom: .12em; transition: background-size .9s var(--ease) .4s;
}
.surligne.vu, .vu .surligne { background-size: 100% .42em; }
.allume .mot2 { opacity: .22; transition: opacity .35s ease; }
.allume .mot2.on { opacity: 1; }

/* ---------------- Défilement fluide (Lenis) ---------------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------------- Barre de progression de lecture ---------------- */
.progression { position: fixed; top: 0; left: 0; right: 0; z-index: 70; height: 2px; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--rouge-sombre), var(--rouge-vif)); pointer-events: none; }

/* ---------------- Pied de page et liens légaux (commun) ---------------- */
.legal-liens { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.legal-liens a { color: var(--texte-2); text-decoration: none; }
.legal-liens a:hover { color: var(--texte); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .entre, .revele { opacity: 1; transform: none; }
  [data-mots] .mot > span { transform: none; }
  .surligne { background-size: 100% .42em; }
  .allume .mot2 { opacity: 1; }
  .neon .lettre { opacity: 1; }
}