/* =========================================================================
   3Event — page Agence
   Maquette Figma « PAGE AGENCE V2 » (fichier iysRiEh29eak8SR2njxmkB,
   frame 433:149, 07/09/2026). Charge après app.css : réutilise ses variables,
   boutons, pastilles, flèches et le composant .tev-stats de l'accueil.
   ========================================================================= */

/* --- motif des aplats colorés -------------------------------------------------
   Ce n'est pas le grain de l'accueil : la maquette applique l'effet « Noise »
   de Figma, dont les paramètres sont lisibles dans le fichier — monotone
   blanc, grain de 3,4 px, densité 0,35, fusion NORMALE (pas « overlay »), et
   une opacité qui varie selon la zone : 0,08 bannière et équipe, 0,06
   montagne et pied de page, 0,10 formulaire.
   `assets/img/motif-bruit.png` reproduit ce motif (tuile de 170 px = 50
   grains de 3,4 px, elle boucle donc juste). L'opacité se règle par zone avec
   --tev-bruit.

   Posé en `::before` et en z-index 0, donc DERRIÈRE le contenu : `.tev-grain`
   d'app.css, lui, passe par-dessus, ce qui texturerait les photos. */
.tev-motif { position: relative; }
.tev-motif::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	border-radius: inherit;
	background-image: url(../img/motif-bruit.png); background-size: 200px 200px;
	opacity: var(--tev-bruit, .8);
}

/* --- bannière --------------------------------------------------------------
   Tout est CENTRÉ sur la maquette : titre, boutons, pile (centre de la photo
   mesuré à 722 px pour un cadre de 1440). Fond bleu avec les motifs de
   montagne en filigrane (mêmes SVG que le hero de l'accueil).

   Pas d'`overflow:clip` ici : la pile est épinglée par GSAP ScrollTrigger
   (heroStack(), agence.js) — un overflow local sur un ancêtre peut interférer
   avec le pin. Le `overflow-x: clip` du <body> (app.css) suffit déjà à
   contenir les motifs décoratifs qui débordent à gauche. */
.tev-agence-hero { position: relative; background: var(--tev-blue); padding-top: 150px; }
.tev-agence-hero__deco { position: absolute; color: var(--tev-cream); opacity: .05; }
.tev-agence-hero__deco--right { top: 6%; right: 0; width: 300px; height: auto; }
.tev-agence-hero__deco--left  { top: 42%; left: -110px; width: 280px; height: auto; }

.tev-agence-hero__top { position: relative; z-index: 2; text-align: center; }
.tev-agence-hero__title { color: var(--tev-cream); margin-bottom: 40px; }
.tev-agence-hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-bottom: 76px; }

/* Bouton en contour sur le bleu : la maquette pose « Parlons de votre projet »
   en transparent bordure crème, ce que les variantes de tev_button() (light /
   blue / orange, toutes pleines) ne couvraient pas. */
.tev-btn--ghost { background: transparent; color: var(--tev-cream); border-color: var(--tev-cream); }
.tev-btn--ghost:hover { background: var(--tev-cream); color: var(--tev-blue); }

.tev-agence-hero__photo-zone { position: relative; padding-bottom: 120px; }
/* Bord OBLIQUE, comme la maquette : 25 px de dénivelé sur toute la largeur.
   `top` posé en pixels par assets/js/agence.js (heroOrangeSplit) : un % CSS
   ici serait relatif à cette zone, dont la hauteur devient imprévisible une
   fois la pile épinglée (position:fixed). Repli à 37 % tant que le JS n'a pas
   tourné. */
.tev-agence-hero__orange-bg {
	position: absolute; left: 0; right: 0; top: 37%; bottom: 0;
	background: var(--tev-orange); z-index: 0;
	clip-path: polygon(0 0, 100% 25px, 100% 100%, 0 100%);
}

