/* Deep Beauty — Profondeur : feuillets empilés, couches de fond animées, sur-fonds. */
/* ---------- Profondeur : feuillets empilés et couches de fond ----------
 * Chaque section recouvre la précédente de --recouvrement : bord haut arrondi, ombre portée vers le haut.
 * Les fonds reprennent la signature visuelle des autres pages : demi-teintes en points, en trois tons
 * (noir, bleu nuit, gris clair comme les cartes produits), et alternance
 * de zones sombres et claires. Toutes les images viennent de la médiathèque du site.
 * Les couches sont posées sous le contenu. Le JavaScript pose sur chaque section une variable --p
 * (de -1 à 1 selon sa place dans l'écran) que les rubans lisent à leur propre vitesse.
 * Seuls transform et opacity bougent : pas de recalcul de mise en page. */
.bloc, .contact, .faq { position: relative; margin-top: calc(var(--recouvrement) * -1); border-radius: var(--rayon-section) var(--rayon-section) 0 0; box-shadow: 0 -22px 44px -18px rgba(15, 18, 28, 0.18); }
.bloc, .contact, .faq { overflow: hidden; }
.bloc > *, .contact > *, .faq > * { position: relative; z-index: 1; }
.bloc::before, .bloc::after, .contact::before, .contact::after { content: ""; position: absolute; z-index: 0; pointer-events: none; }
.bloc > .couche { position: absolute; z-index: 0; pointer-events: none; }
.dans-ecran::before, .dans-ecran::after, .dans-ecran > .couche { will-change: transform; }

