/* =====================================================================
   Animation de l'accueil (6 nov. 2026). Script : assets/js/csb-anime.js ; guide : docs/ANIMATION_ACCUEIL_CSB.md
   Niveau « sobre et élégant » : opacity et transform uniquement, 650 ms, courbe du hero, un seul passage par élément.
   Les états cachés n'existent que sous html.csb-anime-on, classe posée par le script lui-même : sans JavaScript, sans
   IntersectionObserver ou avec « réduire les animations », rien n'est caché.
   ===================================================================== */
html.csb-anime-on {
	--anim-ease: cubic-bezier(.2, .7, .2, 1);
	--anim-duree: .65s;
}

/* --- Un seul moteur : l'ancien (AOS) n'anime plus l'accueil --- */
html.csb-anime-on body.csb-home [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; pointer-events: auto !important; }

/* --- Apparition des composants --- */
html.csb-anime-on [data-rv] {
	opacity: 0;
	transition: opacity var(--anim-duree) var(--anim-ease), transform var(--anim-duree) var(--anim-ease);
	will-change: opacity, transform;
}
html.csb-anime-on [data-rv="up"] { transform: translate3d(0, 20px, 0); }
html.csb-anime-on [data-rv="left"] { transform: translate3d(-14px, 0, 0); }
html.csb-anime-on [data-rv="fondu"] { transform: none; }
html.csb-anime-on [data-rv="photo"] { transform: none; }
html.csb-anime-on [data-rv].is-vu { opacity: 1; transform: none; }

/* Photos et vidéos : le cadre apparaît, l'image se pose (agrandissement de 6 % qui revient à 100 %) */
html.csb-anime-on [data-rv="photo"] :is(img, video) { transform: scale(1.06); transition: transform .8s var(--anim-ease); }
html.csb-anime-on [data-rv="photo"].is-vu :is(img, video) { transform: none; }

/* Traits d'accent qui se dessinent (surtitres, réassurance, filets des chiffres) */
html.csb-anime-on .common-subtitle[data-rv]::before { transform: scaleX(0); transform-origin: left center; transition: transform .6s var(--anim-ease) .15s; }
html.csb-anime-on .common-subtitle[data-rv].is-vu::before { transform: none; }
html.csb-anime-on .csb-rea-carte[data-rv]::before { transform: scaleX(0); transition: transform .6s var(--anim-ease) .2s; }
html.csb-anime-on .csb-rea-carte[data-rv].is-vu::before { transform: none; }
html.csb-anime-on .achievement[data-rv]::before { transform: scaleY(0); transform-origin: top center; transition: transform .7s var(--anim-ease) .2s; }
html.csb-anime-on .achievement[data-rv].is-vu::before { transform: none; }
/* FAQ : le filet sous la question apparaît avec elle */
html.csb-anime-on body.csb-home .csb-faq .accordion-item[data-rv] { border-bottom-color: transparent; }
html.csb-anime-on body.csb-home .csb-faq .accordion-item[data-rv].is-vu { border-bottom-color: var(--a-trait); transition: opacity var(--anim-duree) var(--anim-ease), transform var(--anim-duree) var(--anim-ease), border-color .8s ease .15s; }

/* --- Bannière « Nos produits » : la photo glisse légèrement avec le défilement (variable posée par le script) --- */
html.csb-anime-on .csb-pb-photo { transform: translate3d(0, var(--csb-py, 0px), 0) scale(1.1); will-change: transform; }