/* Pile de 3 photos QUASI SUPERPOSÉES (ce n'est pas l'éventail large de la
   galerie de l'accueil) : sur la maquette, seuls quelques pixels des deux
   photos du fond dépassent, et elles sont estompées. Décalages et arrivée au
   scroll : heroStack() dans assets/js/agence.js.
   Les exports Figma portent déjà leur propre bordure orange arrondie : aucun
   border/border-radius/fond ne se rajoute en CSS, et `object-fit:contain`
   (pas `cover`) préserve ce cadrage sans le rogner. */
.tev-agence-hero__stack {
	position: relative; z-index: 1;
	width: 915px; max-width: calc(100% - 2 * var(--tev-gutter));
	margin-inline: auto;
	aspect-ratio: 915 / 448;
}
.tev-agence-hero__photo { position: absolute; inset: 0; margin: 0; transform-origin: 50% 50%; }
.tev-agence-hero__photo img { width: 100%; height: 100%; object-fit: contain; }
/* Photo choisie en back-office : format paysage du cadre visible de la maquette
   (922 × 438 dans agence-hero-3), bord orange 3 px et rayon 24 px mesurés sur l'export. */
.tev-agence-hero__photo.is-photo { display: flex; align-items: center; justify-content: center; }
.tev-agence-hero__photo.is-photo img { width: 93%; height: auto; aspect-ratio: 922 / 438; object-fit: cover; border: 3px solid var(--tev-orange); border-radius: 24px; }
.tev-agence-hero__spark { position: absolute; right: 4%; bottom: 4%; width: 90px; height: auto; color: var(--tev-orange); z-index: 3; }

/* --- introduction (suite de la bande orange) ------------------------------
   Texte centré en capitales, grisé au repos et blanchi mot à mot au
   défilement — exactement le traitement de l'accroche sous la bannière de
   l'accueil (`.tev-hero__lead`) : même couleur de départ, même transition,
   même moteur partagé `data-tev-reveal="scrub-words"` (app.js), qui anime
   chaque mot vers le crème. Poser ici une couleur déjà crème rendrait
   l'animation invisible (crème vers crème). */
/* ⚠️ Remontée d'1 px : la bannière et cette bande sont du MÊME orange, mais
   elles restent deux boîtes empilées. Sur un écran dont le rapport de pixels
   n'est pas entier (Retina, zoom du navigateur), leur jonction laisse passer
   un filet du fond de page — la « ligne de séparation bleue » signalée par
   Thomas le 22/09/2026, invisible en rendu à l'échelle 1. Le chevauchement
   supprime la couture sans rien décaler, le padding compensant le pixel. */
.tev-agence-intro { background: var(--tev-orange); padding-block: 41px 110px; margin-top: -1px; }
.tev-agence-intro__inner { max-width: 1030px; text-align: center; }
.tev-agence-intro__texte {
	font-family: var(--tev-font-title); font-size: 22px; line-height: 34px;
	text-transform: uppercase;
	color: rgba(251, 251, 251, .38);
}
.tev-agence-intro__texte .tev-word { transition: color .3s linear; }
.tev-agence-intro__texte strong { font-weight: inherit; color: inherit; }

/* --- chiffres clés & logos -------------------------------------------------
   Rien à ajouter : .tev-stats, .tev-stats__* et .tev-marquee* viennent de
   app.css (accueil), filtre noir et blanc des logos compris. */

/* --- notre ascension (montagne à jalons) ------------------------------------
   Maquette : la scène (titre + montagne) est sur un aplat bleu pâle à bord
   haut oblique, titre aligné au gutter ; le texte de conclusion est plus bas,
   sur fond blanc. */
/* Fond transparent, et non blanc : la section précédente (.tev-stats) se
   termine en biais — elle retire 42 px à droite — et un aplat blanc ici
   viendrait se peindre par-dessus ce que la diagonale a découpé. Le blanc du
   body donne exactement le même rendu sous la scène. */
.tev-montagne { background: transparent; padding-bottom: 120px; }

