/*
  zaapbot.com, la feuille unique du site (refonte du 09/10/2026).

  Hugo, le 09/10/2026 : « pense a un autre style de layout pour le site, aussi je voulais du paralax, animations
  stylée et tout type AAA websites car là sa fait très wordpress moche. le bleu en fond est pas beau je préfère du
  sombre, sobre. Minimise le texte [...]. Le site doit être simple a naviger et vraiment pensée pour que
  l'utilisateur aille sur le discord ».

  Direction : un noir sobre, des surfaces graphite, un seul accent (l'indigo « Encre » de l'appli, voisin de celui du
  Discord) et la lueur turquoise du zaap, reservee aux effets. Cette feuille fait seule une page complete : les
  animations liees au defilement (`animation-timeline`), la ou le navigateur les connait, et une page immobile et
  complete ailleurs ou quand le visiteur a demande moins de mouvement. Aucun texte n'est cache sans repli : un detail
  montre au survol est deja ouvert sur un ecran tactile.

  Le 09/10/2026, Hugo : « Pour pousser encore le truc même si sa va demander du développement 3D ou autre ». L'accueil
  gagne la traversee du zaap, une scene WebGL (site/assets, construite depuis tools/site_zaapbot/3d). Les scripts de
  l'accueil posent sur <html> prevoit-3d (des le <head>), avec-3d (scene montee), avec-traversee (traversee montee)
  et traversee-douce (la meme, sans eclair, quand le mouvement reduit est demande) ; toutes les regles qui changent la
  mise en page pour la 3D sont sous ces classes. Sans elles, la page est complete.

  Relecture du 10/10/2026 : moins de texte (plus de puce, de note, de surtitres ni de bande qui defile), le bas de page
  en quatre blocs dans la grammaire du zaap au lieu des cartes SaaS, un detail qui ne s'ouvre plus au survol (il
  decalait la page), l'appel final sous l'arche du logo.
*/

:root {
  color-scheme: dark;
  --fond: #09090b;
  --fond-2: #0d0d10;
  --panneau: #111115;
  --panneau-fort: #17171c;
  --bordure: rgba(255, 255, 255, 0.07);
  --bordure-forte: rgba(255, 255, 255, 0.14);
  --texte: #ededef;
  --texte-2: #a1a1aa;
  --texte-3: #6e6e78;
  --lien: #a5abff;
  --accent: #5e6ad2;
  --accent-clair: #8a93f5;
  --accent-texte: #ffffff;
  --lueur: #23a1ac;
  --lueur-vive: #38ffff;
  --gres: #c1aa7d;
  --attention-fond: rgba(193, 170, 125, 0.06);
  --attention-bord: rgba(193, 170, 125, 0.35);
  --code-fond: rgba(255, 255, 255, 0.05);
  --focus: #8a93f5;
  --rayon: 10px;
  --rayon-carte: 18px;
  --largeur: 74rem;
  --largeur-texte: 44rem;
  --gouttiere: 1rem;
  --courbe: cubic-bezier(0.16, 1, 0.3, 1);
  --police: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system,
    "Helvetica Neue", Arial, sans-serif;
  --police-titre: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI Semibold", "Segoe UI",
    system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --police-code: "Cascadia Mono", Consolas, ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (min-width: 48rem) {
  :root {
    --gouttiere: 1.5rem;
  }
}

/* --- la base ---------------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Le grain, a peine visible : un bruit SVG en data, que la politique de securite admet (img-src data:). */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3 {
  font-family: var(--police-titre);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.4rem, 1.4rem + 4.4vw, 4.6rem);
  font-weight: 700;
}

h2 {
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
  font-weight: 680;
}

h3 {
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--lien);
  text-decoration-color: rgba(165, 171, 255, 0.35);
  text-underline-offset: 0.2em;
  transition: color 0.2s, text-decoration-color 0.2s;
}

a:hover {
  color: var(--texte);
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

code,
pre {
  font-family: var(--police-code);
  font-size: 0.9em;
}

code {
  background: var(--code-fond);
  border-radius: 6px;
  padding: 0.1em 0.35em;
}

pre {
  background: var(--panneau);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 0.9rem 1rem;
  overflow-x: auto;
}

pre code {
  background: none;
  padding: 0;
}

::selection {
  background: rgba(94, 106, 210, 0.45);
}

.enveloppe {
  width: min(100% - 2 * var(--gouttiere), var(--largeur));
  margin-inline: auto;
}

.enveloppe-texte {
  max-width: var(--largeur-texte);
}

.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.aller-au-contenu {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  background: var(--accent);
  color: var(--accent-texte);
  padding: 0.6rem 1rem;
  border-radius: var(--rayon);
}

.aller-au-contenu:focus {
  top: 1rem;
}

/* --- l'en-tete, colle en haut, en verre fume -------------------------------------------------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(9, 9, 11, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--bordure);
}

.entete .enveloppe {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4rem;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--texte);
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.marque img {
  width: 32px;
  height: 32px;
}

.navigation {
  margin-left: auto;
}

.navigation ul {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation a {
  display: block;
  color: var(--texte-2);
  font-size: 0.94rem;
  text-decoration: none;
  padding: 0.45rem 0.8rem;
  border-radius: 8px;
  transition: color 0.2s, background-color 0.2s;
}

.navigation a:hover,
.navigation a[aria-current="page"] {
  color: var(--texte);
  background: rgba(255, 255, 255, 0.05);
}

@media (max-width: 42rem) {
  .navigation {
    display: none;
  }

  .entete-discord {
    margin-left: auto;
  }
}

/* --- les boutons ------------------------------------------------------------------------------ */

.boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.75rem 0 0;
}

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.78rem 1.2rem;
  border-radius: 12px;
  border: 1px solid var(--bordure-forte);
  background: rgba(255, 255, 255, 0.03);
  color: var(--texte);
  font-weight: 600;
  font-size: 0.97rem;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 0.35s var(--courbe), box-shadow 0.35s var(--courbe), background-color 0.2s, border-color 0.2s;
}