/* --- Hero : le surtitre arrive de la gauche, les commandes apparaissent en dernier (le reste du hero est déjà animé, csb.css) --- */
@keyframes csbHeroGauche { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes csbHeroFondu { from { opacity: 0; } to { opacity: 1; } }
body.csb-home .csb-hero .swiper-slide-active .subtitle { animation-name: csbHeroGauche; }
body.csb-home .csb-hero :is(.csb-hero-controls, .hero-slider-social, .hero-slider-pagination-1) { animation: csbHeroFondu .9s ease .8s both; }

/* --- Survols et focus : sobres, sans effet permanent --- */
body.csb-home main .e-primary-btn { transition: transform .25s ease, color .3s ease, background-color .3s ease; }
body.csb-home main .e-primary-btn:hover { transform: translateY(-2px); }
body.csb-home main .e-primary-btn:active { transform: none; }
body.csb-home .csb-pb-btn { transition: transform .25s ease, background-color .25s ease, color .25s ease; }
body.csb-home .csb-pb-btn:hover { transform: translateY(-2px); }
body.csb-home .csb-actus-item .blog-card, body.csb-home .csb-video-card { transition: transform .3s var(--anim-ease, ease), box-shadow .3s ease, border-color .3s ease; }
body.csb-home .csb-actus-item .blog-card:hover, body.csb-home .csb-video-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -20px rgba(0, 40, 36, .4); }
body.csb-home .csb-video-card:hover { border-color: rgba(0, 69, 64, .3); }
.csb-liste-simple li::before { transition: width .25s ease, border-radius .25s ease; }
.csb-liste-simple li:hover::before { width: 14px; border-radius: 3px; }
body.csb-home .csb-faq .accordion-button { transition: color .2s ease; }
body.csb-home .csb-faq .accordion-button:hover { color: var(--a-vegetal); }
body.csb-home .csb-faq .collapsing { transition-duration: .25s; }
body.csb-home .csb-pb-btn:focus-visible, body.csb-home main .e-primary-btn:focus-visible { transform: none; }

@media (prefers-reduced-motion: reduce) {
	body.csb-home .csb-hero :is(.csb-hero-controls, .hero-slider-social, .hero-slider-pagination-1) { animation: none; }
	body.csb-home main .e-primary-btn:hover, body.csb-home .csb-pb-btn:hover,
	body.csb-home .csb-actus-item .blog-card:hover, body.csb-home .csb-video-card:hover { transform: none; }
	.csb-liste-simple li::before { transition: none; }
	.csb-liste-simple li:hover::before { width: 6px; border-radius: 50%; }
}

/* =====================================================================
   Extension du 12 nov. 2026 : words, line, mobile, micro-interactions au survol (souris seulement), retour en haut
   ===================================================================== */

/* --- words : le titre garde son bloc, chaque mot monte de .5em en fondu (6 mots décalés au plus) --- */
html.csb-anime-on [data-rv="words"] { opacity: 1; transform: none; will-change: auto; transition: none; }
html.csb-anime-on [data-rv="words"] .csb-w { display: inline-block; opacity: 0; transform: translate3d(0, .45em, 0); transition: opacity .6s var(--anim-ease), transform .6s var(--anim-ease); transition-delay: var(--w, 0ms); }
html.csb-anime-on [data-rv="words"].is-vu .csb-w { opacity: 1; transform: none; }

/* --- line : un filet se dessine (ici, le trait jaune de la date de l'agenda) --- */
html.csb-anime-on .csb-evh-date-mois[data-rv="line"] { position: relative; border-left-color: transparent; opacity: 1; transform: none; will-change: auto; transition: none; }
html.csb-anime-on .csb-evh-date-mois[data-rv="line"]::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--evh-mil, #FFE175); transform: scaleY(0); transform-origin: top center; transition: transform .6s var(--anim-ease) .35s; }
html.csb-anime-on .csb-evh-date-mois[data-rv="line"].is-vu::before { transform: none; }

/* --- Pastille « En cours » : le point grossit une seule fois à l'apparition --- */
@keyframes csbPoint { 0% { transform: scale(1); } 40% { transform: scale(1.9); } 100% { transform: scale(1); } }
html.csb-anime-on .csb-evh-statut.is-en-cours::before { animation: csbPoint .9s var(--anim-ease) 1.2s 1 both; }

