/* ===========================================================================
   Scènes animées des bandeaux — version 10
   ===========================================================================
   Une « scène » va plus loin qu'un décor de fonds-v10.css : là où un décor
   tient dans les deux pseudo-éléments du bandeau, une scène apporte son propre
   balisage (calques SVG, repères, balayages) parce que deux couches n'y
   suffisent pas.

   Trois règles valent pour toutes les scènes, sans exception :

     - RIEN QUE transform ET opacity. Ce sont les deux propriétés que le
       navigateur compose sans refaire la mise en page ni repeindre. Animer une
       largeur, un décalage ou un filtre coûterait un reflow par image.
     - LENT. Aucun cycle sous 20 s. Le mouvement doit rester en dessous du seuil
       où l'œil le suit au lieu de lire le titre posé dessus.
     - LA BOUCLE SE REFERME. Chaque cycle finit sur l'image exacte où il
       commence ; il n'y a donc jamais de saut au rebouclage.

   Les scènes sont décoratives : aria-hidden dans le balisage, pointer-events
   coupés ici, et tout s'immobilise sous prefers-reduced-motion.
   =========================================================================== */

.hero-page-scene { position: relative; overflow: hidden; isolation: isolate; }

/* Quatre classes et un élément, et ce n'est pas de la coquetterie : style.css
   pose « .sec > div:not(.process-sticky):not(.drip-band) { position: relative } »
   sur tout div d'une section, soit une spécificité de 0,3,1. Un simple « .sc »
   perdait l'arbitrage : la scène repassait en « relative », donc dans le flux,
   et poussait le titre de près de 500 px vers le bas au lieu de passer
   derrière lui. Même piège que .calc-resultat dans calculateur.css. */
.hero-page.sec.hero-page-scene > div.sc {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.sc-svg { width: 100%; height: 100%; display: block; }

/* Le contenu du bandeau repasse devant la scène.
   Le décor lui-même est exclu : sans cette exclusion, le « position: relative »
   écraserait le « position: absolute » de la scène et la remettrait dans le
   flux — elle pousserait alors le titre vers le bas au lieu de passer
   derrière. C'est exactement le piège qui avait ouvert un grand vide en tête
   du calculateur. */
.hero-page-scene > *:not(.sc) { position: relative; z-index: 2; }

/* Voile de lisibilité, commun à toutes les scènes. Plus dense au centre, là où
   se trouvent le titre et le chapô ; presque transparent sur les bords, pour
   qu'on voie quand même la scène. */
.sc-voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(72% 66% at 50% 46%, rgba(16, 13, 11, 0.74) 0%, rgba(16, 13, 11, 0.42) 58%, transparent 84%),
    linear-gradient(180deg, rgba(16, 13, 11, 0.42) 0%, transparent 26%, transparent 62%, var(--bg) 100%);
}

/* ===========================================================================
   1. DIAGNOSTIC — bandeau de /conseils
   ===========================================================================
   Le cycle, en 38 s :

     0 %    mur propre
     6→18 % les défauts apparaissent, révélés par la lumière qui passe
     26→52 % les repères de diagnostic se posent, puis se retirent
     62→82 % les défauts s'effacent : le support est préparé
     82→100 % mur propre — soit exactement l'image de départ

   Le balayage lumineux tourne sur son propre cycle de 17 s, premier avec 38 :
   les deux ne se resynchronisent qu'au bout de plusieurs minutes, et la scène
   ne se répète donc jamais tout à fait à l'identique.
   =========================================================================== */

.sc-diagnostic .sc-defauts { opacity: 0; }
.sc-diagnostic .sc-reperes { opacity: 0; }
.sc-diagnostic .sc-faisceau { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .sc-diagnostic .sc-defauts  { animation: scDefauts 38s ease-in-out infinite; }
  .sc-diagnostic .sc-repere-1 { animation: scRepere 38s ease-in-out infinite; }
  .sc-diagnostic .sc-repere-2 { animation: scRepere 38s ease-in-out infinite -1.4s; }
  .sc-diagnostic .sc-repere-3 { animation: scRepere 38s ease-in-out infinite -2.6s; }
  .sc-diagnostic .sc-reperes  { opacity: 1; }
  .sc-diagnostic .sc-faisceau { animation: scFaisceau 17s linear infinite; }
  /* Le grain respire très légèrement : sans cela le mur paraît imprimé. */
  .sc-diagnostic .sc-grain    { animation: scGrainRespire 23s ease-in-out infinite alternate; }
}