.bouton:hover {
  color: var(--texte);
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-2px);
}

.bouton svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.bouton.primaire {
  border-color: transparent;
  background: linear-gradient(180deg, #6f7be0, var(--accent));
  color: var(--accent-texte);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 30px -8px rgba(94, 106, 210, 0.65);
}

.bouton.primaire:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 14px 42px -8px rgba(94, 106, 210, 0.9);
}

.entete-discord {
  padding: 0.55rem 0.95rem;
  font-size: 0.92rem;
}

.lien-suite {
  font-weight: 600;
  text-decoration: none;
}

.lien-suite:hover {
  text-decoration: underline;
}

/* --- l'accueil : le haut, le titre et deux boutons, l'arche du logo a cote ---------------------- */

.heros {
  position: relative;
  isolation: isolate;
  padding: clamp(3.5rem, 2rem + 6vw, 7rem) 0 clamp(3rem, 2rem + 4vw, 6rem);
  overflow: hidden;
}

.heros::before,
.heros::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}

.heros::before {
  width: 46rem;
  height: 30rem;
  right: -12rem;
  top: 2rem;
  background: radial-gradient(closest-side, rgba(35, 161, 172, 0.3), transparent);
  animation: respire 12s ease-in-out infinite alternate;
}

.heros::after {
  width: 30rem;
  height: 22rem;
  right: 8rem;
  top: 16rem;
  background: radial-gradient(closest-side, rgba(94, 106, 210, 0.22), transparent);
  animation: respire 16s ease-in-out infinite alternate-reverse;
}

.heros-grille {
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 62rem) {
  .heros-grille {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.heros h1 {
  color: var(--texte);
}

/* Seuls les mots « a cote du jeu » prennent la lueur du zaap ; le reste du titre est blanc, sans degrade indigo. */
.accent-zaap {
  background: linear-gradient(100deg, #b6fbff 0%, var(--lueur-vive) 45%, #2bc3cc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.heros-sous {
  max-width: 30rem;
  color: var(--texte-2);
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.22rem);
}

/* L'arche du logo, a la place de la scene 3D quand elle ne tourne pas : sa lueur derriere, un lent flottement. */
.heros-arche {
  position: relative;
  isolation: isolate;
  justify-self: center;
  width: min(100%, 29rem);
}

.heros-arche::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 16% 24% 30%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(56, 255, 255, 0.38), rgba(35, 161, 172, 0.14) 60%, transparent);
  filter: blur(42px);
}

.heros-arche img {
  width: 100%;
  filter: drop-shadow(0 34px 50px rgba(0, 0, 0, 0.65));
  animation: flotte 7s ease-in-out infinite alternate;
}

@media (max-width: 61.99rem) {
  .heros-arche {
    width: min(70%, 19rem);
  }
}

.fenetre {
  border-radius: 14px;
  border: 1px solid var(--bordure-forte);
  background: var(--panneau);
  overflow: hidden;
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 30px 90px -40px rgba(35, 161, 172, 0.5);
}

.fenetre img {
  width: 100%;
}

/* La traversee : sans les classes de la 3D (pas de script, pas de WebGL, ecran etroit ou tactile), ni scene, ni
   eclair, ni compteur, et la section n'a que la hauteur de son contenu. */
.scene-zaap,
.eclair,
.heros-hud {
  display: none;
}

/* --- une vraie session : la capture du jeu, le journal et le butin -------------------------------- */

.produit {
  position: relative;
  padding: clamp(3.5rem, 2.5rem + 3.5vw, 6rem) 0;
}

.produit-tete {
  margin-bottom: 2.25rem;
  text-align: center;
}

.produit-tete h2 {
  max-width: 40rem;
  margin-inline: auto;
}

/* La fenetre du jeu, et a sa droite deux panneaux de ZaapBot l'un sur l'autre. */
.produit-montage {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr);
  grid-template-areas: "fenetre journal" "fenetre butin";
  align-items: start;
  width: min(100% - 2 * var(--gouttiere), 56rem);
  margin-inline: auto;
}

.produit-montage figure {
  margin: 0;
}

.produit-fenetre {
  grid-area: fenetre;
}

.panneau-journal {
  grid-area: journal;
}

.panneau-butin {
  grid-area: butin;
}

.produit-panneau {
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--bordure-forte);
  background: var(--panneau);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.85);
}

