/* Effets des pages EN / ES — voir inc/effets-pages.php. Tout dépend de html.album-fx. */

/* 1. Haut de page : titre principal, boutons et photo de la première section, au chargement.
   Départ à 1 % d'opacité (et non 0) : le navigateur compte l'affichage dès la première image (LCP). */
@keyframes album-fx-monte { from { opacity: .01; transform: translateY(24px); } }
@keyframes album-fx-photo { from { opacity: .01; transform: scale(.94); } }
.album-fx :is([data-elementor-type="wp-page"], [data-elementor-type="single-post"]) > :has(h1) :is(h1, .elementor-widget-heading:has(h1) ~ .elementor-widget-text-editor) {
	animation: album-fx-monte .7s cubic-bezier(.22, 1, .36, 1) .1s both;
}
.album-fx :is([data-elementor-type="wp-page"], [data-elementor-type="single-post"]) > :has(h1) .elementor-widget-button {
	animation: album-fx-monte .6s cubic-bezier(.22, 1, .36, 1) .35s both;
}
.album-fx :is([data-elementor-type="wp-page"], [data-elementor-type="single-post"]) > :has(h1) .elementor-widget-button + .elementor-widget-button { animation-delay: .45s; }
.album-fx :is([data-elementor-type="wp-page"], [data-elementor-type="single-post"]) > :has(h1) .elementor-widget-n-carousel .elementor-widget-image img:not(.album-fx-photo-sort) {
	animation: album-fx-photo .9s cubic-bezier(.22, 1, .36, 1) .25s both;
}

/* 2. Apparitions au défilement (classes posées par le JS) */
.album-fx .album-fx-cache { opacity: 0; transform: translateY(24px); }
.album-fx .album-fx-cache.album-fx-vu {
	opacity: 1; transform: none;
	transition: opacity .6s ease-out, transform .7s cubic-bezier(.22, 1, .36, 1);
	transition-delay: var(--album-fx-delai, 0s);
}
@media (max-width: 767px) {
	.album-fx .album-fx-cache { transform: translateY(14px); }
	.album-fx .album-fx-cache.album-fx-vu { transition-duration: .45s, .5s; }
}

/* Mots de couleur des titres de section : soulignement qui se dessine */
.album-fx .album-fx-souligne {
	background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 4px;
	transition: background-size .8s cubic-bezier(.22, 1, .36, 1) .5s;
}
.album-fx .album-fx-vu .album-fx-souligne, .album-fx .album-fx-souligne.album-fx-vu { background-size: 100% 4px; }
.album-fx .album-fx-souligne-bloc { display: inline-block; padding-bottom: 4px; }

/* Compteurs : largeur fixe (pas de saut de mise en page) */
.album-fx-nombre { display: inline-block; font-variant-numeric: tabular-nums; text-align: left; }

/* Icônes (étapes, avantages…) : petit rebond */
.album-fx .album-fx-cache .elementor-widget-icon { transform: scale(.6); opacity: 0; }
.album-fx .album-fx-vu .elementor-widget-icon {
	transform: none; opacity: 1;
	transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease;
	transition-delay: calc(var(--album-fx-delai, 0s) + .2s);
}

/* 3. Cartes (bloc à fond coloré avec un bouton) : survol sur ordinateur */
@media (hover: hover) and (pointer: fine) {
	.album-fx .album-fx-carte { transition: opacity .6s ease-out, transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease; transition-delay: var(--album-fx-delai, 0s); }
	.album-fx .album-fx-carte:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(10, 30, 70, .22); transition-delay: 0s; }
	.album-fx .album-fx-carte .elementor-widget-image img { transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
	.album-fx .album-fx-carte:hover .elementor-widget-image img { transform: translateY(-6px) scale(1.05); }
}

/* 4. Boutons du contenu : élévation au survol, enfoncement au clic */
.album-fx :is([data-elementor-type="wp-page"], [data-elementor-type="single-post"]) .elementor-button {
	transition: transform .2s ease, box-shadow .2s ease, background-color .3s, color .3s, border-color .3s;
}
@media (hover: hover) and (pointer: fine) {
	.album-fx :is([data-elementor-type="wp-page"], [data-elementor-type="single-post"]) .elementor-button:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(10, 30, 70, .2); }
}
.album-fx :is([data-elementor-type="wp-page"], [data-elementor-type="single-post"]) .elementor-button:active { transform: scale(.97); box-shadow: none; }