/* La scène remonte SOUS la diagonale des chiffres clés et porte le bord
   complémentaire (42 px à gauche → 0 à droite). Sans ça, une bande blanche
   apparaît entre les deux sections, d'autant plus large qu'on va vers la
   droite (signalé par Lisa, 16/09/2026). */
.tev-montagne__scene-wrap {
	--tev-bruit: .6;   /* Rectangle 58 de la maquette : 0,06 contre 0,08 ailleurs */
	position: relative; background: var(--tev-tint);
	margin-top: -42px;
	padding-block: 132px 80px; margin-bottom: 110px;
	clip-path: polygon(0 42px, 100% 0, 100% 100%, 0 100%);
}
.tev-montagne__vision {
	max-width: 860px; margin-bottom: 48px;
	font-size: 17px; line-height: 28px; color: var(--tev-blue);
}
.tev-montagne__vision strong { font-weight: 700; }
.tev-montagne__title { color: var(--tev-blue); }

.tev-montagne__scene { position: relative; width: 100%; max-width: 939px; margin: 60px auto 0; aspect-ratio: 939 / 504; }
.tev-montagne__svg { position: absolute; left: 0; top: 20.2%; width: 100%; height: 80%; color: var(--tev-blue); }

/* Fine ligne orange en travers de toute la largeur, au pied de la montagne. */
.tev-montagne__line {
	position: absolute; left: 0; right: 0; bottom: 172px; height: 1px;
	background: rgba(255, 85, 39, .45);
	transform: rotate(.6deg); transform-origin: left center;
}

/* Chaque jalon est ancré par le CENTRE de sa pastille (--mx / --my mesurés
   sur la maquette) ; le libellé se pose AU-DESSUS, centré sur elle. */
.tev-montagne__jalons { position: absolute; inset: 0; }
.tev-montagne__jalon {
	position: absolute; left: var(--mx, 50%); top: var(--my, 50%); width: 0; height: 0;
	opacity: 0; transform: translateY(14px);
}
.tev-montagne__point {
	position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
	width: 45px; height: 45px; display: grid; place-items: center;
}
.tev-montagne__point::before {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	background: var(--tev-orange); opacity: .28;
}
.tev-montagne__point span { position: relative; width: 24px; height: 24px; border-radius: 50%; background: var(--tev-orange); }
.tev-montagne__label {
	position: absolute; left: 0; bottom: 34px; transform: translateX(-50%); white-space: nowrap;
	font-family: var(--tev-font-body); font-weight: 700; font-size: 18px; line-height: 22px; color: var(--tev-orange);
}

/* Texte de conclusion : orange capitales, estompé au repos et révélé mot à
   mot au défilement (même moteur que l'accroche du hero, mais la couleur
   d'arrivée est l'orange — cf. data-tev-reveal-color dans le gabarit). */
.tev-montagne__texte {
	max-width: 1150px; margin-inline: auto; text-align: center;
	font-family: var(--tev-font-title); font-size: 22px; line-height: 34px;
	text-transform: uppercase; color: rgba(255, 85, 39, .38);
}
.tev-montagne__texte .tev-word { transition: color .3s linear; }
.tev-montagne__cta { display: flex; justify-content: center; margin-top: 56px; }

/* --- notre équipe ----------------------------------------------------------
   Aplat bleu à bord haut OBLIQUE (montant vers la droite) + grain, comme la
   maquette. Au repos la section ne montre que son titre : les photos
   n'apparaissent qu'au déplacement du curseur (traînée, agence.js).
   Sans pointeur fin (tactile), pas de traînée possible : les photos sont
   alors affichées en pile, sinon la section serait vide. */
.tev-equipe {
	position: relative; overflow: hidden;
	background: var(--tev-blue);
	padding-block: 150px 130px; min-height: 70vh;
	clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%);
}
.tev-equipe__inner { position: relative; z-index: 2; pointer-events: none; }
/* Largeur mesurée sur la maquette : 1094 px, de quoi tenir la première ligne
   d'un seul tenant. La phrase entre parenthèses y est à 22 px quand la
   première est à 26 px (relevé dans les surcharges de style du fichier). */