.produit-panneau img {
  width: 100%;
  height: 8.5rem;
  object-fit: cover;
  object-position: top;
}

.panneau-butin img {
  height: auto;
  aspect-ratio: 300 / 210;
  object-fit: contain;
  object-position: top left;
  background: #1a1a1d;
}

.produit-fenetre > .donnee,
.produit-panneau > .donnee {
  display: block;
  padding: 0.65rem 0.85rem;
  border-top: 1px solid var(--bordure);
  white-space: nowrap;
}

.produit-appel {
  display: flex;
  justify-content: center;
  margin-top: 2.25rem;
}

/* Un libelle de donnees en chasse fixe, tire des captures, jamais invente. */
.donnee {
  color: var(--texte-2);
  font-family: var(--police-code);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.donnee .compte {
  color: var(--lueur-vive);
  font-variant-numeric: tabular-nums;
}

.compte-affiche {
  user-select: none;
}

@media (max-width: 47.99rem) {
  .produit-montage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "fenetre fenetre" "journal butin";
  }

  .produit-panneau img {
    height: 7.5rem;
  }

  .panneau-butin img {
    height: 7.5rem;
    aspect-ratio: auto;
  }
}

/* Sur un telephone, les panneaux gardent leur image et perdent leur libelle : la fenetre garde le sien. */
@media (max-width: 35.99rem) {
  .produit-panneau > .donnee {
    display: none;
  }
}

/* --- les sections ------------------------------------------------------------------------------ */

.section {
  padding: clamp(3.5rem, 2.5rem + 3.5vw, 6rem) 0;
}

.section-tete {
  max-width: 40rem;
  margin-bottom: 2.5rem;
}

.surtitre {
  display: inline-block;
  margin-bottom: 0.9rem;
  color: var(--accent-clair);
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.intro,
.chapo {
  color: var(--texte-2);
  font-size: 1.12rem;
  max-width: 40rem;
}

/* --- ce qu'il fait : quatre blocs, chacun avec un vrai visuel, dans la grammaire du zaap ------------
   Relecture du 10/10/2026 : sept tuiles d'icones au trait, puis trois etapes, puis trois cartes, c'etait le gabarit
   SaaS. Quatre blocs a la place : la carte des trajets, les metiers en libelles, la session en lignes de journal a
   cote de ZaapBot deplie, et les trois etapes avec le bouton du Discord. Aucun texte n'attend un survol : rien ne
   s'ouvre, rien ne decale la page. */

.blocs {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 48rem) {
  .blocs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bloc-trajet,
  .bloc-session {
    grid-column: 1 / -1;
  }
}

@media (min-width: 62rem) {
  .blocs {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .bloc-trajet {
    grid-column: span 8;
  }

  .bloc-metiers {
    grid-column: span 4;
  }

  .bloc-session {
    grid-column: span 7;
  }

  .bloc-etapes {
    grid-column: span 5;
  }
}

.bloc {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.4rem, 1rem + 1.2vw, 2rem);
  border-radius: 20px;
  border: 1px solid var(--bordure);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 45%), var(--fond-2);
  transition: border-color 0.4s;
}

/* La lueur du zaap, posee dans un coin de chaque bloc : la meme lumiere que la scene du haut. */
.bloc::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 28rem;
  aspect-ratio: 1;
  right: -12rem;
  top: -14rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(35, 161, 172, 0.16), transparent);
  pointer-events: none;
}

.bloc:hover {
  border-color: rgba(56, 255, 255, 0.18);
}

.bloc h3 {
  margin: 0;
  font-size: clamp(1.2rem, 1.05rem + 0.4vw, 1.4rem);
}

.bloc p {
  margin: 0;
  color: var(--texte-2);
}

.bloc-texte {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bloc-visuel {
  position: relative;
  margin: 0;
}

.bloc-visuel img {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--bordure-forte);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
  transition: transform 0.7s var(--courbe);
}

.bloc:hover .bloc-visuel img {
  transform: translateY(-3px) scale(1.012);
}

/* Le libelle d'une capture, pose sur son coin en chasse fixe, comme les reperes de la scene. */
.bloc-visuel .donnee {
  position: absolute;
  z-index: 1;
  left: 0.75rem;
  top: 0.75rem;
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
  border: 1px solid rgba(56, 255, 255, 0.25);
  background: rgba(9, 9, 11, 0.8);
  color: var(--texte);
  white-space: nowrap;
}

.bloc-trajet .bloc-visuel img {
  height: clamp(10rem, 6rem + 9vw, 15rem);
  object-fit: cover;
  object-position: top left;
}

/* Les metiers, en libelles a chasse fixe : un point de lueur, le nom. */
.metiers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
}

.metiers li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--bordure-forte);
  background: rgba(255, 255, 255, 0.02);
  color: var(--texte);
  font-family: var(--police-code);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.metiers li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lueur-vive);
  box-shadow: 0 0 10px rgba(56, 255, 255, 0.7);
}

/* Les libelles des metiers se posent en bas du bloc, a la hauteur de la carte des trajets voisine. */
.bloc-metiers .metiers {
  margin-top: auto;
}