/* 5. Carrousels « vignette » : le mot de couleur est remplacé dans une fenêtre de la hauteur de la ligne */
.album-fx-fenetre {
	display: inline-block; position: relative; overflow: hidden; vertical-align: bottom;
	padding-inline: .06em; margin-inline: -.06em;
	transition: width .6s cubic-bezier(.65, 0, .35, 1);
}
.album-fx-fenetre > i { display: inline-block; white-space: nowrap; }
.album-fx-fenetre > .album-fx-mot-sort { position: absolute; left: .06em; top: 0; animation: album-fx-mot-sort .6s cubic-bezier(.65, 0, .35, 1) both; }
.album-fx-fenetre > .album-fx-mot-entre { animation: album-fx-mot-entre .6s cubic-bezier(.65, 0, .35, 1) both; }
@keyframes album-fx-mot-sort { to { transform: translateY(-105%); opacity: 0; filter: blur(3px); } }
@keyframes album-fx-mot-entre { from { transform: translateY(105%); opacity: 0; filter: blur(3px); } }

/* Photo : même mouvement, synchronisé */
.album-fx .album-fx-carrousel .elementor-widget-image .elementor-widget-container { position: relative; }
.album-fx .album-fx-carrousel .elementor-widget-image img:not(.album-fx-photo-sort) { position: relative; z-index: 2; }
.album-fx .album-fx-carrousel .elementor-widget-image img.album-fx-photo-sort {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none;
	animation: album-fx-photo-sort .5s cubic-bezier(.65, 0, .35, 1) both;
}
.album-fx-photo-entre { animation: album-fx-photo-entre .7s cubic-bezier(.22, 1, .36, 1) .08s both !important; }
@keyframes album-fx-photo-sort { to { transform: translateY(-40px) scale(.97); opacity: 0; } }
@keyframes album-fx-photo-entre { from { transform: translateY(48px) scale(.95); opacity: 0; } }

/* Sur mobile, les points du carrousel passeraient sous les barres de nom : masqués (le balayage reste possible) */
@media (max-width: 767px) {
	.album-fx .album-fx-carrousel .swiper-pagination { display: none; }
}

/* 6. La vignette : un modèle par slide, inspiré des modèles de vignettes L'Album du Club.
   --c = couleur du mot de la slide, --t = texte posé sur cette couleur (bleu si la couleur est claire). */