/* --- Mobile : trajets de 16 px, pas de parallaxe, rien ne déborde --- */
@media (max-width: 767px) {
	html.csb-anime-on [data-rv="up"] { transform: translate3d(0, 16px, 0); }
	html.csb-anime-on [data-rv="left"] { transform: translate3d(-8px, 0, 0); }
	html.csb-anime-on .csb-pb-photo { transform: scale(1.1); will-change: auto; }
}
body.csb-home main > section { overflow-x: clip; }

/* --- Survols (souris seulement : rien de collant sur écran tactile) --- */
@media (hover: hover) {
	body.csb-home main .e-primary-btn .icon { transition: transform .25s var(--anim-ease, ease); }
	body.csb-home main .e-primary-btn:hover .icon { transform: translateX(4px); }
	body.csb-home .csb-evh-carte, body.csb-home .csb-evh-une { transition: transform .3s var(--anim-ease, ease); }
	body.csb-home .csb-evh-carte:hover { transform: translateY(-4px); }
	body.csb-home .csb-evh-carte-photo img, body.csb-home .csb-evh-une-photo img { transition: transform .5s var(--anim-ease, ease); }
	body.csb-home .csb-evh-carte:hover .csb-evh-carte-photo img, body.csb-home .csb-evh-une:hover .csb-evh-une-photo img { transform: scale(1.03); }
}
@media (hover: none) {
	body.csb-home .csb-actus-item .blog-card:hover, body.csb-home .csb-video-card:hover, body.csb-home main .e-primary-btn:hover, body.csb-home .csb-pb-btn:hover { transform: none; box-shadow: none; }
}

/* --- Retour en haut --- */
.csb-haut { position: fixed; left: 16px; bottom: 16px; z-index: 90; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #004540; color: #FFE175; cursor: pointer; opacity: 0; visibility: hidden; transform: translate3d(0, 12px, 0); transition: opacity .3s ease, transform .3s var(--anim-ease, ease), visibility 0s linear .3s; }
.csb-haut.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.csb-haut:focus-visible { outline: 3px solid #FFE175; outline-offset: 3px; }

/* --- Mouvement réduit : tout reste visible, aucun déplacement --- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto !important; }
	body { scroll-behavior: auto !important; }
	.csb-haut { transition: opacity .15s ease; transform: none; }
	html.csb-anime-on .csb-evh-statut.is-en-cours::before { animation: none; }
	body.csb-home .csb-evh-carte:hover, body.csb-home .csb-evh-carte:hover img, body.csb-home .csb-evh-une:hover img, body.csb-home main .e-primary-btn:hover .icon { transform: none; }
}

/* =====================================================================
   Types ajoutés le 12 nov. 2026 (page Formations v2) : side-l / side-r, line, clip. Même mécanique (data-rv posé par csb-anime.js, classe is-vu).
   ===================================================================== */
html.csb-anime-on [data-rv="side-l"] { transform: translate3d(-40px, 0, 0); }
html.csb-anime-on [data-rv="side-r"] { transform: translate3d(40px, 0, 0); }
/* line : le filet se dessine de gauche à droite (l'élément reste visible, seule sa largeur apparente change) */
html.csb-anime-on [data-rv="line"] { opacity: 1; transform: scaleX(0); transform-origin: 0 50%; transition-duration: .9s; }
/* clip : la photo est dévoilée de haut en bas, avec un léger dézoom */
html.csb-anime-on [data-rv="clip"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--anim-ease), opacity var(--anim-duree) var(--anim-ease); }
html.csb-anime-on [data-rv="clip"].is-vu { clip-path: inset(0 0 0 0); }
html.csb-anime-on [data-rv="clip"] img { transform: scale(1.08); transition: transform 1.2s var(--anim-ease); }
html.csb-anime-on [data-rv="clip"].is-vu img { transform: none; }
@media (max-width: 767px) {
	html.csb-anime-on [data-rv="side-l"] { transform: translate3d(-16px, 0, 0); }
	html.csb-anime-on [data-rv="side-r"] { transform: translate3d(16px, 0, 0); }
}