.tev-equipe__title { color: var(--tev-cream); text-align: center; max-width: 1100px; margin-inline: auto; }
.tev-equipe__title small { font-size: 22px; line-height: 28.6px; }

/* Traînée d'images au curseur : chaque photo apparaît à la position du
   curseur puis s'efface. `pointer-events:none` — le curseur personnalisé du
   site ne doit rien intercepter. */
.tev-equipe__trace {
	position: absolute; width: 240px; height: auto; z-index: 1;
	/* Format paysage imposé, celui de la maquette (320 × 202) : sans lui chaque
	   photo gardait les proportions de son fichier (retour client, 29/09/2026). */
	aspect-ratio: 320 / 202; object-fit: cover;
	border-radius: var(--tev-radius-img); pointer-events: none;
	opacity: 0; transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(.84);
	transition: opacity .4s var(--tev-ease), transform .45s var(--tev-ease);
	box-shadow: 0 18px 40px rgba(10, 16, 50, .3);
}
.tev-equipe__trace.is-on { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(1); }

/* Repli tactile : la pile de photos, visible seulement sans pointeur fin. */
.tev-equipe__repli { display: none; }
@media (hover: none), (pointer: coarse) {
	.tev-equipe { min-height: 0; }
	.tev-equipe__repli {
		display: flex; flex-direction: column; align-items: center; gap: 16px;
		margin-top: 56px; pointer-events: auto;
	}
	.tev-equipe__item { width: min(100%, 360px); border-radius: var(--tev-radius-img); overflow: hidden; }
	.tev-equipe__item img { width: 100%; height: auto; aspect-ratio: 320 / 202; object-fit: cover; display: block; }
	.tev-equipe__legend { display: flex; flex-direction: column; gap: 2px; color: var(--tev-cream); padding-top: 10px; }
	.tev-equipe__nom { font-family: var(--tev-font-title); font-size: 15px; text-transform: uppercase; }
	.tev-equipe__fonction { font-size: 13px; opacity: .85; }
}

/* --- citation ---------------------------------------------------------------
   Aplat bleu pâle, gros guillemet orange centré, texte bleu capitales révélé
   mot à mot au défilement. Aucune colonne de chiffres : celle du fichier
   Figma est un calque masqué (cf. le gabarit). */
.tev-citation { background: var(--tev-tint); padding-block: 130px 140px; }
.tev-citation__inner { position: relative; z-index: 1; text-align: center; }
.tev-citation__icon { width: 74px; height: auto; color: var(--tev-orange); margin: 0 auto 44px; }
.tev-citation__quote { margin: 0; }
.tev-citation__texte {
	max-width: 1200px; margin-inline: auto;
	font-family: var(--tev-font-title); font-size: 22px; line-height: 34px;
	text-transform: uppercase; color: rgba(59, 85, 199, .38);
}
.tev-citation__texte .tev-word { transition: color .3s linear; }

/* --- l'aventure 3Event (frise) ----------------------------------------------
   Photo en noir et blanc ; le curseur porte un cercle qui remet la couleur à
   l'endroit survolé (calque couleur découpé par clip-path, piloté en JS), et
   la légende dessous change selon l'objet pointé.

   La maquette prolonge le cadre orange de la photo par un ENCART BLANC collé
   dessous : le trait fait le tour des deux. Les deux visuels sont donc
   recadrés sans leur arrondi inférieur, et c'est l'encart qui porte les coins
   arrondis du bas. Aucun fond ni bordure n'est ajouté à la photo elle-même :
   elle porte déjà son cadre. */