.album-vgn { position: absolute; inset: 0; pointer-events: none; container-type: inline-size; --c: #f39718; --t: #fff; --b: #153e75; }
.album-vgn > * { position: absolute; }
.album-vgn .vgn-cadre { z-index: 1; left: 12%; right: 12%; top: 13%; bottom: 13%; border-radius: 4cqw; overflow: hidden; }
.album-vgn .vgn-trait { z-index: 1; left: 12%; right: 12%; top: 13%; bottom: 13%; width: 76%; height: 74%; overflow: visible; }
.album-vgn .vgn-trait rect { fill: none; stroke: #fff; stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 0; }
.album-vgn :is(.vgn-n, .vgn-nom, .vgn-detail, .vgn-onglet) { z-index: 3; font-family: Poppins, sans-serif; text-transform: uppercase; line-height: 1.05; white-space: nowrap; }
/* Écusson derrière la personne (ne passe jamais sur les cheveux) */
.album-vgn .vgn-ecusson { z-index: 1; top: 15%; right: 14.5%; width: 15cqw; height: 15cqw; }
.album-vgn .vgn-ecusson circle { fill: none; stroke: #fff; stroke-width: 3; }
.album-vgn .vgn-ecusson .vgn-anneau { fill: rgba(255, 255, 255, .14); stroke-width: 0; }
.album-vgn .vgn-ecusson { color: #fff; }
.album-vgn .vgn-ecusson :is(path, circle:not([r="47"]):not([r="31"])) { fill: #fff; opacity: .85; }

/* Modèle 1 : carré numéroté, bandeau arrondi en bas */
.vgn-m1 .vgn-cadre { background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .1) 38% 52%, transparent 52%), linear-gradient(160deg, color-mix(in srgb, var(--c) 38%, transparent), color-mix(in srgb, var(--c) 8%, transparent) 70%); }
.vgn-m1 .vgn-n { top: 13%; left: 12%; background: var(--c); color: var(--b); font: italic 900 7cqw/1 Poppins, sans-serif; padding: 2.2cqw 3cqw; border-radius: 4cqw 0 3cqw 0; }
.vgn-m1 .vgn-bandeau { z-index: 3; left: 9%; right: 9%; bottom: 8.5%; height: 15%; background: var(--c); border-radius: 50% 50% 3cqw 3cqw / 30% 30% 3cqw 3cqw; box-shadow: 0 2cqw 4cqw rgba(0, 0, 0, .2); }
.vgn-m1 .vgn-nom { bottom: 15.6%; left: 0; right: 0; text-align: center; color: var(--b); font-weight: 900; font-style: italic; font-size: 5.6cqw; }
.vgn-m1 .vgn-detail { bottom: 11%; left: 0; right: 0; text-align: center; color: var(--t); font-weight: 800; font-size: 3cqw; letter-spacing: .08em; }

/* Modèle 8 : onglet vertical sur le côté (lu de bas en haut), nom en bas à droite */
.vgn-m8 .vgn-cadre { background: linear-gradient(180deg, rgba(255, 255, 255, .16), color-mix(in srgb, var(--c) 14%, transparent)); }
.vgn-m8 .vgn-n { top: 15%; left: 15%; color: #fff; font: italic 900 7.5cqw/1 Poppins, sans-serif; }
.vgn-m8 .vgn-onglet { top: 13%; right: 7%; width: 7.5cqw; height: 36%; transform: rotate(180deg); background: var(--c); border-radius: 0 3cqw 0 3cqw; color: var(--t); font-weight: 800; font-size: 2.9cqw; letter-spacing: .1em; writing-mode: vertical-rl; display: flex; align-items: center; justify-content: center; box-shadow: 0 2cqw 4cqw rgba(0, 0, 0, .2); }
.vgn-m8 .vgn-bandeau { z-index: 3; left: 9%; right: 9%; bottom: 8.5%; height: 13%; background: #fff; border-radius: 3cqw; clip-path: polygon(0 35%, 30% 35%, 38% 0, 100% 0, 100% 100%, 0 100%); box-shadow: 0 2cqw 4cqw rgba(0, 0, 0, .2); }
.vgn-m8 .vgn-nom { bottom: 13%; right: 13%; color: var(--b); font-weight: 900; font-size: 5.4cqw; text-align: right; }
.vgn-m8 .vgn-detail { bottom: 10%; right: 13%; color: color-mix(in srgb, var(--c) 75%, var(--b)); font-weight: 800; font-size: 2.8cqw; letter-spacing: .06em; }
.vgn-m8 .vgn-ecusson { display: none; }
.album-vgn:not(.vgn-m8) .vgn-onglet, .album-vgn:not(.vgn-m11) .vgn-ligne, .vgn-m6 .vgn-bandeau { display: none; }

/* Modèle 6 : cadre penché, étoile numérotée, trame de points, barres inclinées */
.vgn-m6 .vgn-cadre, .vgn-m6 .vgn-trait { transform: rotate(-2.5deg); }
.vgn-m6 .vgn-cadre { background: radial-gradient(circle, rgba(255, 255, 255, .35) 1.2px, transparent 1.6px) 0 40% / 2.4cqw 2.4cqw no-repeat, linear-gradient(170deg, color-mix(in srgb, var(--c) 30%, transparent), color-mix(in srgb, var(--c) 6%, transparent) 75%); background-size: 22% 60%, auto; }
.vgn-m6 .vgn-n { top: 7%; left: 6%; width: 17cqw; height: 17cqw; display: flex; align-items: center; justify-content: center; color: var(--t); font: italic 900 7cqw/1 Poppins, sans-serif; background: var(--c); clip-path: polygon(50% 0, 61% 18%, 82% 10%, 79% 32%, 100% 40%, 84% 56%, 96% 76%, 73% 78%, 68% 100%, 50% 86%, 32% 100%, 27% 78%, 4% 76%, 16% 56%, 0 40%, 21% 32%, 18% 10%, 39% 18%); }
.vgn-m6 .vgn-nom { bottom: 13.2%; left: 8%; background: var(--c); color: var(--t); font-weight: 900; font-style: italic; font-size: 4.6cqw; padding: 1.4cqw 3.6cqw; transform: skewX(-10deg); box-shadow: 0 2cqw 4cqw rgba(0, 0, 0, .2); }
.vgn-m6 .vgn-detail { bottom: 8.5%; right: 9%; background: var(--b); color: #fff; font-weight: 800; font-style: italic; font-size: 3.2cqw; padding: 1.6cqw 4cqw; transform: skewX(-10deg); border: 1px solid rgba(255, 255, 255, .5); }

/* Modèle 11 : cadre sobre, numéro, double bandeau */
.vgn-m11 .vgn-cadre { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 26%, transparent), color-mix(in srgb, var(--c) 5%, transparent) 70%); box-shadow: inset 0 0 0 1.4cqw color-mix(in srgb, var(--c) 18%, transparent); }
.vgn-m11 .vgn-trait rect { stroke: var(--c); }
.vgn-m11 .vgn-n { top: 15.5%; left: 15.5%; color: var(--c); font: italic 900 7.5cqw/1 Poppins, sans-serif; }
.vgn-m11 .vgn-bandeau { z-index: 3; left: 9%; right: 9%; bottom: 8.5%; height: 15%; background: var(--b); border: 2px solid var(--c); border-radius: 3cqw; box-shadow: 0 2cqw 4cqw rgba(0, 0, 0, .25); }
.vgn-m11 .vgn-nom { bottom: 16%; left: 0; right: 0; text-align: center; color: #fff; font-weight: 900; font-size: 5.2cqw; }
.vgn-m11 .vgn-ligne { z-index: 3; bottom: 15.2%; left: 30%; right: 30%; height: 1px; background: var(--c); opacity: .7; }
.vgn-m11 .vgn-detail { bottom: 11%; left: 0; right: 0; text-align: center; color: var(--c); font-weight: 700; font-size: 3cqw; letter-spacing: .1em; }
.vgn-m11 .vgn-ecusson circle { stroke: var(--c); }
.vgn-m11 .vgn-ecusson { color: var(--c); }
.vgn-m11 .vgn-ecusson :is(path, circle:not([r="47"]):not([r="31"])) { fill: var(--c); }

/* Animation de la vignette : le contour se trace, puis les éléments arrivent */
.album-vgn.vgn-anim .vgn-trait rect { stroke-dashoffset: 1; animation: album-fx-trace .8s cubic-bezier(.45, 0, .25, 1) forwards; }
.album-vgn.vgn-anim .vgn-cadre { animation: vgn-fondu .6s ease .15s both; }
.album-vgn.vgn-anim :is(.vgn-n, .vgn-ecusson) { animation: vgn-pop .45s cubic-bezier(.34, 1.56, .64, 1) .55s both; }
.vgn-m8.vgn-anim .vgn-onglet { animation: vgn-onglet .5s cubic-bezier(.22, 1, .36, 1) .5s both; }
.album-vgn.vgn-anim :is(.vgn-bandeau, .vgn-ligne) { animation: vgn-monte .5s cubic-bezier(.22, 1, .36, 1) .45s both; }
.album-vgn.vgn-anim :is(.vgn-nom, .vgn-detail) { animation: vgn-monte .5s cubic-bezier(.22, 1, .36, 1) .6s both; }
.vgn-m6.vgn-anim :is(.vgn-nom, .vgn-detail) { animation-name: vgn-glisse; }
@keyframes album-fx-trace { to { stroke-dashoffset: 0; } }
@keyframes vgn-fondu { from { opacity: 0; } }
@keyframes vgn-pop { from { opacity: 0; transform: scale(.4); } }
@keyframes vgn-onglet { from { opacity: 0; transform: rotate(180deg) translateY(30%); } }
@keyframes vgn-monte { from { opacity: 0; transform: translateY(40%); } }
@keyframes vgn-glisse { from { opacity: 0; transform: translateX(-30%) skewX(-10deg); } }

/* 7. Séparateurs existants (widget Séparateur) : même effet que le soulignement — 4 px, orange, tracé à l'apparition */
.album-fx .album-fx-trait { --divider-border-width: 4px !important; --divider-color: #f39718 !important; }
.album-fx .album-fx-trait .elementor-divider-separator {
	transform: scaleX(0); transform-origin: var(--album-fx-origine, left);
	transition: transform .8s cubic-bezier(.22, 1, .36, 1) .5s;
}
.album-fx .album-fx-vu .album-fx-trait .elementor-divider-separator,
.album-fx .album-fx-trait.album-fx-vu .elementor-divider-separator { transform: none; }

/* Flèches de navigation des carrousels de contenu (assets/js/carrousel-fleches.js) : ‹ • • • › */
.afx-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; }
.afx-nav .swiper-pagination { position: static !important; width: auto !important; transform: none !important; margin: 0 !important; display: flex; align-items: center; }
.afx-fleche {
	flex: none; display: grid; place-items: center; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
	background: #f39718; color: #153e75; box-shadow: 0 6px 16px rgba(21, 62, 117, .18);
	transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), background .2s, color .2s, box-shadow .2s, opacity .2s;
}
.afx-fleche svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
.afx-prec svg { transform: scaleX(-1); }
.afx-fleche:hover { background: #153e75; color: #fff; transform: translateY(-2px) rotate(-4deg); box-shadow: 0 10px 22px rgba(21, 62, 117, .28); }
.afx-suiv:hover svg { transform: translateX(3px); }
.afx-prec:hover svg { transform: scaleX(-1) translateX(3px); }
.afx-fleche:active { transform: scale(.92); }
.afx-fleche:focus-visible { outline: 3px solid #153e75; outline-offset: 3px; }
.afx-fleche:disabled { opacity: .35; cursor: default; transform: none; box-shadow: none; background: #f39718; color: #153e75; }
.afx-fleche.afx-signe { animation: afx-signe 1.4s ease .4s 2; }
@keyframes afx-signe { 0%, 100% { transform: none; } 20% { transform: translateX(6px); } 40% { transform: none; } 60% { transform: translateX(4px); } }
@media (max-width: 767px) { .afx-fleche { width: 44px; height: 44px; } .afx-nav { gap: 12px; } }
.album-vgn .vgn-ecusson g[style] * { fill: none !important; opacity: .9; }
/* Mini-vignettes (petites photos des cartes) : cadre + numéro + écusson ; invisibles avant l'animation */
.vgn-mini:not(.vgn-anim) { opacity: 0; }
.vgn-mini .vgn-trait rect { stroke-width: 2.5; }
.vgn-mini.vgn-m8 .vgn-n { display: block; }
/* Sur les cartes blanches : trait et écusson dans la couleur du domaine (le blanc ne se voit pas) */
.vgn-mini .vgn-trait rect { stroke: var(--c); }
.vgn-mini .vgn-ecusson { color: var(--c); }
.vgn-mini .vgn-ecusson circle { stroke: var(--c); }
.vgn-mini .vgn-ecusson .vgn-anneau { fill: color-mix(in srgb, var(--c) 12%, transparent); }
.vgn-mini .vgn-ecusson :is(path, circle:not([r="47"]):not([r="31"])) { fill: var(--c); }
/* Mini-vignettes : photo devant le cadre (comme en haut de page), bas du cadre aligné sur le bas de la photo, cadre plus grand */
.elementor-widget-image :is(div, a, figure):has(> .vgn-mini) > img { position: relative; z-index: 2; }
.vgn-mini :is(.vgn-cadre, .vgn-trait) { left: 4%; right: 4%; top: 8%; bottom: 0; }
.vgn-mini .vgn-trait { width: 92%; height: 92%; top: 8%; }
.vgn-mini .vgn-n { top: 11%; left: 8%; }
.vgn-mini .vgn-ecusson { top: 11%; right: 8%; }
/* Titres de section centrés sur fond bleu : largeur limitée, lignes équilibrées (assets/js/titres-etroits.js) */
.album-titre-etroit { max-width: 720px; margin-left: auto !important; margin-right: auto !important; text-wrap: balance; }

/* Bouton « suivant » des carrousels du haut : dans le coin bas droit, légèrement détaché du coin arrondi (25 px) de la section */
.afx-anneau {
	position: absolute; z-index: 5; right: 16px; bottom: 16px; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%;
	display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer;
	transition: background .2s, transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.afx-anneau-cercle { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.afx-anneau-cercle circle { fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 2.5; }
.afx-anneau-cercle .afx-anneau-plein { stroke: #f39718; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.afx-anneau-tourne .afx-anneau-plein { animation: afx-anneau var(--duree, 7s) linear forwards; }
@keyframes afx-anneau { to { stroke-dashoffset: 0; } }
.afx-anneau-fleche { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
.afx-anneau:hover { background: #f39718; color: #153e75; }
.afx-anneau:hover .afx-anneau-fleche { transform: translateX(2px); }
.afx-anneau:active { transform: scale(.9); }
.afx-anneau:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }