/* Décor animé des en-têtes : traits fins et aplats très clairs, mouvement lent, rien qui concurrence le texte. Variables du thème, avec valeurs de repli. */
.wc-art { --a-ink: var(--c-jungle, #1d2e1d); --a-acc: var(--c-artichoke, #89ab89); --a-grey: var(--c-grey, #eef2ee); --a-ease: var(--ease, cubic-bezier(.2, .8, .2, 1)); --b-fill: #f3f6f3; --b-line: #d5e0d5; --b-ln: #e0e8e0; --b-cloud: #c3d2c3; --b-wave: #dde9dd; --px: 0; --py: 0; position: relative; width: 100%; margin-inline: auto; pointer-events: none; }
.wc-art svg { display: block; overflow: hidden; }

/* accueil : le paysage occupe tout l'en-tête, ancré en bas à droite ; il s'estompe sous le texte */
.wc-art--home { position: absolute; inset: 0; width: auto; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .45) 30%, #000 60%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .45) 30%, #000 60%); }
.wa-scene { position: absolute; right: 0; bottom: 0; height: 100%; width: auto; aspect-ratio: 16 / 9; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%); mask-image: linear-gradient(90deg, transparent, #000 14%); } /* sur un écran très large, le paysage commence en douceur */
/* accueil, variante « spline » : la scène 3D de 4impact.ai (de la poussière qui dessine le logo), jouée par heroart.js. L'image fixe sert d'attente et de repli ;
   le filtre passe la scène, faite pour un fond noir, en vert foncé sur fond blanc ; --ws-opacity en règle la force (réglables ici : --ws-filter, --ws-opacity) */
.wc-art--spline { --ws-opacity: .75; --ws-filter: invert(1) hue-rotate(180deg) saturate(2) drop-shadow(0 0 1.2px rgba(20, 100, 70, 1)) drop-shadow(0 0 1px rgba(20, 100, 70, 1)); position: absolute; inset: 0; width: auto; overflow: hidden; }
.wc-art--spline canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; opacity: 0; filter: var(--ws-filter); } /* !important : le moteur fixe lui-même la taille du canevas */
.wc-art--spline .wa-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s ease; }
/* l'image fixe n'apparaît que si la scène ne peut pas tourner (sans JavaScript, sans WebGL, « réduire les animations », économie de données, échec du chargement) : sinon rien au départ, la poussière arrive seule en fondu, comme sur 4impact.ai */
.wc-art--spline.is-still .wa-still, .wc-art--spline .wa-still--ns { opacity: var(--ws-opacity); }
.wc-art--spline.is-live .wa-still { opacity: 0; }
.wc-art--spline.is-live canvas { opacity: var(--ws-opacity); animation: wa-reveal 1.6s ease both; }
@keyframes wa-reveal { from { opacity: 0; } }
@media (max-width: 700px) { .wc-art--spline { --ws-opacity: .85; --ws-filter: invert(1) hue-rotate(180deg) saturate(2) drop-shadow(0 0 1.2px rgba(20, 100, 70, 1)); } } /* téléphone : un seul halo, car le filtre est la partie la plus lourde de la scène */
/* accueil : le contenu du héros est centré, comme sur 4impact.ai (le texte tient entre les deux ailes de la scène). Sans la scène (« réduire les animations », économie de données, sans WebGL…), seul le premier
   des trois contenus reste affiché : les deux autres existent plus bas dans la page */
.e-con.wc-herostage { padding: 0; gap: 0; }
.e-con.wc-herostage .e-con.wc-hero__text { align-items: center; text-align: center; max-width: 780px; margin-inline: auto; }
.e-con.wc-herostage .e-con.wc-hero__slide { align-items: center; text-align: center; gap: 22px; }
.e-con.wc-herostage .e-con.wc-hero__slide .elementor-widget { text-align: center; }
.e-con.wc-herostage .e-con.wc-hero__slide .elementor-widget-text-editor { margin-inline: auto; }
.e-con.wc-herostage .e-con.wc-hero__slide .elementor-heading-title { font-size: clamp(2.2rem, 4vw, 3.7rem); text-align: center; }
.e-con.wc-herostage .e-con.wc-hero__text .e-con.wc-actions { justify-content: center; }
body .elementor .wc-herostage .wc-hero__slide .wc-bw--line .elementor-button { --bb: #fff; } /* « Voir le catalogue » : fond blanc plutôt que transparent, la poussière ne passe plus derrière le bouton */
.e-con.wc-herostage .e-con.wc-hero__slide + .e-con.wc-hero__slide { display: none; }
.elementor-editor-active .e-con.wc-herostage .e-con.wc-hero__slide + .e-con.wc-hero__slide { display: flex; } /* dans l'éditeur Elementor, on les voit tous pour pouvoir les modifier */
/* les piliers du dernier contenu : quatre lignes en grand, comme leur titre de pilier sur 4impact.ai */
.e-con.wc-herostage .wc-pillars { list-style: none; margin: 0; padding: 0; display: grid; font-size: clamp(2.2rem, 4vw, 3.7rem); line-height: 1; letter-spacing: -.03em; text-wrap: balance; color: var(--c-jungle, #1d2e1d); } /* même typographie que les titres des deux autres contenus (voir .wc-hero__slide .elementor-heading-title) */
.e-con.wc-herostage .elementor-widget-text-editor.wc-pillars-w { max-width: none; }
/* le héros reste épinglé pendant que la scène joue (heroart.js pose wc-herostage--pin seulement si elle peut tourner) ; les trois contenus se relaient selon l'avancement --hp (0 à 1), dans l'ordre de leur site :
   la promesse (0 à 25 %), leur phrase dont les mots se révèlent un à un (27 à 70 %), le logo se forme seul (70 à 80 %), puis les quatre piliers apparaissent et restent jusqu'à la fin */
@media (min-height: 520px) {
  .e-con.wc-herostage--pin { height: 280vh; height: 280svh; }
  .e-con.wc-herostage--pin > .e-con.wc-hero { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; }
  .e-con.wc-herostage--pin .e-con.wc-hero__text { display: grid; place-items: center; max-width: 960px; }
  .e-con.wc-herostage--pin .e-con.wc-hero__slide { display: flex; grid-area: 1 / 1; width: 100%; opacity: 0; pointer-events: none; }
  .e-con.wc-herostage--pin .e-con.wc-hero__slide + .e-con.wc-hero__slide { display: flex; }
  .e-con.wc-herostage--pin .e-con.wc-hero__slide.is-active { pointer-events: auto; }
  .e-con.wc-herostage--pin .e-con.wc-hero__slide:nth-child(1) { opacity: clamp(0, calc((.25 - var(--hp, 0)) / .09), 1); translate: 0 calc(var(--hp, 0) * -90px); }
  .e-con.wc-herostage--pin .e-con.wc-hero__slide:nth-child(2) { opacity: clamp(0, min(calc((var(--hp, 0) - .27) / .06), calc((.7 - var(--hp, 0)) / .08)), 1); translate: 0 calc((var(--hp, 0) - .48) * -90px); }
  .e-con.wc-herostage--pin .e-con.wc-hero__slide:nth-child(3) { opacity: clamp(0, calc((var(--hp, 0) - .8) / .08), 1); translate: 0 calc(clamp(0, (.9 - var(--hp, 0)), .2) * 50px); }
  .e-con.wc-herostage--pin .wc-pillars { display: grid; align-items: center; } /* un pilier à la fois : ils se relaient dans la même case. Le pilier affiché sort vers le haut (0,45 s), puis le suivant arrive par le bas (0,9 s, après 0,35 s) ; opacité et mouvement seulement */
  .e-con.wc-herostage--pin .wc-pillars li { grid-area: 1 / 1; opacity: 0; transform: translate3d(0, .4em, 0); will-change: opacity, transform; }
  .e-con.wc-herostage--pin .wc-pillars li.is-current { opacity: 1; transform: none; transition: opacity .9s cubic-bezier(.22, .61, .36, 1) .35s, transform 1.1s cubic-bezier(.22, .61, .36, 1) .35s; }
  .e-con.wc-herostage--pin .wc-pillars li.is-leaving { opacity: 0; transform: translate3d(0, -.4em, 0); transition: opacity .45s ease-in, transform .6s ease-in; }
  .e-con.wc-herostage--pin .wc-reveal .w { opacity: clamp(.22, calc(.22 + (var(--hp, 0) - (.3 + var(--i, 0) * .018)) / .04 * .78), 1); }
  .e-con.wc-herostage--pin .wc-art--spline.is-live canvas { opacity: calc(var(--ws-opacity) * (1 - clamp(0, (var(--hp, 0) - .8) / .08, 1) * .4)); } /* le logo s'efface un peu derrière les piliers */
}
/* téléphone (portrait) : même déroulé que sur ordinateur ; le contenu est centré dans l'écran, les titres sont un peu plus petits */
@media (max-width: 700px) and (min-height: 520px) {
  .e-con.wc-herostage--pin > .e-con.wc-hero { justify-content: center; padding-block: calc(var(--ab) + 64px) 56px; }
  .e-con.wc-herostage--pin .e-con.wc-hero__slide { gap: 18px; }
}
/* pages intérieures : un ciel dans la colonne de droite, sans cadre */
.wc-art--formations, .wc-art--formateurs, .wc-art--contact { max-width: 520px; aspect-ratio: 520 / 340; -webkit-mask-image: radial-gradient(ellipse 62% 64% at 50% 50%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 62% 64% at 50% 50%, #000 58%, transparent 100%); }
.wa-sky { width: 100%; height: 100%; }

/* profondeur : trois plans qui bougent très légèrement avec le curseur */
.wa-px1 { translate: calc(var(--px) * 6px) calc(var(--py) * 3px); }
.wa-px2 { translate: calc(var(--px) * 12px) calc(var(--py) * 7px); }
.wa-px3 { translate: calc(var(--px) * 3px) calc(var(--py) * 1.5px); }

/* graphique : des colonnes dont la teinte s'éclaircit tour à tour, comme une vague qui passe */
.wa-col { fill: var(--b-fill); stroke: var(--b-line); stroke-width: 1.3; vector-effect: non-scaling-stroke; animation: wa-wave 13s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .22s); }
@keyframes wa-wave { 0%, 10%, 100% { fill: var(--b-fill); } 4.5% { fill: var(--b-wave); } }
.wa-far { fill: #f8faf8; stroke: #e6eee6; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.wa-step rect { fill: #fff; stroke: #c3d2c3; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.wa-rw { fill: none; stroke: #e2eae2; stroke-width: 1.3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.wa-src { fill: var(--a-acc); stroke: #fff; stroke-width: 2; }

/* flux : une ligne fine, un grain de lumière qui monte vers le nuage */
.wa-ln { fill: none; stroke: var(--b-ln); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.wa-pk { fill: none; stroke: var(--a-acc); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 5 95; animation: wa-up var(--t, 8s) linear infinite; animation-delay: var(--o, 0s); }
@keyframes wa-up { from { stroke-dashoffset: 5; } to { stroke-dashoffset: -95; } }

/* nuages : celui du centre flotte, les autres passent lentement (la boucle dure plusieurs minutes) */
.wa-cp { fill: #fff; stroke: var(--b-cloud); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.wa-amb .wa-cp { stroke: #d3dfd3; }
.wa-feat .wa-cp { stroke: #b2c4b2; stroke-width: 1.8; }
.wa-ico, .wa-ico * { fill: none; stroke: var(--a-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.wa-ico { opacity: .72; }
.wa-amb { animation: wa-drift var(--d, 260s) linear infinite; animation-delay: var(--o, 0s); }
@keyframes wa-drift { from { transform: translateX(-540px); } to { transform: translateX(2140px); } }
.wa-sky .wa-amb { animation-name: wa-drift-s; }
@keyframes wa-drift-s { from { transform: translateX(-240px); } to { transform: translateX(760px); } }
.wa-feat { animation: wa-bob 6.5s ease-in-out infinite; }
@keyframes wa-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* étincelles */
.wa-tw { fill: var(--a-acc); transform-box: fill-box; transform-origin: 50% 50%; animation: wa-tw 5.2s ease-in-out infinite; animation-delay: var(--o, 0s); }
@keyframes wa-tw { 0%, 100% { opacity: .22; transform: scale(.7); } 50% { opacity: .95; transform: scale(1); } }

/* entrée : les colonnes montent l'une après l'autre, puis le nuage descend et les flux apparaissent (seulement si le JavaScript du thème est actif : l'éditeur Elementor reste statique) */
.wc-js .wa-col { transform-box: fill-box; transform-origin: 50% 100%; animation: wa-rise .9s var(--a-ease) both, wa-wave 13s ease-in-out infinite; animation-delay: calc(.1s + var(--i, 0) * .035s), calc(2.6s + var(--i, 0) * .22s); }
@keyframes wa-rise { from { transform: scaleY(0); } }
.wc-js .wa-feat { animation: wa-drop 1.2s var(--a-ease) .5s both, wa-bob 6.5s ease-in-out 1.7s infinite; }
@keyframes wa-drop { from { opacity: 0; transform: translateY(-26px); } }
.wc-js .wa-cp, .wc-js .wa-ln, .wc-js .wa-rw, .wc-js .wa-src, .wc-js .wa-step, .wc-js .wa-far { animation: wa-fade 1.4s ease 1s both; }
.wc-js .wa-feat .wa-cp { animation: none; }
.wc-js .wa-pk { animation: wa-fade 1.4s ease 1.6s both, wa-up var(--t, 8s) linear infinite; animation-delay: 1.6s, var(--o, 0s); }
@keyframes wa-fade { from { opacity: 0; } }

/* hors de l'écran, le décor se met en pause */
.wc-art.is-off * { animation-play-state: paused !important; }

/* téléphone : le texte en haut, le décor réduit en dessous */
@media (max-width: 700px) {
  .wc-art--home { -webkit-mask-image: none; mask-image: none; }
  .wc-art--home .wa-scene { height: 40%; }
  .wa-step { display: none; } /* trop petites pour rester lisibles */
}
@media (prefers-reduced-motion: reduce) {
  .wc-art *, .wc-art *::before { animation: none !important; }
  .wa-pk { display: none; }
  .wa-amb { transform: translateX(var(--rx, 700px)); } /* sans mouvement, les nuages restent à une place agréable */
}

/* ---------- fiche formation : le visuel de la technologie, dans une carte ---------- */
.wc-art--formation { max-width: 440px; aspect-ratio: 4 / 3; }
.wc-tile { position: relative; overflow: hidden; border-radius: 26px; background: #fff; box-shadow: inset 0 0 0 1px rgba(29, 46, 29, .11), 0 26px 44px -34px rgba(29, 46, 29, .4); translate: calc(var(--px) * var(--k, 6) * 1px) calc(var(--py) * var(--k, 6) * .7px); color: var(--a-ink); }
.wc-tile--visual { position: absolute; inset: 0; background: var(--a-ink); }
.wc-tile--visual .wc-visual { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.wc-tile--visual img, .wc-tile--visual svg { width: 100%; height: 100%; object-fit: cover; }
.wc-js .wc-tile { animation: wa-in .9s var(--a-ease) both; animation-delay: .12s; }
@keyframes wa-in { from { opacity: 0; transform: translateY(22px) scale(.96); } }

/* pages « Formations » et « Formateurs » : tuiles aux verts de la présentation, tableau de bord et tableau blanc (2026-11) */
.wa-tile { stroke: none; }
.wa-t1 { fill: #6b9b6e; } .wa-t2 { fill: #4f7f52; } .wa-t3 { fill: #3e6b41; } .wa-t4 { fill: #26412b; }
.wa-tico, .wa-tico * { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.wa-dash { fill: #fff; stroke: var(--b-cloud); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.wa-spark, .wa-link, .wa-point { fill: none; stroke: var(--a-acc); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.wa-point { stroke: #26412b; stroke-width: 3; }
.wa-bar { fill: var(--a-acc); transform-box: fill-box; transform-origin: 50% 100%; animation: wa-barup 4.8s ease-in-out infinite; animation-delay: var(--o, 0s); }
@keyframes wa-barup { 0%, 100% { transform: scaleY(.6); } 50% { transform: scaleY(1); } }
.wa-tl { animation: wa-bob 6.5s ease-in-out infinite; animation-delay: var(--o, 0s); }
.wc-js .wa-tl { animation: wa-drop 1s var(--a-ease) both, wa-bob 6.5s ease-in-out infinite; animation-delay: calc(.3s - var(--o, 0s) * .25), calc(1.3s + var(--o, 0s)); }
/* accueil réduit au slogan (retour client) : un seul contenu, toujours visible, et une séquence plus courte pendant que le logo se forme */
@media (min-height: 520px) {
  .e-con.wc-herostage--pin.wc-herostage--solo { height: 180vh; height: 180svh; }
  .e-con.wc-herostage--pin .e-con.wc-hero__slide:only-child { opacity: 1; translate: none; pointer-events: auto; }
}

/* page « Formateurs » : leurs photos en mosaïque (retour client du 04/11/2026 : « humaniser »), sans le fondu en ellipse des dessins */
.wc-art--team { max-width: 520px; aspect-ratio: auto; -webkit-mask-image: none; mask-image: none; }
.wa-team { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding-bottom: 22px; }
.wa-face { width: calc((100% - 24px) / 3); margin: 0; border-radius: 20px; overflow: hidden; background: var(--a-grey); box-shadow: 0 18px 40px -24px rgba(29, 46, 29, .45); animation: wa-bob 7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.1s); }
.wa-face:nth-child(3n+2) { translate: 0 22px; }
.wa-face .wc-visual { aspect-ratio: 4 / 5; border-radius: 0; }
.wa-face .wc-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wa-face .wc-visual--ph span { font-size: 1.6rem; }

/* page « Contact » : une photo choisie dans Réglages 4 Impact (celle de l'équipe, par exemple) garde ses proportions, coins arrondis, sans le fondu en ellipse des dessins */
.wc-art--photo { max-width: 520px; aspect-ratio: auto; }
.wc-art--photo img { display: block; width: 100%; height: auto; border-radius: 26px; box-shadow: 0 26px 44px -34px rgba(29, 46, 29, .4); }
.wc-js .wc-art--photo img { animation: wa-in .9s var(--a-ease) both; animation-delay: .12s; }