.tev-frise { --tev-bruit: 1;   /* Rectangle 68 : 0,10, la zone la plus marquée */ position: relative; background: var(--tev-orange); padding-block: 110px 120px; overflow: clip; }
.tev-frise__title { color: var(--tev-cream); text-align: center; margin-bottom: 56px; }
/* Sous-titre facultatif : quand il est là, c'est lui qui porte la réserve sous le titre. */
.tev-frise__title:has(+ .tev-frise__sous-titre) { margin-bottom: 14px; }
.tev-frise__sous-titre { color: var(--tev-cream); text-align: center; font-family: var(--tev-font-body); font-weight: 600; font-size: 16px; line-height: 1.5; margin: 0 auto 48px; max-width: 640px; }

.tev-frise__bloc { position: relative; max-width: 1102px; margin-inline: auto; }

/* `aspect-ratio` : la place de la photo est réservée AVANT son chargement.
   Sans cela la scène mesure 0 px de haut tant que l'image différée n'est pas
   arrivée — le cercle du curseur n'a alors aucune surface à survoler, et les
   zones (exprimées en % de la hauteur) s'écrasent toutes en haut. Même piège
   que les cartes d'offres de l'accueil. */
.tev-frise__scene {
	/* z-index 1 : l'encart (z-index 2) doit RECOUVRIR le bas de la photo. */
	position: relative; z-index: 1; line-height: 0;
	aspect-ratio: 1102 / 496;
	/* La photo est coupée aux mêmes bords que l'encart (marges de `.tev-frise__legende`).
	   L'export Figma avait 4 px de marge transparente, la photo recadrée du 30/09/2026
	   n'en a aucune : sans cette coupe, sa première colonne de pixels dépasse du trait
	   orange sur les 79 px où l'encart la recouvre (trait sombre signalé le 02/10/2026). */
	clip-path: inset(0 .363% 0 .272%);
}
.tev-frise__photo { width: 100%; height: auto; display: block; }
.tev-frise__photo--couleur {
	position: absolute; inset: 0;
	opacity: 0; transition: opacity .25s var(--tev-ease);
	clip-path: circle(var(--tev-loupe, 120px) at var(--cx, -999px) var(--cy, -999px));
}
.tev-frise__scene.is-survol .tev-frise__photo--couleur { opacity: 1; }

/* Bascule orange → bleu pâle, oblique, exactement à la jonction photo/encart. */
.tev-frise__bas { position: relative; }
.tev-frise__fond {
	/* Aligné sur le haut de l'encart, qui remonte de 79 px sur la photo. */
	position: absolute; top: -79px; left: 50%; transform: translateX(-50%);
	width: 100vw; height: 1400px; z-index: 0;
	/* `--tev-tint` est un bleu TRANSLUCIDE (8 %) prévu pour se poser sur du
	   blanc : tel quel au-dessus de l'orange de la section, il ne change
	   quasiment rien. On le recompose donc sur un fond blanc opaque. */
	background-color: var(--tev-white);
	background-image: linear-gradient(var(--tev-tint), var(--tev-tint));
	clip-path: polygon(0 21px, 100% 0, 100% 100%, 0 100%);
}

.tev-frise__legende {
	position: relative; z-index: 2;
	/* Valeurs relevées sur la maquette (Rectangle 105 / texte 434:582) :
	   encart 1085 × 107, fond crème, trait orange de 4 px, arrondis de 30 px
	   EN BAS uniquement, et il RECOUVRE la photo de 79 px — il ne se pose pas
	   dessous. Texte Inter Bold Italic 20/24, bleu, centré. */
	/* L'export de la photo laisse 4 px de marge transparente avant son trait
	   orange (mesuré : trait à x 4-7 et 1093-1096 sur 1102). L'encart se rentre
	   donc d'autant, en POURCENTAGE pour rester aligné quand l'image se
	   redimensionne : 4/1102 et 5/1102. Sans cela les deux traits orange sont
	   décalés de 4 px à la jonction. */
	width: auto; margin: -79px .363% 0 .272%;   /* 1 px de plus de chaque côté
	   que la marge de l'export, pour recouvrir franchement le trait de la photo
	   et effacer le décrochement d'arrondi sous-pixel à la jonction. */
	padding: 0 40px; height: 107px;
	display: flex; align-items: center; justify-content: center; text-align: center;
	background: var(--tev-cream);
	border: 4px solid var(--tev-orange); border-top: 0;
	border-radius: 0 0 30px 30px;
	font-family: var(--tev-font-body); font-weight: 700; font-style: italic;
	font-size: 20px; line-height: 24px; color: var(--tev-blue);
}
/* Le fondu ne porte que sur le texte : sur l'encart, c'est la carte entière
   qui disparaissait à chaque changement de légende. */
