/* Tests de défilement pour Red Zone — rien de ceci n'est en ligne.
   Ajouté par-dessus les VRAIES pages du site (copies), sans toucher à leur CSS. */

/* ---- Bandeau de test, en bas à gauche --------------------------------- */
.fx-test {
  position: fixed; z-index: 9999; left: .8rem; bottom: .8rem; display: flex; align-items: center; gap: .6rem;
  padding: .4rem .85rem; border-radius: 999px; background: rgba(0, 0, 0, .78); border: 1px solid rgba(255, 255, 255, .18);
  color: #fff; font: 600 .72rem/1.2 "Montserrat", system-ui, sans-serif; letter-spacing: .08em;
}
.fx-test a { color: var(--rouge-400, #e86a62); text-decoration: none; }
.fx-test a:hover { text-decoration: underline; }

/* ---- Barre de lecture : une fine ligne rouge qui avance avec la page ---- */
.fx-barre {
  position: fixed; z-index: 9998; left: 0; top: 0; width: 100%; height: 3px; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #8f1c14, #d0342c 60%, #ff7a70); box-shadow: 0 0 12px rgba(208, 52, 44, .7);
}

/* ---- Halo qui suit la souris ------------------------------------------- */
.fx-halo {
  position: fixed; z-index: 1; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; pointer-events: none;
  background: radial-gradient(circle, rgba(208, 52, 44, .13), transparent 62%); will-change: transform;
}

/* ---- Titres de section : les mots arrivent un à un, un trait se dessine -- */
.fx-titre .fx-mot { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; }
.fx-titre .fx-mot > span { display: inline-block; transform: translateY(105%); transition: transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * 70ms); }
.fx-titre.fx-in .fx-mot > span { transform: none; }
.fx-titre::after {
  content: ""; display: block; width: 0; height: 3px; margin-top: .6rem; border-radius: 2px;
  background: linear-gradient(90deg, #d0342c, transparent); transition: width .9s .25s cubic-bezier(.2, .8, .2, 1);
}
.fx-titre.fx-in::after { width: 84px; }
.entete-section--centre .fx-titre::after, .fx-titre.fx-centre::after { margin-inline: auto; }

/* ---- Cartes : inclinaison douce et reflet qui suit le curseur ----------- */
.fx-carte { transition: transform .25s ease-out, box-shadow .25s; }
.fx-carte.fx-actif { will-change: transform; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); }
.fx-carte::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(232, 106, 98, .22), transparent 55%);
}
.fx-carte.fx-actif::after { opacity: 1; }
.fx-carte { position: relative; }

/* ---- Rail de navigation à droite : une pastille par section ------------- */
/* Rail de navigation (27 oct. 2026, demande de Dominic) : pastilles plus grosses, et les noms restent écrits en
   permanence, comme des boutons. Sous 1200 px, l'espace manque à droite du contenu : les noms n'apparaissent qu'au survol. */
