/* ==========================================================================
   FastSolve, MAQUETTE LOCALE : ciel étoilé sous l'accueil + superposition
   des sections. Rien n'est en ligne. Ce fichier ne fait qu'ajouter, il ne
   modifie aucune règle de styles.css, exactement comme le ferait un fichier
   déployé à côté (la CSP du site interdit le style en ligne).
   ========================================================================== */

/* --- 1. le fond ----------------------------------------------------------
   C'est la scene 3D de l'ecran d'accueil, sortie de .experience-gate et posee
   en calque fixe DERRIERE tout le document (fond3d.js). Un seul contexte
   WebGL pour toute la page, exactement le meme fond du haut jusqu'en bas.
   Consequence : les sections doivent etre transparentes pour le laisser voir,
   donc elles ne peuvent plus masquer la precedente par leur fond. C'est le
   contenu de la section recouverte qui s'efface, voir le point 5.
   -------------------------------------------------------------------------- */
body[data-page="accueil"] {
  /* visible seulement si WebGL manque : le canevas est opaque */
  background-color: #102129;
  background-image: radial-gradient(120% 70% at 50% 0%, rgba(19, 74, 74, .35), rgba(16, 33, 41, 0) 62%);
  background-repeat: no-repeat;
}

.fond3d {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* hero3d.css assombrit la moitie basse de l'ecran d'entree, jusqu'a 55 % de
   noir pile sur la jointure avec la suite. Le voile est retire : le fond doit
   etre d'une seule teinte du haut jusqu'en bas. */
body[data-page="accueil"] .experience-gate.hero3d-actif::before { display: none; }

/* L'ecran d'accueil laisse passer la scene au lieu de la cacher : c'est ce
   qui rend le fond continu entre le haut de la page et la suite. */
body[data-page="accueil"].fond3d-actif > .experience-gate { background: transparent; }

body[data-page="accueil"] > main,
body[data-page="accueil"] > .experience-gate,
body[data-page="accueil"] > .global-copyright { position: relative; z-index: 1; }

/* --- 2. les sections se superposent -------------------------------------- */
body[data-page="accueil"] main {
  /* la palette bascule ici, et seulement ici : les pages de service ne sont
     pas touchées */
  --ink: #f3fbf9;
  --muted: rgba(226, 242, 239, .72);
  --paper: transparent;
  --paper-strong: rgba(255, 255, 255, .055);
  --line: rgba(255, 255, 255, .15);
  --soft: rgba(140, 230, 213, .09);
  --clair: #8ce6d5;
  color: var(--ink);
  background: transparent;
  /* sans cela, le dernier panneau se colle au pied de page */
  padding-bottom: 22vh;
}

body[data-page="accueil"] main > .section {
  position: sticky;
  top: 0;
  isolation: isolate;
  /* Transparent : le fond de la page, c'est la scene 3D, une seule fois pour
     toute la hauteur. Aucun coin arrondi, aucun filet, aucune ombre, aucun
     ecart : plus rien ne dessine de bloc. */
  background: transparent;
}

/* L'ordre de dessin est declare, il ne depend plus de l'ordre du DOM ni des
   promotions de couche du navigateur. */
body[data-page="accueil"] main > .section:nth-child(1) { z-index: 1 }
body[data-page="accueil"] main > .section:nth-child(2) { z-index: 2 }
body[data-page="accueil"] main > .section:nth-child(3) { z-index: 3 }
body[data-page="accueil"] main > .section:nth-child(4) { z-index: 4 }
body[data-page="accueil"] main > .section:nth-child(5) { z-index: 5 }
body[data-page="accueil"] main > .section:nth-child(6) { z-index: 6 }


/* --- 3. relecture des couleurs héritées du thème clair ------------------- */
body[data-page="accueil"] main .section-heading h2,
body[data-page="accueil"] main h2,
body[data-page="accueil"] main h3 { color: var(--ink); }

body[data-page="accueil"] main .apercu-carte,
body[data-page="accueil"] main .categorie-carte,
body[data-page="accueil"] main .faq-item,
body[data-page="accueil"] main .method-slide {
  background: rgba(255, 255, 255, .055);
  border-color: rgba(255, 255, 255, .15);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}
body[data-page="accueil"] main .apercu-carte:hover,
body[data-page="accueil"] main .apercu-carte:focus-visible {
  border-color: rgba(140, 230, 213, .6);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .4);
}
body[data-page="accueil"] main .apercu-carte__image {
  background: rgba(140, 230, 213, .08);
  border-bottom-color: rgba(255, 255, 255, .15);
}
body[data-page="accueil"] main .apercu-carte__essai,
body[data-page="accueil"] main .categorie-carte__liste a,
body[data-page="accueil"] main .contact-direct-lien,
body[data-page="accueil"] main .contact-lead-lien,
body[data-page="accueil"] main .faq-item summary::after { color: var(--clair); }
body[data-page="accueil"] main .categorie-carte__liste a {
  text-decoration-color: rgba(140, 230, 213, .4);
}
body[data-page="accueil"] main .contact-direct { color: rgba(255, 255, 255, .78); }
body[data-page="accueil"] main .faq-item summary { color: var(--ink); }
body[data-page="accueil"] main .faq-item p,
body[data-page="accueil"] main .method-slide p { color: var(--muted); }
body[data-page="accueil"] main .faq-note { color: var(--ink); }