.tev-frise__legende-texte { transition: opacity .25s var(--tev-ease); }
.tev-frise__legende-texte.is-change { opacity: 0; }

.tev-frise__spark { position: absolute; left: -12px; bottom: 74px; width: 96px; height: auto; color: var(--tev-orange); z-index: 3; }
.tev-frise__cta { position: relative; z-index: 1; display: flex; justify-content: center; margin-top: 88px; }

/* Pastilles tactiles : une par moment, posées sur la photo. Masquées dès
   qu'un pointeur fin est disponible, le survol prenant alors le relais. */
.tev-frise__points { position: absolute; inset: 0; z-index: 3; display: none; }
.tev-frise__point {
	position: absolute; left: var(--zx, 50%); top: var(--zy, 50%);
	transform: translate(-50%, -50%);
	width: 26px; height: 26px; padding: 0; border-radius: 50%;
	background: var(--tev-orange); border: 3px solid var(--tev-cream);
	box-shadow: 0 4px 12px rgba(10, 16, 50, .35);
	transition: transform .25s var(--tev-ease);
}
.tev-frise__point.is-active { transform: translate(-50%, -50%) scale(1.3); }

@media (hover: none), (pointer: coarse) {
	.tev-frise__points { display: block; }
	/* Le cercle de couleur reste : c'est la pastille touchée qui le déplace. */
	.tev-frise__photo--couleur { opacity: 1; }
}

/* --- engagement responsable --------------------------------------------------
   UNE carte bleue à deux colonnes : photo à gauche, texte et pastilles à
   droite. Le fond de la section passe du bleu pâle (suite de la frise) au
   blanc par une oblique qui coupe la carte à mi-hauteur.
   ⚠️ La photo exportée porte déjà son cadrage arrondi, le filigrane 3Event et
   l'éclair orange : aucun cadre ni ombre ajouté ici. */
.tev-engagement {
	position: relative; padding-block: 110px 130px;
	background-color: var(--tev-white);
	background-image: linear-gradient(var(--tev-tint), var(--tev-tint));
}
.tev-engagement__fond {
	position: absolute; left: 0; right: 0; top: 46%; bottom: 0;
	background: var(--tev-white);
	clip-path: polygon(0 7px, 100% 0, 100% 100%, 0 100%);
}
.tev-engagement__inner { position: relative; z-index: 1; }

.tev-engagement__carte {
	display: grid; grid-template-columns: 470px 1fr; gap: 40px;
	align-items: center;
	max-width: 1072px; margin-inline: auto; padding: 30px;
	background: var(--tev-blue); border-radius: 40px;
	box-shadow: 0 30px 60px rgba(15, 20, 60, .18);
}
.tev-engagement__media { position: relative; z-index: 1; line-height: 0; }
.tev-engagement__media img { width: 100%; height: auto; display: block; }

.tev-engagement__texte { position: relative; z-index: 1; color: var(--tev-cream); padding-right: 40px; }
.tev-engagement__title { color: var(--tev-cream); margin-bottom: 26px; }
.tev-engagement__lead { font-size: 16px; line-height: 26px; margin-bottom: 30px; }
.tev-engagement__tags { gap: 10px; }

/* --- photo pleine largeur ----------------------------------------------------- */
.tev-agence-photo { display: block; aspect-ratio: 1440 / 583; }
.tev-agence-photo img { width: 100%; height: 100%; object-fit: cover; }