@media (min-width: 62rem) {
  .bloc-metiers .metiers li {
    padding: 0.55rem 0.85rem;
    font-size: 0.8rem;
  }
}

/* La session, en lignes de journal : le libelle en chasse fixe, puis la phrase. ZaapBot deplie a cote. */
.bloc-session {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 36rem) {
  .bloc-session {
    grid-template-columns: minmax(0, 1fr) 9.5rem;
    align-items: start;
  }
}

.lignes {
  margin: 0.5rem 0 0;
}

.lignes > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.6rem 0;
  border-top: 1px solid var(--bordure);
}

.lignes dt {
  color: var(--gres);
  font-family: var(--police-code);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lignes dd {
  margin: 0;
  color: var(--texte-2);
  font-size: 0.97rem;
}

.bloc-colonne img {
  height: 17rem;
  object-fit: cover;
  object-position: top;
}

.bloc-colonne .donnee {
  position: static;
  display: block;
  margin-top: 0.6rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--texte-2);
  white-space: normal;
}

@media (max-width: 35.99rem) {
  .bloc-colonne {
    display: none;
  }
}

/* Les trois etapes, reliees par un trait de lueur, puis le bouton du Discord. */
.etapes {
  position: relative;
  display: grid;
  gap: 1.1rem;
  list-style: none;
  margin: 0.25rem 0 0.4rem;
  padding: 0;
  counter-reset: etape;
}

.etapes::before {
  content: "";
  position: absolute;
  left: 0.95rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 1px;
  background: linear-gradient(180deg, var(--lueur-vive), rgba(35, 161, 172, 0.15));
}

.etapes li {
  position: relative;
  padding-left: 2.9rem;
  color: var(--texte-2);
  counter-increment: etape;
}

.etapes li::before {
  content: "0" counter(etape);
  position: absolute;
  left: 0;
  top: -0.1rem;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  border: 1px solid rgba(56, 255, 255, 0.35);
  background: var(--fond-2);
  color: var(--lueur-vive);
  font-family: var(--police-code);
  font-size: 0.68rem;
}

.etapes strong {
  color: var(--texte);
  font-weight: 600;
}

.bloc-etapes .bouton {
  align-self: flex-start;
  margin-top: auto;
}

/* --- la confiance, et le risque dit en deux lignes -------------------------------------------- */

.confiance {
  display: grid;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 48rem) {
  .confiance {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

/* Un trait de lueur au-dessus de chaque point, qui s'eteint vers la droite : pas de cartes. */
.confiance li {
  padding: 1.1rem 0 0;
  background: linear-gradient(90deg, var(--lueur-vive), rgba(35, 161, 172, 0.45) 30%, rgba(255, 255, 255, 0.1) 70%) top left / 100% 1px no-repeat;
}

.confiance strong {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--police-titre);
  font-size: 1.08rem;
}

.confiance span {
  color: var(--texte-2);
  font-size: 0.95rem;
}

.encart {
  margin: 1.75rem 0 0;
  padding: 1rem 1.2rem;
  border-radius: var(--rayon);
  border: 1px solid var(--attention-bord);
  background: var(--attention-fond);
  color: var(--texte-2);
  font-size: 0.94rem;
}

.encart p:last-child {
  margin-bottom: 0;
}

/* --- l'appel final, au Discord ----------------------------------------------------------------- */

.appel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(1.5rem, 1rem + 3vw, 4rem);
  border-radius: 28px;
  border: 1px solid var(--bordure-forte);
  background: var(--panneau);
  text-align: center;
}

/* Deux lueurs floues, l'indigo du bouton et le turquoise du zaap (relecture du 10/10/2026 : un degrade conique qui
   tournait laissait voir ses quartiers en diagonales droites). */
.appel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20%;
  background:
    radial-gradient(38% 46% at 34% 22%, rgba(94, 106, 210, 0.3), transparent 72%),
    radial-gradient(40% 50% at 66% 80%, rgba(35, 161, 172, 0.26), transparent 72%);
  filter: blur(24px);
  animation: respire 14s ease-in-out infinite alternate;
}

.appel h2 {
  max-width: 34rem;
  margin-inline: auto;
}

.appel p {
  color: var(--texte-2);
}

.appel .boutons {
  justify-content: center;
}

.appel .bouton.primaire {
  padding: 1rem 1.6rem;
  font-size: 1.05rem;
}

/* La boucle se referme : l'arche du logo, petite, au-dessus du dernier appel. */
.appel-arche {
  width: min(10rem, 42%);
  margin: -0.5rem auto 1.25rem;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 34px rgba(56, 255, 255, 0.22));
  animation: flotte 7s ease-in-out infinite alternate;
}

/* --- les pages interieures : le bandeau, la prose, la FAQ ------------------------------------- */

.bandeau {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0 clamp(2rem, 1.5rem + 2vw, 3rem);
  border-bottom: 1px solid var(--bordure);
}

.bandeau::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 40rem;
  height: 22rem;
  left: 50%;
  top: -10rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(94, 106, 210, 0.3), transparent);
  filter: blur(60px);
}

.bandeau h1 {
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem);
}

.date {
  color: var(--texte-3);
  font-size: 0.9rem;
}