/* le carrousel de la méthode */
body[data-page="accueil"] main .method-nav {
  color: var(--ink);
  background: rgba(255, 255, 255, .08);
  box-shadow: none;
}
body[data-page="accueil"] main .method-nav:hover { color: var(--clair); }
body[data-page="accueil"] main .method-dot { background: rgba(255, 255, 255, .24); }
body[data-page="accueil"] main .method-dot.is-active { background: var(--clair); }
body[data-page="accueil"] main .method-slide:not(:nth-child(3n))::after {
  background: rgba(255, 255, 255, .18);
}

/* le formulaire */
body[data-page="accueil"] main .contact-form {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .15);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}
body[data-page="accueil"] main label { color: var(--ink); }
body[data-page="accueil"] main .form-delai { color: var(--muted); }
body[data-page="accueil"] main .form-status { color: var(--clair); }
body[data-page="accueil"] main input,
body[data-page="accueil"] main select,
body[data-page="accueil"] main textarea {
  color: var(--ink);
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .2);
}
body[data-page="accueil"] main input::placeholder,
body[data-page="accueil"] main textarea::placeholder { color: rgba(255, 255, 255, .45); }
body[data-page="accueil"] main input:focus,
body[data-page="accueil"] main select:focus,
body[data-page="accueil"] main textarea:focus {
  border-color: var(--clair);
  outline: 3px solid rgba(140, 230, 213, .18);
}
body[data-page="accueil"] main select option { color: #17212b; }
body[data-page="accueil"] main .button-primary {
  color: #052b28;
  background: var(--clair);
  border-color: var(--clair);
  box-shadow: 0 12px 30px rgba(140, 230, 213, .22);
}
body[data-page="accueil"] main .button-primary:hover,
body[data-page="accueil"] main .button-primary:focus-visible {
  color: #052b28;
  background: #a6f0e2;
}

/* le pied de page suit le ciel */
body[data-page="accueil"] .global-copyright {
  color: rgba(255, 255, 255, .55);
  background: transparent;
  border-top-color: rgba(255, 255, 255, .12);
}




/* --- 5. le contenu monte quand son panneau arrive ------------------------
   Pose par ciel.js : sans script, tout reste visible et immobile.
   -------------------------------------------------------------------------- */
body[data-page="accueil"] main > .section.anime > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 520ms cubic-bezier(.22, .61, .36, 1),
              transform 520ms cubic-bezier(.22, .61, .36, 1);
}
body[data-page="accueil"] main > .section.anime.est-arrive > * {
  opacity: 1;
  transform: none;
}
body[data-page="accueil"] main > .section.anime > *:nth-child(2) { transition-delay: 70ms }
body[data-page="accueil"] main > .section.anime > *:nth-child(3) { transition-delay: 140ms }
body[data-page="accueil"] main > .section.anime > *:nth-child(4) { transition-delay: 200ms }
body[data-page="accueil"] main > .section.anime > *:nth-child(n+5) { transition-delay: 250ms }

/* --- 5 bis. la section recouverte s'efface -------------------------------
   Les sections etant transparentes, deux contenus se liraient l'un sur
   l'autre pendant le recouvrement. Celui du dessous s'efface quand le suivant
   a couvert un peu plus de la moitie de l'ecran. Pose par ciel.js.
   -------------------------------------------------------------------------- */
body[data-page="accueil"] main > .section.anime.est-couvert > *,
body[data-page="accueil"] main > .section.anime.est-arrive.est-couvert > * {
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 420ms ease, transform 420ms ease;
  transition-delay: 0s;
}

/* --- 6. mouvement reduit -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body[data-page="accueil"] main > .section { position: relative }
  body[data-page="accueil"] main > .section.anime.est-couvert > * { opacity: 1; transform: none }
  body[data-page="accueil"] main > .section.anime > * {
    opacity: 1; transform: none; transition: none;
  }
}