@keyframes scDefauts {
  0%   { opacity: 0; }
  6%   { opacity: 0; }
  18%  { opacity: 1; }
  62%  { opacity: 1; }
  82%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Les repères se posent après les défauts et repartent avant eux : on regarde,
   on relève, puis on prépare. Les trois décalages négatifs suffisent à ce que
   les cercles n'arrivent pas tous ensemble. */
@keyframes scRepere {
  0%   { opacity: 0; transform: scale(0.94); }
  24%  { opacity: 0; transform: scale(0.94); }
  32%  { opacity: 1; transform: scale(1); }
  50%  { opacity: 1; transform: scale(1); }
  58%  { opacity: 0; transform: scale(1.03); }
  100% { opacity: 0; transform: scale(1.03); }
}

/* La lumière traverse, marque un temps hors champ, recommence. L'opacité
   retombe à zéro aux deux bouts : elle n'apparaît ni ne disparaît d'un coup. */
@keyframes scFaisceau {
  0%   { transform: translateX(0);      opacity: 0; }
  8%   {                                opacity: 1; }
  70%  {                                opacity: 1; }
  80%  { transform: translateX(1780px); opacity: 0; }
  100% { transform: translateX(1780px); opacity: 0; }
}

@keyframes scGrainRespire {
  from { opacity: 0.04; }
  to   { opacity: 0.07; }
}

/* --- Version mobile ------------------------------------------------------
   Le mur, les défauts et le voile restent — c'est ce qui porte l'ambiance.
   Les repères disparaissent : à cette largeur ils tombent derrière le titre,
   où ils se lisent comme du bruit plutôt que comme un diagnostic. */
@media (max-width: 720px) {
  .sc-diagnostic .sc-reperes { display: none; }

  /* --- La scène se fige sur téléphone --------------------------------------
     Masquer les repères ne suffisait pas : les trois animations de FOND
     continuaient de tourner en boucle, et ce sont elles qui coûtent.
     Mesuré en ligne le 6 août 2026, sur un écran de 375 px :

       scGrainRespire   902 000 px²   opacity, 23 s, infinie
       scDefauts        803 000 px²   opacity, 38 s, infinie
       scFaisceau       573 000 px²   translateX(1780px), 24 s, infinie

     Animer opacity et transform est bon marché sur un élément HTML, qui part
     alors sur sa propre couche de composition. À l'intérieur d'un SVG, non :
     la zone est re-rastérisée. Ici, près d'un million de pixels redessinés à
     chaque image, indéfiniment, visible ou non — et la page conseils est la
     seule à porter cette scène. C'est ce qui la rendait injouable sur
     téléphone alors que le reste du site passait.

     Le traitement est celui, déjà écrit plus bas, du réglage système
     « mouvement réduit » : on ne supprime pas la scène — le bandeau
     deviendrait un aplat noir — on la fige sur son état le plus parlant, le
     mur défauts révélés. Au-dessus de 720 px, l'animation d'origine est
     intacte. */
  .sc-diagnostic * { animation: none !important; }
  .sc-diagnostic .sc-defauts { opacity: 0.85; }
  .sc-diagnostic .sc-faisceau { opacity: 0; }
}

/* ===========================================================================
   2. SHOWROOM — bandeau de /inspirations
   ===========================================================================
   Dix panneaux muraux défilent en boucle. Le défilement est une animation CSS
   sur une piste écrite deux fois : à -50 %, l'image est identique à celle de
   départ, la boucle est donc invisible. La parallaxe à la souris, elle, est
   pilotée en JavaScript (assets/scene-showroom.js) et n'écrit que des
   translate3d sur les plans — les deux transformations se composent sans se
   gêner, parce qu'elles ne portent pas sur les mêmes éléments : la piste
   défile, son PARENT se déplace à la souris.
   =========================================================================== */

.sc-showroom { background: #16130F; }

.sh-plan {
  position: absolute;
  inset: -6%;              /* marge : la parallaxe ne doit jamais découvrir un bord */
  will-change: transform;
}

/* --- Les panneaux -------------------------------------------------------- */
.sh-piste {
  position: absolute;
  inset: 0;
  display: flex;
  /* 20 panneaux (deux séries de dix) à 16 % de la largeur du bandeau. */
  width: 320%;
}
.sh-panneau {
  flex: 0 0 5%;            /* 5 % de 320 % = 16 % du bandeau */
  position: relative;
}
/* Le joint entre deux panneaux : une arête sombre et un filet de lumière,
   comme deux cloisons qui se touchent. */
.sh-panneau + .sh-panneau {
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.05), inset 2px 0 14px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: no-preference) {
  /* 120 s pour traverser une série : environ un panneau toutes les douze
     secondes. C'est lent au point qu'on ne regarde pas le mouvement — on
     s'aperçoit seulement, en relevant les yeux, que le mur a changé. */
  .sh-piste { animation: shDefile 120s linear infinite; }
}
@keyframes shDefile {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* --- Les dix ambiances ---------------------------------------------------
   Chacune est un empilement de dégradés : une teinte de fond, un relief, et
   selon les cas une trame (tasseaux, panoramique) ou un nuage (pierre, chaux).
   Aucune image : dix photos de mur pèseraient plusieurs centaines de ko. */

.sh-mate {
  background:
    linear-gradient(158deg, rgba(255,255,255,0.05), transparent 62%),
    linear-gradient(180deg, #3B342C, #2E2822);
}
.sh-beton {
  background:
    radial-gradient(70% 55% at 30% 25%, rgba(255,255,255,0.07), transparent 68%),
    radial-gradient(60% 50% at 78% 72%, rgba(0,0,0,0.28), transparent 70%),
    linear-gradient(180deg, #464440, #302F2C);
}
.sh-panora {
  background:
    radial-gradient(45% 60% at 22% 70%, rgba(127,162,91,0.30), transparent 66%),
    radial-gradient(40% 52% at 68% 34%, rgba(214,136,94,0.26), transparent 68%),
    radial-gradient(52% 44% at 90% 82%, rgba(91,155,213,0.18), transparent 70%),
    linear-gradient(180deg, #37342E, #2A2823);
}
.sh-tasseaux {
  background:
    repeating-linear-gradient(90deg,
      #7A5734 0 8px, #91693F 8px 15px, #5E4327 15px 17px, #7A5734 17px 24px),
    linear-gradient(180deg, #7A5734, #5A3F25);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.42);
}
.sh-pierre {
  background:
    radial-gradient(38% 30% at 24% 22%, rgba(255,255,255,0.10), transparent 62%),
    radial-gradient(34% 28% at 70% 58%, rgba(255,255,255,0.07), transparent 64%),
    radial-gradient(30% 34% at 40% 84%, rgba(0,0,0,0.30), transparent 66%),
    linear-gradient(168deg, #5A544A, #423D36);
}
.sh-chaux {
  background:
    radial-gradient(60% 48% at 34% 34%, rgba(255,246,228,0.13), transparent 70%),
    radial-gradient(46% 40% at 74% 68%, rgba(255,246,228,0.08), transparent 68%),
    linear-gradient(180deg, #4B443A, #383229);
}
.sh-petrole {
  background:
    linear-gradient(158deg, rgba(255,255,255,0.06), transparent 58%),
    linear-gradient(180deg, #1E4A55, #133038);
}
.sh-sauge {
  background:
    linear-gradient(158deg, rgba(255,255,255,0.06), transparent 58%),
    linear-gradient(180deg, #55634A, #3B4634);
}
.sh-beige {
  background:
    linear-gradient(158deg, rgba(255,255,255,0.07), transparent 60%),
    linear-gradient(180deg, #6B6151, #4E463A);
}
.sh-noir {
  background:
    radial-gradient(58% 46% at 40% 28%, rgba(255,255,255,0.05), transparent 68%),
    linear-gradient(180deg, #1B1917, #0E0D0C);
}

/* --- Ombres portées des grandes fenêtres ---------------------------------
   Trois bandes claires inclinées, très diffuses : c'est ce qui donne l'heure
   et la profondeur de la pièce. Elles dérivent, sans jamais se croiser. */
.sh-fenetre {
  position: absolute;
  top: -30%;
  height: 170%;
  transform: skewX(-14deg);
  background: linear-gradient(90deg,
    transparent, rgba(255, 240, 214, 0.075) 38%, rgba(255, 240, 214, 0.075) 62%, transparent);
  filter: blur(14px);
}
.sh-fenetre-1 { left: 6%;  width: 13%; }
.sh-fenetre-2 { left: 41%; width: 9%;  opacity: 0.8; }
.sh-fenetre-3 { left: 73%; width: 15%; opacity: 0.65; }

@media (prefers-reduced-motion: no-preference) {
  .sh-fenetre-1 { animation: shJour 74s ease-in-out infinite alternate; }
  .sh-fenetre-2 { animation: shJour 96s ease-in-out infinite alternate -20s; }
  .sh-fenetre-3 { animation: shJour 118s ease-in-out infinite alternate -45s; }
}
@keyframes shJour {
  from { transform: skewX(-14deg) translate3d(-2%, 0, 0); }
  to   { transform: skewX(-11deg) translate3d(3%, 0, 0); }
}

/* --- La lumière qui balaie les surfaces ---------------------------------- */
.sh-balayage {
  position: absolute;
  top: -20%; left: 0;
  width: 34%; height: 140%;
  z-index: 1;
  pointer-events: none;
  transform: skewX(-10deg) translate3d(-60%, 0, 0);
  background: linear-gradient(90deg,
    transparent, rgba(255, 233, 191, 0.10) 45%, rgba(255, 243, 220, 0.14) 50%,
    rgba(255, 233, 191, 0.10) 55%, transparent);
  filter: blur(22px);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .sh-balayage { animation: shBalayage 29s ease-in-out infinite; }
}
@keyframes shBalayage {
  0%   { transform: skewX(-10deg) translate3d(-60%, 0, 0); opacity: 0; }
  12%  { opacity: 1; }
  76%  { opacity: 1; }
  88%  { transform: skewX(-10deg) translate3d(340%, 0, 0); opacity: 0; }
  100% { transform: skewX(-10deg) translate3d(340%, 0, 0); opacity: 0; }
}

/* --- Poussières dans la lumière ------------------------------------------ */
.sh-poussiere {
  position: absolute;
  width: var(--taille, 3px);
  height: var(--taille, 3px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 243, 220, 0.9), rgba(255, 233, 191, 0) 70%);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .sh-poussiere { animation: shPoussiere 26s ease-in-out infinite; }
}
/* Elles montent, dérivent, s'éteignent. Jamais de clignotement : l'opacité
   monte et redescend en fondu, elle ne bascule pas. */
@keyframes shPoussiere {
  0%   { transform: translate3d(0, 0, 0);          opacity: 0; }
  18%  {                                            opacity: 0.55; }
  50%  { transform: translate3d(22px, -46px, 0);   opacity: 0.75; }
  82%  {                                            opacity: 0.4; }
  100% { transform: translate3d(48px, -96px, 0);   opacity: 0; }
}

/* --- Feuillage ------------------------------------------------------------ */
.sh-feuillage { position: absolute; bottom: 0; width: clamp(120px, 15vw, 220px); height: auto; }
.sh-feuillage-gauche { left: 0; transform-origin: 10% 100%; }
.sh-feuillage-droite { right: 0; transform-origin: 90% 100%; }

@media (prefers-reduced-motion: no-preference) {
  .sh-feuillage-gauche { animation: shSouffle 21s ease-in-out infinite alternate; }
  .sh-feuillage-droite { animation: shSouffle 27s ease-in-out infinite alternate -8s; }
}
/* Un souffle, pas un vent : moins de deux degrés. Au-delà, la plante s'agite
   et l'œil quitte le titre pour la regarder. */
@keyframes shSouffle {
  from { transform: rotate(-1.1deg); }
  to   { transform: rotate(1.4deg); }
}

/* --- Version mobile -------------------------------------------------------
   On garde les panneaux et le voile — c'est eux qui font le showroom. Tombent
   le balayage, les poussières et le feuillage : trois couches de composition
   permanentes pour des détails invisibles sur un écran de téléphone. La
   parallaxe, elle, n'existe pas sans souris ; le script ne s'y branche pas. */
@media (max-width: 720px) {
  .sh-balayage,
  .sh-plan-poussiere,
  .sh-plan-feuillage { display: none; }
  /* Panneaux plus larges sur un écran étroit : on élargit la PISTE, pas les
     panneaux. Chacun vaut toujours 5 % de la piste — c'est ce qui garde les
     vingt à leur place — mais 5 % de 520 % font 26 % du bandeau au lieu de
     16 %. Toucher au flex-basis, lui, aurait laissé la piste à moitié vide. */
  .sh-piste { width: 520%; animation-duration: 170s; }
}

/* ===========================================================================
   Réglage système : plus aucun mouvement continu.
   ===========================================================================
   La scène reste, figée sur son état le plus parlant — mur avec ses défauts
   révélés, sans repères ni balayage. On ne la supprime pas : le bandeau
   deviendrait un aplat noir, ce qui est un autre rendu, pas un rendu calme.
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sc * { animation: none !important; transition: none !important; }
  .sc-diagnostic .sc-defauts { opacity: 0.85; }
  .sc-diagnostic .sc-reperes { opacity: 0; }
  .sc-diagnostic .sc-faisceau { opacity: 0; }
}