/* --- petit écran --------------------------------------------------------------- */
/* --- écrans moyens et petits --------------------------------------------------
   Aucune maquette n'existe en dessous de 1440 (les huit frames du fichier y
   sont toutes) : ces adaptations sont donc des choix d'intégration, pas une
   reprise. Les gutters et le menu burger viennent d'app.css (1439 / 1024). */

@media (max-width: 1439px) {
	.tev-agence-hero { padding-top: 140px; }
	.tev-engagement__carte { gap: 32px; padding: 26px; }
}

@media (max-width: 1200px) {
	.tev-agence-hero__title { font-size: 32px; line-height: 38px; }
	.tev-agence-intro__texte,
	.tev-montagne__texte,
	.tev-citation__texte { font-size: 20px; line-height: 30px; }
	.tev-engagement__carte { grid-template-columns: minmax(0, 40%) 1fr; }
	.tev-engagement__texte { padding-right: 0; }
}

@media (max-width: 1024px) {
	.tev-agence-hero { padding-top: 120px; }
	.tev-agence-hero__title { font-size: 28px; line-height: 34px; }
	.tev-agence-hero__deco--right { width: 200px; }
	.tev-agence-hero__deco--left { width: 190px; left: -80px; }

	.tev-agence-intro { padding-block: 32px 80px; }
	.tev-agence-intro__texte,
	.tev-montagne__texte,
	.tev-citation__texte { font-size: 18px; line-height: 27px; }

	.tev-montagne__scene-wrap { padding-block: 70px 60px; margin-bottom: 80px; }
	.tev-montagne__vision { font-size: 16px; line-height: 26px; margin-bottom: 36px; }
	.tev-montagne__label { font-size: 14px; line-height: 18px; }
	.tev-montagne__point { width: 34px; height: 34px; }
	.tev-montagne__point span { width: 18px; height: 18px; }
	.tev-montagne__label { bottom: 28px; }

	.tev-equipe { padding-block: 110px 90px; }

	.tev-citation { padding-block: 90px 100px; }
	.tev-citation__icon { width: 58px; margin-bottom: 32px; }

	.tev-frise { padding-block: 90px; }
	/* Le recouvrement de l'encart suit la largeur (donc la taille de l'image)
	   au lieu d'être figé à 79 px : une marge en % se calcule sur la largeur du
	   conteneur, et l'image garde son ratio. 79 / 1102 = 7,17 %. */
	.tev-frise__legende { height: auto; min-height: 88px; padding: 22px 28px; font-size: 18px; margin-top: -7.17%; }
	.tev-frise__fond { top: -7.17%; }
	.tev-frise__spark { width: 72px; bottom: 60px; }
	.tev-frise__cta { margin-top: 64px; }

	.tev-engagement { padding-block: 90px 100px; }
	.tev-engagement__carte { grid-template-columns: 1fr; gap: 28px; padding: 24px; border-radius: 30px; }
	.tev-engagement__fond { top: 52%; }
}

