/* ========================================================================= 3Event — page Animations Maquette Figma « PAGE ANIMATIONS » (fichier iysRiEh29eak8SR2njxmkB, frame 434:630, 07/09/2026) + popup de détail (frame 436:1251). Chargé uniquement sur cette page (functions.php, tev_is_page_animations). ========================================================================= */ /* --- Bannière ------------------------------------------------------------ */ .tev-anim-hero { position: relative; background: var(--tev-blue); color: var(--tev-cream); /* Tout est fluide : la page s'adapte en continu au lieu de sauter d'un palier à l'autre. Les bornes des clamp() sont les valeurs de la maquette (haut) et le minimum lisible (bas). */ padding-block: clamp(108px, 10.4vw, 150px) clamp(56px, 6.7vw, 96px); overflow: clip; } /* Pattern du fond : la silhouette de montagne en blanc à 4 %, deux fois, aux positions de la maquette (x=1285/y=172 et x=499/y=503). */ .tev-anim-hero__pattern { position: absolute; inset: 0; pointer-events: none; } .tev-anim-hero__mont { position: absolute; color: var(--tev-cream); opacity: .04; height: auto; } .tev-anim-hero__mont--1 { width: 356px; right: -201px; top: 159px; } .tev-anim-hero__mont--2 { width: 379px; left: 34.7%; top: 490px; } /* Texte à gauche, photo à droite dans un cadre orange décalé (maquette : photo 633×368 à x=718, titre à x=78). */ .tev-anim-hero__inner { position: relative; z-index: 1; display: flex; align-items: center; gap: clamp(24px, 4.4vw, 64px); min-height: clamp(320px, 36vw, 520px); } .tev-anim-hero__texte { flex: 1 1 44%; max-width: 560px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(20px, 2.2vw, 32px); } .tev-anim-hero__title { text-transform: uppercase; font-size: clamp(21px, 2.55vw, 36px); line-height: 1.08; } /* Sur-titre du H1 : il porte le mot-clé de la page et se lit comme un eyebrow. Il reste DANS le

— le sortir ferait perdre le mot-clé au titre. */ .tev-anim-hero__title--sur { display: flex; flex-direction: column; gap: 14px; } .tev-anim-hero__eyebrow { font-family: var(--tev-font-form); font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .12em; color: var(--tev-orange); } .tev-anim-hero__catch { display: block; } /* Fil d'Ariane servi à l'intérieur de la bannière (gabarit de référencement). ⚠️ Posé sous elle, dans sa propre bande claire, il coupait le passage du bleu à l'orange d'un trait blanc (Lisa, 18/09/2026). */ .tev-anim-hero__ariane { position: relative; z-index: 2; padding-top: 12px; } .tev-anim-hero__ariane .tev-ariane__list { color: rgba(255, 255, 255, .72); } .tev-anim-hero__ariane .tev-ariane__item a { color: rgba(255, 255, 255, .72); } .tev-anim-hero__ariane .tev-ariane__item a:hover { color: var(--tev-white); } .tev-anim-hero__ariane .tev-ariane__item [aria-current] { color: var(--tev-white); } .tev-anim-hero__ariane .tev-ariane__item + .tev-ariane__item::before { color: rgba(255, 255, 255, .45); } .tev-anim-hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; } /* Trois images superposées, AUCUN fond ni bordure : le cadre fait partie des images elles-mêmes. Décalages et opacités relevés sur la maquette — couche 1 (0,0), couche 2 (+3,0), couche nette (+16,+23) et 633/658 de large. */ .tev-anim-hero__media { position: relative; flex: 1 1 52%; max-width: 658px; min-width: 0; aspect-ratio: 658 / 413; } .tev-anim-hero__img { position: absolute; display: block; transition: opacity .35s var(--tev-ease); } .tev-anim-hero__img--1 { left: 0; top: 0; width: 100%; opacity: .44; } .tev-anim-hero__img--2 { left: .456%; top: 0; width: 100%; opacity: .44; } .tev-anim-hero__img--3 { left: 2.43%; top: 5.57%; width: 96.2%; } /* Photo choisie en back-office : format paysage imposé et cadre de la maquette (bord orange 3 px, rayon 24 px, mesurés sur anim-hero-3). */ /* Posée à l'emplacement exact du cadre visible de l'export (hors ombre transparente). */ .tev-anim-hero__img--photo { left: 6.6%; top: 11.4%; width: 87.8%; aspect-ratio: 1156 / 678; height: auto; object-fit: cover; border: 3px solid var(--tev-orange); border-radius: 24px; } /* Séquence d'arrivée : chaque couche se montre pleine, puis passe à 44 % quand la suivante la recouvre. L'état final est celui des règles ci-dessus. */ .tev-anim-hero__media.is-sequence .tev-anim-hero__img { opacity: 0; } .tev-anim-hero__media.is-sequence .tev-anim-hero__img.is-pleine { opacity: 1; } .tev-anim-hero__media.is-sequence .tev-anim-hero__img.is-fondue { opacity: .44; } /* --- Bannière en éventail (page Événements) --------------------------------- Aucune maquette ne dessine cette page : le visuel reprend le vocabulaire déjà posé par la galerie de l'accueil — photos inclinées, bord orange, grands rayons — au lieu du cadre rectangulaire figé, qui ne tenait pas debout avec une seule photo (Lisa, 16/09/2026). ⚠️ Répartition des rôles : le SLOT porte la position (et c'est lui que GSAP anime), la PHOTO porte l'inclinaison et le suivi du curseur. Sans cette séparation, l'animation d'entrée écraserait la rotation, les deux vivant dans la même propriété `transform`. Les tailles sont en POURCENTAGE de la boîte : la bannière est fluide, et une photo calée en pixels sortirait du cadre dès qu'on rétrécit la fenêtre. */ .tev-eventail { position: relative; } .tev-eventail__slot { position: absolute; will-change: transform; } /* Décalages choisis pour que l'emprise des photos inclinées reste DANS la boîte : la section est en `overflow: clip`, un coin qui dépasse serait tranché sans prévenir. */ .tev-eventail__slot--1 { left: 0; top: 4%; width: 54%; aspect-ratio: 4 / 3; z-index: 1; } /* 3 % de retrait à droite, pas 0 : inclinée de 6,5°, la photo pousse son coin d'une quinzaine de pixels au-delà de sa boîte — collée au bord, elle sortait de l'alignement du container, et davantage encore au survol. */ .tev-eventail__slot--2 { right: 3%; bottom: 2%; width: 49%; aspect-ratio: 4 / 3; z-index: 2; } .tev-eventail__slot--3 { left: 15%; top: 17%; width: 62%; aspect-ratio: 16 / 10; z-index: 3; } .tev-eventail__photo { margin: 0; width: 100%; height: 100%; overflow: hidden; border-radius: var(--tev-radius); border: 3px solid var(--tev-orange); box-shadow: 0 18px 44px rgba(10, 16, 50, .34); /* --px / --py : le suivi du curseur, posé par animations.js. Le repli à 0 garde la règle valable sans JavaScript et sur écran tactile. */ transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotate(var(--r, 0deg)); transition: transform .5s var(--tev-ease), box-shadow .5s var(--tev-ease); } .tev-eventail__photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .tev-eventail__slot--1 .tev-eventail__photo { --r: -7deg; } .tev-eventail__slot--2 .tev-eventail__photo { --r: 6.5deg; } .tev-eventail__slot--3 .tev-eventail__photo { --r: -1.5deg; } /* Au survol, l'éventail s'ouvre : les deux photos du fond s'écartent, celle du dessus avance. Réservé au pointeur fin — au doigt il n'y a pas de survol, et l'éventail reste tel quel. */ @media (hover: hover) and (pointer: fine) { .tev-eventail:hover .tev-eventail__slot--1 .tev-eventail__photo { --px: -18px; --py: -10px; --r: -10.5deg; } .tev-eventail:hover .tev-eventail__slot--2 .tev-eventail__photo { --px: 12px; --py: 10px; --r: 10deg; } .tev-eventail:hover .tev-eventail__slot--3 .tev-eventail__photo { box-shadow: 0 26px 60px rgba(10, 16, 50, .42); } } /* Raccord sous la bande orange (page Événements). 🛑 La bande d'introduction se termine en OBLIQUE (clip-path) : la section qui la suit doit remonter de `--tev-slant` et porter l'oblique complémentaire, sinon le triangle laisse voir le blanc du body — la bande blanche signalée par Lisa le 16/09/2026. Sur la page Animations, c'est `.tev-fiches` qui fait ce raccord ; ici la section suivante est la pile de cartes. ⚠️ L'oblique est posée sur un PSEUDO-ÉLÉMENT, pas sur la section : un `clip-path` crée un bloc conteneur pour les descendants en `position: fixed`, et casserait l'épinglage GSAP de la pile de cartes. Le pseudo, lui, n'a pas de descendant. Le fond `--tev-tint` est semi-transparent : il DOIT être porté par un seul élément, sinon il se cumule et la section fonce. Il passe donc au pseudo. */ .tev-evt-page .tev-anim-intro + .tev-offres { background: none; margin-top: calc(var(--tev-slant) * -1); padding-top: calc(154px + var(--tev-slant)); } .tev-evt-page .tev-anim-intro + .tev-offres::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tev-tint); clip-path: polygon(0 var(--tev-slant), 100% 0, 100% 100%, 0 100%); } @media (max-width: 1024px) { .tev-evt-page .tev-anim-intro + .tev-offres { padding-top: calc(88px + var(--tev-slant)); } } /* Page Événements — réglages propres à cette page. 1. Les photos de la section « formats » se choisissent en back-office : leur format est imposé ici, sinon un portrait donne une vignette deux fois plus haute que ses voisines (téléphone) et une traînée disparate (souris). 2. La réserve au-dessus du titre vaut 230 px sur la page Animations, où le sillage de photos l'occupe en maquette. Ici la section est courte : cette réserve ne faisait qu'un grand vide. */ .tev-evt-page .tev-anim-galerie__repli img, .tev-evt-page .tev-anim-galerie__trace { aspect-ratio: 16 / 10; object-fit: cover; } /* ⚠️ Sous `@media (min-width: 769px)` : sans cette borne, la règle (0-2-0) l'emportait sur les paliers mobiles de la section (0-1-0) et rendait 140 px de réserve sur un téléphone, là où 64 suffisent. */ @media (min-width: 769px) { .tev-evt-page .tev-anim-galerie { padding-block: 140px 80px; } } /* La bannière s'empile plus tôt que sur la page Animations : l'éventail a besoin de largeur pour que ses trois photos se distinguent, or à 834 px elles tombaient sous 250 px de large. */ @media (max-width: 900px) { /* La bannière se compacte : sans cette réserve, le fil d'Ariane vient toucher le sur-titre, les deux étant de petits textes en capitales. */ .tev-anim-hero__ariane { padding-bottom: 20px; } .tev-anim-hero__title--sur { gap: 10px; } .tev-evt-page .tev-anim-hero__inner { flex-direction: column; align-items: flex-start; min-height: 0; } .tev-evt-page .tev-anim-hero__texte { flex: 0 0 auto; max-width: 100%; } .tev-evt-page .tev-anim-hero__media { flex: 0 0 auto; width: 100%; max-width: 560px; margin-inline: auto; } .tev-evt-page .tev-anim-hero__ctas { width: 100%; } } /* Sur petit écran l'éventail se resserre : les photos du fond ne servent plus qu'à border celle du dessus, sinon elles mangent la place du texte. */ @media (max-width: 768px) { .tev-eventail__slot--1 { top: 2%; width: 50%; } .tev-eventail__slot--2 { width: 46%; } .tev-eventail__slot--3 { left: 18%; top: 15%; width: 64%; } .tev-eventail__photo { border-width: 2px; } } /* --- Introduction ---------------------------------------------------------- Bande ORANGE pleine largeur, texte unique en Archivo Black 22/28 crème, centré sur 912 px (mesuré : bande #FF5527 de 370 px, texte à x=264). */ .tev-anim-intro { background: var(--tev-orange); color: var(--tev-cream); padding-block: clamp(56px, 6.7vw, 96px) clamp(80px, 8.9vw, 128px); /* Bord oblique en bas, comme les bandes de l'accueil. */ clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--tev-slant)), 0 100%); } .tev-anim-intro__inner { max-width: 1120px; margin-inline: auto; display: flex; flex-direction: column; gap: 10px; text-align: center; } .tev-anim-intro__titre, .tev-anim-intro__texte { font-family: var(--tev-font-title); font-size: clamp(16px, 1.55vw, 22px); line-height: 1.3; text-transform: uppercase; /* Couleur de DÉPART de la révélation : chaque mot blanchit au défilement (app.js, `scrub-words`, qui anime vers #FBFBFB). */ color: rgba(251, 251, 251, .38); } /* Sans JavaScript, le texte doit rester parfaitement lisible. */ .tev-anim-intro__inner:not([data-tev-split="done"]) .tev-anim-intro__titre, .tev-anim-intro__inner:not([data-tev-split="done"]) .tev-anim-intro__texte { color: var(--tev-cream); } /* --- Bloc « 01 FÉDÉRER » : carrousel de cartes ------------------------------ Sur fond clair, carte bleue centrée (~331 px de texte), titre 36/39 crème, texte 18/21 crème, deux flèches en dessous. */ .tev-valeurs { position: relative; background: var(--tev-tint); padding-block: 96px 120px; } .tev-valeurs__inner { position: relative; z-index: 2; display: flex; justify-content: center; } .tev-valeurs__carousel { display: flex; flex-direction: column; align-items: center; gap: 56px; } /* Les trois cartes se SUPERPOSENT réellement (Lisa, 16/09/2026) : ce ne sont pas des contours vides derrière, mais les cartes elles-mêmes, décalées. Toutes occupent la même cellule de grille, donc le bloc prend la hauteur de la plus haute et rien n'est positionné en absolu. `--d` est l'écart à la carte active, posé par animations.js : il pilote le décalage, l'inclinaison et l'ordre de superposition. */ /* Recalé sur la maquette le 23/09/2026 (434:630, Rectangles 83/84/85 et Frame 276). Les trois cartes sont des CARRÉS de 454 px (boîtes redressées : 513 px de boîte tournée à 8°, 462 px à 1°). Celle du dessus est bleue et presque droite (−1°) ; les deux de derrière sont CRÈME, bordées d'orange, inclinées de +8° et −8°, et ne montrent que leur bord. `data-d` (écart à la carte active) est posé par animations.js. */ .tev-valeurs__list { position: relative; display: grid; width: min(454px, 100%); } /* Les cartes sont À CHEVAL sur deux fonds (maquette : l'aplat bleu clair s'arrête à y=3806, soit 44 % de la hauteur de la carte du dessus, et le crème de Rectangle 92 prend le relais jusqu'aux chiffres clés). Le crème est porté par la liste elle-même, pour que la ligne de partage suive la carte à toutes les largeurs ; la section coupe ce qui dépasse. Posé dans `__inner` (z-index 2), il passe au-dessus du grain, que le crème n'a pas. */ .tev-valeurs { overflow: clip; } /* Soudure avec la grille de fiches : la hauteur de celle-ci tombe sur une fraction de pixel, et la jonction laissait passer un filet clair (mesuré : une ligne à 247/248/253 entre deux aplats à 240/242/251). Le recouvrement d'1 px suffirait avec un fond opaque, mais `--tev-tint` est transparent et deux couches se cumuleraient en ligne plus foncée : la section prend donc la teinte déjà composée, opaque, relevée sur le rendu. */ .tev-valeurs { margin-top: -1px; background: rgb(240, 242, 251); } /* Les flèches passent au-dessus du crème de la liste (qui est positionné). */ .tev-valeurs__nav { position: relative; z-index: 1; } .tev-valeurs__list::before { content: ""; position: absolute; top: 44%; left: 50%; z-index: 0; width: 100vw; height: 100vh; translate: -50% 0; background: var(--tev-cream); pointer-events: none; } .tev-valeur { grid-area: 1 / 1; /* `relative` obligatoire : la carte porte la montagne en `absolute`. */ position: relative; aspect-ratio: 1; display: flex; flex-direction: column; gap: 48px; background: var(--tev-blue); color: var(--tev-cream); border: 2px solid var(--tev-orange); border-radius: var(--tev-radius); padding: 88px 60px 60px; transform: rotate(-1deg); z-index: 10; transition: transform .5s var(--tev-ease), background-color .5s var(--tev-ease); } .tev-valeur[data-d="1"] { background: var(--tev-cream); transform: translate(4px, -16px) rotate(8deg); z-index: 9; } .tev-valeur[data-d="2"] { background: var(--tev-cream); transform: translate(-12px, -28px) rotate(-8deg); z-index: 8; } /* Au-delà de trois cartes, les suivantes attendent sous la pile. */ .tev-valeur[data-d]:not([data-d="0"]):not([data-d="1"]):not([data-d="2"]) { background: var(--tev-cream); opacity: 0; z-index: 1; } /* Seule celle du dessus montre son contenu. */ .tev-valeur:not(.is-active) > * { opacity: 0; transition: opacity .3s var(--tev-ease); } .tev-valeur__titre { font-family: var(--tev-font-title); font-size: clamp(26px, 2.55vw, 36px); line-height: 1.09; text-transform: uppercase; } .tev-valeur__num { font-size: 16px; line-height: 1; margin-right: 12px; vertical-align: 4px; } .tev-valeur__texte { font-size: 18px; line-height: 21.8px; font-weight: 600; } /* Montagne de la maquette (Vector 434:897), crème à 76 %, qui déborde un peu du bord droit comme sur la maquette. */ .tev-valeur__montagne { position: absolute; right: -6px; bottom: 4px; width: 136px; height: auto; color: var(--tev-cream); opacity: .76; } .tev-valeur.is-active > .tev-valeur__montagne { opacity: .76; } .tev-valeurs__nav { display: flex; gap: 14px; } /* --- Grille de fiches ------------------------------------------------------- Fond bleu à 8 % (le `--tev-tint` de la maquette), pas crème. La section remonte SOUS la diagonale de la bande orange et porte le bord oblique complémentaire : sans ça, le blanc du body apparaît entre les deux (la découpe de la bande laisse un vide que rien ne remplit). */ .tev-fiches { position: relative; background: var(--tev-tint); margin-top: calc(var(--tev-slant) * -1); clip-path: polygon(0 var(--tev-slant), 100% 0, 100% 100%, 0 100%); padding-block: calc(96px + var(--tev-slant)) 96px; } /* Chapô : le propos sur les objectifs, juste avant les filtres — c'est l'ordre du document fourni par le client (16/09/2026). En casse normale, pas en capitales : la bande orange porte déjà l'accroche criée. */ .tev-fiches__chapo { max-width: 860px; margin-bottom: clamp(32px, 3.4vw, 52px); display: flex; flex-direction: column; gap: 12px; } .tev-fiches__chapo p { font-size: clamp(15px, 1.25vw, 17px); line-height: 1.55; color: var(--tev-blue); } .tev-fiches__chapo p:first-child { font-family: var(--tev-font-title); font-size: clamp(18px, 1.75vw, 24px); line-height: 1.25; text-transform: uppercase; } /* Titre et filtres sur la MÊME ligne, filtres alignés à droite (maquette : titre à x=80, première pastille à x=647). */ .tev-fiches__inner { position: relative; z-index: 2; } .tev-fiches__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 56px; } .tev-fiches__title { flex: 0 0 auto; } .tev-fiches__filtres { flex: 1 1 auto; justify-content: flex-end; row-gap: 12px; } .tev-filtre { cursor: pointer; background: transparent; color: var(--tev-blue); border-color: var(--tev-blue); transition: background-color .3s var(--tev-ease), color .3s var(--tev-ease), border-color .3s var(--tev-ease); } .tev-filtre:hover { border-color: var(--tev-orange); color: var(--tev-orange); } .tev-filtre.is-active { background: var(--tev-orange); border-color: var(--tev-orange); color: var(--tev-cream); } .tev-fiches__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 56px 64px; } /* Légèrement en quinconce ET légèrement inclinées, comme la maquette (retour Lisa, 15/09/2026, @1341,1266). Le « ricochet » est au scroll, voir assets/js/animations.js. */ .tev-fiches__list .tev-fiche:nth-child(even) { margin-top: 72px; } .tev-fiche { position: relative; display: flex; flex-direction: column; gap: 34px; } /* Apparition successive : cartouche → image → texte (commentaire de Lisa, 15/09/2026 : « le texte arrive après la cartouche + l'image »). La classe js-anim n'est posée que si le JavaScript tourne ; sans lui, tout est visible. */ /* 🛑 Ne JAMAIS poser la transition ici. Ce sélecteur (0-3-0) est plus spécifique que `.tev-fiche__plaque` (0-1-0) : la forme raccourcie `transition: opacity .35s` y écrasait la déclaration complète de la plaque, qui perdait donc sa transition sur `transform` — le survol ne glissait pas, il SAUTAIT (retour de Thomas, 22/09/2026 : « fluidifie la transition au hover »). ⚠️ Le raccourci `transition` remet à zéro toutes ses parties, y compris celles qu'on ne mentionne pas. La transition appartient à l'élément, pas à l'état : elle est déclarée une fois sur chacun d'eux, plus bas. */ .tev-fiche.js-anim .tev-fiche__plaque, .tev-fiche.js-anim .tev-fiche__photo, .tev-fiche.js-anim .tev-fiche__body { opacity: 0; } .tev-fiche__photo, .tev-fiche__body { transition: opacity .35s var(--tev-ease); } .tev-fiche.js-anim.is-vue .tev-fiche__plaque { opacity: 1; } .tev-fiche.js-anim.is-vue .tev-fiche__photo { opacity: 1; transition-delay: .22s; } .tev-fiche.js-anim.is-vue .tev-fiche__body { opacity: 1; transition-delay: .44s; } /* Le « ricochet » (Lisa, 16/09/2026) : la carte PIVOTE légèrement de gauche à droite sur sa base, UNE SEULE FOIS, quand elle arrive à l'écran — et non à chaque défilement. Les cartes entrant l'une après l'autre, le mouvement descend naturellement le long de la grille. */ .tev-fiche.js-anim.is-vue { transform-origin: bottom center; animation: tev-fiche-pivot 1.5s cubic-bezier(.33, .1, .25, 1) both; } /* Mouvement volontairement doux (Lisa, 16/09/2026) : amplitude réduite de moitié et courbe plus souple qu'à la première version. */ @keyframes tev-fiche-pivot { 0% { transform: rotate(-.9deg); } 34% { transform: rotate(.55deg); } 62% { transform: rotate(-.22deg); } 84% { transform: rotate(.08deg); } 100% { transform: rotate(0deg); } } .tev-fiche.is-collapsed { display: none; } .tev-fiche:nth-child(odd) .tev-fiche__plaque { transform: rotate(-2.5deg); } .tev-fiche:nth-child(even) .tev-fiche__plaque { transform: rotate(2.5deg); } /* Plaque colorée 528×409 : bandeau de pastilles en haut, photo posée dedans (523×334), « Découvrir » en bas à droite par-dessus la photo. */ .tev-fiche__plaque { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 528 / 409; padding: 14px 0 0; display: flex; flex-direction: column; box-shadow: 0 16px 40px rgba(9, 18, 52, .16); transition: transform .45s var(--tev-ease), opacity .35s var(--tev-ease), box-shadow .45s var(--tev-ease); /* Indice au navigateur : cet élément transforme au survol, qu'il lui réserve sa couche. ⚠️ Aucun gain MESURÉ ici — la machine de recette rend en logiciel, elle plafonne cette page à 15 images/s quoi qu'on retire (essayé sans l'animation de fond des photos et sans le grain : même chiffre). C'est une bonne pratique, pas un correctif de performance, et elle n'est posée que sur les 6 plaques, jamais sur leurs images. */ will-change: transform; /* La plaque est un