.fx-rail { position: fixed; z-index: 90; right: clamp(.6rem, 1.6vw, 1.4rem); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; gap: 1.05rem; }
.fx-rail a { position: relative; width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, .4); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); transition: transform .25s, background .25s, box-shadow .25s; }
.fx-rail a:hover, .fx-rail a:focus-visible { background: rgba(255, 255, 255, .8); }
.fx-rail a.fx-actif { background: #d0342c; box-shadow: 0 0 14px #d0342c; transform: scale(1.3); }
.fx-rail a::before {
  content: attr(data-nom); position: absolute; right: 24px; top: 50%; transform: translateY(-50%); white-space: nowrap; opacity: 0;
  padding: .3rem .7rem; border-radius: 999px; background: rgba(10, 6, 7, .78); border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .78); font: 500 .76rem/1.2 "Montserrat", system-ui, sans-serif; transition: opacity .2s, color .2s, border-color .2s;
}
.fx-rail a.fx-actif::before { transform: translateY(-50%) scale(calc(1 / 1.3)); transform-origin: right center; }
.fx-rail a:hover::before, .fx-rail a:focus-visible::before { opacity: 1; color: #fff; border-color: rgba(208, 52, 44, .7); }
.fx-rail a.fx-actif::before { color: #fff; border-color: rgba(208, 52, 44, .8); }
@media (min-width: 1200px) { .fx-rail a::before { opacity: 1; } }
@media (max-width: 900px) { .fx-rail, .fx-halo { display: none; } }

/* ---- Option 2 : l'appareil collé à côté du texte ------------------------ */
.fiche-service__cote { position: sticky; top: 5.5rem; align-self: start; }
.stage-appareil {
  position: relative; height: 330px; margin-bottom: 1.1rem; border-radius: 16px; overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 80%, rgba(208, 52, 44, .45), rgba(10, 6, 7, .96) 72%);
  border: 1px solid rgba(208, 52, 44, .35); box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
}
.stage-appareil canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage-appareil .stage-legende {
  position: absolute; left: 0; right: 0; bottom: .6rem; margin: 0; text-align: center; color: rgba(255, 255, 255, .8);
  font: 600 .74rem "Montserrat", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; pointer-events: none;
}
.stage-appareil.sans-webgl { display: none; }
@media (max-width: 900px) { .fiche-service__cote { position: static; } .stage-appareil { height: 260px; } }

/* ---- Option 3 : le carrousel en haut de la page Services ---------------- */
.bande-carrousel { padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(2rem, 5vw, 3rem); background: linear-gradient(180deg, #17090b, #0a0607); position: relative; z-index: 2; }
.bande-carrousel .cadre-c { position: relative; height: clamp(420px, 56vw, 560px); }
.bande-carrousel canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bande-carrousel canvas.survol { cursor: pointer; }
.bande-carrousel .titre-bande { text-align: center; margin: 0 0 .4rem; color: #fff; font: 500 clamp(1.4rem, 3vw, 2rem) "Jura", sans-serif; }
.bande-carrousel .sous-bande { text-align: center; margin: 0 auto; max-width: 56ch; color: rgba(255, 255, 255, .72); font-size: .95rem; }
.bande-carrousel .nom, .cadre-a .nom, .cadre-c .nom {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; white-space: nowrap; will-change: transform, opacity;
  padding: .28rem .75rem; border-radius: 999px; font: 600 .8rem "Jura", "Montserrat", sans-serif; letter-spacing: .02em; color: #fff;
  background: rgba(10, 6, 7, .8); border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}
.bande-carrousel .etiquette, .cadre-a .etiquette, .cadre-c .etiquette {
  position: absolute; z-index: 5; pointer-events: none; min-width: 190px; padding: .65rem .9rem; border-radius: 12px; color: #fff;
  background: rgba(14, 8, 9, .94); border: 1px solid #d0342c; box-shadow: 0 8px 30px rgba(0, 0, 0, .5), 0 0 22px rgba(208, 52, 44, .3); transform: translate(-50%, -100%);
}
.bande-carrousel .etiquette.bas, .cadre-a .etiquette.bas, .cadre-c .etiquette.bas { transform: translate(-50%, 0); }
.bande-carrousel .etiquette b, .cadre-a .etiquette b, .cadre-c .etiquette b { display: block; font: 600 1rem "Jura", sans-serif; }
.bande-carrousel .etiquette span, .cadre-a .etiquette span, .cadre-c .etiquette span { display: block; font-size: .76rem; color: rgba(255, 255, 255, .75); margin: .1rem 0 .35rem; }
.bande-carrousel .etiquette i, .cadre-a .etiquette i, .cadre-c .etiquette i { font-style: normal; font-size: .74rem; font-weight: 600; color: #e86a62; }
.bande-carrousel .commandes, .cadre-a .commandes, .cadre-c .commandes { position: absolute; z-index: 4; left: 50%; bottom: .2rem; transform: translateX(-50%); display: flex; gap: .7rem; }
.bande-carrousel .commandes button, .cadre-a .commandes button, .cadre-c .commandes button {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); background: rgba(10, 6, 7, .65); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.bande-carrousel .commandes button:hover, .cadre-a .commandes button:hover, .cadre-c .commandes button:hover { border-color: #d0342c; background: rgba(208, 52, 44, .25); }
.bande-carrousel.sans-webgl .cadre-c { display: none; }

@media (prefers-reduced-motion: reduce) {
  .fx-titre .fx-mot > span { transform: none; transition: none; }
  .fx-titre::after { width: 84px; transition: none; }
  .fx-carte, .fx-carte.fx-actif { transform: none; }
}

/* ---- Accueil avec le carrousel (test) : la scène prend la place de l'anneau ---- */
.cadre-a { position: relative; width: 100%; height: clamp(520px, 74vh, 820px); }
.cadre-a canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cadre-a canvas.survol { cursor: pointer; }
.cadre-a .logo-secours { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.cadre-a.sans-webgl canvas { display: none; } .cadre-a.sans-webgl .logo-secours { display: block; }

/* ---- Petits écrans : pas de 3D (on ne télécharge même pas la bibliothèque) ---- */
@media (max-width: 900px) { .stage-appareil, .bande-carrousel { display: none; } }

/* ---- Page Services : un seul écran, texte à gauche, carrousel et légende à droite ------------------------------ */
.heros--scene { padding-block: 0; min-height: calc(100vh - 124px); display: flex; align-items: center; }
.heros--scene .heros__grille--scene { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(1rem, 2.5vw, 2.5rem); align-items: center; width: 100%; max-width: 1500px; margin-inline: auto; }
.heros--scene h1 { max-width: 15ch; font-size: clamp(1.9rem, 3.2vw, 2.9rem); }
.heros--scene .heros__intro { font-size: 1rem; max-width: 40ch; }
.heros__scene { display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.heros--scene .cadre-c { position: relative; height: clamp(420px, calc(100vh - 290px), 740px); }
.heros--scene .cadre-c canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.heros--scene .cadre-c canvas.survol { cursor: pointer; }
/* Si l'ordinateur est trop lent pour la 3D, elle s'arrête d'elle-même : le logo fixe reste, les légendes aussi. */
.cadre-c .logo-secours { display: none; position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: min(60%, 320px); height: auto; }
.cadre-c.sans-webgl canvas, .cadre-a.sans-webgl canvas, .stage-appareil.sans-webgl canvas { display: none; }
.cadre-c.sans-webgl .logo-secours { display: block; }
.cadre-c.sans-webgl .commandes, .cadre-c.sans-webgl .etiquette { display: none; }
.heros__scene-a { display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.heros__scene-a .cadre-a { height: clamp(420px, calc(100vh - 300px), 740px); }

/* La légende : les neuf services écrits à côté de la scène. Celui de l'appareil de devant est teinté, celui qu'on survole s'allume. */
.neuf { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem .45rem; }
.neuf a { display: block; padding: .42rem .9rem; border-radius: 999px; text-decoration: none; color: #fff; font-size: .84rem; font-weight: 500;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .17); transition: border-color .2s, background .2s; }
.neuf a:hover, .neuf a:focus-visible, .neuf a.actif { border-color: #d0342c; background: rgba(208, 52, 44, .26); }
.neuf a.devant:not(.actif) { border-color: rgba(232, 106, 98, .7); background: rgba(208, 52, 44, .13); }

@media (max-width: 900px) {
  .heros--scene { min-height: 0; padding-block: clamp(3rem, 6vw, 4.5rem); display: block; }
  .heros--scene .heros__grille--scene { grid-template-columns: 1fr; }
  .heros__scene, .heros__scene-a { display: none; }
}

/* ---- GRANDS ÉCRANS : on se règle sur la HAUTEUR de l'écran (un écran ultra-large de 3400 x 1260 px n'est pas un 4K) ---- */
@media (min-height: 1300px) {
  .heros--scene .heros__grille--scene { max-width: 1900px; }
  .heros--scene .heros__col-texte { zoom: 1.2; }
  .heros--scene .cadre-c { height: min(calc(100vh - 340px), 980px); }
  .neuf a { font-size: 1rem; padding: .5rem 1.1rem; }
  .cadre-c .commandes button { width: 54px; height: 54px; font-size: 1.7rem; }
}
@media (min-height: 1800px) {
  .heros--scene .heros__grille--scene { max-width: 2500px; }
  .heros--scene .heros__col-texte { zoom: 1.5; }
  .heros--scene .cadre-c { height: min(calc(100vh - 430px), 1300px); }
  .neuf a { font-size: 1.25rem; padding: .6rem 1.4rem; }
  .cadre-c .commandes button { width: 70px; height: 70px; font-size: 2.2rem; }
}

/* Le circuit imprimé derrière la scène est FIXE. Il « respirait » (opacité animée) : mesuré le 26 oct. 2026,
   c'était le plus gros coût de la page, environ 35 % de chaque image, parce que le navigateur recompose alors
   tout le héros à chaque image. Les points lumineux du circuit suffisent à le rendre vivant. */
.heros--scene::before { opacity: .36; }

/* ---- Fond sombre de la page Services : les cartes de services deviennent des cartes de verre ---------------- */
/* Les flèches SOUS la scène, entre l'animation et les pastilles : posées dans la scène, elles cachaient
   l'appareil de devant (remarque de Dominic, 26 oct. 2026). */
.commandes--sous { display: flex; justify-content: center; gap: .7rem; margin: .4rem 0 .6rem; }
.commandes--sous button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06);
  color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; transition: border-color .15s, background .15s; }
.commandes--sous button:hover, .commandes--sous button:focus-visible { border-color: #d0342c; background: rgba(208, 52, 44, .25); }
:has(> .sans-webgl) > .commandes--sous { display: none; }
@media (min-height: 1300px) { .commandes--sous button { width: 54px; height: 54px; font-size: 1.7rem; } }
@media (min-height: 1800px) { .commandes--sous button { width: 70px; height: 70px; font-size: 2.2rem; } }
/* Le bandeau, posé directement sur le fond commun : ni boîte, ni dégradé, ni circuit à lui. */
.bandeau--fondu { background: none; box-shadow: none; border-radius: 0; overflow: visible; justify-content: center; gap: 2.5rem;
  margin-top: clamp(4rem, 8vw, 6rem); padding-inline: 0; }
.bandeau--fondu::before, .bandeau--fondu::after, .bandeau--fondu .circuit-impulsions { display: none; }
.suite-tarifs { margin-top: clamp(4rem, 8vw, 6rem); scroll-margin-top: 6rem; }
.groupes-sombres .raccourcis__libelle { color: #fff; }
.groupes-sombres .raccourcis a { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .2); }
.groupes-sombres .raccourcis a:hover, .groupes-sombres .raccourcis a:focus-visible { background: rgba(208, 52, 44, .25); border-color: #d0342c; color: #fff; }
.groupes-sombres .groupe-services__titre { color: #fff; border-bottom-color: rgba(255, 255, 255, .16); }
.groupes-sombres .groupe-services__titre .icone { color: #ff7a70; }
.groupes-sombres .tuile-service { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .13); box-shadow: none; }
.groupes-sombres .tuile-service__titre { color: #fff; }
.groupes-sombres .tuile-service__texte { color: rgba(255, 255, 255, .74); }
.groupes-sombres .tuile-service__icone { background: rgba(208, 52, 44, .2); color: #ff8a82; }
.groupes-sombres .tuile-service:hover, .groupes-sombres .tuile-service:focus-visible { background: rgba(208, 52, 44, .13); border-color: #d0342c; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.groupes-sombres .tuile-service__fleche { color: #ff7a70; }

/* ---- CELLULAIRE (en ligne le 27 oct. 2026) : scène fixe, un appareil par groupe de services (page Services) ---- */
.scene-m { display: none; }
@media (max-width: 900px) {
  main#contenu > .scene-m { display: block; position: fixed; z-index: 0; left: 0; right: 0; top: 54px; height: 40vh; max-height: 360px;
    pointer-events: none; opacity: 0; transition: opacity .35s; }
  main#contenu > .scene-m.visible { opacity: 1; }
  .scene-m canvas { display: block; width: 100%; height: 100%; }
  main#contenu > .scene-m.sans-webgl { display: none; }
  /* chaque groupe laisse une « fenêtre » vide où l'appareil se montre; le titre et les cartes passent ensuite par-dessus */
  .groupes-sombres .groupe-services { padding-top: min(34vh, 320px); }
  .groupes-sombres .tuile-service { background: rgba(14, 8, 10, .9); }
}