/* Sections sombres : texte clair, cartes en verre dépoli. */
.bloc-sombre { background: var(--fond-sombre); color: #fff; }
.bloc-bleu { background: #000040; }
.bloc-sombre .titre-section { color: #fff; }
.bloc-sombre .titre-section::after { background: #fff; }
.bloc-sombre .conteneur-texte { color: rgba(255, 255, 255, 0.86); }
.bloc-sombre .conteneur-texte strong, .bloc-sombre .certifications { color: #fff; }
.bloc-sombre .chiffre, .bloc-sombre .mode { border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.07); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.bloc-sombre .chiffre strong, .bloc-sombre .mode h3 { color: #fff; }
.bloc-sombre .chiffre span, .bloc-sombre .mode p { color: rgba(255, 255, 255, 0.86); }
.bloc-sombre .pastille-numero { background: #fff; color: var(--fond-sombre); }
.bloc-bleu .pastille-numero { color: #000040; }
@media (hover: hover) {
	.bloc-sombre .chiffre:hover, .bloc-sombre .mode:hover { border-color: rgba(255, 255, 255, 0.42); box-shadow: 0 20px 44px -14px rgba(0, 0, 0, 0.7); }
}

/* Couches génériques. Les images de fond n'arrivent qu'avec .fonds-charges (posée par le JavaScript une page d'écran avant) :
 * sans JavaScript, ou avant l'arrivée, la section garde son fond uni et son texte reste lisible. */
.couche-spirale, .couche-halo { inset: 0; }
.couche-spirale { background-position: center 35%; background-size: cover; background-repeat: no-repeat; background-blend-mode: screen; animation: respire 14s ease-in-out infinite paused; }
.dans-ecran > .couche-spirale { animation-play-state: running; }
.couche-ruban { inset: -15% -8%; background: var(--points-clairs) 0 0 / var(--pas-points) var(--pas-points); opacity: 0.18; mix-blend-mode: screen; transform: translate3d(calc(var(--p, 0) * 70px * var(--amp)), calc(var(--p, 0) * -40px * var(--amp)), 0); }
.couche-halo { background: radial-gradient(circle 260px at var(--mx, 70%) var(--my, 30%), rgba(255, 255, 255, 0.14), transparent 70%); }
@keyframes respire { 0%, 100% { transform: scale(1); opacity: 0.95; } 50% { transform: scale(1.07); opacity: 1; } }
@keyframes zoom { from { transform: scale(1); } to { transform: scale(1.08); } }

/* Repères : noir, spirale de points du fond noir (l'image est superposée à elle-même en « screen » pour l'éclaircir). */
/* Voile de protection du texte : posé APRÈS les couches dans le DOM (donc au-dessus d'elles), il assombrit haut et bas. */
.bloc-reperes::before { display: none; }
.bloc-reperes::after { inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.72)); }
.bloc-reperes.fonds-charges > .couche-spirale { background-image: var(--points-clairs), var(--points-clairs); }

/* Technologie : bleu nuit, spirale de points du fond bleu nuit, halo bleu. */
.bloc-technologie::before { display: none; }
.bloc-technologie::after { inset: 0; background: linear-gradient(180deg, rgba(0, 0, 50, 0.3), rgba(0, 0, 50, 0) 30%, rgba(0, 0, 50, 0) 50%, rgba(0, 0, 50, 0.55)); }
.bloc-technologie > .couche-spirale { background-position: center 60%; animation-duration: 12s; }
.bloc-technologie.fonds-charges > .couche-spirale { background-image: var(--points-clairs); }
.bloc-technologie > .couche-halo { background: radial-gradient(ellipse 70% 60% at 50% 55%, rgba(30, 90, 255, 0.35), transparent 70%); mix-blend-mode: screen; }

/* Comparatif : blanc, un reflet diagonal et un seul ruban très discret : le tableau reste le sujet. */
.bloc-comparatif::before { left: -25%; top: 0; width: 150%; height: 100%; background: linear-gradient(112deg, transparent 36%, rgba(31, 34, 43, 0.05) 50%, transparent 64%); transform: translate3d(calc(var(--p, 0) * 160px * var(--amp)), 0, 0); }
.bloc-comparatif::after { right: -10%; bottom: -30%; width: 70%; height: 130%; background: var(--points-sombres) 0 0 / var(--pas-points) var(--pas-points); opacity: 0.5; transform: translate3d(0, calc(var(--p, 0) * -40px * var(--amp)), 0); }

/* Domaines : gris clair, le ruban de l'accueil posé deux fois, en miroir, qui dérivent en sens contraires. */
.bloc-domaines { background: radial-gradient(ellipse 60% 50% at 50% 60%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 75%), var(--gris-fond); }
.bloc-domaines::before { right: -8%; top: -6%; width: 78%; height: 120%; background: var(--points-sombres) 0 0 / var(--pas-points) var(--pas-points); transform: translate3d(calc(var(--p, 0) * -60px * var(--amp)), calc(var(--p, 0) * -30px * var(--amp)), 0); }
.bloc-domaines::after { left: -12%; bottom: -16%; width: 64%; height: 110%; background: var(--points-sombres) 0 0 / var(--pas-points) var(--pas-points); opacity: 0.8; transform: scaleX(-1) rotate(8deg) translate3d(calc(var(--p, 0) * 60px * var(--amp)), calc(var(--p, 0) * 30px * var(--amp)), 0); }


/* Accompagnement : clair, un ruban en bas à gauche. */
.bloc-accompagnement::before { left: -14%; bottom: -26%; width: 70%; height: 130%; background: var(--points-sombres) 0 0 / var(--pas-points) var(--pas-points); opacity: 0.75; transform: scaleX(-1) translate3d(calc(var(--p, 0) * 50px * var(--amp)), calc(var(--p, 0) * -36px * var(--amp)), 0); }
.bloc-accompagnement::after { display: none; }

/* Contact : photo voilée (comme la page À propos) qui zoome très lentement, et spirale de points en surimpression. */
.contact::before { inset: -5%; background: linear-gradient(100deg, rgba(10, 10, 14, 0.94) 0%, rgba(10, 10, 14, 0.8) 45%, rgba(10, 10, 14, 0.3) 100%); animation: zoom 26s ease-in-out infinite alternate paused; }
.contact.fonds-charges::before { background: linear-gradient(100deg, rgba(10, 10, 14, 0.94) 0%, rgba(10, 10, 14, 0.8) 45%, rgba(10, 10, 14, 0.3) 100%), var(--emplacement-sombre) center / cover no-repeat; }
.contact.dans-ecran::before { animation-play-state: running; }
.contact::after { inset: 0; background: center / 120% no-repeat; mix-blend-mode: screen; opacity: 0.5; }
.contact.fonds-charges::after { background: var(--points-clairs) 0 0 / var(--pas-points) var(--pas-points); }
/* Contact de l'accueil : montage des machines (EDNA, ONA), texte à gauche, appareils à droite. */
.contact-appareils { display: flex; align-items: center; min-height: 460px; }
.contact-appareils .conteneur { width: 100%; }
.contact.contact-appareils h2, .contact.contact-appareils p { max-width: 440px; }
.contact-appareils::before { background: #0a0a0e; }
.contact-appareils.fonds-charges::before { background: linear-gradient(100deg, rgba(10, 10, 14, 1) 0%, rgba(10, 10, 14, 0.9) 38%, rgba(10, 10, 14, 0) 58%), url("../contact-trois-technologies.webp") right center / auto 100% no-repeat, #0a0a0e; }
.contact-appareils::after, .contact-appareils.fonds-charges::after { content: none; }
.contact h2 { max-width: 760px; }
.contact p { max-width: 640px; }