@media (max-width: 768px) {
	.tev-agence-hero__title { font-size: 24px; line-height: 30px; }
	.tev-agence-hero__ctas { gap: 12px; margin-bottom: 56px; }
	.tev-agence-hero__photo-zone { padding-bottom: 80px; }

	/* La montagne ne tient plus ses trois jalons en absolu : les libellés se
	   chevaucheraient. Ils passent en liste sous l'illustration, la pastille
	   devant chaque intitulé. */
	.tev-montagne__scene { aspect-ratio: auto; margin-top: 40px; }
	.tev-montagne__svg { position: static; width: 100%; height: auto; }
	.tev-montagne__jalons {
		position: static; display: flex; flex-direction: column; gap: 14px;
		margin-top: 28px; align-items: flex-start;
	}
	.tev-montagne__jalon {
		position: static; width: auto; height: auto;
		display: flex; align-items: center; gap: 12px;
		opacity: 1; transform: none;
	}
	/* `position: relative` : sans repère positionné, le halo (::before, inset:0)
	   s'étirerait sur tout l'ancêtre et deviendrait une ellipse derrière le
	   libellé. `order: -1` remet la pastille avant l'intitulé. */
	.tev-montagne__point { position: relative; transform: none; flex: 0 0 auto; order: -1; }
	.tev-montagne__label { position: static; transform: none; white-space: normal; text-align: left; }
	.tev-montagne__line { display: none; }

	.tev-frise__legende { font-size: 16px; line-height: 22px; min-height: 76px; }
	.tev-equipe__title { font-size: 22px; line-height: 28px; }
	.tev-equipe__title small { font-size: 18px; line-height: 24px; }
	.tev-engagement__title { font-size: 22px; line-height: 28px; }
}

@media (max-width: 480px) {
	.tev-agence-hero { padding-top: 104px; }
	.tev-agence-hero__title { font-size: 21px; line-height: 27px; }
	.tev-agence-hero__ctas { flex-direction: column; align-items: stretch; }
	.tev-agence-hero__ctas .tev-btn { justify-content: center; }

	.tev-agence-intro__texte,
	.tev-montagne__texte,
	.tev-citation__texte { font-size: 16px; line-height: 24px; }

	.tev-montagne__label { font-size: 13px; line-height: 17px; }
	.tev-frise__legende { padding: 18px 20px; font-size: 15px; }
	.tev-frise__spark { display: none; }
	.tev-engagement__carte { padding: 18px; border-radius: 24px; }
	.tev-engagement__title, .tev-equipe__title { font-size: 19px; line-height: 25px; }
	.tev-equipe__title small { font-size: 16px; line-height: 21px; }
}


/* --- ajustements mobile -------------------------------------------------------
   Passe faite en regardant chaque section à 390 px. */
@media (max-width: 768px) {
	/* Les chiffres clés viennent du composant de l'accueil : sur un écran
	   étroit, son titre de 36 px et ses valeurs alignées à droite tiennent mal. */
	.tev-stats { padding-block: 90px 70px; }
	.tev-stats__title { font-size: 26px; line-height: 32px; }
	.tev-stats__picto { width: 46px; height: 44px; }
	.tev-stats__picto svg { width: 30px; height: 18px; }
	.tev-stats__inner { gap: 40px; }
	.tev-marquee { margin-top: 36px; }
	.tev-stats__item { align-items: flex-start; text-align: left; padding-block: 16px; }
	.tev-stats__value { font-size: 40px; line-height: 44px; }
	.tev-stats__label { font-size: 17px; line-height: 20px; }

	/* La pile du hero gagne en largeur : le gutter de 32 px la rétrécissait à
	   326 px, pour une photo haute de 160 px à peine. */
	.tev-agence-hero__stack { max-width: calc(100% - 32px); }
	.tev-agence-hero__photo-zone { padding-bottom: 64px; }

	.tev-agence-intro { padding-block: 28px 64px; }
	.tev-agence-intro__texte { font-size: 16px; line-height: 24px; }

	.tev-montagne__scene-wrap { padding-block: 56px 48px; margin-bottom: 64px; }
	.tev-montagne { padding-bottom: 80px; }
	.tev-montagne__cta { margin-top: 40px; }

	.tev-equipe { padding-block: 90px 70px; }
	.tev-citation { padding-block: 70px 80px; }
	.tev-frise { padding-block: 70px 80px; }
	.tev-frise__cta { margin-top: 48px; }
	.tev-engagement { padding-block: 70px 80px; }
}

/* Sans souris, « survolez la photo » n'a aucun sens : la mention disparaît. */
@media (hover: none), (pointer: coarse) {
	.tev-equipe__title small { display: none; }
}

/* --- mouvement réduit ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.tev-montagne__jalon { opacity: 1; transform: none; }
}