/* ============================================================================
   POLICE — Plus Jakarta Sans, auto-hébergée
   ----------------------------------------------------------------------------
   Choix PROVISOIRE de Paul (2026-09-22, « pour l'instant »).

   ⚠ /mnt/data/sites/CLAUDE.md §3 range « Plus Jakarta Sans comme police unique
   titres + texte » parmi les signatures d'Opéra à ne jamais reprendre. Paul a
   donné son feu vert en connaissance de cause le même jour. Consigné dans
   DECISIONS.md. À rouvrir au moment d'arrêter la typographie définitive.

   R11.3 : auto-hébergée en woff2, jamais Google Fonts en CDN (RGPD), avec un
   repli aux métriques ajustées pour que la substitution ne décale rien (CLS).
   ========================================================================== */

@font-face {
	font-family: "Plus Jakarta Sans";
	src: url("../fonts/plus-jakarta-sans-vf.woff2") format("woff2-variations");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

/* Repli calé sur Arial, métriques reprises du site étalon : la page ne bouge pas
   quand la police variable arrive. */
@font-face {
	font-family: "Jakarta secours";
	src: local("Arial"), local("Helvetica"), local("Liberation Sans");
	size-adjust: 104%;
	ascent-override: 102%;
	descent-override: 22%;
	line-gap-override: 0%;
}

/* ============================================================================
   SALYS — base structurelle
   ----------------------------------------------------------------------------
   ⚠ CE FICHIER NE PORTE AUCUNE DIRECTION ARTISTIQUE.

   Les polices, la palette, les rapports de l'échelle typographique et le
   mouvement sont VOLONTAIREMENT provisoires et neutres : ils seront remplacés
   par la direction retenue à l'étape 4 du workflow (/mnt/data/sites/CLAUDE.md §4).

   Ce qui EST définitif ici, parce que ce sont des règles de niveau et non de
   style (QUALITY-STANDARDS.md) :
     R1.3  le corps ne descend jamais sous 16 px
     R2.1  text-wrap: balance sur les titres
     R2.2  text-wrap: pretty sur les paragraphes
     R3.1  toute colonne de texte est plafonnée sous 75 caractères
     R4.1  une seule cadence de section, fluide
     R5.1  un conteneur, une gouttière, définis une seule fois
     R5.2  gouttière ≥ 20 px à 390 px
     R5.3  les grilles tombent sans media query
     R5.4  zéro débordement horizontal
     R9.2  focus clavier : outline 2 px avec décalage, via :focus-visible
     R9.3  cible tactile ≥ 44 px
   ========================================================================== */

:root {
	/* --- Échelle typographique : NOMS définitifs, VALEURS provisoires ------
	   Les rapports seront recalés par la direction retenue (R1.2 : entre 1,25
	   et 1,6 entre degrés voisins, h1/corps ≥ 3). */
	--t-0: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem);
	--t-1: clamp(1.75rem, 1.25rem + 2.1vw, 2.5rem);
	--t-2: clamp(1.3rem, 1.1rem + .9vw, 1.6rem);
	--t-3: 1.2rem;
	--t-chapo: clamp(1.05rem, 1rem + .4vw, 1.25rem);
	--t-corps: 1.0625rem;  /* 17 px — R1.3 : jamais sous 16 px */
	--t-petit: .875rem;    /* 14 px — plancher pour un texte lu (R1.5) */
	--t-label: .75rem;     /* 12 px — capitales espacées UNIQUEMENT (R1.5) */

	/* --- Mise en page : définis une seule fois (R5.1) --------------------- */
	--largeur: 82.5rem;   /* en rem : suit l'agrandissement de la racine (R5.5) */
	--gouttiere: clamp(1.25rem, .6rem + 3.2vw, 4rem);  /* ≥ 20 px à 390 px (R5.2) */
	--section: clamp(3.5rem, 2rem + 5vw, 7rem);        /* une seule cadence (R4.1) */
	--colonne-texte: 36rem;                            /* plafond de ligne (R3.1) */

	/* --- Couleur : NEUTRE ET PROVISOIRE ----------------------------------
	   Des gris volontairement sans caractère, pour qu'aucune décision de
	   palette ne soit prise ici. La direction retenue les remplacera.
	   Contrastes vérifiés malgré tout : encre/fond 16,1:1, atténué/fond 5,7:1. */
	--fond: #ffffff;
	--papier: #eef1f8;      /* fond clair du CORPS de page */
	/* Premier écran : le bleu nuit domine, le blanc n'est qu'une touche. */
	--nuit-fond: #0A1330;
	--nuit-profond: #050B22;
	--encre-claire: #FFFFFF;
	--texte-clair: #C3CEEE;
	--nuit: #141F4B;        /* bleu nuit — encre et aplats profonds */
	--nuit-uni: #0B1437;    /* 2026-09-23 : UN seul bleu nuit pour les problèmes et le passage */
	--majorelle: #4B3FD0;   /* conservé pour compatibilité, plus employé comme accent */
	/* ⚠ L'ACCENT est désormais le bleu RELEVÉ SUR LE LOGO, pas un Majorelle de
	   catalogue : #1332FF est l'arc électrique mesuré sur Logo-Linkedin.png.
	   #01043E en est le halo, #000004 le fond profond. */
	--bleu-logo: #1332FF;
	--bleu-halo: #01043E;
	--bleu-fond: #000004;
	/* ⚠ Séquence INVERSÉE le 2026-09-22 (soir) : le fond du premier écran reste
	   en place, les lettres s'y dessinent en BLANC, et l'on débouche sur une page
	   blanche à texte sombre. Il n'y a donc plus d'écran blanc intermédiaire. */
	--lettres: #FFFFFF;
	--arrivee: #FFFFFF;
	--arrivee-encre: #141F4B;
	--encre: #141F4B;
	--attenue: #555F7D;
	--filet: #d8dde9;

	/* --- Mouvement : aucune animation dans cette base --------------------- */
	--duree-ui: 200ms;
	--courbe: cubic-bezier(.4, 0, .2, 1);
}

/* ============================================================================
   GRANDS ÉCRANS — R5.5
   ----------------------------------------------------------------------------
   Au-delà de 1680 px, on agrandit la RACINE par paliers. Tout ce qui est exprimé
   en rem suit : tailles, espaces, conteneur. Le texte reste net et les media
   queries restent justes.

   `zoom` et `transform: scale()` sont INTERDITS sur la mise en page : `zoom`
   fausse les media queries, `scale()` rend le texte flou par interpolation.
   (Le registre des erreurs #18 décrit un correctif par `zoom` sur Pleuven ;
   QUALITY-STANDARDS R5.5, constitué après, tranche dans l'autre sens.)

   Paliers repris d'Opéra, qui les a mesurés.
   ========================================================================== */

@media (min-width: 1680px) { :root { font-size: 106.25%; } }
@media (min-width: 1920px) { :root { font-size: 112.5%;  } }
@media (min-width: 2200px) { :root { font-size: 125%;    } }
@media (min-width: 2560px) { :root { font-size: 137.5%;  } }

/* --- Socle ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	/* Pile système : provisoire. La direction retenue apportera ses polices,
	   auto-hébergées en woff2 (R11.3) — jamais Google Fonts en CDN. */
	font-family: "Plus Jakarta Sans", "Jakarta secours", system-ui, sans-serif;
	font-size: var(--t-corps);
	line-height: 1.65;
	color: var(--encre);
	background: var(--fond);
	/* clip et non hidden : hidden casserait position: sticky (R5.4). */
	overflow-x: clip;
}

h1, h2, h3, h4 {
	margin: 0;
	line-height: 1.15;
	text-wrap: balance;      /* R2.1 */
	font-weight: 600;
}

p { margin: 0; text-wrap: pretty; }   /* R2.2 */

ul { margin: 0; padding: 0; list-style: none; }

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

/* Focus clavier — R9.2. Jamais supprimé, 2 px avec décalage, via :focus-visible
   pour ne pas l'afficher à la souris. */
:focus-visible {
	outline: 2px solid var(--encre);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Lien d'évitement — R12.2 : premier élément focusable de la page. */
.evitement {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: .75rem 1rem;
	background: var(--fond);
	border: 1px solid var(--encre);
}
.evitement:focus { left: var(--gouttiere); top: .5rem; }

/* --- Conteneur et rythme -------------------------------------------------- */

.conteneur {
	width: 100%;
	max-width: var(--largeur);
	margin-inline: auto;
	padding-inline: var(--gouttiere);
}

.section { padding-block: var(--section); }

/* R4.2 : l'espace au-dessus d'un titre est supérieur à celui au-dessous —
   le titre appartient au texte qui le suit. */
.section > .conteneur > h2 { margin-block: 0 1.25rem; }
.surtitre + h1, .surtitre + h2 { margin-top: .5rem; }

/* --- Échelle appliquée ---------------------------------------------------- */

.t-0 { font-size: var(--t-0); max-width: 16em; }  /* R2.4 : plafond en em */
.t-1 { font-size: var(--t-1); max-width: 18em; }
.t-2 { font-size: var(--t-2); }
.t-3 { font-size: var(--t-3); }

.surtitre {
	font-size: var(--t-label);
	text-transform: uppercase;
	letter-spacing: .14em;   /* R1.4 : les capitales se desserrent */
	font-weight: 600;
	color: var(--attenue);
	margin: 0;
}

/* R3.1 : toute colonne de texte courant est plafonnée. C'est le défaut le plus
   courant des thèmes génériques, et il suffit d'une max-width pour l'éliminer. */
.chapo, .intro, .prose, .prose p, .cas__item, .duo__part, .question__corps {
	max-width: var(--colonne-texte);
}

.chapo { font-size: var(--t-chapo); margin-top: 1rem; }
.intro { color: var(--attenue); margin-top: 1rem; }

.prose > * + * { margin-top: 1rem; }
.prose { margin-top: 1.5rem; }

/* --- En-tête -------------------------------------------------------------- */

.entete { border-bottom: 1px solid var(--filet); }

.entete__barre {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	align-items: center;
	justify-content: space-between;
	min-height: 4rem;
	padding-block: .75rem;
}

.entete__marque { font-weight: 700; text-decoration: none; }

.nav__liste { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }

/* R9.3 : cible tactile ≥ 44 px, obtenue par le remplissage. */
.nav__liste a,
.pied__nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: var(--t-petit);
	text-decoration: none;
	color: var(--attenue);
}
.nav__liste a:hover, .pied__nav a:hover { color: var(--encre); }

/* --- Actions -------------------------------------------------------------- */

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	align-items: center;
	margin-top: 2rem;
}

.bouton {
	display: inline-flex;
	align-items: center;
	min-height: 44px;          /* R9.3 */
	padding: .75rem 1.5rem;
	background: var(--encre);
	color: var(--fond);
	text-decoration: none;
	font-weight: 600;
	border-radius: 2px;
	transition: background var(--duree-ui) var(--courbe);
}
.bouton:hover { background: #000; }

.lien-souligne {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
	border-bottom: 1px solid var(--filet);
	transition: border-color var(--duree-ui) var(--courbe);
}
.lien-souligne:hover { border-color: var(--encre); }

/* --- Ce qu'on construit --------------------------------------------------- */

.domaine { margin-top: 3rem; }
.domaine > h3 { padding-bottom: .5rem; border-bottom: 1px solid var(--filet); }

.cas { margin-top: 1.5rem; display: grid; gap: 1.5rem; }

.cas__item { padding-left: 1rem; border-left: 2px solid var(--filet); }
.cas__probleme { color: var(--attenue); }
.cas__reponse { margin-top: .5rem; font-weight: 600; }

/* --- Duo : R5.3, la grille tombe d'elle-même, sans media query ------------ */

.duo {
	margin-top: 2rem;
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}
.duo__part > p { margin-top: .75rem; }

/* --- Fondateurs ----------------------------------------------------------- */

.fondateurs {
	margin-top: 2rem;
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
.fondateur__role { color: var(--attenue); margin-top: .25rem; }

/* --- Questions : <details> natifs ----------------------------------------- */

.questions { margin-top: 2rem; display: grid; }

.question { border-bottom: 1px solid var(--filet); }

.question__titre {
	display: flex;
	align-items: center;
	min-height: 44px;          /* R9.3 */
	padding-block: .75rem;
	font-size: var(--t-2);
	font-weight: 600;
	cursor: pointer;
}

.question__corps { padding-bottom: 1rem; }

/* --- Pied de page --------------------------------------------------------- */

.pied {
	border-top: 1px solid var(--filet);
	padding-block: var(--section);
}
.pied__grille { display: grid; gap: 1rem; }
.pied__marque { font-weight: 700; }
.pied__nav ul { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.pied__mention { font-size: var(--t-petit); color: var(--attenue); }

/* --- Mode recette — R12.7 -------------------------------------------------
   Les champs à confirmer sont MASQUÉS par défaut : une capture de validation ne
   doit jamais montrer un encadré de relecture, et on ne comble jamais un trou
   avec du texte plausible. Visibles uniquement sur ?notes. */

.a-confirmer { display: none; }

body.recette .a-confirmer {
	display: block;
	max-width: var(--colonne-texte);
	margin-top: 1rem;
	padding: .75rem 1rem;
	font-size: var(--t-petit);
	color: #7a3b12;
	background: #fdf6ee;
	border: 1px dashed #c8874a;
}

/* --- Mouvement réduit — R8.2 ----------------------------------------------
   Cette base n'anime rien ; la règle balai est posée d'emblée pour que la
   direction retenue ne puisse pas l'oublier. Elle laisse l'état FINAL visible :
   couper une animation en laissant l'opacité à zéro rend la page blanche. */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================================
   PREMIER ÉCRAN
   ----------------------------------------------------------------------------
   Registre : fond clair, touches de bleu nuit et de bleu Majorelle.
   Direction dictée par Paul le 2026-09-22 (voir DECISIONS.md).

   Trois exigences structurent tout ce bloc :
     §7.1  rien n'est masqué sans JavaScript — le texte du premier écran est
           dans le HTML, visible, et ne dépend d'aucune classe posée par script ;
     R7.4  le voile garantit le contraste, le fond animé ne le garantit jamais ;
     R4.3  la hauteur est en svh, jamais en vh (sinon rognage sur iOS).
   ========================================================================== */

.hero {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 100svh;              /* R4.3 */
	padding-block: 7rem 4rem;        /* place sous le header flottant */
	/* ⚠ L'en-tête flottante se REPLIE sous 900 px : mesurée à 94 px au-dessus,
	   puis 146 px, 190 px et 234 px selon le nombre de rangs. À 7 rem de marge
	   (112 px), elle recouvrait la pilule de réassurance et le haut du titre à
	   tous les paliers en dessous de 900 px. */
	padding-inline: var(--gouttiere);
	overflow: clip;
	isolation: isolate;
}

/* Fond de repli, TOUJOURS peint. Le canvas WebGL vient par-dessus s'il se monte ;
   s'il échoue, c'est ce dégradé CSS qui reste — le premier écran ne dépend de rien. */
.hero__fond {
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(90rem 60rem at 80% 12%, rgb(19 50 255 / .42), transparent 58%),
		radial-gradient(74rem 54rem at 8% 90%, rgb(1 4 62 / .50), transparent 58%),
		radial-gradient(66rem 48rem at 52% 46%, rgb(62 87 196 / .30), transparent 68%),
		#C3CFF0;
}

.hero__fond .gradient__toile {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* R7.4 — voile clair sous le texte. Le dégradé animé déplace ses aplats bleus :
   sans voile, le contraste du titre dépendrait de la position des vagues à
   l'instant du rendu. Avec, il est garanti quelle que soit l'image. */
.hero__voile {
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Voile RESSERRÉ plutôt qu'élargi : très présent là où le texte se pose,
	   absent partout ailleurs. Un voile large et doux garantissait bien le
	   contraste, mais délavait tout l'écran — le fond paraissait fade. Un voile
	   étroit laisse le bleu électrique occuper le reste du premier écran.
	   Mesuré : voile large .92 → titre à 7,5:1 mais fond délavé ;
	            voile allégé     → 2,41:1, ÉCHEC ;
	            voile resserré   → valeur reportée dans DECISIONS.md. */
	background:
		radial-gradient(62rem 25rem at 50% 50%,
			rgb(247 249 255 / .97) 0%,
			rgb(247 249 255 / .94) 38%,
			rgb(247 249 255 / .55) 62%,
			rgb(247 249 255 / 0) 82%);
}

.hero__contenu {
	position: relative;
	width: 100%;
	max-width: 74rem;
	margin-inline: auto;
	text-align: center;
}

.hero__surtitre {
	font-size: var(--t-label);
	text-transform: uppercase;
	letter-spacing: .16em;
	font-weight: 600;
	color: var(--majorelle);
}

.hero__titre {
	position: relative;
	margin-top: 0;
	font-size: clamp(1.72rem, .78rem + 4.6vw, 4.25rem);  /* min recalé : le cadre penché ajoute de la largeur, on repassait à 4 lignes à 390 (R2.4) */
	line-height: 1.06;
	letter-spacing: -.028em;        /* R1.4 : négative sur les grands titres seulement */
	font-weight: 700;
	color: var(--nuit);
	max-width: 17em;                /* R2.4 : plafond en em, calibré pour 2 lignes à 1440 */
	margin-inline: auto;
	text-wrap: balance;
}

.hero__chapo {
	margin: 1.5rem auto 0;
	/* Plafond en em et non en rem : il suit la taille du chapô lui-même, donc le
	   nombre de caractères par ligne reste constant à toutes les échelles de
	   racine. En rem, le chapô repassait à 3 lignes à 2560 px. R3.1. */
	max-width: 31em;
	font-size: var(--t-chapo);
	/* Encre soutenue et non gris-bleu : mesuré, #3A4468 tombait à 4,15:1 sur les
	   aplats clairs du dégradé animé. R6.1. */
	color: #1E2950;
	font-weight: 500;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	margin-top: 2.5rem;
}

/* --- Boutons du premier écran --------------------------------------------
   R9.6 : le survol comporte DEUX signaux, dont un mouvement — la flèche glisse.
   R8.1 : on n'anime que transform, opacity et des couleurs. Jamais de géométrie. */

.hero__actions .bouton {
	gap: .6rem;
	padding: .95rem 1.6rem;
	min-height: 52px;               /* R9.3 : ≥ 44 px */
	border-radius: 999px;
	font-size: 1rem;
	letter-spacing: -.005em;
	transition:
		background var(--duree-ui) var(--courbe),
		color var(--duree-ui) var(--courbe),
		border-color var(--duree-ui) var(--courbe),
		box-shadow var(--duree-ui) var(--courbe),
		transform var(--duree-ui) var(--courbe);
}

.bouton__fleche {
	flex: none;
	transition: transform 320ms var(--courbe);
}

.bouton--principal {
	background: var(--nuit);
	color: #fff;
	border: 1px solid var(--nuit);
	box-shadow: 0 1px 2px rgb(20 31 75 / .18);
}
.bouton--principal:hover {
	background: var(--majorelle);
	border-color: var(--majorelle);
	box-shadow: 0 6px 20px rgb(75 63 208 / .28);
}
.bouton--principal:hover .bouton__fleche { transform: translateX(4px); }

.bouton--second {
	background: rgb(255 255 255 / .72);
	color: var(--nuit);
	border: 1px solid rgb(20 31 75 / .18);
	backdrop-filter: blur(8px);
}
.bouton--second:hover {
	background: #fff;
	border-color: var(--nuit);
}
.bouton--second:hover .bouton__fleche { transform: translateX(4px); }

.hero__actions .bouton:active { transform: scale(.985); }

/* --- En-tête flottante ----------------------------------------------------
   Transparente, détachée du bord, de largeur contenue — pas une barre pleine
   largeur collée en haut. */

.entete {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	border: 0;
	padding: 1rem var(--gouttiere);
	pointer-events: none;           /* seule la pilule capte les clics */
}

.entete__barre {
	pointer-events: auto;
	width: 100%;
	max-width: 76rem;
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 2rem;
	align-items: center;
	justify-content: space-between;
	min-height: 0;
	padding: .5rem .75rem .5rem 1.25rem;
	border-radius: 999px;
	background: rgb(255 255 255 / .60);
	border: 1px solid rgb(255 255 255 / .70);
	box-shadow: 0 1px 2px rgb(20 31 75 / .06), 0 8px 28px rgb(20 31 75 / .07);
	backdrop-filter: blur(14px) saturate(140%);
}

.entete__marque {
	display: inline-flex;
	align-items: center;
	min-height: 44px;               /* R9.3 — mesuré à 28 px avant correction */
	padding-inline: .25rem;
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: -.01em;
	color: var(--nuit);
	text-decoration: none;
}

.entete .nav__liste a {
	min-height: 44px;               /* R9.3 */
	padding-inline: .75rem;
	font-size: .9375rem;
	color: #3A4468;
	border-radius: 999px;
	transition: background var(--duree-ui) var(--courbe), color var(--duree-ui) var(--courbe);
}
.entete .nav__liste a:hover {
	color: var(--nuit);
	background: rgb(20 31 75 / .06);
}

/* Sous 640 px la pilule serait trop chargée : la navigation passe sous la marque,
   centrée, et garde ses cibles de 44 px. */
@media (max-width: 640px) {
	.entete__barre { justify-content: center; padding-inline: 1rem; }
	.nav__liste { gap: 0 .25rem; }
	.entete .nav__liste a { padding-inline: .5rem; font-size: .875rem; }
}

/* R10.4 — la mise en page s'adapte aussi à la HAUTEUR. Sur un portable 13", le
   premier écran doit tenir, boutons compris. */
@media (max-height: 800px) {
	.hero { padding-block: 6rem 3rem; }
	.hero__titre { font-size: clamp(2rem, 1rem + 3.4vw, 3.25rem); }
	.hero__chapo { margin-top: 1.1rem; }
	.hero__actions { margin-top: 1.75rem; }
}

/* Bouton rendu en recette seulement, sans destination réelle. Visuellement
   identique, mais signalé en recette pour qu'on ne l'oublie pas. */
body.recette .bouton--inerte { position: relative; }
body.recette .bouton--inerte::after {
	content: "sans destination";
	position: absolute;
	top: -1.6rem; left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	font-size: .6875rem;
	letter-spacing: .04em;
	color: #7a3b12;
}

/* --- Marque de l'en-tête : monogramme + mot ------------------------------- */

.entete__marque {
	gap: .6rem;
	font-size: 1rem;
}

/* Le PNG sert de MASQUE : la couleur vient du fond, le fichier ne donne que la
   forme. Un logo blanc resterait invisible sur l'en-tête claire. */
.entete__monogramme {
	flex: none;
	width: 42px;
	height: 29px;
	background: var(--nuit);
	-webkit-mask: url("../img/monogramme.svg") no-repeat center / contain;
	mask: url("../img/monogramme.svg") no-repeat center / contain;
}

.entete__mot {
	font-weight: 800;
	font-size: 1.0625rem;
	letter-spacing: .14em;          /* R1.4 : les capitales se desserrent */
	text-transform: uppercase;
	color: var(--nuit);
}

/* Le premier écran n'a plus de sur-titre : le titre ouvre la page. */
.hero__titre { margin-top: 0; }

/* Titres en Plus Jakarta Sans, graisse haute — registre demandé par Paul. */
.hero__titre { font-weight: 800; letter-spacing: -.035em; }

/* --- Verbe qui défile dans la promesse ------------------------------------
   Le créneau est une grille dont toutes les cellules sont superposées : sa
   largeur est celle du verbe le plus large, obtenue sans mesure et sans jamais
   animer une géométrie (R8.1). Les verbes montent, comme demandé. */

.rot {
	display: inline-grid;
	justify-items: center;
	vertical-align: baseline;
	/* `clip` et non `hidden` : même rognage sans créer de conteneur de
	   défilement. Les verbes en attente dépassaient sous le créneau. */
	overflow: clip;
	padding-block: .08em;
	margin-block: -.08em;
}

.rot__mot {
	grid-area: 1 / 1;
	white-space: nowrap;
	color: var(--majorelle);
	opacity: 0;
	transform: translateY(1.35em);
	transition: transform 560ms var(--courbe), opacity 380ms var(--courbe);
}

.rot__mot.est-actif   { opacity: 1; transform: translateY(0); }
.rot__mot.est-sortant { opacity: 0; transform: translateY(-1.35em); }

/* Sans JavaScript, c'est ce mot-là qui reste — il est déjà dans le HTML. */
.hero__titre > .rot:not([aria-hidden]) { color: var(--majorelle); }

@media (prefers-reduced-motion: reduce) {
	.rot__mot { transition: none; }
}

/* ============================================================================
   IDENTITÉ — le monogramme comme motif
   ----------------------------------------------------------------------------
   Module A6 du référentiel (« trait qui se dessine », `clip-path` et non
   `stroke-dasharray`), copié puis réaccordé aux valeurs du projet, comme le
   demande /mnt/data/sites/CLAUDE.md §2.

   Réaccord : durée portée de 1,25 s à 1,6 s et courbe conservée — le registre
   voulu est « ça se dessine sans qu'on le remarque », pas un effet.

   Le monogramme est un PNG blanc sur transparent : il sert de MASQUE, la couleur
   vient du fond. Même technique que dans l'en-tête, donc un seul fichier partout.
   ========================================================================== */

:root {
	--a6-duree: 1.6s;
	--a6-pas: 110ms;
	--a6-retard: 0ms;
	--a6-courbe: cubic-bezier(.22, .8, .2, 1);
}

@keyframes a6-trait-h { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }

.js .a6--auto .a6__trait {
	animation: a6-trait-h var(--a6-duree) var(--a6-courbe) both;
	animation-delay: calc(var(--i, 0) * var(--a6-pas) + var(--a6-retard));
}
.js-motion .a6:not(.a6--auto) .a6__trait {
	clip-path: inset(0 100% 0 0);
	transition: clip-path var(--a6-duree) var(--a6-courbe);
	transition-delay: calc(var(--i, 0) * var(--a6-pas) + var(--a6-retard));
}
.js-motion .a6.est-visible .a6__trait { clip-path: inset(0) !important; }

/* Forme masquée réutilisable : un seul fichier, teinté par `color`. */
.embleme {
	display: block;
	background: currentColor;
	-webkit-mask: url("../img/monogramme.svg") no-repeat center / contain;
	mask: url("../img/monogramme.svg") no-repeat center / contain;
}

/* --- Filigrane du premier écran ------------------------------------------
   Très bas en opacité : il doit se deviner, pas se voir. Posé SOUS le voile,
   donc sans effet sur le contraste du texte (vérifié à la mesure). */

.hero__embleme {
	position: absolute;
	z-index: -1;                     /* sous le voile, au-dessus de la toile */
	/* Décalé à droite et débordant : une signature en filigrane, pas une forme
	   posée derrière le texte. Centré, il lisait comme une tache grise. */
	top: 50%;
	right: -6vw;
	width: clamp(20rem, 42vw, 40rem);
	aspect-ratio: 235 / 160;
	transform: translateY(-54%);
	color: var(--nuit);
	opacity: .055;
	pointer-events: none;
}

/* --- Marque d'identité au-dessus des titres de section --------------------
   Un petit monogramme suivi d'un filet : le logo devient la ponctuation du
   site, pas un élément décoratif de plus. */

.marque-fil {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-bottom: 1rem;
	color: var(--majorelle);
}

.marque-fil__embleme { width: 26px; height: 18px; flex: none; }

.marque-fil__filet {
	display: block;
	height: 1px;
	width: min(8rem, 30%);
	background: currentColor;
	opacity: .45;
	transform-origin: 0 50%;
}
.js-motion .marque-fil__filet { transform: scaleX(0); transition: transform var(--a6-duree) var(--a6-courbe) .15s; }
.js-motion .est-visible .marque-fil__filet { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
	.a6__trait { clip-path: none !important; animation: none !important; transition: none !important; }
	.marque-fil__filet { transform: none !important; transition: none !important; }
}

/* ============================================================================
   PREMIER ÉCRAN — REGISTRE SOMBRE
   ----------------------------------------------------------------------------
   Bascule demandée le 2026-09-22 : le bleu nuit devient la couleur dominante,
   le blanc une touche. Le texte passe donc en clair — c'est la seule réponse
   correcte, pas un voile plus opaque (qui délaverait à nouveau le fond).
   ========================================================================== */

.hero { color: var(--encre-claire); }

.hero__fond {
	background:
		radial-gradient(90rem 60rem at 78% 10%, rgb(27 58 199 / .55), transparent 58%),
		radial-gradient(74rem 54rem at 6% 92%, rgb(19 50 255 / .38), transparent 58%),
		radial-gradient(60rem 44rem at 50% 50%, rgb(10 19 48 / .70), transparent 72%),
		var(--nuit-fond);
}

/* Voile SOMBRE : même rôle qu'avant — garantir le contraste quelle que soit la
   position des vagues — mais dans l'autre sens. R7.4. */
.hero__voile {
	background:
		radial-gradient(64rem 27rem at 50% 49%,
			rgb(5 11 34 / .90) 0%,
			rgb(5 11 34 / .78) 44%,
			rgb(5 11 34 / .40) 68%,
			rgb(5 11 34 / 0) 86%);
}

.hero__titre { color: var(--encre-claire); }
.hero__chapo { color: var(--texte-clair); font-weight: 400; }
.rot__mot    { color: #8FA6FF; }

/* Le filigrane passe en blanc : sur bleu nuit, l'encre disparaîtrait. */
.hero__embleme { color: #FFFFFF; opacity: .07; }

/* Boutons sur fond sombre */
.hero__actions .bouton--principal {
	background: #FFFFFF;
	color: #0A1330;
	border-color: #FFFFFF;
	box-shadow: 0 6px 24px rgb(5 11 34 / .40);
}
.hero__actions .bouton--principal:hover {
	background: #1332FF;
	border-color: #1332FF;
	color: #FFFFFF;
}
.hero__actions .bouton--second {
	background: rgb(255 255 255 / .07);
	color: #FFFFFF;
	border-color: rgb(255 255 255 / .30);
}
.hero__actions .bouton--second:hover {
	background: rgb(255 255 255 / .14);
	border-color: rgb(255 255 255 / .60);
}

.hero :focus-visible { outline-color: #FFFFFF; }

/* En-tête : verre sombre au lieu de verre clair */
.entete__barre {
	background: rgb(10 19 48 / .55);
	border-color: rgb(255 255 255 / .16);
	box-shadow: 0 1px 2px rgb(0 0 0 / .20), 0 10px 34px rgb(0 0 0 / .28);
}
.entete__monogramme { background: #FFFFFF; }
.entete__mot { color: #FFFFFF; }
.entete .nav__liste a { color: rgb(255 255 255 / .78); }
.entete .nav__liste a:hover { color: #FFFFFF; background: rgb(255 255 255 / .10); }

/* --- Le monogramme se promène --------------------------------------------
   Demande de Paul : « qu'il fasse sa petite balade derrière en arrière-plan ».
   R8.1 : uniquement `translate` et `rotate`, jamais de géométrie.
   R8.7 : la boucle s'arrête hors écran (classe posée par identite.js) et à
   l'onglet caché. Dérive très lente — 48 s le tour — pour que ce soit une
   présence, pas un mouvement qu'on regarde. */

@keyframes salys-balade {
	0%   { translate:   0% 0%;   rotate: 0deg;    scale: 1; }
	25%  { translate: -4.5% 3%;  rotate: -2.2deg; scale: 1.04; }
	50%  { translate: -1% 6%;    rotate: 1.4deg;  scale: .98; }
	75%  { translate:  3.5% 2%;  rotate: 2.6deg;  scale: 1.03; }
	100% { translate:   0% 0%;   rotate: 0deg;    scale: 1; }
}

.js .hero__embleme {
	animation: salys-balade 48s ease-in-out infinite;
	will-change: translate, rotate, scale;
}
.hero__embleme.hors-champ { animation-play-state: paused !important; }

/* Un second monogramme, plus petit, qui se promène à contretemps : la marque
   habite le fond au lieu d'y être posée une fois. */
.hero__embleme--second {
	top: auto;
	bottom: -8vh;
	right: auto;
	left: -8vw;
	width: clamp(12rem, 24vw, 22rem);
	transform: none;
	opacity: .05;
	animation-duration: 63s;
	animation-direction: reverse;
}

@media (prefers-reduced-motion: reduce) {
	.js .hero__embleme { animation: none !important; }
}

/* --- En-tête : sections à gauche près du logo, audit + WhatsApp à droite -- */

.entete__barre { gap: .5rem 1.5rem; padding: .5rem .5rem .5rem 1.25rem; }

.entete__gauche,
.entete__droite { display: flex; align-items: center; gap: .25rem .5rem; }

.entete__gauche { gap: .25rem 1.75rem; }   /* la nav se colle au logo */
.entete__droite { gap: .5rem; }

/* CTA « Réservez votre audit » — R9.6 : deux signaux au survol, dont un
   mouvement. La pastille s'élargit et la flèche glisse. */
.audit {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	min-height: 44px;                /* R9.3 */
	padding: .4rem .4rem .4rem 1.1rem;
	border-radius: 999px;
	background: #FFFFFF;
	color: #0A1330;
	font-size: .9375rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--duree-ui) var(--courbe), color var(--duree-ui) var(--courbe);
}

.audit__pastille {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	flex: none;
	border-radius: 999px;
	background: #0A1330;
	color: #FFFFFF;
	transition: background var(--duree-ui) var(--courbe), rotate 420ms var(--courbe);
}
.audit__pastille svg { transition: translate 420ms var(--courbe); }

.audit:hover { background: #1332FF; color: #FFFFFF; }
.audit:hover .audit__pastille { background: #FFFFFF; color: #1332FF; rotate: 45deg; }
.audit:hover .audit__pastille svg { translate: 1px 0; }
.audit:active { transform: scale(.985); }

/* WhatsApp */
.wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;       /* R9.3 */
	flex: none;
	border-radius: 999px;
	color: rgb(255 255 255 / .82);
	border: 1px solid rgb(255 255 255 / .22);
	text-decoration: none;
	transition: color var(--duree-ui) var(--courbe),
		border-color var(--duree-ui) var(--courbe),
		background var(--duree-ui) var(--courbe);
}
.wa:hover { color: #25D366; border-color: #25D366; background: rgb(37 211 102 / .12); }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Sous 1080 px la barre est trop chargée : la navigation passe sous la marque,
   le CTA garde sa place. Sous 640 px le libellé de l'audit se réduit. */
@media (max-width: 1080px) {
	.entete__barre { flex-wrap: wrap; justify-content: space-between; }
	.entete__gauche { gap: .25rem 1rem; }
	.entete .nav__liste a { padding-inline: .5rem; font-size: .875rem; }
	/* Deux rangs : la marge du premier écran suit. */
	.hero { padding-block: 10.5rem 3.5rem; }
}
@media (max-width: 720px) {
	.entete__gauche { flex: 1 1 100%; order: 1; justify-content: center; }
	.entete__droite { flex: 1 1 100%; order: 2; justify-content: center; }
	.audit__mot { font-size: .875rem; }
}
/* Sous 430 px, la navigation passait à son tour sur deux lignes — trois rangs
   d'en-tête, 190 px, et le titre disparaissait dessous. On resserre plutôt que
   de repousser encore le premier écran. */
@media (max-width: 430px) {
	.entete .nav__liste { gap: 0; }
	.entete .nav__liste a { padding-inline: .34rem; font-size: .8125rem; letter-spacing: -.01em; }
	.entete__gauche { gap: .25rem .6rem; }
	.entete__mot { font-size: .95rem; letter-spacing: .14em; }
	.hero { padding-block: 11.5rem 3rem; }
}

/* ============================================================================
   PREMIER ÉCRAN — RETOUR AU REGISTRE CLAIR (2026-09-22)
   ----------------------------------------------------------------------------
   Paul : « enlève l'arrière-plan, pars sur un hero clair avec des nuances de
   bleu, des pictogrammes 3D ». Le dégradé animé WebGL n'est plus chargé ; ce
   qui suit écrase le registre sombre écrit plus haut dans cette feuille.
   ========================================================================== */

.hero { color: var(--nuit); }

.hero__fond {
	background:
		radial-gradient(52rem 34rem at 82% 6%,  rgb(19 50 255 / .16), transparent 62%),
		radial-gradient(46rem 32rem at 10% 92%, rgb(27 58 199 / .14), transparent 62%),
		radial-gradient(64rem 40rem at 50% 42%, rgb(255 255 255 / .92), transparent 70%),
		linear-gradient(176deg, #F4F7FE 0%, #E7EDFB 52%, #DCE6FA 100%);
}

/* Plus de fond animé : le voile n'a plus de contraste à garantir. */
.hero__voile { background: none; }

.hero__titre { color: var(--nuit); }
.hero__chapo { color: #3D4870; font-weight: 400; }
.rot__mot    { color: var(--majorelle); }
.hero__embleme { color: var(--nuit); opacity: .05; }

/* --- Réassurance ---------------------------------------------------------- */

.hero__rea {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	margin: 0 auto 1.25rem;
	padding: .45rem 1rem .45rem .7rem;
	border-radius: 999px;
	background: rgb(255 255 255 / .72);
	border: 1px solid rgb(20 31 75 / .10);
	font-size: var(--t-petit);
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--nuit);
}
.hero__rea-points { display: inline-flex; gap: 3px; }
.hero__rea-points span {
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--majorelle);
	opacity: .35;
}
.hero__rea-points span:first-child { opacity: 1; }
.hero__rea-points span:nth-child(2) { opacity: .65; }

/* --- Pictogrammes isométriques -------------------------------------------
   Le relief vient de trois faces de valeurs différentes, pas d'une image.
   R8.1 : au survol on n'anime que `translate` et `rotate`. */

.hero__pictos {
	display: flex;
	justify-content: center;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	margin-top: 2.75rem;
}

.picto {
	display: grid;
	place-items: center;
	width: clamp(4.5rem, 7vw, 6.5rem);
	aspect-ratio: 1;
	border-radius: 1.25rem;
	background: linear-gradient(150deg, rgb(255 255 255 / .95), rgb(233 239 253 / .75));
	border: 1px solid rgb(20 31 75 / .08);
	box-shadow: 0 1px 2px rgb(20 31 75 / .05), 0 18px 34px -18px rgb(20 31 75 / .35);
}
.picto svg { width: 62%; height: auto; overflow: visible; }

.picto .p-haut   { fill: #6E7FF0; }
.picto .p-gauche { fill: #3145C9; }
.picto .p-droite { fill: #1B2870; }
.picto .p-point  { fill: #1332FF; }
.picto .p-arete  { stroke: rgb(255 255 255 / .35); stroke-width: 1.2; fill: none; }

/* Chaque pictogramme flotte, très légèrement, à contretemps. */
@keyframes picto-flotte {
	0%, 100% { translate: 0 0; rotate: 0deg; }
	50%      { translate: 0 -6px; rotate: -1.2deg; }
}
.js .picto { animation: picto-flotte 7s ease-in-out infinite; }
.js .picto:nth-child(2) { animation-duration: 8.4s; animation-delay: -2.1s; }
.js .picto:nth-child(3) { animation-duration: 9.6s; animation-delay: -4.3s; }
.picto.hors-champ { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
	.js .picto { animation: none !important; }
}

/* --- En-tête en registre clair -------------------------------------------- */

.entete__barre {
	background: rgb(255 255 255 / .70);
	border-color: rgb(255 255 255 / .85);
	box-shadow: 0 1px 2px rgb(20 31 75 / .06), 0 10px 30px rgb(20 31 75 / .10);
}
.entete__monogramme { background: var(--nuit); }
.entete__mot { color: var(--nuit); }
.entete .nav__liste a { color: #3D4870; }
.entete .nav__liste a:hover { color: var(--nuit); background: rgb(20 31 75 / .06); }

.audit { background: var(--nuit); color: #FFFFFF; }
.audit__pastille { background: #FFFFFF; color: var(--nuit); }
.audit:hover { background: var(--majorelle); color: #FFFFFF; }
.audit:hover .audit__pastille { background: #FFFFFF; color: var(--majorelle); }

.wa { color: #3D4870; border-color: rgb(20 31 75 / .18); }
.wa:hover { color: #1FA855; border-color: #1FA855; background: rgb(31 168 85 / .10); }

/* Boutons du premier écran, registre clair */
.hero__actions .bouton--principal {
	background: var(--nuit); color: #FFFFFF; border-color: var(--nuit);
	box-shadow: 0 6px 22px rgb(20 31 75 / .22);
}
.hero__actions .bouton--principal:hover { background: var(--majorelle); border-color: var(--majorelle); }
.hero__actions .bouton--second {
	background: rgb(255 255 255 / .78); color: var(--nuit);
	border-color: rgb(20 31 75 / .16);
}
.hero__actions .bouton--second:hover { background: #FFFFFF; border-color: var(--nuit); }

.hero :focus-visible { outline-color: var(--nuit); }

/* ============================================================================
   SÉQUENCE — l'écran blanchit, SALYS s'écrit, on entre dedans
   ----------------------------------------------------------------------------
   Quatre temps :
     1. le premier écran est FIXÉ et son contenu s'efface — rien ne se déplace ;
     2. l'écran devient ENTIÈREMENT BLANC, franchement, sans fondu qui traîne ;
     3. les lettres SALYS s'écrivent progressivement, en bleu Majorelle ;
     4. une fois le mot écrit, on plonge dans une lettre et l'on débouche sur
        une page de la couleur des lettres.

   Le texte est du VECTORIEL (un <text> SVG en `clipPath`) : il reste net à
   n'importe quelle échelle. C'est ce qui manquait au masque raster du
   monogramme, dont l'agrandissement se délitait.

   Replis (§7.1, §7.2, R10.3) : sans `animation-timeline`, en mouvement réduit
   ou sous 900 px, la section n'est pas épinglée, le mot est écrit en entier et
   la page colorée suit. Rien n'est masqué.
   ========================================================================== */

.ouverture { position: relative; }
/* 2026-09-23 — la séquence a sa propre scène, entre les problèmes et
   l'arrivée. Hors séquence (repli), elle n'est pas rendue du tout : pas de
   bloc vide, rien de masqué (tout y est décoratif). */
.passage { display: none; position: relative; background: var(--nuit-uni); }
/* ⚠ REPLI : les actes de la séquence N'EXISTENT PAS hors séquence.
   Mesuré à 390 px : `.acte--portail` rendait une bande BLANCHE VIDE de 354 px
   juste sous le premier écran, avec un mot de 82 px de haut perdu dedans. Les
   deux actes sont purement décoratifs (`aria-hidden`), ils ne dupliquent aucun
   contenu : les retirer ne masque rien (§7.1). R10.3 — les effets épinglés sont
   coupés sous 900 px. Ils sont rétablis dans le bloc de séquence. */
.acte { position: absolute; inset: 0; pointer-events: none; display: none; }

.acte--blanc { background: #FFFFFF; opacity: 0; }

.acte--portail {
	position: relative;
	place-items: center;
	min-height: clamp(16rem, 42svh, 26rem);
	background: #FFFFFF;
	opacity: 1;
}

.portail {
	position: relative;
	width: min(84vw, 62rem);
	aspect-ratio: var(--mot-ratio, 3.1);
	/* Valeurs de repli si la mesure n'a pas pu se faire. */
	--cible-x: .5;
	--cible-y: .5;
	--zoom-fin: 60;
}

.portail__def { position: absolute; width: 0; height: 0; }

.portail__texte {
	font-family: "Plus Jakarta Sans", "Jakarta secours", system-ui, sans-serif;
	/* ⚠ NE PAS forcer `font-variation-settings` ici.
	   Le canvas — qui sert à mesurer le carré inscrit et les avances de chaque
	   lettre — ne sait pas appliquer les réglages de variation. En les posant
	   sur le SVG, les deux rendus divergent : les couches de lettres se
	   désalignent du clip et la plongée ne couvre plus que 84 % de l'écran au
	   lieu de 100 %. On laisse donc les deux moteurs sur le même rendu, quitte à
	   obtenir une graisse plus légère que 800. Mesuré dans les deux sens. */
	font-weight: 800;
	font-size: 100px;
	letter-spacing: 0;
	font-kerning: none;
}

.portail__champ {
	position: absolute;
	inset: 0;
	clip-path: url(#salys-portail);
}

/* --- Le contour argenté des lettres ---------------------------------------
   Paul : « on a l'impression qu'on a écrit avec notre clavier sur
   l'arrière-plan […] un petit peu dans le même esprit que les bordures de
   l'en-tête, argentées mais très légères ».

   C'est le même <text>, posé aux mêmes coordonnées par portail.js, en TRACÉ
   seul. Il n'est pas clippé : le trait est donc entier, à cheval sur l'arête du
   glyphe, moitié sur le blanc de la lettre, moitié sur le bleu nuit du fond —
   il faut donc qu'il soit plus SOMBRE que le remplissage, sans quoi un
   argenté-blanc sur des lettres blanches ne se voit pas.
   `non-scaling-stroke` garde l'épaisseur constante quand le portail grandit. */
.portail__trait {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	opacity: 0;   /* révélé par la séquence, une fois le mot écrit */
}
.portail__trait { filter: drop-shadow(0 0 14px rgb(128 158 228 / .40)); }
.portail__texte--trait {
	fill: none;
	/* ⚠ Mesuré : à 1,7 px l'arête ne comptait que 16 pixels sur une bande de
	   1 040 — invisible à l'œil sur des capitales de 200 px. 3 px reste sous
	   1,5 % de la hauteur de capitale : léger, mais lisible. */
	stroke: rgb(151 171 213 / .95);
	stroke-width: 3;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

/* 2026-09-23 — « des bordures ultra stylées ». Double contour chromé.
   Les lettres blanches sont peintes PAR-DESSUS ce SVG : de chaque trait, seule
   la moitié extérieure se voit. Largeurs visibles hors de la lettre :
     liseré chromé 0 → 2 px · filet sombre 2 → 6 px · anneau chromé 6 → 9 px,
   le tout sur un halo Majorelle flouté. La comète parcourt l'anneau.
   Dégradé et filtres : hero.php. Tout reste du vectoriel. */
.portail__trait { filter: none; }
.portail__trait text {
	fill: none;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}
.portail__texte--halo    { stroke: #4E76FF; stroke-width: 24; stroke-opacity: .28; }
.portail__texte--anneau  { stroke: url(#salys-chrome); stroke-width: 16; stroke-opacity: .85; }
.portail__texte--filet   { stroke: #050A22; stroke-width: 12; }
.portail__texte--trait   { stroke: url(#salys-chrome); stroke-width: 4; }
.portail__texte--comete {
	stroke: #FFFFFF;
	stroke-opacity: .55;
	stroke-width: 18;
	stroke-linecap: round;
	stroke-dasharray: 70 460;
	stroke-dashoffset: 0;
}

/* Une couche par lettre. Le parent est clippé par le mot : on ne voit donc que
   la forme de la lettre se remplir, depuis son centre. */
.portail__lettres { position: absolute; inset: 0; }

/* Aplat continu, qui prend le relais une fois le mot écrit. Sans lui, les vides
   entre les couches de lettres deviennent des bandes blanches dès que l'on
   agrandit — la plongée ne couvrait plus que 84 % de l'écran. */
.portail__plein {
	position: absolute;
	inset: 0;
	background: var(--lettres, #0A1230);
	opacity: 0;
}

.lettre {
	position: absolute;
	top: 0;
	bottom: 0;
	background: var(--lettres, #0A1230);
	/* Sans script, les lettres sont pleines : rien n'est masqué (§7.1). */
}

/* --- La page d'arrivée, de la couleur des lettres ------------------------- */
.apres {
	background: var(--arrivee, #FFFFFF);
	color: var(--arrivee-encre, #141F4B);
	padding-block: var(--section);
}
.apres { text-align: center; }
.apres__titre {
	max-width: 15em;
	margin-inline: auto;
	color: var(--arrivee-encre, #141F4B);
	font-size: clamp(1.9rem, 1rem + 3.2vw, 3.4rem);
	line-height: 1.08;
	letter-spacing: -.03em;
	font-weight: 800;
	text-wrap: balance;
}
.apres__sous { max-width: 31em; margin-inline: auto; margin-top: 1rem; font-size: var(--t-chapo); color: #47527A; }

@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {

		/* ⚠ 2026-09-23 — Toute la séquence est suspendue à `.portail-pret`, posée
		   sur <html> par portail.js UNE FOIS la mesure réussie. Sans script, ou si
		   la mesure échoue, le mot restait au coin (x = 0, y = 0) et l'on
		   traversait 2,4 écrans de bleu nuit vides. Sans elle, on passe
		   directement des problèmes à l'arrivée, comme sur mobile. */
		/* 2026-09-23 — 340 svh au lieu de 420 : le premier écran n'est plus
		   épinglé, il n'y a plus de contenu à effacer avant les lettres. Les
		   plages ci-dessous sont celles d'avant, recalées : p' = (p − 24) / 76. */
		.portail-pret .ouverture {
			height: 340svh;
			view-timeline: --ouverture block;
		}
		.portail-pret .passage { display: block; position: sticky; top: 0; height: 100svh; overflow: clip; }
		:root { timeline-scope: --ouverture; }

		.portail-pret .entete {
			animation: seq-entete linear both;
			animation-timeline: --ouverture;
			animation-range: contain 0% contain 100%;
		}
		@keyframes seq-entete {
			0% { opacity: 1 } 6% { opacity: 0 } 94% { opacity: 0 } 100% { opacity: 1 }
		}


		/* ⚠ Plus d'écran blanc intermédiaire. Le FOND du premier écran reste en
		   place : seuls son contenu et ses pictogrammes s'effacent, et les
		   lettres viennent s'y dessiner. `.acte--blanc` ne sert plus qu'à
		   l'atterrissage, en toute fin de course. */
		.portail-pret .acte--blanc   { display: block; opacity: 0; }
		.portail-pret .acte--portail { display: grid; }


		/* ⚠ Garantie d'atterrissage.
		   En fin de plongée on est profondément DANS une lettre, mais la ligne
		   de capitale du mot reste une frontière : au-delà, on sort des glyphes
		   et il restait une bande blanche en haut d'écran (84 % de couverture
		   mesurés au lieu de 100 %). Plutôt que de courir après la géométrie,
		   l'écran de fond passe du blanc à la couleur des lettres sur les tout
		   derniers pour-cent — à ce stade la lettre couvre déjà l'essentiel, la
		   bascule est imperceptible. */
		/* Garantie d'atterrissage : la ligne de capitale du mot reste une
		   frontière, au-delà de laquelle on sort des glyphes. Le fond bascule
		   donc vers la couleur des lettres — ici le BLANC — sur les tout derniers
		   pour-cent, quand la lettre couvre déjà l'essentiel. */
		.portail-pret .acte--blanc {
			background: var(--arrivee, #FFFFFF);
			animation: seq-atterrissage linear both;
			animation-timeline: --ouverture;
			animation-range: contain 84% contain 96%;
		}
		@keyframes seq-atterrissage { 0% { opacity: 0 } 100% { opacity: 1 } }

		/* 3 et 4 — le portail */
		.portail-pret .acte--portail {
			position: absolute;
			inset: 0;
			min-height: 0;
			display: grid;
			place-items: center;
			background: transparent;   /* le blanc est porté par .acte--blanc */
			animation: seq-portail-vue linear both;
			animation-timeline: --ouverture;
			animation-range: contain 0% contain 8%;
		}
		@keyframes seq-portail-vue { 0% { opacity: 0 } 100% { opacity: 1 } }

		/* ⚠ Chaque lettre NAÎT depuis son propre centre — ce n'est pas un rideau
		   qu'on tire devant un mot déjà écrit. Un disque s'ouvre dans chacune,
		   l'une après l'autre. Le parent étant clippé par le mot, on ne voit que
		   la forme de la lettre se remplir. */
		.portail-pret .lettre {
			animation: seq-naissance linear both;
			animation-timeline: --ouverture;
			/* chaque lettre occupe sa propre tranche de la course, avec un
			   recouvrement pour que l'écriture soit continue */
			/* ⚠ le calc porte sur le POURCENTAGE, pas sur le nom de plage :
			   `calc(contain 26% + …)` est invalide et la règle entière est
			   ignorée — les cinq lettres naissaient alors ensemble. */
			animation-range:
				contain calc(3% + var(--rang) * 5.8%)
				contain calc(15% + var(--rang) * 5.8%);
		}
		/* L'aplat arrive juste après la dernière lettre, et ne la quitte plus. */
		.portail-pret .portail__plein {
			animation: seq-plein linear both;
			animation-timeline: --ouverture;
			animation-range: contain 32% contain 40%;
		}
		@keyframes seq-plein { 0% { opacity: 0 } 100% { opacity: 1 } }

		/* ⚠ Le contour porte les CINQ lettres d'un coup. S'il apparaissait
		   pendant la naissance, on lirait le mot entier avant que les lettres
		   ne se remplissent — exactement ce que la naissance lettre à lettre
		   cherche à éviter. Il n'arrive donc qu'une fois le mot écrit, et s'en
		   va dès que la plongée s'engage : à ce moment-là on est déjà dans le
		   fût du L, il n'a plus rien à tenir. */
		.portail-pret .portail__trait {
			animation: seq-trait linear both;
			animation-timeline: --ouverture;
			animation-range: contain 29% contain 63%;
		}
		@keyframes seq-trait {
			0% { opacity: 0 } 30% { opacity: 1 } 54% { opacity: 1 } 100% { opacity: 0 }
		}
		/* La comète fait le tour des lettres pendant que le contour est là.
		   Pilotée par la position (R8.4) : elle recule quand on remonte. */
		.portail-pret .portail__texte--comete {
			animation: seq-comete linear both;
			animation-timeline: --ouverture;
			animation-range: contain 29% contain 63%;
		}
		@keyframes seq-comete { from { stroke-dashoffset: 0 } to { stroke-dashoffset: -1830 } }

		@keyframes seq-naissance {
			0%   { clip-path: circle(0% at 50% 52%);   opacity: 0; }
			22%  { opacity: 1; }
			100% { clip-path: circle(88% at 50% 52%);  opacity: 1; }
		}

		/* 4 — on plonge dans la lettre la plus épaisse.
		   `transform-origin` est posé sur le point mesuré par portail.js ; le
		   champ grandit autour de lui, et comme il est clippé par du vectoriel,
		   le bord reste net à n'importe quelle échelle. */
		.portail-pret .portail {
			transform-origin: calc(var(--cible-x) * 100%) calc(var(--cible-y) * 100%);
			animation: seq-plonge linear both;
			animation-timeline: --ouverture;
			animation-range: contain 42% contain 100%;
		}
		/* Progression EXPONENTIELLE de l'échelle : une rampe linéaire paraît
		   freiner en fin de course. Les paliers sont précalculés par portail.js,
		   le CSS ne sachant pas élever à une puissance. Résultat : une plongée
		   régulière, « plus mousse ». */
		/* ⚠ Le hero épinglé met UN ÉCRAN ENTIER à se décrocher après la fin de la
		   plongée : 900 px pendant lesquels il ne se passe plus rien, et qu'il
		   faut retraverser à la remontée — d'où l'impression que l'animation
		   « ne revient pas ». La section suivante est donc remontée d'autant :
		   elle commence exactement là où la plongée finit. Les deux étant de la
		   même couleur, la jonction est invisible. */
		.portail-pret .apres {
			position: relative;
			z-index: 0;              /* SOUS le hero épinglé */
			margin-top: -100svh;
		}
		/* ⚠ NE PAS donner de z-index au hero pour couvrir la suite : `.ouverture`
		   ne crée pas de contexte d'empilement, le hero passait donc AU-DESSUS
		   de toutes les sections suivantes et la page paraissait vide après la
		   séquence. On masque plutôt la section d'arrivée jusqu'à la fin de la
		   plongée — elle est de la même couleur, la révélation est invisible. */
		.portail-pret .ouverture {
			isolation: isolate;
			/* ⚠ L'ancrage de défilement de Chrome peut « retenir » la position
			   quand une section épinglée voisine une marge négative : on remonte
			   et la page refuse de repasser dans la séquence. Il est donc coupé
			   sur les deux éléments concernés. */
			overflow-anchor: none;
		}

		/* On atterrit sur la phrase : elle occupe l'écran, centrée. */
		.portail-pret .apres { min-height: 100svh; display: grid; align-content: center; }
		.portail-pret .apres {
			overflow-anchor: none;
			animation: seq-apres linear both;
			animation-timeline: --ouverture;
			animation-range: contain 92% contain 100%;
		}
		@keyframes seq-apres { 0% { opacity: 0 } 100% { opacity: 1 } }

		@keyframes seq-plonge {
			0%   { scale: 1; }
			15%  { scale: var(--z15, 1.8); }
			30%  { scale: var(--z30, 3.2); }
			45%  { scale: var(--z45, 5.8); }
			60%  { scale: var(--z60, 10.5); }
			75%  { scale: var(--z75, 19); }
			88%  { scale: var(--z88, 32); }
			100% { scale: var(--zoom-fin, 60); }
		}
	}
}
/* ============================================================================
   RETOUCHES DU 2026-09-22 (nuit)
   ========================================================================== */

/* --- « sur mesure » : le mot ET le cadre penchent ------------------------
   Le cadre seul penchait, le texte restait droit. Ici c'est tout le bloc qui
   s'incline — texte compris — sur un fond blanc, cadre bleu.
   Une `rotate` sur un élément en ligne ne déplace rien dans le flux : la ligne
   du titre n'est pas décalée et aucune géométrie n'est animée (R8.1). */

.cadre {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	margin-inline: .16em;
	padding: .03em .24em .08em;
	rotate: -2.6deg;                 /* le MOT penche, à l'angle du cadre */
	background: #FFFFFF;
	border: 2px solid var(--majorelle);
	border-radius: .46em;
	box-shadow: 0 2px 10px rgb(20 31 75 / .07);
}

/* Le pseudo-élément ne sert plus : le cadre est porté par l'élément lui-même. */
.cadre::before { content: none; }

/* Il se trace à l'arrivée, sans bouger la ligne. */
.js .cadre {
	clip-path: inset(0 100% 0 0);
	animation: cadre-trace 1.05s var(--courbe) .5s both;
}
@keyframes cadre-trace {
	/* Le rognage final doit laisser SORTIR la flèche, qui déborde sous le
	   cadre : avec un inset serré, elle était coupée et invisible. */
	to { clip-path: inset(-20% -70% -160% -20%); }
}

@media (prefers-reduced-motion: reduce) {
	.js .cadre { animation: none !important; clip-path: none !important; }
}

/* --- WhatsApp en vert ----------------------------------------------------- */

.wa {
	color: #25D366;
	border-color: rgb(37 211 102 / .45);
	background: rgb(37 211 102 / .08);
}
.wa:hover {
	color: #FFFFFF;
	background: #25D366;
	border-color: #25D366;
}

/* --- Fond du premier écran : blanc/clair, sans vagues ---------------------
   Paul n'aimait pas les vagues (2026-09-22). Le SVG et son CSS restent dans le
   dépôt, ils sont prêts à revenir ; ils ne sont plus rendus. */

.hero__fond {
	background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFE 58%, #F4F7FD 100%);
}

/* ============================================================================
   LE BLEU DU LOGO — accent et lumière de fond
   ----------------------------------------------------------------------------
   Paul : « le héros est trop blanc, il manque d'âme […] il faut la couleur du
   bleu du logo Salys […] un effet de lumière en arrière-plan qui incarne ce
   bleu, du bleu vraiment foncé, même si le site reste clair. »

   L'accent passe donc du Majorelle (#4B3FD0, choisi au catalogue) au bleu
   RELEVÉ SUR LE LOGO (#1332FF), et le fond reçoit une lumière construite avec
   ce bleu et son halo profond. R6.2 tient toujours : l'accent reste rare, la
   lumière est une diffusion, pas un aplat.
   ========================================================================== */

.hero__fond {
	background:
		/* lueur haute, le bleu électrique du logo */
		radial-gradient(52rem 32rem at 80% -10%, rgb(19 50 255 / .46), transparent 62%),
		/* contre-jour profond, le halo du logo */
		radial-gradient(46rem 34rem at 2% 108%, rgb(1 4 62 / .42), transparent 60%),
		/* deuxième foyer bleu, à mi-hauteur à gauche */
		radial-gradient(30rem 24rem at 14% 34%, rgb(19 50 255 / .16), transparent 66%),
		/* reflet froid au centre, resserré : il garantit le contraste du texte
		   sans délaver tout l'écran (R7.4). */
		radial-gradient(40rem 20rem at 50% 42%, rgb(255 255 255 / .90), transparent 74%),
		linear-gradient(176deg, #FDFEFF 0%, #E9EFFC 44%, #CFDCF8 100%);
}

/* Deux halos qui respirent : la « lumière » demandée, obtenue en diffusion et
   non en aplat. R8.1 — `translate`, `scale` et `opacity` seulement. */
.hero__lueur {
	position: absolute;
	inset: 0;
	overflow: clip;
	pointer-events: none;
}
.hero__lueur span {
	position: absolute;
	display: block;
	border-radius: 50%;
	filter: blur(70px);
}
.hero__lueur span:nth-child(1) {
	width: 42rem; height: 26rem;
	top: -8rem; right: -6rem;
	background: rgb(19 50 255 / .46);
}
.hero__lueur span:nth-child(2) {
	width: 34rem; height: 22rem;
	bottom: -9rem; left: -7rem;
	background: rgb(1 4 62 / .42);
}
.hero__lueur span:nth-child(3) {
	width: 26rem; height: 18rem;
	top: 42%; left: 58%;
	background: rgb(19 50 255 / .22);
}

@keyframes lueur-respire {
	0%, 100% { translate: 0 0; scale: 1;    opacity: .9; }
	50%      { translate: -2% 3%; scale: 1.12; opacity: 1; }
}
.js .hero__lueur span { animation: lueur-respire 30s ease-in-out infinite; }
.js .hero__lueur span:nth-child(2) { animation-duration: 38s; animation-direction: reverse; }
.js .hero__lueur span:nth-child(3) { animation-duration: 46s; animation-delay: -12s; }
.hero__fond.hors-champ .hero__lueur span { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
	.js .hero__lueur span { animation: none !important; }
}

/* L'accent prend la couleur du logo. */
.rot__mot        { color: var(--bleu-logo); }
.cadre           { border-color: var(--bleu-logo); }
.hero__rea-points span { background: var(--bleu-logo); }
.marque-fil      { color: var(--bleu-logo); }
.surtitre        { color: #46527E; }

/* --- « sur mesure » : flèche tracée --------------------------------------- */

/* Petite flèche posée dans le VIDE à droite du cadre, pointant vers lui.
   Placée dessous, elle traversait la deuxième ligne du titre. Taille en `em` :
   elle suit le titre à toutes les échelles de racine. */
.cadre__fleche {
	position: absolute;
	left: calc(100% + .14em);
	top: -.30em;
	width: .92em;
	height: auto;
	color: var(--bleu-logo);
	overflow: visible;
	pointer-events: none;
}

/* La flèche se trace après le cadre. `stroke-dasharray` convient ici : c'est un
   CONTOUR, cas pour lequel il est fait — contrairement au monogramme, une forme
   pleine, où l'on utilise `clip-path` (module A6). */
.js .cadre__fleche path {
	stroke-dasharray: 160;
	stroke-dashoffset: 160;
	animation: fleche-trace 1s var(--courbe) 1.5s both;
}
.js .cadre__fleche path:last-child { animation-delay: 2.2s; animation-duration: .45s; }
@keyframes fleche-trace { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
	.js .cadre__fleche path { animation: none !important; stroke-dashoffset: 0 !important; }
}

/* --- Points de réassurance ------------------------------------------------ */

.rassure {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .75rem 2rem;
	margin: 2.5rem auto 0;
	max-width: 52rem;
}

.rassure__item {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-size: var(--t-petit);
	font-weight: 600;
	color: #46527E;
}
.rassure__item svg {
	width: 20px; height: 20px; flex: none;
	color: var(--bleu-logo);
}

@media (max-width: 720px) {
	.rassure { gap: .6rem 1.25rem; }
	.rassure__item { font-size: .8125rem; }
}

/* ============================================================================
   PREMIER ÉCRAN — BLEU NUIT SALYS, MOTIFS ET LUMIÈRE
   ----------------------------------------------------------------------------
   Paul : « je veux vraiment que ce soit du bleu nuit Salys, il faut des motifs,
   un fond dynamique qui bouge avec des effets de lumière qui ne s'arrêtent pas ».

   Tout est en CSS ou en SVG en ligne : aucune image, donc rien à créditer, rien
   à charger, et net à toutes les échelles.
   R8.1 — `translate`, `scale`, `rotate` et `opacity` uniquement.
   R8.7 — tout s'arrête hors écran et à l'onglet caché.
   ========================================================================== */

.hero { color: #FFFFFF; }

.hero__fond {
	background:
		radial-gradient(60rem 40rem at 78% -14%, rgb(19 50 255 / .55), transparent 62%),
		radial-gradient(46rem 34rem at 4% 108%, rgb(19 50 255 / .30), transparent 58%),
		radial-gradient(70rem 46rem at 50% 50%, rgb(6 14 48 / .60), transparent 74%),
		linear-gradient(168deg, #0A1230 0%, #060E2C 52%, #01061C 100%);
	overflow: clip;
}

/* --- Motif 1 : trame de points -------------------------------------------- */
.hero__trame {
	position: absolute;
	inset: -10%;
	background-image: radial-gradient(rgb(255 255 255 / .22) 1px, transparent 1px);
	background-size: 26px 26px;
	opacity: .5;
	mask-image: radial-gradient(64rem 40rem at 50% 44%, #000 12%, transparent 78%);
}
@keyframes trame-derive { to { background-position: 26px 26px; } }
.js .hero__trame { animation: trame-derive 9s linear infinite; }

/* --- Motif 2 : grille fine ------------------------------------------------ */
.hero__grille {
	position: absolute;
	inset: -20%;
	background-image:
		linear-gradient(rgb(120 150 255 / .10) 1px, transparent 1px),
		linear-gradient(90deg, rgb(120 150 255 / .10) 1px, transparent 1px);
	background-size: 7rem 7rem;
	mask-image: radial-gradient(52rem 36rem at 62% 30%, #000, transparent 72%);
}
@keyframes grille-glisse {
	0%, 100% { translate: 0 0; }
	50%      { translate: -3.5rem 2rem; }
}
.js .hero__grille { animation: grille-glisse 46s ease-in-out infinite; }

/* --- Motif 3 : monogrammes semés ------------------------------------------ */
.hero__semis span {
	position: absolute;
	display: block;
	background: rgb(255 255 255 / .055);
	-webkit-mask: url("../img/monogramme.svg") no-repeat center / contain;
	        mask: url("../img/monogramme.svg") no-repeat center / contain;
}
.hero__semis span:nth-child(1) { width: 9rem;  aspect-ratio: 1365/931; top: 12%;  left: 6%;  rotate: -12deg; }
.hero__semis span:nth-child(2) { width: 5.5rem;aspect-ratio: 1365/931; top: 68%;  left: 15%; rotate: 8deg; }
.hero__semis span:nth-child(3) { width: 13rem; aspect-ratio: 1365/931; top: 58%;  right: 7%; rotate: -6deg; }
.hero__semis span:nth-child(4) { width: 4rem;  aspect-ratio: 1365/931; top: 22%;  right: 22%;rotate: 16deg; }
.hero__semis span:nth-child(5) { width: 7rem;  aspect-ratio: 1365/931; top: 84%;  right: 34%;rotate: -3deg; }

@keyframes semis-flotte {
	0%, 100% { translate: 0 0;      opacity: .5; }
	50%      { translate: 0 -1.6rem; opacity: 1; }
}
.js .hero__semis span { animation: semis-flotte 18s ease-in-out infinite; }
.js .hero__semis span:nth-child(2) { animation-duration: 24s; animation-delay: -6s; }
.js .hero__semis span:nth-child(3) { animation-duration: 31s; animation-delay: -13s; }
.js .hero__semis span:nth-child(4) { animation-duration: 21s; animation-delay: -4s; }
.js .hero__semis span:nth-child(5) { animation-duration: 27s; animation-delay: -18s; }

/* --- Lumière : quatre halos qui ne s'arrêtent jamais ---------------------- */
.hero__lueur span:nth-child(1) { width: 46rem; height: 30rem; top: -12rem; right: -8rem; background: rgb(19 50 255 / .60); }
.hero__lueur span:nth-child(2) { width: 34rem; height: 24rem; bottom: -10rem; left: -8rem; background: rgb(19 50 255 / .38); }
.hero__lueur span:nth-child(3) { width: 26rem; height: 20rem; top: 38%; left: 56%;  background: rgb(80 120 255 / .26); }
.hero__lueur span:nth-child(4) { width: 20rem; height: 16rem; top: 8%;  left: 18%;  background: rgb(1 4 62 / .55); }
.hero__lueur span { filter: blur(90px); }
.js .hero__lueur span:nth-child(4) { animation-duration: 52s; animation-delay: -20s; }

/* --- Texte sur registre sombre -------------------------------------------- */
.hero__titre { color: #FFFFFF; }
.hero__chapo { color: #C4D0F2; }
.rot__mot    { color: #7E9BFF; }
.cadre       { background: rgb(255 255 255 / .06); border-color: #4E76FF; color: #FFFFFF; }
.cadre__fleche { color: #7E9BFF; }
.hero__rea   { background: rgb(255 255 255 / .07); border-color: rgb(255 255 255 / .18); color: #FFFFFF; }
.hero__rea-points span { background: #4E76FF; }
/* ⚠ Le voile doit couvrir le titre SUR TOUTE SA LARGEUR, pas seulement en son
   centre. Mesuré avec la lumière rasante : à 52 rem, il s'arrêtait à x≈1136 px
   alors que le titre court jusqu'à 1298 — le pire contraste tombait à 4,57:1,
   juste au-dessus du seuil, sur le mot « opérations ». Élargi à 84 rem, en
   compensant par un cœur un peu moins dense pour ne pas délaver l'écran.
   R7.4 — c'est le voile qui garantit le contraste, jamais la lumière. */
.hero__voile { background: radial-gradient(84rem 27rem at 50% 47%, rgb(3 8 26 / .74) 0%, rgb(3 8 26 / .60) 40%, rgb(3 8 26 / .26) 66%, rgb(3 8 26 / 0) 86%); }
.hero :focus-visible { outline-color: #FFFFFF; }

/* En-tête sur fond sombre */
.entete__barre { background: rgb(8 15 42 / .58); border-color: rgb(255 255 255 / .16); }
.entete__monogramme { background: #FFFFFF; }
.entete__mot { color: #FFFFFF; }
.entete .nav__liste a { color: rgb(255 255 255 / .76); }
.entete .nav__liste a:hover { color: #FFFFFF; background: rgb(255 255 255 / .10); }

@media (prefers-reduced-motion: reduce) {
	.js .hero__trame, .js .hero__grille, .js .hero__semis span { animation: none !important; }
}

/* ============================================================================
   BOUTONS, EN-TÊTE, WHATSAPP — le mouvement au survol
   ----------------------------------------------------------------------------
   R9.6 : deux signaux au survol dont un mouvement. Ici le LIBELLÉ se déplace,
   et la flèche — dessinée d'après le monogramme — le suit.
   R8.1 : `translate`, `scale`, `rotate` et couleurs seulement.
   ========================================================================== */

.bouton, .audit { overflow: clip; }

.bouton span, .audit__mot {
	display: inline-block;
	transition: translate 340ms var(--courbe);
}
.bouton:hover span, .audit:hover .audit__mot { translate: -2px 0; }

.bouton__fleche { transition: translate 340ms var(--courbe), rotate 340ms var(--courbe); }
.bouton:hover .bouton__fleche { translate: 5px 0; }
.bouton:active { scale: .985; }

/* Boutons du premier écran, registre sombre */
.hero__actions .bouton--principal {
	background: #FFFFFF; color: #0A1230; border-color: #FFFFFF;
	box-shadow: 0 8px 28px rgb(2 8 30 / .45);
}
.hero__actions .bouton--principal:hover { background: #4E76FF; border-color: #4E76FF; color: #FFFFFF; }
.hero__actions .bouton--second {
	background: rgb(255 255 255 / .08); color: #FFFFFF;
	border-color: rgb(255 255 255 / .28);
	backdrop-filter: blur(10px);
}
.hero__actions .bouton--second:hover { background: rgb(255 255 255 / .16); border-color: #FFFFFF; }

/* --- « Réservez votre audit » --------------------------------------------- */
.audit { background: #FFFFFF; color: #0A1230; }
.audit__pastille { background: #0A1230; color: #FFFFFF; }
.audit:hover { background: #4E76FF; color: #FFFFFF; }
.audit:hover .audit__pastille { background: #FFFFFF; color: #4E76FF; rotate: 0deg; }
.audit:hover .audit__pastille svg { translate: 2px 0; }

/* --- Le monogramme de l'en-tête s'incline au survol ----------------------- */
.entete__marque .entete__monogramme {
	transition: rotate 420ms var(--courbe), scale 420ms var(--courbe);
}
.entete__marque:hover .entete__monogramme,
.entete__marque:focus-visible .entete__monogramme { rotate: -14deg; scale: 1.1; }
.entete__mot { transition: letter-spacing 420ms var(--courbe); }
.entete__marque:hover .entete__mot { letter-spacing: .19em; }

/* --- WhatsApp : vert plein, et il sonne au survol -------------------------- */
.wa {
	background: #25D366;
	border-color: #25D366;
	color: #FFFFFF;
}
.wa:hover, .wa:focus-visible { background: #1FB855; border-color: #1FB855; color: #FFFFFF; }
.wa__icone { transition: rotate 420ms var(--courbe), scale 420ms var(--courbe); }
@keyframes wa-sonne {
	0%, 100% { rotate: 0deg }
	15% { rotate: -14deg } 30% { rotate: 12deg }
	45% { rotate: -8deg }  60% { rotate: 6deg } 75% { rotate: -3deg }
}
.wa:hover .wa__icone, .wa:focus-visible .wa__icone { animation: wa-sonne .8s var(--courbe); scale: 1.08; }

@media (prefers-reduced-motion: reduce) {
	.wa:hover .wa__icone { animation: none !important; }
	.bouton span, .audit__mot, .bouton__fleche,
	.entete__marque .entete__monogramme, .entete__mot { transition: none !important; }
}

/* Commande de pause du rotateur — WCAG 2.2.2, obligatoire dès que le mouvement
   automatique dépasse 5 secondes, ce qui est le cas d'une boucle. Discrète au
   repos, jamais absente, et atteignable au clavier juste après le titre. */
.rot__pause {
	position: absolute;
	top: 0; right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;       /* R9.3 */
	padding: 0;
	border: 1px solid rgb(255 255 255 / .28);
	border-radius: 999px;
	background: rgb(255 255 255 / .08);
	color: #FFFFFF;
	cursor: pointer;
	opacity: .45;
	transition: opacity var(--duree-ui) var(--courbe), background var(--duree-ui) var(--courbe);
}
.rot__pause:hover, .rot__pause:focus-visible { opacity: 1; background: rgb(255 255 255 / .18); }
.rot__pause-icone {
	width: 10px; height: 12px;
	border-left: 3px solid currentColor;
	border-right: 3px solid currentColor;
}
/* La FORME change, pas seulement la couleur (R6.4). */
.rot__pause.est-en-pause .rot__pause-icone {
	width: 0; height: 0; border: 0;
	border-left: 11px solid currentColor;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	margin-left: 3px;
}

/* --- Texte d'arrivée, sur la photo ---------------------------------------- */

.acte--mot {
	display: grid;
	align-items: center;
	padding-inline: var(--gouttiere);
	opacity: 1;
}
.mot {
	width: 100%;
	max-width: var(--largeur);
	margin-inline: auto;
}
.mot__titre {
	max-width: 15em;                /* R2.4 */
	font-size: clamp(1.9rem, 1rem + 3.2vw, 3.4rem);
	line-height: 1.08;
	letter-spacing: -.03em;
	font-weight: 800;
	color: #FFFFFF;
	text-wrap: balance;
}
.mot__sous {
	max-width: 30em;                /* R3.1, plafond en em */
	margin-top: 1rem;
	font-size: var(--t-chapo);
	color: #DCE4FA;
}
/* R7.4 — un voile garantit le contraste, la photo ne le garantit jamais. */
.acte--mot::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgb(3 8 26 / .86) 0%, rgb(3 8 26 / .55) 42%, rgb(3 8 26 / 0) 74%);
	pointer-events: none;
}
.mot { position: relative; }

/* Hors séquence, le texte se pose sur le bandeau image. */
.acte--mot { position: relative; height: clamp(18rem, 46svh, 30rem); margin-top: -1px; }

/* ============================================================================
   SÉQUENCE CINÉMATIQUE — portage fidèle du composant « Cinematic Hero »
   ----------------------------------------------------------------------------
   Paul : « je veux que tu copies exactement l'animation et le résultat […] elle
   est 20 fois moins bien que celle que j'ai vue ». La version précédente n'était
   qu'un fondu d'entrée sur trois éléments. Le composant, lui, épingle la scène
   sur SEPT ÉCRANS de défilement et joue un montage en douze plans.

   Ce montage est repris ici plan par plan. Repères relevés sur la timeline GSAP
   du composant (unités de la timeline, total 14,2), puis ramenés en pourcentage
   de la course :

   | Plan                                    | GSAP        | ici        |
   |-----------------------------------------|-------------|------------|
   | l'intro recule (échelle, flou, opacité) | 0 → 2       | 0 → 14 %   |
   | la carte monte du bas de l'écran        | 0 → 2       | 0 → 14 %   |
   | la carte s'ouvre en plein écran         | 2 → 3,5     | 14 → 25 %  |
   | la tablette arrive du fond, en 3D       | 2,7 → 5,2   | 19 → 37 %  |
   | les blocs de l'écran se posent          | 3,7 → 5,2   | 26 → 37 %  |
   | l'anneau se remplit, le compteur monte  | 4 → 6       | 28 → 42 %  |
   | les pastilles de verre arrivent         | 4 → 5,7     | 28 → 40 %  |
   | le texte entre par la gauche / droite   | 4,2 → 5,7   | 30 → 40 %  |
   | temps mort — on regarde                 | 5,7 → 8,2   | 40 → 58 %  |
   | l'intro cède la place à l'appel         | 8,2         | 58 %       |
   | le contenu de la carte s'envole         | 9,7 → 10,9  | 68 → 77 %  |
   | la carte se referme, l'appel se précise | 10,9 → 12,7 | 77 → 89 %  |
   | la carte sort par le haut               | 12,7 → 14,2 | 89 → 100 % |

   Trois écarts assumés, et leurs raisons :

   1. **Pas de GSAP.** OPERA-ETALON point 14 exclut les bibliothèques
      d'animation, et R8.4 impose un pilotage par la POSITION. Tout passe donc
      par `view-timeline`, comme la séquence du premier écran — qui fonctionne
      et qui est réversible.
      ⚠ Conséquence honnête : `scrub: 1` de ScrollTrigger applique un LISSAGE
      d'une seconde sur la position de défilement. Les animations CSS pilotées
      par le défilement suivent la barre au pixel près, sans inertie. Le montage
      est identique, la molette peut paraître plus « directe ».

   2. **L'agrandissement se fait au `clip-path`**, pas en animant `width` et
      `height` comme le composant. R8.1 interdit d'animer la géométrie — cela
      déclenche un recalcul de mise en page à chaque image. La carte occupe donc
      tout l'écran en permanence, et c'est son rognage qui s'ouvre. Effet
      identique, et sans recalcul.

   3. **Pas d'iPhone.** §7.8 : SALYS ne vend pas d'application mobile grand
      public. L'objet est une tablette d'atelier, avec le même traitement
      physique et la même arrivée en 3D.

   Repli : sans `animation-timeline`, en mouvement réduit ou sous 900 px, la
   scène est une section ordinaire — l'intro, la carte ouverte et lisible, puis
   l'appel. Rien n'est masqué (§7.1, §7.2, R10.3).
   ========================================================================== */

.cine {
	position: relative;
	background: var(--nuit-uni);   /* 2026-09-23 : un seul bleu nuit */
	color: #FFFFFF;
	overflow: clip;
}

.cine__scene {
	position: relative;
	display: grid;
	place-items: center;
	gap: var(--section);
	padding-block: var(--section);
	padding-inline: var(--gouttiere);
	perspective: 1500px;
}

.cine__grille {
	position: absolute;
	inset: 0;
	background-size: 60px 60px;
	background-image:
		linear-gradient(to right, rgb(255 255 255 / .05) 1px, transparent 1px),
		linear-gradient(to bottom, rgb(255 255 255 / .05) 1px, transparent 1px);
	-webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
	mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
	pointer-events: none;
	opacity: .5;
}

/* Le grain argentique du composant : un bruit fractal en SVG, en surimpression.
   3 lignes, aucun octet réseau. */
.cine__grain {
	position: absolute;
	inset: 0;
	z-index: 50;
	pointer-events: none;
	opacity: .05;
	mix-blend-mode: overlay;
	background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="b"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23b)"/></svg>');
}

/* --- Les deux plans de fond ------------------------------------------------ */

/* ⚠ En repli, l'ordre du DOM devient l'ordre de lecture : l'appel doit passer
   APRÈS la carte, alors qu'il la précède dans le balisage (où il est en couche
   de fond). C'est l'ordre de grille qui le remet à sa place. */
.cine__plan { position: relative; z-index: 10; text-align: center; max-width: 52rem; }
.cine__plan--intro { order: 1; }
.cine__carte       { order: 2; }
.cine__plan--appel { order: 3; }

.cine__ligne {
	margin: 0;
	font-size: clamp(2.2rem, 1rem + 4.4vw, 5.6rem);
	line-height: 1.02;
	letter-spacing: -.035em;
	font-weight: 800;
	text-wrap: balance;
}
/* Le composant oppose un titre « mat » et un titre « argent brossé ». On garde
   l'opposition : la première ligne est pleine, la seconde est un dégradé. */
.cine__ligne--1 {
	color: #FFFFFF;
	text-shadow: 0 10px 30px rgb(255 255 255 / .12), 0 2px 4px rgb(255 255 255 / .08);
}
.cine__ligne--2 {
	font-weight: 800;
	background: linear-gradient(180deg, #FFFFFF 0%, rgb(255 255 255 / .42) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	transform: translateZ(0);   /* WebKit rogne le texte clippé sans cette ligne */
	filter: drop-shadow(0 10px 20px rgb(255 255 255 / .12));
}

.cine__appel-titre {
	margin: 0;
	font-size: clamp(1.9rem, 1rem + 3.4vw, 4.2rem);
	line-height: 1.04;
	letter-spacing: -.03em;
	font-weight: 800;
	background: linear-gradient(180deg, #FFFFFF 0%, rgb(255 255 255 / .45) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	transform: translateZ(0);
}
.cine__appel-corps {
	margin: 1.25rem auto 0;
	max-width: 34em;
	font-size: var(--t-chapo);
	color: rgb(198 210 245 / .8);
	font-weight: 400;
}
.cine__appel-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	margin-top: 2.5rem;
}

/* --- La carte -------------------------------------------------------------- */
/*
   Deux couches superposées, toutes deux plein écran, toutes deux rognées :
     · `.cine__carte` porte le LISERÉ — un dégradé clair ;
     · `.cine__face`  porte la MATIÈRE — rognée 1 px plus serré.
   Le filet lumineux suit donc les angles arrondis pendant toute l'ouverture, ce
   qu'un `box-shadow: inset` ne sait pas faire sous `clip-path` (il suivrait la
   boîte, c'est-à-dire l'écran entier).
*/

.cine__carte {
	position: relative;
	z-index: 20;
	width: min(100%, 78rem);
	border-radius: 40px;
	background: linear-gradient(160deg, rgb(255 255 255 / .22) 0%, rgb(255 255 255 / .04) 42%, rgb(255 255 255 / .10) 100%);
	padding: 1px;
	box-shadow: 0 40px 100px -20px rgb(0 0 0 / .9), 0 20px 40px -20px rgb(0 0 0 / .8);
}
.cine__face {
	border-radius: 39px;
	/* 2026-09-23 — Paul : « limite si tu peux rester sur un fond clair, un fond
	   blanc […] je te parle du fond où il y a le téléphone ». */
	background: linear-gradient(180deg, #FFFFFF 0%, #F3F6FD 100%);
	overflow: hidden;
	position: relative;
}

/* Le reflet qui suit le curseur. Sans souris, il reste au centre. */
.cine__reflet {
	position: absolute;
	inset: 0;
	z-index: 50;
	pointer-events: none;
	mix-blend-mode: screen;
	background: radial-gradient(800px circle at var(--souris-x, 50%) var(--souris-y, 40%),
		rgb(255 255 255 / .07) 0%, transparent 42%);
}

.cine__grid {
	position: relative;
	z-index: 10;
	display: grid;
	gap: 2rem;
	padding: clamp(1.5rem, 3vw, 3rem);
	align-items: center;
}

.cine__gauche-titre {
	margin: 0;
	font-size: clamp(1.3rem, .9rem + 1.2vw, 2.15rem);
	line-height: 1.12;
	letter-spacing: -.02em;
	font-weight: 800;
	color: var(--nuit);
}
.cine__gauche-corps {
	margin-top: 1rem;
	max-width: 24em;
	font-size: clamp(.95rem, .9rem + .3vw, 1.1rem);
	line-height: 1.6;
	color: #47527A;
}

.cine__marque {
	margin: 0;
	font-size: clamp(3rem, 1rem + 7vw, 8rem);
	font-weight: 900;
	letter-spacing: -.055em;
	text-transform: uppercase;
	line-height: .9;
	background: linear-gradient(180deg, #FFFFFF 0%, #A1A1AA 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	transform: translateZ(0);
	filter: drop-shadow(0 12px 24px rgb(0 0 0 / .8)) drop-shadow(0 4px 8px rgb(0 0 0 / .6));
}

/* --- L'ordinateur (2026-09-23, remplace la tablette) -------------------- */

.cine__maquette {
	position: relative;
	display: grid;
	place-items: center;
	perspective: 1400px;
	transform-style: preserve-3d;
	width: 100%;
}

/* Le retard de l'inclinaison est porté par la TRANSITION : cine.js n'écrit
   qu'un angle, le navigateur amortit. */
.cine__appareil {
	transition: transform 1200ms cubic-bezier(.22, 1, .36, 1);
	position: relative;
	width: min(46rem, 100%);
	container-type: inline-size;
	transform-style: preserve-3d;
	font-family: inherit;          /* la police du site, partout */
}

.appareil__ecran {
	position: relative;
	aspect-ratio: 16 / 10;
	padding: .7rem;
	border-radius: 1.1rem 1.1rem .35rem .35rem;
	background: #0E1330;
	box-shadow:
		inset 0 0 0 1px rgb(255 255 255 / .10),
		0 0 0 1px #C7CEDF,
		0 40px 70px -24px rgb(11 20 55 / .55);
}
.appareil__camera {
	position: absolute;
	top: .25rem; left: 50%;
	translate: -50% 0;
	width: .3rem; height: .3rem;
	border-radius: 50%;
	background: #2A3158;
}
.appareil__reflet {
	position: absolute;
	inset: .7rem;
	border-radius: .45rem;
	pointer-events: none;
	background: linear-gradient(115deg, rgb(255 255 255 / .22) 0%, rgb(255 255 255 / 0) 38%);
}
/* Le socle : le plateau du clavier, vu de face, et son encoche. */
.appareil__socle {
	position: relative;
	display: block;
	width: 114%;
	margin-left: -7%;
	height: .95rem;
	border-radius: .2rem .2rem 1.3rem 1.3rem / .2rem .2rem .95rem .95rem;
	background: linear-gradient(180deg, #E9EDF6 0%, #C5CCDD 55%, #9EA7BE 100%);
	box-shadow: 0 18px 30px -12px rgb(11 20 55 / .5);
}
.appareil__socle::before {
	content: "";
	position: absolute;
	top: 0; left: 50%;
	translate: -50% 0;
	width: 16%; height: .4rem;
	border-radius: 0 0 .5rem .5rem;
	background: #B3BBCF;
}

/* L'application : claire, à la police du site, lisible. */
.appareil__appli {
	position: relative;
	height: 100%;
	display: grid;
	grid-template-columns: calc(2.6 * var(--u)) 1fr;
	border-radius: calc(.45 * var(--u));
	overflow: hidden;
	background: #F3F5FB;
	color: var(--nuit);
	/* L'écran est une MINIATURE : toutes ses mesures sont en `--u`, qui vaut
	   1 rem quand l'ordinateur fait 46 rem de large et suit sa largeur en
	   dessous (unité de conteneur). Sur mobile, l'ensemble se réduit d'un bloc
	   au lieu de se tasser. ⚠ Pas d'`em` : ils se multipliaient d'un niveau à
	   l'autre et les libellés tombaient à 6 px. */
	--u: 2.174cqw;
	font-size: calc(.75 * var(--u));
	text-align: left;
	line-height: 1.3;
}
.appli__menu {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(.7 * var(--u));
	padding-top: calc(.8 * var(--u));
	background: #FFFFFF;
	border-right: 1px solid #E4E8F3;
}
.appli__logo { width: calc(1.2 * var(--u)); height: calc(1.2 * var(--u)); border-radius: calc(.35 * var(--u)); background: linear-gradient(135deg, #4E76FF, #1332FF); margin-bottom: calc(.3 * var(--u)); }
.appli__menu i { width: calc(1.1 * var(--u)); height: calc(.3 * var(--u)); border-radius: 999px; background: #D5DBEB; }
.appli__menu i.est-actif { background: #1332FF; }
.appli__corps {
	display: flex;
	flex-direction: column;
	gap: calc(.55 * var(--u));
	padding: calc(.8 * var(--u)) calc(.9 * var(--u));
	min-width: 0;
}

.widget {
	border-radius: calc(.7 * var(--u));
	background: #FFFFFF;
	box-shadow: 0 1px 2px rgb(20 31 75 / .06), 0 6px 16px -8px rgb(20 31 75 / .18);
}
.widget__tete {
	display: flex; justify-content: space-between; align-items: center;
	padding: calc(.15 * var(--u)) calc(.1 * var(--u));
	background: none; box-shadow: none;
}
.widget__tete em { display: block; font-style: normal; font-size: calc(.68 * var(--u)); color: #6B76A0; }
.widget__tete b { font-size: calc(1 * var(--u)); font-weight: 800; letter-spacing: -.01em; }
.widget__jeton {
	width: calc(1.7 * var(--u)); height: calc(1.7 * var(--u));
	display: grid; place-items: center;
	border-radius: 50%;
	font-size: calc(.6 * var(--u)); font-weight: 800;
	background: #E8EDFF; color: #1332FF;
}

.appli__rangee { flex: 1; display: grid; grid-template-columns: calc(8.5 * var(--u)) 1fr; gap: calc(.55 * var(--u)); }
.widget__mesure { align-self: stretch; display: grid; align-content: center; }

.widget__mesure { position: relative; padding: calc(.6 * var(--u)) calc(.6 * var(--u)) calc(1.6 * var(--u)); }
.widget__mesure svg { display: block; width: 100%; height: auto; rotate: -90deg; }
.anneau { stroke-dasharray: 402; stroke-dashoffset: 60; }   /* état final : le montage part de 402 */
.mesure__chiffre {
	position: absolute;
	inset: calc(.6 * var(--u)) calc(.6 * var(--u)) calc(1.6 * var(--u));
	display: grid;
	place-items: center;
	font-size: calc(1.35 * var(--u));
	font-weight: 800;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
}
.widget__mesure i {
	position: absolute;
	left: 0; right: 0; bottom: calc(.5 * var(--u));
	text-align: center;
	font-style: normal;
	font-size: calc(.68 * var(--u));
	font-weight: 600;
	color: #6B76A0;
}

.widget__graphe { display: flex; flex-direction: column; padding: calc(.7 * var(--u)) calc(.8 * var(--u)) calc(.75 * var(--u)); }
.widget__graphe em { font-style: normal; font-size: calc(.68 * var(--u)); font-weight: 600; color: #6B76A0; }
.graphe {
	flex: 1;
	display: flex;
	align-items: flex-end;
	gap: calc(.4 * var(--u));
	margin-top: calc(.5 * var(--u));
	border-bottom: 1px solid #E4E8F3;
}
.graphe i {
	flex: 1;
	height: var(--h);
	border-radius: calc(.3 * var(--u)) calc(.3 * var(--u)) calc(.1 * var(--u)) calc(.1 * var(--u));
	background: linear-gradient(180deg, #6E8FFF, #1332FF);
}
.graphe i:nth-child(-n+5) { background: linear-gradient(180deg, #C9D5FF, #9DB2FF); }

.widget__ligne {
	display: flex;
	align-items: center;
	gap: calc(.6 * var(--u));
	padding: calc(.5 * var(--u)) calc(.6 * var(--u));
}
.widget__icone { width: calc(1.7 * var(--u)); height: calc(1.7 * var(--u)); flex: none; border-radius: calc(.5 * var(--u)); }
.widget__icone--bleu { background: linear-gradient(145deg, #6E8FFF, #1332FF); }
.widget__icone--vert { background: linear-gradient(145deg, #5EDB9A, #16A35A); }
.ligne__texte { flex: 1; min-width: 0; color: #6B76A0; font-size: calc(.68 * var(--u)); }
.ligne__texte b { display: block; color: var(--nuit); font-size: calc(.75 * var(--u)); font-weight: 700; }
.widget__etat {
	flex: none;
	padding: calc(.2 * var(--u)) calc(.5 * var(--u));
	border-radius: 999px;
	font-size: calc(.62 * var(--u));
	font-weight: 700;
	background: #E8EDFF;
	color: #1332FF;
}
.widget__etat--vert { background: #E3F7EC; color: #0E7A3E; }

/* --- Les pastilles ------------------------------------------------------- */
/* Sur la carte blanche, le verre sombre n'avait plus de sens : des pastilles
   blanches, franches, qui se détachent par l'ombre. */
.cine__pastille {
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: .8rem 1rem;
	border-radius: 1.1rem;
	font-size: .8rem;
	background: #FFFFFF;
	box-shadow:
		0 0 0 1px rgb(20 31 75 / .06),
		0 22px 40px -16px rgb(11 20 55 / .35);
}
.cine__pastille b { display: block; font-weight: 800; color: var(--nuit); }
.cine__pastille span { color: #6B76A0; font-size: .74rem; }
.cine__pastille-icone {
	width: 2.1rem; height: 2.1rem; flex: none;
	border-radius: 50%;
	background: linear-gradient(145deg, #6E8FFF, #1332FF);
}
.cine__pastille-icone--vert { background: linear-gradient(145deg, #5EDB9A, #16A35A); }

/* --- Mise en page de repli (et base commune) ------------------------------- */

.cine__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.cine__gauche { order: 2; }
.cine__maquette { order: 1; }
.cine__pastille { margin-top: .75rem; }

@media (min-width: 900px) {
	/* Le mot SALYS, à droite, est retiré (Paul : « il ne faut pas répéter le
	   mot SALYS ») : le texte à gauche, l'ordinateur prend la place. */
	.cine__grid {
		grid-template-columns: minmax(15rem, 21rem) minmax(0, 1fr);
		gap: clamp(2rem, 4vw, 4rem);
		text-align: left;
		justify-items: stretch;
	}
	.cine__gauche { order: 1; }
	.cine__maquette { order: 2; }
	.cine__pastille { position: absolute; margin-top: 0; z-index: 30; max-width: 15rem; }
	/* elles DÉBORDENT l'écran, elles ne le recouvrent pas */
	/* ⚠ 2026-09-23 : à −2,6 rem au-dessus de l'écran, « Plus de ressaisie »
	   passait SOUS l'en-tête fixe sur les écrans moins hauts (Paul : « des bugs
	   sur l'ordinateur qui apparaît »). Sur le flanc gauche, elle cachait les
	   étapes de la méthode. Les deux se posent donc SOUS l'ordinateur. */
	.cine__pastille--a { bottom: -3.2rem; left: 1rem; }
	.cine__pastille--b { bottom: -3.2rem; right: 2rem; }
}

/* Compteur du tableau de bord. `@property` rend le nombre interpolable : un
   compteur sans JavaScript, donc rien à masquer. */
/* ⚠ `inherits: true` est indispensable : `counter-reset` et `counter()` vivent
   sur le PSEUDO-ÉLÉMENT `::after`, qui ne reçoit la valeur animée que par
   héritage. En `inherits: false`, le pseudo repartait de la valeur initiale et
   le cadran affichait « 0 % » pendant que la variable valait bien 74. */
@property --compte {
	syntax: "<integer>";
	initial-value: 0;
	inherits: true;
}
.mesure__chiffre { --compte: 74; }
.mesure__chiffre::after { content: counter(compte) " %"; counter-reset: compte var(--compte); }

/* LE MONTAGE de la scène : réécrit le 2026-09-23 (frise), voir « LA FRISE » en fin de fichier. */

/* ============================================================================
   BOUTONS « MÉTAL LIQUIDE »
   ----------------------------------------------------------------------------
   Registre repris du composant « Liquid Metal Button » fourni par Paul : une
   pilule à profondeur physique — liseré clair en haut, ombre portée profonde,
   et un reflet métallique qui balaie la surface.

   ⚠ Le composant s'appuie sur `@paper-design/shaders`, donc sur un contexte
   WebGL et un fragment shader par bouton. Non installé :
     · OPERA-ETALON point 14 — aucune bibliothèque d'effet ;
     · R11.1 — le chemin critique tient en 200 Ko, et il y a trois boutons
       visibles au premier écran ;
     · un bouton qui dépend d'un contexte GL n'a plus d'état de repli propre.
   Le rendu métallique est donc obtenu par superposition de dégradés, et le
   balayage par une seule translation — composée par le GPU, sans shader.

   R8.1 : `translate`, `scale` et des couleurs. Rien d'autre.
   R9.6 : deux signaux au survol dont un mouvement — le reflet passe ET le
   libellé se décale.
   ========================================================================== */

.bouton, .audit {
	position: relative;
	isolation: isolate;
	border-radius: 999px;
	overflow: clip;
}

/* Le reflet qui balaie. Il ne tourne pas en boucle : il passe au survol et au
   focus, donc aucun mouvement automatique, donc aucune commande de pause à
   prévoir (WCAG 2.2.2). */
.bouton::after, .audit::after {
	content: "";
	position: absolute;
	inset: -40% -60%;
	z-index: -1;
	background: linear-gradient(
		100deg,
		transparent 24%,
		rgb(255 255 255 / .10) 38%,
		rgb(255 255 255 / .55) 48%,
		rgb(255 255 255 / .10) 58%,
		transparent 74%);
	translate: -120% 0;
	pointer-events: none;
}
.bouton:hover::after, .bouton:focus-visible::after,
.audit:hover::after, .audit:focus-visible::after {
	animation: metal-balaye 900ms var(--courbe) both;
}
@keyframes metal-balaye { to { translate: 120% 0; } }

/* Profondeur physique : liseré clair en haut, cerne sombre, ombre étagée. */
.hero__actions .bouton--principal {
	background: linear-gradient(180deg, #FFFFFF 0%, #E8EDF9 100%);
	color: #0B1330;
	border: 0;
	box-shadow:
		0 0 0 1px rgb(10 19 48 / .22),
		0 2px 4px rgb(3 8 26 / .30),
		0 14px 26px -6px rgb(3 8 26 / .55),
		inset 0 1px 1px rgb(255 255 255 / 1),
		inset 0 -3px 6px rgb(10 19 48 / .10);
}
.hero__actions .bouton--principal:hover {
	translate: 0 -2px;
	box-shadow:
		0 0 0 1px rgb(10 19 48 / .26),
		0 6px 12px -2px rgb(3 8 26 / .38),
		0 22px 34px -8px rgb(3 8 26 / .6),
		inset 0 1px 1px rgb(255 255 255 / 1),
		inset 0 -3px 6px rgb(10 19 48 / .10);
	background: linear-gradient(180deg, #FFFFFF 0%, #DCE4F7 100%);
}
.hero__actions .bouton--principal:active { translate: 0 1px; scale: .985; }

.hero__actions .bouton--second {
	background: linear-gradient(180deg, rgb(255 255 255 / .14) 0%, rgb(255 255 255 / .05) 100%);
	color: #FFFFFF;
	border: 0;
	backdrop-filter: blur(12px);
	box-shadow:
		0 0 0 1px rgb(255 255 255 / .22),
		0 12px 24px -8px rgb(0 0 0 / .55),
		inset 0 1px 1px rgb(255 255 255 / .35),
		inset 0 -3px 6px rgb(0 0 0 / .35);
}
.hero__actions .bouton--second:hover {
	translate: 0 -2px;
	background: linear-gradient(180deg, rgb(255 255 255 / .22) 0%, rgb(255 255 255 / .08) 100%);
	box-shadow:
		0 0 0 1px rgb(255 255 255 / .38),
		0 18px 30px -8px rgb(0 0 0 / .6),
		inset 0 1px 1px rgb(255 255 255 / .45),
		inset 0 -3px 6px rgb(0 0 0 / .35);
}
.hero__actions .bouton--second:active { translate: 0 1px; scale: .985; }

/* L'appel de l'en-tête, même matière */
.audit {
	padding: .55rem 1.35rem;
	background: linear-gradient(180deg, #FFFFFF 0%, #E8EDF9 100%);
	color: #0B1330;
	border: 0;
	box-shadow:
		0 0 0 1px rgb(10 19 48 / .22),
		0 2px 4px rgb(3 8 26 / .28),
		0 12px 22px -6px rgb(3 8 26 / .5),
		inset 0 1px 1px rgb(255 255 255 / 1),
		inset 0 -3px 6px rgb(10 19 48 / .10);
}
.audit:hover {
	translate: 0 -2px;
	background: linear-gradient(180deg, #FFFFFF 0%, #DCE4F7 100%);
	color: #0B1330;
}
.audit:active { translate: 0 1px; scale: .985; }

/* WhatsApp garde sa matière, mais la même profondeur */
.wa {
	border: 0;
	box-shadow:
		0 0 0 1px rgb(12 90 45 / .45),
		0 2px 4px rgb(3 8 26 / .30),
		0 12px 22px -6px rgb(6 60 30 / .55),
		inset 0 1px 1px rgb(255 255 255 / .45),
		inset 0 -3px 6px rgb(0 60 25 / .35);
}
.wa:hover { translate: 0 -2px; }
.wa:active { translate: 0 1px; scale: .985; }

@media (prefers-reduced-motion: reduce) {
	.bouton:hover::after, .audit:hover::after,
	.bouton:focus-visible::after, .audit:focus-visible::after { animation: none !important; }
	.bouton:hover, .audit:hover, .wa:hover { translate: none !important; }
}

/* ============================================================================
   JEUX DE LUMIÈRE DU PREMIER ÉCRAN
   ----------------------------------------------------------------------------
   Paul : « anime les jeux de lumière bleu marine pour qu'il y ait vraiment du
   mouvement et que ça mette en avant la promesse ».

   Deux familles : six halos qui dérivent et respirent, et deux faisceaux
   obliques qui balaient lentement l'écran en passant derrière le titre.
   R8.1 — `translate`, `scale`, `rotate` et `opacity` seulement.
   R8.7 — tout s'arrête hors écran et à l'onglet caché.
   ========================================================================== */

.hero__lueur span:nth-child(5) {
	width: 30rem; height: 22rem; top: 54%; right: 22%;
	background: rgb(50 90 255 / .30);
}
.hero__lueur span:nth-child(6) {
	width: 22rem; height: 18rem; top: 22%; left: 40%;
	background: rgb(120 160 255 / .18);
}
.js .hero__lueur span:nth-child(5) { animation-duration: 34s; animation-delay: -9s; }
.js .hero__lueur span:nth-child(6) { animation-duration: 41s; animation-delay: -24s; animation-direction: reverse; }

/* --- Faisceaux obliques ---------------------------------------------------- */

/* ⚠ `.hero__faisceaux` (deux faisceaux obliques permanents à +18°) retiré le
   2026-09-22 : il tirait dans l'autre sens que la lumière rasante et la rendait
   illisible. Le premier écran n'a qu'UNE direction de lumière. */

/* Un halo doux derrière la promesse elle-même : la lumière sert le texte, elle
   ne se contente pas de décorer le fond. */
.hero__contenu::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -14% -8% 4%;
	background: radial-gradient(52% 46% at 50% 42%, rgb(78 118 255 / .26), transparent 72%);
	filter: blur(24px);
	pointer-events: none;
}
@keyframes halo-promesse {
	0%, 100% { opacity: .75; scale: 1; }
	50%      { opacity: 1;   scale: 1.06; }
}

@media (prefers-reduced-motion: reduce) {
	.js .hero__contenu::before { animation: none !important; }
}

/* ============================================================================
   L'AUBE — UNE LUMIÈRE DIFFUSE DERRIÈRE LA PROMESSE             2026-09-23
   ----------------------------------------------------------------------------
   Paul : « une lumière, ça ressemble pas à un triangle. C'est naturel […] il
   faut que ça se diffuse progressivement […] attention à ne pas trop
   surstimuler le héros ».

   Le projecteur est retiré (cône, poussière, flaque, quatre boucles). À sa
   place, deux nappes sans contour :
     · la nappe : large, basse, la lumière qui remplit l'air ;
     · le cœur : plus serré, plus clair, juste au-dessus du titre.
   Elles montent et s'ouvrent UNE fois à l'arrivée (voir « entrée en scène »),
   puis ne bougent plus. Aucune forme lisible : un dégradé radial très flou n'a
   pas d'arête, donc rien ne peut « ressembler à » quelque chose.
   ========================================================================== */
.aube {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: clip;
}
.aube span {
	position: absolute;
	left: 50%;
	border-radius: 50%;
	translate: -50% 0;
}
.aube__nappe {
	top: -14%;
	width: 120rem; height: 52rem;
	background: radial-gradient(closest-side, rgb(70 112 255 / .62), rgb(44 80 235 / .24) 55%, transparent);
	filter: blur(50px);
}
/* Le cœur se lève AU-DESSUS du titre, là où le voile de contraste
   (.hero__voile, centré à 47 %) est léger : la lumière descend sur la promesse
   sans passer derrière les lettres. */
.aube__coeur {
	top: 2%;
	width: 64rem; height: 26rem;
	background: radial-gradient(closest-side, rgb(170 194 255 / .46), rgb(104 140 255 / .16) 60%, transparent);
	filter: blur(36px);
}

/* ============================================================================
   PICTOGRAMMES 3D — case à cocher à gauche, courbe à droite
   ----------------------------------------------------------------------------
   Fournis par le client. Ils flottent en permanence, et réagissent au survol :
   ils se redressent, grossissent et s'éclairent.
   ========================================================================== */

.picto3d {
	position: absolute;
	margin: 0;
	width: clamp(6.5rem, 11vw, 13rem);
	z-index: 1;
	filter: drop-shadow(0 22px 34px rgb(3 8 26 / .55));
	transition: scale 520ms var(--courbe), rotate 520ms var(--courbe), filter 520ms var(--courbe);
}
.picto3d picture { display: block; }
.picto3d img { width: 100%; height: auto; display: block; }

.picto3d--gauche { left: clamp(1rem, 6vw, 8rem); top: 34%; rotate: -8deg; }
.picto3d--droite { right: clamp(1rem, 6vw, 8rem); top: 44%; rotate: 7deg; }

@keyframes picto-flotte {
	0%, 100% { translate: 0 0; }
	50%      { translate: 0 -1.5rem; }
}
/* ⚠ Le flottement est porté par l'IMAGE, pas par la figure.
   La figure, elle, doit garder sa propriété `animation` disponible pour
   l'effacement au défilement (voir la séquence, plus haut) : déclarée aux deux
   endroits, c'est la dernière écrite dans le fichier qui gagnait — les deux
   sélecteurs pesant exactement (0,2,0) — et les pictogrammes restaient à
   l'écran pendant que les lettres se dessinaient. */
.js .picto3d img { animation: picto-flotte 9s ease-in-out infinite; }
.js .picto3d--droite img { animation-duration: 11.5s; animation-delay: -4s; }

/* Ils sont décoratifs, donc non focusables : le survol suffit, et rien n'est
   accessible uniquement par lui (R9.5) — ils ne portent aucune information. */
.picto3d:hover {
	scale: 1.1;
	rotate: 0deg;
	filter: drop-shadow(0 26px 44px rgb(3 8 26 / .6))
	        drop-shadow(0 0 26px rgb(78 118 255 / .55));
}
.picto3d { pointer-events: auto; }

@media (max-width: 1100px) { .picto3d { display: none; } }

@media (prefers-reduced-motion: reduce) {
	.js .picto3d img { animation: none !important; }
	.picto3d { transition: none !important; }
}

/* --- En-tête : elle survole DEUX fonds -------------------------------------
   Le premier écran est bleu nuit, la page d'arrivée est blanche, et l'en-tête
   est fixe : elle passe de l'un à l'autre. Une pilule claire disparaissait sur
   le blanc, une pilule translucide y devenait grise et sale.
   Réponse : un verre BLEU NUIT franc, assez dense pour tenir sur les deux, avec
   un liseré clair qui le détache du fond sombre. */

.entete__barre {
	background: rgb(11 19 48 / .82);
	border-color: rgb(255 255 255 / .20);
	backdrop-filter: blur(16px) saturate(150%);
	box-shadow:
		0 0 0 1px rgb(11 19 48 / .35),
		0 10px 30px -10px rgb(3 8 26 / .55);
}
.entete__monogramme { background: #FFFFFF; }
.entete__mot { color: #FFFFFF; }
.entete .nav__liste a { color: rgb(255 255 255 / .80); }
.entete .nav__liste a:hover { color: #FFFFFF; background: rgb(255 255 255 / .12); }

/* ============================================================================
   ENTRÉE EN SCÈNE DU PREMIER ÉCRAN                              2026-09-22
   ----------------------------------------------------------------------------
   Paul : « en refresh, tout est déjà là. Il faut que tout pop-up — la headline
   apparaît, la souligne, les éléments de réassurance, les call to action, les
   pictogrammes — et une fois que tout ça est apparu, LE PROJECTEUR ILLUMINE.
   Mais qu'il PASSE. Parce que là on dirait juste qu'il y a une ampoule posée en
   haut de l'écran. »

   Deux classes, et deux seulement :
     · `.js-motion` masque l'état de départ — posée par identite.js ;
     · `.pret`      le libère, après la première peinture.
   Sans JavaScript, ni l'une ni l'autre n'existe : rien n'est masqué (§7.1).
   En mouvement réduit, `.js-motion` n'est jamais posée : tout est à son état
   final, immédiatement (§7.2).

   ⚠ CE BLOC EST EN FIN DE FICHIER À DESSEIN. Le flottement des pictogrammes et
   le balancement du projecteur sont déclarés plus haut ; à spécificité voisine,
   c'est l'ordre de source qui tranche.

   R8.1 — on n'anime que `opacity`, `translate`, `scale`, `rotate`, `clip-path`.
   WCAG 2.2.2 — toute cette entrée est un passage UNIQUE. Le seul mouvement
   perpétuel est le balancement de fond, qui ne porte aucune information.
   ========================================================================== */

/* --- 1. L'état de départ --------------------------------------------------- */

.js-motion .hero__rea,
.js-motion .hero__titre,
.js-motion .hero__chapo,
.js-motion .hero__actions {
	opacity: 0;
	translate: 0 1.15rem;
}
/* Le pictogramme ne peut pas partir en `translate` : son flottement s'en sert.
   Il arrive donc en échelle, ce qui lui va mieux — il « se pose ». */
.js-motion .picto3d img { opacity: 0; scale: .82; }
/* Le halo de la promesse ne doit pas être allumé avant la promesse. */
.js-motion .hero__contenu::before { opacity: 0; }
/* La lumière, elle, n'est pas masquée : elle est HORS CHAMP (voir plus bas).
   La couche `.projecteur` reste libre — c'est elle qui porte l'effacement au
   défilement. */

/* --- 2. La levée, dans l'ordre de lecture ---------------------------------- */

.js-motion.pret .hero__rea,
.js-motion.pret .hero__titre,
.js-motion.pret .hero__chapo,
.js-motion.pret .hero__actions {
	opacity: 1;
	translate: 0 0;
	transition:
		opacity   640ms var(--courbe) var(--tour, 0ms),
		translate 760ms cubic-bezier(.18, .74, .24, 1) var(--tour, 0ms);
}
.js-motion.pret .hero__rea     { --tour:  80ms; }
.js-motion.pret .hero__titre   { --tour: 220ms; }
.js-motion.pret .hero__chapo   { --tour: 430ms; }
.js-motion.pret .hero__actions { --tour: 580ms; }

.js-motion.pret .picto3d img {
	opacity: 1;
	scale: 1;
	transition:
		opacity 700ms var(--courbe) var(--tour, 0ms),
		scale   900ms cubic-bezier(.16, .8, .22, 1) var(--tour, 0ms);
}
.js-motion.pret .picto3d--gauche img { --tour: 700ms; }
.js-motion.pret .picto3d--droite img { --tour: 790ms; }

/* Le cadre de « sur mesure » se trace une fois le titre posé — c'est « la
   souligne » de Paul. Le masquage passe de `.js` à `.js-motion` : sinon, un
   navigateur qui exécute le script sans pouvoir animer gardait le mot rogné. */
.js .cadre { clip-path: none; animation: none; }
.js-motion .cadre { clip-path: inset(0 100% 0 0); }
.js-motion.pret .cadre { animation: cadre-trace 1.05s var(--courbe) 620ms both; }

/* --- 3. L'aube se lève ------------------------------------------------------
   Elle part basse, resserrée et éteinte, et monte en s'ouvrant pendant que la
   promesse se pose. 2,8 s, une fois. Aucune boucle derrière. */
.js-motion .aube span { opacity: 0; translate: -50% 5rem; scale: .7; }
.js-motion.pret .aube span {
	opacity: 1; translate: -50% 0; scale: 1;
	transition:
		opacity   2200ms cubic-bezier(.3, .1, .3, 1) var(--tour, 700ms),
		translate 2800ms cubic-bezier(.2, .7, .2, 1) var(--tour, 700ms),
		scale     2800ms cubic-bezier(.2, .7, .2, 1) var(--tour, 700ms);
}
.js-motion.pret .aube__coeur { --tour: 1000ms; }

/* Le halo pulsant de la promesse est retiré avec le projecteur : c'était une
   boucle de plus, et l'aube fait désormais ce travail. */
.hero__contenu::before { content: none; }

/* ============================================================================
   2026-09-23 — BOUTONS ANIMÉS : machine à sous, aimant, anneau de lumière,
   WhatsApp développé
   ----------------------------------------------------------------------------
   Paul : « anime les boutons dans le hero, le bouton Réservez votre audit doit
   être animé lorsqu'on passe le curseur dessus (le texte bouge, comme au
   casino, machine à sous), le logo WhatsApp doit aussi être beaucoup plus
   animé et développé ».

   Mouvement automatique : uniquement à l'entrée en scène, et sous 5 s (deux
   tours d'anneau, trois ondes WhatsApp). Tout le reste répond au survol ou au
   focus. `html.entree-finie` (posée par boutons.js) coupe les animations
   d'entrée pour qu'elles ne se rejouent pas à la sortie d'un survol.
   ========================================================================== */

/* --- 1. « Réservez votre audit » : les rouleaux ---------------------------- */
.machine { display: inline-block; white-space: pre; }
.rouleau {
	position: relative;
	display: inline-block;
	vertical-align: top;
	height: 1.25em;
	line-height: 1.25;
	/* on ne rogne qu'en hauteur : une lettre tirée plus large que la vraie
	   déborde sur ses voisines pendant la rotation, comme un vrai rouleau. */
	clip-path: inset(0 -.4em);
}
.rouleau__gabarit { visibility: hidden; }
.rouleau__bande {
	position: absolute;
	top: 0; left: -.5em; right: -.5em;
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.25;
}
.rouleau__bande > span { display: block; height: 1.25em; }

.audit:hover .rouleau__bande,
.audit:focus-visible .rouleau__bande {
	animation: machine calc(640ms + var(--i) * 42ms) both;
}
@keyframes machine {
	0%   { translate: 0 0; filter: blur(0);
	       animation-timing-function: cubic-bezier(.5, 0, .2, 1); }
	25%  { filter: blur(.7px); }
	80%  { translate: 0 calc((var(--n) + .28) * -1.25em); filter: blur(0);
	       animation-timing-function: cubic-bezier(.3, 0, .3, 1); }
	100% { translate: 0 calc(var(--n) * -1.25em); }
}
/* Centrage OPTIQUE. « Réservez votre audit » n'a aucun jambage descendant et
   porte un accent sur le É : centré géométriquement, l'encre paraissait 3 px
   trop haut (mesuré : 13 px au-dessus, 19 px au-dessous). On décale la boîte
   de contenu de 1,5 px vers le bas. */
.audit { padding: calc(.55rem + 1.5px) 1.35rem calc(.55rem - 1.5px); }

/* Le libellé ne glisse plus de côté : ce sont les rouleaux qui bougent. */
.audit:hover .audit__mot.machine-prete { translate: 0 0; }

/* Quand les rouleaux s'arrêtent, le bouton « paie » : un éclair bleu. */
.audit:hover, .audit:focus-visible {
	animation: audit-gain 520ms var(--courbe) calc(640ms + 16 * 42ms) both;
}
@keyframes audit-gain {
	0%   { box-shadow: 0 0 0 1px rgb(10 19 48 / .22), 0 12px 22px -6px rgb(3 8 26 / .5), 0 0 0 0 rgb(78 118 255 / .0); }
	40%  { box-shadow: 0 0 0 1px rgb(78 118 255 / .9), 0 12px 22px -6px rgb(3 8 26 / .5), 0 0 0 7px rgb(78 118 255 / .35); }
	100% { box-shadow: 0 0 0 1px rgb(78 118 255 / .7), 0 14px 26px -6px rgb(3 8 26 / .55), 0 0 22px 2px rgb(78 118 255 / .45); }
}

/* --- 2. Boutons du premier écran : anneau de lumière ----------------------- */
/* ⚠ Défaut antérieur corrigé : une règle plus ancienne passait le libellé en
   blanc au survol (fond bleu d'alors) ; le fond « métal » l'a rendu blanc sur
   blanc. Le libellé reste à l'encre. */
.hero__actions .bouton--principal:hover,
.hero__actions .bouton--principal:focus-visible { color: #0B1330; }

@property --anneau {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

/* L'aimantation (le bouton suivait le curseur) est retirée — Paul, 2026-09-23 :
   « les boutons doivent être quasiment immobiles ». Seul l'anneau reste. */

.hero__actions .bouton::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	padding: 2.5px;
	background: conic-gradient(from var(--anneau),
		rgb(78 118 255 / .25) 0%,
		transparent 12% 30%,
		#4E76FF 52%,
		#FFFFFF 64%,
		#8FA8FF 72%,
		#1332FF 86%,
		rgb(78 118 255 / .25) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 300ms var(--courbe);
	pointer-events: none;
}
.hero__actions .bouton:hover::before,
.hero__actions .bouton:focus-visible::before {
	opacity: 1;
	animation: anneau-tour 1.5s linear infinite;
}
@keyframes anneau-tour { to { --anneau: 360deg; } }

/* Entrée : l'anneau fait deux tours sur l'appel principal, une fois, 3 s. */
.js-motion.pret:not(.entree-finie) .hero__actions .bouton--principal:not(:hover)::before {
	animation: anneau-entree 3s linear 1500ms both;
}
@keyframes anneau-entree {
	0%   { --anneau: 0deg;   opacity: 0; }
	12%  { opacity: 1; }
	85%  { opacity: 1; }
	100% { --anneau: 720deg; opacity: 0; }
}

/* --- 3. WhatsApp : ondes, sonnerie, et la bulle ---------------------------- */
.wa { position: relative; overflow: visible; }
.wa__icone { position: relative; z-index: 1; }

.wa::before, .wa::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 999px;
	border: 2px solid #25D366;
	opacity: 0;
	pointer-events: none;
}
@keyframes wa-onde {
	0%   { scale: 1;   opacity: .85; }
	100% { scale: 2.1; opacity: 0; }
}

/* Pas d'animation à l'arrivée sur la page — Paul, 2026-09-23 : « y'a pas
   besoin, uniquement quand on met le curseur dessus ». */

/* Survol : les ondes partent en continu, l'icône sonne et grossit. */
.wa:hover::before, .wa:focus-visible::before {
	animation: wa-onde 1.2s cubic-bezier(.2, .6, .3, 1) infinite;
}
.wa:hover::after, .wa:focus-visible::after {
	animation: wa-onde 1.2s cubic-bezier(.2, .6, .3, 1) .6s infinite;
}
.wa:hover .wa__icone, .wa:focus-visible .wa__icone {
	animation: wa-sonne 1s var(--courbe) infinite;
	scale: 1.18;
}
.wa:hover, .wa:focus-visible {
	box-shadow:
		0 0 0 1px rgb(12 90 45 / .45),
		0 14px 26px -6px rgb(6 60 30 / .6),
		0 0 26px 4px rgb(37 211 102 / .45),
		inset 0 1px 1px rgb(255 255 255 / .45);
}

/* La bulle « Une question ? Écrivez-nous » a été retirée — Paul, 2026-09-23. */

/* --- 4. Mouvement réduit : les états finaux, sans mouvement ---------------- */
@media (prefers-reduced-motion: reduce) {
	.hero__actions .bouton::before,
	.wa::before, .wa::after, .wa__icone,
	.audit, .rouleau__bande { animation: none !important; }
}

/* ============================================================================
   2026-09-23 — L'EN-TÊTE PORTE L'ANNEAU DE LUMIÈRE, EN PERMANENCE
   ----------------------------------------------------------------------------
   Paul : « j'aimerais que le header ait les mêmes bordures [que les CTA], mais
   qu'on n'ait pas besoin de mettre notre curseur dessus pour le voir, il
   faudrait qu'il sorte comme ça tout le temps ».

   Même dégradé conique et même épaisseur que l'anneau des boutons du premier
   écran (§ « BOUTONS ANIMÉS »). La pilule est ~8 fois plus longue qu'un bouton :
   au rythme des boutons (1,5 s) la lumière y filerait ; elle fait donc son tour
   en 5 s, pour la même vitesse perçue sur le contour.

   ⚠ Boucle automatique permanente, sans commande de pause : écart à §7.10
   (WCAG 2.2.2) sur décision de Paul, consigné dans DECISIONS.md. En mouvement
   réduit, l'anneau reste visible mais immobile.
   ========================================================================== */
.entete__barre {
	position: relative;
	isolation: isolate;
}
.entete__barre::before {
	content: "";
	position: absolute;
	inset: -1px;                 /* posé sur le liseré existant */
	z-index: 1;
	border-radius: inherit;
	padding: 2.5px;
	background: conic-gradient(from var(--anneau),
		rgb(78 118 255 / .25) 0%,
		transparent 12% 30%,
		#4E76FF 52%,
		#FFFFFF 64%,
		#8FA8FF 72%,
		#1332FF 86%,
		rgb(78 118 255 / .25) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	animation: anneau-tour 5s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
	.entete__barre::before { animation: none !important; --anneau: 200deg; }
}

/* ============================================================================
   LES PROBLÈMES — « Votre entreprise tourne. Elle tourne à la main. »
   2026-09-23
   ----------------------------------------------------------------------------
   Un bleu nuit UNI (Paul : « il y a trop de bleu foncé différent, il faut
   rester uni »), le même que la scène du passage qui suit : on glisse des
   problèmes aux lettres sans changer de fond.
   Les objets sont inclinés en 3D (statique) et dérivent au défilement, pilotés
   par la position (R8.4) : aucune boucle automatique.
   ========================================================================== */
.objets-defs { position: absolute; width: 0; height: 0; }

.probleme {
	position: relative;
	background: var(--nuit-uni);
	color: #FFFFFF;
	padding-block: var(--section) calc(var(--section) * 1.2);
	overflow: clip;
}
.probleme .surtitre { color: #9DB0EE; }
.probleme__titre {
	max-width: 16em;
	margin-top: .5rem;
	font-size: clamp(2rem, 1.1rem + 3vw, 3.5rem);
	line-height: 1.06;
	letter-spacing: -.03em;
	font-weight: 800;
	text-wrap: balance;
}
.probleme__intro {
	max-width: 36em;
	margin-top: 1.25rem;
	font-size: var(--t-chapo);
	color: #C9D3F2;
}
.probleme__intro strong { color: #FFFFFF; }

.maux {
	list-style: none;
	margin: clamp(2.5rem, 5vw, 4.5rem) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
}
.mal {
	position: relative;
	padding: 1.5rem 1.5rem 1.75rem;
	border-radius: 1.25rem;
	background: linear-gradient(180deg, rgb(255 255 255 / .06), rgb(255 255 255 / .02));
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / .10);
}
.mal p { margin-top: .5rem; color: #C9D3F2; max-width: 30em; }
.mal__titre {
	margin-top: 1.25rem;
	font-size: 1.25rem;
	line-height: 1.25;
	font-weight: 700;
	color: #FFFFFF;
}
.mal__objet {
	width: 6.5rem;
	perspective: 600px;
}
.objet {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	transform: rotateX(16deg) rotateY(-20deg) rotateZ(-4deg);
	filter: drop-shadow(0 18px 22px rgb(0 0 0 / .45));
}
.mal:nth-child(2) .objet { transform: rotateX(14deg) rotateY(18deg) rotateZ(5deg); }
.mal:nth-child(3) .objet { transform: rotateX(20deg) rotateY(-14deg) rotateZ(3deg); }
.mal:nth-child(4) .objet { transform: rotateX(12deg) rotateY(22deg) rotateZ(-6deg); }

/* Dérive au défilement : chaque objet monte à sa vitesse. Coupée sous 900 px
   (R10.3) : en colonne unique, l'objet passait sur le titre de sa carte. */
@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		.mal__objet {
			animation: objet-derive linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}
		.mal:nth-child(2) .mal__objet { --derive: 3.2rem; --tourne: -8deg; }
		.mal:nth-child(3) .mal__objet { --derive: 1.6rem; --tourne: 6deg; }
		.mal:nth-child(4) .mal__objet { --derive: 2.6rem; --tourne: -5deg; }
		@keyframes objet-derive {
			from { translate: 0 var(--derive, 2.2rem); rotate: var(--tourne, 7deg); }
			to   { translate: 0 calc(var(--derive, 2.2rem) * -1); rotate: 0deg; }
		}
	}
}

/* L'arrivée, après la plongée : titre plus long qu'avant, colonne élargie. */
.apres__titre { max-width: 18em; font-size: clamp(1.9rem, 1rem + 2.8vw, 3.2rem); }

/* ============================================================================
   DES SITES INTERNET AUSSI — portage du composant « Animated Gallery »
   2026-09-23
   ----------------------------------------------------------------------------
   Valeurs du composant, reprises telles quelles (voir front-page.php) :
     ContainerScroll   relative, 350vh, perspective 1000px, origine centre haut,
                       preserve-3d
     ContainerSticky   sticky, top 0, h-svh, overflow hidden, même perspective
     GalleryContainer  grille 3 colonnes, gap .5rem, arrondi 1rem,
                       rotateX 75°→0 (0–50 %), scale 1.2→1 (50–90 %)
     GalleryCol        colonne, gap .5rem, translateY de --y-de à --y-a
                       (50–100 %) ; la colonne du milieu remonte de 50 %
     ContainerStagger  intro en fondu flouté (blur 10px → 0), cascade 0,2 s
   `useScroll({ target })` va de « haut de la piste en haut de l'écran » à
   « bas de la piste en bas de l'écran » : c'est la plage `contain`.
   ========================================================================== */
.galerie {
	position: relative;
	background: #FFFFFF;
}
.galerie__intro {
	position: relative;
	z-index: 30;                      /* z-[9999] du composant, ramené à l'échelle du site */
	margin-bottom: -3rem;             /* -mb-12 */
	padding: 3rem 1.5rem 0;           /* pt-12 px-6 */
	text-align: center;
	display: grid;
	justify-items: center;
}
.galerie__titre {
	display: grid;
	font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3rem);   /* text-4xl → md:text-5xl */
	line-height: 1.1;
	font-weight: 300;                 /* font-extralight, à la police du site */
	letter-spacing: -.02em;
	color: var(--nuit);
}
.galerie__accent { color: #1332FF; font-weight: 300; }
.galerie__texte {
	margin-block: 1rem;               /* my-4 */
	max-width: 32em;                  /* R3.1 : ≤ 75 caractères par ligne */
	color: #5A6386;
	letter-spacing: -.01em;
}
.galerie__actions { display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: center; align-items: center; }
.galerie__actions .bouton--principal {
	background: #1332FF; color: #FFFFFF; border: 0;
	box-shadow: 0 10px 22px -8px rgb(19 50 255 / .55);
}
.galerie__actions .bouton--principal:hover { background: #0F28D6; color: #FFFFFF; }
.galerie__lien {
	display: inline-flex; align-items: center; min-height: 44px; padding-inline: .75rem;
	color: var(--nuit); font-weight: 600; text-underline-offset: 4px;
}
.galerie__lien:hover { text-decoration: underline; }

/* Le halo du composant : un bandeau flou en `screen`. Sur fond blanc, il ne se
   voit que là où il passe sur les cadres — c'est le rendu d'origine. Le violet
   (« rebeccapurple ») est remplacé par les bleus de la palette. */
.galerie__halo {
	position: absolute;
	top: 0; left: 0;
	z-index: 10;
	width: 100%;
	height: 70vh;
	pointer-events: none;
	background: linear-gradient(to right, #8B93A8, #4E76FF, #1332FF);
	filter: blur(84px);
	mix-blend-mode: screen;
}

/* --- Repli (et base) : une grille posée, lisible, sans rien d'épinglé ------ */
.galerie__piste { position: relative; padding: 5rem var(--gouttiere) var(--section); }
.galerie__scene { position: relative; }
.galerie__grille {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .5rem;
	border-radius: 1rem;
	max-width: var(--largeur);
	margin-inline: auto;
}
.galerie__col { position: relative; display: flex; flex-direction: column; gap: .5rem; }
.galerie__cadre {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: .375rem;           /* rounded-md */
	box-shadow: 0 1px 3px rgb(20 31 75 / .12), 0 1px 2px rgb(20 31 75 / .08);   /* shadow */
}
@media (max-width: 599px) {
	.galerie__grille { grid-template-columns: 1fr; }
	.galerie__cadre--vide { display: none; }
}

/* Emplacement réservé : un navigateur esquissé, sans aucun contenu. */
.galerie__cadre--vide {
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, #F4F6FC 0%, #E7ECF8 100%);
	box-shadow: inset 0 0 0 1px #E1E6F2, 0 1px 3px rgb(20 31 75 / .10);
}
.vide__barre {
	position: absolute; top: 0; left: 0; right: 0;
	display: flex; gap: .3rem; align-items: center;
	height: 9%; padding-inline: 3%;
	background: #FFFFFF;
	border-bottom: 1px solid #E1E6F2;
}
.vide__barre i { width: .4rem; height: .4rem; border-radius: 50%; background: #D5DBEB; }
.vide__bloc { position: absolute; border-radius: .3rem; background: #D9E0F1; }
.vide__bloc--a { left: 7%; top: 24%; width: 46%; height: 9%; background: #C9D3EE; }
.vide__bloc--b { left: 7%; top: 39%; width: 34%; height: 6%; }
.vide__bloc--c { right: 7%; top: 24%; width: 32%; height: 58%; background: linear-gradient(160deg, #DCE4FA, #C6D2F5); }

/* --- Intro en cascade : masquée SEULEMENT sous la classe posée par le script */
.js-motion [data-cascade] .galerie__pas { opacity: 0; filter: blur(10px); }
.js-motion [data-cascade].est-visible .galerie__pas {
	opacity: 1; filter: blur(0);
	/* ressort du composant (stiffness 100, damping 16) ≈ cette courbe */
	transition: opacity 700ms cubic-bezier(.22, 1, .36, 1), filter 700ms cubic-bezier(.22, 1, .36, 1);
}
.js-motion [data-cascade].est-visible .galerie__pas:nth-child(1) { transition-delay: 0s; }
.js-motion [data-cascade].est-visible .galerie__titre .galerie__pas:nth-child(2) { transition-delay: .2s; }
.js-motion [data-cascade].est-visible > .galerie__texte { transition-delay: .4s; }
.js-motion [data-cascade].est-visible > .galerie__actions { transition-delay: .6s; }
.galerie__titre .galerie__pas { display: block; }

/* --- La scène, pilotée par le défilement ---------------------------------- */
@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		.galerie__piste {
			height: 350vh;
			padding: 0;
			perspective: 1000px;
			perspective-origin: center top;
			transform-style: preserve-3d;
			view-timeline: --galerie block;
		}
		.galerie__scene {
			position: sticky;
			top: 0; left: 0;
			height: 100svh;
			min-height: 30rem;
			width: 100%;
			overflow: clip;
			perspective: 1000px;
			perspective-origin: center top;
			transform-style: preserve-3d;
			transform-origin: 50% 50%;
		}
		.galerie__grille {
			width: 100%;
			height: 100%;
			max-width: none;
			transform-style: preserve-3d;
			animation: galerie-grille linear both;
			animation-timeline: --galerie;
			animation-range: contain 0% contain 100%;
		}
		@keyframes galerie-grille {
			0%   { transform: rotateX(75deg) scale(1.2); }
			50%  { transform: rotateX(0deg)  scale(1.2); }
			90%  { transform: rotateX(0deg)  scale(1); }
			100% { transform: rotateX(0deg)  scale(1); }
		}
		.galerie__col {
			animation: galerie-col linear both;
			animation-timeline: --galerie;
			animation-range: contain 0% contain 100%;
		}
		.galerie__col--1, .galerie__col--3 { margin-top: -.5rem; }   /* -mt-2 */
		.galerie__col--2 { margin-top: -50%; }                        /* mt-[-50%] */
		@keyframes galerie-col {
			0%, 50% { translate: 0 var(--y-de); }
			100%    { translate: 0 var(--y-a); }
		}
	}
}
@media (prefers-reduced-motion: reduce) {
	.js-motion [data-cascade] .galerie__pas { opacity: 1 !important; filter: none !important; }
}

/* ============================================================================
   2026-09-23 (soir) — PROBLÈMES CENTRÉS, PLUS COURTS ; « ON RÈGLE ÇA. »
   ----------------------------------------------------------------------------
   Paul : « enlève "le constat", centre le texte, la sous-ligne doit tenir en
   2 lignes et être beaucoup plus impactante ; la description des 4 douleurs
   est un peu longue, ça ne donne pas envie de lire ».
   ========================================================================== */
.probleme .conteneur { text-align: center; }
.probleme__titre { margin-inline: auto; margin-top: 0; }
.probleme__intro {
	max-width: 28em;
	margin-inline: auto;
	margin-top: 1.5rem;
	font-size: clamp(1.25rem, .95rem + 1vw, 1.65rem);
	line-height: 1.35;
	font-weight: 500;
	letter-spacing: -.01em;
	text-wrap: balance;
	color: #AEBBE6;
}
.probleme__intro strong { display: block; color: #FFFFFF; font-weight: 800; }
.mal { text-align: center; padding: 1.75rem 1.25rem 1.9rem; }
.mal__objet { margin-inline: auto; }
.mal__titre { margin-top: 1.5rem; text-wrap: balance; }
.mal p { margin-inline: auto; margin-top: .45rem; font-size: 1rem; max-width: 17em; text-wrap: balance; }

/* --- « On règle ça. » -------------------------------------------------------
   L'amorce, petite et grise, pose le reproche ; la réponse, énorme, le règle.
   « ça » est souligné d'un double trait bleu qui se TRACE à l'arrivée, piloté
   par le défilement (R8.4). Sans timeline, le trait est simplement là. */
.apres__amorce {
	max-width: 30em;
	margin-inline: auto;
	font-size: var(--t-chapo);
	font-weight: 500;
	color: #5A6386;
	text-wrap: balance;
}
.reglage {
	margin-top: clamp(.75rem, 2vw, 1.5rem);
	padding-bottom: .4em;             /* la place du trait */
	font-size: clamp(3.6rem, 1.5rem + 9vw, 10rem);
	line-height: .95;
	letter-spacing: -.055em;
	font-weight: 800;
	color: var(--nuit);
}
.reglage__ca { position: relative; display: inline-block; color: #1332FF; }
.reglage__trait {
	position: absolute;
	left: -4%;
	top: 116%;                        /* sous la cédille du ç, pas dessus */
	width: 110%;
	height: .22em;
	overflow: visible;
}
.reglage__trait path {
	fill: none;
	stroke: #1332FF;
	stroke-width: 7;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.reglage__trait path {
			animation: reglage-trace linear both;
			animation-timeline: view();
			animation-range: cover 25% cover 50%;
		}
		@keyframes reglage-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
	}
}

/* ============================================================================
   APPEL DE FIN DE SCÈNE — boutons au registre du premier écran
   ----------------------------------------------------------------------------
   Sur le bleu nuit, le bouton principal par défaut (bleu nuit) disparaissait et
   le secondaire paraissait désactivé. ⚠ Ces règles avaient été supprimées par
   erreur avec l'ancien bloc « méthode » (2026-09-23, soir) : elles n'avaient pas
   de titre de section et le découpage s'arrêtait au titre suivant.
   ========================================================================== */
.cine__appel-actions .bouton--principal {
	background: linear-gradient(180deg, #FFFFFF 0%, #E8EDF9 100%);
	color: #0B1330;
	border: 0;
	box-shadow: 0 0 0 1px rgb(10 19 48 / .22), 0 14px 26px -6px rgb(3 8 26 / .55), inset 0 1px 1px #FFFFFF;
}
.cine__appel-actions .bouton--principal:hover { color: #0B1330; background: linear-gradient(180deg, #FFFFFF 0%, #DCE4F7 100%); }
.cine__appel-actions .bouton--second {
	background: linear-gradient(180deg, rgb(255 255 255 / .14) 0%, rgb(255 255 255 / .05) 100%);
	color: #FFFFFF;
	border: 0;
	box-shadow:
		0 0 0 1px rgb(255 255 255 / .24),
		inset 0 1px 1px rgb(255 255 255 / .35);
}
.cine__appel-actions .bouton--second:hover { background: rgb(255 255 255 / .18); }

/* ============================================================================
   LES PROBLÈMES PRENNENT LA MATIÈRE DU PREMIER ÉCRAN            2026-09-23
   ----------------------------------------------------------------------------
   Paul : « l'arrière-plan n'est pas le même que l'arrière-plan du Hero ».
   L'aplat #0B1437 tranchait net sous le premier écran (plus clair, plus violet).
   La section reprend donc la même matière — dégradé bleu nuit, lueurs bleues,
   trame de points, grille fine — et se RACCORDE aux deux bouts :
     · en haut, le bas du premier écran fond dans le #01061C (.hero__fond::after)
       et la section en repart, ses lueurs ne commençant qu'en dessous ;
     · en bas, elle arrive au bleu nuit uni de la scène des lettres qui suit.
   Motifs immobiles : pas de nouvelle boucle.
   ========================================================================== */
.probleme {
	isolation: isolate;
	background:
		/* les lueurs commencent SOUS la couture : le haut reste au #01061C */
		radial-gradient(46rem 34rem at 2% 62%,  rgb(19 50 255 / .26), transparent 58%),
		radial-gradient(56rem 38rem at 98% 45%, rgb(19 50 255 / .22), transparent 62%),
		radial-gradient(70rem 46rem at 50% 45%, rgb(6 14 48 / .55), transparent 74%),
		linear-gradient(180deg, #01061C 0%, #060E2C 42%, var(--nuit-uni) 100%);
}
.probleme::before,
.probleme::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
}
/* trame de points, comme .hero__trame */
.probleme::before {
	inset: 0;
	background-image: radial-gradient(rgb(255 255 255 / .22) 1px, transparent 1px);
	background-size: 26px 26px;
	opacity: .5;
	-webkit-mask-image: radial-gradient(64rem 40rem at 50% 42%, #000 12%, transparent 78%);
	mask-image: radial-gradient(64rem 40rem at 50% 42%, #000 12%, transparent 78%);
}
/* grille fine, comme .hero__grille */
.probleme::after {
	inset: 0;
	background-image:
		linear-gradient(rgb(120 150 255 / .10) 1px, transparent 1px),
		linear-gradient(90deg, rgb(120 150 255 / .10) 1px, transparent 1px);
	background-size: 7rem 7rem;
	-webkit-mask-image: radial-gradient(52rem 36rem at 40% 60%, #000, transparent 72%);
	mask-image: radial-gradient(52rem 36rem at 40% 60%, #000, transparent 72%);
}
/* La couture : les lueurs du premier écran étaient coupées net à sa limite
   basse (un bleu vif au-dessus, un bleu nuit au-dessous). Le bas du premier
   écran fond donc dans le #01061C où commence la section des problèmes. */
.hero__fond::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 16rem;
	background: linear-gradient(180deg, rgb(1 6 28 / 0) 0%, rgb(1 6 28 / .75) 60%, #01061C 100%);
	pointer-events: none;
}

/* ============================================================================
   LA FRISE — la méthode en quatre temps, puis le cockpit           2026-09-23
   ----------------------------------------------------------------------------
   Paul : « quand on arrive sur la première étape, on ne voit pas tout de suite
   l'ordinateur. Chaque étape apparaît une à la fois : on suit une frise
   chronologique, et quand on scrolle ça défile vers la droite. Après,
   l'ordinateur apparaît rapidement. À la dernière étape, sur l'écran, un
   cockpit de dirigeant : une barre latérale à gauche, à droite un tableau de
   bord avec différentes cartes, des KPI tous au vert. »

   Dans la carte ouverte : une barre de frise (quatre jalons, un rail qui se
   remplit), et une PISTE de cinq panneaux côte à côte — les quatre temps puis
   le résultat — que le défilement fait glisser d'un panneau à l'autre, avec un
   arrêt sur chacun. Tout est piloté par la position (R8.4), réversible.

   Partition (en % de la course --cine, 900 svh) :
     0 → 10   l'intro recule, la carte monte
    10 → 17   la carte s'ouvre en plein écran
     0 → 17   la carte arrive DÉJÀ avec l'étape 01 (plus de carte vide)
    17 → 21   01 Audit          (arrêt court)
    21 → 29,5   glissement long et doux
  29,5 → 32,5 02 Diagnostic
  32,5 → 41     glissement
    41 → 44   03 Déploiement
    44 → 52,5   glissement
  52,5 → 55,5 04 Mesure
  55,5 → 64     glissement ; l'ordinateur S'OUVRE (59 → 64) puis s'allume
    64 → 80   le cockpit, tout au vert
    80 → 90   la carte se referme AUTOUR du cockpit, qui reste visible
   (révisé le 2026-09-23 au soir : glissements de 4 % → 8,5 %, trop brusques)
    90 → 100  elle sort par le haut

   Repli (sans timeline, mouvement réduit, sous 900 px) : la frise est une
   liste verticale, l'ordinateur en dessous. Rien n'est masqué.
   ========================================================================== */

/* --- Base : la liste, lisible telle quelle -------------------------------- */
.frise { position: relative; padding: clamp(1.5rem, 4vw, 3rem); text-align: left; }
.frise__barre { display: none; }
.frise__piste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5rem; }
.frise__etape {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 1.5rem;
	align-items: center;
}
.frise__num {
	display: block;
	font-size: clamp(2.5rem, 1.5rem + 3vw, 5.5rem);
	line-height: .9;
	font-weight: 800;
	letter-spacing: -.04em;
	color: transparent;
	-webkit-text-stroke: 2px #C5D1F7;
}
.frise__titre {
	margin-top: .35rem;
	font-size: clamp(2rem, 1rem + 3.2vw, 4.2rem);
	line-height: 1;
	letter-spacing: -.035em;
	font-weight: 800;
	color: var(--nuit);
}
.frise__texte p {
	margin-top: 1rem;
	max-width: 30em;
	font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem);
	line-height: 1.5;
	color: #47527A;
}
.frise__objet { width: clamp(6rem, 16vw, 15rem); perspective: 700px; }
.frise__objet .objet { transform: rotateX(14deg) rotateY(-18deg) rotateZ(-4deg); filter: drop-shadow(0 26px 30px rgb(11 20 55 / .30)); }
.frise__etape:nth-child(even) .frise__objet .objet { transform: rotateX(12deg) rotateY(18deg) rotateZ(4deg); }

.frise__resultat { display: grid; justify-items: center; gap: 1.25rem; }
.frise__legende {
	font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--nuit);
	text-align: center;
}
.frise__legende span { color: #16A35A; }

@media (max-width: 599px) {
	.frise__etape { grid-template-columns: 1fr; }
	.frise__objet { order: -1; width: 6rem; }
}

/* --- Le cockpit, sur l'écran de l'ordinateur ------------------------------ */
/* Toutes les mesures en --u (voir « L'ordinateur ») : l'écran est une
   miniature, elle se réduit d'un bloc. */
.appareil__appli { grid-template-columns: calc(9.5 * var(--u)) 1fr; }
.cockpit {
	display: flex;
	flex-direction: column;
	gap: calc(.3 * var(--u));
	padding: calc(.9 * var(--u)) calc(.6 * var(--u));
	background: #0E1330;
	color: #FFFFFF;
}
.cockpit__marque { display: flex; align-items: center; gap: calc(.45 * var(--u)); font-size: calc(.85 * var(--u)); font-weight: 800; }
.cockpit__marque .appli__logo { margin: 0; width: calc(1.1 * var(--u)); height: calc(1.1 * var(--u)); }
.cockpit__role { font-style: normal; font-size: calc(.6 * var(--u)); color: #8FA0D8; margin-bottom: calc(.5 * var(--u)); padding-left: calc(1.55 * var(--u)); }
.cockpit__lien {
	padding: calc(.35 * var(--u)) calc(.5 * var(--u));
	border-radius: calc(.4 * var(--u));
	font-size: calc(.66 * var(--u));
	color: #B9C4EA;
}
.cockpit__lien.est-actif { background: rgb(78 118 255 / .28); color: #FFFFFF; font-weight: 700; }
.cockpit__etat {
	margin-top: auto;
	display: flex; align-items: center; gap: calc(.4 * var(--u));
	font-size: calc(.6 * var(--u)); font-weight: 700; color: #6EE7A8;
}
.cockpit__etat i { width: calc(.5 * var(--u)); height: calc(.5 * var(--u)); border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 calc(.2 * var(--u)) rgb(34 197 94 / .25); }

.kpi__bilan {
	padding: calc(.25 * var(--u)) calc(.6 * var(--u));
	border-radius: 999px;
	font-size: calc(.6 * var(--u)); font-weight: 700;
	background: #E3F7EC; color: #0E7A3E;
}
.kpis {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 1fr;
	gap: calc(.55 * var(--u));
}
.kpi {
	display: flex;
	flex-direction: column;
	padding: calc(.6 * var(--u)) calc(.7 * var(--u)) calc(.4 * var(--u));
	border-top: calc(.18 * var(--u)) solid #22C55E;
	min-width: 0;
}
.kpi em { font-style: normal; font-size: calc(.6 * var(--u)); font-weight: 600; color: #6B76A0; }
.kpi b { margin-top: calc(.15 * var(--u)); font-size: calc(1.3 * var(--u)); font-weight: 800; letter-spacing: -.02em; color: var(--nuit); }
.kpi__tendance {
	align-self: flex-start;
	margin-top: calc(.2 * var(--u));
	padding: calc(.12 * var(--u)) calc(.45 * var(--u));
	border-radius: 999px;
	font-size: calc(.55 * var(--u)); font-weight: 700;
	background: #E3F7EC; color: #0E7A3E;
}
.kpi__courbe { margin-top: auto; width: 100%; height: calc(1.5 * var(--u)); }
.kpi__courbe path { fill: none; stroke: #22A861; stroke-width: 2; vector-effect: non-scaling-stroke; }

/* --- La séquence -------------------------------------------------------- */
@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {

		.cine__piste { height: 900svh; view-timeline: --cine block; }
		.cine__scene {
			position: sticky; top: 0; height: 100svh;
			display: block; padding: 0; overflow: clip;
		}

		.cine__plan--intro, .cine__plan--appel, .cine__carte, .cine__face,
		.frise, .frise__piste, .frise__remplissage, .frise__noeud,
		.cine__maquette, .kpi, .frise__legende {
			animation-duration: auto;
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: --cine;
			animation-range: contain 0% contain 100%;
		}

		.cine__plan, .cine__carte { order: 0; }
		.cine__plan {
			position: absolute; inset: 0; z-index: 10;
			display: grid; align-content: center; justify-items: center;
			max-width: none; padding-inline: var(--gouttiere);
		}

		/* L'intro recule dans la profondeur */
		.cine__plan--intro { animation-name: frise-intro; }
		@keyframes frise-intro {
			0%   { opacity: 1;  scale: 1;    filter: blur(0px);
			       animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
			10%  { opacity: .2; scale: 1.15; filter: blur(20px); }
			73.9% { opacity: .2; scale: 1.15; filter: blur(20px); }
			74%  { opacity: 0;  scale: 1.15; filter: blur(20px); }
			100% { opacity: 0;  scale: 1.15; filter: blur(20px); }
		}

		/* L'appel, invisible jusqu'à 74 % */
		.cine__plan--appel { animation-name: frise-appel; }
		@keyframes frise-appel {
			0%    { opacity: 0; scale: .8; filter: blur(30px); }
			73.9% { opacity: 0; scale: .8; filter: blur(30px); }
			74%   { opacity: 1; scale: .8; filter: blur(30px); }
			80%   { opacity: 1; scale: .8; filter: blur(30px);
			        animation-timing-function: cubic-bezier(.87, 0, .13, 1); }
			90%   { opacity: 1; scale: 1;  filter: blur(0px); }
			100%  { opacity: 1; scale: 1;  filter: blur(0px); }
		}

		/* La carte : elle monte, s'ouvre, se referme, sort */
		.cine__carte {
			position: absolute; inset: 0; width: auto; z-index: 20;
			padding: 0; border-radius: 0; box-shadow: none;
			animation-name: frise-carte;
		}
		@keyframes frise-carte {
			0%   { translate: 0 108svh; clip-path: inset(7.5% 7.5% round 40px);
			       animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
			10%  { translate: 0 0;      clip-path: inset(7.5% 7.5% round 40px);
			       animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
			17%  { translate: 0 0;      clip-path: inset(0% 0% round 0px); }
			80%  { translate: 0 0;      clip-path: inset(0% 0% round 0px);
			       animation-timing-function: cubic-bezier(.87, 0, .13, 1); }
			90%  { translate: 0 0;      clip-path: inset(7.5% 7.5% round 40px);
			       animation-timing-function: cubic-bezier(.55, .055, .675, .19); }
			100% { translate: 0 -118svh; clip-path: inset(7.5% 7.5% round 40px); }
		}
		.cine__face {
			position: absolute; inset: 0; border-radius: 0; overflow: visible;
			animation-name: frise-face;
		}
		@keyframes frise-face {
			0%   { clip-path: inset(calc(7.5% + 1px) calc(7.5% + 1px) round 39px);
			       animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
			10%  { clip-path: inset(calc(7.5% + 1px) calc(7.5% + 1px) round 39px);
			       animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
			17%  { clip-path: inset(calc(0% + 1px) calc(0% + 1px) round 0px); }
			80%  { clip-path: inset(calc(0% + 1px) calc(0% + 1px) round 0px);
			       animation-timing-function: cubic-bezier(.87, 0, .13, 1); }
			90%  { clip-path: inset(calc(7.5% + 1px) calc(7.5% + 1px) round 39px); }
			100% { clip-path: inset(calc(7.5% + 1px) calc(7.5% + 1px) round 39px); }
		}

		/* La frise occupe la carte ; l'en-tête fixe garde sa place en haut. */
		.frise {
			position: absolute;
			inset: 0;
			display: grid;
			grid-template-rows: auto 1fr;
			padding: 7.5rem clamp(2rem, 5vw, 5.5rem) 2rem;
			animation-name: frise-contenu;
		}
		/* Paul : « quand la carte arrive, elle est toute blanche : il faut qu'on
		   voie déjà la première étape » et « quand l'ordinateur part, la carte
		   devient toute blanche, alors que ce qu'on voit en dernier doit rester ».
		   Le contenu est donc là de bout en bout ; quand la carte se referme, il
		   se resserre avec elle au lieu de disparaître. */
		/* Resserré pendant que la carte est une carte (arrivée et départ), à la
		   pleine taille quand elle est ouverte : il n'est jamais rogné. */
		@keyframes frise-contenu {
			0%, 10%   { scale: .84; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
			17%, 80%  { scale: 1;   animation-timing-function: cubic-bezier(.87, 0, .13, 1); }
			90%, 100% { scale: .84; }
		}

		/* La barre : quatre jalons sur un rail qui se remplit */
		.frise__barre {
			position: relative;
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			align-items: end;
			padding-bottom: 1.1rem;
		}
		.frise__rail {
			position: absolute; left: 0; right: 0; bottom: .3rem;
			height: 3px; border-radius: 3px; background: #E3E8F6; overflow: hidden;
		}
		.frise__remplissage {
			display: block; height: 100%;
			background: linear-gradient(90deg, #4E76FF, #1332FF);
			transform-origin: 0 50%;
			animation-name: frise-rail;
		}
		@keyframes frise-rail {
			/* le rail arrive PILE sur chaque jalon (placés à 0, 25, 50, 75 %)
			   en même temps que son panneau, puis file au bout pour le résultat */
			0%, 21%      { scale: .012 1; animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
			29.5%, 32.5% { scale: .25 1;  animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
			41%, 44%     { scale: .5 1;   animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
			52.5%, 55.5% { scale: .75 1;  animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
			64%, 100%    { scale: 1 1; }
		}
		.frise__noeud {
			position: relative;
			display: flex; align-items: baseline; gap: .5rem;
			font-size: .95rem; font-weight: 700; color: #9AA5C8;
			animation-name: frise-noeud;
			/* ⚠ le calc porte sur le pourcentage, jamais sur le nom de plage */
			animation-range: contain calc(var(--n) * 11.83%) contain calc(100% + var(--n) * 11.83%);
		}
		.frise__noeud b { font-size: .8rem; color: inherit; }
		.frise__noeud::after {
			content: "";
			position: absolute; left: 0; bottom: -1.1rem;
			width: .85rem; height: .85rem;
			border-radius: 50%;
			background: #FFFFFF;
			box-shadow: 0 0 0 3px #D5DDF3;
			translate: 0 50%;
		}
		@keyframes frise-noeud {
			0%, 15% { color: #9AA5C8; }
			18%, 100% { color: var(--nuit); }
		}
		/* Le point s'allume en même temps (propriété distincte : un pseudo-
		   élément ne partage pas l'animation de son hôte). */
		.frise__noeud::after {
			animation: frise-point linear both;
			animation-timeline: --cine;
			animation-range: contain calc(var(--n) * 11.83%) contain calc(100% + var(--n) * 11.83%);
		}
		@keyframes frise-point {
			0%, 15%   { background: #FFFFFF; box-shadow: 0 0 0 3px #D5DDF3; scale: 1; }
			18%, 100% { background: #1332FF; box-shadow: 0 0 0 5px rgb(19 50 255 / .18); scale: 1.15; }
		}

		/* La piste : cinq panneaux côte à côte, qui glissent vers la gauche —
		   on AVANCE vers la droite de la frise. */
		.frise__fenetre { position: relative; overflow: clip; min-height: 0; }
		.frise__piste {
			display: flex;
			width: 500%;
			height: 100%;
			gap: 0;
			animation-name: frise-glisse;
		}
		.frise__piste > li { flex: 0 0 20%; min-width: 0; padding-inline: 1rem; }
		.frise__etape { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 3rem; }
		.frise__objet { justify-self: center; width: clamp(10rem, 17vw, 16rem); }
		@keyframes frise-glisse {
			0%, 21%      { translate: 0 0;    animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
			29.5%, 32.5% { translate: -20% 0; animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
			41%, 44%     { translate: -40% 0; animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
			52.5%, 55.5% { translate: -60% 0; animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
			64%, 100%    { translate: -80% 0; }
		}

		/* Le résultat : l'ordinateur arrive vite, en 3D, puis le cockpit s'allume */
		.frise__resultat { align-content: center; gap: 1rem; }
		.frise__legende { animation-name: frise-legende; }
		@keyframes frise-legende {
			0%, 63% { opacity: 0; translate: 0 16px; }
			67%, 100% { opacity: 1; translate: 0 0; }
		}
		/* largeur bornée aussi par la HAUTEUR disponible : sur un écran bas
		   (1366 × 700), le socle était rogné. Écran 16/10 + socle ≈ 0,65 × L. */
		.cine__maquette { width: min(44rem, 100%, calc((100svh - 18rem) / .65)); animation-name: frise-ordinateur; }
		/* L'ordinateur S'OUVRE. Paul : « je n'aime pas comment arrive
		   l'ordinateur, il doit y avoir une animation pour qu'il arrive ».
		   1. il glisse avec son panneau, FERMÉ : on ne voit que le socle et le
		      dos du couvercle rabattu ;
		   2. le couvercle se relève autour de la charnière (59 → 64 %) ;
		   3. l'écran s'allume, dans un éclat (63 → 66 %) ;
		   4. les cartes du tableau de bord se posent une à une (65 → 70 %). */
		@keyframes frise-ordinateur {
			0%, 54%   { opacity: 0; transform: translateY(50px) scale(.94); }
			54.1%     { opacity: 0; transform: translateY(50px) scale(.94);
			            animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
			58%, 100% { opacity: 1; transform: translateY(0) scale(1); }
		}
		.appareil__ecran {
			transform-origin: 50% 100%;
			animation: frise-couvercle linear both;
			animation-timeline: --cine;
			animation-range: contain 0% contain 100%;
		}
		@keyframes frise-couvercle {
			0%, 59%   { transform: rotateX(-86deg); }
			59.1%     { transform: rotateX(-86deg); animation-timing-function: cubic-bezier(.3, .7, .2, 1.06); }
			64%, 100% { transform: rotateX(0deg); }
		}
		.appareil__appli {
			animation: frise-allumage linear both;
			animation-timeline: --cine;
			animation-range: contain 0% contain 100%;
		}
		@keyframes frise-allumage {
			0%, 63%   { opacity: 0; filter: brightness(1); }
			64.5%     { opacity: 1; filter: brightness(1.9); }
			66%, 100% { opacity: 1; filter: brightness(1); }
		}
		/* Les cartes du tableau de bord se posent l'une après l'autre */
		.kpi {
			animation-name: frise-kpi;
			animation-range: contain calc(var(--i) * .8%) contain calc(100% + var(--i) * .8%);
		}
		@keyframes frise-kpi {
			0%, 65% { opacity: 0; translate: 0 14px; scale: .96; }
			65.1%   { opacity: 0; translate: 0 14px; scale: .96;
			          animation-timing-function: cubic-bezier(.24, 1.36, .5, 1); }
			69%, 100% { opacity: 1; translate: 0 0; scale: 1; }
		}
	}
}

/* ============================================================================
   2026-09-23 (nuit) — RETOUCHES DE LA FRISE
   ========================================================================== */
/* Le « g » de « logiciel » était rogné : un texte en `background-clip: text`
   ne peint que dans sa boîte, et l'interligne serré (1,02) coupe les
   jambages. On agrandit la boîte vers le bas sans bouger la ligne. */
.cine__ligne--2, .cine__appel-titre { padding-bottom: .16em; margin-bottom: -.16em; }

/* La barre de frise, plus affirmée, et son CURSEUR : le monogramme Salys en
   bleu nuit, qui avance de jalon en jalon avec le rail (Paul : « le point
   qui suit, ce serait le logo Salys en bleu foncé »). Le curseur se déplace
   en `translate` exprimé en unités du conteneur (la barre) : aucune
   propriété de géométrie animée (R8.1). */
.frise__curseur { display: none; }
@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		.frise__barre { container-type: inline-size; padding-bottom: 1.6rem; }
		.frise__rail { height: 4px; bottom: .55rem; background: #E6EBF7; box-shadow: inset 0 1px 1px rgb(20 31 75 / .08); }
		.frise__remplissage {
			background: linear-gradient(90deg, #9DB2FF 0%, #4E76FF 45%, #1332FF 100%);
			box-shadow: 0 0 12px rgb(19 50 255 / .45);
		}
		.frise__noeud { font-size: 1rem; }
		.frise__noeud b { font-size: .75rem; letter-spacing: .06em; }
		.frise__noeud::after { bottom: -1.05rem; width: .6rem; height: .6rem; }
		.frise__curseur {
			display: grid;
			place-items: center;
			position: absolute;
			left: 0;
			bottom: .55rem;
			width: 2.6rem; height: 2.6rem;
			margin-left: -1.3rem;
			margin-bottom: -1.2rem;
			border-radius: 50%;
			background: #FFFFFF;
			box-shadow:
				0 0 0 1px rgb(20 31 75 / .10),
				0 6px 16px -4px rgb(11 20 55 / .35),
				0 0 0 6px rgb(19 50 255 / .10);
			z-index: 2;
			animation: frise-curseur linear both;
			animation-timeline: --cine;
			animation-range: contain 0% contain 100%;
		}
		.frise__logo {
			width: 1.55rem; height: 1.1rem;
			background: var(--nuit);
			-webkit-mask: url("../img/monogramme.svg") no-repeat center / contain;
			mask: url("../img/monogramme.svg") no-repeat center / contain;
		}
		@keyframes frise-curseur {
			0%, 21%      { translate: .3rem 0;   animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
			29.5%, 32.5% { translate: 25cqw 0;   animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
			41%, 44%     { translate: 50cqw 0;   animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
			52.5%, 55.5% { translate: 75cqw 0;   animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
			64%, 100%    { translate: calc(100cqw - .3rem) 0; }
		}
	}
}

/* ============================================================================
   PREMIER ÉCRAN — BLANC EN HAUT, ÉVENTAIL DE LUMIÈRE EN BAS     2026-09-23
   ----------------------------------------------------------------------------
   Paul : « un fond en deux ambiances qui se fondent l'une dans l'autre. Le
   haut, sur environ 60 %, blanc pur […] les textes en couleur sombre. Dans le
   bas, une lumière colorée monte depuis le bord inférieur […] un grand
   éventail de faisceaux : des rayons droits et fins qui partent d'un point au
   centre, sous le bas de l'écran, et s'ouvrent vers la gauche et la droite
   jusqu'aux bords, en bandes alternées plus claires et plus foncées. Au
   centre, juste sous les boutons, la lumière est presque blanche ; vers les
   coins bas, la couleur devient intense et saturée. Passage très doux, sans
   ligne. Le bleu nuit du hero actuel, avec des variations plus claires. »

   Tout est en dégradés CSS dans `.hero__fond` : aucune image, aucun poids,
   aucune animation. Les anciennes couches (lueurs, aube, trame, grille, voile
   sombre de contraste) ne servent plus sur un fond blanc : masquées ici.
   ========================================================================== */
.hero__fond { background: #FFFFFF; }
.hero__fond .hero__lueur,
.hero__fond .hero__trame,
.hero__fond .hero__grille,
.hero__fond .aube,
.hero__voile { display: none; }

/* L'éventail : couleur, rayons, puis l'éclat central — le tout masqué vers le
   haut pour que le blanc reprenne sans aucune ligne. */
/* 2026-09-23 (nuit, révision) — Paul : « on passe d'un coup du blanc aux
   rayures, et du bleu marine au bleu plus clair d'un coup ; il faut que ce
   soit beaucoup plus dégradé, plus naturel, jusqu'à la section d'après ».
   Deux couches, deux fondus :
     ::before  la COULEUR — elle monte du blanc sur 40 % de la hauteur par un
               fondu à pente douce (courbe approchée par neuf paliers), puis
               glisse vers le bleu nuit en bas par des bleus intermédiaires,
               jusqu'au #01061C exact où commence la section suivante ;
     ::after   les RAYONS — plus discrets, ils n'apparaissent qu'une fois la
               couleur installée et s'effacent avant le bord bas. */
.hero__fond::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		/* vers la section suivante : bleu, puis bleu nuit, puis #01061C */
		linear-gradient(180deg,
			rgb(1 6 28 / 0) 0%, rgb(1 6 28 / 0) 80%,
			rgb(12 28 128 / .22) 86%, rgb(9 20 90 / .55) 91%,
			rgb(5 12 52 / .85) 96%, #01061C 100%),
		/* l'éclat, presque blanc, autour et juste sous les boutons */
		radial-gradient(46% 26% at 50% 78%, rgb(255 255 255 / .95) 0%, rgb(242 246 255 / .78) 38%, rgb(222 231 255 / .35) 70%, rgb(214 225 255 / 0) 100%),
		/* la couleur : du bleu très pâle au centre au bleu nuit des coins */
		radial-gradient(82% 62% at 50% 86%,
			#EEF3FF 0%, #D8E2FF 10%, #BBCBFF 19%, #99B0FF 27%, #7592FF 35%,
			#5575F8 43%, #3A5BEE 51%, #2848DC 59%, #1D37BF 67%, #16299C 75%,
			#101E78 83%, #0B1556 91%, #070E36 100%);
	-webkit-mask-image: linear-gradient(180deg,
		transparent 0%, transparent 54%,
		rgb(0 0 0 / .03) 59%, rgb(0 0 0 / .09) 64%, rgb(0 0 0 / .19) 69%,
		rgb(0 0 0 / .33) 74%, rgb(0 0 0 / .50) 79%, rgb(0 0 0 / .68) 84%,
		rgb(0 0 0 / .84) 89%, rgb(0 0 0 / .95) 94%, #000 100%);
	mask-image: linear-gradient(180deg,
		transparent 0%, transparent 54%,
		rgb(0 0 0 / .03) 59%, rgb(0 0 0 / .09) 64%, rgb(0 0 0 / .19) 69%,
		rgb(0 0 0 / .33) 74%, rgb(0 0 0 / .50) 79%, rgb(0 0 0 / .68) 84%,
		rgb(0 0 0 / .84) 89%, rgb(0 0 0 / .95) 94%, #000 100%);
}
/* Les rayons : bandes fines alternées depuis un point sous l'écran. Leur
   propre fondu les fait naître après la couleur et mourir avant le bas, et
   ils s'estompent au centre, dans l'éclat. */
.hero__fond::after {
	top: 0;
	height: auto;
	background:
		repeating-conic-gradient(from -90deg at 50% 126%,
			rgb(255 255 255 / .17) 0deg .9deg,
			rgb(255 255 255 / 0) .9deg 1.8deg,
			rgb(6 14 44 / .09) 1.8deg 2.5deg,
			rgb(255 255 255 / 0) 2.5deg 3.4deg);
	-webkit-mask-image:
		linear-gradient(180deg, transparent 0%, transparent 64%, rgb(0 0 0 / .12) 71%, rgb(0 0 0 / .38) 78%, rgb(0 0 0 / .72) 85%, #000 90%, rgb(0 0 0 / .55) 96%, transparent 100%),
		radial-gradient(40% 22% at 50% 80%, rgb(0 0 0 / .25), #000 100%);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(180deg, transparent 0%, transparent 64%, rgb(0 0 0 / .12) 71%, rgb(0 0 0 / .38) 78%, rgb(0 0 0 / .72) 85%, #000 90%, rgb(0 0 0 / .55) 96%, transparent 100%),
		radial-gradient(40% 22% at 50% 80%, rgb(0 0 0 / .25), #000 100%);
	mask-composite: intersect;
}

/* --- Les textes passent en sombre sur le blanc --------------------------- */
.hero__titre { color: var(--nuit); }
.rot__mot    { color: #1332FF; }
.cadre {
	background: #FFFFFF;
	color: var(--nuit);
	border-color: #1332FF;
}
.hero__chapo { color: #47527A; }
.hero__rea {
	background: #FFFFFF;
	border-color: rgb(20 31 75 / .14);
	color: var(--nuit);
	box-shadow: 0 2px 10px rgb(20 31 75 / .06);
}

/* --- Les boutons : même forme, couleurs lisibles sur le blanc -------------
   Le principal (blanc métal) et le secondaire (verre blanc) disparaissaient
   sur un fond blanc. Seules leurs couleurs changent. */
.hero__actions .bouton--principal,
.hero__actions .bouton--principal:hover,
.hero__actions .bouton--principal:focus-visible {
	background: linear-gradient(180deg, #25305F 0%, #0B1330 100%);
	color: #FFFFFF;
	box-shadow:
		0 0 0 1px rgb(10 19 48 / .5),
		0 10px 22px -8px rgb(3 8 26 / .55),
		inset 0 1px 1px rgb(255 255 255 / .22);
}
.hero__actions .bouton--second,
.hero__actions .bouton--second:hover {
	background: #FFFFFF;
	color: var(--nuit);
	backdrop-filter: none;
	box-shadow:
		0 0 0 1px rgb(20 31 75 / .16),
		0 8px 18px -10px rgb(20 31 75 / .35);
}

/* ============================================================================
   2026-09-23 (nuit) — « SUR MESURE » ET RÉASSURANCE
   ========================================================================== */
/* Paul : « le sur-mesure 10 % plus gros que le reste du titre ; il n'est pas
   centré dans le cadre arrondi ; la bordure est trop fine ».
   « sur mesure » n'a que des lettres sans hampe : centré sur sa boîte de
   ligne, l'encre tombait bas (mesuré : 31 px au-dessus, 13,5 px au-dessous).
   On resserre l'interligne du cadre et on reporte le jeu vers le bas. */
.cadre {
	font-size: 1.1em;
	line-height: .8;
	padding: 0 .26em .27em;
	border-width: 3px;
}

/* Réassurance mise en avant : Paul — « davantage en avant, avec des rappels
   de bleu, et trois petits traits en haut à droite ». Les traits sont un SVG
   en ligne (aucun fichier), décoratifs. */
.hero__rea {
	position: relative;
	overflow: visible;
	background: linear-gradient(180deg, #FFFFFF 0%, #F1F5FF 100%);
	border: 1.5px solid rgb(19 50 255 / .35);
	color: var(--nuit);
	font-weight: 700;
	box-shadow: 0 6px 18px -8px rgb(19 50 255 / .45), inset 0 1px 0 #FFFFFF;
}
.hero__rea-points span { background: #1332FF; }
.hero__rea::after {
	content: "";
	position: absolute;
	/* trois éclats qui rayonnent depuis le coin haut droit de la pastille */
	top: -1.25rem;
	right: -1.45rem;
	width: 1.7rem;
	height: 1.7rem;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%231332FF" stroke-width="2.4" stroke-linecap="round"><path d="M2.2 16.4L4.4 7.8"/><path d="M5.6 18.4L12.4 11.6"/><path d="M7.6 21.6L16.4 19.4"/></svg>') no-repeat center / contain;
	pointer-events: none;
}
/* Sur mobile, le cadre agrandi touchait la ligne du dessus. */
@media (max-width: 599px) { .cadre { margin-block: .12em; } }

/* ============================================================================
   PREMIER ÉCRAN — FOND PLUS SOUTENU, STACK D'OUTILS EN BAS      2026-09-23
   ----------------------------------------------------------------------------
   Paul : « l'effet est trop fade ; il faut qu'en bas ce soit plutôt sombre,
   pour laisser la place à des logos blancs bien visibles ; un peu plus clair
   et moins fade vers le haut, un beau dégradé du bleu clair vers le bleu plus
   foncé ; les rayures plus sombres en bas, comme un lever de soleil ; et
   remonter légèrement la headline et tout ce qui va avec ».
   Remplace les deux couches de la révision précédente.
   ========================================================================== */
.hero { padding-bottom: 10.5rem; }          /* le bloc remonte, la stack a sa place */

.hero__fond::before {
	background:
		/* l'éclat, presque blanc, juste sous les boutons */
		radial-gradient(30% 13% at 50% 71%, rgb(255 255 255 / .92) 0%, rgb(236 242 255 / .55) 45%, rgb(214 225 255 / 0) 100%),
		/* les coins s'assombrissent : l'éventail se referme sur le bleu nuit */
		radial-gradient(75% 48% at 50% 74%, rgb(3 10 50 / 0) 45%, rgb(3 10 50 / .42) 100%),
		/* le dégradé vertical : bleu clair et vif en haut, bleu nuit en bas,
		   jusqu'au #01061C exact de la section suivante */
		linear-gradient(180deg,
			#B7C8FF 0%, #B7C8FF 52%, #93ADFF 60%, #6D8CFF 66%, #4B6CF6 72%,
			#3252E4 77%, #2240C8 82%, #1A31A2 87%, #13247B 91%, #0C1856 95%,
			#060E36 98%, #01061C 100%);
	-webkit-mask-image: linear-gradient(180deg,
		transparent 0%, transparent 48%,
		rgb(0 0 0 / .06) 53%, rgb(0 0 0 / .18) 58%, rgb(0 0 0 / .38) 63%,
		rgb(0 0 0 / .62) 68%, rgb(0 0 0 / .84) 73%, #000 79%);
	mask-image: linear-gradient(180deg,
		transparent 0%, transparent 48%,
		rgb(0 0 0 / .06) 53%, rgb(0 0 0 / .18) 58%, rgb(0 0 0 / .38) 63%,
		rgb(0 0 0 / .62) 68%, rgb(0 0 0 / .84) 73%, #000 79%);
}
/* Les rayons : plus marqués vers le bas, où les bandes sombres dominent. */
.hero__fond::after {
	background:
		repeating-conic-gradient(from -90deg at 50% 124%,
			rgb(255 255 255 / .16) 0deg .9deg,
			rgb(255 255 255 / 0) .9deg 1.8deg,
			rgb(2 8 40 / .18) 1.8deg 2.5deg,
			rgb(255 255 255 / 0) 2.5deg 3.4deg);
	-webkit-mask-image:
		linear-gradient(180deg, transparent 0%, transparent 60%, rgb(0 0 0 / .2) 67%, rgb(0 0 0 / .55) 74%, rgb(0 0 0 / .85) 82%, #000 90%),
		radial-gradient(34% 16% at 50% 72%, rgb(0 0 0 / .2), #000 100%);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(180deg, transparent 0%, transparent 60%, rgb(0 0 0 / .2) 67%, rgb(0 0 0 / .55) 74%, rgb(0 0 0 / .85) 82%, #000 90%),
		radial-gradient(34% 16% at 50% 72%, rgb(0 0 0 / .2), #000 100%);
	mask-composite: intersect;
}

/* --- La stack ------------------------------------------------------------- */
.stack {
	position: absolute;
	left: 0; right: 0;
	bottom: clamp(1.25rem, 3.5svh, 2.25rem);
	z-index: 2;
	text-align: center;
	color: #FFFFFF;
}
.stack__titre {
	margin-bottom: .9rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .14em;
	word-spacing: .2em;
	text-transform: uppercase;
	color: rgb(255 255 255 / .72);
}
.stack__fenetre {
	display: flex;
	overflow: clip;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.stack__piste {
	flex: none;
	display: flex;
	align-items: center;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	margin: 0;
	padding: 0 clamp(1.25rem, 2.5vw, 2.25rem);
	list-style: none;
}
.stack__outil {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -.01em;
	white-space: nowrap;
	opacity: .92;
}
.stack__outil svg { width: 1.6rem; height: 1.6rem; flex: none; }

/* Défilement continu. ⚠ Mouvement automatique de plus de 5 s : il s'arrête au
   survol et hors écran ; en mouvement réduit il ne défile pas (la liste est
   centrée, la copie masquée). Pas de bouton de pause — écart à §7.10
   consigné dans DECISIONS.md, comme pour les verbes et l'anneau de l'en-tête. */
@keyframes stack-defile { to { translate: -100% 0; } }
.stack__piste { animation: stack-defile 38s linear infinite; }
.stack__fenetre:hover .stack__piste { animation-play-state: paused; }
.hero:has(.hero__fond.hors-champ) .stack__piste { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
	.stack__piste { animation: none; }
	.stack__piste[aria-hidden] { display: none; }
	.stack__fenetre { justify-content: center; flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; }
	.stack__piste { flex-wrap: wrap; justify-content: center; row-gap: 1rem; }
}
@media (max-width: 599px) {
	.hero { padding-bottom: 8.5rem; }
	.stack__outil { font-size: 1rem; }
	.stack__outil svg { width: 1.35rem; height: 1.35rem; }
}

/* ============================================================================
   ESSAI — L'EN-TÊTE CLAIRE                                       2026-09-23
   ----------------------------------------------------------------------------
   Paul : « on enlève le header noir ; comme le haut de la page est blanc, on
   peut tout mettre en couleur foncée : Solutions, Cas clients, Méthode, et le
   logo. Le logo : les lettres sont trop espacées. Réservez votre audit : garder
   le bouton, écriture en noir, un rappel de bleu. WhatsApp : pareil, sans le
   fond noir. Tout sur le blanc, mais garder les bordures bleues. »
   Tout est borné à `.entete--clair` : la version sombre reste intacte
   dessous. Revenir en arrière = retirer la classe dans header.php.
   La pilule est BLANCHE (et non transparente) : elle passe aussi sur les
   sections bleu nuit plus bas, où une en-tête transparente disparaîtrait.
   ========================================================================== */
.entete--clair .entete__barre {
	background: rgb(255 255 255 / .97);   /* sur le bleu nuit, le titre se lisait au travers à .92 */
	border-color: transparent;
	backdrop-filter: blur(14px) saturate(140%);
	box-shadow:
		0 1px 2px rgb(20 31 75 / .06),
		0 12px 32px -14px rgb(20 31 75 / .30);
}
/* L'anneau de lumière bleue est conservé tel quel (::before). */

.entete--clair .entete__monogramme { background: var(--nuit); }
.entete--clair .entete__mot {
	color: var(--nuit);
	letter-spacing: .035em;          /* « les lettres sont trop espacées » (0,14 em avant) */
}
.entete--clair .entete__marque:hover .entete__mot { letter-spacing: .06em; }

.entete--clair .nav__liste a { color: #3D4870; }
.entete--clair .nav__liste a:hover { color: var(--nuit); background: rgb(20 31 75 / .06); }

/* « Réservez votre audit » : texte noir, rappel de bleu */
.entete--clair .audit,
.entete--clair .audit:hover {
	background: linear-gradient(180deg, #F6F8FF 0%, #E4EBFF 100%);
	color: #0B1330;
	box-shadow:
		0 0 0 1.5px rgb(19 50 255 / .45),
		0 6px 16px -8px rgb(19 50 255 / .55),
		inset 0 1px 0 #FFFFFF;
}
.entete--clair .audit:hover {
	box-shadow:
		0 0 0 1.5px rgb(19 50 255 / .8),
		0 10px 22px -8px rgb(19 50 255 / .6),
		inset 0 1px 0 #FFFFFF;
}

/* ============================================================================
   STACK AGRANDIE, SANS RÉPÉTITION ; RAYONS QUI S'ÉTEIGNENT     2026-09-23
   ----------------------------------------------------------------------------
   Paul : « agrandir les logos, les remonter, et qu'il n'y ait pas de
   répétition (on voit Supabase deux fois) ; entre le héros et "Votre
   entreprise tourne" il n'y a pas de transition : il faudrait que les rayons
   s'estompent petit à petit et que ça se transforme complètement en la
   couleur de la section suivante ».
   ⚠ Une boucle de défilement montre DEUX copies de la liste : si une copie
   est plus étroite que l'écran, le même logo apparaît deux fois. Chaque copie
   fait donc au moins la largeur de l'écran.
   ========================================================================== */
.hero { padding-bottom: 13rem; }
.stack { bottom: clamp(2.5rem, 7svh, 4.5rem); }
.stack__titre { margin-bottom: 1.25rem; font-size: .8rem; }
.stack__piste {
	min-width: 100vw;
	justify-content: space-around;
	gap: clamp(3rem, 5.5vw, 5.5rem);
}
.stack__outil { font-size: 1.45rem; gap: .75rem; }
.stack__outil svg { width: 2.2rem; height: 2.2rem; }
@media (max-width: 599px) {
	.hero { padding-bottom: 10rem; }
	.stack__outil { font-size: 1.15rem; }
	.stack__outil svg { width: 1.7rem; height: 1.7rem; }
}

/* Les rayons s'éteignent sur le dernier sixième du premier écran, et la
   couleur y rejoint le #01061C où commence la section des problèmes. */
.hero__fond::after {
	-webkit-mask-image:
		linear-gradient(180deg, transparent 0%, transparent 60%, rgb(0 0 0 / .2) 67%, rgb(0 0 0 / .55) 74%, rgb(0 0 0 / .8) 81%, rgb(0 0 0 / .6) 88%, rgb(0 0 0 / .28) 94%, transparent 100%),
		radial-gradient(34% 16% at 50% 72%, rgb(0 0 0 / .2), #000 100%);
	mask-image:
		linear-gradient(180deg, transparent 0%, transparent 60%, rgb(0 0 0 / .2) 67%, rgb(0 0 0 / .55) 74%, rgb(0 0 0 / .8) 81%, rgb(0 0 0 / .6) 88%, rgb(0 0 0 / .28) 94%, transparent 100%),
		radial-gradient(34% 16% at 50% 72%, rgb(0 0 0 / .2), #000 100%);
}
/* La section des problèmes prolonge le bleu du bas du héros sur son premier
   tiers, puis retrouve son bleu nuit : la couleur ne change pas d'un coup. */
.probleme {
	background:
		radial-gradient(46rem 34rem at 2% 62%,  rgb(19 50 255 / .26), transparent 58%),
		radial-gradient(56rem 38rem at 98% 45%, rgb(19 50 255 / .22), transparent 62%),
		radial-gradient(70rem 46rem at 50% 45%, rgb(6 14 48 / .55), transparent 74%),
		/* part du bleu exact où finit le héros (#0D195A), s'assombrit
		   lentement, puis rejoint le bleu nuit de la scène des lettres */
		linear-gradient(180deg, #0D195A 0%, #0B1650 8%, #09123F 18%, #060E2C 38%, var(--nuit-uni) 100%);
}
/* Le héros converge, sur toute sa largeur, vers ce même #0D195A : la couche
   du dessus uniformise le bas (les coins n'y sont plus plus sombres). */
.hero__fond::before {
	background:
		linear-gradient(180deg, rgb(13 25 90 / 0) 86%, rgb(13 25 90 / .75) 95%, #0D195A 100%),
		radial-gradient(30% 13% at 50% 71%, rgb(255 255 255 / .92) 0%, rgb(236 242 255 / .55) 45%, rgb(214 225 255 / 0) 100%),
		radial-gradient(75% 48% at 50% 74%, rgb(3 10 50 / 0) 45%, rgb(3 10 50 / .42) 100%),
		linear-gradient(180deg,
			#B7C8FF 0%, #B7C8FF 52%, #93ADFF 60%, #6D8CFF 66%, #4B6CF6 72%,
			#3252E4 77%, #2240C8 82%, #1A31A2 87%, #13247B 91%, #0F1D66 95%,
			#0D195A 100%);
}

/* ============================================================================
   CE QUI PEUT TOURNER TOUT SEUL — le « menu déroulant »           2026-09-23
   ----------------------------------------------------------------------------
   Une liste de tâches qui défile de bas en haut au rythme du défilement, comme
   un sélecteur à molette : la tâche au centre est en couleur, les autres
   s'estompent vers le haut et le bas. À gauche, le service de la tâche au
   centre s'allume.
   Technique : chaque tâche (et chaque service) porte sa FENÊTRE de la course
   (--de → --a, calculées en PHP) et une animation en `fill-mode: none` sur
   cette seule plage : hors de sa fenêtre, l'élément reprend son style de
   base. Aucun JavaScript, piloté par la position (R8.4), réversible.
   Repli : liste ordinaire, tout en couleur.
   ========================================================================== */
.auto { background: #F5F7FE; color: var(--nuit); }
.auto__piste { padding: var(--section) var(--gouttiere); }
.auto__scene {
	display: grid;
	gap: 2.5rem;
	max-width: var(--largeur);
	margin-inline: auto;
}
.auto__titre {
	max-width: 14em;
	font-size: clamp(2rem, 1.1rem + 3vw, 3.4rem);
	line-height: 1.06;
	letter-spacing: -.03em;
	font-weight: 800;
	text-wrap: balance;
}
.auto__intro { margin-top: 1rem; max-width: 30em; font-size: var(--t-chapo); color: #47527A; }
.auto__services {
	display: flex; flex-wrap: wrap; gap: .5rem;
	margin: 2rem 0 0; padding: 0; list-style: none;
}
.auto__service {
	padding: .45rem .95rem;
	border-radius: 999px;
	font-size: .95rem; font-weight: 700;
	color: var(--nuit);
	background: #FFFFFF;
	box-shadow: inset 0 0 0 1px #DDE3F4;
}
.auto__tambour { position: relative; }
.auto__selecteur { display: none; }
.auto__liste { margin: 0; padding: 0; list-style: none; display: grid; gap: .25rem; }
.auto__tache {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	min-height: 3.6rem;
	padding: 0 1.25rem;
	border-radius: 1rem;
	background: #FFFFFF;
	box-shadow: inset 0 0 0 1px #E4E8F3;
}
.auto__nom { font-size: clamp(1.1rem, .95rem + .6vw, 1.5rem); font-weight: 700; letter-spacing: -.01em; }
.auto__tag {
	flex: none;
	padding: .25rem .65rem;
	border-radius: 999px;
	font-size: .75rem; font-weight: 700;
	background: #EEF2FF; color: #1332FF;
}

@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		.auto__piste {
			height: 320svh;
			padding: 0;
			view-timeline: --auto block;
		}
		.auto__scene {
			position: sticky; top: 0;
			height: 100svh;
			grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
			align-items: center;
			gap: clamp(2rem, 5vw, 5rem);
			padding: 6rem var(--gouttiere) 2rem;
			max-width: none;
		}
		.auto__gauche { max-width: 34rem; justify-self: end; }

		/* le tambour : une fenêtre qui s'estompe en haut et en bas */
		.auto__tambour {
			height: min(34rem, 70svh);
			overflow: clip;
			-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 32%, #000 68%, transparent 100%);
			mask-image: linear-gradient(180deg, transparent 0%, #000 32%, #000 68%, transparent 100%);
		}
		.auto__selecteur {
			display: block;
			position: absolute;
			left: 0; right: 0;
			top: 50%;
			height: 4.6rem;
			translate: 0 -50%;
			border-radius: 1.25rem;
			background: #FFFFFF;
			box-shadow:
				0 0 0 2px rgb(19 50 255 / .45),
				0 18px 40px -18px rgb(19 50 255 / .55);
		}
		.auto__liste {
			position: absolute;
			left: 0; right: 0;
			top: calc(50% - 2.3rem);
			gap: 0;
			animation: auto-defile linear both;
			animation-timeline: --auto;
			animation-range: contain 0% contain 100%;
		}
		/* @keyframes auto-defile : écrites dans front-page.php (un arrêt par tâche). */

		.auto__tache {
			height: 4.6rem;
			min-height: 0;
			background: none;
			box-shadow: none;
			padding-inline: 1.75rem;
			color: #AEB6CE;
		}
		.auto__tag { background: transparent; color: #B8C0D6; box-shadow: inset 0 0 0 1px #DDE3F4; }

		/* La tâche au centre : en couleur, pendant sa seule fenêtre. */
		.auto__tache, .auto__service {
			animation-duration: auto;
			animation-timing-function: linear;
			animation-fill-mode: none;
			animation-timeline: --auto;
			animation-range: contain var(--de) contain var(--a);
		}
		.auto__tache { animation-name: auto-tache; }
		@keyframes auto-tache {
			0%, 100% { color: #AEB6CE; }
			30%, 70% { color: var(--nuit); }
		}
		.auto__tache .auto__tag {
			animation: auto-tag linear none;
			animation-timeline: --auto;
			animation-range: contain var(--de) contain var(--a);
		}
		/* le premier service suit la même règle que la première tâche */
		.auto__service:first-child { animation-fill-mode: backwards; }
		.auto__service:last-child  { animation-fill-mode: forwards; }
		@keyframes auto-tag {
			0%, 100% { background: transparent; color: #B8C0D6; }
			30%, 70% { background: #1332FF; color: #FFFFFF; }
		}
		.auto__tache .auto__nom {
			transform-origin: 0 50%;
			animation: auto-nom linear none;
			animation-timeline: --auto;
			animation-range: contain var(--de) contain var(--a);
		}
		@keyframes auto-nom {
			0%, 100% { scale: 1; }
			30%, 70% { scale: 1.08; }
		}

		/* À gauche, le service de la tâche au centre s'allume. */
		.auto__service { color: #9AA5C8; background: transparent; box-shadow: inset 0 0 0 1px #DDE3F4; }
		.auto__service { animation-name: auto-service; }
		@keyframes auto-service {
			0%, 100% { background: #1332FF; color: #FFFFFF; box-shadow: 0 8px 18px -8px rgb(19 50 255 / .7); }
		}
	}
}

/* La première et la dernière tâche sont allumées aux deux bouts de la course
   (sans quoi la molette démarrait et finissait sur une tâche éteinte). */
@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		/* `backwards` / `forwards` : allumées aussi AVANT le début et APRÈS la
		   fin de la course (à l'arrivée dans la section, la course n'a pas
		   encore commencé et la première tâche restait éteinte). */
		.auto__tache--premiere, .auto__tache--premiere .auto__tag, .auto__tache--premiere .auto__nom { animation-fill-mode: backwards; }
		.auto__tache--derniere, .auto__tache--derniere .auto__tag, .auto__tache--derniere .auto__nom { animation-fill-mode: forwards; }
		.auto__tache--premiere { animation-name: auto-tache-debut; }
		.auto__tache--premiere .auto__tag { animation-name: auto-tag-debut; }
		.auto__tache--premiere .auto__nom { animation-name: auto-nom-debut; }
		@keyframes auto-tache-debut { 0%, 70% { color: var(--nuit); } 100% { color: #AEB6CE; } }
		@keyframes auto-tag-debut { 0%, 70% { background: #1332FF; color: #FFFFFF; } 100% { background: transparent; color: #B8C0D6; } }
		@keyframes auto-nom-debut { 0%, 70% { scale: 1.08; } 100% { scale: 1; } }
		.auto__tache--derniere { animation-name: auto-tache-fin; }
		.auto__tache--derniere .auto__tag { animation-name: auto-tag-fin; }
		.auto__tache--derniere .auto__nom { animation-name: auto-nom-fin; }
		@keyframes auto-tache-fin { 0% { color: #AEB6CE; } 30%, 100% { color: var(--nuit); } }
		@keyframes auto-tag-fin { 0% { background: transparent; color: #B8C0D6; } 30%, 100% { background: #1332FF; color: #FFFFFF; } }
		@keyframes auto-nom-fin { 0% { scale: 1; } 30%, 100% { scale: 1.08; } }
	}
}

/* ============================================================================
   L'IA, LÀ OÙ ELLE SERT                                          2026-09-23
   ----------------------------------------------------------------------------
   Sur le bleu nuit uni du site : une affirmation, puis trois engagements.
   La moitié du titre est en typographie argentée (celle que Paul aime dans la
   scène). Entrée en fondu au défilement, sans rien masquer hors séquence.
   ========================================================================== */
.ia {
	position: relative;
	background:
		radial-gradient(60rem 30rem at 50% 0%, rgb(19 50 255 / .22), transparent 70%),
		var(--nuit-uni);
	color: #FFFFFF;
	padding-block: var(--section);
	overflow: clip;
}
.ia .conteneur { text-align: center; }
.ia__titre {
	font-size: clamp(2.3rem, 1.2rem + 4vw, 4.6rem);
	line-height: 1.02;
	letter-spacing: -.035em;
	font-weight: 800;
}
.ia__titre span {
	display: block;
	padding-bottom: .12em;
	background: linear-gradient(180deg, #FFFFFF 0%, rgb(255 255 255 / .42) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.ia__intro {
	max-width: 32em;
	margin: 1.25rem auto 0;
	font-size: var(--t-chapo);
	color: #C9D3F2;
	text-wrap: balance;
}
.ia__points {
	list-style: none;
	margin: clamp(2.5rem, 5vw, 4rem) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	text-align: left;
}
.ia__point {
	position: relative;
	padding: 1.75rem 1.5rem 1.9rem;
	border-radius: 1.25rem;
	background: linear-gradient(180deg, rgb(255 255 255 / .07), rgb(255 255 255 / .02));
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / .10);
}
.ia__num {
	display: inline-grid; place-items: center;
	width: 2.4rem; height: 2.4rem;
	border-radius: .8rem;
	background: #1332FF;
	font-size: .8rem; font-weight: 800;
	box-shadow: 0 10px 22px -10px rgb(19 50 255 / .9);
}
.ia__point h3 { margin-top: 1.25rem; font-size: 1.35rem; line-height: 1.2; font-weight: 800; }
.ia__point p { margin-top: .6rem; color: #C9D3F2; max-width: 30em; }

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.ia__point {
			animation: ia-entree linear both;
			animation-timeline: view();
			animation-range: entry 10% cover 35%;
		}
		.ia__point:nth-child(2) { animation-range: entry 20% cover 40%; }
		.ia__point:nth-child(3) { animation-range: entry 30% cover 45%; }
		@keyframes ia-entree { from { opacity: 0; translate: 0 36px; } to { opacity: 1; translate: 0 0; } }
	}
}

/* ============================================================================
   HÉROS + PROBLÈMES = UNE SEULE SECTION ; STACK SANS LIBELLÉ     2026-09-23
   ----------------------------------------------------------------------------
   Paul : « que la hero et la section problèmes soient encore mieux fondues,
   qu'on ait l'impression qu'elles forment une seule et même section ».
   Les rayons ne s'arrêtent plus à la limite : ils la TRAVERSENT. Leur point
   d'origine est à 124 % de la hauteur du héros (100 svh), donc à 24 svh sous
   le haut de la section des problèmes ; une couche identique y est posée à
   ce même point, et s'éteint avant de l'atteindre. Même angle, même pas,
   même opacité à la couture : les rayons continuent sans raccord.
   ========================================================================== */
.hero__fond::after {
	-webkit-mask-image:
		linear-gradient(180deg, transparent 0%, transparent 60%, rgb(0 0 0 / .2) 67%, rgb(0 0 0 / .55) 74%, rgb(0 0 0 / .8) 81%, rgb(0 0 0 / .7) 90%, rgb(0 0 0 / .55) 100%),
		radial-gradient(34% 16% at 50% 72%, rgb(0 0 0 / .2), #000 100%);
	mask-image:
		linear-gradient(180deg, transparent 0%, transparent 60%, rgb(0 0 0 / .2) 67%, rgb(0 0 0 / .55) 74%, rgb(0 0 0 / .8) 81%, rgb(0 0 0 / .7) 90%, rgb(0 0 0 / .55) 100%),
		radial-gradient(34% 16% at 50% 72%, rgb(0 0 0 / .2), #000 100%);
}
.probleme__rayons {
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 24svh;
	z-index: -1;
	pointer-events: none;
	background:
		repeating-conic-gradient(from -90deg at 50% 100%,
			rgb(255 255 255 / .16) 0deg .9deg,
			rgb(255 255 255 / 0) .9deg 1.8deg,
			rgb(2 8 40 / .18) 1.8deg 2.5deg,
			rgb(255 255 255 / 0) 2.5deg 3.4deg);
	-webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / .55) 0%, rgb(0 0 0 / .38) 25%, rgb(0 0 0 / .2) 50%, rgb(0 0 0 / .07) 75%, transparent 100%);
	mask-image: linear-gradient(180deg, rgb(0 0 0 / .55) 0%, rgb(0 0 0 / .38) 25%, rgb(0 0 0 / .2) 50%, rgb(0 0 0 / .07) 75%, transparent 100%);
}
/* Le bas du héros ne s'aplatit plus en un aplat uni : la couleur seule y
   converge, les rayons passent par-dessus. */
.hero__fond::before {
	background:
		linear-gradient(180deg, rgb(13 25 90 / 0) 90%, rgb(13 25 90 / .6) 97%, #0D195A 100%),
		radial-gradient(30% 13% at 50% 71%, rgb(255 255 255 / .92) 0%, rgb(236 242 255 / .55) 45%, rgb(214 225 255 / 0) 100%),
		radial-gradient(75% 48% at 50% 74%, rgb(3 10 50 / 0) 45%, rgb(3 10 50 / .30) 100%),
		linear-gradient(180deg,
			#B7C8FF 0%, #B7C8FF 52%, #93ADFF 60%, #6D8CFF 66%, #4B6CF6 72%,
			#3252E4 77%, #2240C8 82%, #1A31A2 87%, #13247B 91%, #0F1D66 95%,
			#0D195A 100%);
}
/* La section des problèmes reprend sans marge de respiration visible : le
   titre arrive plus tôt, comme la suite du même écran. */
.probleme { padding-top: calc(var(--section) * .8); }

/* --- La stack : sans libellé, logos plus grands --------------------------- */
.stack__titre { display: none; }
.stack__outil { font-size: 1.75rem; gap: .85rem; }
.stack__outil svg { width: 2.7rem; height: 2.7rem; }
.stack__piste { gap: clamp(3.5rem, 6vw, 6.5rem); }
@media (max-width: 599px) {
	.stack__outil { font-size: 1.3rem; }
	.stack__outil svg { width: 2rem; height: 2rem; }
}

/* 2026-09-23 — Paul : « épaissis la bordure de "sur mesure" ; ajoute les 3
   mêmes barres à gauche de "+5 projets livrés", pour que ce soit symétrique ». */
.cadre { border-width: 4px; }
.hero__rea::before {
	content: "";
	position: absolute;
	top: -1.25rem;
	left: -1.45rem;
	width: 1.7rem;
	height: 1.7rem;
	/* les mêmes éclats, en miroir */
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%231332FF" stroke-width="2.4" stroke-linecap="round"><path d="M2.2 16.4L4.4 7.8"/><path d="M5.6 18.4L12.4 11.6"/><path d="M7.6 21.6L16.4 19.4"/></svg>') no-repeat center / contain;
	transform: scaleX(-1);
	pointer-events: none;
}

/* ============================================================================
   LA CARTE ARRIVE DIRECTEMENT APRÈS « ON RÈGLE ÇA. »              2026-09-23
   ----------------------------------------------------------------------------
   Paul : « je n'aime pas "On ne commence pas par un logiciel" ; la carte qui
   arrive avec la première étape doit arriver juste après "On règle ça" ».
   L'intro est retirée. Pour que la carte monte SUR la page blanche d'« On règle
   ça » et non sur un nouveau fond, la scène est blanche tant que la carte est
   là, et ne passe au bleu nuit qu'au moment où l'appel final se dessine
   derrière la carte qui se referme. La carte, sur le blanc, se détache par un
   liseré bleu très léger. Elle monte de moins loin et s'ouvre plus tôt.
   ========================================================================== */
@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		.cine__scene {
			animation: frise-fond linear both;
			animation-timeline: --cine;
			animation-range: contain 0% contain 100%;
		}
		@keyframes frise-fond {
			0%, 78%   { background-color: #FFFFFF; }
			84%, 100% { background-color: var(--nuit-uni); }
		}
		.cine__grain { display: none; }
		.cine__carte { background: rgb(19 50 255 / .22); }
		@keyframes frise-carte {
			/* part de 28 svh : elle pointe dès qu'« On règle ça. » remonte */
			0%   { translate: 0 28svh; clip-path: inset(7.5% 7.5% round 40px);
			       animation-timing-function: cubic-bezier(.3, .7, .3, 1); }
			7%   { translate: 0 0;     clip-path: inset(7.5% 7.5% round 40px);
			       animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
			15%  { translate: 0 0;     clip-path: inset(0% 0% round 0px); }
			80%  { translate: 0 0;     clip-path: inset(0% 0% round 0px);
			       animation-timing-function: cubic-bezier(.87, 0, .13, 1); }
			90%  { translate: 0 0;     clip-path: inset(7.5% 7.5% round 40px);
			       animation-timing-function: cubic-bezier(.55, .055, .675, .19); }
			100% { translate: 0 -118svh; clip-path: inset(7.5% 7.5% round 40px); }
		}
		@keyframes frise-face {
			0%, 7% { clip-path: inset(calc(7.5% + 1px) calc(7.5% + 1px) round 39px);
			         animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
			15%    { clip-path: inset(calc(0% + 1px) calc(0% + 1px) round 0px); }
			80%    { clip-path: inset(calc(0% + 1px) calc(0% + 1px) round 0px);
			         animation-timing-function: cubic-bezier(.87, 0, .13, 1); }
			90%, 100% { clip-path: inset(calc(7.5% + 1px) calc(7.5% + 1px) round 39px); }
		}
		@keyframes frise-contenu {
			0%, 7%    { scale: .84; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
			15%, 80%  { scale: 1;   animation-timing-function: cubic-bezier(.87, 0, .13, 1); }
			90%, 100% { scale: .84; }
		}
	}
}

/* ============================================================================
   DERRIÈRE SALYS — Paul et Clément                               2026-09-23
   ----------------------------------------------------------------------------
   À gauche, les deux visages en ronds qui se chevauchent légèrement, liserés
   de blanc et d'un anneau bleu ; à droite, le texte. L'engagement final est
   mis en valeur sur une pastille bleu très pâle.
   ========================================================================== */
.equipe {
	background:
		radial-gradient(40rem 26rem at 18% 50%, rgb(19 50 255 / .08), transparent 70%),
		#F5F7FE;
	color: var(--nuit);
	padding-block: var(--section);
}
.equipe__grille {
	display: grid;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}
@media (min-width: 900px) {
	.equipe__grille { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}
.equipe__visages {
	display: flex;
	justify-content: center;
	align-items: flex-start;
}
.equipe__visage { margin: 0; text-align: center; }
.equipe__visage img {
	display: block;
	width: clamp(8.5rem, 14vw, 12rem);
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	border: 5px solid #FFFFFF;
	box-shadow:
		0 0 0 2px rgb(19 50 255 / .55),
		0 22px 44px -18px rgb(11 20 55 / .45);
}
.equipe__visage--clement { margin-left: -1.75rem; margin-top: 3.5rem; }
.equipe__visage figcaption {
	margin-top: .75rem;
	font-weight: 800;
	font-size: 1.05rem;
	color: var(--nuit);
}
.equipe__titre {
	font-size: clamp(2rem, 1.1rem + 3vw, 3.4rem);
	line-height: 1.06;
	letter-spacing: -.03em;
	font-weight: 800;
	text-wrap: balance;
}
.equipe__titre span { color: #1332FF; }
.equipe__texte > p { margin-top: 1rem; max-width: 36em; font-size: 1.1rem; color: #47527A; }
.equipe__texte > p:first-of-type { margin-top: 1.5rem; color: var(--nuit); font-weight: 600; font-size: 1.2rem; }
.equipe__engagement {
	margin-top: 1.75rem !important;
	padding: 1.1rem 1.25rem;
	border-radius: 1rem;
	background: #FFFFFF;
	color: var(--nuit) !important;
	font-weight: 600;
	box-shadow: inset 0 0 0 1.5px rgb(19 50 255 / .30), 0 12px 28px -18px rgb(19 50 255 / .5);
}

/* ============================================================================
   DERRIÈRE SALYS — les photos détourées, en scène                 2026-09-23
   ----------------------------------------------------------------------------
   Une arche au dégradé du premier écran (bleu très pâle en haut, bleu vif puis
   bleu nuit en bas, rayons en éventail), et les deux cofondateurs posés
   dessus : leurs têtes débordent de l'arche, leur coupe basse est alignée sur
   son bord droit. Paul, à droite, regarde Clément. Au défilement, l'arche se
   déploie et ils montent légèrement (piloté par la position, R8.4).
   ========================================================================== */
.equipe__scene {
	position: relative;
	width: min(100%, 36rem);
	aspect-ratio: 36 / 31;
	margin-inline: auto;
}
.equipe__arche {
	position: absolute;
	left: 3%; right: 3%; bottom: 0;
	height: 74%;
	border-radius: 999px 999px 1.75rem 1.75rem;
	overflow: hidden;
	background:
		repeating-conic-gradient(from -90deg at 50% 118%,
			rgb(255 255 255 / .16) 0deg 1.2deg,
			rgb(255 255 255 / 0) 1.2deg 2.4deg,
			rgb(2 8 40 / .12) 2.4deg 3.3deg,
			rgb(255 255 255 / 0) 3.3deg 4.5deg),
		radial-gradient(60% 45% at 50% 30%, rgb(255 255 255 / .55), transparent 70%),
		linear-gradient(180deg, #DCE6FF 0%, #A9BEFF 22%, #6D8CFF 45%, #3252E4 68%, #1A31A2 86%, #0D195A 100%);
	box-shadow:
		0 30px 60px -30px rgb(11 20 55 / .55),
		inset 0 0 0 1px rgb(255 255 255 / .35);
}
.equipe__personne {
	position: absolute;
	bottom: 0;
	margin: 0;
}
.equipe__personne img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 18px 26px rgb(11 20 55 / .35));
}
.equipe__personne--clement { left: 4%; width: 54%; z-index: 1; }
.equipe__personne--paul    { right: 3%; width: 48%; z-index: 2; }

/* Les étiquettes, en verre, au pied de chacun */
.equipe__nom {
	position: absolute;
	bottom: 1rem;
	display: grid;
	gap: .05rem;
	padding: .55rem .9rem;
	border-radius: .9rem;
	background: rgb(255 255 255 / .86);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 10px 24px -12px rgb(11 20 55 / .5), inset 0 0 0 1px rgb(255 255 255 / .9);
	font-size: .78rem;
	color: #5A6386;
	line-height: 1.25;
	white-space: nowrap;
}
.equipe__nom b { font-size: 1rem; font-weight: 800; color: var(--nuit); }
.equipe__personne--clement .equipe__nom { left: 6%; }
.equipe__personne--paul .equipe__nom { right: 6%; text-align: right; }

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.equipe__arche {
			transform-origin: 50% 100%;
			animation: equipe-arche linear both;
			animation-timeline: view();
			animation-range: entry 5% cover 40%;
		}
		@keyframes equipe-arche { from { scale: .86; opacity: .4; } to { scale: 1; opacity: 1; } }
		.equipe__personne img {
			animation: equipe-monte linear both;
			animation-timeline: view();
			animation-range: entry 10% cover 45%;
		}
		.equipe__personne--paul img { animation-range: entry 16% cover 50%; }
		@keyframes equipe-monte { from { translate: 0 8%; } to { translate: 0 0; } }
	}
}
/* La coupe basse des photos reste alignée sur le bord de l'arche : pendant la
   montée, ce qui dépasse sous les PHOTOS est rogné (et non la scène entière,
   qui coupait aussi l'ombre de l'arche en une bande grise). */
.equipe__personne { clip-path: inset(-60% -40% 0 -40%); }
.equipe__arche { box-shadow: 0 24px 50px -34px rgb(11 20 55 / .5), inset 0 0 0 1px rgb(255 255 255 / .35); }
.equipe__personne--clement { left: 0; width: 60%; }
.equipe__personne--paul    { right: 0; width: 53%; }
.equipe__arche { left: 5%; right: 5%; height: 70%; }
@media (min-width: 900px) { .equipe__scene { align-self: center; } }
/* Équilibre arche / personnages : l'arche se lit, seules les têtes en débordent ;
   ombre courte (une ombre longue, rognée au pied, faisait un voile gris). */
.equipe__arche { left: 2%; right: 2%; height: 80%; }
.equipe__personne--clement { left: 3%; width: 55%; }
.equipe__personne--paul    { right: 3%; width: 49%; }
.equipe__personne img { filter: drop-shadow(0 8px 14px rgb(11 20 55 / .28)); }

/* ============================================================================
   LA CARTE VIENT SE POSER SUR « ON RÈGLE ÇA. »                    2026-09-23
   ----------------------------------------------------------------------------
   Paul : « quand on est sur "On règle ça", c'est la carte "On vous pose les
   bonnes questions" qui doit venir se superposer, sans prendre toute la page
   au début, puis se poser dessus comme précédemment ».
   ⚠ La version précédente (scène blanche) rendait la carte blanche sur blanc :
   on ne voyait plus de carte, l'animation semblait avoir disparu.
   Désormais :
     · la scène CHEVAUCHE l'écran d'« On règle ça. » (marge −100 svh) et son
       fond est TRANSPARENT tant que la carte monte : on voit la phrase derrière ;
     · la carte monte du bas en CARTE (inset 7,5 %, arrondie), avec une ombre
       portée et un liseré bleu qui la détachent du blanc ;
     · elle se pose sur la phrase, puis s'ouvre en plein écran ; le fond de la
       scène devient blanc sous elle, puis bleu nuit pour l'appel final.
   ========================================================================== */
@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		.apres { min-height: 100svh; display: grid; align-content: center; }
		.cine {
			position: relative;
			z-index: 1;
			margin-top: -100svh;
			background: transparent;
		}
		/* l'ombre portée de la carte : sur la scène (la carte, elle, est
		   rognée par son clip-path, qui couperait sa propre ombre) */
		.cine__scene { filter: drop-shadow(0 30px 50px rgb(11 20 55 / .28)); }
		@keyframes frise-fond {
			0%, 12%   { background-color: rgb(255 255 255 / 0); }
			16%, 78%  { background-color: #FFFFFF; }
			84%, 100% { background-color: var(--nuit-uni); }
		}
		.cine__carte { background: linear-gradient(160deg, rgb(78 118 255 / .55), rgb(19 50 255 / .25)); }
		@keyframes frise-carte {
			/* elle part SOUS l'écran et monte sur « On règle ça. » */
			0%   { translate: 0 92svh; clip-path: inset(7.5% 7.5% round 40px);
			       animation-timing-function: cubic-bezier(.22, .8, .3, 1); }
			/* elle se pose, en carte, par-dessus la phrase */
			9%   { translate: 0 0;     clip-path: inset(7.5% 7.5% round 40px);
			       animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
			/* puis elle s'ouvre */
			16%  { translate: 0 0;     clip-path: inset(0% 0% round 0px); }
			80%  { translate: 0 0;     clip-path: inset(0% 0% round 0px);
			       animation-timing-function: cubic-bezier(.87, 0, .13, 1); }
			90%  { translate: 0 0;     clip-path: inset(7.5% 7.5% round 40px);
			       animation-timing-function: cubic-bezier(.55, .055, .675, .19); }
			100% { translate: 0 -118svh; clip-path: inset(7.5% 7.5% round 40px); }
		}
		@keyframes frise-face {
			0%, 9% { clip-path: inset(calc(7.5% + 1.5px) calc(7.5% + 1.5px) round 38.5px);
			         animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
			16%    { clip-path: inset(calc(0% + 1px) calc(0% + 1px) round 0px); }
			80%    { clip-path: inset(calc(0% + 1px) calc(0% + 1px) round 0px);
			         animation-timing-function: cubic-bezier(.87, 0, .13, 1); }
			90%, 100% { clip-path: inset(calc(7.5% + 1.5px) calc(7.5% + 1.5px) round 38.5px); }
		}
		@keyframes frise-contenu {
			0%, 9%    { scale: .84; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
			16%, 80%  { scale: 1;   animation-timing-function: cubic-bezier(.87, 0, .13, 1); }
			90%, 100% { scale: .84; }
		}
	}
}

/* ============================================================================
   DERRIÈRE SALYS — BANDEAU PLEINE LARGEUR, LOGO GÉANT              2026-09-23
   ----------------------------------------------------------------------------
   Paul : « nos deux têtes doivent prendre toute la largeur de la page, et il
   doit y avoir le logo ». Remplace l'arche.
   Le bandeau reprend la matière du premier écran (bleu pâle → bleu vif →
   bleu nuit, rayons en éventail) : la page se referme comme elle s'ouvre.
   Derrière eux, le logo en géant (monogramme + SALYS), en blanc dégradé ;
   devant, Paul et Clément, qui débordent sur les lettres.
   ========================================================================== */
.equipe { padding-top: 0; }
.equipe__bandeau {
	position: relative;
	height: clamp(24rem, 50vw, 46rem);
	overflow: clip;
	background:
		repeating-conic-gradient(from -90deg at 50% 120%,
			rgb(255 255 255 / .14) 0deg .9deg,
			rgb(255 255 255 / 0) .9deg 1.8deg,
			rgb(2 8 40 / .14) 1.8deg 2.5deg,
			rgb(255 255 255 / 0) 2.5deg 3.4deg),
		radial-gradient(55% 60% at 50% 100%, rgb(255 255 255 / .35), transparent 70%),
		linear-gradient(180deg, #0D195A 0%, #1A31A2 30%, #3252E4 62%, #6D8CFF 86%, #93ADFF 100%);
}
/* le logo, en géant, derrière */
.equipe__logo {
	position: absolute;
	left: 0; right: 0;
	top: 9%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(.75rem, 2vw, 2rem);
	pointer-events: none;
}
.equipe__mono {
	width: clamp(4.5rem, 13vw, 13rem);
	aspect-ratio: 42 / 29;
	background: linear-gradient(180deg, #FFFFFF 0%, rgb(255 255 255 / .55) 100%);
	-webkit-mask: url("../img/monogramme.svg") no-repeat center / contain;
	mask: url("../img/monogramme.svg") no-repeat center / contain;
}
.equipe__mot {
	font-size: clamp(5rem, 21vw, 21rem);
	line-height: .8;
	font-weight: 800;
	letter-spacing: -.045em;
	background: linear-gradient(180deg, #FFFFFF 0%, rgb(255 255 255 / .5) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	padding-bottom: .1em;
}
/* eux, devant, posés sur le bas du bandeau */
.equipe__duo {
	position: absolute;
	left: 50%;
	bottom: 0;
	height: 88%;
	display: flex;
	align-items: flex-end;
	translate: -50% 0;
	z-index: 1;
}
.equipe__personne,
.equipe__personne--clement,
.equipe__personne--paul {
	position: relative;
	left: auto; right: auto; bottom: auto;
	width: auto;
	height: 100%;
	margin: 0;
}
.equipe__personne img { height: 100%; width: auto; }
.equipe__personne--clement { margin-right: -3.5%; z-index: 1; }
.equipe__personne--paul { height: 93%; z-index: 2; }
.equipe__personne .equipe__nom { bottom: 1.25rem; }
.equipe__personne--clement .equipe__nom { left: 10%; }
.equipe__personne--paul .equipe__nom { right: 10%; left: auto; }

/* le texte, sous le bandeau, centré */
.equipe__corps { padding-top: var(--section); display: grid; justify-items: center; }
.equipe__texte { max-width: 46rem; text-align: center; }
.equipe__texte > p { margin-inline: auto; }
.equipe__engagement { text-align: left; }

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.equipe__logo {
			animation: equipe-logo linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 45%;
		}
		@keyframes equipe-logo {
			from { opacity: .2; scale: .9; translate: 0 6%; }
			to   { opacity: 1;  scale: 1;  translate: 0 0; }
		}
	}
}
@media (max-width: 599px) {
	.equipe__bandeau { height: 25rem; }
	.equipe__logo { top: 12%; }
	.equipe__duo { height: 80%; }
	.equipe__nom { font-size: .7rem; padding: .4rem .65rem; }
	.equipe__nom b { font-size: .9rem; }
}
@media (max-width: 599px) {
	/* les étiquettes se chevauchaient : on les pose aux deux bords du bandeau */
	.equipe__personne--clement .equipe__nom { left: auto; right: calc(100% - 4.5rem); }
	.equipe__personne--paul .equipe__nom { right: auto; left: calc(100% - 4.5rem); text-align: left; }
}
/* ⚠ La règle générale `img { max-width: 100% }` écrasait les photos en largeur
   sur mobile (hauteur fixée, largeur plafonnée) : proportions forcées ici. */
.equipe__personne img { max-width: none; aspect-ratio: auto; object-fit: contain; }
@media (max-width: 599px) { .equipe__duo { height: 76%; } }
@media (max-width: 599px) {
	/* le duo ne dépasse jamais la largeur : c'est la largeur qui le règle */
	.equipe__duo { height: auto; width: 96vw; }
	.equipe__personne, .equipe__personne--clement, .equipe__personne--paul { height: auto; flex: 1 1 0; min-width: 0; }
	.equipe__personne img { width: 100%; height: auto; }
	.equipe__personne--paul { flex-basis: 0; margin-bottom: 0; }
	.equipe__personne--clement .equipe__nom { left: .5rem; right: auto; }
	.equipe__personne--paul .equipe__nom { right: .5rem; left: auto; text-align: right; }
}

/* ============================================================================
   LE LOGO APPARAÎT DÈS LA SORTIE DES PROBLÈMES                   2026-09-23
   ----------------------------------------------------------------------------
   Deux couches, deux temps :
     .passage__logo  s'allume pendant l'ENTRÉE de la scène (l'écran de
                     défilement qui précède son épinglage) : il monte avec
                     elle, grandit et s'éclaire — plus de bleu nuit vide ;
     .passage__mono  une fois la scène épinglée, remonte au-dessus du mot et
                     se réduit pendant que les lettres s'écrivent, reste
                     comme la signature du mot, et s'efface avant la plongée.
   Piloté par la position (R8.4), réversible. N'existe qu'avec la séquence
   (sous .portail-pret) : sans script, mobile ou mouvement réduit, rien.
   ========================================================================== */
.passage__logo { display: none; }
@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		.portail-pret .passage__logo {
			display: grid;
			place-items: center;
			position: absolute;
			inset: 0;
			z-index: 3;
			pointer-events: none;
			animation: passage-allume linear both;
			animation-timeline: --ouverture;
			animation-range: entry 15% entry 100%;
		}
		@keyframes passage-allume {
			from { opacity: 0; scale: .7; }
			to   { opacity: 1; scale: 1; }
		}
		.passage__halo, .passage__mono { grid-area: 1 / 1; }
		.passage__halo {
			width: min(44rem, 70vw);
			aspect-ratio: 1;
			border-radius: 50%;
			background: radial-gradient(closest-side, rgb(78 118 255 / .45), rgb(19 50 255 / .15) 55%, transparent);
			filter: blur(10px);
			animation: passage-halo linear both;
			animation-timeline: --ouverture;
			animation-range: contain 0% contain 40%;
		}
		@keyframes passage-halo {
			0%, 12% { opacity: 1; translate: 0 0; scale: 1; }
			30%     { opacity: .6; translate: 0 -30svh; scale: .45; }
			100%    { opacity: 0; translate: 0 -30svh; scale: .45; }
		}
		.passage__mono {
			width: min(24rem, 38vw);
			aspect-ratio: 42 / 29;
			background: linear-gradient(180deg, #FFFFFF 0%, #C7D4FF 100%);
			-webkit-mask: url("../img/monogramme.svg") no-repeat center / contain;
			mask: url("../img/monogramme.svg") no-repeat center / contain;
			filter: drop-shadow(0 0 30px rgb(120 150 255 / .7));
			animation: passage-mono linear both;
			animation-timeline: --ouverture;
			animation-range: contain 0% contain 45%;
		}
		@keyframes passage-mono {
			0%, 6%   { translate: 0 0;      scale: 1;   opacity: 1;
			           animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
			26%, 78% { translate: 0 -30svh; scale: .32; opacity: 1; }
			100%     { translate: 0 -30svh; scale: .32; opacity: 0; }
		}
		/* les lettres commencent quand le logo a libéré le centre */
		.portail-pret .lettre {
			animation-range:
				contain calc(8% + var(--rang) * 5.8%)
				contain calc(20% + var(--rang) * 5.8%);
		}
	}
}

/* ============================================================================
   LA CARTE : ELLE ATTEND, MONTE LENTEMENT, SE POSE SOUS L'EN-TÊTE  2026-09-23
   ----------------------------------------------------------------------------
   Paul : « la carte arrive bien trop vite ; en survol elle passe sous le
   header ; il faut scroller très longtemps pour qu'elle se mette ».
     · la course gagne 150 svh AU DÉBUT (900 → 1050 svh) : on lit « On règle
       ça. » avant que rien ne bouge, puis la carte monte sur ~180 svh ;
     · posée, son bord haut est à 6,5 rem : sous l'en-tête (78 px), jamais
       dessous ; elle s'ouvre juste après s'être posée ;
     · tout le reste du montage est DÉCALÉ tel quel : même partition, sur les
       800 svh de la fin (plage « contain 15,79 % → 100 % »).
   Conversion : q = 15,79 + 0,8421 × p (p = ancien pourcentage).
   ========================================================================== */
@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		.cine__piste { height: 1050svh; }
		.cine__plan--appel, .frise__piste, .frise__remplissage, .cine__maquette,
		.frise__legende, .frise__curseur, .appareil__ecran, .appareil__appli {
			animation-range: contain 15.79% contain 100%;
		}
		.frise__noeud, .frise__noeud::after {
			animation-range: contain calc(15.79% + var(--n) * 9.96%) contain calc(100% + var(--n) * 9.96%);
		}
		.kpi {
			animation-range: contain calc(15.79% + var(--i) * .67%) contain calc(100% + var(--i) * .67%);
		}
		.cine__carte, .cine__face, .frise, .cine__scene { animation-range: contain 0% contain 100%; }

		.cine__carte { animation-name: frise-carte-v2; }
		@keyframes frise-carte-v2 {
			0%, 4%  { translate: 0 100svh; clip-path: inset(6.5rem 7.5% 6% 7.5% round 40px);
			          animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
			23.4%   { translate: 0 0;      clip-path: inset(6.5rem 7.5% 6% 7.5% round 40px); }
			25%     { translate: 0 0;      clip-path: inset(6.5rem 7.5% 6% 7.5% round 40px);
			          animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
			29.3%   { translate: 0 0;      clip-path: inset(0 0 0 0 round 0px); }
			83.2%   { translate: 0 0;      clip-path: inset(0 0 0 0 round 0px);
			          animation-timing-function: cubic-bezier(.87, 0, .13, 1); }
			91.6%   { translate: 0 0;      clip-path: inset(6.5rem 7.5% 6% 7.5% round 40px);
			          animation-timing-function: cubic-bezier(.55, .055, .675, .19); }
			100%    { translate: 0 -118svh; clip-path: inset(6.5rem 7.5% 6% 7.5% round 40px); }
		}
		.cine__face { animation-name: frise-face-v2; }
		@keyframes frise-face-v2 {
			0%, 25%   { clip-path: inset(calc(6.5rem + 1.5px) calc(7.5% + 1.5px) calc(6% + 1.5px) calc(7.5% + 1.5px) round 38.5px);
			            animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
			29.3%     { clip-path: inset(1px 1px 1px 1px round 0px); }
			83.2%     { clip-path: inset(1px 1px 1px 1px round 0px);
			            animation-timing-function: cubic-bezier(.87, 0, .13, 1); }
			91.6%, 100% { clip-path: inset(calc(6.5rem + 1.5px) calc(7.5% + 1.5px) calc(6% + 1.5px) calc(7.5% + 1.5px) round 38.5px); }
		}
		.frise { animation-name: frise-contenu-v2; }
		@keyframes frise-contenu-v2 {
			0%, 25%   { scale: .84; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
			29.3%, 83.2% { scale: 1; animation-timing-function: cubic-bezier(.87, 0, .13, 1); }
			91.6%, 100% { scale: .84; }
		}
		.cine__scene { animation-name: frise-fond-v2; }
		@keyframes frise-fond-v2 {
			0%, 25.9%   { background-color: rgb(255 255 255 / 0); }
			29.3%, 81.5% { background-color: #FFFFFF; }
			86.5%, 100% { background-color: var(--nuit-uni); }
		}
	}
}

/* ============================================================================
   LE LOGO JAILLIT SUR LES PROBLÈMES, PUIS SALYS S'ÉCRIT À SA SUITE  2026-09-23
   ----------------------------------------------------------------------------
   Paul : « on doit être arrêté sur la section problèmes, on ne peut pas aller
   plus bas ; crée quelque chose de hyper spectaculaire pour faire apparaître
   le logo, puis les lettres S-A-L-Y-S ; j'aime le logo suivi des lettres ».
   · Les problèmes restent FIGÉS (sticky, accrochés par le bas) ; la scène
     chevauche leur dernier écran (−100 svh) : tout se joue par-dessus eux.
   · Partition (% de la course --ouverture, 460 svh) :
       0 → 10   les cartes reculent dans le flou, un voile bleu nuit monte
       7 → 17   une gerbe de rayons éclate du centre ; deux ondes de choc
       9 → 16   le monogramme jaillit : tourne, grossit au-delà, se stabilise
      26 → 32   il se range à gauche : le logo complet se compose
      30 → 52   S, A, L, Y, S s'écrivent à sa suite ; contour chromé
      56 → 61   le monogramme s'efface, le mot se recentre sur le L
      58 → 100  on plonge dans le L, on atterrit sur « On règle ça. »
   · Composition « logo + mot » : mot de largeur P, monogramme de largeur
     0,34 P, écart 0,06 P ; le tout centré.
   ========================================================================== */
@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		.portail-pret { --P: min(58vw, 44rem); }
		.portail-pret .chapitre { position: relative; }
		.portail-pret .probleme {
			position: sticky;
			top: min(0px, calc(100svh - var(--h-probleme, 100svh)));
			z-index: 0;
		}
		.portail-pret .ouverture {
			height: 460svh;
			margin-top: -100svh;
			position: relative;
			z-index: 1;
		}
		/* le voile qui monte sur les problèmes */
		.portail-pret .passage {
			background: transparent;
			animation: passage-voile linear both;
			animation-timeline: --ouverture;
			animation-range: contain 0% contain 100%;
		}
		@keyframes passage-voile {
			0%   { background-color: rgb(11 20 55 / 0); }
			10%, 100% { background-color: var(--nuit-uni); }
		}
		/* les cartes des problèmes reculent */
		.portail-pret .probleme > .conteneur {
			animation: probleme-recule linear both;
			animation-timeline: --ouverture;
			animation-range: contain 0% contain 10%;
		}
		@keyframes probleme-recule {
			to { opacity: 0; scale: .9; filter: blur(14px); }
		}

		/* --- le jaillissement ------------------------------------------------ */
		.portail-pret .passage__logo {
			display: grid;
			animation: none;
			opacity: 1;
		}
		.passage__rayons, .passage__onde { grid-area: 1 / 1; border-radius: 50%; }
		.passage__rayons {
			width: 150vmax;
			aspect-ratio: 1;
			background: repeating-conic-gradient(from 0deg,
				rgb(140 170 255 / .55) 0deg 1.4deg,
				transparent 1.4deg 6deg);
			-webkit-mask-image: radial-gradient(closest-side, transparent 6%, #000 14%, rgb(0 0 0 / .4) 45%, transparent 72%);
			mask-image: radial-gradient(closest-side, transparent 6%, #000 14%, rgb(0 0 0 / .4) 45%, transparent 72%);
			animation: passage-gerbe linear both;
			animation-timeline: --ouverture;
			animation-range: contain 0% contain 62%;
		}
		@keyframes passage-gerbe {
			0%, 11%  { opacity: 0; scale: .15; rotate: -25deg; }
			15%      { opacity: 1; scale: .9;  rotate: -6deg;
			           animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
			30%      { opacity: .55; scale: 1.1; rotate: 0deg; }
			48%      { opacity: .35; scale: 1.15; rotate: 4deg; }
			100%     { opacity: 0;   scale: 1.3; rotate: 10deg; }
		}
		.passage__onde {
			width: min(30rem, 44vw);
			aspect-ratio: 1;
			border: 3px solid rgb(170 195 255 / .9);
			box-shadow: 0 0 40px rgb(78 118 255 / .8), inset 0 0 30px rgb(78 118 255 / .6);
			animation: passage-onde linear both;
			animation-timeline: --ouverture;
			animation-range: contain 11% contain 22%;
		}
		.passage__onde--2 { animation-range: contain 14% contain 26%; border-width: 2px; }
		@keyframes passage-onde {
			0%   { opacity: 0;  scale: .2; }
			12%  { opacity: 1;  scale: .45; }
			100% { opacity: 0;  scale: 3.2; }
		}
		.passage__halo {
			animation: passage-halo-v2 linear both;
			animation-timeline: --ouverture;
			animation-range: contain 0% contain 62%;
		}
		@keyframes passage-halo-v2 {
			0%, 9%  { opacity: 0; scale: .3; translate: 0 0; }
			16%     { opacity: 1; scale: 1.1; translate: 0 0; }
			26%     { opacity: 1; scale: 1;   translate: 0 0;
			          animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
			42%     { opacity: .7; scale: .8; translate: calc(var(--P) * -.53) 0; }
			90%     { opacity: .7; scale: .8; translate: calc(var(--P) * -.53) 0; }
			100%    { opacity: 0;  scale: .8; translate: calc(var(--P) * -.53) 0; }
		}
		/* le monogramme : il a sa taille FINALE (0,34 P) et part agrandi ×1,8 */
		.passage__mono {
			width: calc(var(--P) * .34);
			animation: passage-mono-v2 linear both;
			animation-timeline: --ouverture;
			animation-range: contain 0% contain 62%;
		}
		@keyframes passage-mono-v2 {
			0%, 9%  { opacity: 0; scale: 0;    rotate: -200deg; translate: 0 0; filter: blur(18px) drop-shadow(0 0 30px rgb(120 150 255 / .7)); }
			14%     { opacity: 1; scale: 2.15; rotate: 8deg;    translate: 0 0; filter: blur(0) drop-shadow(0 0 60px rgb(150 180 255 / 1)); }
			18%, 42% { opacity: 1; scale: 1.8; rotate: 0deg;    translate: 0 0; filter: blur(0) drop-shadow(0 0 30px rgb(120 150 255 / .7));
			          animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
			52%, 90% { opacity: 1; scale: 1;   rotate: 0deg;    translate: calc(var(--P) * -.53) 0; filter: blur(0) drop-shadow(0 0 22px rgb(120 150 255 / .6)); }
			100%    { opacity: 0; scale: .9;   rotate: 0deg;    translate: calc(var(--P) * -.53) 0; filter: blur(4px) drop-shadow(0 0 0 transparent); }
		}

		/* --- le mot, à la suite du monogramme ---------------------------------- */
		.portail-pret .portail {
			width: var(--P);
			translate: calc(var(--P) * .2) 0;
		}
		/* le mot se recentre sur le L juste avant la plongée */
		.portail-pret .acte--portail {
			animation: seq-portail-v2 linear both;
			animation-timeline: --ouverture;
			animation-range: contain 0% contain 100%;
		}
		@keyframes seq-portail-v2 {
			0%, 28%  { opacity: 0; translate: 0 0; }
			31%, 55% { opacity: 1; translate: 0 0;
			           animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
			61%, 100% { opacity: 1; translate: calc(var(--P) * -.2) 0; }
		}
		.portail-pret .lettre {
			animation-range:
				contain calc(30% + var(--rang) * 3.6%)
				contain calc(38% + var(--rang) * 3.6%);
		}
		.portail-pret .portail__plein { animation-range: contain 49% contain 53%; }
		.portail-pret .portail__trait,
		.portail-pret .portail__texte--comete { animation-range: contain 47% contain 68%; }
		.portail-pret .portail { animation-range: contain 58% contain 100%; }
		.portail-pret .acte--blanc { animation-range: contain 88% contain 97%; }
		.portail-pret .apres { animation-range: contain 94% contain 100%; }
	}
}
@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		/* ⚠ la gerbe (150 vmax) agrandissait la grille : tout se centrait à
		   1 080 px, sous l'écran. Elle sort du flux, centrée sur l'écran. */
		.passage__rayons { position: absolute; left: 50%; top: 50%; margin: -75vmax 0 0 -75vmax; }
		/* les problèmes font moins d'un écran : ils le remplissent, sinon une
		   bande de fond apparaissait dessous une fois figés */
		.portail-pret .probleme { min-height: 100svh; }
	}
}
@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		/* ⚠ la scène (z-index 1, pour passer SUR les problèmes) recouvrait aussi
		   « On règle ça. » (z-index 0) : page blanche à l'atterrissage. Même
		   niveau, et plus loin dans le document : la phrase repasse au-dessus ;
		   la carte (.cine, z-index 1, encore après) passe au-dessus d'elle. */
		.portail-pret .apres { z-index: 1; }
	}
}

/* ============================================================================
   MENU « SOLUTIONS » ET ONGLET « FREE TOOLS »                    2026-09-23
   ----------------------------------------------------------------------------
   Paul : « au survol de Solutions, des sous-onglets : une page logiciels
   internes / outils métier et une page sites internet, avec un visuel hyper
   stylé dans notre ADN ; et un onglet Free Tools, vraiment visible, qui
   attire l'œil ».
   Le panneau s'ouvre au survol ET au focus clavier (:focus-within).
   Les deux visuels sont dessinés en CSS : un mini-cockpit (bleu nuit, KPI
   verts) et un mini-site (blanc en haut, éventail bleu en bas, comme le
   premier écran).
   ========================================================================== */
.nav__deroulant { position: relative; }
.nav__deroulant > a { display: inline-flex; align-items: center; gap: .3rem; }
.nav__chevron { width: .75rem; height: .75rem; transition: rotate 260ms var(--courbe); }
.nav__deroulant:hover .nav__chevron,
.nav__deroulant:focus-within .nav__chevron { rotate: 180deg; }

.menu-solutions {
	position: absolute;
	top: calc(100% + 1.1rem);
	left: -1.5rem;
	z-index: 20;
	display: grid;
	grid-template-columns: repeat(2, 17rem);
	gap: .75rem;
	padding: .75rem;
	border-radius: 1.4rem;
	background: rgb(255 255 255 / .98);
	box-shadow:
		0 0 0 1.5px rgb(19 50 255 / .25),
		0 30px 60px -24px rgb(11 20 55 / .45);
	opacity: 0;
	visibility: hidden;
	translate: 0 -8px;
	transition: opacity 220ms var(--courbe), translate 260ms var(--courbe), visibility 0s linear 260ms;
}
/* le pont invisible entre l'onglet et le panneau : le survol ne se perd pas */
.menu-solutions::before { content: ""; position: absolute; left: 0; right: 0; top: -1.1rem; height: 1.1rem; }
.nav__deroulant:hover .menu-solutions,
.nav__deroulant:focus-within .menu-solutions {
	opacity: 1;
	visibility: visible;
	translate: 0 0;
	transition: opacity 220ms var(--courbe), translate 260ms var(--courbe), visibility 0s;
}

.solution {
	display: grid;
	gap: .75rem;
	padding: .6rem .6rem .85rem;
	border-radius: 1rem;
	text-decoration: none;
	color: var(--nuit);
	transition: background 200ms var(--courbe);
}
.solution:hover, .solution:focus-visible { background: #F1F4FF; }
.solution__texte { display: grid; gap: .15rem; padding-inline: .25rem; }
.solution__texte b { font-size: .98rem; font-weight: 800; }
.solution__texte span { font-size: .82rem; color: #5A6386; }

.solution__visuel {
	position: relative;
	display: block;
	height: 8.5rem;
	border-radius: .8rem;
	overflow: hidden;
	transition: translate 300ms var(--courbe);
}
.solution:hover .solution__visuel { translate: 0 -3px; }

/* --- le mini-cockpit ----------------------------------------------------- */
.solution__visuel--logiciel {
	background:
		radial-gradient(70% 60% at 80% 0%, rgb(78 118 255 / .55), transparent 70%),
		linear-gradient(160deg, #13247B, #0B1437);
}
.mini-cockpit {
	position: absolute;
	inset: 1rem 1rem -1rem 2rem;
	display: grid;
	grid-template-columns: 1.4rem repeat(3, 1fr);
	grid-template-rows: auto 1fr;
	gap: .35rem;
	padding: .45rem;
	border-radius: .55rem .55rem 0 0;
	background: #F3F5FB;
	box-shadow: 0 18px 30px -12px rgb(0 0 0 / .6);
	transition: translate 400ms var(--courbe);
}
.solution:hover .mini-cockpit { translate: -4px -4px; }
.mini-cockpit i { display: block; border-radius: .3rem; background: #FFFFFF; }
.mini-cockpit__menu { grid-row: 1 / 3; background: #0E1330 !important; }
.mini-cockpit__kpi { height: 1.7rem; border-top: 2px solid #22C55E; padding: .25rem; }
.mini-cockpit__kpi b { display: block; width: 60%; height: .35rem; border-radius: 1px; background: #1332FF; margin-top: .45rem; }
.mini-cockpit__graphe {
	grid-column: 2 / 5;
	display: flex !important;
	align-items: flex-end;
	gap: .3rem;
	padding: .35rem .45rem 0;
}
.mini-cockpit__graphe s { flex: 1; height: var(--h); border-radius: 2px 2px 0 0; background: linear-gradient(180deg, #6E8FFF, #1332FF); text-decoration: none; transform-origin: 50% 100%; transition: scale 400ms var(--courbe); }
.solution:hover .mini-cockpit__graphe s { scale: 1 1.12; }

/* --- le mini-site -------------------------------------------------------- */
.solution__visuel--site {
	background:
		repeating-conic-gradient(from -90deg at 50% 125%,
			rgb(255 255 255 / .18) 0deg 1.4deg, transparent 1.4deg 2.8deg,
			rgb(2 8 40 / .14) 2.8deg 3.8deg, transparent 3.8deg 5deg),
		linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 38%, #93ADFF 62%, #3252E4 80%, #0D195A 100%);
	box-shadow: inset 0 0 0 1px #E2E7F5;
}
.mini-site { position: absolute; inset: 0; display: grid; justify-items: center; align-content: start; padding-top: .55rem; gap: .35rem; }
.mini-site i { display: block; border-radius: 999px; }
.mini-site__barre { width: 82%; height: .7rem; background: #FFFFFF; box-shadow: 0 0 0 1px rgb(19 50 255 / .45); margin-bottom: .45rem; }
.mini-site__titre { width: 62%; height: .55rem; background: var(--nuit); }
.mini-site__titre--2 { width: 44%; background: #1332FF; }
.mini-site__boutons { width: 34%; height: .6rem; margin-top: .35rem; background: linear-gradient(90deg, #FFFFFF 0 46%, transparent 46% 54%, #0B1330 54%); }

/* --- Free Tools : il doit attirer l'œil ---------------------------------- */
.nav__liste .free-tools {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .45rem .55rem .45rem .8rem;
	border-radius: 999px;
	overflow: hidden;
	isolation: isolate;
	color: #FFFFFF !important;
	font-weight: 800;
	background: linear-gradient(120deg, #1332FF 0%, #4E76FF 50%, #1332FF 100%);
	box-shadow: 0 8px 20px -8px rgb(19 50 255 / .8), inset 0 1px 0 rgb(255 255 255 / .35);
	transition: translate 220ms var(--courbe), box-shadow 220ms var(--courbe);
}
.nav__liste .free-tools:hover { translate: 0 -1px; background: linear-gradient(120deg, #1332FF 0%, #4E76FF 50%, #1332FF 100%); box-shadow: 0 12px 26px -8px rgb(19 50 255 / .95), inset 0 1px 0 rgb(255 255 255 / .45); }
.free-tools__eclat { width: .9rem; height: .9rem; color: #FFE58A; filter: drop-shadow(0 0 4px rgb(255 229 138 / .9)); }
.free-tools__badge {
	padding: .1rem .45rem;
	border-radius: 999px;
	font-size: .66rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	background: #FFFFFF;
	color: #1332FF;
}
/* un reflet qui passe toutes les 4 s, et l'éclat qui scintille */
.nav__liste .free-tools::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .55) 48%, transparent 66%);
	translate: -120% 0;
	animation: free-reflet 4s ease-in-out 1.5s infinite;
}
@keyframes free-reflet { 0% { translate: -120% 0; } 30%, 100% { translate: 120% 0; } }
.free-tools__eclat { animation: free-eclat 4s ease-in-out 1.5s infinite; }
@keyframes free-eclat { 0%, 70%, 100% { scale: 1; rotate: 0deg; } 80% { scale: 1.35; rotate: 45deg; } }
@media (prefers-reduced-motion: reduce) {
	.nav__liste .free-tools::after, .free-tools__eclat { animation: none; }
	.menu-solutions { transition: none; }
}

/* Pages intérieures, vides pour l'instant */
.page-blanche { min-height: 70svh; }
/* 2026-10-09 — pages de texte (mentions légales, confidentialité) */
.page-texte { padding-block: calc(var(--section) + 6rem) var(--section); color: var(--encre); }
.page-texte ul { list-style: disc; padding-left: 1.25rem; margin: 0 0 1rem; }
.page-texte li + li { margin-top: .5rem; }
.page-texte > * { max-width: var(--colonne-texte); }
.page-texte h1 { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); line-height: 1.1; margin: 0 0 2rem; }
.page-texte h2 { font-size: 1.25rem; line-height: 1.3; margin: 2.5rem 0 .75rem; }
.page-texte p, .page-texte li { font-size: var(--t-corps); line-height: 1.65; }
.page-texte a { color: var(--bleu-logo); text-underline-offset: .2em; }
.page-texte a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Sous 900 px, pas de panneau : « Solutions » mène à la section */
@media (max-width: 899px) {
	.menu-solutions { display: none; }
	.nav__chevron { display: none; }
}
/* ⚠ Les cartes du panneau héritaient des styles des liens de navigation
   (display:flex, rayon de pilule) : le visuel était écrasé à 0 px de large.
   On leur rend leur mise en page, à spécificité supérieure. */
.entete .nav__liste .menu-solutions a.solution {
	display: grid;
	grid-template-rows: auto auto;
	align-content: start;
	min-height: 0;
	padding: .6rem .6rem .85rem;
	border-radius: 1rem;
	color: var(--nuit);
	background: transparent;
	font-size: 1rem;
}
.entete .nav__liste .menu-solutions a.solution:hover,
.entete .nav__liste .menu-solutions a.solution:focus-visible { background: #F1F4FF; }
.entete--clair .nav__liste a.free-tools, .entete .nav__liste a.free-tools { color: #FFFFFF; min-height: 0; padding: .45rem .55rem .45rem .8rem; }
.menu-solutions { background: #FFFFFF; }

/* ============================================================================
   PREMIER ÉCRAN : LE BLOC CENTRÉ ENTRE L'EN-TÊTE ET LES LOGOS      2026-09-23
   ----------------------------------------------------------------------------
   Paul : « descends-le un peu ; même espace entre le header et "+5 projets
   livrés" qu'entre "Voir nos réalisations" et les logos ».
   Le héros centre son contenu entre ses deux marges : la marge haute = le bas
   de l'en-tête, la marge basse = la hauteur occupée par la stack. Les deux
   espaces libres sont alors égaux par construction.
   ========================================================================== */
@media (min-width: 1081px) {
	.hero {
		padding-top: 4.9rem;                                       /* bas de l'en-tête (78 px) */
		padding-bottom: calc(clamp(2.5rem, 7svh, 4.5rem) + 2.8rem); /* stack + sa marge */
	}
}
@media (min-width: 900px) and (max-width: 1080px) {
	.hero { padding-bottom: 8.6rem; }   /* en-tête sur deux rangs : même équilibre */
}

/* ============================================================================
   JAILLISSEMENT PLUS SOBRE ; LE CONTOUR RESTE DANS LA PLONGÉE      2026-09-23
   ----------------------------------------------------------------------------
   Paul : « ça va trop vite, le truc qui tourne sur lui-même fait gadget ; les
   cercles, c'est trop : plus soft et sobre. Garde le contour des lettres :
   quand on zoome, il disparaît totalement ; qu'il reste, et qu'on entre ».
   · Le monogramme ne fait plus un tour : il se lève de −14°, s'éclaire et
     grandit sans dépasser, sur une plage deux fois plus longue.
   · Une seule onde, fine et très transparente ; la gerbe est plus ténue.
   · Le contour chromé reste jusqu'au bout de la plongée.
   ========================================================================== */
@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		@keyframes passage-mono-v2 {
			0%, 7%   { opacity: 0; scale: .7;  rotate: -14deg; translate: 0 0; filter: blur(10px) drop-shadow(0 0 20px rgb(120 150 255 / .4)); }
			20%, 42% { opacity: 1; scale: 1.8; rotate: 0deg;   translate: 0 0; filter: blur(0) drop-shadow(0 0 26px rgb(120 150 255 / .55));
			           animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
			52%, 90% { opacity: 1; scale: 1;   rotate: 0deg;   translate: calc(var(--P) * -.53) 0; filter: blur(0) drop-shadow(0 0 18px rgb(120 150 255 / .5)); }
			100%     { opacity: 0; scale: .95; rotate: 0deg;   translate: calc(var(--P) * -.53) 0; filter: blur(3px); }
		}
		@keyframes passage-gerbe {
			0%, 8% { opacity: 0;   scale: .5;  rotate: -4deg; }
			22%    { opacity: .35; scale: .95; rotate: 0deg; }
			48%    { opacity: .22; scale: 1.05; rotate: 2deg; }
			100%   { opacity: 0;   scale: 1.12; rotate: 4deg; }
		}
		.passage__onde--2 { display: none; }
		.passage__onde { border-width: 1px; border-color: rgb(170 195 255 / .45); box-shadow: 0 0 24px rgb(78 118 255 / .35); animation-range: contain 12% contain 26%; }
		@keyframes passage-onde {
			0%   { opacity: 0;   scale: .4; }
			20%  { opacity: .7;  scale: .6; }
			100% { opacity: 0;   scale: 2.4; }
		}
		/* le contour : présent une fois le mot écrit, jusqu'au bout */
		.portail-pret .portail__trait { animation-name: seq-trait-v2; animation-range: contain 47% contain 100%; }
		@keyframes seq-trait-v2 { 0% { opacity: 0 } 12%, 100% { opacity: 1 } }
		.portail-pret .portail__texte--comete { animation-range: contain 47% contain 70%; }
	}
}
@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		/* le monogramme s'efface AVANT que le mot se recentre (il chevauchait le S) */
		@keyframes passage-mono-v2 {
			0%, 7%   { opacity: 0; scale: .7;  rotate: -14deg; translate: 0 0; filter: blur(10px); }
			20%, 42% { opacity: 1; scale: 1.8; rotate: 0deg;   translate: 0 0; filter: blur(0) drop-shadow(0 0 26px rgb(120 150 255 / .55));
			           animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
			52%, 80% { opacity: 1; scale: 1;   rotate: 0deg;   translate: calc(var(--P) * -.53) 0; filter: blur(0) drop-shadow(0 0 18px rgb(120 150 255 / .5)); }
			87%, 100% { opacity: 0; scale: .95; rotate: 0deg;  translate: calc(var(--P) * -.53) 0; filter: blur(3px); }
		}
		@keyframes passage-halo-v2 {
			0%, 9%  { opacity: 0; scale: .3; translate: 0 0; }
			20%, 26% { opacity: .8; scale: 1; translate: 0 0; animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
			42%, 80% { opacity: .55; scale: .8; translate: calc(var(--P) * -.53) 0; }
			87%, 100% { opacity: 0; scale: .8; translate: calc(var(--P) * -.53) 0; }
		}
	}
}

/* ============================================================================
   « ON RÈGLE ÇA. » IMMOBILE — PHRASES, LOGO EXCEL, PUIS LA CARTE  2026-09-23
   ----------------------------------------------------------------------------
   Course (--regle, sur .regle__course, 240 svh, plage entry 0 → exit 0) :
      0 → 18  « Vos opérations méritent mieux » s'écrit, un reflet la traverse
     18 → 36  « que des outils bricolés et des tableaux Excel. » idem
     32 → 42  le pictogramme Excel apparaît au bout de la phrase
     46 → 58  un trait rouge le raye ; 58 → 68  il se rétracte et disparaît
     64 → 76  « On règle ça. » arrive ; 72 → 88  le double trait se dessine
   Puis « Ce qui peut tourner tout seul » monte par le bas, en carte, par-dessus.
   Repli (sans timeline, mobile, mouvement réduit) : tout est écrit, le logo
   Excel est affiché rayé.
   ========================================================================== */
.regle { text-align: center; display: grid; justify-items: center; }
.regle__ligne {
	max-width: 22em;
	font-size: clamp(1.8rem, 1rem + 2.8vw, 3.4rem);
	line-height: 1.12;
	letter-spacing: -.03em;
	font-weight: 800;
	color: var(--nuit);
	text-wrap: balance;
}
.regle__ligne--2 { margin-top: .15em; color: #5A6386; }
.regle__excel { position: relative; white-space: nowrap; }
.excel {
	display: inline-block;
	width: 1.05em;
	height: 1.05em;
	margin-left: .25em;
	vertical-align: -.12em;
	filter: drop-shadow(0 6px 10px rgb(29 122 69 / .3));
}
.excel__rature { stroke-dasharray: 1; stroke-dashoffset: 0; }
.regle .reglage { margin-top: clamp(1.25rem, 3vw, 2.5rem); }

@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		:root { timeline-scope: --ouverture, --cine, --regle; }

		.portail-pret .chapitre2 { position: relative; z-index: 1; margin-top: -100svh; }
		.portail-pret .apres {
			position: sticky;
			top: 0;
			height: 100svh;
			min-height: 0;
			margin-top: 0;
			z-index: 0;
		}
		.regle__course { height: 240svh; view-timeline: --regle block; }

		/* l'écriture lumineuse : le texte est peint par un dégradé qui glisse,
		   l'encre suivie d'un reflet bleu-blanc, puis du vide */
		.regle__ligne {
			background: linear-gradient(100deg,
				var(--c-encre, #141F4B) 0%, var(--c-encre, #141F4B) 42%,
				#6E8FFF 47%, #FFFFFF 50%, #6E8FFF 53%,
				rgb(20 31 75 / 0) 58%, rgb(20 31 75 / 0) 100%);
			background-size: 260% 100%;
			background-position: 0% 0;
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
			padding-bottom: .1em;
			animation: regle-ecrit linear both;
			animation-timeline: --regle;
		}
		.regle__ligne--1 { animation-range: entry 0% entry 42%; }
		.regle__ligne--2 { --c-encre: #5A6386; animation-range: entry 38% entry 84%; }
		@keyframes regle-ecrit {
			from { background-position: 100% 0; opacity: .0; filter: blur(4px); }
			12%  { opacity: 1; filter: blur(0); }
			to   { background-position: 0% 0; opacity: 1; filter: blur(0); }
		}
		/* le pictogramme Excel : il apparaît, il est rayé, il disparaît */
		.excel {
			-webkit-text-fill-color: initial;
			animation: excel-vie linear both;
			animation-timeline: --regle;
			animation-range: entry 70% contain 100%;
		}
		@keyframes excel-vie {
			0%   { opacity: 0; scale: .2; rotate: -20deg; }
			12%  { opacity: 1; scale: 1.18; rotate: 4deg; }
			20%  { opacity: 1; scale: 1;   rotate: 0deg; }
			62%  { opacity: 1; scale: 1;   rotate: 0deg; filter: drop-shadow(0 6px 10px rgb(29 122 69 / .3)); }
			76%  { opacity: .9; scale: .85; rotate: 8deg; filter: grayscale(1) drop-shadow(0 0 0 transparent); }
			90%, 100% { opacity: 0; scale: 0; rotate: 30deg; filter: grayscale(1) blur(3px); }
		}
		.excel__rature {
			animation: excel-rature linear both;
			animation-timeline: --regle;
			animation-range: entry 70% contain 100%;
		}
		@keyframes excel-rature { 0%, 34% { stroke-dashoffset: 1; } 58%, 100% { stroke-dashoffset: 0; } }
		/* « On règle ça. » */
		.regle .reglage {
			animation: regle-arrive linear both;
			animation-timeline: --regle;
			animation-range: contain 30% contain 70%;
		}
		@keyframes regle-arrive {
			from { opacity: 0; scale: .85; translate: 0 30px; filter: blur(8px); }
			to   { opacity: 1; scale: 1;   translate: 0 0;    filter: blur(0); }
		}
		.regle .reglage__trait path {
			animation: regle-trait linear both;
			animation-timeline: --regle;
			animation-range: contain 55% contain 95%;
		}
		@keyframes regle-trait { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

		/* la section suivante monte en CARTE, se pose, s'élargit : on y entre */
		.chapitre2 .auto {
			position: relative;
			z-index: 1;
			box-shadow: 0 -30px 60px -30px rgb(11 20 55 / .35);
			animation: auto-carte linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 100%;
		}
		@keyframes auto-carte {
			0%   { clip-path: inset(0 7.5% 0 7.5% round 40px 40px 0 0); }
			70%  { clip-path: inset(0 5% 0 5% round 32px 32px 0 0); }
			100% { clip-path: inset(0 0 0 0 round 0 0 0 0); }
		}

		/* la frise, désormais après l'IA : elle monte sur le bleu nuit */
		.cine { margin-top: 0; background: var(--nuit-uni); }
		@keyframes frise-fond-v2 {
			0%, 25.9%   { background-color: var(--nuit-uni); }
			29.3%, 81.5% { background-color: #FFFFFF; }
			86.5%, 100% { background-color: var(--nuit-uni); }
		}
		@keyframes frise-carte-v2 {
			0%      { translate: 0 100svh; clip-path: inset(6.5rem 7.5% 6% 7.5% round 40px);
			          animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
			23.4%   { translate: 0 0;      clip-path: inset(6.5rem 7.5% 6% 7.5% round 40px); }
			25%     { translate: 0 0;      clip-path: inset(6.5rem 7.5% 6% 7.5% round 40px);
			          animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
			29.3%   { translate: 0 0;      clip-path: inset(0 0 0 0 round 0px); }
			83.2%   { translate: 0 0;      clip-path: inset(0 0 0 0 round 0px);
			          animation-timing-function: cubic-bezier(.87, 0, .13, 1); }
			91.6%   { translate: 0 0;      clip-path: inset(6.5rem 7.5% 6% 7.5% round 40px);
			          animation-timing-function: cubic-bezier(.55, .055, .675, .19); }
			100%    { translate: 0 -118svh; clip-path: inset(6.5rem 7.5% 6% 7.5% round 40px); }
		}
	}
}
/* ⚠ La séquence « On règle ça » n'existe qu'avec la séquence du logo
   (.portail-pret, posée par portail.js). Sans elle : pas de course vide, et
   les phrases sont simplement écrites (sans JS, la 1re restait masquée). */
.regle__course { display: none; }
@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		.portail-pret .regle__course { display: block; }
		html:not(.portail-pret) .regle__ligne {
			animation: none; background: none;
			-webkit-text-fill-color: currentColor;
		}
		html:not(.portail-pret) .excel,
		html:not(.portail-pret) .excel__rature,
		html:not(.portail-pret) .regle .reglage,
		html:not(.portail-pret) .regle .reglage__trait path,
		html:not(.portail-pret) .chapitre2 .auto { animation: none; }
	}
}
@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		/* la 1re phrase s'écrit PENDANT l'atterrissage : plus d'écran blanc */
		.portail-pret .regle__ligne--1 { animation-timeline: --ouverture; animation-range: contain 92% contain 100%; }
		.portail-pret .regle__ligne--2 { animation-range: entry 0% entry 40%; }
		.portail-pret .excel, .portail-pret .excel__rature { animation-range: entry 30% contain 90%; }
	}
}

/* ============================================================================
   PICTOGRAMMES DE VERRE — même DA que le premier écran             2026-09-23
   ========================================================================== */
.verre-defs { position: absolute; width: 0; height: 0; }
.verre { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 16px 18px rgb(19 50 255 / .28)); }
.mal__objet .verre { rotate: -6deg; }
.mal:nth-child(even) .mal__objet .verre { rotate: 6deg; }
.frise__objet .verre { rotate: -8deg; filter: drop-shadow(0 26px 30px rgb(19 50 255 / .30)); }

/* ============================================================================
   CE QUI PEUT TOURNER TOUT SEUL — services illustrés, secteurs    2026-09-23
   ========================================================================== */
.auto__surtitre { font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #1332FF; margin-bottom: .6rem; }
.auto__services {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: .5rem;
}
.auto__service {
	display: grid;
	justify-items: center;
	gap: .35rem;
	padding: .7rem .4rem .6rem;
	border-radius: 1rem;
	text-align: center;
	font-size: .85rem;
}
.auto__service .verre { width: 2.9rem; filter: drop-shadow(0 8px 10px rgb(19 50 255 / .25)); transition: scale 300ms var(--courbe); }
@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		@keyframes auto-service {
			0%, 100% { background: #FFFFFF; color: var(--nuit); box-shadow: 0 0 0 2px #1332FF, 0 14px 26px -12px rgb(19 50 255 / .6); }
		}
		.auto__service { opacity: .55; }
		@keyframes auto-service-op { 0%, 100% { opacity: 1; } }
	}
}
.auto__secteurs { padding-block: 0 var(--section); text-align: center; }
.auto__secteurs-titre { font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #5A6386; }
.auto__secteurs ul {
	list-style: none; margin: 1rem 0 0; padding: 0;
	display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
}
.auto__secteurs li {
	padding: .55rem 1.1rem;
	border-radius: 999px;
	background: #FFFFFF;
	box-shadow: inset 0 0 0 1.5px rgb(19 50 255 / .22);
	font-weight: 700;
	color: var(--nuit);
}
@media (max-width: 599px) { .auto__services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ============================================================================
   L'IA — logos regroupés, contrastes « pas ça / mais ça »          2026-09-23
   ========================================================================== */
.ia__outils {
	list-style: none; margin: 2rem 0 0; padding: 0;
	display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem;
}
.ia__outils li {
	display: inline-flex; align-items: center; gap: .6rem;
	padding: .6rem 1.1rem;
	border-radius: 999px;
	background: rgb(255 255 255 / .07);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16);
	font-weight: 700; font-size: 1.05rem;
}
.ia__outils svg { width: 1.6rem; height: 1.6rem; }
.ia__contrastes {
	list-style: none; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; padding: 0;
	display: grid; gap: 1rem; max-width: 60rem; text-align: left;
}
.ia__contraste {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	border-radius: 1.25rem;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / .10);
}
.ia__contraste p { display: flex; gap: .8rem; align-items: flex-start; margin: 0; padding: 1.2rem 1.4rem; line-height: 1.4; }
.ia__pas { background: rgb(255 255 255 / .03); color: #8F9BC4; text-decoration: line-through; text-decoration-color: rgb(255 120 140 / .6); font-size: 1rem; }
.ia__mais { background: linear-gradient(90deg, rgb(19 50 255 / .30), rgb(19 50 255 / .12)); color: #FFFFFF; font-weight: 700; font-size: 1.15rem; }
.ia__marque {
	flex: none; display: grid; place-items: center;
	width: 1.7rem; height: 1.7rem; border-radius: 50%;
	font-size: .85rem; font-weight: 800; text-decoration: none;
}
.ia__pas .ia__marque { background: rgb(255 120 140 / .15); color: #FF9CB0; display: inline-grid; }
.ia__mais .ia__marque { background: #1332FF; color: #FFFFFF; box-shadow: 0 6px 14px -6px rgb(19 50 255 / .9); }
@media (max-width: 699px) { .ia__contraste { grid-template-columns: 1fr; } }
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.ia__contraste { animation: ia-entree linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; }
	}
}

/* ============================================================================
   LA FRISE — pastilles qui se remplissent de bleu, étiquettes lisibles
   ----------------------------------------------------------------------------
   Paul : « la ligne vient gratter les libellés ; Découverte, Repérage… pas
   assez mis en valeur ; le 01 se remplit en bleu, puis le 02… ; le logo dans
   un cercle blanc fait cheap ; la ligne doit être super bien utilisée ».
   Chaque jalon = une pastille numérotée (qui se remplit de bas en haut quand
   l'étape arrive) et une étiquette à côté, jamais sur la ligne. La ligne relie
   le CENTRE des pastilles ; le curseur au logo est retiré.
   ========================================================================== */
.frise__curseur { display: none !important; }
.frise__noeud::after { content: none !important; }
.frise__noeud { display: flex; align-items: center; gap: .7rem; }
.frise__pastille {
	position: relative; z-index: 1;
	display: grid; place-items: center; flex: none;
	width: 2.8rem; height: 2.8rem; border-radius: 50%;
	font-size: .9rem !important; font-weight: 800; letter-spacing: 0 !important;
	background: linear-gradient(to top, #1332FF 50%, #FFFFFF 50%);
	background-size: 100% 200%;
	background-position: 0 100%;
	color: #FFFFFF;
	box-shadow: 0 0 0 2px #1332FF, 0 10px 22px -8px rgb(19 50 255 / .7);
}
.frise__etiquette { font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; }
.frise__livrable {
	display: grid; gap: .15rem;
	margin-top: 1.25rem !important;
	padding: .8rem 1rem;
	border-radius: .9rem;
	max-width: 30em;
	background: #EEF2FF;
	color: var(--nuit) !important;
	font-weight: 700;
	font-size: 1rem !important;
}
.frise__livrable span { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #1332FF; }

@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		.frise__barre { padding-bottom: 0; align-items: center; }
		.frise__rail { bottom: auto; top: 50%; translate: 0 -50%; left: 1.4rem; right: 0; height: 4px; }
		.frise__noeud { color: var(--nuit); }
		.frise__pastille {
			animation: frise-remplit linear both;
			animation-timeline: --cine;
			animation-range: contain calc(15.79% + var(--n) * 9.96%) contain calc(100% + var(--n) * 9.96%);
		}
		@keyframes frise-remplit {
			0%, 13% { background-position: 0 0; color: #1332FF; box-shadow: 0 0 0 2px #C5D1F7, 0 0 0 0 transparent; }
			19%, 100% { background-position: 0 100%; color: #FFFFFF; box-shadow: 0 0 0 2px #1332FF, 0 10px 22px -8px rgb(19 50 255 / .7); }
		}
		.frise__etiquette {
			animation: frise-etiquette linear both;
			animation-timeline: --cine;
			animation-range: contain calc(15.79% + var(--n) * 9.96%) contain calc(100% + var(--n) * 9.96%);
		}
		@keyframes frise-etiquette { 0%, 13% { color: #9AA5C8; } 19%, 100% { color: var(--nuit); } }
		/* l'étiquette sur fond blanc : la ligne passe derrière, jamais dessus */
		.frise__etiquette { background: #FFFFFF; padding: .2rem .6rem .2rem .2rem; position: relative; z-index: 1; }
	}
}

/* 2026-09-23 — Paul : « notre logo en haut à gauche du header, en bleu, lettres
   S-A-L-Y-S comprises ». */
.entete .entete__monogramme,
.entete--clair .entete__monogramme { background: #1332FF; }
.entete .entete__mot,
.entete--clair .entete__mot { color: #1332FF; }

/* ============================================================================
   SORTIE DES PROBLÈMES : L'ESSENTIEL                              2026-09-23
   ----------------------------------------------------------------------------
   Paul : « on doit s'arrêter quand on voit tout dans le cadre, sans que
   "Votre entreprise tourne" soit sous le header ; l'image est fixe, les
   éléments disparaissent petit à petit, l'arrière-plan reste le même ; le
   logo apparaît SANS rainures ni cercles ; il ne doit pas arriver au milieu
   et se déplacer : il se dessine à gauche en même temps que les lettres ;
   enlève l'effet gadget, on veut l'essentiel ».
   · Les problèmes font exactement un écran, contenu centré SOUS l'en-tête ;
     ils se figent quand ils sont entiers dans le cadre.
   · Plus de voile, de gerbe, d'onde ni de halo : le fond des problèmes reste.
   · Monogramme et lettres naissent ensemble, déjà à leur place (logo + mot).
   Partition (course 360 svh) :
      0 → 12  les éléments des problèmes s'effacent
     12 → 34  le monogramme et S-A-L-Y-S se dessinent ; le contour arrive
     44 → 50  le monogramme s'efface, le mot se recentre sur le L
     48 → 100 plongée (contour gardé), atterrissage sur « On règle ça. »
   ========================================================================== */
@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		.portail-pret .probleme {
			height: 100svh;
			min-height: 0;
			top: 0;
			display: grid;
			align-content: center;
			padding-top: 6rem;          /* sous l'en-tête (78 px) */
			padding-bottom: 2rem;
		}
		.portail-pret .ouverture { height: 360svh; }
		.portail-pret .passage { animation: none; background: transparent; }
		.portail-pret .passage__rayons,
		.portail-pret .passage__onde,
		.portail-pret .passage__halo { display: none; }

		.portail-pret .probleme > .conteneur { animation-range: contain 0% contain 12%; }

		.passage__mono {
			animation: passage-mono-v3 linear both;
			animation-timeline: --ouverture;
			animation-range: contain 12% contain 50%;
			translate: calc(var(--P) * -.53) 0;
			filter: drop-shadow(0 0 14px rgb(120 150 255 / .45));
		}
		@keyframes passage-mono-v3 {
			0%   { opacity: 0; clip-path: circle(0% at 50% 50%); }
			8%   { opacity: 1; }
			26%  { opacity: 1; clip-path: circle(75% at 50% 50%); }
			84%  { opacity: 1; clip-path: circle(75% at 50% 50%); }
			100% { opacity: 0; clip-path: circle(75% at 50% 50%); }
		}
		.portail-pret .acte--portail { animation-name: seq-portail-v3; }
		@keyframes seq-portail-v3 {
			0%, 10%  { opacity: 0; translate: 0 0; }
			12%, 44% { opacity: 1; translate: 0 0; animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
			50%, 100% { opacity: 1; translate: calc(var(--P) * -.2) 0; }
		}
		.portail-pret .lettre {
			animation-range:
				contain calc(12% + var(--rang) * 3.4%)
				contain calc(20% + var(--rang) * 3.4%);
		}
		.portail-pret .portail__plein { animation-range: contain 31% contain 35%; }
		.portail-pret .portail__trait { animation-range: contain 32% contain 100%; }
		.portail-pret .portail__texte--comete { animation-range: contain 32% contain 56%; }
		.portail-pret .portail { animation-range: contain 48% contain 100%; }
	}
}
@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		/* le monogramme s'efface (40 → 44 %) AVANT le recentrage (44 → 50 %) */
		.passage__mono { animation-range: contain 12% contain 44%; }
		@keyframes passage-mono-v3 {
			0%   { opacity: 0; clip-path: circle(0% at 50% 50%); }
			9%   { opacity: 1; }
			31%  { opacity: 1; clip-path: circle(75% at 50% 50%); }
			86%  { opacity: 1; clip-path: circle(75% at 50% 50%); }
			100% { opacity: 0; clip-path: circle(75% at 50% 50%); }
		}
	}
}

/* 2026-09-23 — Paul : « il faut scroller trois fois pour avoir le truc Excel
   barré, c'est chiant ». Course 240 → 140 svh, séquence resserrée : Excel
   rayé vers 0,6 écran, tout est en place à 1,3 écran. */
@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		.regle__course { height: 140svh; }
		.portail-pret .regle__ligne--2 { animation-range: entry 0% entry 30%; }
		.portail-pret .excel, .portail-pret .excel__rature { animation-range: entry 15% entry 90%; }
		.portail-pret .regle .reglage { animation-range: entry 60% contain 40%; }
		.portail-pret .regle .reglage__trait path { animation-range: contain 20% contain 80%; }
	}
}
/* le pictogramme flotte au bout du mot, hors du flux : une fois disparu, il
   ne laisse pas de trou avant le point */
.regle__excel .excel { position: absolute; left: 100%; top: -.7em; margin-left: .05em; }

/* ============================================================================
   ON AUTOMATISE VOS TÂCHES RÉPÉTITIVES — une seule zone, en couleur  2026-09-23
   ----------------------------------------------------------------------------
   Titre court, écrit à la lumière (même effet que « Vos opérations méritent
   mieux »). La molette porte tout : pictogramme de verre du service, tâche,
   service en couleur. Chaque service a sa teinte (--c). Secteurs : un mur
   typographique au trait, qui se remplit mot après mot.
   ========================================================================== */
.auto__titre { max-width: 12em; }
.auto__tache { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; }
.auto__tache .verre { width: 2.5rem; filter: drop-shadow(0 6px 8px rgb(19 50 255 / .2)); }
.auto__tag { background: color-mix(in srgb, var(--c) 12%, white); color: var(--c); }

@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		.auto__titre {
			background: linear-gradient(100deg,
				#141F4B 0%, #141F4B 42%, #6E8FFF 47%, #FFFFFF 50%, #6E8FFF 53%,
				rgb(20 31 75 / .08) 58%, rgb(20 31 75 / .08) 100%);
			background-size: 260% 100%;
			background-position: 0% 0;
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
			padding-bottom: .08em;
			animation: auto-titre-ecrit linear both;
			animation-timeline: view();
			animation-range: entry 30% entry 95%;
		}
		@keyframes auto-titre-ecrit { from { background-position: 100% 0; } to { background-position: 0% 0; } }

		.auto__tache { padding-inline: 1.25rem; }
		.auto__tache .verre {
			opacity: .3; scale: .85;
			animation: auto-picto linear none;
			animation-timeline: --auto;
			animation-range: contain var(--de) contain var(--a);
		}
		@keyframes auto-picto { 0%, 100% { opacity: .3; scale: .85; } 30%, 70% { opacity: 1; scale: 1.12; } }
		@keyframes auto-tag {
			0%, 100% { background: transparent; color: #B8C0D6; }
			30%, 70% { background: var(--c); color: #FFFFFF; }
		}
		@keyframes auto-tag-debut { 0%, 70% { background: var(--c); color: #FFFFFF; } 100% { background: transparent; color: #B8C0D6; } }
		@keyframes auto-tag-fin { 0% { background: transparent; color: #B8C0D6; } 30%, 100% { background: var(--c); color: #FFFFFF; } }
		.auto__tache--premiere .verre { animation-name: auto-picto-debut; animation-fill-mode: backwards; }
		.auto__tache--derniere .verre { animation-name: auto-picto-fin; animation-fill-mode: forwards; }
		@keyframes auto-picto-debut { 0%, 70% { opacity: 1; scale: 1.12; } 100% { opacity: .3; scale: .85; } }
		@keyframes auto-picto-fin { 0% { opacity: .3; scale: .85; } 30%, 100% { opacity: 1; scale: 1.12; } }
		/* le sélecteur prend un liseré dégradé multicolore discret */
		.auto__selecteur {
			box-shadow: 0 0 0 2px rgb(19 50 255 / .35), 0 18px 40px -18px rgb(19 50 255 / .55);
			background: linear-gradient(90deg, #FFFFFF, #F6F8FF);
		}
	}
}

/* --- Nos terrains : le mur typographique --------------------------------- */
.auto__secteurs { padding-top: 0; }
.secteurs {
	max-width: 60rem;
	margin: 1.25rem auto 0;
	font-size: clamp(1.7rem, 1rem + 2.4vw, 3.1rem);
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -.03em;
	text-wrap: balance;
	color: var(--nuit);
}
.secteur { white-space: nowrap; }
.secteur__sep { margin-inline: .35em; color: #1332FF; font-weight: 400; }
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.secteur {
			color: transparent;
			-webkit-text-stroke: 1.5px #9FB2F0;
			animation: secteur-remplit linear forwards;
			animation-timeline: view();
			animation-range: entry calc(40% + var(--k) * 7%) cover calc(40% + var(--k) * 4%);
		}
		@keyframes secteur-remplit { to { color: #141F4B; -webkit-text-stroke-color: #141F4B; } }
	}
}
.secteur__sep { margin-inline: .05em; }

/* ============================================================================
   DERRIÈRE SALYS — eux à gauche, le texte à droite, en parallaxe  2026-09-23
   ----------------------------------------------------------------------------
   Le bandeau devient un panneau (arrondi) dans la colonne de gauche ; le logo
   derrière eux est trois fois plus petit ; en arrivant sur la section, le
   logo, Clément et Paul glissent chacun à sa vitesse (parallaxe pilotée par
   la position, R8.4).
   ========================================================================== */
.equipe { padding-block: var(--section); }
.equipe__grille { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) {
	.equipe__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.equipe__bandeau {
	height: clamp(22rem, 38vw, 34rem);
	border-radius: 2rem;
	box-shadow: 0 30px 60px -30px rgb(11 20 55 / .55);
}
.equipe__logo { top: 10%; gap: .6rem; }
.equipe__mono { width: clamp(2.4rem, 4.4vw, 4rem); }
.equipe__mot { font-size: clamp(2.4rem, 6.5vw, 5.5rem); }
.equipe__duo { height: 84%; }
.equipe__texte { text-align: left; max-width: 36rem; }
.equipe__texte > p { margin-inline: 0; }
.equipe__nom b { white-space: nowrap; }
@media (max-width: 599px) {
	.equipe__bandeau { height: 24rem; }
}
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.equipe__logo {
			animation: equipe-plx-logo linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}
		@keyframes equipe-plx-logo { from { translate: 0 -30%; opacity: .5; } to { translate: 0 30%; opacity: 1; } }
		.equipe__personne--clement img {
			animation: equipe-plx-a linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 60%;
		}
		.equipe__personne--paul img {
			animation: equipe-plx-b linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 60%;
		}
		@keyframes equipe-plx-a { from { translate: 0 14%; } to { translate: 0 0; } }
		@keyframes equipe-plx-b { from { translate: 0 26%; } to { translate: 0 0; } }
	}
}
/* dans le panneau, c'est la LARGEUR qui règle le duo (les étiquettes étaient
   coupées aux bords) */
.equipe__duo { height: auto; width: 94%; }
.equipe__personne, .equipe__personne--clement, .equipe__personne--paul { height: auto; flex: 1 1 0; min-width: 0; }
.equipe__personne img { width: 100%; height: auto; }
.equipe__personne--clement .equipe__nom { left: .6rem; right: auto; }
.equipe__personne--paul .equipe__nom { right: .6rem; left: auto; text-align: right; }
.equipe__nom { bottom: .9rem; }

/* 2026-09-23 — Étapes : pictogrammes fournis par Paul (verre bleu, même DA
   que le premier écran), nouveau texte, « Votre engagement ». */
.frise__objet img { display: block; width: 100%; height: auto; rotate: -4deg; filter: drop-shadow(0 26px 30px rgb(19 50 255 / .25)); }
.frise__meta {
	display: inline-block; vertical-align: middle;
	margin-left: .35em; padding: .25em .7em;
	border-radius: 999px; background: #E3F7EC; color: #0E7A3E;
	font-size: .32em; font-weight: 800; letter-spacing: 0;
}
.frise__engagement {
	display: grid; gap: .1rem; margin-top: .6rem !important;
	padding: .7rem 1rem; border-radius: .9rem; max-width: 30em;
	background: #FFFFFF; box-shadow: inset 0 0 0 1.5px #DDE3F4;
	color: var(--nuit) !important; font-weight: 700; font-size: 1rem !important;
}
.frise__engagement span { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #5A6386; }
.frise__titre { font-size: clamp(1.9rem, 1rem + 2.6vw, 3.4rem); }
.auto__titre { max-width: 13em; }

/* ============================================================================
   LE COCKPIT DU DIRIGEANT — v2                                  2026-09-23
   ----------------------------------------------------------------------------
   Paul : 4 KPI (CA, marge brute, livraisons à l'heure, trésorerie à 90 j), un
   graphique « design Apple » CA et marge triable 1 / 6 / 12 mois ; onglets
   Commercial, Production, Logistique, Achats, Finance. Une démonstration jouée
   par un curseur lent (cockpit.js). « Le vert uniquement pour les pastilles
   d'état ; tout le reste dans la palette bleue. »
   Tout est en --u (miniature). ILLUSTRATION : chiffres fictifs (§7.8).
   ========================================================================== */
.ck { position: relative; grid-template-columns: calc(8.6 * var(--u)) minmax(0, 1fr) !important; }
.ck-menu {
	display: flex; flex-direction: column; gap: calc(.22 * var(--u));
	padding: calc(.9 * var(--u)) calc(.55 * var(--u));
	background: #0E1330; color: #FFFFFF;
}
.ck-marque { display: flex; align-items: center; gap: calc(.4 * var(--u)); font-size: calc(.82 * var(--u)); font-weight: 800; }
.ck-marque .appli__logo { margin: 0; width: calc(1 * var(--u)); height: calc(1 * var(--u)); }
.ck-role { font-style: normal; font-size: calc(.56 * var(--u)); color: #8FA0D8; margin: 0 0 calc(.6 * var(--u)) calc(1.4 * var(--u)); }
.ck-onglet {
	padding: calc(.34 * var(--u)) calc(.5 * var(--u));
	border-radius: calc(.4 * var(--u));
	font-size: calc(.62 * var(--u)); color: #B9C4EA;
	transition: background 300ms ease, color 300ms ease;
}
.ck-onglet.est-actif { background: rgb(78 118 255 / .32); color: #FFFFFF; font-weight: 700; }
.ck-onglet.est-clique { background: rgb(78 118 255 / .55); }

.ck-corps { position: relative; min-width: 0; overflow: hidden; }
.ck-vue {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; gap: calc(.55 * var(--u));
	padding: calc(.75 * var(--u)) calc(.85 * var(--u));
	opacity: 0; visibility: hidden;
	transition: opacity 420ms ease, visibility 0s linear 420ms;
}
.ck-vue.est-active { opacity: 1; visibility: visible; transition: opacity 420ms ease; }
.ck-tete { display: flex; justify-content: space-between; align-items: center; }
.ck-tete em { display: block; font-style: normal; font-size: calc(.58 * var(--u)); color: #6B76A0; }
.ck-tete b { font-size: calc(.95 * var(--u)); font-weight: 800; letter-spacing: -.01em; color: var(--nuit); }
.ck-periodes { display: inline-flex; padding: calc(.14 * var(--u)); border-radius: 999px; background: #E6EBF7; }
.ck-periodes i { font-style: normal; font-size: calc(.52 * var(--u)); font-weight: 600; color: #5A6386; padding: calc(.18 * var(--u)) calc(.5 * var(--u)); border-radius: 999px; }
.ck-periodes i.est-active { background: #FFFFFF; color: var(--nuit); box-shadow: 0 1px 3px rgb(20 31 75 / .15); }

.ck-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(.45 * var(--u)); }
.ck-kpi {
	display: grid; gap: calc(.12 * var(--u)); align-content: start;
	padding: calc(.55 * var(--u)) calc(.6 * var(--u));
	border-radius: calc(.6 * var(--u)); background: #FFFFFF;
	box-shadow: 0 1px 2px rgb(20 31 75 / .06), 0 6px 14px -8px rgb(20 31 75 / .18);
	min-width: 0;
}
.ck-kpi em { font-style: normal; font-size: calc(.52 * var(--u)); font-weight: 600; color: #6B76A0; line-height: 1.25; }
.ck-val { font-size: calc(1.15 * var(--u)); font-weight: 800; letter-spacing: -.02em; color: var(--nuit); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ck-etat {
	justify-self: start; padding: calc(.1 * var(--u)) calc(.4 * var(--u)); border-radius: 999px;
	font-size: calc(.5 * var(--u)); font-weight: 700;
	background: #E3F7EC; color: #0E7A3E;           /* le vert : état seulement */
	transition: background 400ms ease, color 400ms ease;
}
.ck-kpi.est-attente .ck-etat { background: #EEF0F6; color: #9AA3BF; }

.ck-graphe {
	flex: 1; min-height: 0;
	display: flex; flex-direction: column;
	padding: calc(.6 * var(--u)) calc(.7 * var(--u)) calc(.45 * var(--u));
	border-radius: calc(.7 * var(--u)); background: #FFFFFF;
	box-shadow: 0 1px 2px rgb(20 31 75 / .06), 0 8px 18px -10px rgb(20 31 75 / .2);
}
.ck-graphe__tete { display: flex; justify-content: space-between; align-items: center; font-size: calc(.6 * var(--u)); color: #5A6386; }
.ck-graphe__tete b { color: var(--nuit); font-size: calc(.66 * var(--u)); }
.ck-graphe__tete span { display: inline-flex; align-items: center; gap: calc(.3 * var(--u)); }
.ck-pt { display: inline-block; width: calc(.45 * var(--u)); height: calc(.45 * var(--u)); border-radius: 50%; }
.ck-pt--ca { background: #1332FF; }
.ck-pt--mg { background: #9DB2FF; margin-left: calc(.4 * var(--u)); }
.ck-courbes { flex: 1; width: 100%; min-height: 0; margin-top: calc(.3 * var(--u)); overflow: visible; }
.ck-grille { stroke: #EEF1F8; stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.ck-ligne { fill: none; stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ck-ligne--ca { stroke: #1332FF; }
.ck-ligne--mg { stroke: #9DB2FF; stroke-width: 2; }
.ck-aire { transition: opacity 800ms ease; }
.ck-mois { display: grid; grid-template-columns: repeat(12, 1fr); font-size: calc(.46 * var(--u)); color: #9AA3BF; text-align: center; margin-top: calc(.15 * var(--u)); }
.ck-mois i { font-style: normal; }
/* le tracé (posé par cockpit.js) */
.ck.est-trace .ck-ligne { stroke-dashoffset: 1; transition: none; }
.ck.est-trace .ck-aire { opacity: 0; }
.ck.est-trace.trace-go .ck-ligne { stroke-dashoffset: 0; transition: stroke-dashoffset 1800ms cubic-bezier(.45, 0, .25, 1); }
.ck.est-trace.trace-go .ck-ligne--mg { transition-delay: 250ms; }
.ck.est-trace.trace-go .ck-aire { opacity: 1; transition-delay: 900ms; }

/* barres (commercial, production) */
.ck-barres { position: relative; flex: 1; display: flex; align-items: flex-end; gap: calc(.35 * var(--u)); margin-top: calc(.4 * var(--u)); padding-bottom: calc(.8 * var(--u)); }
.ck-barre, .ck-duo { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: calc(.12 * var(--u)); }
.ck-barre i, .ck-duo i { display: block; width: 70%; height: var(--h); border-radius: calc(.25 * var(--u)) calc(.25 * var(--u)) 0 0; background: linear-gradient(180deg, #9DB2FF, #6E8FFF); transform-origin: 50% 100%; transition: background 300ms ease; }
.ck-duo i { width: 38%; }
.ck-duo .ck-env { background: #1332FF; }
.ck-duo .ck-sig { background: #9DB2FF; }
.ck-barre--cle i { background: linear-gradient(180deg, #4E76FF, #1332FF); }
.ck-barres small { position: absolute; bottom: calc(-.85 * var(--u)); left: 50%; translate: -50% 0; font-size: calc(.44 * var(--u)); color: #9AA3BF; }
.ck-barres.est-pousse i { scale: 1 0; }
.ck-barres.est-pousse.pousse-go i { scale: 1 1; transition: scale 900ms cubic-bezier(.2, .8, .2, 1); }
.ck-bulle {
	position: absolute; left: 62%; top: -2%;
	padding: calc(.3 * var(--u)) calc(.55 * var(--u)); border-radius: calc(.4 * var(--u));
	background: #0B1437; color: #FFFFFF; font-size: calc(.52 * var(--u)); font-weight: 700; white-space: nowrap;
	opacity: 0; translate: 0 4px; transition: opacity 300ms ease, translate 300ms ease;
}
.ck-bulle.est-visible { opacity: 1; translate: 0 0; }

/* logistique */
.ck-alerte {
	position: relative; display: grid; align-items: center;
	padding: calc(.55 * var(--u)) calc(.8 * var(--u)) calc(.55 * var(--u)) calc(1.8 * var(--u));
	border-radius: calc(.6 * var(--u));
	background: #FFF1DF; color: #9A4A00; font-size: calc(.66 * var(--u)); font-weight: 700;
	transition: background 500ms ease, color 500ms ease;
}
.ck-alerte i { position: absolute; left: calc(.7 * var(--u)); top: 50%; translate: 0 -50%; width: calc(.55 * var(--u)); height: calc(.55 * var(--u)); border-radius: 50%; background: #F08C00; transition: background 500ms ease; }
.ck-alerte__a, .ck-alerte__b { grid-area: 1 / 1; transition: opacity 400ms ease; }
.ck-alerte__b { opacity: 0; }
.ck-alerte.est-regle { background: #E3F7EC; color: #0E7A3E; }
.ck-alerte.est-regle i { background: #16A34A; }
.ck-alerte.est-regle .ck-alerte__a { opacity: 0; }
.ck-alerte.est-regle .ck-alerte__b { opacity: 1; }
.ck-stocks { display: grid; gap: calc(.35 * var(--u)); padding: calc(.6 * var(--u)) calc(.7 * var(--u)); border-radius: calc(.7 * var(--u)); background: #FFFFFF; box-shadow: 0 1px 2px rgb(20 31 75 / .06); }
.ck-stocks div { display: grid; grid-template-columns: calc(6 * var(--u)) 1fr calc(1.8 * var(--u)); align-items: center; gap: calc(.5 * var(--u)); font-size: calc(.56 * var(--u)); }
.ck-stocks b { color: var(--nuit); }
.ck-stocks em { font-style: normal; color: #6B76A0; text-align: right; }
.ck-jauge { height: calc(.35 * var(--u)); border-radius: 999px; background: linear-gradient(90deg, #1332FF var(--p), #E6EBF7 var(--p)); }

/* la notification */
.ck-notif {
	position: absolute; top: calc(.6 * var(--u)); right: calc(.7 * var(--u)); z-index: 3;
	display: flex; align-items: center; gap: calc(.4 * var(--u));
	padding: calc(.45 * var(--u)) calc(.7 * var(--u));
	border-radius: calc(.6 * var(--u));
	background: rgb(255 255 255 / .96); color: var(--nuit);
	font-size: calc(.56 * var(--u)); font-weight: 700;
	box-shadow: 0 10px 24px -10px rgb(11 20 55 / .45), 0 0 0 1px rgb(20 31 75 / .06);
	opacity: 0; translate: 110% 0;
	transition: opacity 400ms ease, translate 500ms cubic-bezier(.2, .8, .2, 1);
}
.ck-notif i { width: calc(.5 * var(--u)); height: calc(.5 * var(--u)); border-radius: 50%; background: #16A34A; }
.ck-notif.est-visible { opacity: 1; translate: 0 0; }

/* le curseur */
.ck-curseur {
	position: absolute; left: 0; top: 0; z-index: 5;
	width: calc(1.15 * var(--u)); height: calc(1.15 * var(--u));
	opacity: 0;
	translate: var(--cx, 60%) var(--cy, 60%);
	transition: translate 1300ms cubic-bezier(.45, 0, .25, 1), opacity 400ms ease, scale 150ms ease;
	filter: drop-shadow(0 2px 3px rgb(0 0 0 / .35));
	pointer-events: none;
}
.ck.est-demo .ck-curseur { opacity: 1; }
.ck-curseur.est-clic { scale: .82; }
@media (max-width: 899px) { .ck-curseur, .ck-notif { display: none; } }
.ck-vue[data-vue="logistique"] .ck-stocks { flex: 1; align-content: space-evenly; padding-block: calc(.9 * var(--u)); }
.ck-vue[data-vue="logistique"] .ck-stocks div { font-size: calc(.66 * var(--u)); grid-template-columns: calc(7 * var(--u)) 1fr calc(2 * var(--u)); }
.ck-vue[data-vue="logistique"] .ck-jauge { height: calc(.5 * var(--u)); }
/* le titre tient en DEUX lignes (Paul n'aime pas les titres sur trois) */
@media (min-width: 900px) {
	.auto__gauche { max-width: 40rem; }
	.auto__titre { max-width: none; font-size: clamp(2rem, .9rem + 2.3vw, 2.9rem); text-wrap: balance; }
}
@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		.auto__scene { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
	}
}
@media (min-width: 900px) {
	.auto__gauche { max-width: 44rem; }
	.auto__titre { font-size: clamp(1.9rem, .8rem + 1.9vw, 2.5rem); }
}

/* ============================================================================
   L'ÉCART ENTRE L'IA ET LES ÉTAPES, DIVISÉ PAR QUATRE             2026-09-23
   ----------------------------------------------------------------------------
   Paul : « entre "L'IA, oui" et les 4 étapes, il y a un écart comme si c'était
   une section entière ; divise-le par 4 ». Mesuré : ~1 065 px de bleu vide.
   La scène chevauche la fin de l'IA (−80 svh) avec un fond transparent qui ne
   devient bleu nuit qu'une fois l'IA sortie : la carte monte juste après les
   derniers contrastes, par-dessus la fin de la section.
   ========================================================================== */
@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		.cine { margin-top: -80svh; background: transparent; position: relative; z-index: 1; }
		@keyframes frise-fond-v2 {
			0%          { background-color: rgb(11 20 55 / 0); }
			8.4%, 25.9% { background-color: var(--nuit-uni); }
			29.3%, 81.5% { background-color: #FFFFFF; }
			86.5%, 100% { background-color: var(--nuit-uni); }
		}
	}
}
@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		/* transparente sur la zone qui chevauche l'IA, bleu nuit au-delà : plus
		   de bande claire (le fond de la page) sous la fin de l'IA */
		.cine { background: linear-gradient(180deg, transparent 0, transparent 80svh, var(--nuit-uni) 80svh); }
		@keyframes frise-fond-v2 {
			0%, 25.9%   { background-color: rgb(11 20 55 / 0); }
			29.3%, 81.5% { background-color: #FFFFFF; }
			86.5%, 100% { background-color: var(--nuit-uni); }
		}
	}
}
@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		.cine { margin-top: -87svh; background: linear-gradient(180deg, transparent 0, transparent 87svh, var(--nuit-uni) 87svh); }
	}
}

/* ============================================================================
   DERRIÈRE SALYS — v3 : texte à gauche, visages incrustés dans la marque
   2026-09-23
   ----------------------------------------------------------------------------
   Aucun cadre, aucun fond à traits. À droite : le logo SALYS en très grand,
   bleu très pâle, DERRIÈRE eux ; un halo bleu diffus sous leurs épaules ; les
   photos se fondent dans le fond par le bas (masque), leurs têtes passent
   devant les lettres. En dessous, « Notre objectif » sur toute la largeur.
   Parallaxe : le logo glisse plus lentement qu'eux.
   ========================================================================== */
.equipe--v3 { background: #F5F7FE; padding-block: var(--section); overflow: clip; }
.equipe--v3 .equipe__grille {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 5vw, 5rem);
	align-items: center;
}
@media (min-width: 900px) {
	.equipe--v3 .equipe__grille { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
}
.equipe--v3 .equipe__texte { text-align: left; max-width: 34rem; }

.equipe__scene3 {
	position: relative;
	aspect-ratio: 1.15;
	width: 100%;
	max-width: 40rem;
	justify-self: center;
}
.equipe__marque {
	position: absolute;
	left: 50%; top: 4%;
	translate: -50% 0;
	display: flex; align-items: center; gap: .08em;
	font-size: clamp(4.6rem, 11.5vw, 10.5rem);
	line-height: .8;
	white-space: nowrap;
	pointer-events: none;
}
.equipe__marque .equipe__mono {
	width: .72em; aspect-ratio: 42 / 29;
	background: linear-gradient(180deg, #C9D6FF 0%, #E4EAFF 100%);
	-webkit-mask: url("../img/monogramme.svg") no-repeat center / contain;
	mask: url("../img/monogramme.svg") no-repeat center / contain;
}
.equipe__marque .equipe__mot {
	font-size: 1em;
	font-weight: 800;
	letter-spacing: -.05em;
	background: linear-gradient(180deg, #C9D6FF 0%, #E4EAFF 100%);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent;
	padding-bottom: .08em;
}
.equipe__halo {
	position: absolute;
	left: 8%; right: 8%; bottom: 0;
	height: 62%;
	border-radius: 50% 50% 0 0 / 60% 60% 0 0;
	background: radial-gradient(60% 70% at 50% 100%, rgb(19 50 255 / .30), rgb(78 118 255 / .12) 55%, transparent 75%);
	filter: blur(10px);
}
.equipe__visage3 {
	position: absolute;
	bottom: 0;
	margin: 0;
	width: 50%;
	-webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}
.equipe__visage3 img { display: block; width: 100%; height: auto; max-width: none; filter: drop-shadow(0 18px 30px rgb(11 20 55 / .18)); }
.equipe__visage3--clement { left: 2%; }
.equipe__visage3--paul { right: 2%; }
.equipe__signatures {
	position: absolute;
	left: 0; right: 0; bottom: -.4rem;
	display: flex; justify-content: space-between;
	margin: 0; padding-inline: 8%;
	pointer-events: none;
}
.equipe__signatures span { display: grid; font-size: .8rem; color: #5A6386; line-height: 1.3; }
.equipe__signatures span:last-child { text-align: right; }
.equipe__signatures b { font-size: 1.05rem; font-weight: 800; color: var(--nuit); }

.equipe__objectif {
	grid-column: 1 / -1;
	display: grid;
	gap: .4rem;
	padding: clamp(1.4rem, 3vw, 2rem) clamp(1.5rem, 4vw, 3rem);
	border-radius: 1.5rem;
	background:
		radial-gradient(60% 120% at 100% 0%, rgb(78 118 255 / .35), transparent 60%),
		#0B1437;
	color: #DCE4FA;
	box-shadow: 0 30px 60px -30px rgb(11 20 55 / .6);
}
.equipe__objectif-titre { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #8FA6FF; }
.equipe__objectif p { margin: 0; max-width: none; font-size: clamp(1.1rem, .9rem + .8vw, 1.5rem); line-height: 1.45; font-weight: 500; }
.equipe__objectif b { color: #FFFFFF; font-weight: 800; }

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.equipe__marque {
			animation: equipe3-marque linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}
		@keyframes equipe3-marque { from { translate: -50% 26%; } to { translate: -50% -14%; } }
		.equipe__visage3--clement { animation: equipe3-a linear both; animation-timeline: view(); animation-range: cover 0% cover 55%; }
		.equipe__visage3--paul    { animation: equipe3-b linear both; animation-timeline: view(); animation-range: cover 0% cover 55%; }
		@keyframes equipe3-a { from { translate: 0 10%; } to { translate: 0 0; } }
		@keyframes equipe3-b { from { translate: 0 18%; } to { translate: 0 0; } }
	}
}
/* ⚠ Un rectangle clair apparaissait autour de chaque photo : l'ombre portée
   posée sous un masque. L'ombre passe sur le halo, la photo n'en a plus. */
.equipe__visage3 img { filter: none; }
.equipe__halo { filter: blur(18px); }
/* les signatures sous la scène, pas sur les vêtements */
.equipe__scene3 { margin-bottom: 3rem; }
.equipe__signatures { bottom: -3rem; padding-inline: 10%; }
/* les têtes passent DEVANT les lettres : le logo descend derrière eux */
.equipe__marque { top: 16%; }
.equipe__visage3 { z-index: 1; }
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		@keyframes equipe3-marque { from { translate: -50% 30%; } to { translate: -50% -6%; } }
	}
}

/* 2026-09-23 — Paul : pas les lettres SALYS au-dessus de nos têtes (répétition
   avec le titre) ; seulement le logo, en bleu, bien visible, en grand, ENTRE
   nous deux. Le monogramme est centré derrière eux, à hauteur des épaules. */
.equipe__marque { top: 22%; font-size: 1rem; }
.equipe__marque .equipe__mono {
	width: clamp(11rem, 20vw, 17rem);
	background: linear-gradient(160deg, #6E8FFF 0%, #1332FF 100%);
	opacity: .9;
	filter: drop-shadow(0 20px 40px rgb(19 50 255 / .35));
}

/* ============================================================================
   CARTES DES PROBLÈMES — icônes alignées, animées, survol          2026-09-23
   ----------------------------------------------------------------------------
   Paul : « l'icône des tableurs est collée au titre ; remonte les icônes et
   aligne-les à l'horizontale ; anime chaque logo : les mêmes gestes → ça
   tourne ; le temps qui dort → des z ; la donnée saisie trois fois → saisie
   trois fois ; les tableurs → des cases qui disparaissent et réapparaissent ;
   au survol, la carte se met en avant avec un contour ».
   · La dérive au défilement est retirée (elle décalait les icônes entre elles).
   · Boîte d'icône de hauteur fixe, icônes droites, même ligne de base.
   · Boucles décoratives lentes (aria-hidden), immobiles en mouvement réduit.
   ========================================================================== */
.mal__objet { width: 5.5rem; height: 5.5rem; margin: 0 auto; display: grid; place-items: center; animation: none !important; translate: none !important; rotate: none !important; }
.mal__objet .verre, .mal:nth-child(even) .mal__objet .verre { rotate: 0deg; width: 100%; overflow: visible; }
.mal__titre { margin-top: 1.4rem; }
.mal {
	transition: translate 320ms var(--courbe), box-shadow 320ms var(--courbe), background 320ms var(--courbe);
}
.mal:hover {
	translate: 0 -6px;
	background: linear-gradient(180deg, rgb(78 118 255 / .16), rgb(255 255 255 / .04));
	box-shadow: inset 0 0 0 1.5px rgb(143 166 255 / .85), 0 24px 50px -24px rgb(19 50 255 / .8);
}
.mal:hover .mal__objet .verre { scale: 1.1; }
.mal__objet .verre { transition: scale 320ms var(--courbe); }

@media (prefers-reduced-motion: no-preference) {
	/* saisie trois fois : les feuilles tombent l'une après l'autre */
	.verre--ressaisie .a-f { animation: a-saisie 3.6s cubic-bezier(.3,.7,.3,1) infinite; }
	.verre--ressaisie .a-f2 { animation-delay: .35s; }
	.verre--ressaisie .a-f3 { animation-delay: .7s; }
	@keyframes a-saisie {
		0%, 8%   { opacity: 0; translate: 0 -14px; }
		22%, 78% { opacity: 1; translate: 0 0; }
		92%, 100% { opacity: 0; translate: 0 0; }
	}
	/* tableurs : les cases s'effacent et reviennent */
	.verre--tableur .a-c { animation: a-case 4s ease-in-out infinite; }
	.verre--tableur .a-c2 { animation-delay: .5s; } .verre--tableur .a-c3 { animation-delay: 1.3s; }
	.verre--tableur .a-c4 { animation-delay: .9s; } .verre--tableur .a-c5 { animation-delay: 1.7s; }
	.verre--tableur .a-c6 { animation-delay: 2.1s; }
	@keyframes a-case { 0%, 30%, 100% { opacity: 1; } 45%, 60% { opacity: 0; } }
	/* les mêmes gestes : ça tourne */
	.verre--repetition .a-tourne { transform-box: view-box; transform-origin: 60px 60px; animation: a-tourne 6s linear infinite; }
	@keyframes a-tourne { to { rotate: 360deg; } }
	/* l'argent qui dort : des z qui montent */
	.verre--dormant .a-z { animation: a-z 3s ease-in-out infinite; }
	.verre--dormant .a-z2 { animation-delay: .5s; } .verre--dormant .a-z3 { animation-delay: 1s; }
	@keyframes a-z { 0% { opacity: 0; translate: -4px 8px; } 30%, 60% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 4px -8px; } }
}
/* ⚠ La scène du logo (sticky, transparente) recouvrait les cartes des
   problèmes et captait la souris : aucun survol possible. Décorative, elle
   laisse passer le pointeur. */
.passage, .passage * { pointer-events: none; }

/* 2026-09-23 — cockpit plus rapide et plus visuel (Paul : « beaucoup plus vite,
   pour que celui qui scrolle vite voie que ça bouge ; plus beau »). */
.ck-curseur { transition: translate 560ms cubic-bezier(.45, 0, .25, 1), opacity 300ms ease, scale 120ms ease; }
.ck.est-trace.trace-go .ck-ligne { transition-duration: 850ms; }
.ck.est-trace.trace-go .ck-ligne--mg { transition-delay: 120ms; }
.ck.est-trace.trace-go .ck-aire { transition-delay: 400ms; }
.ck-barres.est-pousse.pousse-go i { transition-duration: 480ms; }
.ck-vue { transition-duration: 260ms; }
.ck-notif { transition-duration: 300ms, 380ms; }
/* plus de relief : courbe épaisse avec une lueur, aire plus dense, point final
   qui pulse, KPI plus contrastés */
.ck-ligne--ca { stroke-width: 3.2; filter: drop-shadow(0 3px 6px rgb(19 50 255 / .45)); }
.ck-ligne--mg { stroke-width: 2.4; }
#ck-aire stop:first-child { stop-opacity: .5; }
.ck-graphe { background: linear-gradient(180deg, #FFFFFF 0%, #F6F8FF 100%); }
.ck-val { font-size: calc(1.3 * var(--u)); background: linear-gradient(180deg, #0B1437, #1332FF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ck-kpi { border-top: calc(.16 * var(--u)) solid #1332FF; }
.ck-kpi.est-attente { border-top-color: #D5DDF3; }
.ck-kpi { transition: border-color 300ms ease, translate 300ms ease; }
.ck-kpi:not(.est-attente) { animation: ck-pop 420ms cubic-bezier(.3, 1.5, .5, 1); }
@keyframes ck-pop { 0% { translate: 0 4px; } 60% { translate: 0 -2px; } 100% { translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .ck-kpi:not(.est-attente) { animation: none; } }

/* ============================================================================
   LE LOGO ENTRE LES FONDATEURS : au-dessus des têtes, mobile, lumineux
   2026-09-23
   ----------------------------------------------------------------------------
   Paul : « remonte-le, pile au-dessus de nos têtes, au milieu ; qu'il bouge
   quand on scrolle ; et au survol, de la lumière, des jeux de lumière dans le
   logo ». La lumière suit le curseur (--lx / --ly posés par boutons.js), un
   reflet balaie le logo, et il s'illumine.
   ========================================================================== */
.equipe__marque { top: -6%; }
.equipe__marque .equipe__mono {
	width: clamp(8.5rem, 14vw, 13rem);
	opacity: 1;
	background:
		radial-gradient(circle at var(--lx, 30%) var(--ly, 20%), rgb(255 255 255 / var(--li, 0)) 0%, rgb(200 215 255 / calc(var(--li, 0) * .6)) 18%, transparent 42%),
		linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .0) 45%, transparent 60%),
		linear-gradient(160deg, #6E8FFF 0%, #1332FF 100%);
	background-size: 100% 100%, 250% 100%, 100% 100%;
	background-position: 0 0, 120% 0, 0 0;
	transition: filter 400ms var(--courbe), scale 400ms var(--courbe);
}
.equipe__scene3:hover .equipe__mono,
.equipe__scene3.est-eclaire .equipe__mono {
	--li: .95;
	scale: 1.06;
	filter: drop-shadow(0 0 28px rgb(78 118 255 / .8)) drop-shadow(0 20px 40px rgb(19 50 255 / .45));
	background:
		radial-gradient(circle at var(--lx, 30%) var(--ly, 20%), rgb(255 255 255 / .95) 0%, rgb(200 215 255 / .55) 18%, transparent 42%),
		linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .75) 45%, transparent 60%),
		linear-gradient(160deg, #6E8FFF 0%, #1332FF 100%);
	background-size: 100% 100%, 250% 100%, 100% 100%;
	animation: logo-reflet 1.6s ease-in-out infinite;
}
@keyframes logo-reflet { from { background-position: 0 0, 120% 0, 0 0; } to { background-position: 0 0, -120% 0, 0 0; } }
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		@keyframes equipe3-marque {
			from { translate: -50% 40%;  rotate: -8deg; }
			to   { translate: -50% -20%; rotate: 6deg; }
		}
	}
}
@media (prefers-reduced-motion: reduce) {
	.equipe__scene3:hover .equipe__mono { animation: none; scale: 1; }
}
/* la lueur sur le CONTENEUR : sur le monogramme, le masque la rognait */
.equipe__marque { transition: filter 400ms var(--courbe); }
.equipe__scene3:hover .equipe__marque { filter: drop-shadow(0 0 22px rgb(78 118 255 / .9)) drop-shadow(0 0 60px rgb(19 50 255 / .45)); }

/* ============================================================================
   2026-09-23 — « Parler de votre site » au registre des boutons du premier
   écran (même matière, même anneau de lumière au survol) ; marteau plus
   vertical et plus grand à l'étape 3.
   ========================================================================== */
.galerie__actions .bouton--principal,
.galerie__actions .bouton--principal:hover,
.galerie__actions .bouton--principal:focus-visible {
	background: linear-gradient(180deg, #25305F 0%, #0B1330 100%);
	color: #FFFFFF;
	border: 0;
	box-shadow:
		0 0 0 1px rgb(10 19 48 / .5),
		0 10px 22px -8px rgb(3 8 26 / .55),
		inset 0 1px 1px rgb(255 255 255 / .22);
}
.galerie__actions .bouton--principal:hover { translate: 0 -2px; }
.galerie__actions .bouton::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	padding: 2.5px;
	background: conic-gradient(from var(--anneau),
		rgb(78 118 255 / .25) 0%, transparent 12% 30%,
		#4E76FF 52%, #FFFFFF 64%, #8FA8FF 72%, #1332FF 86%,
		rgb(78 118 255 / .25) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 300ms var(--courbe);
	pointer-events: none;
}
.galerie__actions .bouton:hover::before,
.galerie__actions .bouton:focus-visible::before { opacity: 1; animation: anneau-tour 1.5s linear infinite; }
@media (prefers-reduced-motion: reduce) {
	.galerie__actions .bouton::before { animation: none !important; }
	.galerie__actions .bouton:hover { translate: none; }
}

.frise__objet img[src*="marteau"] { rotate: 42deg; scale: 1.35; }

/* 2026-09-23 — galerie à quatre sites, deux captures chacun : 4 colonnes ;
   les colonnes paires décalées comme la colonne centrale du composant. */
.galerie__grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		.galerie__col--1, .galerie__col--3 { margin-top: -.5rem; }
		.galerie__col--2, .galerie__col--4 { margin-top: -18%; }
	}
}
@media (max-width: 899px) { .galerie__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .galerie__grille { grid-template-columns: 1fr; } }
@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		/* deux captures par colonne : la grille est CENTRÉE dans l'écran, sans
		   décalage négatif (il coupait les premiers écrans en haut et laissait
		   un vide en bas) ; le glissement des colonnes est conservé. */
		.galerie__grille { align-items: center; padding: 5.5rem 2rem 2rem; }
		.galerie__col, .galerie__col--1, .galerie__col--2, .galerie__col--3, .galerie__col--4 { margin-top: 0; gap: .75rem; }
	}
}

/* 2026-09-23 — « Du temps et de l'argent qui dorment » : un euro de verre qui
   tourne sur lui-même comme une pièce, puis s'éteint un instant (l'argent qui
   dort). */
@media (prefers-reduced-motion: no-preference) {
	.verre--dormant .a-euro { transform-box: view-box; transform-origin: 60px 60px; animation: a-piece 4.5s ease-in-out infinite; }
	@keyframes a-piece {
		0%, 20%  { scale: 1 1;   opacity: 1; }
		35%      { scale: -1 1;  opacity: 1; }
		50%      { scale: 1 1;   opacity: 1; }
		65%, 80% { scale: 1 1;   opacity: .35; }
		100%     { scale: 1 1;   opacity: 1; }
	}
}

/* 2026-09-23 — galerie : DEUX colonnes de quatre captures (effet vertical
   retrouvé), la seconde décalée vers le bas comme dans le composant. */
.galerie__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 62rem; }
@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		.galerie__grille { align-items: start; padding: 0 2rem; margin-inline: auto; }
		.galerie__col--1 { margin-top: -.5rem; }
		.galerie__col--2 { margin-top: -30%; }
	}
}
@media (max-width: 599px) { .galerie__grille { grid-template-columns: 1fr; } }

/* 2026-09-23 — Paul : « aligner Clément Pichot et Paul Guillou avec la
   dernière ligne du paragraphe de gauche (remonter nos photos) ; le logo au
   milieu, juste au-dessus de nos têtes, pas collé aux cheveux mais plus près ».
   · Texte et scène alignés par le BAS : la ligne des noms = la dernière ligne.
   · Le logo se pose à ~4 % au-dessus des têtes ; sa parallaxe est réduite
     (elle l'éloignait de ~90 px selon le défilement). */
@media (min-width: 900px) {
	.equipe--v3 .equipe__grille { align-items: end; }
	.equipe--v3 .equipe__texte { padding-bottom: 0; }
	.equipe__scene3 { margin-bottom: 2.35rem; }
}
.equipe__marque { top: 2%; }
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		@keyframes equipe3-marque {
			from { translate: -50% 10%;  rotate: -5deg; }
			to   { translate: -50% -6%;  rotate: 4deg; }
		}
	}
}

/* ============================================================================
   GALERIE — retour aux trois colonnes d'origine ; rotation qui démarre TÔT
   2026-09-23
   ----------------------------------------------------------------------------
   Paul : « il faut scroller trop longtemps avant que la galerie se mette face
   à nous ; l'animation doit se déclencher dès que le bas du header touche la
   fin de la section bleu marine, quand on voit encore le sous-titre ».
   Mesuré : la piste commence 246 px sous le haut de la section. Le haut de la
   section au bas de l'en-tête (78 px) ⇔ haut de la piste à 324 px ⇔ « entry
   64 % ». La rotation est finie quand la piste atteint le haut de l'écran
   (324 px de défilement, au lieu de ~1 100) ; ensuite la grille se resserre
   et les colonnes glissent, comme avant.
   ========================================================================== */
.galerie__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: var(--largeur); }
@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		.galerie__grille {
			max-width: none; padding: 0; align-items: start;
			animation-name: galerie-grille-v2;
			animation-range: entry 64% contain 100%;
		}
		@keyframes galerie-grille-v2 {
			0%    { transform: rotateX(75deg) scale(1.2); }
			12.6% { transform: rotateX(0deg)  scale(1.2); }
			55%   { transform: rotateX(0deg)  scale(1); }
			100%  { transform: rotateX(0deg)  scale(1); }
		}
		.galerie__col { gap: .5rem; animation-name: galerie-col-v2; animation-range: entry 64% contain 100%; }
		@keyframes galerie-col-v2 {
			0%, 12.6% { translate: 0 var(--y-de); }
			100%      { translate: 0 var(--y-a); }
		}
		.galerie__col--1, .galerie__col--3 { margin-top: -.5rem; }
		.galerie__col--2 { margin-top: -50%; }
		.galerie__col--4 { margin-top: 0; }
	}
}
@media (max-width: 899px) { .galerie__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .galerie__grille { grid-template-columns: 1fr; } }

/* 2026-09-23 — trois sites, deux captures par colonne. Paul : « quand la
   grille est de face, on ne voit plus le haut des sites ». Mesuré : le haut des
   cadres à −164 / −276 px. Plus de décalage négatif ; la grille se pose sous
   l'en-tête et s'agrandit depuis son haut (et non depuis son centre). */
@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		.galerie__grille { padding: 7rem clamp(1.5rem, 4vw, 4rem) 2rem; transform-origin: 50% 7rem; max-width: 84rem; margin-inline: auto; }
		.galerie__col--1, .galerie__col--3 { margin-top: 0; }
		.galerie__col--2 { margin-top: 6%; }
	}
}
@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		/* centrée dans l'espace sous l'en-tête (plus de grand vide en bas) */
		.galerie__grille { align-content: center; padding-top: 5.5rem; padding-bottom: 1rem; transform-origin: 50% 55%; }
	}
}

/* ============================================================================
   « DIAGNOSTIC OFFERT » PASSE DEVANT « FREE TOOLS »               2026-09-23
   ----------------------------------------------------------------------------
   Paul : « Réservez votre audit » → « Diagnostic offert », plus parlant ;
   Free Tools lui faisait de l'ombre : on inverse. Le CTA prend le bleu plein,
   la lueur et le reflet périodique ; Free Tools redevient un onglet discret,
   signalé par un simple badge.
   ========================================================================== */
.entete .audit,
.entete--clair .audit {
	position: relative; overflow: hidden; isolation: isolate;
	background: linear-gradient(180deg, #3A5CFF 0%, #1332FF 100%);
	color: #FFFFFF;
	font-weight: 800;
	box-shadow: 0 0 0 1px rgb(19 50 255 / .6), 0 10px 24px -8px rgb(19 50 255 / .8), inset 0 1px 0 rgb(255 255 255 / .35);
}
.entete .audit:hover,
.entete--clair .audit:hover {
	background: linear-gradient(180deg, #4E6BFF 0%, #0F28D6 100%);
	color: #FFFFFF;
	box-shadow: 0 0 0 1px rgb(19 50 255 / .8), 0 14px 30px -8px rgb(19 50 255 / .9), inset 0 1px 0 rgb(255 255 255 / .45);
}
.entete .audit::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .5) 48%, transparent 66%);
	translate: -120% 0;
	animation: free-reflet 4s ease-in-out 1.5s infinite;
}

/* Free Tools : onglet discret */
.entete .nav__liste a.free-tools,
.entete--clair .nav__liste a.free-tools {
	background: transparent;
	color: #3D4870 !important;
	font-weight: 600;
	box-shadow: none;
	padding: .45rem .75rem;
}
.entete .nav__liste a.free-tools:hover { background: rgb(20 31 75 / .06); color: var(--nuit) !important; translate: none; box-shadow: none; }
.nav__liste .free-tools::after { content: none; animation: none; }
.free-tools__eclat { display: none; }
.free-tools__badge { background: #EEF2FF; color: #1332FF; }
@media (prefers-reduced-motion: reduce) { .entete .audit::after { animation: none; } }

/* ============================================================================
   LES PROBLÈMES — TROIS CARTES, TROIS FAUSSES CAPTURES ANIMÉES     2026-09-24
   ----------------------------------------------------------------------------
   Cartes blanches, visuels « logiciel » à rappels bleus. État FINAL par
   défaut ; l'état de départ n'existe que sous `.mal3-anim .mal3:not(.joue)`
   (classe posée par problemes.js). Chaque visuel dure 4 à 5 s, une fois.
   ========================================================================== */
.maux3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
	text-align: left;
}
@media (max-width: 899px) { .maux3 { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; } }
.mal3 {
	display: flex; flex-direction: column;
	padding: .8rem .8rem 1.3rem;
	border-radius: 1.4rem;
	background: #FFFFFF;
	color: var(--nuit);
	box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6), 0 0 0 1px rgb(255 255 255 / .6);
}
.mal3__visuel {
	position: relative;
	height: clamp(11.5rem, 25svh, 15rem);
	border-radius: 1rem;
	overflow: hidden;
	background: linear-gradient(160deg, #EEF2FF 0%, #DFE7FF 100%);
	padding: .8rem;
	font-size: .72rem;
	line-height: 1.3;
}
.mal3__titre { margin-top: 1.1rem; padding-inline: .45rem; font-size: 1.2rem; line-height: 1.2; font-weight: 800; color: var(--nuit); text-wrap: balance; }
.mal3 p { margin-top: .4rem; padding-inline: .45rem; font-size: .95rem; color: #5A6386; max-width: none; }

/* fenêtre générique */
.fen { position: relative; border-radius: .6rem; background: #FFFFFF; box-shadow: 0 10px 24px -12px rgb(11 20 55 / .35), 0 0 0 1px rgb(20 31 75 / .06); overflow: hidden; }
.fen__barre { display: flex; align-items: center; gap: .3rem; height: 1.45rem; padding-inline: .5rem; background: #F4F6FB; border-bottom: 1px solid #E6EAF4; }
.fen__barre i { width: .42rem; height: .42rem; border-radius: 50%; background: #D5DAE8; }
.fen__barre i:nth-child(1) { background: #FF6B63; } .fen__barre i:nth-child(2) { background: #FFC23E; } .fen__barre i:nth-child(3) { background: #36CB53; }
.fen__barre span { margin-left: .4rem; font-weight: 700; color: #5A6386; font-size: .66rem; white-space: nowrap; }

/* --- carte 1 : le dossier --------------------------------------------------- */
.fen--dossier { height: 100%; }
.dossier { list-style: none; margin: 0; padding: .35rem .4rem; display: grid; gap: .1rem; }
.dossier li { display: grid; grid-template-columns: 1rem minmax(0, 1fr) auto; gap: .45rem; align-items: center; padding: .28rem .35rem; border-radius: .35rem; }
.dossier li:nth-child(odd) { background: #F7F9FD; }
.xl { width: .95rem; height: 1.1rem; border-radius: .18rem; background: linear-gradient(135deg, #2FA964, #16774A); position: relative; }
.xl::after { content: ""; position: absolute; inset: .28rem .22rem; background: repeating-linear-gradient(0deg, rgb(255 255 255 / .75) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgb(255 255 255 / .75) 0 1px, transparent 1px 3px); }
.f-nom { font-weight: 600; color: var(--nuit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-date { color: #8A93B3; font-size: .62rem; }
.dossier li:last-child .f-nom { color: #1332FF; }
.bulle {
	position: absolute; right: .6rem; bottom: .6rem;
	display: grid; gap: .1rem;
	padding: .45rem .7rem; border-radius: .8rem .8rem .2rem .8rem;
	background: #1332FF; color: #FFFFFF; font-weight: 700; font-size: .75rem;
	box-shadow: 0 10px 20px -8px rgb(19 50 255 / .7);
}
.bulle b { font-size: .6rem; font-weight: 700; color: #C9D5FF; }

/* --- carte 2 : trois fenêtres ------------------------------------------------ */
.trio { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; height: calc(100% - 2.1rem); }
.fen--mini .fen__barre span { margin-left: .2rem; font-size: .56rem; }
.fen--mini .fen__barre i { width: .32rem; height: .32rem; }
.mini-corps { display: grid; gap: .3rem; padding: .45rem .4rem; align-content: start; }
.mini-ligne { height: .45rem; border-radius: 2px; background: #E6EAF4; font-size: 0; }
.mini-ligne:first-child { width: 90%; } .mini-ligne:nth-child(2) { width: 70%; }
.mini-champ { font-size: .52rem; color: #8A93B3; font-weight: 600; }
.mini-vide { height: .9rem; border-radius: .25rem; background: #F1F4FA; box-shadow: inset 0 0 0 1px #E6EAF4; }
.mini-num { display: block; padding: .18rem .3rem; border-radius: .25rem; font-size: .6rem; font-weight: 800; color: #1332FF; background: #EEF2FF; box-shadow: inset 0 0 0 1px #C9D5FF; white-space: nowrap; overflow: hidden; }
.mini-grille { grid-template-columns: repeat(2, 1fr); gap: 2px; padding: .4rem .35rem; }
.mini-grille > span { height: .9rem; background: #F1F4FA; box-shadow: inset 0 0 0 1px #E3E8F2; }
.mini-grille > .mini-num { height: auto; grid-column: 1 / -1; background: #E3F7EC; color: #0E7A3E; box-shadow: inset 0 0 0 1px #9ED9B6; }
.fen--xl .fen__barre { background: #EAF6EF; }
.curseur2 { position: absolute; width: 1rem; height: 1rem; left: 76%; top: 62%; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .35)); }
.compteur-ressaisies {
	position: absolute; left: .8rem; right: .8rem; bottom: .7rem;
	display: flex; justify-content: space-between; align-items: center;
	padding: .35rem .6rem; border-radius: .5rem;
	background: #FFFFFF; font-weight: 700; color: #5A6386; font-size: .7rem;
	box-shadow: 0 0 0 1px rgb(20 31 75 / .06);
}
.compteur-ressaisies b { font-size: 1rem; font-weight: 800; color: #1332FF; font-variant-numeric: tabular-nums; }

/* --- carte 3 : le suivi ----------------------------------------------------- */
.fen--suivi { height: 100%; display: flex; flex-direction: column; }
.suivi { list-style: none; margin: 0; padding: .3rem .4rem; display: grid; gap: .12rem; }
.suivi li { display: grid; grid-template-columns: .55rem minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: .45rem; align-items: center; padding: .22rem .35rem; border-radius: .35rem; }
.suivi li:nth-child(odd) { background: #F7F9FD; }
.t-pastille { grid-row: 1 / 3; width: .55rem; height: .55rem; border-radius: 50%; background: #E5484D; box-shadow: 0 0 0 3px rgb(229 72 77 / .15); }
.suivi li:nth-child(4) .t-pastille, .suivi li:nth-child(5) .t-pastille { background: #F08C00; box-shadow: 0 0 0 3px rgb(240 140 0 / .15); }
.t-obj { font-weight: 700; color: var(--nuit); font-size: .66rem; }
.t-etat { grid-column: 2; font-size: .56rem; color: #8A93B3; }
.t-mt { grid-row: 1 / 3; grid-column: 3; font-size: .7rem; font-weight: 800; color: var(--nuit); font-variant-numeric: tabular-nums; }
.suivi__total { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding: .45rem .75rem; background: #0B1437; color: #C9D3F2; font-weight: 700; }
.suivi__total b { font-size: .95rem; color: #FFFFFF; font-variant-numeric: tabular-nums; }

/* --- les animations (une fois) ---------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.mal3-anim .mal3:not(.joue) .dossier li,
	.mal3-anim .mal3:not(.joue) .bulle,
	.mal3-anim .mal3:not(.joue) .suivi li { opacity: 0; }
	.mal3.joue .dossier li { animation: apparait .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.3s + var(--k) * .6s); }
	.mal3.joue .dossier li:last-child { animation-name: apparait, clignote; animation-duration: .45s, .9s; animation-delay: 2.7s, 3.1s; }
	.mal3.joue .bulle { animation: bulle .5s cubic-bezier(.3, 1.5, .5, 1) 3.7s both; }
	@keyframes apparait { from { opacity: 0; translate: 0 6px; background: #EEF2FF; } to { opacity: 1; translate: 0 0; } }
	@keyframes clignote { 0%, 100% { background: transparent; } 40% { background: #FDECEC; } }
	@keyframes bulle { from { opacity: 0; scale: .6; translate: 10px 10px; } to { opacity: 1; scale: 1; translate: 0 0; } }

	/* carte 2 : le curseur copie et colle, trois fois */
	.mal3-anim .mal3:not(.joue) .mini-num--colle { opacity: 0; }
	.mal3-anim .mal3:not(.joue) .curseur2 { left: 12%; top: 58%; }
	.mal3.joue .curseur2 { animation: copie 1.55s cubic-bezier(.45, 0, .25, 1) .2s 3 both; }
	@keyframes copie {
		0%   { left: 12%; top: 58%; scale: 1; }
		14%  { left: 12%; top: 58%; scale: .8; }
		20%  { left: 12%; top: 58%; scale: 1; }
		50%  { left: 44%; top: 44%; scale: 1; }
		56%  { left: 44%; top: 44%; scale: .8; }
		62%  { left: 44%; top: 44%; scale: 1; }
		92%  { left: 76%; top: 62%; scale: .8; }
		100% { left: 76%; top: 62%; scale: 1; }
	}
	.mal3.joue .mini-num--source { animation: selection 1.55s linear .2s 3; }
	@keyframes selection { 10%, 25% { background: #1332FF; color: #FFFFFF; } 0%, 35%, 100% { background: #EEF2FF; color: #1332FF; } }
	.mal3.joue .mini-num--1 { animation: colle 1.55s linear .2s 3 both; }
	.mal3.joue .mini-num--2 { animation: colle2 1.55s linear .2s 3 both; }
	@keyframes colle  { 0%, 55% { opacity: 0; } 58%, 100% { opacity: 1; } }
	@keyframes colle2 { 0%, 90% { opacity: 0; } 93%, 100% { opacity: 1; } }

	/* carte 3 : lignes, puis pastilles gris → orange → rouge */
	.mal3.joue .suivi li { animation: apparait .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.3s + var(--k) * .55s); }
	.mal3.joue .t-pastille { animation: alerte 1.4s linear both; animation-delay: calc(.5s + var(--k) * .55s); }
	.mal3.joue .suivi li:nth-child(4) .t-pastille, .mal3.joue .suivi li:nth-child(5) .t-pastille { animation-name: alerte-orange; }
	@keyframes alerte { 0%, 20% { background: #C4C9D6; box-shadow: none; } 50% { background: #F08C00; } 100% { background: #E5484D; box-shadow: 0 0 0 3px rgb(229 72 77 / .15); } }
	@keyframes alerte-orange { 0%, 30% { background: #C4C9D6; box-shadow: none; } 100% { background: #F08C00; box-shadow: 0 0 0 3px rgb(240 140 0 / .15); } }
}
.mal3__visuel { height: clamp(13rem, 31svh, 17.5rem); }
.suivi { flex: 1; min-height: 0; align-content: start; overflow: hidden; }
.suivi__total { flex: none; }
.mal3 { padding-bottom: 1.1rem; }
/* le dernier fichier porte la chute : il se lit en entier */
.dossier li:last-child .f-nom { white-space: normal; overflow: visible; line-height: 1.2; }
.bulle { bottom: .45rem; }
/* écrans bas : on resserre pour que le titre reste sous l'en-tête */
@media (max-height: 780px) and (min-width: 900px) {
	.portail-pret .probleme { padding-top: 5.6rem; }
	.probleme__titre { font-size: clamp(1.8rem, 1rem + 2.2vw, 2.7rem); }
	.probleme__intro { margin-top: .8rem; font-size: 1.15rem; }
	.maux3 { margin-top: 1.25rem; }
	.mal3__visuel { height: 27svh; }
	.mal3__titre { margin-top: .7rem; font-size: 1.05rem; }
	.mal3 p { font-size: .85rem; }
}
/* la bulle se pose en haut à droite (sur les dates), jamais sur le dernier fichier */
.bulle { top: 1.85rem; bottom: auto; right: .5rem; }
@media (max-height: 780px) and (min-width: 900px) {
	.mal3__visuel { height: 33svh; }
	.dossier li { padding-block: .18rem; }
	.suivi li { padding-block: .12rem; }
}

/* ============================================================================
   LES PROBLÈMES — VISUELS v2 : premium, dans le bleu de SALYS      2026-09-24
   ----------------------------------------------------------------------------
   Paul : « plus premium ; plus notre DA, le bleu (pas le vert d'Excel) ; le
   visuel 2 : un vrai écran d'ordinateur, plusieurs tableurs ouverts, une
   souris qui change de fenêtre et copie-colle ; le visuel 3 : des devis et
   des factures laissés de côté, en attente depuis des jours ».
   Fond de chaque visuel : un « fond d'écran » bleu profond avec une lueur.
   ========================================================================== */
.mal3__visuel {
	background:
		radial-gradient(90% 70% at 85% 0%, rgb(110 143 255 / .55), transparent 60%),
		radial-gradient(70% 60% at 0% 100%, rgb(19 50 255 / .45), transparent 65%),
		linear-gradient(160deg, #1B35C9 0%, #0E1C6B 55%, #0B1437 100%);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08), inset 0 1px 0 rgb(255 255 255 / .15);
	padding: .85rem;
}
.fen { box-shadow: 0 18px 36px -14px rgb(2 6 30 / .7), 0 0 0 1px rgb(255 255 255 / .5); border-radius: .7rem; }
.fen__barre { background: linear-gradient(180deg, #FAFBFE, #EEF1F8); }

/* icône de tableur BLEUE (plus de vert) */
.tb { width: .95rem; height: 1.1rem; border-radius: .2rem; background: linear-gradient(135deg, #6E8FFF, #1332FF); position: relative; box-shadow: 0 2px 4px -1px rgb(19 50 255 / .5); }
.tb::after { content: ""; position: absolute; inset: .3rem .22rem .22rem; background: repeating-linear-gradient(0deg, rgb(255 255 255 / .8) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgb(255 255 255 / .8) 0 1px, transparent 1px 3px); }

/* --- 1 : le dossier -------------------------------------------------------- */
.dossier__corps { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); height: calc(100% - 1.45rem); }
.dossier__cote { display: flex; flex-direction: column; gap: .15rem; padding: .45rem .35rem; background: #F5F7FC; border-right: 1px solid #E6EAF4; font-size: .58rem; color: #5A6386; }
.dossier__cote b { font-size: .5rem; letter-spacing: .08em; text-transform: uppercase; color: #9AA3BF; margin-bottom: .1rem; }
.dossier__cote span { padding: .15rem .3rem; border-radius: .25rem; }
.dossier__cote .est-actif { background: #E3EAFF; color: #1332FF; font-weight: 700; }
.dossier { padding: .3rem; }
.dossier li { grid-template-columns: 1rem minmax(0, 1fr) auto; }
.dossier li:nth-child(odd) { background: transparent; }
.dossier li:last-child { background: #EEF2FF; }
.bulle {
	position: absolute; top: auto; bottom: 1rem; right: 1rem; left: auto;
	display: flex; align-items: center; gap: .5rem;
	padding: .45rem .75rem .45rem .45rem; border-radius: 1rem;
	background: rgb(255 255 255 / .96); color: var(--nuit); font-weight: 700; font-size: .74rem;
	box-shadow: 0 16px 30px -12px rgb(2 6 30 / .7), 0 0 0 1px rgb(255 255 255 / .6);
	backdrop-filter: blur(8px);
}
.bulle > span:last-child { display: grid; }
.bulle b { font-size: .56rem; color: #6B76A0; font-weight: 700; }
.bulle__av { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: linear-gradient(135deg, #6E8FFF, #1332FF); color: #FFFFFF; font-size: .66rem; font-weight: 800; }
.mal3__visuel--bureau .fen--dossier { height: 100%; }

/* --- 2 : l'écran d'ordinateur ---------------------------------------------- */
.mal3__visuel--ecran { padding: .7rem .7rem 2.7rem; }
.ecran { position: relative; height: 100%; border-radius: .7rem; padding: .3rem; background: linear-gradient(180deg, #1A1F33, #0B0E1A); box-shadow: 0 18px 36px -14px rgb(2 6 30 / .8), inset 0 0 0 1px rgb(255 255 255 / .1); }
.ecran__bureau {
	position: relative; height: 100%; border-radius: .45rem; overflow: hidden;
	background: radial-gradient(80% 90% at 70% 10%, #4E76FF, transparent 60%), linear-gradient(160deg, #2342E0, #0E1C6B);
}
.tab { position: absolute; width: 66%; border-radius: .45rem; overflow: hidden; background: #FFFFFF; box-shadow: 0 14px 28px -12px rgb(2 6 30 / .7); }
.tab--a { left: 5%; top: 7%; z-index: 2; }
.tab--b { right: 5%; top: 20%; z-index: 1; }
.tab .fen__barre { height: 1.15rem; }
.tab .fen__barre i { width: .3rem; height: .3rem; }
.tab .fen__barre span { font-size: .5rem; }
.tab__grille { display: grid; grid-template-columns: 1.2fr 1.1fr .8fr; font-size: .44rem; color: #3D4870; }
.tab__grille > span { padding: .12rem .22rem; border-right: 1px solid #EDF0F6; border-bottom: 1px solid #EDF0F6; white-space: nowrap; overflow: hidden; min-height: .78rem; }
.tab__grille .c-t { background: #F2F5FF; color: #1332FF; font-weight: 800; }
.c-sel { font-weight: 700; }
.c-colle { color: #1332FF; font-weight: 800; background: #EEF2FF; }
.puce-copie, .puce-colle { position: absolute; padding: .15rem .45rem; border-radius: 999px; font-size: .5rem; font-weight: 800; background: #0B1437; color: #FFFFFF; opacity: 0; box-shadow: 0 6px 12px -4px rgb(0 0 0 / .5); }
.puce-copie { left: 30%; top: 40%; }
.puce-colle { left: 42%; top: 64%; }
.curseur3 { position: absolute; width: .95rem; height: .95rem; left: 34%; top: 72%; z-index: 5; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .45)); }
.dock { position: absolute; left: 50%; bottom: .3rem; translate: -50% 0; display: flex; gap: .25rem; padding: .2rem .35rem; border-radius: .5rem; background: rgb(255 255 255 / .22); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3); }
.dock i { width: .8rem; height: .8rem; border-radius: .22rem; background: linear-gradient(135deg, #FFFFFF, #C9D5FF); position: relative; }
.dock i.est-ouvert::after { content: ""; position: absolute; left: 50%; bottom: -.18rem; width: .14rem; height: .14rem; border-radius: 50%; background: #FFFFFF; translate: -50% 0; }
.mal3__visuel--ecran .compteur-ressaisies { background: rgb(255 255 255 / .96); box-shadow: 0 10px 22px -10px rgb(2 6 30 / .7); }

/* --- 3 : la pile de devis et de factures ------------------------------------ */
.mal3__visuel--pile { padding: .85rem .85rem 3rem; }
.pile { position: relative; height: 100%; }
.doc {
	position: absolute; left: 6%; right: 6%;
	top: calc(var(--k) * 17%);
	display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: .45rem; align-items: center;
	padding: .38rem .55rem; border-radius: .55rem;
	background: #FFFFFF; font-size: .6rem; color: #5A6386;
	box-shadow: 0 12px 22px -10px rgb(2 6 30 / .75), 0 0 0 1px rgb(255 255 255 / .6);
	rotate: calc((var(--k) - 2) * 1.4deg);
}
.doc__type { grid-row: 1 / 3; padding: .2rem .35rem; border-radius: .3rem; font-size: .5rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: #EEF2FF; color: #1332FF; }
.doc--facture .doc__type { background: #0B1437; color: #FFFFFF; }
.doc__num { font-weight: 800; color: var(--nuit); font-size: .62rem; }
.doc__client { grid-column: 2; grid-row: 2; font-size: .52rem; }
.doc__mt { grid-column: 3; grid-row: 1; font-size: .72rem; font-weight: 800; color: var(--nuit); text-align: right; font-variant-numeric: tabular-nums; }
.doc__attente { grid-column: 3; grid-row: 2; display: inline-flex; align-items: center; gap: .25rem; font-size: .5rem; font-weight: 700; color: #C2410C; white-space: nowrap; }
.doc__attente i { width: .4rem; height: .4rem; border-radius: 50%; background: #F08C00; box-shadow: 0 0 0 2px rgb(240 140 0 / .2); }
.doc--facture .doc__attente { color: #C0262D; }
.doc--facture .doc__attente i { background: #E5484D; box-shadow: 0 0 0 2px rgb(229 72 77 / .2); }
.doc__attente b { font-variant-numeric: tabular-nums; }
.pile__total { position: absolute; left: .85rem; right: .85rem; bottom: .7rem; display: flex; justify-content: space-between; align-items: center; padding: .4rem .7rem; border-radius: .6rem; background: rgb(255 255 255 / .96); color: #5A6386; font-weight: 700; font-size: .7rem; box-shadow: 0 10px 22px -10px rgb(2 6 30 / .7); }
.pile__total b { font-size: 1rem; font-weight: 800; color: #1332FF; font-variant-numeric: tabular-nums; }

/* --- animations v2 (une fois) ----------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	/* 2 : trois allers-retours entre les deux fenêtres */
	.mal3-anim .mal3:not(.joue) .c-colle { opacity: 0; }
	.mal3.joue .curseur3 { animation: ecran-curseur 1.7s cubic-bezier(.45, 0, .25, 1) .3s 3 both; }
	@keyframes ecran-curseur {
		0%   { left: 22%; top: 30%; scale: 1; }
		12%  { left: 22%; top: 30%; scale: .78; }
		18%  { left: 22%; top: 30%; scale: 1; }
		44%  { left: 80%; top: 26%; scale: 1; }
		50%  { left: 80%; top: 26%; scale: .78; }
		56%  { left: 80%; top: 26%; scale: 1; }
		74%  { left: 40%; top: 55%; scale: 1; }
		80%  { left: 40%; top: 55%; scale: .78; }
		100% { left: 40%; top: 55%; scale: 1; }
	}
	.mal3.joue .tab--a { animation: ecran-avant-a 1.7s steps(1, end) .3s 3 both; }
	.mal3.joue .tab--b { animation: ecran-avant-b 1.7s steps(1, end) .3s 3 both; }
	@keyframes ecran-avant-a { 0%, 50% { z-index: 2; } 50.1%, 100% { z-index: 1; } }
	@keyframes ecran-avant-b { 0%, 50% { z-index: 1; } 50.1%, 100% { z-index: 2; } }
	.mal3.joue .c-sel--2 { animation: cellule 1.7s linear .3s 1; }
	.mal3.joue .c-sel--3 { animation: cellule 1.7s linear 2s 1; }
	.mal3.joue .c-sel--4 { animation: cellule 1.7s linear 3.7s 1; }
	@keyframes cellule { 0%, 12% { background: transparent; } 14%, 45% { background: #1332FF; color: #FFFFFF; box-shadow: inset 0 0 0 1px #0B1437; } 50%, 100% { background: transparent; color: inherit; box-shadow: none; } }
	.mal3.joue .c-colle--1 { animation: apparait-cel .3s ease both 1.66s; }
	.mal3.joue .c-colle--2 { animation: apparait-cel .3s ease both 3.36s; }
	.mal3.joue .c-colle--3 { animation: apparait-cel .3s ease both 5.06s; }
	@keyframes apparait-cel { from { opacity: 0; background: #1332FF; color: #FFFFFF; } to { opacity: 1; } }
	.mal3.joue .puce-copie { animation: puce 1.7s ease .3s 3; }
	.mal3.joue .puce-colle { animation: puce2 1.7s ease .3s 3; }
	@keyframes puce  { 0%, 14% { opacity: 0; translate: 0 4px; } 20%, 36% { opacity: 1; translate: 0 0; } 44%, 100% { opacity: 0; } }
	@keyframes puce2 { 0%, 80% { opacity: 0; translate: 0 4px; } 86%, 96% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }

	/* 3 : les documents tombent sur la pile, un par un */
	.mal3-anim .mal3:not(.joue) .doc { opacity: 0; }
	.mal3.joue .doc { animation: doc-tombe .6s cubic-bezier(.2, .9, .3, 1.15) both; animation-delay: calc(.3s + var(--k) * .45s); }
	@keyframes doc-tombe { from { opacity: 0; translate: 0 -28px; rotate: calc((var(--k) - 2) * 1.4deg + 8deg); } to { opacity: 1; translate: 0 0; } }
}
.mal3__visuel--bureau .bulle { top: 2.4rem; bottom: auto; right: 1.1rem; }
.tab { width: 72%; }
.tab--a { left: 4%; top: 6%; }
.tab--b { right: 4%; top: 24%; }
.tab__grille { font-size: .52rem; }
.tab__grille > span { min-height: 1rem; padding: .18rem .25rem; }
.puce-copie, .puce-colle { z-index: 4; }
.puce-colle { left: 46%; top: 70%; }
.dossier li:last-child .f-nom { overflow-wrap: anywhere; min-width: 0; } .dossier li:last-child .f-date { align-self: start; padding-top: .1rem; }

/* ⚠ 2026-09-24 — Les courbes du cockpit s'arrêtaient à mi-graphique :
   `pathLength` + `stroke-dasharray` ne font pas bon ménage avec
   `vector-effect: non-scaling-stroke` (le tiret est mesuré en pixels écran).
   Plus de pointillé : le tracé se dévoile par un rognage de gauche à droite. */
.ck-ligne { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
.ck.est-trace .ck-ligne { clip-path: inset(0 100% 0 0); }
.ck.est-trace.trace-go .ck-ligne { clip-path: inset(0 0 0 0); transition: clip-path 850ms cubic-bezier(.45, 0, .25, 1); }
.ck.est-trace.trace-go .ck-ligne--mg { transition-delay: 120ms; }

/* ============================================================================
   MENU SOLUTIONS v2 — de vraies images, qui parlent               2026-09-24
   ========================================================================== */
.menu-solutions { grid-template-columns: repeat(2, 19.5rem); gap: .6rem; padding: .7rem; }
.entete .nav__liste .menu-solutions a.solution { gap: .8rem; padding: .55rem .55rem .9rem; }
.solution__visuel { height: 11rem; border-radius: .9rem; }
.solution__texte span { font-size: .8rem; line-height: 1.4; }
.solution__lien { font-style: normal; font-size: .78rem; font-weight: 800; color: #1332FF; margin-top: .25rem; }
.solution__lien span { display: inline-block; transition: translate 250ms var(--courbe); }
.solution:hover .solution__lien span { translate: 4px 0; }

/* logiciel : le cockpit, posé sur un fond bleu, avec une notification */
.sv-logiciel {
	background: radial-gradient(90% 80% at 90% 0%, #4E76FF, transparent 60%), linear-gradient(160deg, #1B35C9, #0B1437);
}
.sv-logiciel img {
	position: absolute; left: 1rem; top: 1.1rem; width: 125%; max-width: none; height: auto;
	border-radius: .5rem; box-shadow: 0 16px 30px -10px rgb(0 0 0 / .6), 0 0 0 1px rgb(255 255 255 / .2);
	transition: translate 450ms var(--courbe), scale 450ms var(--courbe);
	transform-origin: 0 0;
}
.solution:hover .sv-logiciel img { translate: -4% -3%; scale: 1.04; }
.sv-notif {
	position: absolute; right: .6rem; bottom: .6rem;
	display: inline-flex; align-items: center; gap: .35rem;
	padding: .3rem .55rem; border-radius: .55rem;
	background: #FFFFFF; color: var(--nuit); font-size: .62rem !important; font-weight: 700;
	box-shadow: 0 10px 20px -8px rgb(0 0 0 / .5);
	opacity: 0; translate: 0 8px;
	transition: opacity 300ms var(--courbe) 120ms, translate 400ms cubic-bezier(.3, 1.4, .5, 1) 120ms;
}
.sv-notif i { width: .45rem; height: .45rem; border-radius: 50%; background: #16A34A; }
.solution:hover .sv-notif, .solution:focus-visible .sv-notif { opacity: 1; translate: 0 0; }

/* sites : trois vrais sites en éventail */
.sv-sites { background: radial-gradient(90% 80% at 50% 110%, #C9D5FF, transparent 60%), linear-gradient(180deg, #F3F6FF, #E4EBFF); }
.sv-fenetre {
	position: absolute; left: 50%; top: 50%; width: 68%;
	border-radius: .45rem; overflow: hidden; background: #FFFFFF;
	box-shadow: 0 14px 26px -10px rgb(11 20 55 / .5), 0 0 0 1px rgb(20 31 75 / .08);
	transition: translate 450ms cubic-bezier(.3, 1.2, .5, 1), rotate 450ms cubic-bezier(.3, 1.2, .5, 1);
}
.sv-fenetre::before { content: ""; display: block; height: .5rem; background: #EEF1F8 radial-gradient(circle at .45rem 50%, #FF6B63 .13rem, transparent .14rem), #EEF1F8; }
.sv-fenetre img { display: block; width: 100%; height: auto; max-width: none; }
.sv-fenetre--1 { translate: -80% -52%; rotate: -8deg; z-index: 1; }
.sv-fenetre--3 { translate: -20% -48%; rotate: 8deg; z-index: 1; }
.sv-fenetre--2 { translate: -50% -50%; z-index: 2; }
.solution:hover .sv-fenetre--1 { translate: -92% -55%; rotate: -13deg; }
.solution:hover .sv-fenetre--3 { translate: -8% -45%; rotate: 13deg; }
.solution:hover .sv-fenetre--2 { translate: -50% -56%; }
@media (prefers-reduced-motion: reduce) {
	.sv-logiciel img, .sv-fenetre, .sv-notif { transition: none; }
}
.sv-logiciel img { width: 108%; left: .9rem; top: .9rem; }

/* ============================================================================
   CAS CLIENT — le plasturgiste                                      2026-09-24
   ----------------------------------------------------------------------------
   Texte à gauche (avant / ce qu'on a construit / aujourd'hui + résultats),
   à droite l'application sur un écran en 3D, incliné, qui se redresse au
   défilement ; deux vignettes flottent devant (rapport reçu, gain de temps).
   ========================================================================== */
.cas { background: #FFFFFF; color: var(--nuit); padding-block: var(--section); overflow: clip; }
.cas__grille { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 1000px) { .cas__grille { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.cas__surtitre { display: inline-block; padding: .3rem .8rem; border-radius: 999px; background: #EEF2FF; color: #1332FF; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.cas__titre { margin-top: 1rem; font-size: clamp(1.9rem, 1rem + 2.4vw, 3rem); line-height: 1.08; letter-spacing: -.03em; font-weight: 800; text-wrap: balance; }
.cas__titre span { color: #1332FF; }
.cas__temps { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.cas__temps li { position: relative; padding-left: 1.4rem; }
.cas__temps li::before { content: ""; position: absolute; left: 0; top: .35rem; bottom: -1.1rem; width: 2px; background: #E3E8F6; }
.cas__temps li:last-child::before { bottom: 0; }
.cas__temps li::after { content: ""; position: absolute; left: -.28rem; top: .3rem; width: .6rem; height: .6rem; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 2px #1332FF; }
.cas__temps li:last-child::after { background: #1332FF; }
.cas__etiquette { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #1332FF; }
.cas__temps p { margin-top: .3rem; color: #47527A; font-size: 1rem; line-height: 1.55; max-width: 36em; }
.cas__resultats { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.cas__resultats li { padding: .9rem 1rem; border-radius: 1rem; background: linear-gradient(180deg, #F5F7FF, #EAF0FF); box-shadow: inset 0 0 0 1px #DCE4FF; }
.cas__resultats b { display: block; font-size: 1.9rem; line-height: 1; font-weight: 800; letter-spacing: -.02em; background: linear-gradient(180deg, #4E76FF, #1332FF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cas__resultats span { display: block; margin-top: .35rem; font-size: .82rem; line-height: 1.35; color: #47527A; }
@media (max-width: 599px) { .cas__resultats { grid-template-columns: 1fr; } }

/* la scène 3D */
.cas__scene { position: relative; perspective: 1600px; padding-block: 2rem; }
.cas__scene::before { content: ""; position: absolute; inset: 6% -6% 0 4%; background: radial-gradient(60% 55% at 55% 50%, rgb(78 118 255 / .35), transparent 70%); filter: blur(30px); }
.cas__ecran {
	position: relative; border-radius: 1rem; padding: .45rem;
	background: linear-gradient(180deg, #1A1F33, #0B0E1A);
	box-shadow: 0 50px 90px -40px rgb(11 20 55 / .7), 0 20px 40px -20px rgb(11 20 55 / .5), inset 0 0 0 1px rgb(255 255 255 / .1);
	transform: rotateY(-16deg) rotateX(8deg) rotateZ(1deg);
	transform-style: preserve-3d;
	container-type: inline-size;
}
.cas__appli { --u: 2.2cqw; display: grid; grid-template-columns: calc(8 * var(--u)) minmax(0, 1fr); aspect-ratio: 16 / 10; border-radius: .6rem; overflow: hidden; background: #F3F5FB; font-size: calc(.72 * var(--u)); }
.ca-menu { display: flex; flex-direction: column; gap: calc(.25 * var(--u)); padding: calc(.9 * var(--u)) calc(.55 * var(--u)); background: #0E1330; color: #B9C4EA; font-size: calc(.62 * var(--u)); }
.ca-marque { display: flex; align-items: center; gap: calc(.4 * var(--u)); color: #FFFFFF; font-weight: 800; font-size: calc(.8 * var(--u)); margin-bottom: calc(.5 * var(--u)); }
.ca-marque i { width: calc(1 * var(--u)); height: calc(1 * var(--u)); border-radius: calc(.3 * var(--u)); background: linear-gradient(135deg, #6E8FFF, #1332FF); }
.ca-menu span { padding: calc(.3 * var(--u)) calc(.45 * var(--u)); border-radius: calc(.35 * var(--u)); }
.ca-menu .est-actif { background: rgb(78 118 255 / .32); color: #FFFFFF; font-weight: 700; }
.ca-corps { display: flex; flex-direction: column; gap: calc(.5 * var(--u)); padding: calc(.75 * var(--u)) calc(.85 * var(--u)); min-width: 0; }
.ca-tete { display: flex; justify-content: space-between; align-items: center; }
.ca-tete em { display: block; font-style: normal; font-size: calc(.56 * var(--u)); color: #6B76A0; }
.ca-tete b { font-size: calc(.95 * var(--u)); font-weight: 800; color: var(--nuit); }
.ca-periode { display: inline-flex; padding: calc(.12 * var(--u)); border-radius: 999px; background: #E6EBF7; }
.ca-periode i { font-style: normal; font-size: calc(.52 * var(--u)); font-weight: 600; color: #5A6386; padding: calc(.16 * var(--u)) calc(.5 * var(--u)); border-radius: 999px; }
.ca-periode .est-active { background: #FFFFFF; color: var(--nuit); box-shadow: 0 1px 3px rgb(20 31 75 / .15); }
.ca-cotations { list-style: none; margin: 0; padding: calc(.3 * var(--u)) calc(.6 * var(--u)); display: grid; border-radius: calc(.6 * var(--u)); background: #FFFFFF; box-shadow: 0 1px 2px rgb(20 31 75 / .06), 0 8px 18px -10px rgb(20 31 75 / .2); }
.ca-cotations li { display: grid; grid-template-columns: minmax(0, 1fr) auto calc(3.4 * var(--u)) calc(3.4 * var(--u)); gap: calc(.6 * var(--u)); align-items: center; padding: calc(.36 * var(--u)) 0; border-bottom: 1px solid #EEF1F8; }
.ca-cotations li:last-child { border-bottom: 0; }
.ca-cotations span { font-weight: 700; color: var(--nuit); }
.ca-cotations b { font-weight: 800; color: var(--nuit); font-variant-numeric: tabular-nums; }
.ca-cotations em { font-style: normal; font-weight: 800; font-size: calc(.6 * var(--u)); text-align: right; }
.cot--haut { color: #1332FF; } .cot--bas { color: #6B76A0; }
.ca-cotations svg { width: 100%; height: calc(1 * var(--u)); }
.ca-cotations path { fill: none; stroke: #1332FF; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.ca-analyse { display: grid; gap: calc(.2 * var(--u)); padding: calc(.55 * var(--u)) calc(.7 * var(--u)); border-radius: calc(.6 * var(--u)); background: linear-gradient(135deg, #1B35C9, #0B1437); color: #C9D3F2; font-size: calc(.62 * var(--u)); }
.ca-analyse b { color: #FFFFFF; font-size: calc(.66 * var(--u)); }

.cas__flottant {
	position: absolute; display: flex; align-items: center; gap: .6rem;
	padding: .65rem .9rem; border-radius: 1rem; background: rgb(255 255 255 / .96);
	box-shadow: 0 24px 44px -18px rgb(11 20 55 / .55), 0 0 0 1px rgb(20 31 75 / .06);
	font-size: .8rem; color: #5A6386; z-index: 2;
}
.cas__flottant b { display: block; color: var(--nuit); font-size: .88rem; }
.cas__flottant--mail { left: -4%; top: 6%; }
.cas__flottant--mail i { width: 2rem; height: 2rem; border-radius: .65rem; flex: none; background: linear-gradient(135deg, #6E8FFF, #1332FF) center / 60% no-repeat; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3); }
.cas__flottant--mail i { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>'), linear-gradient(135deg, #6E8FFF, #1332FF); background-size: 60%, 100%; background-position: center; background-repeat: no-repeat; }
.cas__flottant--gain { right: -2%; bottom: 10%; flex-direction: column; align-items: flex-start; gap: 0; }
.cas__flottant--gain b { font-size: 1.6rem; line-height: 1; background: linear-gradient(180deg, #4E76FF, #1332FF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cas__mention { position: absolute; right: 0; bottom: -.4rem; font-size: .72rem; color: #9AA3BF; }
@media (max-width: 599px) { .cas__flottant--mail { left: 0; top: 0; } .cas__flottant--gain { right: 0; bottom: 1.5rem; } }

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.cas__ecran { animation: cas-redresse linear both; animation-timeline: view(); animation-range: entry 10% cover 55%; }
		@keyframes cas-redresse {
			from { transform: rotateY(-28deg) rotateX(18deg) rotateZ(3deg) translateY(40px) scale(.94); }
			to   { transform: rotateY(-10deg) rotateX(5deg) rotateZ(.5deg) translateY(0) scale(1); }
		}
		.cas__flottant--mail { animation: cas-flotte-a linear both; animation-timeline: view(); animation-range: entry 20% cover 60%; }
		.cas__flottant--gain { animation: cas-flotte-b linear both; animation-timeline: view(); animation-range: entry 30% cover 65%; }
		@keyframes cas-flotte-a { from { opacity: 0; translate: -30px 20px; } to { opacity: 1; translate: 0 0; } }
		@keyframes cas-flotte-b { from { opacity: 0; translate: 30px 30px; } to { opacity: 1; translate: 0 0; } }
		.ca-cotations li { animation: cas-ligne linear both; animation-timeline: view(); animation-range: entry calc(20% + var(--k) * 5%) cover calc(40% + var(--k) * 4%); }
		@keyframes cas-ligne { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
	}
}
/* comme la section d'avant : elle monte en carte sur « On règle ça. » */
@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		.chapitre2 .cas { position: relative; z-index: 1; box-shadow: 0 -30px 60px -30px rgb(11 20 55 / .35); animation: auto-carte linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
		html:not(.portail-pret) .chapitre2 .cas { animation: none; }
	}
}
.ca-graphe { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: calc(.5 * var(--u)) calc(.7 * var(--u)); border-radius: calc(.6 * var(--u)); background: #FFFFFF; box-shadow: 0 1px 2px rgb(20 31 75 / .06); font-size: calc(.58 * var(--u)); color: #6B76A0; }
.ca-graphe b { color: var(--nuit); }
.ca-graphe svg { flex: 1; width: 100%; min-height: 0; margin-top: calc(.3 * var(--u)); }
.ca-ligne { fill: none; stroke: #1332FF; stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.cas__flottant--mail { left: -6%; top: -2%; }
.cas__mention { bottom: -1.6rem; }
.cas__flottant--gain { bottom: 4%; }
.ca-graphe { flex: 1 1 0; } .ca-analyse { flex: none; } .ca-cotations li { padding-block: calc(.26 * var(--u)); }
/* 2026-09-24 — cas client allégé : l'étiquette « Cas client » bien visible */
.cas__surtitre { display: inline-flex; align-items: center; gap: .7rem; padding: .35rem .9rem .35rem .35rem; background: #EEF2FF; color: #3D4870; font-size: .9rem; letter-spacing: 0; text-transform: none; font-weight: 600; }
.cas__surtitre span { padding: .35rem .8rem; border-radius: 999px; background: #1332FF; color: #FFFFFF; font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 8px 18px -8px rgb(19 50 255 / .8); }
.cas__titre { font-size: clamp(2.1rem, 1.1rem + 2.8vw, 3.4rem); }
.cas__temps { gap: .9rem; }
.cas__temps li::before { bottom: -.9rem; }
.cas__temps p { font-size: 1.05rem; color: var(--nuit); font-weight: 500; }
.cas__resultats b { font-size: 2.3rem; }
.cas__resultats span { font-size: .88rem; }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .cas__flottant--gain { animation-range: entry 20% cover 42%; } .cas__flottant--mail { animation-range: entry 15% cover 38%; } } }

/* 2026-09-24 — cas client : icône du secteur, duel avant / aujourd'hui */
.cas__secteur { width: 1.25rem; height: 1.25rem; color: #1332FF; flex: none; }
.cas__duel { margin-top: 1.6rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (max-width: 599px) { .cas__duel { grid-template-columns: 1fr; } }
.cas__avant, .cas__apres { padding: 1rem 1.1rem 1.1rem; border-radius: 1.1rem; }
.cas__avant { background: #FFF5F5; box-shadow: inset 0 0 0 1px #F8D7DA; }
.cas__apres { background: linear-gradient(160deg, #1B35C9, #0B1437); color: #FFFFFF; box-shadow: 0 20px 40px -20px rgb(19 50 255 / .7); }
.cas__avant .cas__etiquette { color: #C0262D; }
.cas__apres .cas__etiquette { color: #9DB2FF; }
.cas__duel ul { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .55rem; }
.cas__duel li { display: grid; grid-template-columns: 1.2rem 1fr; gap: .5rem; align-items: start; font-size: .95rem; line-height: 1.35; }
.cas__avant li { color: #5A2A2E; }
.cas__avant li::before { content: "✕"; display: grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #FDE2E4; color: #C0262D; font-size: .62rem; font-weight: 800; }
.cas__apres li { color: #E4EAFF; font-weight: 600; }
.cas__apres li::before { content: "✓"; display: grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #FFFFFF; color: #1332FF; font-size: .66rem; font-weight: 800; }
.cas__temps { display: none; }
.cas__secteur { box-sizing: content-box; width: 1.35rem; height: 1.35rem; padding: .35rem; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 1.5px #C9D5FF, 0 6px 14px -6px rgb(19 50 255 / .5); }
.cas__surtitre { font-size: 1rem; font-weight: 700; color: var(--nuit); }
@keyframes cas-flotte-a { from { translate: -30px 20px; } to { translate: 0 0; } }
@keyframes cas-flotte-b { from { translate: 30px 30px; } to { translate: 0 0; } }

/* ============================================================================
   CAS CLIENT — LE FLUX : boîte mail → IA → plateforme → équipes    2026-09-24
   ----------------------------------------------------------------------------
   Quatre étapes sur un rail ; un point lumineux parcourt le rail en continu
   et chaque étape s'allume à son passage (même durée, délais décalés).
   Boucle décorative ; immobile en mouvement réduit.
   ========================================================================== */
.flux {
	position: relative;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding: 1.6rem 1.4rem 1.4rem;
	border-radius: 1.5rem;
	background: linear-gradient(180deg, #F6F8FF, #EDF1FF);
	box-shadow: inset 0 0 0 1px #DCE4FF;
}
.flux__rail { position: absolute; left: 12.5%; right: 12.5%; top: calc(1.6rem + 1.75rem); height: 3px; border-radius: 3px; background: repeating-linear-gradient(90deg, #B9C8FF 0 8px, transparent 8px 14px); }
.flux__point { position: absolute; left: 0; top: 50%; width: .9rem; height: .9rem; margin: -.45rem 0 0 -.45rem; border-radius: 50%; background: #1332FF; box-shadow: 0 0 0 5px rgb(19 50 255 / .2), 0 0 18px 4px rgb(78 118 255 / .8); }
.flux__etape { position: relative; display: grid; justify-items: center; text-align: center; gap: .3rem; }
.flux__logos { display: flex; gap: .4rem; margin-bottom: .45rem; }
.flux__logo {
	display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 1rem;
	background: #FFFFFF; box-shadow: 0 12px 24px -12px rgb(11 20 55 / .45), 0 0 0 1px rgb(20 31 75 / .06);
	position: relative; z-index: 1;
}
.flux__logo svg { width: 1.7rem; height: 1.7rem; }
.flux__logo--gmail { color: #EA4335; }
.flux__logo--outlook { color: #0F6CBD; }
.flux__logo--claude { color: #D97757; }
.flux__logo--salys i { width: 1.9rem; height: 1.35rem; background: #1332FF; -webkit-mask: url("../img/monogramme.svg") no-repeat center / contain; mask: url("../img/monogramme.svg") no-repeat center / contain; }
.flux__logo--equipe { background: #1332FF; color: #FFFFFF; }
.flux__etape b { font-size: 1rem; font-weight: 800; color: var(--nuit); }
.flux__etape > span:last-child { font-size: .85rem; color: #5A6386; max-width: 16em; line-height: 1.4; }
.flux__etape--fin b { color: #1332FF; }
@media (max-width: 799px) {
	.flux { grid-template-columns: 1fr 1fr; row-gap: 1.6rem; }
	.flux__rail { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
	.flux__point { animation: flux-point 4.8s cubic-bezier(.45, 0, .25, 1) infinite; }
	@keyframes flux-point {
		0%   { left: 0%;     opacity: 0; }
		5%   { opacity: 1; }
		28%, 36% { left: 33.3%; }
		61%, 69% { left: 66.6%; }
		92%  { left: 100%; opacity: 1; }
		100% { left: 100%; opacity: 0; }
	}
	.flux__logo { animation: flux-allume 4.8s ease-in-out infinite; }
	.flux__etape:nth-child(3) .flux__logo { animation-delay: 1.45s; }
	.flux__etape:nth-child(4) .flux__logo { animation-delay: 3.05s; }
	.flux__etape:nth-child(5) .flux__logo { animation-delay: 4.45s; }
	@keyframes flux-allume {
		0%, 8%, 100% { scale: 1; box-shadow: 0 12px 24px -12px rgb(11 20 55 / .45), 0 0 0 1px rgb(20 31 75 / .06); }
		3% { scale: 1.1; box-shadow: 0 0 0 3px #4E76FF, 0 16px 30px -10px rgb(19 50 255 / .6); }
	}
}

/* ============================================================================
   CAS CLIENTS — LE FLUX en 5 blocs                                  2026-09-24
   ----------------------------------------------------------------------------
   Rescapé de la version à onglets (retirée le même jour) : rapports PDF →
   Gmail/Outlook → IA → plateforme → équipes, sous le cas plasturgie.
   ========================================================================== */
.wf { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding: 1.5rem; border-radius: 1.4rem; background: #F6F8FD; box-shadow: inset 0 0 0 1px #E3E8F6; }
.wf__liens { display: none; }
.wf::before { content: ""; position: absolute; left: 10%; right: 10%; top: 3.6rem; height: 2px; background: repeating-linear-gradient(90deg, #9DB0FF 0 6px, transparent 6px 11px); }
.wf__point { position: absolute; left: 10%; top: calc(3.6rem - 5px); width: 80%; height: 12px; pointer-events: none; }
.wf__point::before { content: ""; position: absolute; left: -6px; top: 0; width: 12px; height: 12px; border-radius: 50%; background: #1332FF; box-shadow: 0 0 0 4px rgba(19, 50, 255, .18), 0 0 14px rgba(19, 50, 255, .6); }
.js-motion .wf__point { animation: wf-point 5s cubic-bezier(.45, 0, .55, 1) infinite; }
.js-motion .wf__point--2 { animation-delay: -2.5s; }
.wf__point { display: none; }
.js-motion .wf__point { display: block; }
@keyframes wf-point { 0% { transform: translateX(0); opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }
.wf__noeud { position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; gap: .45rem; padding: 1rem .8rem 1.1rem; border-radius: 1rem; background: #FFFFFF; border: 1px solid #DCE4FF; text-align: center; box-shadow: 0 12px 26px -20px rgba(11, 20, 55, .5); }
.wf__num { position: absolute; top: -.6rem; left: .8rem; display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--nuit); color: #FFFFFF; font-size: .68rem; font-weight: 800; }
.wf__ic { display: flex; justify-content: center; align-items: center; gap: .35rem; height: 3.2rem; min-width: 3.2rem; padding: 0 .55rem; border-radius: .85rem; background: #FFFFFF; border: 1px solid #E3E8F6; }
.wf__ic svg { width: 1.6rem; height: 1.6rem; }
.wf__ic svg:first-child { color: #EA4335; }
.wf__ic svg + svg { color: #0078D4; }
.wf__ic--claude svg:first-child { color: #D97757; }
.wf__ic--doc i { display: grid; place-items: end center; width: 1.6rem; height: 2.1rem; padding-bottom: .2rem; border-radius: .2rem; background: #FFFFFF; border: 1px solid #F3B4B4; color: #C62828; font-style: normal; font-size: .5rem; font-weight: 800; }
.wf__ic--doc i + i { margin-left: -.9rem; transform: translateY(.25rem) rotate(6deg); }
.wf__ic--salys { background: #1332FF; border-color: #1332FF; }
.wf__ic--salys i { width: 1.9rem; height: 1.35rem; background: #FFFFFF; -webkit-mask: url("../img/monogramme.svg") no-repeat center / contain; mask: url("../img/monogramme.svg") no-repeat center / contain; }
.wf__ic--eq i { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #EEF2FF; color: #1332FF; font-style: normal; font-size: .66rem; font-weight: 800; box-shadow: 0 0 0 2px #FFFFFF; }
.wf__ic--eq i + i { margin-left: -.7rem; }
.wf__noeud b { font-size: .95rem; font-weight: 800; color: var(--nuit); }
.wf__noeud > span:last-child { font-size: .82rem; color: #5A6386; line-height: 1.4; }
.wf__noeud--fin { border-color: #1332FF; box-shadow: 0 0 0 1px #1332FF, 0 14px 30px -18px rgba(19, 50, 255, .6); }

@media (max-width: 860px) {
	.wf { grid-template-columns: 1fr; gap: .9rem; }
	.wf::before { left: 2.9rem; right: auto; top: 2.5rem; bottom: 2.5rem; width: 2px; height: auto; background: repeating-linear-gradient(180deg, #9DB0FF 0 6px, transparent 6px 11px); }
	.wf__noeud { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; column-gap: .9rem; }
	.wf__ic { grid-row: 1 / 3; }
	.wf__point { left: calc(2.9rem - 5px); top: 2.5rem; width: 12px; height: calc(100% - 5rem); }
	.wf__point::before { left: 0; top: -6px; }
	@keyframes wf-point { 0% { transform: translateY(0); opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { .js-motion .wf__point { animation: none !important; display: none; } }

/* ============================================================================
   EN-TÊTE MOBILE — deux rangs nets                                  2026-09-24
   ----------------------------------------------------------------------------
   Depuis l'ajout de Solutions (chevron) et du badge Free Tools, la navigation
   se cassait en trois lignes sous 720 px dans une pilule elliptique qui
   couvrait le début du premier écran. Rang 1 : marque + audit + WhatsApp ;
   rang 2 : la navigation, sur une ligne.
   ========================================================================== */
@media (max-width: 900px) {
	.entete__barre { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .35rem .5rem; border-radius: 1.4rem; padding: .45rem .5rem .35rem .9rem; }
	.entete__barre::before { border-radius: inherit; }
	.entete__gauche { display: contents; }
	.entete__marque { grid-column: 1; grid-row: 1; }
	.entete__droite { grid-column: 2; grid-row: 1; flex: none; order: 0; justify-content: flex-end; }
	.entete .nav { grid-column: 1 / -1; grid-row: 2; }
	.entete .nav__liste { flex-wrap: nowrap; justify-content: center; gap: 0; }
	.entete .nav__liste a { padding-inline: .45rem; font-size: .8125rem; white-space: nowrap; }
	.entete .free-tools__badge { display: none; }
	.entete .nav__liste a.free-tools { padding: .45rem; translate: none; align-self: center; }
	.hero { padding-block: 8rem 3rem; }
}
@media (max-width: 430px) {
	.entete__mot { display: none; }
	.audit__mot { font-size: .8125rem; }
}

/* ============================================================================
   CAS CLIENTS — QUATRE VITRINES EN 3D                               2026-09-24
   ----------------------------------------------------------------------------
   Paul : « j'aimais mieux en 3D […] pas de plateformes où on clique […] fais
   exploser la valeur perçue ». Un écran par cas — l'accueil de l'application —
   sombre, dense, incliné, qui se redresse au défilement ; cartes flottantes
   devant. L'application est dessinée en unités --u (1 % de la largeur de
   l'écran) : elle se réduit comme une image, sans jamais se recomposer.
   État de base = état final (sans JS, mouvement réduit : écran lisible).
   ========================================================================== */
.vx { position: relative; }
.vx::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50rem 30rem at 85% 18%, rgb(78 118 255 / .10), transparent 70%), radial-gradient(40rem 30rem at 10% 60%, rgb(78 118 255 / .08), transparent 70%); }
.vx-entete { position: relative; text-align: center; max-width: 52rem; margin: 0 auto clamp(3rem, 6vw, 5rem); }
.vx-sur span { display: inline-block; padding: .4rem .95rem; border-radius: 999px; background: #1332FF; color: #FFFFFF; font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 10px 22px -10px rgb(19 50 255 / .9); }
.vx-h2 { margin-top: 1.1rem; font-size: clamp(2.2rem, 1.1rem + 3.2vw, 4rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 800; color: var(--nuit); text-wrap: balance; }
.vx-h2 span { color: #1332FF; }

.vx-cas { position: relative; display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.vx-cas + .vx-cas, .wf + .vx-cas { margin-top: clamp(5rem, 10vw, 9rem); }
@media (min-width: 1100px) {
	.vx-cas { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); }
	.vx-cas--inverse { grid-template-columns: minmax(0, 1.38fr) minmax(0, .62fr); }
	.vx-cas--inverse .vx-texte { order: 2; }
	.vx-cas .vx-scene { margin-right: calc(-1 * min(6vw, 5rem)); }
	.vx-cas--inverse .vx-scene { margin-right: 0; margin-left: calc(-1 * min(6vw, 5rem)); }
}
.vx-secteur { display: inline-flex; align-items: center; gap: .65rem; padding: .3rem .95rem .3rem .3rem; border-radius: 999px; background: #EEF2FF; color: var(--nuit); font-weight: 700; font-size: .95rem; }
.vx-pastille { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: #FFFFFF; color: #1332FF; box-shadow: 0 0 0 1.5px #C9D5FF, 0 6px 14px -6px rgb(19 50 255 / .5); }
.vx-pastille svg { width: 1.15rem; height: 1.15rem; }
.vx-titre-cas { margin-top: 1.1rem; font-size: clamp(1.9rem, 1rem + 2.3vw, 3rem); line-height: 1.05; letter-spacing: -.03em; font-weight: 800; color: var(--nuit); text-wrap: balance; }
.vx-titre-cas span { display: block; color: #1332FF; }
.vx-chapo { margin-top: 1.1rem; max-width: 32em; font-size: 1.1rem; line-height: 1.55; color: #47527A; }
.vx-res { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.vx-res li { padding: .95rem 1rem; border-radius: 1rem; background: linear-gradient(180deg, #F5F7FF, #EAF0FF); box-shadow: inset 0 0 0 1px #DCE4FF; }
.vx-res b { display: block; font-size: 2.3rem; line-height: 1; font-weight: 800; letter-spacing: -.03em; background: linear-gradient(180deg, #4E76FF, #1332FF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.vx-res span { display: block; margin-top: .4rem; font-size: .88rem; line-height: 1.35; color: #47527A; }
.vx-puces { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.vx-puces li { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .85rem; border-radius: 999px; background: #FFFFFF; color: var(--nuit); font-size: .92rem; font-weight: 700; box-shadow: 0 0 0 1px #DCE4FF, 0 8px 18px -12px rgb(19 50 255 / .45); }
.vx-puces li::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #1332FF; box-shadow: 0 0 0 3px #DCE4FF; }

/* --- La scène ------------------------------------------------------------ */
.vx-scene { position: relative; perspective: 1800px; padding-block: 2.5rem; view-timeline: --vx; }
.vx-scene::before { content: ""; position: absolute; inset: 8% 4% 0; background: radial-gradient(55% 55% at 50% 50%, rgb(40 80 255 / .42), transparent 72%); filter: blur(40px); }
.vx-ecran { position: relative; container-type: inline-size; padding: .5rem; border-radius: 1.1rem; background: linear-gradient(180deg, #2A3150, #0B0E1A); box-shadow: 0 70px 120px -50px rgb(11 20 55 / .8), 0 30px 50px -30px rgb(11 20 55 / .55), inset 0 0 0 1px rgb(255 255 255 / .12); transform: rotateY(-12deg) rotateX(6deg) rotateZ(.6deg); transform-style: preserve-3d; }
.vx-cas--inverse .vx-ecran { transform: rotateY(12deg) rotateX(6deg) rotateZ(-.6deg); }
.vx-ecran::after { content: ""; position: absolute; inset: .5rem; border-radius: .7rem; pointer-events: none; background: linear-gradient(115deg, rgb(255 255 255 / .10) 0%, rgb(255 255 255 / 0) 28%); }
.vx-mention { position: absolute; right: 0; bottom: 0; font-size: .75rem; color: #8A93B5; }
.vx-cas--inverse .vx-mention { right: auto; left: 0; }

/* --- L'application (tout en --u) ------------------------------------------ */
.vx-app { --u: 1.22cqw; display: grid; grid-template-columns: calc(12.4 * var(--u)) minmax(0, 1fr); aspect-ratio: 16 / 10; overflow: hidden; border-radius: .7rem; background: radial-gradient(60% 50% at 70% 0%, #16205A 0%, transparent 70%), #0A0F2C; color: #B4BEE3; font-size: calc(1.05 * var(--u)); line-height: 1.3; }
.vx-app svg { display: block; }
.vx-side { display: flex; flex-direction: column; gap: calc(.35 * var(--u)); padding: calc(1.6 * var(--u)) calc(1 * var(--u)); background: #070B22; border-right: 1px solid rgb(255 255 255 / .06); }
.vx-logo { display: flex; align-items: center; gap: calc(.6 * var(--u)); color: #FFFFFF; font-weight: 800; font-size: calc(1.3 * var(--u)); margin-bottom: calc(1.2 * var(--u)); }
.vx-logo i { width: calc(2.2 * var(--u)); height: calc(2.2 * var(--u)); border-radius: calc(.6 * var(--u)); background: linear-gradient(135deg, #6E8FFF, #1332FF); box-shadow: 0 0 calc(1.2 * var(--u)) rgb(78 118 255 / .7); -webkit-mask: none; position: relative; }
.vx-logo i::after { content: ""; position: absolute; inset: 22%; background: #FFFFFF; -webkit-mask: url("../img/monogramme.svg") no-repeat center / contain; mask: url("../img/monogramme.svg") no-repeat center / contain; }
.vx-side-titre { padding: 0 calc(.7 * var(--u)); font-size: calc(.8 * var(--u)); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #5B6699; }
.vx-nav { display: flex; align-items: center; white-space: nowrap; font-size: calc(.95 * var(--u)); gap: calc(.6 * var(--u)); padding: calc(.65 * var(--u)) calc(.7 * var(--u)); border-radius: calc(.6 * var(--u)); color: #8E99C7; font-weight: 600; }
.vx-nav svg { width: calc(1.35 * var(--u)); height: calc(1.35 * var(--u)); flex: none; }
.vx-nav em { margin-left: auto; padding: 0 calc(.45 * var(--u)); border-radius: 999px; background: #1332FF; color: #FFFFFF; font-style: normal; font-size: calc(.8 * var(--u)); font-weight: 800; }
.vx-nav.on { background: linear-gradient(90deg, rgb(78 118 255 / .28), rgb(78 118 255 / .06)); color: #FFFFFF; box-shadow: inset calc(.2 * var(--u)) 0 0 #6E8FFF; }
.vx-moi { margin-top: auto; display: flex; align-items: center; gap: calc(.6 * var(--u)); padding: calc(.7 * var(--u)); border-radius: calc(.7 * var(--u)); background: rgb(255 255 255 / .04); font-size: calc(.85 * var(--u)); color: #6F7AAB; }
.vx-moi i { display: grid; place-items: center; width: calc(2.2 * var(--u)); height: calc(2.2 * var(--u)); border-radius: 50%; background: linear-gradient(135deg, #F6C177, #E0875A); color: #1B1030; font-style: normal; font-weight: 800; font-size: calc(.8 * var(--u)); }
.vx-moi span { display: grid; } .vx-moi b { color: #E3E8FF; }

.vx-main { display: flex; flex-direction: column; gap: calc(1.3 * var(--u)); min-width: 0; padding: calc(1.6 * var(--u)) calc(2 * var(--u)); }
.vx-top { display: flex; justify-content: space-between; align-items: center; gap: var(--u); }
.vx-titre { display: grid; }
.vx-titre em { font-style: normal; font-size: calc(.9 * var(--u)); color: #6F7AAB; }
.vx-titre b { font-size: calc(2 * var(--u)); color: #FFFFFF; letter-spacing: -.02em; }
.vx-outils { display: flex; align-items: center; gap: calc(.8 * var(--u)); }
.vx-recherche { display: flex; align-items: center; gap: calc(.5 * var(--u)); width: calc(10 * var(--u)); padding: calc(.55 * var(--u)) calc(.8 * var(--u)); border-radius: calc(.7 * var(--u)); background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07); color: #5B6699; }
.vx-recherche svg, .vx-cloche svg { width: calc(1.2 * var(--u)); height: calc(1.2 * var(--u)); }
.vx-cloche { position: relative; display: grid; place-items: center; width: calc(2.6 * var(--u)); height: calc(2.6 * var(--u)); border-radius: calc(.7 * var(--u)); background: rgb(255 255 255 / .05); color: #B4BEE3; }
.vx-cloche i { position: absolute; top: calc(.5 * var(--u)); right: calc(.55 * var(--u)); width: calc(.6 * var(--u)); height: calc(.6 * var(--u)); border-radius: 50%; background: #FF5A6E; box-shadow: 0 0 0 calc(.2 * var(--u)) #0A0F2C; }
.vx-avatars { display: flex; }
.vx-avatars i { display: grid; place-items: center; width: calc(2.4 * var(--u)); height: calc(2.4 * var(--u)); border-radius: 50%; font-style: normal; font-weight: 800; font-size: calc(.85 * var(--u)); color: #FFFFFF; box-shadow: 0 0 0 calc(.2 * var(--u)) #0A0F2C; background: linear-gradient(135deg, #6E8FFF, #1332FF); }
.vx-avatars i + i { margin-left: calc(-.7 * var(--u)); background: linear-gradient(135deg, #5EE3B5, #13A071); }
.vx-avatars i + i + i { background: linear-gradient(135deg, #F6C177, #E0875A); }

.vx-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(1 * var(--u)); }
.vx-kpis > div, .vx-carte { position: relative; border-radius: calc(1 * var(--u)); background: linear-gradient(180deg, rgb(255 255 255 / .06), rgb(255 255 255 / .025)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08), 0 calc(1 * var(--u)) calc(2 * var(--u)) calc(-1 * var(--u)) rgb(0 0 0 / .5); }
.vx-kpis > div { display: grid; padding: calc(1 * var(--u)) calc(1.1 * var(--u)); overflow: hidden; }
.vx-kpis em { font-style: normal; font-size: calc(.88 * var(--u)); color: #7B86B8; }
.vx-kpis b { margin-top: calc(.3 * var(--u)); font-size: calc(1.9 * var(--u)); color: #FFFFFF; letter-spacing: -.02em; white-space: nowrap; }
.vx-kpis b.amb { color: #FFB547; }
.vx-kpis span { font-size: calc(.82 * var(--u)); color: #7B86B8; font-weight: 600; }
.vx-app .up { color: #3DDC97; } .vx-app .down { color: #FF8A7A; }
.vx-spark { position: absolute; right: calc(1 * var(--u)); bottom: calc(1 * var(--u)); width: calc(5 * var(--u)); height: calc(1.8 * var(--u)); fill: none; stroke: #3DDC97; stroke-width: 1.6; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 calc(.4 * var(--u)) rgb(61 220 151 / .6)); }
.vx-spark--bas { stroke: #FF8A7A; filter: drop-shadow(0 0 calc(.4 * var(--u)) rgb(255 138 122 / .5)); }

.vx-rang { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: calc(1 * var(--u)); }
.vx-carte { display: flex; flex-direction: column; min-height: 0; padding: calc(1.1 * var(--u)) calc(1.2 * var(--u)); }
.vx-carte-tete { display: flex; justify-content: space-between; align-items: center; gap: var(--u); margin-bottom: calc(.8 * var(--u)); }
.vx-carte-tete b { display: flex; align-items: center; gap: calc(.5 * var(--u)); color: #FFFFFF; font-size: calc(1.1 * var(--u)); }
.vx-carte-tete b svg { width: calc(1.3 * var(--u)); height: calc(1.3 * var(--u)); color: #9DB2FF; }
.vx-tag { padding: calc(.2 * var(--u)) calc(.6 * var(--u)); border-radius: 999px; background: rgb(78 118 255 / .2); color: #BFCBFF; font-size: calc(.8 * var(--u)); font-weight: 800; }
.vx-leg { display: flex; align-items: center; gap: calc(.4 * var(--u)); font-size: calc(.8 * var(--u)); color: #7B86B8; }
.vx-leg i { width: calc(.7 * var(--u)); height: calc(.7 * var(--u)); border-radius: 50%; background: #6E8FFF; margin-left: calc(.4 * var(--u)); }
.vx-leg i.b { background: #3DDC97; }
.vx-live { display: flex; align-items: center; gap: calc(.4 * var(--u)); color: #3DDC97; font-size: calc(.82 * var(--u)); font-weight: 700; }
.vx-live i { width: calc(.6 * var(--u)); height: calc(.6 * var(--u)); border-radius: 50%; background: #3DDC97; box-shadow: 0 0 0 calc(.3 * var(--u)) rgb(61 220 151 / .2), 0 0 calc(.8 * var(--u)) #3DDC97; }

.vx-graphe { position: relative; flex: 1; min-height: 0; padding-bottom: calc(1.6 * var(--u)); background: repeating-linear-gradient(180deg, transparent 0 calc(25% - 1px), rgb(255 255 255 / .06) calc(25% - 1px) 25%) 0 0 / 100% calc(100% - 1.6 * var(--u)) no-repeat; }
.vx-graphe svg { width: 100%; height: 100%; overflow: visible; }
.vx-ligne { fill: none; stroke: #6E8FFF; stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linecap: round; filter: drop-shadow(0 0 calc(.6 * var(--u)) rgb(110 143 255 / .9)); }
.vx-ligne--b { stroke: #3DDC97; stroke-width: 1.8; filter: none; opacity: .9; }
.vx-pic { position: absolute; left: var(--x); top: calc(var(--y) * (1 - 1.6 * var(--u) / 100%)); }
.vx-pic { top: calc((100% - 1.6 * var(--u)) * var(--y) / 100%); top: var(--y); }
.vx-pic i { position: absolute; left: calc(-.6 * var(--u)); top: calc(-.6 * var(--u)); width: calc(1.2 * var(--u)); height: calc(1.2 * var(--u)); border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 calc(.35 * var(--u)) #6E8FFF, 0 0 calc(1.6 * var(--u)) #6E8FFF; }
.vx-pic b { position: absolute; right: calc(1 * var(--u)); top: calc(-3.4 * var(--u)); white-space: nowrap; padding: calc(.35 * var(--u)) calc(.7 * var(--u)); border-radius: calc(.5 * var(--u)); background: #FFFFFF; color: #0A0F2C; font-size: calc(.85 * var(--u)); box-shadow: 0 calc(.6 * var(--u)) calc(1.4 * var(--u)) rgb(0 0 0 / .4); }
.vx-axe { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; font-size: calc(.75 * var(--u)); color: #5B6699; }
.vx-axe i { font-style: normal; }

.vx-carte--ia { background: linear-gradient(160deg, rgb(78 118 255 / .22), rgb(78 118 255 / .04) 60%); box-shadow: inset 0 0 0 1px rgb(110 143 255 / .35), 0 0 calc(3 * var(--u)) calc(-1 * var(--u)) rgb(78 118 255 / .6); }
.vx-carte--ia ul { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(.55 * var(--u)); }
.vx-carte--ia li { display: flex; align-items: center; gap: calc(.6 * var(--u)); color: #D4DBFF; }
.vx-carte--ia li i { flex: none; width: calc(.6 * var(--u)); height: calc(.6 * var(--u)); border-radius: 50%; background: #9DB2FF; }
.vx-carte--ia li i.up { background: #3DDC97; } .vx-carte--ia li i.warn { background: #FFB547; }
.vx-reco { margin-top: auto; display: grid; gap: calc(.2 * var(--u)); padding: calc(.9 * var(--u)) calc(1 * var(--u)); border-radius: calc(.8 * var(--u)); background: linear-gradient(135deg, #3559F5, #1332FF); box-shadow: 0 calc(.8 * var(--u)) calc(2 * var(--u)) calc(-.6 * var(--u)) rgb(19 50 255 / .8); }
.vx-reco em { font-style: normal; font-size: calc(.78 * var(--u)); color: #C9D5FF; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.vx-reco b { color: #FFFFFF; font-size: calc(1.1 * var(--u)); }
.vx-reco span { color: #DDE4FF; font-size: calc(.8 * var(--u)); font-weight: 600; }

.vx-sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(1 * var(--u)); }
.vx-sources > span { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(.7 * var(--u)); align-items: center; padding: calc(.6 * var(--u)) calc(.8 * var(--u)); border-radius: calc(.8 * var(--u)); background: rgb(255 255 255 / .04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07); font-size: calc(.78 * var(--u)); color: #6F7AAB; }
.vx-sources i { grid-row: 1 / 3; display: grid; place-items: center; width: calc(2.2 * var(--u)); height: calc(2.6 * var(--u)); border-radius: calc(.35 * var(--u)); background: #FF5A6E; color: #FFFFFF; font-style: normal; font-weight: 800; font-size: calc(.65 * var(--u)); }
.vx-sources b { color: #E3E8FF; font-size: calc(.88 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* environnement */
.vx-terrain { position: relative; flex: 1; min-height: 0; border-radius: calc(.7 * var(--u)); overflow: hidden; background: repeating-radial-gradient(circle at 30% 40%, transparent 0 calc(2.2 * var(--u)), rgb(157 178 255 / .08) calc(2.2 * var(--u)) calc(2.3 * var(--u))), linear-gradient(160deg, #111A48, #0B1233); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); }
.vx-site { position: absolute; left: 30%; top: 40%; width: calc(1.6 * var(--u)); height: calc(1.6 * var(--u)); margin: calc(-.8 * var(--u)); border-radius: calc(.35 * var(--u)); background: #FFFFFF; box-shadow: 0 0 0 calc(.4 * var(--u)) rgb(255 255 255 / .15), 0 0 calc(2 * var(--u)) #FFFFFF; z-index: 2; }
.vx-panache { position: absolute; left: 30%; top: 40%; width: 62%; height: 60%; transform-origin: 0 50%; transform: translateY(-50%) rotate(26deg); background: radial-gradient(ellipse 100% 60% at 0 50%, rgb(255 181 71 / .75), rgb(255 138 60 / .35) 45%, transparent 72%); clip-path: polygon(0 47%, 100% 8%, 100% 92%, 0 53%); filter: blur(calc(.4 * var(--u))); }
.vx-panache--2 { opacity: .5; transform: translateY(-50%) rotate(32deg) scaleX(.85); }
.vx-lieu { position: absolute; left: var(--x); top: var(--y); display: grid; padding: calc(.35 * var(--u)) calc(.7 * var(--u)); border-radius: calc(.5 * var(--u)); background: rgb(10 15 44 / .85); color: #E3E8FF; font-weight: 700; font-size: calc(.85 * var(--u)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
.vx-lieu em { font-style: normal; font-size: calc(.75 * var(--u)); color: #FFB547; }
.vx-rose { position: absolute; right: calc(1 * var(--u)); top: calc(1 * var(--u)); display: grid; place-items: center; width: calc(4.4 * var(--u)); height: calc(4.4 * var(--u)); border-radius: 50%; background: rgb(10 15 44 / .8); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .15); }
.vx-rose b { position: absolute; top: calc(.2 * var(--u)); font-size: calc(.7 * var(--u)); color: #7B86B8; }
.vx-rose i { width: 0; height: 0; border-left: calc(.55 * var(--u)) solid transparent; border-right: calc(.55 * var(--u)) solid transparent; border-bottom: calc(2 * var(--u)) solid #FFB547; transform: rotate(135deg); filter: drop-shadow(0 0 calc(.5 * var(--u)) #FFB547); }
.vx-heures { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: calc(.2 * var(--u)); height: calc(2.6 * var(--u)); }
.vx-heures i { border-radius: calc(.25 * var(--u)); background: rgb(255 255 255 / .07); }
.vx-heures i.on { background: linear-gradient(180deg, #FFC56E, #FF8A3C); box-shadow: 0 0 calc(.6 * var(--u)) rgb(255 138 60 / .6); }
.vx-carte--24 .vx-axe { position: static; margin-top: calc(.4 * var(--u)); }
.vx-semaine { flex: 1; min-height: 0; margin-top: calc(1 * var(--u)); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: calc(.6 * var(--u)); align-items: end; font-size: calc(.75 * var(--u)); color: #5B6699; text-align: center; }
.vx-semaine span { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: calc(.3 * var(--u)); }
.vx-semaine i { height: var(--h); border-radius: calc(.35 * var(--u)) calc(.35 * var(--u)) calc(.15 * var(--u)) calc(.15 * var(--u)); background: linear-gradient(180deg, rgb(255 181 71 / .9), rgb(255 138 60 / .35)); }

/* terrain */
.vx-france { position: relative; flex: 1; min-height: 0; border-radius: calc(.7 * var(--u)); background: radial-gradient(circle at 50% 50%, rgb(78 118 255 / .14), transparent 70%), #0B1233; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); overflow: hidden; }
.vx-fr { position: absolute; top: 4%; bottom: 4%; left: 50%; aspect-ratio: 1; transform: translateX(-50%); }
.vx-fr svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vx-fr-pays { fill: rgb(110 143 255 / .12); stroke: rgb(157 178 255 / .45); stroke-width: .5; }
.vx-route { fill: none; stroke: #6E8FFF; stroke-width: 1.1; stroke-dasharray: 2.2 1.6; stroke-linecap: round; filter: drop-shadow(0 0 1px #6E8FFF); }
.vx-route--2 { stroke: #3DDC97; filter: drop-shadow(0 0 1px #3DDC97); }
.vx-tech { position: absolute; left: var(--x); top: var(--y); width: calc(1.1 * var(--u)); height: calc(1.1 * var(--u)); margin: calc(-.55 * var(--u)); border-radius: 50%; background: #6E8FFF; box-shadow: 0 0 0 calc(.3 * var(--u)) #0B1233, 0 0 calc(1.2 * var(--u)) #6E8FFF; }
.vx-tech.site { background: #3DDC97; box-shadow: 0 0 0 calc(.3 * var(--u)) #0B1233, 0 0 calc(1.2 * var(--u)) #3DDC97; }
.vx-tech b { position: absolute; left: calc(1.6 * var(--u)); top: 50%; transform: translateY(-50%); padding: calc(.15 * var(--u)) calc(.5 * var(--u)); border-radius: calc(.4 * var(--u)); background: rgb(10 15 44 / .9); color: #E3E8FF; font-size: calc(.78 * var(--u)); white-space: nowrap; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
.vx-carte--planning ul { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; align-content: space-between; }
.vx-carte--planning li { display: grid; grid-template-columns: calc(4.4 * var(--u)) minmax(0, 1fr); align-items: center; gap: calc(.6 * var(--u)); font-size: calc(.85 * var(--u)); color: #B4BEE3; }
.vx-gantt { position: relative; height: calc(1.6 * var(--u)); border-radius: calc(.35 * var(--u)); background: repeating-linear-gradient(90deg, rgb(255 255 255 / .04) 0 calc(10% - 1px), rgb(255 255 255 / .08) calc(10% - 1px) 10%); }
.vx-gantt i { position: absolute; top: 12%; bottom: 12%; left: calc(var(--d) * 1%); width: calc(var(--l) * 1%); border-radius: calc(.3 * var(--u)); background: linear-gradient(90deg, #6E8FFF, #3559F5); box-shadow: 0 0 calc(.6 * var(--u)) rgb(110 143 255 / .5); }
.vx-gantt i + i { background: linear-gradient(90deg, #3DDC97, #13A071); box-shadow: none; }

/* pilotage */
.vx-graphe--barres { display: flex; flex-direction: column; }
.vx-barres { position: absolute; inset: 0 0 calc(1.6 * var(--u)); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: calc(.6 * var(--u)); align-items: end; }
.vx-barres i { height: var(--h); border-radius: calc(.4 * var(--u)) calc(.4 * var(--u)) calc(.1 * var(--u)) calc(.1 * var(--u)); background: linear-gradient(180deg, #6E8FFF, rgb(53 89 245 / .35)); }
.vx-barres i:last-child { background: linear-gradient(180deg, #A9BCFF, #3559F5); box-shadow: 0 0 calc(1.2 * var(--u)) rgb(110 143 255 / .8); }
.vx-graphe--barres svg { position: absolute; inset: 0 0 calc(1.6 * var(--u)); height: auto; }
.vx-carte--pipe ul { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; align-content: space-between; }
.vx-carte--pipe li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: calc(.7 * var(--u)); }
.vx-carte--pipe li > i { display: grid; place-items: center; width: calc(2.2 * var(--u)); height: calc(2.2 * var(--u)); border-radius: 50%; background: rgb(110 143 255 / .2); color: #BFCBFF; font-style: normal; font-weight: 800; font-size: calc(.85 * var(--u)); }
.vx-carte--pipe li span { display: grid; font-size: calc(.78 * var(--u)); color: #6F7AAB; }
.vx-carte--pipe li b { color: #E3E8FF; font-size: calc(.95 * var(--u)); }
.vx-carte--pipe li em { display: grid; place-items: center; width: calc(2.6 * var(--u)); height: calc(2.6 * var(--u)); border-radius: 50%; font-style: normal; font-weight: 800; font-size: calc(.82 * var(--u)); color: #FFFFFF; background: radial-gradient(closest-side, #111842 76%, transparent 78%), conic-gradient(#3DDC97 calc(var(--s) * 1%), rgb(255 255 255 / .1) 0%); }

/* --- Les cartes flottantes ---------------------------------------------- */
.vx-flot { position: absolute; z-index: 3; display: flex; align-items: center; gap: .7rem; padding: .75rem 1rem; border-radius: 1.1rem; background: rgb(255 255 255 / .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 30px 50px -22px rgb(11 20 55 / .6), 0 0 0 1px rgb(20 31 75 / .06); font-size: .8rem; line-height: 1.3; color: #5A6386; }
.vx-flot > span:not([class]) { display: grid; }
.vx-flot b { color: var(--nuit); font-size: .9rem; }
.vx-flot em { font-style: normal; padding: .2rem .55rem; border-radius: 999px; background: #E8F7EE; color: #138A4E; font-size: .72rem; font-weight: 800; }
.vx-flot-ic { flex: none; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: .75rem; background: linear-gradient(135deg, #6E8FFF, #1332FF); color: #FFFFFF; font-size: .66rem; font-weight: 800; }
.vx-flot-ic svg { width: 1.25rem; height: 1.25rem; }
.vx-flot-ic--mail { background: #FFFFFF; box-shadow: inset 0 0 0 1px #E3E8F6; color: #EA4335; }
.vx-flot-ic--amb { background: linear-gradient(135deg, #FFC56E, #FF8A3C); }
.vx-flot-ic--pdf { background: #FF5A6E; }
.vx-flot-ic--ok { background: linear-gradient(135deg, #5EE3B5, #13A071); font-size: 1.1rem; }
.vx-flot--a { left: -5%; top: 4%; }
.vx-flot--b { right: -3%; bottom: 12%; }
.vx-flot--c { left: 4%; bottom: 0; }
.vx-cas--inverse .vx-flot--a { left: auto; right: -4%; }
.vx-cas--inverse .vx-flot--b { right: auto; left: -3%; }
.vx-flot--b:has(.vx-gros) { flex-direction: column; align-items: flex-start; gap: .1rem; padding: .9rem 1.2rem; }
.vx-gros { font-size: 2.4rem !important; line-height: 1; letter-spacing: -.03em; background: linear-gradient(180deg, #4E76FF, #1332FF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.vx-flot .vx-avatars i { width: 1.9rem; height: 1.9rem; font-size: .7rem; box-shadow: 0 0 0 2px #FFFFFF; }
.vx-flot .vx-avatars i + i { margin-left: -.55rem; }
.vx-boussole { position: relative; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #0A0F2C; }
.vx-boussole i { width: 0; height: 0; border-left: .32rem solid transparent; border-right: .32rem solid transparent; border-bottom: 1.2rem solid #FFB547; transform: rotate(135deg); }

/* --- Le mouvement : l'écran se redresse, les cartes arrivent ------------- */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.vx-ecran { animation: vx-redresse linear both; animation-timeline: view(); animation-range: entry 5% cover 42%; }
		.vx-cas--inverse .vx-ecran { animation-name: vx-redresse-inv; }
		@keyframes vx-redresse { from { transform: rotateY(-30deg) rotateX(20deg) rotateZ(3deg) translateY(60px) scale(.92); } }
		@keyframes vx-redresse-inv { from { transform: rotateY(30deg) rotateX(20deg) rotateZ(-3deg) translateY(60px) scale(.92); } }
		.vx-flot--a { animation: vx-flot-a linear both; animation-timeline: --vx; animation-range: entry 10% cover 32%; }
		.vx-flot--b { animation: vx-flot-b linear both; animation-timeline: --vx; animation-range: entry 18% cover 38%; }
		.vx-flot--c { animation: vx-flot-b linear both; animation-timeline: --vx; animation-range: entry 24% cover 42%; }
		@keyframes vx-flot-a { from { opacity: 0; translate: 0 40px; scale: .9; } }
		@keyframes vx-flot-b { from { opacity: 0; translate: 0 50px; scale: .9; } }
	}
}

@media (max-width: 1099px) {
	.vx-scene { max-width: 52rem; margin-inline: auto; width: 100%; }
}
@media (max-width: 700px) {
	.vx-scene { padding-block: 3.5rem 2.5rem; }
	.vx-ecran { padding: .3rem; border-radius: .7rem; }
	.vx-flot { padding: .5rem .7rem; font-size: .7rem; gap: .5rem; border-radius: .85rem; }
	.vx-flot b { font-size: .78rem; }
	.vx-flot-ic { width: 1.8rem; height: 1.8rem; }
	.vx-flot--a, .vx-cas--inverse .vx-flot--a { left: 0; right: auto; top: 0; }
	.vx-flot--b, .vx-cas--inverse .vx-flot--b { right: 0; left: auto; bottom: 1.2rem; }
	.vx-flot--c { display: none; }
	.vx-gros { font-size: 1.8rem !important; }
	.vx-res { grid-template-columns: 1fr; }
	.vx-res li { display: flex; align-items: baseline; gap: .8rem; }
	.vx-res span { margin-top: 0; }
}
@media (max-width: 700px) { .vx-mention, .vx-cas--inverse .vx-mention { position: static; margin-top: 1.4rem; text-align: center; } }

/* ============================================================================
   CAS CLIENTS — UNE SEULE SCÈNE, LES CAS SE SUCCÈDENT               2026-09-24
   ----------------------------------------------------------------------------
   Paul : « tu as hyper rallongé le site […] il faut que ce soit sur la même
   section, qu'on puisse changer ou que ça change tout seul ; les interfaces
   sont coupées ; trop chargé ». Les quatre cas occupent la même case de
   grille ; une jauge sous le cas actif avance (9 s) puis passe au suivant.
   Pause : bouton, survol, focus, section hors écran. Mouvement réduit : pas
   de défilement automatique (§7.10). Sans JS : les quatre cas à la suite.
   Écran moins incliné, sans débord : il est vu en entier.
   ========================================================================== */
.vx-commandes { display: none; }
.vx-js .vx-commandes { display: flex; justify-content: center; align-items: center; gap: .6rem; flex-wrap: wrap; margin: -1.5rem 0 clamp(1.5rem, 3vw, 2.5rem); }
.vx-choix { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; padding: .35rem; border-radius: 999px; background: #F1F4FF; box-shadow: inset 0 0 0 1px #E0E6FA; }
.vx-choix__btn { position: relative; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem 1rem .5rem .55rem; border: 0; border-radius: 999px; background: transparent; color: #47527A; font: inherit; font-size: .92rem; font-weight: 700; cursor: pointer; overflow: hidden; transition: background .25s, color .25s, box-shadow .25s; }
.vx-choix__btn:hover { color: var(--nuit); background: rgb(255 255 255 / .7); }
.vx-choix__btn:focus-visible, .vx-pause:focus-visible, .n8__lancer:focus-visible { outline: 2px solid #1332FF; outline-offset: 3px; }
.vx-choix__ic { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: #FFFFFF; color: #1332FF; box-shadow: 0 0 0 1px #DCE4FF; }
.vx-choix__ic svg { width: 1.05rem; height: 1.05rem; }
.vx-choix__btn.on { background: #FFFFFF; color: var(--nuit); box-shadow: 0 8px 20px -12px rgb(19 50 255 / .6), 0 0 0 1px #C9D5FF; }
.vx-choix__btn.on .vx-choix__ic { background: #1332FF; color: #FFFFFF; box-shadow: none; }
.vx-choix__jauge { position: absolute; left: 1rem; right: 1rem; bottom: .2rem; height: 2px; border-radius: 2px; background: #1332FF; transform: scaleX(0); transform-origin: 0 50%; }
.vx-choix__btn.on .vx-choix__jauge { transform: scaleX(1); }
.vx-auto .vx-choix__btn.on .vx-choix__jauge { animation: vx-jauge 5.5s linear both; }
.vx-arret .vx-choix__btn.on .vx-choix__jauge { animation-play-state: paused; }
@keyframes vx-jauge { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.vx-pause { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .5rem .9rem; border: 0; border-radius: 999px; background: transparent; color: #5A6386; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.vx-pause:hover { color: var(--nuit); background: #F1F4FF; }
.vx-pause__ic { width: .7rem; height: .8rem; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.vx-pause[aria-pressed="true"] .vx-pause__ic { width: 0; height: 0; border: 0; border-left: .6rem solid currentColor; border-top: .4rem solid transparent; border-bottom: .4rem solid transparent; }
.vx-manuel .vx-pause { display: none; }

.vx-js .vx-stage { display: grid; }
.vx-js .vx-stage > .vx-cas { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.vx-js .vx-stage > .vx-cas.on { opacity: 1; visibility: visible; transition: opacity .6s ease .1s, visibility 0s; }

/* l'écran : vu en entier, légèrement incliné */
.vx-stage .vx-cas, .vx-stage .vx-cas--inverse { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .vx-stage .vx-cas { grid-template-columns: minmax(0, .64fr) minmax(0, 1.36fr); } }
@media (min-width: 900px) and (max-width: 1099px) { .vx-stage .vx-titre-cas { font-size: 1.7rem; } .vx-stage .vx-puces li { font-size: .8rem; padding: .4rem .7rem; } .vx-stage .vx-chapo { font-size: .95rem; } }
.vx-stage .vx-cas .vx-scene { margin: 0; padding-block: 2rem 2.4rem; }
.vx-stage .vx-ecran { transform: rotateY(-7deg) rotateX(4deg); animation: none; }
.vx-stage .vx-flot { animation: none; }
.vx-stage .vx-flot--a { left: -3%; top: 0; right: auto; }
.vx-stage .vx-flot--b { right: 1%; bottom: 3rem; left: auto; }
@media (prefers-reduced-motion: no-preference) {
	.vx-js .vx-stage > .vx-cas.on .vx-ecran { animation: vx-arrive 1s cubic-bezier(.2, .8, .2, 1) both; }
	.vx-js .vx-stage > .vx-cas.on .vx-flot--a { animation: vx-pop .7s cubic-bezier(.2, .9, .3, 1.2) .45s both; }
	.vx-js .vx-stage > .vx-cas.on .vx-flot--b { animation: vx-pop .7s cubic-bezier(.2, .9, .3, 1.2) .7s both; }
	.vx-js .vx-stage > .vx-cas.on .vx-texte > * { animation: vx-monte .6s ease-out both; }
	.vx-js .vx-stage > .vx-cas.on .vx-texte > :nth-child(2) { animation-delay: .06s; }
	.vx-js .vx-stage > .vx-cas.on .vx-texte > :nth-child(3) { animation-delay: .12s; }
	.vx-js .vx-stage > .vx-cas.on .vx-texte > :nth-child(4) { animation-delay: .18s; }
}
@keyframes vx-arrive { from { opacity: 0; transform: rotateY(-22deg) rotateX(12deg) translateX(40px) scale(.96); } }
@keyframes vx-pop { from { opacity: 0; translate: 0 18px; scale: .92; } }
@keyframes vx-monte { from { opacity: 0; translate: 0 12px; } }

/* allégé : trois indicateurs, résultats en ligne */
.vx-stage .vx-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vx-res--ligne { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-top: 1.5rem; }
.vx-res--ligne li { padding: 0; background: none; box-shadow: none; display: flex; align-items: baseline; gap: .5rem; }
.vx-res--ligne b { font-size: 2rem; }
.vx-res--ligne span { margin: 0; max-width: 9em; font-size: .88rem; }
.vx-stage .vx-chapo { font-size: 1.05rem; }

/* --- Le workflow, façon n8n ---------------------------------------------- */
.n8 { margin-top: clamp(3rem, 6vw, 4.5rem); border-radius: 1.25rem; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #E3E7F2, 0 30px 60px -40px rgb(11 20 55 / .45); }
.n8__barre { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .7rem .8rem .7rem 1.1rem; border-bottom: 1px solid #ECEFF6; }
.n8__titre { display: flex; align-items: center; gap: .6rem; font-size: .9rem; font-weight: 700; color: var(--nuit); }
.n8__titre i { width: .6rem; height: .6rem; border-radius: 50%; background: #29B170; box-shadow: 0 0 0 3px rgb(41 177 112 / .18); }
.n8__lancer { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .5rem 1rem; border: 0; border-radius: .6rem; background: #FF6D5A; color: #FFFFFF; font: inherit; font-size: .88rem; font-weight: 800; cursor: pointer; box-shadow: 0 8px 18px -10px rgb(255 109 90 / .9); transition: transform .2s, background .2s; }
.n8__lancer:hover { background: #F25A47; transform: translateY(-1px); }
.n8__lancer[disabled] { opacity: .6; cursor: default; transform: none; }
.n8__canevas { display: flex; align-items: flex-start; justify-content: center; padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 3vw, 2.5rem) clamp(1.75rem, 3vw, 2.5rem); background: radial-gradient(circle, #D5DAE6 1px, transparent 1.3px) 0 0 / 18px 18px, #F7F8FB; }
.n8__noeud { flex: none; display: grid; justify-items: center; gap: .15rem; width: 9rem; text-align: center; }
.n8__boite { position: relative; display: flex; align-items: center; justify-content: center; gap: .3rem; width: 6.4rem; height: 6.4rem; margin-bottom: .55rem; border-radius: .9rem; background: #FFFFFF; border: 2px solid #29B170; box-shadow: 0 10px 22px -14px rgb(11 20 55 / .5); transition: border-color .3s, box-shadow .3s; }
.n8__noeud--declencheur .n8__boite { border-radius: 2.8rem .9rem .9rem 2.8rem; }
.n8__boite::before { content: ""; position: absolute; right: -.55rem; top: 50%; width: .8rem; height: .8rem; margin-top: -.4rem; border-radius: 50%; background: #FFFFFF; border: 2px solid #B7BFD3; }
.n8__noeud--equipes .n8__boite::before { display: none; }
.n8__boite::after { content: "✓"; position: absolute; right: -.5rem; top: -.5rem; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: #29B170; color: #FFFFFF; font-size: .75rem; font-weight: 900; box-shadow: 0 0 0 3px #F7F8FB; transition: transform .35s cubic-bezier(.2, .9, .3, 1.4), opacity .2s; }
.n8__boite svg { width: 2rem; height: 2rem; }
.n8__boite svg:first-child { color: #EA4335; }
.n8__boite svg + svg { color: #0078D4; }
.n8__noeud--ia .n8__boite svg { color: #D97757; width: 2.4rem; height: 2.4rem; }
.n8__pdf { display: grid; place-items: end center; width: 2.3rem; height: 2.9rem; padding-bottom: .3rem; border-radius: .3rem; background: #FFFFFF; border: 1.5px solid #F3B4B4; color: #D93A3A; font-size: .62rem; font-weight: 900; box-shadow: .35rem -.35rem 0 -1.5px #FFFFFF, .35rem -.35rem 0 0 #F3B4B4; }
.n8__mono { width: 2.8rem; height: 2rem; background: #1332FF; -webkit-mask: url("../img/monogramme.svg") no-repeat center / contain; mask: url("../img/monogramme.svg") no-repeat center / contain; }
.n8__eq { display: flex; }
.n8__eq i { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; color: #FFFFFF; font-style: normal; font-weight: 800; font-size: .72rem; background: linear-gradient(135deg, #6E8FFF, #1332FF); box-shadow: 0 0 0 2px #FFFFFF; }
.n8__eq i + i { margin-left: -.55rem; background: linear-gradient(135deg, #5EE3B5, #13A071); }
.n8__eq i + i + i { background: linear-gradient(135deg, #F6C177, #E0875A); }
.n8__noeud b { font-size: .92rem; color: var(--nuit); }
.n8__noeud em { font-style: normal; font-size: .78rem; line-height: 1.3; color: #6A7396; }
.n8__lien { position: relative; flex: 1 1 3rem; min-width: 2.5rem; max-width: 7rem; height: 2px; margin-top: 3.2rem; background: #29B170; }
.n8__lien::after { content: ""; position: absolute; right: -1px; top: -5px; border-left: 8px solid #29B170; border-top: 6px solid transparent; border-bottom: 6px solid transparent; transition: border-color .3s; }
.n8__lien em { position: absolute; left: 50%; bottom: .45rem; transform: translateX(-50%); white-space: nowrap; font-style: normal; font-size: .68rem; font-weight: 700; color: #29B170; transition: opacity .3s; }
.n8__lien i { position: absolute; left: 0; top: -4px; width: 100%; height: 10px; pointer-events: none; opacity: 0; }
.n8__lien i::before { content: ""; position: absolute; left: -5px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: #29B170; box-shadow: 0 0 10px #29B170; }

/* états pilotés par le script (posés par lui seul : §7.1) */
.n8-pret .n8__boite { border-color: #D5DAE6; box-shadow: 0 6px 14px -12px rgb(11 20 55 / .4); }
.n8-pret .n8__boite::after { opacity: 0; transform: scale(.3); }
.n8-pret .n8__lien { background: #C9CFDD; }
.n8-pret .n8__lien::after { border-left-color: #C9CFDD; }
.n8-pret .n8__lien em { opacity: 0; }
.n8-pret .n8__noeud.encours .n8__boite { border-color: #FF6D5A; box-shadow: 0 0 0 5px rgb(255 109 90 / .16), 0 12px 26px -14px rgb(255 109 90 / .8); animation: n8-pulse .9s ease-in-out infinite; }
.n8-pret .n8__noeud.fait .n8__boite { border-color: #29B170; box-shadow: 0 0 0 4px rgb(41 177 112 / .12), 0 12px 26px -16px rgb(11 20 55 / .5); }
.n8-pret .n8__noeud.fait .n8__boite::after { opacity: 1; transform: scale(1); }
.n8-pret .n8__lien.fait { background: #29B170; }
.n8-pret .n8__lien.fait::after { border-left-color: #29B170; }
.n8-pret .n8__lien.fait em { opacity: 1; }
.n8-pret .n8__lien.passe i { opacity: 1; animation: n8-donnee .55s ease-in-out both; }
@keyframes n8-donnee { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes n8-pulse { 50% { box-shadow: 0 0 0 9px rgb(255 109 90 / .08), 0 12px 26px -14px rgb(255 109 90 / .8); } }

@media (max-width: 860px) {
	.n8__canevas { flex-direction: column; align-items: stretch; padding-inline: max(1rem, calc(50% - 9.5rem)); }
	.n8__noeud { width: auto; grid-template-columns: 4.4rem minmax(0, 1fr); column-gap: 1rem; justify-items: start; text-align: left; align-items: center; }
	.n8__boite { grid-row: 1 / 3; width: 4.4rem; height: 4.4rem; margin: 0; }
	.n8__boite::before { right: 50%; top: auto; bottom: -.55rem; margin: 0 -.4rem 0 0; }
	.n8__noeud b { align-self: end; } .n8__noeud em { align-self: start; }
	.n8__lien { flex: none; width: 2px; height: 2.4rem; min-width: 0; max-width: none; margin: .45rem 0 .45rem calc(2.2rem - 1px); }
	.n8__lien::after { right: -5px; top: auto; bottom: -1px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #29B170; border-bottom: 0; }
	.n8-pret .n8__lien::after { border-left-color: transparent; border-top-color: #C9CFDD; }
	.n8-pret .n8__lien.fait::after { border-left-color: transparent; border-top-color: #29B170; }
	.n8__lien em { left: .7rem; bottom: 50%; transform: translateY(50%); }
	.n8__lien i { width: 10px; height: 100%; left: -4px; top: 0; }
	.n8__lien i::before { left: 0; top: -5px; }
	@keyframes n8-donnee { from { transform: translateY(0); } to { transform: translateY(100%); } }
}
@media (max-width: 700px) {
	.vx-choix__btn { padding: .45rem .8rem .45rem .45rem; font-size: .82rem; }
	.vx-stage .vx-flot--a { left: 0; }
	.vx-stage .vx-flot--b { right: 0; bottom: 2.4rem; }
}
@media (prefers-reduced-motion: reduce) {
	.n8-pret .n8__noeud.encours .n8__boite, .n8-pret .n8__lien.passe i { animation: none; }
}

/* ============================================================================
   LES PROBLÈMES — VISUELS v3 : de vraies captures de logiciels      2026-09-24
   ----------------------------------------------------------------------------
   Paul : « on dirait un mock-up généré par l'IA, il faut que ce soit vraiment
   réaliste, en regardant notre charte ». Donc : police SYSTÈME (celle des
   vrais logiciels), proportions et gris d'interface réels (Finder, messagerie,
   tableur, logiciel de gestion), pas de pastilles décoratives ni de dock. La
   charte passe par l'ACCENT : sélection, icône de classeur, lien actif en bleu
   SALYS #1332FF, fond d'écran dans les bleus de la marque, en doux.
   Tout est en --u (1 % de la largeur du visuel) : la capture se réduit sans
   se recomposer. État de base = image finale (§7.1, §7.2).
   ========================================================================== */
.rl {
	--u: 1cqw;
	--sys: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--gris-t: #1D1D1F; --gris-2: #6E6E73; --gris-3: #A1A1A6; --filet: #E5E5EA; --fond-fen: #FFFFFF; --barre: #F3F3F5;
	container-type: inline-size;
	position: relative; overflow: hidden; padding: 0 !important;
	font-family: var(--sys); color: var(--gris-t); font-size: calc(2.9 * var(--u)); line-height: 1.25; letter-spacing: 0;
	background:
		radial-gradient(70% 60% at 20% 10%, rgb(255 255 255 / .55), transparent 70%),
		radial-gradient(80% 70% at 100% 100%, rgb(19 50 255 / .35), transparent 70%),
		linear-gradient(155deg, #DDE5FB 0%, #B8C7F4 50%, #8EA3EC 100%) !important;
	box-shadow: inset 0 0 0 1px rgb(20 31 75 / .08) !important;
}
@container (min-width: 1px) { .rl { font-size: calc(2.9 * var(--u)); } }
.rl * { font-family: inherit; }
.rl svg { display: block; }

/* fenêtre générique */
.rl-fen { position: absolute; display: flex; flex-direction: column; overflow: hidden; background: var(--fond-fen); border-radius: calc(2.2 * var(--u)); box-shadow: 0 0 0 .5px rgb(0 0 0 / .22), 0 calc(3 * var(--u)) calc(8 * var(--u)) calc(-1 * var(--u)) rgb(20 31 75 / .45), 0 calc(.6 * var(--u)) calc(1.6 * var(--u)) rgb(20 31 75 / .15); }
.rl-barre { flex: none; display: flex; align-items: center; gap: calc(2 * var(--u)); height: calc(7.6 * var(--u)); padding: 0 calc(2.6 * var(--u)); background: var(--barre); border-bottom: 1px solid var(--filet); color: var(--gris-t); }
.rl-barre b { font-weight: 600; font-size: calc(3 * var(--u)); }
.rl-feux { display: flex; gap: calc(1.1 * var(--u)); }
.rl-feux i { width: calc(2.6 * var(--u)); height: calc(2.6 * var(--u)); border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .15); }
.rl-feux i + i { background: #FEBC2E; } .rl-feux i + i + i { background: #28C840; }
.rl-entetes { display: grid; padding: calc(1 * var(--u)) calc(2 * var(--u)); border-bottom: 1px solid var(--filet); color: var(--gris-2); font-size: calc(2.5 * var(--u)); font-weight: 500; }

/* --- 1 : Finder ------------------------------------------------------------ */
.rl--finder .rl-fen { inset: calc(5 * var(--u)) calc(5 * var(--u)) calc(4 * var(--u)); }
.rl-nav { color: var(--gris-3); font-size: calc(3.6 * var(--u)); letter-spacing: .15em; line-height: 1; }
.rl-outils { margin-left: auto; display: flex; align-items: center; gap: calc(1.6 * var(--u)); }
.rl-vues { width: calc(5 * var(--u)); height: calc(3.4 * var(--u)); border-radius: calc(.8 * var(--u)); background: repeating-linear-gradient(180deg, var(--gris-2) 0 1px, transparent 1px calc(1 * var(--u))) center / 50% 60% no-repeat, #E6E6EB; }
.rl-cherche { display: flex; align-items: center; gap: calc(.8 * var(--u)); padding: calc(.6 * var(--u)) calc(1.4 * var(--u)); border-radius: calc(1.2 * var(--u)); background: #E6E6EB; color: var(--gris-3); font-size: calc(2.5 * var(--u)); }
.rl-cherche svg { width: calc(2.4 * var(--u)); height: calc(2.4 * var(--u)); }
.rl-finder { flex: 1; min-height: 0; display: grid; grid-template-columns: calc(23 * var(--u)) minmax(0, 1fr); }
.rl-cote { display: flex; flex-direction: column; gap: calc(.2 * var(--u)); padding: calc(1.6 * var(--u)) calc(1.2 * var(--u)); background: #F6F6F8; border-right: 1px solid var(--filet); font-size: calc(2.55 * var(--u)); }
.rl-cote b { margin: calc(.8 * var(--u)) 0 calc(.2 * var(--u)) calc(.8 * var(--u)); font-size: calc(2.1 * var(--u)); font-weight: 600; color: var(--gris-3); }
.rl-cote b:first-child { margin-top: 0; }
.rl-cote span { display: flex; align-items: center; gap: calc(1 * var(--u)); padding: calc(.55 * var(--u)) calc(.8 * var(--u)); border-radius: calc(1 * var(--u)); white-space: nowrap; overflow: hidden; }
.rl-cote svg { flex: none; width: calc(2.8 * var(--u)); height: calc(2.8 * var(--u)); color: #1332FF; }
.rl-cote .on { background: #DCDCE1; }
.rl-liste { display: flex; flex-direction: column; min-width: 0; }
.rl-liste .rl-entetes, .rl-liste li { grid-template-columns: minmax(0, 1fr) calc(17 * var(--u)) calc(9 * var(--u)); gap: calc(1.4 * var(--u)); }
.rl-liste ul { list-style: none; margin: 0; padding: calc(.6 * var(--u)) calc(1 * var(--u)); }
.rl-liste li { display: grid; align-items: center; padding: calc(.9 * var(--u)) calc(1 * var(--u)); border-radius: calc(.9 * var(--u)); color: var(--gris-2); font-size: calc(2.55 * var(--u)); }
.rl-liste li:nth-child(even) { background: #F5F5F7; }
.rl-liste li > span:last-child { text-align: right; }
.rl-liste li .rl-nom { display: flex; }
.rl-liste li { grid-template-columns: calc(3 * var(--u)) minmax(0, 1fr) calc(9 * var(--u)) calc(8.5 * var(--u)); white-space: nowrap; }
.rl-liste .rl-entetes { grid-template-columns: minmax(0, 1fr) calc(9 * var(--u)) calc(8.5 * var(--u)); padding-left: calc(6.4 * var(--u)); white-space: nowrap; }
.rl-liste .rl-entetes span:last-child { text-align: right; }
.rl p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; max-width: none; }
.rl-ic-xls { width: calc(2.6 * var(--u)); height: calc(3.2 * var(--u)); }
.rl-nom { color: var(--gris-t); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-liste li.sel { background: #1332FF; color: rgb(255 255 255 / .85); }
.rl-liste li.sel .rl-nom { color: #FFFFFF; white-space: normal; line-height: 1.2; }
.rl-liste li { padding-block: calc(1.25 * var(--u)); }
.rl-chemin { flex: none; display: flex; justify-content: space-between; gap: var(--u); padding: calc(.9 * var(--u)) calc(2.2 * var(--u)); border-top: 1px solid var(--filet); background: #FAFAFB; color: var(--gris-2); font-size: calc(2.3 * var(--u)); }
.rl-notif { position: absolute; right: calc(3 * var(--u)); top: calc(3 * var(--u)); z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: calc(1.8 * var(--u)); width: calc(58 * var(--u)); padding: calc(2 * var(--u)) calc(2.4 * var(--u)); border-radius: calc(3.4 * var(--u)); background: rgb(246 246 248 / .9); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 0 0 .5px rgb(0 0 0 / .15), 0 calc(2 * var(--u)) calc(6 * var(--u)) rgb(20 31 75 / .3); font-size: calc(2.7 * var(--u)); }
.rl-notif__app { display: grid; place-items: center; width: calc(6.4 * var(--u)); height: calc(6.4 * var(--u)); border-radius: calc(1.6 * var(--u)); background: linear-gradient(180deg, #4E6BFF, #1332FF); color: #FFFFFF; }
.rl-notif__app svg { width: calc(4 * var(--u)); height: calc(4 * var(--u)); }
.rl-notif__txt { display: grid; gap: calc(.2 * var(--u)); color: var(--gris-t); }
.rl-notif__txt b { font-weight: 600; }
.rl-notif em { font-style: normal; color: var(--gris-2); font-size: calc(2.2 * var(--u)); }

/* --- 2 : la messagerie et le tableur -------------------------------------- */
.rl--saisie .rl-mail { left: calc(4 * var(--u)); top: calc(5 * var(--u)); width: calc(48 * var(--u)); bottom: calc(17 * var(--u)); }
.rl-mail__corps { padding: calc(2.2 * var(--u)) calc(2.6 * var(--u)); display: grid; gap: calc(1.4 * var(--u)); align-content: start; font-size: calc(2.55 * var(--u)); color: #3A3A3C; }
.rl-mail__objet { font-size: calc(3.1 * var(--u)); font-weight: 600; color: var(--gris-t); }
.rl-mail__de { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: calc(1.2 * var(--u)); align-items: center; padding-bottom: calc(1.4 * var(--u)); border-bottom: 1px solid var(--filet); }
.rl-mail__de i { display: grid; place-items: center; width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; background: #8E8E93; color: #FFFFFF; font-style: normal; font-weight: 600; }
.rl-mail__de > span { display: grid; color: var(--gris-2); font-size: calc(2.2 * var(--u)); }
.rl-mail__de b { color: var(--gris-t); font-size: calc(2.6 * var(--u)); font-weight: 600; }
.rl-mail__de em { font-style: normal; color: var(--gris-2); font-size: calc(2.2 * var(--u)); align-self: start; }
.rl-mail p { margin: 0; }
.rl-mail__tab { display: grid; grid-template-columns: auto 1fr; gap: calc(.5 * var(--u)) calc(2 * var(--u)); padding: calc(1.2 * var(--u)) calc(1.6 * var(--u)); border: 1px solid var(--filet); border-radius: calc(1 * var(--u)); }
.rl-mail__tab > span:nth-child(odd) { color: var(--gris-2); }
.rl-mail__tab .rl-sel { justify-self: start; padding: 0 calc(.3 * var(--u)); border-radius: calc(.4 * var(--u)); color: var(--gris-t); font-weight: 500; }

.rl--saisie .rl-xls { left: calc(39 * var(--u)); right: calc(3 * var(--u)); top: calc(12 * var(--u)); bottom: calc(15 * var(--u)); }
.rl-formule { flex: none; display: flex; align-items: center; gap: calc(1.4 * var(--u)); padding: calc(.8 * var(--u)) calc(1.6 * var(--u)); border-bottom: 1px solid var(--filet); font-size: calc(2.45 * var(--u)); }
.rl-ref { width: calc(7 * var(--u)); padding: calc(.2 * var(--u)) calc(.8 * var(--u)); border: 1px solid var(--filet); border-radius: calc(.5 * var(--u)); color: var(--gris-2); }
.rl-formule i { font-style: italic; font-family: Georgia, serif; color: var(--gris-3); }
.rl-fx { position: relative; flex: 1; height: 1.25em; }
.rl-fx > span { position: absolute; left: 0; top: 0; opacity: 0; }
.rl-fx .rl-fx--2 { opacity: 1; }
.rl-grille { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: calc(5 * var(--u)) repeat(3, minmax(0, 1fr)); grid-auto-rows: calc(4.3 * var(--u)); font-size: calc(2.4 * var(--u)); overflow: hidden; }
.rl-grille > span { display: flex; align-items: center; padding: 0 calc(.9 * var(--u)); border-right: 1px solid #E8E8EC; border-bottom: 1px solid #E8E8EC; white-space: nowrap; overflow: hidden; }
.rl-grille .rl-num { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.rl-coin, .rl-col, .rl-lig { background: #F5F5F7; color: var(--gris-2); justify-content: center; font-size: calc(2.2 * var(--u)); }
.rl-lig--on { background: #E3E8FF !important; color: #1332FF !important; font-weight: 600; }
.rl-th { font-weight: 600; background: #F0F3FF; color: var(--nuit); }
.rl-cadre { grid-row: 7 / 8; grid-column: 2 / 3; border: 2px solid #1332FF !important; box-shadow: inset 0 0 0 1px #FFFFFF; transform: translateX(200%); padding: 0 !important; background: transparent; pointer-events: none; z-index: 1; }
.rl-cadre::after { content: ""; position: absolute; right: -4px; bottom: -4px; width: 5px; height: 5px; background: #1332FF; border: 1px solid #FFFFFF; }
.rl-cadre { position: absolute; inset: 0; }
.rl-onglets { flex: none; display: flex; gap: calc(.4 * var(--u)); padding: 0 calc(1.6 * var(--u)); border-top: 1px solid var(--filet); background: #F5F5F7; font-size: calc(2.2 * var(--u)); color: var(--gris-2); }
.rl-onglets span { padding: calc(.8 * var(--u)) calc(1.8 * var(--u)); }
.rl-onglets .on { background: #FFFFFF; color: #1332FF; font-weight: 600; box-shadow: inset 0 -2px 0 #1332FF; }
.rl--saisie .compteur-ressaisies { font-family: var(--sys); }

/* --- 3 : suivi des encours -------------------------------------------------- */
.rl--encours .rl-gestion { inset: calc(5 * var(--u)) calc(5 * var(--u)) calc(4 * var(--u)); }
.rl-gestion__tete { flex: none; display: flex; justify-content: space-between; align-items: center; gap: var(--u); padding: calc(2 * var(--u)) calc(2.6 * var(--u)) calc(1.4 * var(--u)); }
.rl-gestion__tete > b { font-size: calc(3.4 * var(--u)); font-weight: 700; }
.rl-filtres { display: flex; padding: calc(.3 * var(--u)); border-radius: calc(1.2 * var(--u)); background: #EFEFF3; font-size: calc(2.2 * var(--u)); }
.rl-filtres i { font-style: normal; padding: calc(.4 * var(--u)) calc(1.2 * var(--u)); border-radius: calc(.9 * var(--u)); color: var(--gris-2); }
.rl-filtres i.on { background: #FFFFFF; color: var(--gris-t); font-weight: 600; box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
.rl-entetes--4, .rl-encours li { grid-template-columns: calc(15 * var(--u)) minmax(0, 1fr) calc(15 * var(--u)) calc(27 * var(--u)); gap: calc(1.4 * var(--u)); }
.rl-entetes--4 { padding-inline: calc(2.6 * var(--u)); background: #FAFAFB; border-top: 1px solid var(--filet); }
.rl-entetes--4 span:nth-child(3) { text-align: right; }
.rl-encours { flex: 1; min-height: 0; list-style: none; margin: 0; padding: 0; overflow: hidden; }
.rl-encours li { display: grid; align-items: center; padding: calc(1.1 * var(--u)) calc(2.6 * var(--u)); border-bottom: 1px solid #F0F0F3; font-size: calc(2.55 * var(--u)); }
.rl-piece { display: grid; color: var(--gris-2); font-size: calc(2.1 * var(--u)); }
.rl-piece b { color: var(--gris-t); font-size: calc(2.55 * var(--u)); font-weight: 600; font-variant-numeric: tabular-nums; }
.rl-encours .rl-num { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.rl-statut { justify-self: start; display: inline-flex; align-items: center; gap: calc(.8 * var(--u)); padding: calc(.4 * var(--u)) calc(1.2 * var(--u)); border-radius: 999px; font-size: calc(2.2 * var(--u)); font-weight: 600; white-space: nowrap; }
.rl-statut i { width: calc(1.3 * var(--u)); height: calc(1.3 * var(--u)); border-radius: 50%; background: currentColor; }
.rl-statut b { font-variant-numeric: tabular-nums; }
.rl-statut--orange { background: #FFF4E5; color: #B25E00; }
.rl-statut--rouge { background: #FFECEC; color: #C4262E; }
.rl-total { flex: none; display: flex; justify-content: space-between; align-items: center; padding: calc(1.6 * var(--u)) calc(2.6 * var(--u)); border-top: 1px solid var(--filet); background: #F7F8FF; font-size: calc(2.6 * var(--u)); color: var(--gris-2); }
.rl-total b { font-size: calc(3.8 * var(--u)); font-weight: 700; color: #1332FF; font-variant-numeric: tabular-nums; }

/* --- Le mouvement, joué par problemes.js (.joue) -------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.mal3-anim .mal3:not(.joue) .rl-liste li,
	.mal3-anim .mal3:not(.joue) .rl-notif,
	.mal3-anim .mal3:not(.joue) .rl-encours li { opacity: 0; }
	.mal3-anim .mal3:not(.joue) .rl-saisie { opacity: 0; }
	.mal3.joue .rl-liste li { animation: rl-ligne .35s ease-out both; animation-delay: calc(.2s + var(--k) * .4s); }
	.mal3.joue .rl-liste li.sel { animation: rl-ligne .35s ease-out 2.2s both, rl-choix .5s steps(1) 2.6s both; }
	@keyframes rl-choix { from { background: transparent; color: var(--gris-2); } }
	.mal3.joue .rl-liste li.sel .rl-nom { animation: rl-choix-nom .5s steps(1) 2.6s both; }
	@keyframes rl-choix-nom { from { color: var(--gris-t); } }
	.mal3.joue .rl-notif { animation: rl-notif .55s cubic-bezier(.2, .9, .3, 1.15) 3.2s both; }
	@keyframes rl-ligne { from { opacity: 0; } }
	@keyframes rl-notif { from { opacity: 0; transform: translateX(110%); } }

	/* saisie : 4 temps de 1,2 s — la valeur est surlignée dans le mail, le
	   cadre de cellule avance, la valeur apparaît dans la cellule */
	.mal3.joue .rl-cadre { animation: rl-cadre 3.6s steps(1, end) .3s both; }
	@keyframes rl-cadre { 0% { transform: translateX(0); } 33.3% { transform: translateX(100%); } 66.6%, 100% { transform: translateX(200%); } }
	.mal3.joue .rl-sel--0 { animation: rl-surligne 1.2s ease .3s both; }
	.mal3.joue .rl-sel--1 { animation: rl-surligne 1.2s ease 1.5s both; }
	.mal3.joue .rl-sel--2 { animation: rl-surligne 1.2s ease 2.7s both; }
	.mal3.joue .rl-sel--3 { animation: rl-surligne 1.2s ease 3.9s both; }
	@keyframes rl-surligne { 0%, 100% { background: transparent; } 15%, 60% { background: #C9D5FF; } }
	.mal3.joue .rl-saisie--0 { animation: rl-tape .2s ease 1s both; }
	.mal3.joue .rl-saisie--1 { animation: rl-tape .2s ease 2.2s both; }
	.mal3.joue .rl-saisie--2 { animation: rl-tape .2s ease 3.4s both; }
	.mal3.joue .rl-saisie--3 { animation: rl-tape .2s ease 4.6s both; }
	@keyframes rl-tape { from { opacity: 0; } }
	.mal3.joue .rl-fx--2 { animation: rl-fx 1.2s steps(1) 2.7s both; }
	.mal3.joue .rl-fx--0 { animation: rl-fx-on 1.2s steps(1) .3s forwards; }
	.mal3.joue .rl-fx--1 { animation: rl-fx-on 1.2s steps(1) 1.5s forwards; }
	
	@keyframes rl-fx { from { opacity: 0; } to { opacity: 1; } }
	@keyframes rl-fx-on { 0% { opacity: 1; } 100% { opacity: 0; } }
	.mal3.joue .rl-ref { }

	.mal3.joue .rl-encours li { animation: rl-ligne .35s ease-out both; animation-delay: calc(.2s + var(--k) * .45s); }
}

/* ============================================================================
   RETOUCHES DU 2026-09-24 (soir) — cas clients, workflow, méthode, menu
   ----------------------------------------------------------------------------
   Paul : titres de cas sur 3-4 lignes « pas beau » ; « 6 h / 0 / 4 » pas
   équilibrés ; interfaces qui changent trop lentement (9 s → 5,5 s) ; plus
   de bouton Pause ni « Exécuter le workflow » ; workflow dans notre DA ;
   méthode sur un seul écran ; plus de sites internet.
   ========================================================================== */
.menu-solutions { grid-template-columns: 19.5rem; }

/* titres : toujours DEUX lignes, chacune d'un seul tenant */
.vx-stage .vx-titre-cas { font-size: clamp(1.4rem, .75rem + 1.25vw, 1.95rem); line-height: 1.1; }
.vx-stage .vx-titre-cas, .vx-stage .vx-titre-cas span { white-space: nowrap; }
@media (max-width: 420px) { .vx-stage .vx-titre-cas { font-size: 1.45rem; } }
@media (min-width: 900px) and (max-width: 1099px) { .vx-stage .vx-titre-cas { font-size: 1.35rem; } }

/* trois cases égales, séparées d'un filet — chiffres ou capacités */
.vx-trois { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 1rem; background: #FFFFFF; box-shadow: 0 0 0 1px #DCE4FF, 0 14px 30px -22px rgb(19 50 255 / .5); }
.vx-trois li { display: grid; justify-items: center; align-content: start; gap: .45rem; padding: 1rem .6rem .95rem; text-align: center; }
.vx-trois li + li { border-left: 1px solid #E3E8F8; }
.vx-trois b { display: grid; place-items: center; height: 2.4rem; font-size: 2.2rem; line-height: 1; font-weight: 800; letter-spacing: -.03em; color: #1332FF; }
.vx-trois span { font-size: .85rem; line-height: 1.3; color: #47527A; font-weight: 600; }
.vx-trois--ic b { width: 2.4rem; border-radius: 50%; background: #EEF2FF; }
.vx-trois--ic b svg { width: 1.2rem; height: 1.2rem; }

/* --- Le workflow dans la DA SALYS ---------------------------------------- */
.n8 { box-shadow: 0 0 0 1px #DCE4FF, 0 30px 60px -40px rgb(19 50 255 / .45); }
.n8__barre { justify-content: center; background: linear-gradient(180deg, #FFFFFF, #F7F9FF); }
.n8__titre { color: var(--nuit); }
.n8__titre i { width: 1.1rem; height: .8rem; border-radius: 0; background: #1332FF; box-shadow: none; -webkit-mask: url("../img/monogramme.svg") no-repeat center / contain; mask: url("../img/monogramme.svg") no-repeat center / contain; }
.n8__canevas { background: radial-gradient(circle, #C9D5FF 1px, transparent 1.4px) 0 0 / 18px 18px, #F5F7FF; }
.n8__boite { border-color: #1332FF; border-radius: 1.1rem; }
.n8__noeud--declencheur .n8__boite { border-radius: 2.8rem 1.1rem 1.1rem 2.8rem; }
.n8__boite::before { border-color: #9DB0FF; }
.n8__boite::after { background: #1332FF; box-shadow: 0 0 0 3px #F5F7FF; }
.n8__lien, .n8-pret .n8__lien.fait { background: #1332FF; }
.n8__lien::after, .n8-pret .n8__lien.fait::after { border-left-color: #1332FF; }
.n8__lien em { color: #1332FF; }
.n8__lien i::before { background: #1332FF; box-shadow: 0 0 0 4px rgb(19 50 255 / .18), 0 0 12px #4E76FF; }
.n8-pret .n8__boite { border-color: #DCE4FF; }
.n8-pret .n8__lien { background: #DCE4FF; }
.n8-pret .n8__lien::after { border-left-color: #DCE4FF; }
.n8-pret .n8__noeud.encours .n8__boite { border-color: #4E76FF; box-shadow: 0 0 0 6px rgb(78 118 255 / .18), 0 14px 30px -14px rgb(19 50 255 / .7); animation: n8-pulse-b .9s ease-in-out infinite; }
.n8-pret .n8__noeud.fait .n8__boite { border-color: #1332FF; box-shadow: 0 0 0 4px rgb(19 50 255 / .1), 0 12px 26px -16px rgb(19 50 255 / .55); }
.n8__noeud--salys .n8__boite { background: #1332FF; }
.n8__noeud--salys .n8__mono { background: #FFFFFF; }
@keyframes n8-pulse-b { 50% { box-shadow: 0 0 0 10px rgb(78 118 255 / .08), 0 14px 30px -14px rgb(19 50 255 / .7); } }
@media (max-width: 860px) {
	.n8-pret .n8__lien::after { border-left-color: transparent; border-top-color: #DCE4FF; }
	.n8-pret .n8__lien.fait::after, .n8__lien::after { border-left-color: transparent; border-top-color: #1332FF; }
}

/* --- La méthode, sur un seul écran ---------------------------------------- */
.m4 { position: relative; padding-block: var(--section); background: linear-gradient(180deg, #FFFFFF, #F5F7FF); color: var(--nuit); }
.m4__entete { text-align: center; max-width: 46rem; margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
.m4__sur span { display: inline-block; padding: .4rem .95rem; border-radius: 999px; background: #1332FF; color: #FFFFFF; font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 10px 22px -10px rgb(19 50 255 / .9); }
.m4__h2 { margin-top: 1.1rem; font-size: clamp(2.1rem, 1.1rem + 3vw, 3.6rem); line-height: 1.04; letter-spacing: -.035em; font-weight: 800; }
.m4__h2 span { color: #1332FF; }
.m4__liste { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; counter-reset: none; }
.m4__liste::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 6.1rem; height: 2px; background: linear-gradient(90deg, #C9D5FF, #1332FF); border-radius: 2px; }
.m4__etape { position: relative; display: grid; justify-items: center; align-content: start; text-align: center; padding: 0 .4rem; }
.m4__objet { display: grid; place-items: center; width: 8rem; height: 8rem; margin-bottom: 1.1rem; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #FFFFFF, #EAF0FF); box-shadow: 0 0 0 1px #DCE4FF, 0 18px 36px -20px rgb(19 50 255 / .55); position: relative; z-index: 1; }
.m4__objet img { width: 68%; height: 68%; object-fit: contain; }
.m4__num { position: absolute; top: 5.9rem; left: calc(50% + 2.6rem); z-index: 2; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: #1332FF; color: #FFFFFF; font-size: .8rem; font-weight: 800; box-shadow: 0 0 0 4px #FFFFFF; }
.m4__titre { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.m4__titre span { display: block; margin-top: .3rem; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #1332FF; }
.m4__etape p { margin-top: .7rem; max-width: 17rem; font-size: .98rem; line-height: 1.5; color: #47527A; }
@media (max-width: 899px) {
	.m4__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
	.m4__liste::before { display: none; }
}
@media (max-width: 520px) {
	.m4__liste { grid-template-columns: 1fr; }
	.m4__etape { grid-template-columns: 5rem minmax(0, 1fr); justify-items: start; text-align: left; column-gap: 1rem; }
	.m4__objet { grid-row: 1 / 4; width: 5rem; height: 5rem; margin: 0; }
	.m4__num { top: 3.4rem; left: 3.6rem; width: 1.7rem; height: 1.7rem; font-size: .7rem; }
	.m4__etape p { margin-top: .35rem; }
}
@media (prefers-reduced-motion: no-preference) {
	.js-motion .m4__etape { animation: m4-entre linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; }
	@keyframes m4-entre { from { opacity: 0; translate: 0 30px; } }
}
@supports not (animation-timeline: view()) { .js-motion .m4__etape { animation: none; } }
.vx-h2 span { display: block; }

/* 2026-09-24 — Paul : garder la plongée dans SALYS, mais SANS les bordures
   lumineuses des lettres (halo, anneau, comète, filet, trait) : « ça fait bas
   de gamme ». Les lettres restent pleines, découpées dans le champ. */
.portail__trait { display: none !important; }

/* ============================================================================
   HOMOGÉNÉITÉ DES FONDS                                             2026-09-24
   ----------------------------------------------------------------------------
   Paul : « ce ne sont pas les mêmes blancs ». Deux fonds seulement : le BLANC
   PUR #FFFFFF pour toutes les sections claires, le BLEU NUIT (--nuit-uni) pour
   les sections sombres (premier écran/problèmes, IA, objections). Les dégradés
   pâles (#F5F7FE, #F5F7FF, halos bleutés du cas client) sont retirés.
   ========================================================================== */
.equipe--v3, .m4, .apres, .cas, .vx, .section { background: #FFFFFF; }
.vx::before { display: none; }

/* ============================================================================
   LES OBJECTIONS — FAQ du dirigeant industriel                      2026-09-24
   ----------------------------------------------------------------------------
   Bleu nuit, comme la section IA : colonne de gauche collante (titre, appel),
   à droite les objections en <details>, citées entre guillemets comme on les
   entend ; la réponse commence par une phrase courte en gras.
   ========================================================================== */
.obj { position: relative; padding-block: var(--section); color: #FFFFFF; overflow: clip;
	background:
		radial-gradient(50rem 28rem at 12% 0%, rgb(19 50 255 / .28), transparent 70%),
		radial-gradient(40rem 30rem at 100% 100%, rgb(19 50 255 / .18), transparent 70%),
		var(--nuit-uni, #0B1437); }
.obj::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background: radial-gradient(circle, rgb(157 178 255 / .16) 1px, transparent 1.4px) 0 0 / 22px 22px; -webkit-mask: linear-gradient(180deg, #000, transparent 70%); mask: linear-gradient(180deg, #000, transparent 70%); }
.obj__grille { position: relative; display: grid; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
@media (min-width: 1000px) { .obj__grille { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } .obj__entete { position: sticky; top: 7.5rem; } }
.obj__sur span { display: inline-block; padding: .4rem .95rem; border-radius: 999px; background: #1332FF; color: #FFFFFF; font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 10px 22px -10px rgb(19 50 255 / .9); }
.obj__titre { margin-top: 1.1rem; font-size: clamp(2.1rem, 1.1rem + 2.8vw, 3.4rem); line-height: 1.04; letter-spacing: -.035em; font-weight: 800; text-wrap: balance; }
.obj__titre span { display: block; background: linear-gradient(90deg, #9DB2FF, #4E76FF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.obj__chapo { margin: 1.2rem 0 1.8rem; max-width: 26rem; font-size: 1.1rem; line-height: 1.55; color: var(--texte-clair, #C3CEEE); }
.obj__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; counter-reset: none; }
.obj__item { border-radius: 1.1rem; background: linear-gradient(180deg, rgb(255 255 255 / .06), rgb(255 255 255 / .025)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09); transition: background .3s, box-shadow .3s; }
.obj__item[open] { background: linear-gradient(135deg, rgb(19 50 255 / .30), rgb(19 50 255 / .08) 70%); box-shadow: inset 0 0 0 1px rgb(110 143 255 / .55), 0 24px 50px -30px rgb(19 50 255 / .9); }
.obj__q { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.1rem; min-height: 44px; padding: 1.2rem 1.3rem; cursor: pointer; list-style: none; border-radius: inherit; }
.obj__q::-webkit-details-marker { display: none; }
.obj__q:hover .obj__texte { color: #FFFFFF; }
.obj__q:focus-visible { outline: 2px solid #9DB2FF; outline-offset: 3px; }
.obj__num { font-size: .8rem; font-weight: 800; letter-spacing: .08em; color: #6E8FFF; font-variant-numeric: tabular-nums; }
.obj__texte { font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); font-weight: 700; line-height: 1.35; color: #E3E8FF; transition: color .2s; }
.obj__plus { position: relative; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); transition: transform .35s cubic-bezier(.2, .8, .2, 1), background .3s; }
.obj__plus::before, .obj__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: .8rem; height: 2px; margin: -1px 0 0 -.4rem; border-radius: 2px; background: #FFFFFF; }
.obj__plus::after { transform: rotate(90deg); }
.obj__item[open] .obj__plus { transform: rotate(45deg); background: #1332FF; box-shadow: none; }
.obj__r { padding: 0 1.3rem 1.35rem calc(1.3rem + 1.1rem + 1.4rem); }
.obj__r p { max-width: 38em; font-size: 1.02rem; line-height: 1.6; color: var(--texte-clair, #C3CEEE); }
.obj__r strong { color: #FFFFFF; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
	.obj__item[open] .obj__r { animation: obj-ouvre .4s ease-out; }
	@keyframes obj-ouvre { from { opacity: 0; translate: 0 -6px; } }
}
@media (max-width: 600px) {
	.obj__q { gap: .8rem; padding: 1rem; }
	.obj__r { padding: 0 1rem 1.1rem 1rem; }
}
/* le dernier appel, sur le même blanc et centré */
#questions + .section { text-align: center; }
.obj .bouton--principal { background: linear-gradient(180deg, #3559F5, #1332FF); color: #FFFFFF; box-shadow: 0 14px 30px -12px rgb(19 50 255 / .9), inset 0 1px 0 rgb(255 255 255 / .25); }

/* ============================================================================
   DERRIÈRE SALYS — PAUL ET CLÉMENT, PLEINE LARGEUR                  2026-09-24
   ----------------------------------------------------------------------------
   Paul : « côte à côte, toute la largeur de la page, un fond stylé, pas une
   section générique sans animation ». Fond : bleu SALYS profond + éventail de
   rayons (repris du premier écran) qui tourne au défilement + trame de points
   + lueur qui suit la souris (boutons.js, --lx/--ly). Les portraits montent et
   se rapprochent ; le monogramme s'allume entre eux ; la carte « Notre
   objectif » vient se poser sur le bas des portraits.
   État de base = état final (sans JS, mouvement réduit : tout est visible).
   ========================================================================== */
.duo { display: block; --lx: 50%; --ly: 55%; position: relative; isolation: isolate; overflow: clip; padding: var(--section) 0 var(--section); color: #FFFFFF;
	background:
		radial-gradient(70% 60% at 50% 62%, #3A5BFF 0%, #1332FF 38%, #0B1FA8 70%, #0A1238 100%); }
.duo__fond { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.duo__rayons { position: absolute; left: 50%; top: 58%; width: 190vmax; height: 190vmax; margin: -95vmax 0 0 -95vmax;
	background: repeating-conic-gradient(from 0deg at 50% 50%, rgb(255 255 255 / .10) 0deg 1.1deg, transparent 1.1deg 4.5deg);
	-webkit-mask: radial-gradient(closest-side, #000 8%, rgb(0 0 0 / .5) 30%, transparent 62%); mask: radial-gradient(closest-side, #000 8%, rgb(0 0 0 / .5) 30%, transparent 62%); }
.duo__trame { position: absolute; inset: 0; background: radial-gradient(circle, rgb(255 255 255 / .16) 1px, transparent 1.4px) 0 0 / 24px 24px; -webkit-mask: linear-gradient(180deg, #000, transparent 55%); mask: linear-gradient(180deg, #000, transparent 55%); }
.duo__lueur { position: absolute; inset: 0; background: radial-gradient(34rem 28rem at var(--lx) var(--ly), rgb(157 178 255 / .35), transparent 70%); transition: background-position .2s; }
.duo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; z-index: -1; background: linear-gradient(180deg, transparent, rgb(10 18 56 / .85)); pointer-events: none; }

.duo__tete { position: relative; z-index: 3; text-align: center; max-width: 54rem; }
.duo__sur span { display: inline-block; padding: .4rem .95rem; border-radius: 999px; background: rgb(255 255 255 / .14); color: #FFFFFF; font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.duo__titre { margin-top: 1rem; font-size: clamp(2.4rem, 1.2rem + 4vw, 4.8rem); line-height: 1; letter-spacing: -.04em; font-weight: 800; }
.duo__titre span { display: block; background: linear-gradient(180deg, #FFFFFF 30%, #C9D5FF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.duo__chapo { margin: 1.2rem auto 0; max-width: 40rem; font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem); line-height: 1.55; color: #DDE4FF; }

.duo__scene { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; align-items: end; height: clamp(22rem, 58vw, 50rem); margin-top: clamp(1rem, 3vw, 2.5rem); padding-inline: max(0px, calc(50vw - 46rem)); }
.duo__p { position: relative; height: 100%; margin: 0; display: flex; align-items: flex-end; }
.duo__p--paul { justify-content: flex-end; margin-right: -3%; }
.duo__p--clement { justify-content: flex-start; margin-left: -3%; }
.duo__p img { display: block; max-width: none; width: auto; height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 30px 40px rgb(5 10 50 / .45)); -webkit-mask: linear-gradient(180deg, #000 78%, transparent 100%); mask: linear-gradient(180deg, #000 78%, transparent 100%); }
.duo__p--paul img { height: 96%; }
.duo__p figcaption { position: absolute; bottom: 24%; z-index: 2; display: grid; gap: .15rem; padding: .7rem 1rem; border-radius: 1rem; background: rgb(255 255 255 / .12); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .28), 0 18px 40px -18px rgb(5 10 50 / .7); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.duo__p--paul figcaption { left: 0; }
.duo__p--clement figcaption { right: 0; text-align: right; }
.duo__p figcaption b { font-size: clamp(1rem, .9rem + .5vw, 1.35rem); font-weight: 800; letter-spacing: -.01em; }
.duo__p figcaption span { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #C9D5FF; }
.duo__mono { position: absolute; left: 50%; top: 8%; z-index: 0; width: clamp(5rem, 11vw, 9rem); aspect-ratio: 1; transform: translateX(-50%); display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgb(255 255 255 / .22), rgb(255 255 255 / 0) 68%); }
.duo__mono i { width: 70%; height: 50%; background: #FFFFFF; -webkit-mask: url("../img/monogramme.svg") no-repeat center / contain; mask: url("../img/monogramme.svg") no-repeat center / contain; filter: drop-shadow(0 0 18px rgb(157 178 255 / .9)); }

.duo__objectif { position: relative; z-index: 4; margin-top: clamp(-7rem, -8vw, -3rem); padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.4rem, 3.5vw, 3rem); border-radius: 1.5rem; background: rgb(255 255 255 / .96); color: var(--nuit); box-shadow: 0 40px 80px -40px rgb(5 10 50 / .8); }
.duo__objectif-titre { font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #1332FF; }
.duo__objectif p { margin-top: .6rem; font-size: clamp(1.1rem, 1rem + .6vw, 1.5rem); line-height: 1.45; font-weight: 500; max-width: none; color: #3D4870; }
.duo__objectif b { color: var(--nuit); font-weight: 800; }

@media (max-width: 700px) {
	.duo__scene { height: 112vw; padding-inline: 0; }
	.duo__p figcaption { bottom: 30%; padding: .45rem .6rem; }
	.duo__p figcaption span { font-size: .62rem; }
	.duo__objectif { margin-top: -2.5rem; }
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.duo { view-timeline: --duo; }
		.duo__rayons { animation: duo-rayons linear both; animation-timeline: --duo; animation-range: cover 0% cover 100%; }
		@keyframes duo-rayons { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
		.duo__scene { view-timeline: --duo-scene; }
		.duo__p--paul img { animation: duo-gauche linear both; animation-timeline: --duo-scene; animation-range: entry 0% cover 45%; }
		.duo__p--clement img { animation: duo-droite linear both; animation-timeline: --duo-scene; animation-range: entry 5% cover 48%; }
		@keyframes duo-gauche { from { opacity: 0; transform: translate(-14%, 14%) scale(.94); } }
		@keyframes duo-droite { from { opacity: 0; transform: translate(14%, 14%) scale(.94); } }
		.duo__p figcaption { animation: duo-nom linear both; animation-timeline: --duo-scene; animation-range: entry 40% cover 55%; }
		@keyframes duo-nom { from { opacity: 0; translate: 0 24px; } }
		.duo__mono { animation: duo-mono linear both; animation-timeline: --duo-scene; animation-range: entry 20% cover 50%; }
		@keyframes duo-mono { from { opacity: 0; scale: .5; } }
		.duo__tete > * { animation: duo-monte linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
		@keyframes duo-monte { from { opacity: 0; translate: 0 30px; } }
	}
}
.duo__p--paul figcaption { left: max(1rem, 6%); }
.duo__p--clement figcaption { right: max(1rem, 6%); }
/* les portraits restent dans leur moitié : jamais coupés par le bord */
.duo__p img, .duo__p--paul img { width: 100%; height: 100%; max-width: 100%; }
.duo__p--paul img { object-position: right bottom; }
.duo__p--clement img { object-position: left bottom; }
.duo__p figcaption { bottom: calc(clamp(3rem, 8vw, 7rem) + 3.5rem); }

/* ============================================================================
   FONDATEURS ↔ MÉTHODE ↔ FAQ — l'enchaînement                       2026-09-24
   ----------------------------------------------------------------------------
   Paul : « que la section apparaisse avec une animation, comme quand "Ce
   qu'on a construit" monte sur "On règle ça" » ; « on est un peu trop gros » ;
   logo +20 % ; titre sans « Il y a » isolé ; transition fondateurs → FAQ
   « comme une seule section ».
   · La méthode se fige (collante) et les fondateurs montent PAR-DESSUS en
     carte qui s'élargit (même `auto-carte` que le cas client).
   · Le bas des fondateurs se fond exactement dans le bleu nuit de la FAQ,
     qui démarre sans rupture.
   ========================================================================== */
.chapitre3 { position: relative; }
@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		.chapitre3 > .m4 { position: sticky; top: 0; min-height: 100svh; display: grid; align-content: center; }
		.chapitre3 > .duo { z-index: 1; box-shadow: 0 -30px 60px -30px rgb(11 20 55 / .45); animation: auto-carte linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
	}
}
.duo__titre { font-size: clamp(1.6rem, .6rem + 4.4vw, 4.2rem); line-height: 1.05; }
.duo__titre, .duo__titre span { white-space: nowrap; }
.duo__scene { height: clamp(19rem, 49vw, 42rem); }
.duo__mono { width: clamp(6rem, 13.2vw, 10.8rem); }
.duo::after { height: 34%; background: linear-gradient(180deg, rgb(11 20 55 / 0), #0B1437 92%); }
.duo { padding-bottom: clamp(3rem, 6vw, 5rem); }
/* la FAQ prolonge le même bleu nuit, sans bord */
.obj { padding-top: clamp(2.5rem, 5vw, 4rem);
	background:
		radial-gradient(50rem 28rem at 12% 35%, rgb(19 50 255 / .22), transparent 70%),
		radial-gradient(40rem 30rem at 100% 100%, rgb(19 50 255 / .18), transparent 70%),
		#0B1437; }
.obj::before { -webkit-mask: linear-gradient(180deg, transparent, #000 25%, transparent 80%); mask: linear-gradient(180deg, transparent, #000 25%, transparent 80%); }
.obj__titre span { white-space: nowrap; }
.obj__titre { font-size: clamp(2rem, 1rem + 2.6vw, 3.3rem); }
@media (max-width: 700px) {
	.duo__p figcaption { bottom: 3.2rem; padding: .35rem .55rem; }
	.duo__p figcaption b { font-size: .85rem; }
	.duo__p--paul figcaption { left: .6rem; } .duo__p--clement figcaption { right: .6rem; }
}

/* ============================================================================
   13 POUCES, PIED DE PAGE, COHÉRENCE DE LA CHARTE                   2026-09-24
   ========================================================================== */

/* --- En-tête : se retire à la descente, revient à la remontée (boutons.js) */
.entete { transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
html.entete-cachee .entete { transform: translateY(calc(-100% - .5rem)); }
@media (prefers-reduced-motion: reduce) { .entete { transition: none; } }

/* --- Fondateurs : tout tient dans l'écran, même sur un 13 pouces ----------
   Titre + texte + portraits + haut de la carte ≤ hauteur d'écran. */
.duo__scene { height: clamp(14rem, min(40vw, 100svh - 25rem), 36rem); }
.duo__titre { font-size: clamp(1.6rem, .6rem + 3.6vw, 3.75rem); }
.duo__chapo { max-width: 44rem; }
@media (max-height: 820px) and (min-width: 900px) {
	.duo { padding-top: 3.5rem; }
	.duo__chapo { font-size: 1rem; margin-top: .8rem; }
	.duo__scene { margin-top: .5rem; }
}

/* --- Une seule échelle pour les titres de section (charte) --------------- */
:root { --t-h2: clamp(2.1rem, 1rem + 3vw, 3.75rem); }
.probleme__titre, .vx-h2, .ia__titre, .m4__h2, .obj__titre { font-size: var(--t-h2); letter-spacing: -.035em; line-height: 1.04; font-weight: 800; }
@media (min-width: 1000px) { .obj__grille { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }
@media (max-width: 420px) { .obj__titre { font-size: 1.9rem; } }

/* --- Un seul bouton principal : le bleu SALYS, partout ------------------- */
.bouton--principal { background: linear-gradient(180deg, #3559F5, #1332FF); color: #FFFFFF; border-color: transparent; box-shadow: 0 14px 30px -14px rgb(19 50 255 / .85), inset 0 1px 0 rgb(255 255 255 / .25); }
.bouton--principal:hover { background: linear-gradient(180deg, #4868FF, #2342FF); color: #FFFFFF; }

/* --- La FAQ se prolonge dans le pied de page ----------------------------- */
.obj { padding-bottom: clamp(3rem, 6vw, 5rem); }
.pied--v2 { position: relative; overflow: clip; margin: 0; padding: clamp(2rem, 4vw, 3.5rem) 0 0; border: 0; color: #C3CEEE;
	background: radial-gradient(60rem 30rem at 50% 100%, rgb(19 50 255 / .30), transparent 70%), #0B1437; }
.pied--v2::before { content: ""; position: absolute; left: var(--gouttiere); right: var(--gouttiere); top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgb(157 178 255 / .35), transparent); }
.pied__haut { display: grid; gap: 2.5rem; padding-top: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 900px) { .pied__haut { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; } }
.pied__logo { display: inline-flex; align-items: center; gap: .6rem; color: #FFFFFF; font-weight: 800; font-size: 1.35rem; letter-spacing: .08em; text-decoration: none; }
.pied__mono { width: 2.1rem; height: 1.5rem; background: #FFFFFF; -webkit-mask: url("../img/monogramme.svg") no-repeat center / contain; mask: url("../img/monogramme.svg") no-repeat center / contain; }
.pied__signature p { margin: .9rem 0 1.4rem; max-width: 22rem; font-size: 1.02rem; line-height: 1.5; }
.pied__colonnes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.pied__colonnes b { display: block; margin-bottom: .8rem; color: #FFFFFF; font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pied__colonnes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.pied__colonnes a { display: inline-flex; align-items: center; min-height: 44px; color: #C3CEEE; text-decoration: none; font-size: .98rem; }
.pied__colonnes a:hover { color: #FFFFFF; }
.pied__colonnes a:focus-visible, .pied__logo:focus-visible { outline: 2px solid #9DB2FF; outline-offset: 3px; border-radius: .3rem; }
@media (max-width: 560px) { .pied__colonnes { grid-template-columns: 1fr 1fr; } }
.pied--v2 .pied__mention { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid rgb(255 255 255 / .08); font-size: .85rem; color: #8F9BC6; }

/* --- SALYS, tout en bas : blanc et argent, les lettres se forment --------- */
.pied__mot { display: flex; justify-content: center; gap: .02em; margin-top: clamp(1rem, 3vw, 2.5rem); padding-inline: var(--gouttiere); font-size: min(26vw, 30rem); font-weight: 800; line-height: .78; letter-spacing: -.045em; user-select: none; }
.pied__mot span { display: block; padding-bottom: .06em;
	background: linear-gradient(180deg, #FFFFFF 0%, #F1F3F8 30%, #C4CAD6 58%, #8F97A9 82%, #6A7289 100%) 0 0 / 100% 100%, #FFFFFF;
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
	-webkit-mask: linear-gradient(180deg, #000 55%, rgb(0 0 0 / .25) 100%); mask: linear-gradient(180deg, #000 55%, rgb(0 0 0 / .25) 100%); }
/* le reflet argenté qui balaie le mot une fois formé */
.pied__mot { position: relative; }
.pied__mot::after { content: ""; position: absolute; inset: 0 var(--gouttiere); pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .55) 50%, transparent 65%) -150% 0 / 60% 100% no-repeat; mix-blend-mode: soft-light; opacity: 0; }
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.pied__mot { view-timeline: --mot; }
		.pied__mot span { animation: mot-forme linear both; animation-timeline: --mot; animation-range: entry calc(var(--i) * 9%) entry calc(55% + var(--i) * 9%); }
		@keyframes mot-forme {
			from { opacity: 0; transform: translateY(45%) scaleY(1.25) rotateX(55deg); filter: blur(18px); letter-spacing: .2em; }
			60% { opacity: 1; filter: blur(2px); }
			to { opacity: 1; transform: none; filter: none; }
		}
		.pied__mot::after { animation: mot-reflet linear both; animation-timeline: --mot; animation-range: entry 70% entry 100%; }
		@keyframes mot-reflet { 0% { opacity: 0; background-position: -150% 0; } 20% { opacity: 1; } 100% { opacity: .9; background-position: 250% 0; } }
		.pied__mot { perspective: 800px; }
	}
}
/* FAQ → pied : aucun bord (pas de filet, pas de halo coupé) */
.pied--v2::before { display: none; }
.obj { background: radial-gradient(50rem 28rem at 12% 35%, rgb(19 50 255 / .22), transparent 70%), #0B1437; }
.pied--v2 { padding-top: 0; }
/* écrans bas (13 pouces) : la carte « Notre objectif » ne masque plus les visages */
@media (max-height: 820px) and (min-width: 900px) { .duo__objectif { margin-top: -1.5rem; } .duo__p figcaption { bottom: 2.8rem; } }
.hero__actions .bouton.bouton--principal { background: linear-gradient(180deg, #3559F5, #1332FF) !important; color: #FFFFFF !important; }

/* ============================================================================
   FONDATEURS + FAQ : UN SEUL BLOC                                   2026-09-24
   ----------------------------------------------------------------------------
   Paul : « nos têtes sont presque cachées par le bandeau ; "Notre objectif"
   n'est pas assez visible et cache nos noms ; notre section et la FAQ ne
   forment pas une seule section ». → Une enveloppe `.duo-faq` porte UN fond
   (bleu SALYS en haut, qui descend vers le bleu nuit) et monte en carte sur
   la méthode ; les deux sections sont transparentes à l'intérieur. La carte
   « Notre objectif » ne chevauche plus les portraits : elle se pose dessous,
   pleine et lisible, et fait le pont vers la FAQ.
   ========================================================================== */
.duo-faq { position: relative; z-index: 1; isolation: isolate; overflow: clip;
	background:
		radial-gradient(80rem 50rem at 50% 32rem, #3A5BFF 0%, #1332FF 32%, #0B1FA8 58%, rgb(11 20 55 / 0) 85%),
		#0B1437; }
.duo-faq > .duo, .duo-faq > .obj { background: transparent; }
.duo-faq > .duo::after { display: none; }
.duo-faq > .obj::before { -webkit-mask: linear-gradient(180deg, transparent 10%, #000 40%, transparent 85%); mask: linear-gradient(180deg, transparent 10%, #000 40%, transparent 85%); }
@supports (animation-timeline: view()) {
	@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
		.chapitre3 > .duo-faq > .duo { animation: none; box-shadow: none; }
		.chapitre3 > .duo-faq { box-shadow: 0 -30px 60px -30px rgb(11 20 55 / .45); animation: auto-carte linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; }
	}
}
/* les portraits se fondent dans le fond par le bas ; les noms restent lisibles */
.duo-faq .duo__p img { -webkit-mask: linear-gradient(180deg, #000 70%, transparent 100%); mask: linear-gradient(180deg, #000 70%, transparent 100%); }
.duo-faq .duo__p figcaption { bottom: 12%; }
@media (max-height: 820px) and (min-width: 900px) { .duo-faq .duo__p figcaption { bottom: 12%; } }
/* « Notre objectif » : sous les portraits, plein, lisible */
.duo-faq .duo__objectif { margin-top: clamp(1.5rem, 3vw, 2.5rem) !important; display: grid; gap: .6rem; padding: clamp(1.6rem, 3.5vw, 2.6rem) clamp(1.5rem, 4vw, 3.2rem); background: #FFFFFF; border-radius: 1.5rem; box-shadow: 0 30px 70px -30px rgb(3 8 40 / .9), 0 0 0 1px rgb(255 255 255 / .6); }
.duo-faq .duo__objectif-titre { display: inline-flex; align-items: center; gap: .6rem; font-size: .9rem; }
.duo-faq .duo__objectif-titre::before { content: ""; width: 1.6rem; height: 1.1rem; background: #1332FF; -webkit-mask: url("../img/monogramme.svg") no-repeat center / contain; mask: url("../img/monogramme.svg") no-repeat center / contain; }
.duo-faq .duo__objectif p { margin: 0; font-size: clamp(1.25rem, 1rem + 1vw, 1.9rem); line-height: 1.35; color: #47527A; letter-spacing: -.01em; }
.duo-faq .duo__objectif b { color: #1332FF; }
.duo-faq > .duo { padding-bottom: clamp(2rem, 4vw, 3rem); }
.duo-faq > .obj { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 700px) { .duo-faq .duo__p figcaption { bottom: 8%; } }
/* la rangée de la scène a une hauteur fixe : les portraits ne la dépassent plus */
.duo__scene { grid-template-rows: minmax(0, 1fr); align-items: stretch; }
.duo__p { min-height: 0; }
.duo__p img, .duo__p--paul img { height: 100%; max-height: 100%; }
/* chaque nom est posé sur SON portrait, centré, pas au bord de l'écran */
.duo__cadre { position: relative; display: inline-flex; align-items: flex-end; height: 100%; max-width: 100%; }
.duo__cadre img { width: auto !important; height: 100% !important; max-width: 100%; object-fit: contain; }
.duo-faq .duo__p figcaption, .duo-faq .duo__p--paul figcaption, .duo-faq .duo__p--clement figcaption { left: 50%; right: auto; bottom: 10%; transform: translateX(-50%); text-align: center; white-space: nowrap; }
.duo__scene { height: clamp(16rem, min(40vw, 100svh - 20rem), 36rem); }
.duo-faq .duo__p figcaption { background: rgb(11 20 55 / .55); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25), 0 12px 30px -12px rgb(3 8 40 / .8); }
.duo-faq .duo__p figcaption b { color: #FFFFFF; }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
	.duo__p figcaption { animation-range: entry 20% cover 35%; }
} }

/* ============================================================================
   FAQ « signer » + SALYS FINAL, v2                                   2026-09-24
   ----------------------------------------------------------------------------
   Paul : « le g de signer est rogné » ; « SALYS pas collé tout en bas, le A
   coupé ; beaucoup plus spectaculaire, des lettres qui arrivent de tous les
   côtés, de manière smooth ».
   · Texte en dégradé (background-clip) : la boîte doit contenir les jambages
     → padding-bottom sur le span.
   · Le mot : hauteur de ligne 1 (le A n'est plus rogné en haut), puis marge
     négative pour que le PIED des lettres touche le bas de la page.
   · Chaque lettre part d'un côté (--dx/--dy), tourne (--r), grossit (--s),
     floutée ; elles convergent, un éclat blanc part du centre quand le mot
     se forme, puis un reflet argenté le balaie. Piloté par le défilement :
     le mot est formé exactement quand on touche le bas de la page.
   ========================================================================== */
.obj__titre span, .duo__titre span, .vx-h2 span { padding-bottom: .14em; margin-bottom: -.14em; }

.pied--v2 { padding-bottom: 0; }
.pied__mot { position: relative; line-height: 1; margin: clamp(1.5rem, 4vw, 3rem) 0 -.215em; padding: 0 var(--gouttiere); font-size: min(25vw, 29rem); overflow: visible; perspective: 900px; }
.pied__mot span:not(.pied__eclat) { padding: .02em 0 0; line-height: 1; -webkit-mask: none; mask: none;
	background: linear-gradient(180deg, #FFFFFF 0%, #F4F6FA 26%, #C9CFDA 52%, #9AA2B4 74%, #D9DEE8 88%, #7E869A 100%); -webkit-background-clip: text; background-clip: text; }
.pied__eclat { position: absolute; left: 50%; top: 50%; width: 60%; aspect-ratio: 3 / 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgb(255 255 255 / .55), rgb(157 178 255 / .25) 45%, transparent 75%); opacity: 0; filter: blur(20px); }
.pied__mot::after { inset: 0; }
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.pied--v2 { view-timeline: --pied; }
		.pied__mot span:not(.pied__eclat) { animation: mot-venue linear both; animation-timeline: --pied; animation-range: entry 0% entry 100%; will-change: transform, opacity, filter; }
		@keyframes mot-venue {
			0%   { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(var(--s)); filter: blur(24px); }
			25%  { opacity: .35; }
			70%  { opacity: 1; filter: blur(3px); transform: translate(calc(var(--dx) * .06), calc(var(--dy) * .06)) rotate(calc(var(--r) * .08)) scale(1.04); }
			86%  { filter: blur(0); transform: translate(0, 0) rotate(0) scale(.97); }
			100% { opacity: 1; filter: none; transform: none; }
		}
		.pied__eclat { animation: mot-eclat linear both; animation-timeline: --pied; animation-range: entry 72% entry 100%; }
		@keyframes mot-eclat { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 45% { opacity: 1; } 100% { opacity: .35; transform: translate(-50%, -50%) scale(1.6); } }
		.pied__mot::after { animation: mot-reflet linear both; animation-timeline: --pied; animation-range: entry 80% entry 100%; }
	}
}