.prose {
  max-width: var(--largeur-texte);
  padding: 2.5rem 0 4rem;
  color: var(--texte-2);
}

.prose h2 {
  margin-top: 2.6rem;
  color: var(--texte);
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
}

.prose h3 {
  margin-top: 1.8rem;
  color: var(--texte);
}

.prose strong {
  color: var(--texte);
}

.prose ul,
.prose ol {
  padding-left: 1.25rem;
}

.prose li + li {
  margin-top: 0.4rem;
}

.prose li::marker {
  color: var(--accent-clair);
}

dl {
  margin: 0 0 1.5rem;
}

dt {
  color: var(--texte);
  font-weight: 600;
  margin-top: 1rem;
}

dd {
  margin: 0.2rem 0 0;
}

details {
  border: 1px solid var(--bordure);
  border-radius: 14px;
  background: var(--panneau);
  margin: 0.6rem 0;
  transition: border-color 0.2s, background-color 0.2s;
}

details[open] {
  border-color: var(--bordure-forte);
  background: var(--panneau-fort);
}

summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 1rem 3rem 1rem 1.2rem;
  color: var(--texte);
  font-weight: 600;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "";
  position: absolute;
  right: 1.2rem;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--texte-2);
  border-bottom: 2px solid var(--texte-2);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.3s var(--courbe);
}

details[open] summary::after {
  transform: translateY(-30%) rotate(225deg);
}

details > div {
  padding: 0 1.2rem 1rem;
}

/* Une section repliee d'une page interieure : son titre reste un h2, plus petit, dans le resume. */
details.pli {
  margin: 0.75rem 0;
}

.prose details.pli summary h2 {
  display: inline;
  margin: 0;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
}

.sommaire ul,
.sommaire ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
}

.sommaire a {
  display: inline-block;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  color: var(--texte-2);
  font-size: 0.9rem;
  text-decoration: none;
}

.sommaire a:hover {
  color: var(--texte);
  border-color: var(--bordure-forte);
}

.grille {
  display: grid;
  gap: 1rem;
}

@media (min-width: 48rem) {
  .grille.deux {
    grid-template-columns: repeat(2, 1fr);
  }

  .grille.trois {
    grid-template-columns: repeat(3, 1fr);
  }
}

.carte {
  padding: 1.4rem;
  border-radius: var(--rayon-carte);
  border: 1px solid var(--bordure);
  background: var(--panneau);
}

figure.capture {
  margin: 1.5rem 0 2rem;
}

figure.capture img {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--bordure-forte);
  background: var(--panneau);
}

figure.capture figcaption {
  margin-top: 0.5rem;
  color: var(--texte-3);
  font-size: 0.86rem;
}

/* Une capture de la seule fenetre de ZaapBot : petite, centree, jamais agrandie. */
figure.capture.etroite {
  max-width: 240px;
  margin-inline: auto;
}

figure.capture.etroite figcaption {
  text-align: center;
}

/* L'empreinte SHA-256 : 64 caracteres sans espace, coupes a la largeur d'un telephone. */
pre.empreinte code {
  white-space: pre-wrap;
  word-break: break-all;
}

.ligne-infos {
  color: var(--texte-3);
  font-size: 0.9rem;
}

.introuvable {
  padding: 5rem 0 6rem;
  text-align: center;
}

.introuvable img {
  width: 140px;
  margin: 0 auto 1.5rem;
}

.introuvable .boutons {
  justify-content: center;
}

/* --- le pied ------------------------------------------------------------------------------------ */

.pied {
  border-top: 1px solid var(--bordure);
  padding: 2.5rem 0 3rem;
  color: var(--texte-3);
  font-size: 0.88rem;
}

.pied .mention {
  color: var(--texte-2);
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.pied ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.2rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.pied a {
  color: var(--texte-3);
  text-decoration: none;
}

.pied a:hover {
  color: var(--texte);
}

/* --- le mouvement -------------------------------------------------------------------------------- */

@keyframes respire {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-3rem, 2rem, 0) scale(1.15);
  }
}

