/* Child and Future — Immersive Experience 1.0.0
 * Principes : contenus lisibles sans JavaScript ; effets activés par la classe .cfie-ready posée par le script ;
 * aucune animation pour prefers-reduced-motion ; couleurs et polices du thème existant (variables --cf-*).
 */

.cfie-wrap { width: min(100%, 1200px); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 1.5rem); box-sizing: border-box; }
.cfie-hero, .cfie-scene, .cfie-band { box-sizing: border-box; }
.cfie-hero *, .cfie-scene *, .cfie-band * { box-sizing: border-box; }

.cfie-legende { position: absolute; right: .75rem; bottom: .6rem; z-index: 3; margin: 0; font: 600 .75rem/1.2 var(--wp--preset--font-family--titres, system-ui, sans-serif); letter-spacing: .04em; color: #fff; background: rgba(15, 53, 87, .72); padding: .2rem .65rem; border-radius: 999px; }

.cfie-img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ============================ 1. HERO SLIDER ============================ */

.cfie-hero { position: relative; background: var(--cf-navy, #0F3557); color: #fff; overflow: hidden; touch-action: pan-y; max-width: none; }
.cfie-slides { display: block; }
/* Sans JavaScript : seule la première diapositive est visible (le hero d'origine). */
.cfie-slide { position: relative; display: none; }
.cfie-slide:first-child { display: block; }
.cfie-controls, .cfie-live { display: none; }

.cfie-ready .cfie-slides { display: block; position: relative; overflow: hidden; }
.cfie-ready .cfie-slide { min-width: 0; }
/* Correction 1.2.0 : les diapositives n'occupent plus la même cellule d'une grille (le carrousel prenait la hauteur de la plus haute).
   La diapositive inactive est superposée en absolu ; la diapositive active reste dans le flux et fixe seule la hauteur. */
.cfie-ready .cfie-slide { display: block; position: absolute; top: 0; left: 0; width: 100%; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .9s ease, transform .9s ease, visibility 0s linear .9s; }
.cfie-ready .cfie-slide.is-active { position: relative; visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .9s ease, transform .9s ease, visibility 0s; z-index: 2; }
.cfie-ready .cfie-controls { display: flex; }

/* Variantes de transition */
.cfie-hero[data-transition="glisse"].cfie-ready .cfie-slide { transform: translateX(5%); }
.cfie-hero[data-transition="glisse"].cfie-ready .cfie-slide.is-prev { transform: translateX(-5%); }
.cfie-hero[data-transition="glisse"].cfie-ready .cfie-slide.is-active { transform: none; }
.cfie-hero[data-transition="zoom"].cfie-ready .cfie-slide { transform: scale(1.05); }
.cfie-hero[data-transition="zoom"].cfie-ready .cfie-slide.is-active { transform: none; }

/* Diapositives configurées */
.cfie-media { position: absolute; inset: 0; overflow: hidden; background: var(--cf-navy, #0F3557); will-change: transform; transform: translate3d(0, var(--cfie-py, 0px), 0); }
.cfie-media .cfie-img { transform-origin: center; }
@media (min-width: 701px) { .cfie-hero[data-parallaxe="1"] .cfie-media { top: -130px; } }
.cfie-veil { position: absolute; inset: 0; background: linear-gradient(95deg, rgba(15, 53, 87, .92) 0%, rgba(15, 53, 87, .78) 42%, rgba(15, 53, 87, .28) 100%); pointer-events: none; }
.cfie-inner { position: relative; z-index: 2; width: min(100%, 1200px); margin-inline: auto; padding: clamp(2.5rem, 7vh, 4.5rem) clamp(1rem, 4vw, 1.5rem) 5.75rem; min-height: clamp(440px, 64svh, 620px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; box-sizing: border-box; }
.cfie-eyebrow { display: inline-flex; align-items: center; gap: .6rem; color: #BFE6FA; }
.cfie-eyebrow::before { content: ""; width: 1.8rem; height: 3px; border-radius: 2px; background: var(--s, #029FEC); flex: none; }
.cfie-titre { margin: 0 0 1rem; color: #fff; font-family: var(--wp--preset--font-family--titres, system-ui, sans-serif); font-size: var(--wp--preset--font-size--titre-accueil, clamp(2.2rem, 5vw, 3.6rem)); font-weight: 700; line-height: 1.08; max-width: 18ch; text-wrap: balance; }
.cfie-lead { max-width: 40rem; color: #E3F3FD; margin: 0 0 1.5rem; }
.cfie-cta { margin: 0; }

/* Ken Burns : zoom lent, appliqué à l'image de la diapositive active. */
@keyframes cfie-kb-a { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.09) translate3d(-1.2%, -.8%, 0); } }
@keyframes cfie-kb-b { from { transform: scale(1.09) translate3d(1.2%, .6%, 0); } to { transform: scale(1) translate3d(0, 0, 0); } }
.cfie-hero[data-kb="1"] .cfie-slide.is-active .cfie-kb-a { animation: cfie-kb-a calc(var(--cfie-dur, 7s) + 2.5s) ease-out both; }
.cfie-hero[data-kb="1"] .cfie-slide.is-active .cfie-kb-b { animation: cfie-kb-b calc(var(--cfie-dur, 7s) + 2.5s) ease-out both; }
.cfie-hero[data-kb="1"] .cfie-slide--hero.is-active .wp-block-cover__image-background { animation: cfie-kb-a calc(var(--cfie-dur, 7s) + 2.5s) ease-out both; }

/* Apparition progressive des textes */
.cfie-ready .cfie-rv { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.cfie-ready .cfie-slide.is-active .cfie-rv { opacity: 1; transform: none; transition-delay: calc(.35s + var(--i, 0) * .13s); }
.cfie-cta .wp-block-button__link { transition: transform .25s ease, background-color .2s ease, color .2s ease; }
.cfie-cta .wp-block-button__link:hover, .cfie-cta .wp-block-button__link:focus-visible { transform: translateY(-2px); }

/* Hero d'origine, devenu première diapositive : espace pour les commandes */
.cfie-ready .cfie-slide--hero .wp-block-cover__inner-container { padding-bottom: 5.5rem; }

/* Commandes */
.cfie-controls { position: absolute; z-index: 6; left: 0; right: 0; bottom: 5rem; margin-inline: auto; width: min(100%, 1200px); padding-inline: clamp(1rem, 4vw, 1.5rem); align-items: center; gap: .6rem; box-sizing: border-box; }
.cfie-btn { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid rgba(255, 255, 255, .7); border-radius: 50%; background: rgba(15, 53, 87, .6); color: #fff; cursor: pointer; padding: 0; transition: background-color .2s ease, border-color .2s ease; }
.cfie-btn:hover { background: rgba(15, 53, 87, .9); border-color: #fff; }
.cfie-btn:focus-visible, .cfie-dot:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px var(--cf-action, #0A67A8); }
.cfie-i-play { display: none; }
[aria-pressed="true"] > .cfie-i-pause { display: none; }
[aria-pressed="true"] > .cfie-i-play { display: block; }
.cfie-dots { display: flex; gap: .15rem; list-style: none; margin: 0 .4rem; padding: 0; }
.cfie-dots li { margin: 0; padding: 0; }
.cfie-dot { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.cfie-dot__bar { position: relative; display: block; width: 34px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .45); overflow: hidden; }
.cfie-dot__bar::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.cfie-dot[aria-current="true"] .cfie-dot__bar::after { transform: scaleX(1); }
.cfie-hero[data-playing="1"] .cfie-dot[aria-current="true"] .cfie-dot__bar::after { transform: scaleX(0); animation: cfie-fill var(--cfie-dur, 7s) linear forwards; }
@keyframes cfie-fill { to { transform: scaleX(1); } }

@media (max-width: 700px) {
	/* Téléphone : image au-dessus, texte sur fond bleu nuit (même principe que le hero du thème). */
	.cfie-slide { min-height: 0; }
	.cfie-slide:not(.cfie-slide--hero) { background: var(--cf-navy, #0F3557); }
	.cfie-media { position: relative; inset: auto; height: clamp(190px, 52vw, 290px); transform: none !important; }
	.cfie-veil { display: none; }
	.cfie-inner { min-height: 0; padding: 1.5rem clamp(1rem, 4vw, 1.5rem) 4.5rem; }
	.cfie-titre { font-size: clamp(1.9rem, 8vw, 2.4rem); }
	.cfie-controls { bottom: 1.1rem; gap: .25rem; }
	.cfie-dots { margin: 0 .1rem; }
	.cfie-dot { width: 36px; }
	.cfie-dot__bar { width: 26px; }
	.cfie-ready .cfie-slide--hero .wp-block-cover__inner-container { padding-bottom: 4.5rem; }
	.cfie-hero[data-kb="1"] .cfie-slide--hero.is-active .wp-block-cover__image-background { animation: none; }
	.cfie-legende { top: .75rem; bottom: auto; }
}

/* ======================== 2. SCROLLYTELLING ============================ */

.cfie-scene { position: relative; background: #fff; color: var(--cf-texte, #1B2B3A); max-width: none; }
.cfie-scene__intro { padding-block: clamp(2.5rem, 7vw, 4.5rem) 1rem; }
.cfie-scene__titre { margin: 0 0 .5rem; font-family: var(--wp--preset--font-family--titres, system-ui, sans-serif); color: var(--cf-navy, #0F3557); font-size: var(--wp--preset--font-size--titre-section, clamp(1.8rem, 4vw, 2.6rem)); line-height: 1.15; }
.cfie-track { position: relative; }
.cfie-stage { display: none; }

/* Mode statique (sans JavaScript, mouvement réduit, mode allégé) : étapes empilées, image et texte côte à côte. */
.cfie-steps { list-style: none; margin: 0; padding: 0; counter-reset: cfie-s; }
.cfie-step { display: grid; grid-template-columns: 1fr; gap: 1rem; width: min(100%, 1200px); margin: 0 auto; padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 4vw, 1.5rem); align-items: center; box-sizing: border-box; }
@media (min-width: 900px) {
	.cfie-step { grid-template-columns: 1.1fr 1fr; gap: 3rem; }
	.cfie-step:nth-child(even) .cfie-step__fig { order: 2; }
}
.cfie-step__fig { position: relative; margin: 0; border-radius: var(--cf-rayon, 18px); overflow: hidden; aspect-ratio: 16 / 10; background: var(--cf-ciel-moyen, #E3F3FD); }
.cfie-card__titre { margin: 0 0 .75rem; font-family: var(--wp--preset--font-family--titres, system-ui, sans-serif); color: var(--cf-navy, #0F3557); font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.2; }
.cfie-card p { margin: 0 0 1rem; }
.cfie-card .cf-eyebrow { color: var(--cf-action, #0A67A8); }

/* Mode épinglé : l'image reste affichée pendant que les étapes défilent. */
.cfie-pinned .cfie-stage { display: block; position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--cf-navy, #0F3557); }
.cfie-pinned .cfie-steps { position: relative; z-index: 2; margin-top: -100vh; margin-top: -100svh; }
.cfie-pinned .cfie-step { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: flex-start; padding-block: 4rem; }
.cfie-pinned .cfie-step__fig { display: none; }
.cfie-pinned .cfie-card { width: min(100%, 34rem); background: rgba(15, 53, 87, .86); color: #fff; padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--cf-rayon, 18px); box-shadow: 0 18px 40px rgba(0, 0, 0, .25); opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.cfie-pinned .cfie-step.is-active .cfie-card { opacity: 1; transform: none; }
.cfie-pinned .cfie-card__titre { color: #fff; }
.cfie-pinned .cfie-card .cf-eyebrow { color: #BFE6FA; }
.cfie-pinned .cfie-card p { color: #E3F3FD; }
.cfie-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.cfie-layer.is-active { opacity: 1; }
.cfie-layer .cfie-img { transform: scale(calc(1 + var(--lp, 0) * var(--cfie-zoom, .1))); transform-origin: center; will-change: transform; }
.cfie-pinned .cfie-stage .cfie-veil { background: linear-gradient(90deg, rgba(15, 53, 87, .55) 0%, rgba(15, 53, 87, .15) 60%, rgba(15, 53, 87, .05) 100%), linear-gradient(0deg, rgba(15, 53, 87, .45), transparent 40%); }
.cfie-prog { position: absolute; z-index: 3; right: clamp(.75rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); display: grid; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.cfie-prog li { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .45); transition: background-color .3s ease, transform .3s ease; }
.cfie-prog li.is-active { background: #fff; transform: scale(1.5); }
.cfie-scene[data-intensite="douce"] { --cfie-zoom: .05; }
.cfie-scene[data-intensite="normale"] { --cfie-zoom: .1; }
.cfie-scene[data-intensite="marquee"] { --cfie-zoom: .18; }

@media (max-width: 700px) {
	.cfie-pinned .cfie-step { align-items: flex-end; padding-block: 2rem 3rem; }
	.cfie-pinned .cfie-card { width: 100%; }
	.cfie-pinned .cfie-stage .cfie-veil { background: linear-gradient(0deg, rgba(15, 53, 87, .6), transparent 55%); }
}

/* Chiffres clés */
.cfie-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(2.5rem, 6vw, 4rem); }
.cfie-fig { display: grid; gap: .35rem; background: var(--cf-ciel, #F4F9FD); border: 1px solid var(--cf-bordure, #D7E3EC); border-radius: var(--cf-rayon, 18px); padding: 1.25rem; }
.cfie-fig__n { font-family: var(--wp--preset--font-family--titres, system-ui, sans-serif); font-weight: 700; font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1; color: var(--cf-action, #0A67A8); font-variant-numeric: tabular-nums; }
.cfie-fig__l { color: var(--cf-gris, #4F6070); font-size: .95rem; }

/* ====================== 3. BANDES VIDÉO / CINEMAGRAPH ================== */

.cfie-band { position: relative; display: flex; align-items: center; min-height: var(--cfie-h, 62vh); color: #fff; background: var(--cf-navy, #0F3557); overflow: hidden; max-width: none; }
.cfie-band__media { position: absolute; inset: 0; overflow: hidden; }
.cfie-band__media .cfie-img, .cfie-band__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cfie-band__media video { opacity: 0; transition: opacity .8s ease; }
.cfie-band__media video.is-playing { opacity: 1; }
.cfie-band__veil { position: absolute; inset: 0; pointer-events: none; }
.cfie-voile-marine .cfie-band__veil { background: linear-gradient(95deg, rgba(15, 53, 87, calc(var(--cfie-op, .62) + .3)) 0%, rgba(15, 53, 87, var(--cfie-op, .62)) 55%, rgba(15, 53, 87, calc(var(--cfie-op, .62) * .35)) 100%); }
.cfie-voile-bleu .cfie-band__veil { background: linear-gradient(95deg, rgba(15, 53, 87, calc(var(--cfie-op, .62) + .25)) 0%, rgba(10, 103, 168, var(--cfie-op, .62)) 100%); }
.cfie-voile-aucun .cfie-band__veil { background: rgba(15, 53, 87, .35); }
.cfie-band__inner { position: relative; z-index: 2; padding-block: clamp(3rem, 8vw, 5rem); }
.cfie-band__titre { margin: 0 0 1rem; color: #fff; font-family: var(--wp--preset--font-family--titres, system-ui, sans-serif); font-size: clamp(1.9rem, 4.5vw, 3rem); font-weight: 700; line-height: 1.1; max-width: 20ch; text-wrap: balance; }
.cfie-ready .cfie-band__inner > * { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.cfie-ready .cfie-band.is-visible .cfie-band__inner > * { opacity: 1; transform: none; }
.cfie-ready .cfie-band.is-visible .cfie-band__inner > *:nth-child(2) { transition-delay: .1s; }
.cfie-ready .cfie-band.is-visible .cfie-band__inner > *:nth-child(3) { transition-delay: .2s; }
.cfie-ready .cfie-band.is-visible .cfie-band__inner > *:nth-child(4) { transition-delay: .3s; }
.cfie-vpause { position: absolute; z-index: 4; right: .85rem; bottom: .85rem; }
.cfie-vpause[hidden] { display: none; }

@media (max-width: 700px) { .cfie-band { min-height: 0; } }

/* ============== Apparition progressive sur les pages choisies ========== */

.cfie-js.cfie-ok .cfie-rv-item { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s ease; transition-delay: calc(var(--cfie-d, 0) * 90ms); }
.cfie-js.cfie-ok .cfie-rv-item.is-visible { opacity: 1; transform: none; }

/* Le texte reste toujours lisible : si le script ne démarre pas, rien n'est masqué (la classe cfie-ok n'est posée que par le script). */

/* ============================ Accessibilité ============================ */

@media (prefers-reduced-motion: reduce) {
	.cfie-ready .cfie-slide, .cfie-ready .cfie-slide.is-active { transition: none; }
	.cfie-ready .cfie-rv, .cfie-ready .cfie-slide.is-active .cfie-rv { opacity: 1; transform: none; transition: none; }
	.cfie-hero .cfie-img, .cfie-hero .wp-block-cover__image-background, .cfie-layer .cfie-img { animation: none !important; transform: none !important; }
	.cfie-media { transform: none !important; }
	.cfie-js.cfie-ok .cfie-rv-item { opacity: 1; transform: none; transition: none; }
	.cfie-ready .cfie-band__inner > * { opacity: 1; transform: none; transition: none; }
	.cfie-band__media video { display: none; }
	.cfie-pinned .cfie-card { transition: none; }
}
@media print {
	.cfie-controls, .cfie-vpause, .cfie-prog { display: none !important; }
	.cfie-ready .cfie-slide { position: static; visibility: visible; opacity: 1; }
	.cfie-ready .cfie-slide:not(.is-active) { display: none; }
}

/* Mention « Illustration » dans la scène épinglée : en haut à droite, hors du bouton « retour en haut » du thème. */
.cfie-layer .cfie-legende { top: 4.5rem; bottom: auto; }

/* 1.2.0 : le bandeau d'accueil d'origine (première diapositive) adopte la même hauteur adaptative que les autres diapositives (le thème lui imposait 700 px en ligne). */
@media (min-width: 701px) { .cfie-ready .cfie-slide--hero .wp-block-cover { min-height: clamp(440px, 64svh, 620px) !important; } }
@media (max-width: 700px) {
	.cfie-ready .cfie-slide--hero .wp-block-cover__image-background { height: clamp(190px, 52vw, 290px); }
	.cfie-ready .cfie-slide--hero .cf-hero__legende { top: -2.3rem; }
	.cfie-ready .cfie-slide--hero h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
	.cfie-ready .cfie-slide--hero .wp-block-cover__inner-container { padding-block: 1.5rem 4.5rem; }
}