@keyframes apparition {
  from {
    opacity: 0;
    transform: translateY(2.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes redresse {
  from {
    transform: perspective(1400px) rotateX(16deg) scale(0.94);
  }
  to {
    transform: none;
  }
}

@keyframes flotte {
  to {
    transform: translateY(-14px);
  }
}

@keyframes parallaxe {
  to {
    transform: translateY(-6rem);
  }
}

/* Le mouvement lie au defilement : la ou le navigateur le connait, et pour qui ne l'a pas coupe. Sans lui, tout est
   deja a sa place, rien n'est cache. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .apparait {
      animation: apparition linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 28%;
    }

    .blocs .bloc:nth-child(2),
    .confiance li:nth-child(2) {
      animation-range: entry 12% cover 32%;
    }

    .blocs .bloc:nth-child(4),
    .confiance li:nth-child(3) {
      animation-range: entry 18% cover 36%;
    }

    @media (min-width: 62rem) {
      .produit-fenetre {
        animation: redresse linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 45%;
      }

      .heros-texte {
        animation: parallaxe linear both;
        animation-timeline: scroll(root);
        animation-range: 0 60vh;
      }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- la traversee du zaap : tout ce qui suit n'existe que sous les classes de la 3D ----------------- */

/*
  Trois classes sur <html>, posees par les scripts de l'accueil (site/assets, construits depuis tools/site_zaapbot/3d) :
  - prevoit-3d, par le petit script du <head>, avant le premier affichage, d'apres les seules media queries (ecran de
    62rem ou plus, souris, pas d'economie de donnees). Elle porte tout ce qui change dans le premier ecran : le heros
    en pleine hauteur, le grand titre, l'arche image retiree. Rien ne saute quand la scene arrive (relecture du
    10/10/2026) ; si elle ne peut pas tourner, le module retire la classe ;
  - avec-3d, quand la scene est montee : le canvas, son vignettage, les reperes ;
  - avec-traversee, quand la traversee est montee : la section de 200vh ou le heros reste colle, le compteur,
    l'eclair, et la section produit remontee sous l'eclair puis epinglee. Sans elle (machine trop lente pour la
    traversee), le zaap est une image fixe derriere le heros et la suite de la page est la version CSS ;
  - traversee-douce, avec avec-traversee, quand le visiteur a demande moins de mouvement : l'eclair blanc et turquoise
    devient un fondu sombre. Le 10/10/2026, Hugo, dont Windows a coupe les animations et qui ne voyait qu'une image
    fixe : « Et sa peut pas être natif au site ? ». Le mouvement reduit ne retient plus la traversee, il n'en retire
    que l'aplat lumineux plein ecran, le seul moment photosensible.
  Le contenu reste dans le HTML : la scene est aria-hidden.
*/

/* Les regles de lenis/dist/lenis.css (1.3.26), recopiees : le site ne charge aucune feuille d'ailleurs. */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* Le premier ecran, des le premier affichage. */
.prevoit-3d .traversee {
  position: relative;
}

.prevoit-3d .heros {
  z-index: 1;
  isolation: auto;
  overflow: visible;
  display: grid;
  align-content: center;
  min-height: calc(100vh - 4rem);
  min-height: calc(100svh - 4rem);
  padding: 0 0 4.5rem;
}

.prevoit-3d .heros::before,
.prevoit-3d .heros::after {
  content: none;
}

.prevoit-3d .heros-arche {
  display: none;
}

.prevoit-3d .heros-texte {
  animation: none;
}

.prevoit-3d .heros-grille {
  grid-template-columns: minmax(0, 40rem);
}

.prevoit-3d .heros h1 {
  max-width: 8.4em;
  margin-bottom: 0.45em;
  font-size: clamp(3.4rem, min(1.2rem + 4.4vw, 10.5vh), 6.6rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.prevoit-3d .heros-sous {
  max-width: 26rem;
}

/* La scene : invisible tant que le canvas n'est pas la, derriere le heros. */
.prevoit-3d .scene-zaap {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
}

.avec-3d .scene-zaap canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Le vignettage : les coins retombent dans le noir du site, la lueur reste sur le zaap. */
.avec-3d .scene-zaap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 95% at 64% 50%, transparent 45%, rgba(9, 9, 11, 0.55) 78%, rgba(9, 9, 11, 0.92) 100%);
}

/* Les reperes accroches a la scene : un point turquoise sur le modele, un trait, un libelle. Le script les place. */
.reperes {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Le point (::before) est l'ancre : le script place son centre sur le modele ; le trait est un fond de 1 px. */
.avec-3d .repere {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 2.8rem;
  color: rgba(237, 237, 239, 0.86);
  font-family: var(--police-code);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  background: linear-gradient(90deg, rgba(56, 255, 255, 0.55), rgba(56, 255, 255, 0.08)) no-repeat 0.9rem 50% / 2.2rem 1px;
  will-change: transform, opacity;
}

.avec-3d .repere::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--lueur-vive);
  background: rgba(56, 255, 255, 0.25);
  box-shadow: 0 0 14px rgba(56, 255, 255, 0.8);
}

/* Trop pres du bord droit, le libelle passe a gauche de son point (le script pose la classe). */
.avec-3d .repere.a-gauche {
  flex-direction: row-reverse;
  background: linear-gradient(270deg, rgba(56, 255, 255, 0.55), rgba(56, 255, 255, 0.08)) no-repeat right 0.9rem center / 2.2rem 1px;
}

/* La traversee, quand elle est montee. L'en-tete passe au-dessus de l'eclair : le Discord reste a portee. */
.avec-traversee {
  scroll-behavior: auto;
}

.avec-traversee .entete {
  z-index: 80;
}

.avec-traversee .traversee {
  height: 200vh;
}

.avec-traversee .scene-zaap {
  position: fixed;
}

/* Le heros colle sous l'en-tete (4rem) : il est deja a sa place au chargement, rien ne bouge avant la traversee. */
.avec-traversee .heros {
  position: sticky;
  top: 4rem;
  height: calc(100vh - 4rem);
  min-height: 0;
}

.avec-traversee .eclair {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(closest-side, #ffffff 0%, #e2ffff 9%, #9dfcff 22%, var(--lueur-vive) 38%, var(--lueur) 60%, #0b6f7c 80%, #06343b 100%) 50% 50% / 170vmax 170vmax no-repeat,
    #06343b;
  mix-blend-mode: screen;
  /* A la sortie, un trou s'ouvre au centre de l'eclair (--trou, que GSAP fait grandir) : on arrive par le milieu.
     Le masque est opaque tant que --trou vaut 0 : plus de tache grise au centre avant l'ouverture. */
  --trou: 0vmax;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--trou) - 4vmax), #000 var(--trou));
  mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--trou) - 4vmax), #000 var(--trou));
}

/* Le mouvement reduit demande (10/10/2026) : le meme calque et la meme ouverture en son centre, mais un fondu sombre
   au lieu de l'eclair. Un coeur bleu nuit a peine teinte, qui rappelle le tunnel sans jamais eclaircir l'ecran, et un
   melange normal : en « screen », un aplat sombre ne couvrirait rien. */
.avec-traversee.traversee-douce .eclair {
  background:
    radial-gradient(closest-side, #0c272c 0%, #0a1416 50%, var(--fond) 100%) 50% 50% / 170vmax 170vmax no-repeat,
    var(--fond);
  mix-blend-mode: normal;
}

/* Sous le mouvement reduit, la regle plus haut ramene toute transition a 0,01 ms, sur toutes les proprietes : la marge
   de -100vh de la section produit et chaque style ecrit par GSAP devenaient une transition en attente de l'image
   suivante, et ScrollTrigger mesurait la page d'avant (rendus du 10/10/2026 : section produit 100vh trop bas, un long
   aplat sombre avant l'atterrissage). La traversee est menee par le script : sous elle, aucune transition. */
.traversee-douce,
.traversee-douce *,
.traversee-douce *::before,
.traversee-douce *::after {
  transition: none !important;
}

/* Le pied du heros : l'invitation a defiler, la pastille Discord qui prend sa place, le compteur en chasse fixe. */
.avec-traversee .heros-hud {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.6rem;
  color: var(--texte-2);
  font-family: var(--police-code);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Un fond sombre et flou sous chaque libelle : lisible sur la lueur comme sur le noir. */
.hud-defile,
.hud-compteur {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--bordure);
  background: rgba(9, 9, 11, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.hud-defile {
  grid-area: 1 / 1;
  justify-self: start;
}

.hud-defile::before {
  content: "";
  width: 1px;
  height: 1.1rem;
  background: linear-gradient(180deg, transparent, var(--lueur-vive));
  transform-origin: top;
  animation: goutte 2.2s var(--courbe) infinite;
}

.hud-discord {
  grid-area: 1 / 1;
  justify-self: start;
  padding: 0.6rem 1rem;
  font-family: var(--police);
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
  visibility: hidden;
}

.hud-compteur {
  grid-area: 1 / 3;
}

.hud-pourcent {
  color: var(--texte);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.hud-barre {
  position: relative;
  width: 6rem;
  height: 1px;
  margin-left: 0.3rem;
  background: var(--bordure-forte);
}

.hud-remplissage {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--lueur), var(--lueur-vive));
  transform: scaleX(0);
  transform-origin: left;
}

/* La section produit, remontee sous l'eclair (marge de -100vh) puis epinglee : l'eclair s'ouvre sur elle. La fenetre
   du jeu au centre, le journal a gauche, le butin a droite sous la fenetre, a des places bornees par la fenetre
   elle-meme : rien ne deborde de 992 a 1920 px. */
.avec-traversee .produit {
  z-index: 2;
  height: 190vh;
  margin-top: -100vh;
  padding: 0;
  background: var(--fond);
}

.avec-traversee .produit-scene {
  isolation: isolate;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.4rem;
  padding: 4.5rem 0 1.5rem;
}

/* La lumiere du zaap, restee derriere la fenetre : une lueur douce, jamais un bord. */
.avec-traversee .produit-scene::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 54%;
  width: min(64rem, 86vw);
  height: 34rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(35, 161, 172, 0.2), rgba(35, 161, 172, 0.06) 55%, transparent);
  filter: blur(30px);
}

.avec-traversee .produit-tete {
  margin: 0 auto;
}

.avec-traversee .produit-tete h2 {
  margin: 0 auto;
  font-size: clamp(2rem, 0.9rem + 2.1vw, 3.1rem);
}

.avec-traversee .produit-montage {
  display: block;
  position: relative;
  width: min(40rem, 44vw);
  margin: 1.4rem auto 0;
  perspective: 1600px;
  transform-style: preserve-3d;
}

.avec-traversee .produit-fenetre {
  position: relative;
  overflow: visible;
  animation: none;
  transform-origin: 50% 50%;
  box-shadow: 0 60px 140px -40px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 40px 120px -50px rgba(56, 255, 255, 0.45);
}

.avec-traversee .produit-fenetre img {
  border-radius: 13px;
}

.avec-traversee .produit-montage .donnee {
  position: absolute;
  display: block;
  padding: 0;
  border: 0;
  color: var(--texte-2);
  white-space: nowrap;
}

.avec-traversee .produit-montage .donnee::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin: -0.15em 0.6rem 0 0;
  width: 1.4rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lueur-vive));
}

.avec-traversee .donnee-fenetre {
  left: 0;
  bottom: calc(100% + 0.8rem);
}

.avec-traversee .produit-panneau {
  position: absolute;
  overflow: visible;
  border: 0;
  background: none;
  box-shadow: none;
  will-change: transform, opacity;
}

.avec-traversee .produit-panneau img {
  border-radius: 12px;
  border: 1px solid var(--bordure-forte);
  background: var(--panneau);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.avec-traversee .produit-panneau > .donnee {
  top: calc(100% + 0.7rem);
  left: 0;
}

/* Les panneaux suivent la taille de la fenetre (44vw au plus pres) et chevauchent son bord de 2rem : le journal
   deborde a gauche de 8rem au plus, le butin a droite de 9rem au plus, toujours moins que les 28vw libres. */
.avec-traversee .produit-montage {
  --l-journal: clamp(7.5rem, 13vw, 10rem);
  --l-butin: clamp(10rem, 16vw, 13rem);
}

.avec-traversee .panneau-journal {
  left: calc(2rem - var(--l-journal));
  top: -1.25rem;
  width: var(--l-journal);
}

.avec-traversee .panneau-journal img {
  height: calc(var(--l-journal) * 1.35);
}

/* Son libelle finit avant la fenetre : ecrit sur le jeu, il ne se lirait pas. */
.avec-traversee .panneau-journal > .donnee {
  left: auto;
  right: 2.6rem;
}

/* Le butin, a droite sous la fenetre, presque hors du jeu. */
.avec-traversee .panneau-butin {
  left: calc(100% - 4rem);
  top: calc(100% - 4.5rem);
  width: var(--l-butin);
}

.avec-traversee .panneau-butin img {
  height: auto;
  aspect-ratio: 300 / 210;
}

.avec-traversee .produit-appel {
  margin-top: 0.6rem;
}

/* Les titres reveles ligne par ligne : la CSS ne les fait plus monter, GSAP s'en charge. */
.avec-traversee .section-tete,
.avec-traversee .appel {
  animation: none;
}

/* Le bouton magnetique : GSAP tient la transformation, la CSS ne garde que la lueur. */
.avec-traversee .appel .bouton.primaire {
  transition: box-shadow 0.35s var(--courbe), background-color 0.2s, border-color 0.2s;
}

@keyframes goutte {
  0% {
    transform: scaleY(0);
    opacity: 1;
  }
  60% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(1);
    opacity: 0;
  }
}

/* --- impression ------------------------------------------------------------------------------- */

/*
  Le papier est blanc et les navigateurs n'impriment pas les fonds : a l'impression, la page entiere, bandeaux
  compris, reprend des jetons fonces (relecture du 26/09/2026, gardee par la refonte du 09/10/2026).
*/
@media print {
  :root,
  .nuit {
    --fond: #ffffff;
    --fond-2: #ffffff;
    --panneau: #ffffff;
    --panneau-fort: #f2f2f2;
    --bordure: rgba(0, 0, 0, 0.25);
    --bordure-forte: rgba(0, 0, 0, 0.35);
    --texte: #000000;
    --texte-2: #333333;
    --texte-3: #555555;
    --lien: #0b4f5a;
    --accent: #0b4f5a;
    --accent-clair: #0b4f5a;
    --accent-texte: #ffffff;
    --gres: #5a4a36;
    --attention-fond: transparent;
    --attention-bord: #5a4a36;
    --code-fond: transparent;
    --focus: #0b4f5a;
  }

  body::after,
  .heros::before,
  .heros::after,
  .bandeau::before,
  .appel::before,
  .entete .navigation,
  .aller-au-contenu,
  .boutons,
  .produit-appel,
  .bloc-etapes .bouton,
  .appel-arche,
  .scene-zaap,
  .eclair,
  .heros-hud {
    display: none;
  }

  .prevoit-3d .scene-zaap,
  .avec-traversee .eclair,
  .avec-traversee .heros-hud {
    display: none !important;
  }

  /* Les apparitions liees au defilement n'ont pas de chronologie sur papier : tout est imprime a sa place. */
  .apparait {
    animation: none !important;
  }

  .prevoit-3d .traversee,
  .prevoit-3d .produit,
  .prevoit-3d .heros,
  .prevoit-3d .produit-scene {
    height: auto;
    min-height: 0;
    margin-top: 0;
    position: static;
  }

  /* Les styles que GSAP a poses pendant la traversee (texte efface, panneaux en route, libelles masques, lignes de
     titre encore baissees) survivent a l'impression : on remet tout a sa place, en clair. */
  .prevoit-3d .heros-texte,
  .prevoit-3d .produit,
  .prevoit-3d .produit-fenetre,
  .prevoit-3d .produit-panneau,
  .prevoit-3d .donnee,
  .prevoit-3d h1 div,
  .prevoit-3d h2 div {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .prevoit-3d .produit-panneau,
  .prevoit-3d .produit-montage .donnee {
    position: static !important;
  }

  .prevoit-3d .produit-montage {
    display: grid;
    width: 100%;
  }

  .entete {
    position: static;
    background: none;
  }

  .nuit {
    background: none;
    color: #000;
  }

  .accent-zaap {
    color: #000;
    background: none;
  }

  .fenetre {
    transform: none;
    box-shadow: none;
  }
}