/* -------------------------------------------------------------------------
   3 Bees Online - feuille de la refonte
   Variables et polices. Rien ne l'appelle encore : elle cohabite avec
   3beesonline.css le temps de l'integration, page par page.
   ------------------------------------------------------------------------- */

/* --- Polices auto-hebergees --------------------------------------------- */
@font-face{
	font-family:'Archivo';
	font-style:normal;
	font-weight:500 800;
	font-stretch:110% 125%;
	font-display:swap;
	src:url('/font/archivo-latin-ext.woff2') format('woff2');
	unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
	font-family:'Archivo';
	font-style:normal;
	font-weight:500 800;
	font-stretch:110% 125%;
	font-display:swap;
	src:url('/font/archivo-latin.woff2') format('woff2');
	unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
	font-family:'Space Grotesk';
	font-style:normal;
	font-weight:400 700;
	font-display:swap;
	src:url('/font/space-grotesk-latin-ext.woff2') format('woff2');
	unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
	font-family:'Space Grotesk';
	font-style:normal;
	font-weight:400 700;
	font-display:swap;
	src:url('/font/space-grotesk-latin.woff2') format('woff2');
	unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
	font-family:'Yellowtail';
	font-style:normal;
	font-weight:400;
	font-display:swap;
	src:url('/font/yellowtail-latin-ext.woff2') format('woff2');
	unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
	font-family:'Yellowtail';
	font-style:normal;
	font-weight:400;
	font-display:swap;
	src:url('/font/yellowtail-latin.woff2') format('woff2');
	unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* --- Variables ----------------------------------------------------------- */

:root{
	/* Marque */
	--honey:#F9BE00;
	--honey-light:#FFE066;
	--honey-deep:#E0A400;
	--ink:#1d1d1b;
	--white:#FFFFFF;

	/* Fonds et accents */
	--night:#12101a;
	--neon:#FF3D8B;
	--aqua:#22E6E6;
	--muted:rgba(255,255,255,.66);
	--line:rgba(255,255,255,.13);

	/* Couleurs de scene : fonds uniquement, hors palette de marque */
	--scene-1:#0c0a14;
	--scene-2:#1b1330;
	--scene-3:#1a1526;
	--scene-4:#241a3a;
	--scene-5:#3b2560;
	--scene-6:#4a2456;
	--scene-7:#6b2f6e;
	--scene-silhouette:#0b0716;
	--soleil-1:#FFF3C4;
	--soleil-2:#FF7A2F;
	--soleil-3:#FF4E7A;

	/* Typographie */
	--disp:'Archivo', system-ui, sans-serif;
	--corps:'Space Grotesk', system-ui, sans-serif;
	--script:'Yellowtail', cursive;

	/* Halos : le design n'utilise pas d'ombres portees dures */
	--halo-cta:0 0 34px rgba(249,190,0,.45);
	--halo-cta-actif:0 0 46px rgba(249,190,0,.6);
	--halo-cta-mini:0 0 20px rgba(249,190,0,.4);
	--halo-envoi:0 0 24px rgba(249,190,0,.3);
	--halo-panneau:0 24px 60px rgba(0,0,0,.35);
	--halo-focus:0 0 0 3px rgba(249,190,0,.16), 0 0 24px rgba(249,190,0,.2);

	/* Rythme */
	--courbe:cubic-bezier(.2,.7,.2,1);
	--pad-section:clamp(64px,10vh,120px) clamp(18px,5vw,80px);
	--largeur:1180px;
	--largeur-galerie:1320px;
}

/* Hexagones : deux orientations, a ne pas confondre.
   pointes haut/bas   -> badges numerotes, puces decoratives
   pointes gauche/droite -> hexagones de stats et de references */
.hexV{clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.hexH{clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}

/* Yellowtail : le clip depasse la boite, sinon les jambages du dernier
   glyphe sont coupes. Ne pas ramener a inset(0 0 0 0). */
@keyframes markIn{
	0%{clip-path:inset(0 100% 0 0)}
	100%{clip-path:inset(0 0 0 0)}
}

/* Animations coupees : le cycle jour/nuit doit rester sur sa premiere image,
   soleil haut et lune sous l horizon, sinon les deux astres cohabitent. */
@media (prefers-reduced-motion:reduce){
	.soleil{transform:translateY(9%)}
	.lune-pivot{transform:rotate(-122deg)}
	.lune{transform:rotate(122deg)}
}
@media (prefers-reduced-motion:reduce){
	*{animation:none !important;transition-duration:.01ms !important}
	[data-reveal],.rise{opacity:1 !important;transform:none !important}
	/* Ces valeurs se relaient par animation : figees, elles se superposent. */
	.file-cpt span:not(:first-child),
	.briques-stack span:not(:first-child),
	.briques-cpt span:not(:first-child),
	.compa2-stack span:not(:first-child),
	.compa2-chrono span:not(:first-child),
	.compa2-cpt span:not(:first-child),
	.sms-taux span:not(:first-child),
	.sms-usage span:not(:first-child),
	.redac-type span:not(:first-child),
	.redac-note span:not(:first-child),
	.saas-revenu span:not(:first-child),
	.repar-etat span:not(:first-child),
	.vit-etat span:not(:first-child),
	.vit-note span:not(:first-child),
	.rep-etat span:not(:first-child),
	.serp-1er .rk span:not(:first-child){display:none}
}


/* =========================================================================
   CHROME PARTAGE : en-tete fixe, overlay de menu, pied de page.
   Identique sur toutes les pages, genere par top.mod.php et bot.mod.php.
   ========================================================================= */

body.v2{
	background:var(--scene-1);
	color:var(--white);
	font-family:var(--corps);
	-webkit-font-smoothing:antialiased;
	margin:0;
}
body.v2 h1,body.v2 h2,body.v2 h3,body.v2 h4{text-wrap:pretty}
/* Remise a zero des liens. Elle porte sur body.v2 pour passer devant les
   regles de la feuille precedente : toute couleur de lien posee ensuite
   doit donc etre au moins aussi specifique. */
body.v2 a{color:inherit;text-decoration:none}
body.v2 img{max-width:100%}

/* --- En-tete fixe -------------------------------------------------------- */

#hdr{
	position:fixed;top:0;left:0;right:0;z-index:200;
	/* Trois colonnes dont les deux laterales font la meme largeur : le
	   bouton central tombe au milieu de la page, pas au milieu de la place
	   qui reste entre le logo et le bouton de droite. */
	display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
	padding:16px clamp(16px,3vw,40px);
	background:rgba(18,16,26,.72);
	backdrop-filter:blur(18px);
	-webkit-backdrop-filter:blur(18px);
	border-bottom:1px solid var(--line);
}
#hdrLogo{display:block;height:44px;width:auto;filter:drop-shadow(0 0 14px rgba(249,190,0,.45))}

#hdr > a:first-child{justify-self:start}
#hdr .cta-mini{justify-self:end}
#burgerBtn{
	display:flex;align-items:center;gap:12px;
	padding:11px 22px 11px 18px;
	background:rgba(255,255,255,.05);
	border:1px solid var(--line);border-radius:40px;cursor:pointer;
	font-family:var(--disp);font-size:12.5px;font-weight:700;
	letter-spacing:.14em;text-transform:uppercase;color:var(--white);
	transition:border-color .25s ease,box-shadow .25s ease;
}
#burgerBtn:hover,#burgerBtn:focus-visible{border-color:var(--honey);box-shadow:0 0 20px rgba(249,190,0,.3)}
#burgerIcon{position:relative;display:block;width:20px;height:14px;flex:none}
#burgerIcon span{
	position:absolute;left:0;width:100%;height:2px;border-radius:2px;
	transition:transform .35s cubic-bezier(.6,0,.2,1),top .35s ease,opacity .2s ease;
}
#burgerIcon span:nth-child(1){top:0;background:var(--honey-light)}
#burgerIcon span:nth-child(2){top:6px;background:var(--honey)}
#burgerIcon span:nth-child(3){top:12px;background:#FF7A2F}
#burgerBtn[aria-expanded="true"] #burgerIcon span:nth-child(1){top:6px;transform:rotate(45deg);background:var(--white)}
#burgerBtn[aria-expanded="true"] #burgerIcon span:nth-child(2){opacity:0}
#burgerBtn[aria-expanded="true"] #burgerIcon span:nth-child(3){top:6px;transform:rotate(-45deg);background:var(--white)}

.cta-mini{
	display:inline-flex;align-items:center;padding:12px 22px;
	background:var(--honey);color:var(--ink) !important;
	font-family:var(--disp);font-weight:700;font-size:12.5px;
	letter-spacing:.1em;text-transform:uppercase;border-radius:40px;
	box-shadow:var(--halo-cta-mini);
	transition:transform .25s ease,box-shadow .25s ease;
}
.cta-mini:hover{transform:translateY(-2px);box-shadow:var(--halo-cta-actif)}

/* --- Overlay de menu ----------------------------------------------------- */

#menuOverlay{
	position:fixed;inset:0;z-index:190;
	display:flex;flex-direction:column;justify-content:center;
	padding:120px clamp(22px,8vw,120px) 60px;
	background:linear-gradient(160deg,rgba(18,16,26,.97),rgba(36,26,58,.97) 60%,rgba(59,37,96,.97));
	backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
	opacity:0;visibility:hidden;pointer-events:none;
	transition:opacity .35s var(--courbe),visibility .35s;
}
#menuOverlay[data-ouvert]{opacity:1;visibility:visible;pointer-events:auto}
.scanlines{
	position:absolute;inset:0;pointer-events:none;
	background:repeating-linear-gradient(to bottom,rgba(255,255,255,.045) 0 1px,transparent 1px 4px);
}
#overlayNav{position:relative;display:flex;flex-direction:column;gap:clamp(2px,.8vh,10px)}
.mlink{display:flex;align-items:baseline;gap:18px}
.mnum{
	font-family:var(--disp);font-size:13px;font-weight:700;color:var(--honey);
	min-width:36px;transition:color .25s ease;
}
.mtxt{
	font-family:var(--disp);font-weight:800;font-size:clamp(26px,4.8vw,58px);
	line-height:1.08;text-transform:uppercase;color:var(--white);
	transition:color .25s ease,transform .35s var(--courbe);
}
.mlink:hover .mtxt,.mlink:focus-visible .mtxt{color:var(--honey);transform:translateX(12px)}
.mlink:hover .mnum,.mlink:focus-visible .mnum{color:var(--neon)}
.mlink.actif .mtxt{color:var(--honey)}

[data-mi]{opacity:0;transform:translateY(22px);transition:opacity .5s var(--courbe),transform .5s var(--courbe)}
#menuOverlay[data-ouvert] [data-mi]{opacity:1;transform:none}
#menuOverlay[data-ouvert] [data-mi]:nth-child(1){transition-delay:.07s}
#menuOverlay[data-ouvert] [data-mi]:nth-child(2){transition-delay:.125s}
#menuOverlay[data-ouvert] [data-mi]:nth-child(3){transition-delay:.18s}
#menuOverlay[data-ouvert] [data-mi]:nth-child(4){transition-delay:.235s}
#menuOverlay[data-ouvert] [data-mi]:nth-child(5){transition-delay:.29s}
#menuOverlay[data-ouvert] [data-mi]:nth-child(6){transition-delay:.345s}
#menuOverlay[data-ouvert] [data-mi]:nth-child(7){transition-delay:.4s}
.menu-libelle{
	font-family:var(--disp);font-size:11.5px;font-weight:700;letter-spacing:.24em;
	text-transform:uppercase;color:var(--aqua);margin-bottom:clamp(18px,3vh,34px);
}
.menu-pied{
	margin-top:clamp(26px,4vh,46px);display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
	font-size:13.5px;color:var(--muted);
}
.menu-pied .sep{width:4px;height:4px;border-radius:50%;background:var(--honey);flex:none}

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

.pied{
	background:var(--scene-1);border-top:1px solid var(--line);
	padding:clamp(50px,8vh,90px) clamp(18px,5vw,80px) 32px;
}
.pied-grille{
	max-width:var(--largeur);margin:0 auto;
	display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:36px 30px;
}
.pied img{display:block;height:40px;width:auto;margin-bottom:16px}
.pied-marque{display:inline-block;margin-bottom:14px;line-height:0}
.pied-marque img{display:block;width:68px;height:68px;border-radius:10px}
@media (max-width:560px){.pied-marque img{width:58px;height:58px}}
.pied-adresse{font-size:14px;line-height:1.75;color:var(--muted);margin:0}
.pied-adresse strong{color:var(--white);font-weight:600}
.pied-fam{
	font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.16em;
	text-transform:uppercase;color:var(--honey);margin:0 0 14px;
}
.pied-fam+ul+.pied-fam{margin-top:26px}
.pied ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14px}
.fl{color:var(--muted);transition:color .2s ease}
.fl:hover,.fl:focus-visible{color:var(--honey)}
.pied-bas{
	max-width:var(--largeur);margin:clamp(34px,5vh,56px) auto 0;padding-top:22px;
	border-top:1px solid var(--line);
	display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;
	font-size:12.5px;color:var(--muted);
}
.pied-bas nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.pied-sep{flex:none}

/* Retour en haut : l ancien bouton etait un carre a coins arrondis avec une
   fleche en image. Alveole miel et fleche tracee, halo plutot qu ombre. */
body.v2 #returnOnTop{
	display:none;position:fixed;right:clamp(14px,2vw,28px);bottom:clamp(14px,3vh,32px);
	width:46px;height:52px;padding:0;border:0;border-radius:0;z-index:180;cursor:pointer;
	background:var(--honey);
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
	filter:drop-shadow(0 0 14px rgba(249,190,0,.45));
	transition:transform .3s var(--courbe),filter .3s ease;
}
body.v2 #returnOnTop svg{
	position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block;
}
body.v2 #returnOnTop:hover,body.v2 #returnOnTop:focus-visible{
	background:var(--honey-light);transform:translateY(-3px);
	filter:drop-shadow(0 0 22px rgba(249,190,0,.7));
}
body.v2 #returnOnTop:focus-visible{outline:2px solid var(--white);outline-offset:3px}

@media (max-width:760px){ #hdr{padding:12px 16px} }
@media (max-width:560px){
	#hdrLogo{height:36px}
	#burgerLabel{display:none}
	#burgerBtn{padding:11px 14px}
}
@media (max-width:440px){ .cta-mini{padding:10px 16px;font-size:11.5px} }

/* En colonne unique, les respirations calculees pour le grand ecran font
   defiler dans le vide : elles sont resserrees. */
@media (max-width:640px){
	:root{--pad-section:clamp(38px,6vh,58px) clamp(18px,5vw,80px)}
	.hero{padding-top:clamp(92px,13vh,118px);padding-bottom:clamp(34px,5vh,52px)}
	.hero-court{padding-top:clamp(88px,12vh,110px);padding-bottom:clamp(26px,4vh,40px)}
	.sec-2col{gap:clamp(22px,4vw,34px)}
	.sec-intro{margin-bottom:clamp(18px,3vh,26px)}
	.grille-cartes,.faq-liste{margin-top:clamp(18px,3vh,26px)}
	.actions{margin-top:20px}
	.actions.droite,.actions.centre{margin-top:clamp(20px,3vh,28px)}
	#hdr .cta-mini{white-space:nowrap}
}


/* =========================================================================
   GABARIT DE PAGE DE CONTENU
   Hero deux colonnes, sections alternees, bandeau de fermeture, contact.
   Sert aux pages 77, SEO, SMS, IA et aux futures pages geographiques.
   ========================================================================= */

.sec{position:relative;padding:var(--pad-section);overflow:hidden}
.sec-in{position:relative;max-width:var(--largeur);margin:0 auto}
.sec-2col{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
	gap:clamp(34px,5vw,70px);align-items:center;
}
.hero .sec-2col{grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:clamp(34px,5vw,72px)}
.sec-2col.inverse > *:first-child{order:2}

.surtitre{
	display:inline-flex;align-items:center;gap:9px;
	font-family:var(--disp);font-weight:700;font-size:11.5px;
	letter-spacing:.24em;text-transform:uppercase;color:var(--aqua);
	margin-bottom:0;
}
.fil{
	display:flex;align-items:center;gap:9px;flex-wrap:wrap;
	font-size:12.5px;color:var(--muted);margin-bottom:22px;
}
.fil .fl:hover{color:var(--honey)}
.fil > span{color:var(--white);font-weight:600}

.t-script{
	/* inline-block et padding : le halo et le trace de la police debordent
	   de la boite, sans marge interne les jambages sont rognes. */
	display:inline-block;font-family:var(--script);font-weight:400;
	font-size:clamp(44px,8vw,104px);line-height:.9;color:var(--honey);
	padding:.06em .16em .18em .1em;
	/* Meme clignotement de tube neon que le mot d accroche de l accueil,
	   a la place du halo qui respire des maquettes de pages de contenu. */
	animation:markIn 1s .3s cubic-bezier(.7,0,.2,1) both,
	          neonFlicker 7s 1.6s infinite;
}
.t-disp{
	display:block;margin-top:-.06em;font-family:var(--disp);font-weight:800;
	font-size:clamp(26px,4.6vw,60px);line-height:1.04;
	text-transform:uppercase;letter-spacing:.02em;color:var(--white);
}
h1,h2{margin:0}
.h2{font-family:var(--disp);font-weight:800;font-size:clamp(24px,3.4vw,44px);
	line-height:1.1;text-transform:uppercase;color:var(--white);
	text-align:left;padding:0;margin:16px 0 20px}
.h2 span{color:var(--honey);text-shadow:0 0 26px rgba(249,190,0,.5)}

.txt{font-size:clamp(15.5px,1.7vw,18.5px);line-height:1.68;color:var(--muted);margin:0 0 18px;max-width:60ch}
/* Les maquettes posent un blanc franc entre le titre et le chapo. */
h1+.txt{margin-top:24px}
.bandeau h1+.txt{margin-top:22px}
.txt strong{color:var(--white);font-weight:600}
body.v2 .txt a{color:var(--honey)}
/* Un mot en gras place dans un lien doit garder la couleur du lien, la
   regle des paragraphes le repassait en blanc. */
body.v2 .txt a strong{color:inherit}
body.v2 .txt a:hover{color:var(--honey-light)}

/* --- Boutons ------------------------------------------------------------- */

.cta{
	display:inline-flex;align-items:center;gap:10px;padding:17px 34px;
	background:var(--honey);color:var(--ink) !important;
	font-family:var(--disp);font-weight:800;font-size:clamp(12px,1.3vw,14.5px);
	letter-spacing:.12em;text-transform:uppercase;border-radius:44px;
	box-shadow:var(--halo-cta);transition:transform .3s ease,box-shadow .3s ease;
}
.cta:hover{transform:translateY(-3px) scale(1.02);box-shadow:var(--halo-cta-actif)}
.chip{
	display:inline-flex;align-items:center;padding:10px 18px;
	border:1px solid rgba(255,255,255,.24);border-radius:40px;
	font-size:13px;font-weight:500;color:var(--white);background:rgba(12,10,20,.4);
	transition:border-color .25s ease,background .25s ease;
}
.chip:hover{border-color:var(--honey);background:rgba(249,190,0,.08)}
.chip.fort{border-color:rgba(249,190,0,.5);background:rgba(249,190,0,.16);color:var(--honey-light);font-weight:600}

/* Dans le hero, le bouton secondaire est a la taille du bouton principal :
   ce n est plus une etiquette de contenu mais une action. */
.hero .actions .chip{
	padding:16px 30px;border-radius:44px;border-color:rgba(255,255,255,.3);
	background:rgba(12,10,20,.5);
	font-family:var(--disp);font-weight:700;font-size:clamp(12px,1.3vw,14px);
	letter-spacing:.1em;text-transform:uppercase;
}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}

/* --- Listes a puce hexagonale -------------------------------------------- */

.liste-hex{list-style:none;margin:24px 0 18px;padding:0;display:grid;gap:12px}
.liste-hex li{display:flex;align-items:center;gap:11px;font-size:15.5px}
/* La maquette de l accueil donne a cette liste ses propres valeurs. */
.accueil .liste-hex li{gap:12px;font-size:clamp(15px,1.6vw,17px)}
/* Sans flex:none la puce est comprimee des que le libelle passe sur deux
   lignes : elle n a alors plus la meme taille que les autres. */
.liste-hex li svg,.surtitre svg,.badge-anciennete svg{flex:none}

/* --- Fonds de scene ------------------------------------------------------ */

.hero{background:linear-gradient(180deg,#12101a 0%,#1b1330 46%,#2c1f48 100%);
	padding:clamp(120px,17vh,190px) clamp(18px,5vw,80px) clamp(60px,9vh,110px)}
/* Pages legales : le hero n a pas de colonne droite, il n a pas besoin
   de la meme hauteur. */
.hero-court{padding-top:clamp(110px,15vh,150px);padding-bottom:clamp(40px,6vh,70px)}
.txt-centre{max-width:760px}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
	background:linear-gradient(90deg,transparent,rgba(249,190,0,.6) 30%,rgba(255,255,255,.75) 50%,rgba(249,190,0,.6) 70%,transparent)}
.fond-a{background:linear-gradient(180deg,#2c1f48,#1a1526 70%,#1a1526)}
.fond-b{background:#1a1526}
.fond-c{background:linear-gradient(180deg,#1a1526,#241a3a 60%,#1a1526)}
.fond-d{background:linear-gradient(180deg,#12101a,#241a3a 55%,#4a2456 130%)}

.voile{position:absolute;inset:0;pointer-events:none;
	background:radial-gradient(60% 55% at 40% 45%,rgba(12,10,20,.55),transparent 70%)}
.grille-perspective{
	position:absolute;left:0;right:0;bottom:0;height:38%;pointer-events:none;opacity:.6;
	background:
		repeating-linear-gradient(to right,rgba(249,190,0,.72) 0 1px,transparent 1px 60px),
		/* Le trait est place en fin de tuile, et la tuile est calee sur le bas :
		   la derniere ligne tombe ainsi pile sur le filet de separation, quelle
		   que soit la hauteur de la fenetre, au lieu de s en approcher au hasard. */
		repeating-linear-gradient(to bottom,transparent 0 41px,rgba(249,190,0,.55) 41px 42px);
	background-size:auto auto,100% 42px;
	background-position:0 0,0 100%;
	transform:perspective(340px) rotateX(62deg);transform-origin:bottom;
	/* Seul le lointain s efface : sans cela le trace est aussi dense pres de
	   la ligne de fuite qu au premier plan. */
	-webkit-mask-image:linear-gradient(to bottom,transparent,#000 30%);
	mask-image:linear-gradient(to bottom,transparent,#000 30%);
}


/* --- Cartes de resultats -------------------------------------------------- */

.res-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(16px,2.4vw,26px)}
.resCard{
	display:flex;flex-direction:column;gap:14px;padding:30px 26px;
	border:1px solid var(--line);border-radius:20px;
	background:linear-gradient(155deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
}
.resCard .client{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.statNum{font-family:var(--disp);font-weight:800;font-size:clamp(24px,3vw,34px);color:var(--honey);line-height:1}
.resCard .unite{font-size:13px;color:var(--muted)}

/* --- Emplacements d images ----------------------------------------------- */

.slot{
	position:relative;aspect-ratio:4/3;border:1px solid var(--line);border-radius:20px;
	background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
	overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;
	gap:12px;text-align:center;padding:0 22px;
}

/* --- Reveals -------------------------------------------------------------- */

[data-reveal]{opacity:0;transform:translateY(32px);
	transition:opacity .8s var(--courbe),transform .8s var(--courbe)}
[data-reveal].vu{opacity:1;transform:none}

[data-pause] *{animation-play-state:paused !important}

@media (max-width:900px){
	.sec-2col{grid-template-columns:1fr}
	.sec-2col.inverse > *:first-child{order:0}
}


/* --- Formulaire de contact ------------------------------------------- */

.form-contact{
	/* La feuille precedente impose a tous les form une largeur en pourcentage
	   et des marges verticales. Sur les gabarits pas encore refondus, le titre
	   qui precede est positionne par-dessus : la place se degage en padding,
	   une marge etant absorbee par le conteneur. */
	width:100%;max-width:640px;margin:0 auto;
	padding:150px clamp(24px,3vw,38px) clamp(24px,3vw,38px);
	border:1px solid var(--line);border-radius:24px;
	background:linear-gradient(155deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
	-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
	box-shadow:var(--halo-panneau);
}
.sec .form-contact{max-width:none;margin:0;padding-top:clamp(24px,3vw,38px)}
.form-ligne{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.form-champ{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.form-ligne .form-champ{margin-top:0}

.form-lib{
	font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.1em;
	text-transform:uppercase;color:var(--muted);
}
.form-lib em{font-style:normal;opacity:.7;text-transform:none;letter-spacing:.04em}

.fld{
	height:50px;padding:0 15px;border:1px solid var(--line);border-radius:12px;
	background:rgba(0,0,0,.28);color:var(--white);
	font-family:var(--corps);font-size:15px;width:100%;
	transition:border-color .25s ease,box-shadow .25s ease;
}
textarea.fld{height:auto;padding:14px 15px;line-height:1.6;resize:vertical;min-height:130px}
.fld::placeholder{color:var(--muted)}
.fld:focus{outline:none;border-color:var(--honey);box-shadow:var(--halo-focus)}
.fld[aria-invalid="true"]{border-color:var(--neon)}

.err{min-height:15px;font-size:12px;line-height:15px;color:var(--neon)}
.oblig{margin-left:7px;vertical-align:middle;position:relative;top:-1px}
.form-note svg{vertical-align:middle;position:relative;top:-1px;margin-right:3px}

.form-reserve{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.form-envoi{
	margin-top:20px;width:100%;height:56px;
	display:flex;align-items:center;justify-content:center;gap:10px;
	border:none;border-radius:14px;background:var(--honey);color:var(--ink);
	font-family:var(--disp);font-weight:800;font-size:14px;letter-spacing:.12em;
	text-transform:uppercase;cursor:pointer;box-shadow:var(--halo-envoi);
	transition:transform .25s ease,background .3s ease;
}
.form-envoi:hover{background:var(--honey-light);transform:translateY(-2px)}
.form-envoi:active{transform:translateY(0)}
.form-envoi[disabled]{opacity:.6;cursor:default;transform:none}

.form-note{margin:14px 0 0;font-size:11.5px;line-height:1.55;color:var(--muted)}

@media (max-width:600px){
	.form-contact{padding:20px}
	.form-ligne{grid-template-columns:1fr}
}


/* --- Page SEO : le resultat remonte a la premiere position ---------------- */

/* Chassis commun aux panneaux animes du hero, un par page. */
.panneau-demo{
	position:relative;justify-self:center;width:min(100%,420px);aspect-ratio:4/3.2;
	border:1px solid var(--line);border-radius:18px;
	background:linear-gradient(155deg,rgba(255,255,255,.07),rgba(255,255,255,.015));
	box-shadow:var(--halo-panneau);
	/* Contexte d empilement propre au panneau : le decor peut alors passer
	   sous la scene sans retomber derriere le fond de la section. */
	isolation:isolate;
}
/* Le decor passe sous le contenu du panneau : sans z-index, deux elements
   en position absolue se departagent par l ordre du DOM, et celui-ci est
   ecrit en dernier. */
.panneau-hexa{position:absolute;right:-26px;bottom:-30px;width:96px;height:106px;
	opacity:.5;z-index:-1;
	/* Le panneau est translucide : passer dessous ne suffit pas a le cacher,
	   le trace se verrait au travers. La part qui recouvre le panneau est
	   donc decoupee. Le hors-cadre commence a 70px a droite et 76px en bas,
	   ce que valent les 26px et 30px de debordement sur une boite 96x106. */
	clip-path:polygon(70px 0, 100% 0, 100% 100%, 0 100%, 0 76px, 70px 76px)}
.serp-lignes{
	position:absolute;inset:0;opacity:.45;border-radius:18px;
	background-image:repeating-linear-gradient(to bottom,rgba(249,190,0,.12) 0 1px,transparent 1px 34px);
}
.serp-barre{
	position:absolute;left:0;right:0;top:0;height:40px;
	display:flex;align-items:center;gap:10px;padding:0 14px;
	border-bottom:1px solid var(--line);background:rgba(12,10,20,.5);
}
.serp-req{
	flex:1;height:10px;border-radius:5px;
	background:linear-gradient(90deg,rgba(255,255,255,.22) 0 62%,transparent 62%);
	animation:typeQuery 8s ease-in-out infinite;
}
.serp-liste{position:absolute;left:16px;right:16px;top:56px;bottom:16px;display:flex;flex-direction:column;gap:8px}

.serp,.serp-1er{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px}
.serp{background:rgba(255,255,255,.05);animation:serpRow 8s ease-in-out infinite}
.serp-1er{
	position:relative;border:1px solid rgba(249,190,0,.45);
	background:linear-gradient(100deg,rgba(249,190,0,.24),rgba(249,190,0,.07));
	box-shadow:0 0 24px rgba(249,190,0,.28);
	animation:climb 8s cubic-bezier(.5,0,.3,1) infinite;
}
.rk{
	flex:none;width:24px;height:27px;display:grid;place-items:center;
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
	background:rgba(255,255,255,.12);
	font-family:var(--disp);font-size:11px;font-weight:800;color:rgba(255,255,255,.6);
}
.serp-1er .rk{position:relative;width:26px;height:29px;background:var(--honey);font-size:12px;color:var(--ink)}
.serp-1er .rk span{position:absolute}
.serp-1er .rk span:nth-child(1){animation:d4 8s linear infinite}
.serp-1er .rk span:nth-child(2){animation:d3 8s linear infinite}
.serp-1er .rk span:nth-child(3){animation:d2 8s linear infinite}
.serp-1er .rk span:nth-child(4){animation:d1 8s linear infinite}

.serp-txt{display:flex;flex-direction:column;gap:5px;flex:1}
.serp-txt i{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.24)}
.serp-txt i+i{height:5px;border-radius:3px;background:rgba(255,255,255,.12)}
.serp-1er .serp-txt i{background:rgba(255,255,255,.6)}
.serp-1er .serp-txt i+i{background:rgba(249,190,0,.55)}


@keyframes climb{
	0%,16%{transform:translateY(0)}
	34%,48%{transform:translateY(calc(-100% - 8px))}
	62%,76%{transform:translateY(calc(-200% - 16px))}
	90%,97%{transform:translateY(calc(-300% - 24px))}
	100%{transform:translateY(0)}
}
@keyframes serpRow{0%,16%{opacity:.85}90%,97%{opacity:.4}100%{opacity:.85}}
@keyframes d4{0%,14%{opacity:1}18%,100%{opacity:0}}
@keyframes d3{0%,30%{opacity:0}34%,46%{opacity:1}50%,100%{opacity:0}}
@keyframes d2{0%,58%{opacity:0}62%,74%{opacity:1}78%,100%{opacity:0}}
@keyframes d1{0%,86%{opacity:0}90%,97%{opacity:1}100%{opacity:0}}
@keyframes typeQuery{0%,8%{width:12%}26%,100%{width:100%}}

/* --- Cartes de demarche --------------------------------------------------- */

.sec-intro{max-width:none}
/* Le titre garde toute la largeur, sinon un mot isole part sur une deuxieme
   ligne. L accroche s en approche sans l atteindre : au-dela, la ligne
   devient trop longue a lire. */
.sec-intro .txt{max-width:950px}
.surtitre.rose{color:var(--neon)}

.demarche-grille{
	margin-top:clamp(32px,5vh,56px);display:grid;
	grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(16px,2.4vw,26px);
}
.pcard{
	display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:28px 24px;
	border:1px solid var(--line);border-radius:20px;
	background:linear-gradient(155deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
	transition:transform .4s var(--courbe),box-shadow .4s ease,border-color .3s ease;
}
.pcard:hover{transform:translateY(-8px);border-color:rgba(249,190,0,.5);box-shadow:0 0 42px rgba(249,190,0,.3)}
.pcard.premier{background:linear-gradient(155deg,rgba(249,190,0,.14),rgba(255,255,255,.02))}
.pcard-num{
	width:46px;height:52px;display:grid;place-items:center;
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
	background:rgba(249,190,0,.16);
	font-family:var(--disp);font-weight:800;font-size:16px;color:var(--honey);
}
.pcard.premier .pcard-num{background:rgba(249,190,0,.2)}
.pcard-titre{font-family:var(--disp);font-weight:800;font-size:clamp(16px,1.6vw,19px);text-transform:uppercase;line-height:1.14}
.pcard-txt{font-size:14.5px;line-height:1.6;color:var(--muted)}

/* Le H1 de la page SEO porte une expression plus longue : la maquette y
   descend les deux tailles pour garder la meme silhouette. */
/* Variante du balayage dont le clip deborde la boite : indispensable des
   que le mot porte un jambage ou une cedille, sinon le bas du glyphe et
   son halo sont rognes. */
@keyframes markInLarge{
	0%{clip-path:inset(-25% 100% -25% -8%)}
	100%{clip-path:inset(-25% -14% -25% -8%)}
}
@keyframes markInNeon{
	0%{clip-path:inset(-45% 100% -45% -12%)}
	100%{clip-path:inset(-45% -20% -45% -12%)}
}
.t-script.debord{animation-name:markInLarge,neonFlicker}
.referencement-naturel-seo .t-script{font-size:clamp(40px,7.4vw,98px)}
/* "Contactez-nous" est le mot script le plus long du site : a la taille
   commune il passe sur deux lignes, padding compris. */
.contact-3beesonline .t-script{font-size:clamp(38px,7.5vw,100px)}
.referencement-naturel-seo .t-disp{font-size:clamp(26px,4.6vw,60px)}

/* --- Decor : hexagones flottants ----------------------------------------- */

.decor{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.decor i{
	position:absolute;left:var(--l);top:var(--t);
	width:var(--s);height:calc(var(--s) * 1.1);opacity:var(--o);
	animation:drift 11s ease-in-out var(--d) infinite;
}
.decor i svg{display:block;width:100%;height:100%}
@keyframes drift{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-14px) rotate(7deg)}}

/* --- Emplacements d images ------------------------------------------------ */

.slot-fig{margin:0}
/* Sur la maquette, le visuel demarre a mi-hauteur du titre. Centre sur la
   colonne de texte, il tombait bien plus bas. */
.sec-2col > .slot-fig,.sec-2col > .slot-img,.sec-2col > .carte{
	align-self:start;margin-top:clamp(52px,8vh,126px)}
@media (max-width:640px){
	.sec-2col > .slot-fig,.sec-2col > .slot-img,.sec-2col > .carte{margin-top:0}
}
.slot::before{
	content:"";position:absolute;inset:0;opacity:.55;border-radius:inherit;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='30'%3E%3Cpolygon points='13,1 25,8 25,22 13,29 1,22 1,8' fill='none' stroke='%23F9BE00' stroke-opacity='.3' stroke-width='1'/%3E%3C/svg%3E");
}
.slot-lib{
	position:relative;font-family:var(--disp);font-size:11.5px;font-weight:700;
	letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72);
}
.slot-note{position:relative;font-size:11.5px;color:rgba(255,255,255,.45)}
.slot svg{position:relative}
.slot-legende{margin-top:12px;font-size:12.5px;color:var(--muted)}
/* Visuel pose a la place d un emplacement : meme cadre que lui. */
.slot-img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
	border:1px solid var(--line);border-radius:20px;
	box-shadow:0 18px 44px rgba(0,0,0,.32)}

/* --- Page creation : la page blanche qui se construit --------------------- */

.wire-grille{
	position:absolute;inset:0;opacity:.5;border-radius:18px;
	background-image:repeating-linear-gradient(to right,rgba(249,190,0,.14) 0 1px,transparent 1px 34px),
	                 repeating-linear-gradient(to bottom,rgba(249,190,0,.14) 0 1px,transparent 1px 34px);
}
.wire-barre{
	position:absolute;left:0;right:0;top:0;height:34px;
	display:flex;align-items:center;gap:7px;padding:0 14px;
	border-bottom:1px solid var(--line);background:rgba(12,10,20,.5);
}
.wire-pt{width:9px;height:10px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.wire-pt:nth-child(1){background:var(--honey)}
.wire-pt:nth-child(2){background:var(--neon);opacity:.7}
.wire-pt:nth-child(3){background:var(--aqua);opacity:.6}
.wire-url{margin-left:10px;height:9px;flex:1;max-width:150px;border-radius:5px;background:rgba(255,255,255,.1)}

.wire-blocs{
	position:absolute;left:18px;right:18px;top:52px;bottom:18px;
	display:grid;grid-template-columns:1fr 1fr 1fr;grid-auto-rows:minmax(0,1fr);gap:9px;
}
.blk{border-radius:8px;background:rgba(255,255,255,.09);animation:blockIn 7s ease-in-out infinite}
.blk.large{grid-column:span 3;background:linear-gradient(100deg,rgba(249,190,0,.5),rgba(249,190,0,.18))}
.blk.haut{grid-column:span 2;grid-row:span 2;background:rgba(255,255,255,.11)}
.blk.aqua{background:rgba(34,230,230,.16)}
.blk.rose{background:rgba(255,61,139,.16)}
.blk.miel{background:linear-gradient(100deg,rgba(249,190,0,.42),rgba(249,190,0,.14))}

.wire-scan{
	position:absolute;left:0;right:0;top:34px;height:60px;pointer-events:none;
	background:linear-gradient(to bottom,transparent,rgba(249,190,0,.16),transparent);
	animation:scanSweep 7s ease-in-out infinite;
}

@keyframes blockIn{
	0%,4%{opacity:0;transform:translateY(10px) scale(.97)}
	12%,84%{opacity:1;transform:none}
	94%,100%{opacity:0;transform:translateY(-6px) scale(.99)}
}
@keyframes scanSweep{0%,6%{transform:translateY(0);opacity:0}14%{opacity:1}46%{transform:translateY(230px);opacity:0}100%{transform:translateY(230px);opacity:0}}

.resIcone{
	align-self:flex-start;width:46px;height:52px;display:grid;place-items:center;
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
	background:rgba(249,190,0,.2);
}
.resCard .client{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--white)}
.resCard .statNum{font-size:clamp(34px,4.4vw,52px);text-shadow:0 0 22px rgba(249,190,0,.5)}
.resCard .unite{font-size:13.5px;color:var(--muted)}
.slot-plein{aspect-ratio:auto;height:100%;min-height:200px}

/* Section contact : les colonnes ne sont pas centrees verticalement, et
   l accroche est plus etroite que le reste des textes. */
#contact .sec-2col{align-items:start}
#contact .txt{max-width:460px}
/* Le titre le plus long du bloc tient sur une seule ligne. */
#contact .h2{font-size:clamp(24px,2.7vw,36px)}

.coord{margin-top:26px;display:flex;flex-direction:column;gap:13px;font-size:15px}
.coord span{display:flex;align-items:center;gap:11px}
.coord svg{flex:none}
body.v2 .coord a{color:var(--white)}
body.v2 .coord a:hover{color:var(--honey)}
.coord-note{color:var(--muted)}
/* Sur la page contact les coordonnees sont un contenu, pas une signature. */
.coord.coord-large{margin-top:30px;gap:15px;font-size:16px}
.coord.coord-large a{color:var(--honey)}
.coord.coord-large a:hover{color:var(--honey-light)}

/* =========================================================================
   Accueil : scene Miami, cycle jour/nuit, mosaique
   ========================================================================= */

.hero-home{
	position:relative;min-height:100svh;display:flex;flex-direction:column;
	align-items:center;justify-content:center;
	padding:120px clamp(18px,4vw,60px) 90px;overflow:hidden;isolation:isolate;
	background:linear-gradient(180deg,#0c0a14 0%,#1b1330 38%,#3b2560 66%,#6b2f6e 82%,#12101a 100%);
}
.etoiles{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.85}

/* Le ciel est coupe a la ligne d horizon : c est ce qui fait disparaitre les
   astres derriere le sol au lieu de les laisser flotter par-dessus. */
.ciel{position:absolute;left:0;right:0;top:0;bottom:38%;z-index:1;pointer-events:none;overflow:hidden}

.soleil{
	position:absolute;bottom:-1px;left:73%;
	width:clamp(230px,32vw,440px);height:clamp(230px,32vw,440px);
	margin-left:calc(clamp(230px,32vw,440px) / -2);
	animation:sunCycle 48s cubic-bezier(.4,0,.6,1) infinite;animation-delay:-12s;
}
.soleil-par{position:absolute;inset:0;will-change:transform}
.soleil-disque{
	position:absolute;inset:0;border-radius:50%;overflow:hidden;
	background:linear-gradient(180deg,#FFF3C4 0%,var(--honey-light) 18%,var(--honey) 44%,var(--honey-deep) 68%,#FF7A2F 88%,#FF4E7A 100%);
	animation:sunPulse 7s ease-in-out infinite;
}
.soleil-stries{
	position:absolute;inset:0;
	background:repeating-linear-gradient(to bottom,rgba(90,40,110,0) 0 14px,rgba(90,40,110,.34) 14px 18px);
	-webkit-mask-image:linear-gradient(to bottom,transparent 30%,#000 55%);
	mask-image:linear-gradient(to bottom,transparent 30%,#000 55%);
}
.soleil-stries-b{
	position:absolute;left:0;right:0;top:64%;bottom:0;
	background:repeating-linear-gradient(to bottom,rgba(74,30,96,0) 0 10px,rgba(74,30,96,.4) 10px 21px);
}
.soleil-liseret{
	position:absolute;inset:0;border-radius:50%;
	box-shadow:inset 0 0 0 1.5px rgba(255,243,196,.4),0 0 90px 10px rgba(249,190,0,.28);
}

/* Pivot de taille nulle pose sur l horizon : le faire tourner promene la lune
   le long d un arc de cercle, comme un astre reel. */
.lune-pivot{
	position:absolute;bottom:-1px;left:50%;width:0;height:0;
	animation:moonArc 48s cubic-bezier(.32,.58,.62,1) infinite;animation-delay:-12s;
}
.lune{
	position:absolute;left:0;bottom:clamp(150px,42svh,470px);
	width:clamp(130px,17vw,230px);height:clamp(130px,17vw,230px);
	margin-left:calc(clamp(130px,17vw,230px) / -2);
	animation:moonCounter 48s cubic-bezier(.32,.58,.62,1) infinite,moonGlow 8s ease-in-out infinite;
	animation-delay:-12s,0s;
}
.lune-disque{
	position:absolute;inset:0;border-radius:50%;overflow:hidden;
	background:linear-gradient(180deg,#FFFDF6 0%,#FFF6DC 32%,#FFE9B8 64%,#EFCB8A 100%);
}
.lune-cratere{position:absolute;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.lune-stries{
	position:absolute;inset:0;
	background:repeating-linear-gradient(to bottom,rgba(90,40,110,0) 0 11px,rgba(90,40,110,.26) 11px 15px);
	-webkit-mask-image:linear-gradient(to bottom,transparent 42%,#000 62%);
	mask-image:linear-gradient(to bottom,transparent 42%,#000 62%);
}
.lune-halo{
	position:absolute;inset:0;border-radius:50%;
	box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55),0 0 54px 6px rgba(255,233,184,.3),0 0 110px 14px rgba(34,230,230,.12);
}

.plage{position:absolute;left:0;right:0;bottom:38%;height:clamp(150px,26vw,340px);z-index:4;pointer-events:none;overflow:hidden}

.grille-hero{position:absolute;left:-25%;right:-25%;bottom:-6%;height:44%;z-index:2;pointer-events:none;perspective:280px;perspective-origin:50% 0}
.grille-hero > div{
	position:absolute;inset:0;transform:rotateX(74deg);transform-origin:50% 0;
	background-image:repeating-linear-gradient(to right,rgba(249,190,0,.42) 0 1px,transparent 1px 82px),
	                 repeating-linear-gradient(to bottom,rgba(255,61,139,.5) 0 1px,transparent 1px 60px);
	animation:gridRun 2.6s linear infinite;
	-webkit-mask-image:linear-gradient(to bottom,transparent,#000 34%);
	mask-image:linear-gradient(to bottom,transparent,#000 34%);
}
.horizon{
	position:absolute;left:0;right:0;bottom:38%;height:2px;z-index:3;
	background:linear-gradient(90deg,transparent,var(--honey) 22%,var(--white) 50%,var(--honey) 78%,transparent);
	box-shadow:0 0 26px 5px rgba(249,190,0,.55);
}
.essaim{position:absolute;inset:0;z-index:4;pointer-events:none}
.essaim i{position:absolute;left:var(--l);top:var(--t);width:var(--s);height:calc(var(--s) * 1.1);
	opacity:var(--o);animation:drift 9s ease-in-out var(--d) infinite}
.essaim i{animation-name:driftHome}
.essaim i svg{display:block;width:100%;height:100%}
.abeille{position:absolute;animation:beeFly 13s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(249,190,0,.5))}
.abeille svg{display:block;overflow:visible}
.aile-a{transform-origin:9px 8px;animation:wingBuzz .18s linear infinite}
.aile-b{transform-origin:16px 8px;animation:wingBuzz .18s linear .09s infinite}
/* Quand le soleil est leve, il eclaire la scene autour de lui : une nappe
   chaude tres douce, en fusion additive, qui leve le ciel, la grille et le
   sol sans delaver leurs couleurs. Elle suit le cycle de l astre et
   s eteint quand il passe sous l horizon. */
.lueur-soleil{
	position:absolute;left:73%;bottom:38%;z-index:4;pointer-events:none;
	width:clamp(900px,130vw,2100px);height:clamp(900px,130vw,2100px);
	transform:translate(-50%,50%);mix-blend-mode:screen;
	background:radial-gradient(circle,rgba(249,190,0,.38) 0%,rgba(249,190,0,.21) 22%,
	                           rgba(255,122,47,.11) 42%,rgba(255,78,122,.045) 60%,transparent 78%);
	animation:sunGlow 48s cubic-bezier(.4,0,.6,1) infinite;animation-delay:-12s;
}
.voile-hero{
	position:absolute;left:50%;top:50%;width:min(1300px,130%);height:92%;
	transform:translate(-50%,-50%);z-index:5;pointer-events:none;
	background:radial-gradient(58% 52% at 50% 42%,rgba(10,7,20,.7),rgba(10,7,20,.42) 48%,rgba(10,7,20,0) 80%);
}

.hero-in{position:relative;z-index:6;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:1100px;width:100%}
.hero-logo{display:block;width:clamp(140px,17vw,220px);height:auto;
	filter:drop-shadow(0 0 34px rgba(18,16,26,.85)) drop-shadow(0 6px 18px rgba(0,0,0,.6))}

.t-web{
	display:block;font-family:var(--disp);font-weight:800;font-variation-settings:"wdth" 122;
	font-size:clamp(30px,5.6vw,74px);letter-spacing:.02em;text-transform:uppercase;color:var(--white);
	text-shadow:0 0 24px rgba(34,230,230,.45),0 2px 0 rgba(255,61,139,.55);
}
.t-efficace{display:block;margin-top:-.05em}
.t-efficace > span{
	display:inline-block;position:relative;font-family:var(--script);
	font-size:clamp(56px,11.5vw,152px);line-height:.92;padding:.02em .16em .3em;color:var(--honey);
	text-shadow:0 0 6px rgba(249,190,0,.95),0 0 18px rgba(249,190,0,.7),0 0 42px rgba(249,190,0,.5),0 0 78px rgba(255,61,139,.4);
	/* Le halo deborde largement de la boite : le trace du balayage doit
	   l englober, sinon la lueur se coupe net au bord droit. */
	will-change:clip-path;
	animation:markInNeon 1.35s .45s cubic-bezier(.16,1,.3,1) both,neonFlicker 7s 1.6s infinite;
}
.sous-titre{
	margin:clamp(16px,2.4vh,26px) 0 0;font-family:var(--disp);font-size:clamp(11px,1.3vw,14px);
	font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.9);
}
.chips-hero{margin-top:clamp(22px,3.4vh,38px);display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.chips-hero .chip{border-color:rgba(255,255,255,.34);background:rgba(12,10,20,.55);
	-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.chips-hero .chip:hover{transform:translateY(-3px);border-color:var(--honey);box-shadow:0 0 22px rgba(249,190,0,.35)}
.cta-hero{margin-top:clamp(22px,3.2vh,34px);padding:17px 34px;font-size:clamp(12px,1.3vw,14.5px)}
.cta-hero:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 0 46px rgba(249,190,0,.6)}

@keyframes sunCycle{0%,27%{transform:translateY(9%)}41%,81%{transform:translateY(124%)}93%,100%{transform:translateY(9%)}}
@keyframes sunGlow{0%,27%{opacity:1}41%,81%{opacity:0}93%,100%{opacity:1}}
@keyframes sunPulse{
	0%,100%{filter:drop-shadow(0 0 60px rgba(249,190,0,.45))}50%{filter:drop-shadow(0 0 100px rgba(249,190,0,.7))}
}
@keyframes moonArc{0%,37%{transform:rotate(-122deg)}87%,100%{transform:rotate(122deg)}}
@keyframes moonCounter{0%,37%{transform:rotate(122deg)}87%,100%{transform:rotate(-122deg)}}
@keyframes moonGlow{
	0%,100%{filter:drop-shadow(0 0 34px rgba(255,233,184,.4))}50%{filter:drop-shadow(0 0 62px rgba(255,233,184,.62))}
}
@keyframes gridRun{
	from{background-position:0 0}to{background-position:0 60px}
}
@keyframes neonFlicker{
	0%,100%{text-shadow:0 0 6px rgba(249,190,0,.95),0 0 18px rgba(249,190,0,.7),0 0 42px rgba(249,190,0,.5),0 0 78px rgba(255,61,139,.4)}
	41%{text-shadow:0 0 6px rgba(249,190,0,.95),0 0 18px rgba(249,190,0,.7),0 0 42px rgba(249,190,0,.5),0 0 78px rgba(255,61,139,.4)}
	43%{text-shadow:0 0 3px rgba(249,190,0,.5),0 0 8px rgba(249,190,0,.3),0 0 16px rgba(249,190,0,.18);opacity:.72}
	45%{text-shadow:0 0 7px rgba(249,190,0,1),0 0 22px rgba(249,190,0,.8),0 0 52px rgba(249,190,0,.6),0 0 88px rgba(255,61,139,.45);opacity:1}
	47%{text-shadow:0 0 3px rgba(249,190,0,.45),0 0 7px rgba(249,190,0,.25);opacity:.66}
	49%{text-shadow:0 0 6px rgba(249,190,0,.95),0 0 18px rgba(249,190,0,.7),0 0 42px rgba(249,190,0,.5),0 0 78px rgba(255,61,139,.4);opacity:1}
	72%{text-shadow:0 0 6px rgba(249,190,0,.95),0 0 18px rgba(249,190,0,.7),0 0 42px rgba(249,190,0,.5),0 0 78px rgba(255,61,139,.4)}
	73%{text-shadow:0 0 4px rgba(249,190,0,.6),0 0 10px rgba(249,190,0,.35);opacity:.8}
	75%{text-shadow:0 0 8px rgba(249,190,0,1),0 0 26px rgba(249,190,0,.85),0 0 58px rgba(249,190,0,.62),0 0 92px rgba(255,61,139,.48);opacity:1}
}
@keyframes palmSway{0%,100%{transform:rotate(-3.4deg) skewX(1deg)}50%{transform:rotate(4deg) skewX(-1.2deg)}}
@keyframes winGlow{0%,100%{opacity:.35}50%{opacity:.95}}
@keyframes beacon{
	0%,100%{opacity:.25;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}
}
@keyframes beeFly{
	0%{transform:translate(0,0) rotate(-6deg)}
	25%{transform:translate(38px,-16px) rotate(5deg)}
	50%{transform:translate(74px,4px) rotate(-4deg)}
	75%{transform:translate(36px,20px) rotate(6deg)}
	100%{transform:translate(0,0) rotate(-6deg)}
}
@keyframes wingBuzz{
	0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}
}

/* --- Section agence : hexagones de chiffres -------------------------------- */

.badge-anciennete{
	display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 12px;
	border:1px solid rgba(249,190,0,.35);background:rgba(249,190,0,.08);border-radius:40px;
	font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.2em;
	text-transform:uppercase;color:var(--honey);margin-bottom:18px;
}
.t-val{
	display:block;margin-top:.08em;line-height:1.34;font-family:var(--script);
	font-size:clamp(34px,5vw,66px);color:var(--honey);text-transform:none;letter-spacing:0;
	animation:valNeon 4.4s ease-in-out infinite;
}
@keyframes valNeon{
	0%,100%{text-shadow:0 0 7px rgba(249,190,0,.8),0 0 24px rgba(249,190,0,.5),0 0 52px rgba(249,190,0,.22)}
	42%{text-shadow:0 0 5px rgba(155,110,255,.95),0 0 14px rgba(249,190,0,.95),0 0 40px rgba(249,190,0,.72),0 0 78px rgba(249,190,0,.34)}
	46%{text-shadow:0 0 5px rgba(249,190,0,.45),0 0 16px rgba(249,190,0,.3)}
	49%{text-shadow:0 0 5px rgba(155,110,255,.95),0 0 15px rgba(249,190,0,.95),0 0 42px rgba(249,190,0,.7)}
}
.h2-agence{font-size:clamp(26px,3.9vw,50px)}

/* Nid d abeille : deux colonnes, celle de droite descendue d une demi
   hexagone. Le decalage porte sur la colonne entiere et non sur chaque
   cellule, sinon les cellules debordent de leur rangee et le groupe
   suivant leur passe dessus. */
.stat-colonne{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1.6vw,20px);align-items:start}
.stat-col{display:flex;flex-direction:column;gap:clamp(10px,1.6vw,20px)}
.stat-col.decalee{margin-top:13%}
.stat{
	aspect-ratio:1/.9;display:flex;flex-direction:column;align-items:center;justify-content:center;
	text-align:center;padding:0 12%;
	clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
	background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
	animation:statPulse 6.6s ease-in-out infinite;
	transition:transform .35s var(--courbe);
}
.stat.miel{background:linear-gradient(160deg,rgba(249,190,0,.22),rgba(249,190,0,.05))}
.stat.decale{margin-top:26%}
.stat{transition:transform .4s var(--courbe),filter .4s ease}
.stat:hover{transform:translateY(-6px) scale(1.03);filter:drop-shadow(0 0 26px rgba(249,190,0,.35));animation-play-state:paused}
@media (max-width:560px){
	.stat-col.decalee{margin-top:0}
	.stat{aspect-ratio:1/.62}
}
.stat b{
	display:block;font-family:var(--disp);font-weight:800;font-size:clamp(26px,3.4vw,44px);
	color:var(--honey);text-shadow:0 0 22px rgba(249,190,0,.5);
	animation:statNumGlow 6.6s ease-in-out infinite;animation-delay:inherit;
}
.stat span{display:block;font-size:clamp(10.5px,1.05vw,12.5px);color:var(--muted);margin-top:7px}
@keyframes statPulse{
	0%,100%{filter:drop-shadow(0 0 0 rgba(249,190,0,0))}
	8%{filter:drop-shadow(0 0 30px rgba(249,190,0,.75))}
	24%{filter:drop-shadow(0 0 0 rgba(249,190,0,0))}
}
@keyframes statNumGlow{
	0%,100%{color:var(--honey);text-shadow:0 0 22px rgba(249,190,0,.5)}
	8%{color:#FFF3CF;text-shadow:0 0 6px #fff,0 0 26px rgba(249,190,0,.95),0 0 52px rgba(249,190,0,.6)}
	24%{color:var(--honey);text-shadow:0 0 22px rgba(249,190,0,.5)}
}

/* --- Process : cartes depliables ----------------------------------------- */

.entete-centre{text-align:center;max-width:760px;margin:0 auto clamp(32px,5vh,56px)}
.entete-centre .h2{text-align:center}
.entete-centre .txt{margin-left:auto;margin-right:auto}
.surtitre.aqua{color:var(--aqua)}

.pgrille{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(16px,2.4vw,28px)}
button.pcard{padding:26px 22px 24px;overflow:hidden;text-align:left;cursor:pointer;font:inherit;color:inherit;width:100%}
.phex{
	order:1;width:48px;height:54px;display:grid;place-items:center;
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
	background:rgba(249,190,0,.16);font-family:var(--disp);font-weight:800;font-size:16px;color:var(--honey);
	transition:background .3s ease,color .3s ease,transform .35s var(--courbe);
}
.ptitre{order:2;width:100%;font-family:var(--disp);font-weight:800;font-size:clamp(16px,1.6vw,19px);
	text-transform:uppercase;line-height:1.14;overflow-wrap:anywhere;hyphens:auto}
.pbody{order:3;max-height:0;opacity:0;overflow:hidden;font-size:14.5px;line-height:1.6;color:var(--muted);
	transition:max-height .4s var(--courbe),opacity .3s ease}
.phint{order:4;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
	color:var(--honey);opacity:.7;transition:opacity .3s ease}
button.pcard.ouverte .pbody{max-height:260px;opacity:1}
button.pcard.ouverte .phint{opacity:0}
button.pcard.ouverte .phex{background:var(--honey);color:var(--ink);transform:rotate(30deg)}

/* --- Mosaique de references -------------------------------------------------- */

.refNum{font-family:var(--disp);font-weight:800;font-size:40px;color:var(--honey);text-shadow:0 0 22px rgba(249,190,0,.5);line-height:1}
.ref-chiffres{display:grid;grid-template-columns:repeat(2,1fr);
	gap:clamp(18px,2.6vw,30px);margin:26px 0 28px;max-width:420px}
.ref-chiffres span{display:block;font-size:13px;color:var(--muted);margin-top:6px}

.mosaique{display:flex;flex-direction:column;align-items:flex-start}
.mrang{display:flex}
.hex{
	position:relative;flex:none;
	clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
	background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.025));
	filter:drop-shadow(0 8px 22px rgba(0,0,0,.45));
	animation:hexWake 9s ease-in-out infinite;
	transition:transform .4s var(--courbe),background .35s ease,filter .35s ease;
}
.hex-in{position:absolute;left:16%;right:16%;top:12%;bottom:12%;
	display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}
.hex-nom{font-weight:600;color:var(--white);overflow-wrap:anywhere;line-height:1.15}
.hex-client{cursor:pointer}
.hex-client:hover{
	transform:translateY(-12px) scale(1.06) rotate(-2deg);animation-play-state:paused;
	background:linear-gradient(160deg,#FFE066,#F9BE00 60%,#E0A400);
	filter:drop-shadow(0 0 42px rgba(249,190,0,.7));
}
.hex-client:hover .hex-nom{color:var(--ink)}
.hex-client:hover .hex-in svg{transform:rotate(30deg) scale(1.12)}
.hex-client:hover .hex-in svg polygon{stroke:var(--ink)}
.hex-in svg{transition:transform .4s var(--courbe)}
.hex-todo{opacity:.6;cursor:default}
.hex-todo .hex-nom{font-style:italic;color:var(--muted)}
.hex-tag{font-family:var(--disp);font-weight:700;font-size:9px;letter-spacing:.14em;color:var(--honey)}
.hex-empty{
	background:linear-gradient(160deg,#FFE066,#F9BE00 60%,#E0A400);cursor:pointer;
	filter:drop-shadow(0 0 26px rgba(249,190,0,.45));
}
.hex-empty:hover{filter:drop-shadow(0 0 44px rgba(249,190,0,.75))}
.hex-empty .hex-script{font-family:var(--script);color:var(--ink);line-height:1}
.hex-empty .hex-sous{font-family:var(--disp);font-weight:700;font-size:8.5px;letter-spacing:.1em;
	text-transform:uppercase;color:var(--ink);opacity:.72}
@keyframes hexWake{
	0%,100%{transform:translateY(0) scale(1);filter:drop-shadow(0 0 0 rgba(249,190,0,0))}
	7%{transform:translateY(-7px) scale(1.035);filter:drop-shadow(0 0 26px rgba(249,190,0,.6))}
	18%{transform:translateY(0) scale(1);filter:drop-shadow(0 0 0 rgba(249,190,0,0))}
}

.fond-e{background:linear-gradient(180deg,#12101a,#1a1526)}
.fond-f{background:linear-gradient(180deg,#1a1526,#12101a)}
.fond-contact-home{background:linear-gradient(180deg,#12101a,#241a3a 55%,#6b2f6e 130%)}
.lignes-verticales{position:absolute;inset:0;opacity:.5;pointer-events:none;
	background-image:repeating-linear-gradient(to right,rgba(255,255,255,.04) 0 1px,transparent 1px 92px)}

/* L essaim de l accueil derive un peu plus haut que celui des pages de contenu. */
@keyframes driftHome{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-16px) rotate(8deg)}}

/* Grille en perspective au bas du bloc contact des pages de contenu.
   Meme construction que celle du hero, mais fixe et plus discrete. */
/* Meme sol qu au bas de l accueil : les pages se terminent toutes de la
   meme facon, avec les memes carreaux et le meme defilement. */
.grille-bas{position:absolute;left:-25%;right:-25%;bottom:-6%;height:44%;
	z-index:0;perspective:280px;perspective-origin:50% 0;pointer-events:none}
.grille-bas > div{
	position:absolute;inset:0;transform:rotateX(74deg);transform-origin:50% 0;
	background-image:repeating-linear-gradient(to right,rgba(249,190,0,.42) 0 1px,transparent 1px 82px),
	                 repeating-linear-gradient(to bottom,rgba(255,61,139,.5) 0 1px,transparent 1px 60px);
	animation:gridRun 2.6s linear infinite;
	-webkit-mask-image:linear-gradient(to bottom,transparent,#000 34%);
	mask-image:linear-gradient(to bottom,transparent,#000 34%);
}

/* =========================================================================
   Pages de contenu : blocs partages par les pages derivees du gabarit
   ========================================================================= */

.grille-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(16px,2.4vw,26px)}
/* Deux blocs de contenu qui se suivent dans une meme section : le second
   n heritait d aucune marge et venait se coller au premier. */
.cmpWrap + .grille-cartes,.cmpWrap + .statGrille,.cmpWrap + .cmpWrap,
.grille-cartes + .grille-cartes,.grille-cartes + .cmpWrap,
.statGrille + .grille-cartes,.statGrille + .cmpWrap,
.demarche-grille + .grille-cartes,.faq-liste + .cmpWrap{margin-top:clamp(24px,3.5vh,40px)}
.grille-cartes.large{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

.carte{
	display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:26px 22px;
	border:1px solid var(--line);border-radius:20px;
	background:linear-gradient(155deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
	transition:transform .4s var(--courbe),border-color .3s ease,box-shadow .4s ease;
}
.carte:hover{transform:translateY(-6px);border-color:rgba(249,190,0,.5);box-shadow:0 0 34px rgba(249,190,0,.22)}
body.v2 .carte-lien{color:inherit;text-decoration:none}
body.v2 .carte-lien .carte-titre{transition:color .25s ease}
body.v2 .carte-lien:hover .carte-titre,body.v2 .carte-lien:focus-visible .carte-titre{color:var(--honey)}
body.v2 .carte-lien:focus-visible{outline:2px solid var(--honey);outline-offset:3px}
.carte-titre{font-family:var(--disp);font-weight:800;font-size:clamp(16px,1.6vw,19px);text-transform:uppercase;line-height:1.16}
.carte-txt{font-size:14.5px;line-height:1.6;color:var(--muted)}
.carte-hex{
	width:44px;height:50px;display:grid;place-items:center;
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
	background:rgba(249,190,0,.16);color:var(--honey);
	font-family:var(--disp);font-weight:800;font-size:15px;
}


/* --- Hero de la page agents IA : l agent recoit, reflechit, repond ------- */

.ia-fil{position:absolute;left:18px;right:18px;top:18px;bottom:18px;
	display:flex;flex-direction:column;justify-content:center;gap:12px}
.ia-bulle{
	max-width:76%;padding:11px 14px;border-radius:14px;font-size:12.5px;line-height:1.45;
	background:rgba(255,255,255,.08);color:rgba(255,255,255,.72);align-self:flex-end;
	border-bottom-right-radius:4px;animation:iaAsk 9s ease-in-out infinite;
}
.ia-bulle.reponse{
	align-self:flex-start;border-bottom-right-radius:14px;border-bottom-left-radius:4px;
	background:linear-gradient(100deg,rgba(249,190,0,.22),rgba(249,190,0,.07));
	border:1px solid rgba(249,190,0,.45);color:var(--white);
	box-shadow:0 0 24px rgba(249,190,0,.22);animation:iaReply 9s ease-in-out infinite;
}
.ia-points{align-self:flex-start;display:flex;gap:6px;padding:12px 14px;border-radius:14px;
	background:rgba(255,255,255,.06);animation:iaThink 9s ease-in-out infinite}
.ia-points span{width:6px;height:7px;background:var(--honey);
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.ia-points span:nth-child(1){animation:iaPoint 1.2s ease-in-out infinite}
.ia-points span:nth-child(2){animation:iaPoint 1.2s ease-in-out .18s infinite}
.ia-points span:nth-child(3){animation:iaPoint 1.2s ease-in-out .36s infinite}

@keyframes iaAsk{0%,4%{opacity:0;transform:translateY(8px)}10%,92%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
@keyframes iaThink{0%,16%{opacity:0}22%,44%{opacity:1}52%,100%{opacity:0}}
@keyframes iaReply{0%,50%{opacity:0;transform:translateY(8px)}58%,92%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
@keyframes iaPoint{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

/* --- Bandeau de consentement aux couleurs du site ------------------------
   La bibliotheque expose ses propres variables : on les redefinit plutot que
   de lutter avec ses selecteurs. Sa feuille est chargee apres celle-ci, d ou
   les selecteurs plus specifiques sur les quelques reglages de forme. */

.cc_div,.cc_div *{
	--cc-bg:#1a1526;
	--cc-text:rgba(255,255,255,.78);
	--cc-btn-primary-bg:#F9BE00;
	--cc-btn-primary-text:#1d1d1b;
	--cc-btn-primary-hover-bg:#FFE066;
	--cc-btn-secondary-bg:rgba(255,255,255,.06);
	--cc-btn-secondary-text:#FFFFFF;
	--cc-btn-secondary-hover-bg:rgba(255,255,255,.12);
	--cc-cookie-category-block-bg:rgba(255,255,255,.04);
	--cc-cookie-category-block-bg-hover:rgba(255,255,255,.08);
	--cc-section-border:rgba(255,255,255,.13);
	--cc-cookie-table-border:rgba(255,255,255,.13);
	--cc-overlay-bg:rgba(8,6,14,.78);
	--cc-toggle-bg-off:rgba(255,255,255,.22);
	--cc-toggle-bg-on:#F9BE00;
	--cc-toggle-bg-readonly:rgba(255,255,255,.14);
	--cc-toggle-knob-bg:#1a1526;
	--cc-toggle-knob-icon-color:#1d1d1b;
	--cc-webkit-scrollbar-bg:rgba(255,255,255,.22);
	--cc-webkit-scrollbar-bg-hover:rgba(255,255,255,.34);
	font-family:var(--corps);
}

body.v2 .cc_div #cm,
body.v2 .cc_div #s-inr{
	border:1px solid rgba(255,255,255,.13);
	border-radius:20px;
	box-shadow:0 24px 60px rgba(0,0,0,.5);
	-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
	background:linear-gradient(155deg,rgba(38,30,58,.96),rgba(18,16,26,.96));
}
body.v2 .cc_div #c-ttl,
body.v2 .cc_div #s-ttl{
	font-family:var(--disp);font-weight:800;font-size:17px;
	text-transform:uppercase;letter-spacing:.01em;color:var(--white);
}
body.v2 .cc_div #c-txt{font-size:13.5px;line-height:1.6}
body.v2 .cc_div .c-bn{
	font-family:var(--disp);font-weight:700;font-size:12.5px;
	letter-spacing:.06em;text-transform:uppercase;border-radius:40px;padding:12px 18px;
	white-space:nowrap;
}
body.v2 .cc_div #c-bns button:first-child,
body.v2 .cc_div #s-bns button:first-child{box-shadow:0 0 20px rgba(249,190,0,.4)}
body.v2 .cc_div .c_link,
body.v2 .cc_div .cc-link{color:var(--honey);border-bottom-color:var(--honey)}
body.v2 .cc_div .b-tl{border-radius:14px}
body.v2 .cc_div .c-bl{border-radius:14px}

/* =========================================================================
   Blocs partages par les pages de contenu, repris du handoff agents IA
   ========================================================================= */

/* Comparatif : vrai tableau, defilement horizontal sur petit ecran plutot
   qu un empilement illisible. */
.cmpWrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
	border-radius:20px;background:linear-gradient(155deg,rgba(255,255,255,.055),rgba(255,255,255,.015))}
.cmp{width:100%;min-width:640px;border-collapse:collapse}
.cmp th,.cmp td{padding:15px 18px;text-align:left;vertical-align:top;font-size:14.5px;
	line-height:1.5;border-bottom:1px solid var(--line)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:none}
.cmp thead th{font-family:var(--disp);font-weight:700;font-size:11.5px;letter-spacing:.14em;
	text-transform:uppercase;color:var(--muted);white-space:nowrap}
.cmp thead th.cmpUs{color:var(--honey)}
.cmp tbody th{font-weight:600;color:var(--white);white-space:nowrap}
.cmp tbody td{color:var(--muted)}
.cmp tbody td:first-of-type{color:var(--white)}
.cmp tbody tr{transition:background .25s ease}
.cmp tbody tr:hover{background:rgba(249,190,0,.055)}
.mk{display:inline-block;width:17px;margin-right:9px;font-weight:700}
.mk.oui{color:var(--honey)}
.mk.non{color:var(--neon)}
.mk.mitige{color:var(--aqua)}

/* Questions frequentes : element natif details. Le clavier, l etat ouvert et
   le fonctionnement sans JavaScript sont acquis sans une ligne de script. */
/* Toute la section, titre compris, tient dans une colonne de 900 px :
   sinon le titre et les questions ne demarrent pas au meme endroit. */
#faq .sec-in{max-width:900px}
/* Le titre de cette section vit dans une colonne de 900 px : a la taille
   commune il depasse d une trentaine de pixels et passe sur deux lignes. */
#faq .h2{font-size:clamp(22px,3.1vw,40px)}
.faq-liste{margin-top:clamp(30px,4.5vh,48px);display:flex;flex-direction:column;gap:12px}
.fond-nuit{background:#12101a}
.faq{border:1px solid var(--line);border-radius:14px;
	background:linear-gradient(155deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
	transition:border-color .3s ease,box-shadow .3s ease}
.faq[open]{border-color:rgba(249,190,0,.42);box-shadow:0 0 30px rgba(249,190,0,.14)}
.faq summary{display:flex;align-items:center;gap:14px;padding:19px 22px;cursor:pointer;
	list-style:none;font-family:var(--disp);font-weight:700;font-size:clamp(14.5px,1.5vw,17px);
	line-height:1.35;transition:color .25s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--honey)}
.faq summary:focus-visible{outline:2px solid var(--honey);outline-offset:-3px;border-radius:16px}
.faqHex{flex:none;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.faq[open] .faqHex{transform:rotate(30deg)}
.faq p{margin:0;padding:0 22px 20px 58px;font-size:14.5px;line-height:1.68;color:var(--muted)}
/* Ouverture et fermeture en glissement plutot qu en saut. Le pli reste
   natif : la ou le navigateur ignore ces regles, il s ouvre d un coup,
   comme avant. interpolate-size autorise la hauteur auto a s animer,
   allow-discrete garde le contenu affiche pendant la fermeture. */
.faq{interpolate-size:allow-keywords}
.faq::details-content{
	block-size:0;overflow:hidden;opacity:0;
	transition:block-size .38s var(--courbe),opacity .28s ease,
	           content-visibility .38s var(--courbe) allow-discrete;
}
.faq[open]::details-content{block-size:auto;opacity:1}

/* Cartes de solutions : le lien de bas de carte est colle en bas pour que
   toutes les cartes s alignent quelle que soit la longueur du texte. */
.solCard{display:flex;flex-direction:column;align-items:flex-start;gap:13px;padding:26px 22px;
	border:1px solid var(--line);border-radius:20px;
	background:linear-gradient(155deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
	transition:transform .4s var(--courbe),box-shadow .4s ease,border-color .3s ease}
.solCard:hover{transform:translateY(-7px);border-color:rgba(249,190,0,.5);box-shadow:0 0 38px rgba(249,190,0,.26)}
.solCard.premier{background:linear-gradient(155deg,rgba(249,190,0,.14),rgba(255,255,255,.02))}
.solCard .sav{margin-top:auto;padding-top:6px;font-family:var(--disp);font-weight:700;
	font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--honey)}
.hexOut{width:46px;height:52px;display:grid;place-items:center}

/* Hexagones de chiffres des pages de contenu : pas d animation en boucle,
   la page est longue et le regard doit rester sur le texte. */
.statGrille{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:clamp(12px,1.8vw,22px)}
/* Dans une colonne de bloc en deux parties, le remplissage automatique
   donne trois alveoles puis une seule. On impose deux par deux. */
.sec-2col .statGrille{grid-template-columns:repeat(2,1fr)}
.statCell{
	aspect-ratio:1/.9;display:flex;flex-direction:column;align-items:center;justify-content:center;
	text-align:center;padding:0 12%;
	clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
	background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
	transition:transform .4s var(--courbe),filter .4s ease;
}
.statCell{animation:statPulse 6.6s ease-in-out infinite}
.statCell:nth-child(1){animation-delay:0s}
.statCell:nth-child(2){animation-delay:.55s}
.statCell:nth-child(3){animation-delay:1.1s}
.statCell:nth-child(4){animation-delay:1.65s}
.statCell:nth-child(5){animation-delay:2.2s}
.statCell:nth-child(6){animation-delay:2.75s}
.statCell:hover{animation-play-state:paused}
.statCell.decale{margin-top:22%}
.statCell.miel{background:linear-gradient(160deg,rgba(249,190,0,.22),rgba(249,190,0,.05))}
.statCell:hover{transform:translateY(-6px) scale(1.03);filter:drop-shadow(0 0 26px rgba(249,190,0,.35))}
.statCell b{display:block;font-family:var(--disp);font-weight:800;font-size:clamp(24px,3.2vw,40px);
	color:var(--honey);text-shadow:0 0 22px rgba(249,190,0,.5);
	animation:statNumGlow 6.6s ease-in-out infinite;animation-delay:inherit}
.statCell span{display:block;font-size:clamp(10.5px,1.05vw,12px);color:var(--muted);margin-top:7px;line-height:1.35}
@media (max-width:560px){
	.statCell{aspect-ratio:1/.78}
	.statCell.decale{margin-top:0}
}

/* Badge de secteur des cas d usage. */
.badge-secteur{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);
	font-weight:700;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--aqua)}

/* --- Hero de la page agents IA : l agent au travail ---------------------- */

.conv-barre{position:absolute;left:0;right:0;top:0;height:40px;display:flex;align-items:center;
	gap:11px;padding:0 15px;border-bottom:1px solid var(--line);background:rgba(12,10,20,.5)}
.conv-badge{width:20px;height:23px;display:grid;place-items:center;
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--honey);
	font-family:var(--disp);font-weight:800;font-size:9px;color:var(--ink)}
.conv-lib{font-family:var(--disp);font-size:10.5px;font-weight:700;letter-spacing:.14em;
	text-transform:uppercase;color:var(--muted)}
.conv-etat{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--aqua);
	box-shadow:0 0 10px var(--aqua)}
.conv-fil{position:absolute;left:16px;right:16px;top:54px;bottom:16px;display:flex;flex-direction:column;gap:10px}
.conv-user{align-self:flex-end;max-width:76%;padding:11px 14px;border-radius:14px 14px 4px 14px;
	background:rgba(255,255,255,.09);animation:cUser 9s ease-in-out infinite}
.conv-user span{display:block;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.82)}
.conv-tape{align-self:flex-start;display:flex;align-items:center;gap:5px;padding:11px 14px;
	border-radius:14px 14px 14px 4px;background:rgba(249,190,0,.14);animation:cTyping 9s ease-in-out infinite}
.conv-tape span{width:7px;height:8px;background:var(--honey);
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);animation:cDot 1.1s ease-in-out infinite}
.conv-tape span:nth-child(2){animation-delay:.16s}
.conv-tape span:nth-child(3){animation-delay:.32s}
.conv-agent{align-self:flex-start;max-width:84%;padding:11px 14px;border-radius:14px 14px 14px 4px;
	border:1px solid rgba(249,190,0,.4);
	background:linear-gradient(140deg,rgba(249,190,0,.2),rgba(249,190,0,.06));
	box-shadow:0 0 24px rgba(249,190,0,.2);animation:cAgent 9s ease-in-out infinite}
.conv-agent span{display:block;font-size:12.5px;line-height:1.45;color:var(--white)}
.conv-action{margin-top:auto;display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:10px;
	border:1px solid rgba(34,230,230,.28);background:rgba(34,230,230,.07);
	font-size:11.5px;color:rgba(255,255,255,.72);animation:cAct 9s ease-in-out infinite}

@keyframes cUser{0%,6%{opacity:0;transform:translateY(8px)}12%,86%{opacity:1;transform:none}95%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes cTyping{0%,17%{opacity:0}23%,33%{opacity:1}39%,100%{opacity:0}}
@keyframes cDot{0%,100%{opacity:.28;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@keyframes cAgent{0%,36%{opacity:0;transform:translateY(8px)}44%,86%{opacity:1;transform:none}95%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes cAct{0%,58%{opacity:0;transform:translateY(6px)}66%,86%{opacity:1;transform:none}95%,100%{opacity:0}}

/* Legende de tableau lue par les lecteurs d ecran, invisible a l oeil. */
.hors-ecran{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.actions.centre{justify-content:center;margin-top:clamp(28px,4vh,44px)}
/* Bouton qui ferme une section : cale a droite, au bout de la grille. */
.actions.droite{justify-content:flex-end;margin-top:clamp(28px,4vh,44px)}
/* En colonne unique, des boutons cales a gauche deseqilibrent le bloc. */
@media (max-width:640px){
	.actions,.actions.droite,.actions.centre{justify-content:center}
	.actions .cta,.actions .chip{justify-content:center}
}

/* =========================================================================
   Animations de hero des pages IA. Une par page, meme chassis .panneau-demo.
   ========================================================================= */

/* --- Chatbot : la bulle s ouvre sur le site du client -------------------- */

.bot-page{position:absolute;left:14px;right:14px;top:52px;bottom:14px;display:flex;flex-direction:column;gap:9px}
.bot-page i{display:block;height:8px;border-radius:4px;background:rgba(255,255,255,.10)}
.bot-page i:nth-child(1){width:58%}
.bot-page i:nth-child(2){width:86%}
.bot-page i:nth-child(3){width:74%}
.bot-page i:nth-child(4){width:80%}
.bot-page i:nth-child(5){width:46%}

.bot-pastille{
	position:absolute;right:16px;bottom:16px;width:34px;height:39px;display:grid;place-items:center;
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--honey);
	box-shadow:0 0 22px rgba(249,190,0,.5);animation:botPastille 9s ease-in-out infinite;
}
.bot-fenetre{
	position:absolute;right:14px;bottom:62px;width:min(74%,240px);padding:12px;
	border:1px solid rgba(249,190,0,.4);border-radius:14px;
	background:linear-gradient(150deg,rgba(30,22,46,.96),rgba(18,16,26,.96));
	box-shadow:0 12px 34px rgba(0,0,0,.5);transform-origin:100% 100%;
	animation:botOuvre 9s ease-in-out infinite;
}
.bot-fenetre .b1,.bot-fenetre .b2{display:block;font-size:11.5px;line-height:1.4;padding:8px 10px;border-radius:10px}
.bot-fenetre .b1{background:rgba(255,255,255,.09);color:rgba(255,255,255,.8);margin-bottom:8px;
	animation:botB1 9s ease-in-out infinite}
.bot-fenetre .b2{border:1px solid rgba(249,190,0,.4);background:rgba(249,190,0,.14);color:var(--white);
	animation:botB2 9s ease-in-out infinite}

@keyframes botPastille{0%,14%{transform:scale(1)}20%,88%{transform:scale(.86);opacity:.55}96%,100%{transform:scale(1);opacity:1}}
@keyframes botOuvre{0%,16%{opacity:0;transform:scale(.7)}24%,88%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.7)}}
@keyframes botB1{0%,26%{opacity:0}33%,88%{opacity:1}96%,100%{opacity:0}}
@keyframes botB2{0%,46%{opacity:0}54%,88%{opacity:1}96%,100%{opacity:0}}




/* --- Heros des pages ergonomie, responsive et intranet ------------------- */

/* Ergonomie : le parcours se fait en trois clics. */
.parcours{position:absolute;left:18px;right:18px;top:52px;bottom:18px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.parcours-etape{display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:12px;
	background:rgba(255,255,255,.05);border:1px solid transparent;animation:pasEtape 7s ease-in-out infinite}
.parcours-etape:nth-child(2){animation-delay:1.6s}
.parcours-etape:nth-child(3){animation-delay:3.2s}
.parcours-etape b{width:22px;height:25px;display:grid;place-items:center;flex:none;
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:rgba(249,190,0,.22);
	font-family:var(--disp);font-size:10px;font-weight:800;color:var(--honey)}
.parcours-etape i{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.22);flex:1}
.parcours-clic{position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid var(--honey);
	opacity:0;animation:pasClic 7s ease-in-out infinite}

@keyframes pasEtape{0%,10%{background:rgba(255,255,255,.05);border-color:transparent}
	18%,36%{background:rgba(249,190,0,.14);border-color:rgba(249,190,0,.45)}
	46%,100%{background:rgba(255,255,255,.05);border-color:transparent}}
@keyframes pasClic{0%,12%{opacity:0;transform:scale(.4)}20%{opacity:1;transform:scale(1)}30%,100%{opacity:0;transform:scale(1.6)}}

/* Responsive : la mise en page se replie d un appareil a l autre. */

@keyframes ecranActif{0%,6%{border-color:var(--line);box-shadow:none}
	14%,30%{border-color:rgba(249,190,0,.5);box-shadow:0 0 26px rgba(249,190,0,.22)}
	40%,100%{border-color:var(--line);box-shadow:none}}

/* Intranet : le tableau de bord se remplit. */
.tdb{position:absolute;left:18px;right:18px;top:52px;bottom:18px;display:grid;
	grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:9px}
.tdb span{border-radius:9px;background:rgba(255,255,255,.07);animation:tdbCase 7s ease-in-out infinite}
.tdb span.miel{background:rgba(249,190,0,.2)}
.tdb span.large{grid-column:span 2}
.tdb span:nth-child(2){animation-delay:.4s}
.tdb span:nth-child(3){animation-delay:.8s}
.tdb span:nth-child(4){animation-delay:1.2s}
.tdb span:nth-child(5){animation-delay:1.6s}
.tdb span:nth-child(6){animation-delay:2s}

@keyframes tdbCase{0%,6%{opacity:0;transform:translateY(8px)}16%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-5px)}}

/* --- Hero automatisation : la file de taches se vide -----------------------
   Un seul jeu de keyframes pour les quatre lignes, elles ne different que par
   leur delai. Toutes les durees lisent --cyc : changer cette seule valeur
   re-echelonne l animation entiere. */

.file{--cyc:10s}
.file-barre{position:absolute;left:0;right:0;top:0;height:40px;display:flex;align-items:center;
	gap:11px;padding:0 15px;border-bottom:1px solid var(--line);background:rgba(12,10,20,.5)}
.file-actif{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
	font-family:var(--disp);font-size:9px;font-weight:700;letter-spacing:.12em;
	text-transform:uppercase;color:var(--muted)}
.file-actif b{width:7px;height:7px;border-radius:50%;background:var(--aqua);
	box-shadow:0 0 10px var(--aqua);animation:livePulse 1.8s ease-in-out infinite}

.file-liste{position:absolute;left:15px;right:15px;top:52px;bottom:58px;
	display:flex;flex-direction:column;gap:8px}

.tache{position:relative;flex:1;display:flex;align-items:center;gap:11px;padding:0 12px;
	border:1px solid var(--line);border-radius:10px;overflow:hidden;
	animation:rowDone var(--cyc) ease-in-out both infinite}
.tache:nth-child(2){animation-delay:calc(var(--cyc) * .16)}
.tache:nth-child(3){animation-delay:calc(var(--cyc) * .32)}
.tache:nth-child(4){animation-delay:calc(var(--cyc) * .48)}

.tache-balai{position:absolute;inset:0;pointer-events:none;
	background:linear-gradient(100deg,transparent,rgba(249,190,0,.28),transparent);
	animation:rowSweep var(--cyc) ease-out both infinite}
.tache-hex{position:relative;flex:none;width:22px;height:25px;display:grid;place-items:center;
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
	animation:rowHex var(--cyc) ease-in-out both infinite}
.tache-lib{position:relative;flex:1;min-width:0;font-size:12.5px;font-weight:500;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
	animation:rowLabel var(--cyc) ease-in-out both infinite}
.tache-etat{position:relative;flex:none;display:grid;place-items:center;width:60px;height:19px}
.tache-etat span{position:absolute;font-family:var(--disp);font-size:8.5px;font-weight:700;
	letter-spacing:.1em;text-transform:uppercase}
.tache-attente{color:rgba(255,255,255,.4);animation:badgeWait var(--cyc) ease-in-out both infinite}
.tache-fait{display:inline-flex;align-items:center;gap:4px;color:var(--aqua);
	animation:badgeDone var(--cyc) cubic-bezier(.2,.7,.2,1) both infinite}

.tache:nth-child(2) .tache-balai,.tache:nth-child(2) .tache-hex,
.tache:nth-child(2) .tache-lib,.tache:nth-child(2) .tache-etat span{animation-delay:calc(var(--cyc) * .16)}
.tache:nth-child(3) .tache-balai,.tache:nth-child(3) .tache-hex,
.tache:nth-child(3) .tache-lib,.tache:nth-child(3) .tache-etat span{animation-delay:calc(var(--cyc) * .32)}
.tache:nth-child(4) .tache-balai,.tache:nth-child(4) .tache-hex,
.tache:nth-child(4) .tache-lib,.tache:nth-child(4) .tache-etat span{animation-delay:calc(var(--cyc) * .48)}

.file-pied{position:absolute;left:15px;right:15px;bottom:14px;display:flex;align-items:center;gap:12px}
.file-prog{position:relative;flex:1;height:5px;border-radius:4px;background:rgba(255,255,255,.09);overflow:hidden}
.file-prog b{position:absolute;left:0;top:0;bottom:0;border-radius:4px;
	background:linear-gradient(90deg,var(--honey-deep),var(--honey),var(--honey-light));
	box-shadow:0 0 14px rgba(249,190,0,.55);animation:progFill var(--cyc) ease-in-out both infinite}
.file-cpt{position:relative;flex:none;display:grid;place-items:center;min-width:96px;height:17px}
.file-cpt span{position:absolute;white-space:nowrap;font-family:var(--disp);font-size:10px;
	font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.5)}
.file-cpt span:nth-child(1){color:rgba(255,255,255,.42);animation:cnt0 var(--cyc) steps(1) both infinite}
.file-cpt span:nth-child(2){animation:cnt1 var(--cyc) steps(1) both infinite}
.file-cpt span:nth-child(3){animation:cnt2 var(--cyc) steps(1) both infinite}
.file-cpt span:nth-child(4){animation:cnt3 var(--cyc) steps(1) both infinite}
.file-cpt span:nth-child(5){color:rgba(255,255,255,.62);animation:cnt4 var(--cyc) steps(1) both infinite}
.file-cpt b{color:var(--honey);font-weight:700}
.file-cpt span:nth-child(1) b{color:rgba(255,255,255,.6)}
.file-cpt span:nth-child(5) b{text-shadow:0 0 12px rgba(249,190,0,.6)}

@keyframes rowDone{0%,8%{background:rgba(255,255,255,.045);border-color:var(--line)}15%,78%{background:rgba(34,230,230,.09);border-color:rgba(34,230,230,.34)}87%,100%{background:rgba(255,255,255,.045);border-color:var(--line)}}
@keyframes rowLabel{0%,8%{color:var(--muted)}15%,78%{color:var(--white)}87%,100%{color:var(--muted)}}
@keyframes rowHex{0%,8%{background:rgba(255,255,255,.09);transform:rotate(0deg)}15%,78%{background:rgba(34,230,230,.2);transform:rotate(30deg)}87%,100%{background:rgba(255,255,255,.09);transform:rotate(0deg)}}
@keyframes badgeWait{0%,9%{opacity:1}13%,84%{opacity:0}88%,100%{opacity:1}}
@keyframes badgeDone{0%,9%{opacity:0;transform:scale(.7)}15%,84%{opacity:1;transform:none}88%,100%{opacity:0;transform:scale(.7)}}
@keyframes rowSweep{0%,8%{opacity:0;transform:translateX(-30%)}12%{opacity:1}22%{opacity:0;transform:translateX(130%)}100%{opacity:0;transform:translateX(130%)}}
@keyframes progFill{0%,4%{width:4%}62%,80%{width:100%}88%,100%{width:4%}}
@keyframes livePulse{0%,100%{opacity:.45;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
@keyframes cnt0{0%,12%{opacity:1}14%,100%{opacity:0}}
@keyframes cnt1{0%,13%{opacity:0}15%,28%{opacity:1}30%,100%{opacity:0}}
@keyframes cnt2{0%,29%{opacity:0}31%,44%{opacity:1}46%,100%{opacity:0}}
@keyframes cnt3{0%,45%{opacity:0}47%,60%{opacity:1}62%,100%{opacity:0}}
@keyframes cnt4{0%,61%{opacity:0}63%,86%{opacity:1}88%,100%{opacity:0}}

/* --- Hero integration : le site ne bouge pas, les briques s y clipsent -----
   C est l immobilite du wireframe qui porte le message. Ne rien animer dans
   le site gris : il gagne des fonctions, il ne se reconstruit pas. */

.briques{--cyc:11s}
.briques-barre{position:absolute;left:0;right:0;top:0;height:40px;display:flex;align-items:center;
	gap:10px;padding:0 15px;border-bottom:1px solid var(--line);background:rgba(12,10,20,.5)}
.briques-url{font-family:var(--disp);font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--muted)}
.briques-stack{margin-left:auto;position:relative;display:grid;place-items:center;min-width:76px;height:18px}
.briques-stack span{position:absolute;white-space:nowrap;padding:3px 9px;border-radius:20px;
	border:1px solid rgba(34,230,230,.34);background:rgba(34,230,230,.09);
	font-family:var(--disp);font-size:8.5px;font-weight:700;letter-spacing:.08em;
	text-transform:uppercase;color:var(--aqua)}
.briques-stack span:nth-child(1){animation:stk1 var(--cyc) steps(1) both infinite}
.briques-stack span:nth-child(2){animation:stk2 var(--cyc) steps(1) both infinite}
.briques-stack span:nth-child(3){animation:stk3 var(--cyc) steps(1) both infinite}
.briques-stack span:nth-child(4){animation:stk4 var(--cyc) steps(1) both infinite}

.site{position:absolute;left:15px;right:15px;top:52px;bottom:52px;display:flex;flex-direction:column;gap:7px}
.site-nav{flex:none;display:flex;align-items:center;gap:7px;height:19px}
.site-nav > i{flex:none;height:4px;border-radius:3px;background:rgba(255,255,255,.1)}
.site-logo{flex:none;width:16px;height:11px;border-radius:3px;background:rgba(255,255,255,.16)}
.site-hero{flex:none;height:34px;display:flex;flex-direction:column;justify-content:center;gap:5px;
	padding:0 11px;border-radius:8px;background:rgba(255,255,255,.055)}
.site-hero i{display:block;border-radius:3px;background:rgba(255,255,255,.19)}
.site-hero i+i{height:4px;background:rgba(255,255,255,.1)}
.site-pied{flex:none;height:13px;border-radius:6px;background:rgba(255,255,255,.045)}
.site-carte{flex:1;display:flex;flex-direction:column;gap:5px;padding:7px;border-radius:7px;
	background:rgba(255,255,255,.07)}
.site-carte i{flex:1;border-radius:4px;background:rgba(255,255,255,.09)}
.site-carte b{height:4px;border-radius:2px;background:rgba(255,255,255,.14);display:block}

/* Brique 1 : la barre de recherche s allume. */
.brique-recherche{position:relative;margin-left:auto;flex:none;width:44%;height:100%;
	display:flex;align-items:center;gap:6px;padding:0 8px;
	border:1px solid rgba(255,255,255,.12);border-radius:20px;
	animation:slot1 var(--cyc) ease-out both infinite}
.brique-recherche i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.16)}

/* Brique 2 : la grille de cartes s allume. */
.brique-grille{position:relative;flex:1;display:flex;gap:7px;padding:7px;
	border:1px solid rgba(255,255,255,.12);border-radius:10px;
	animation:slot2 var(--cyc) ease-out both infinite}

/* Brique 3 : la bulle d assistant se pose par-dessus. */
.brique-bulle{position:absolute;right:13px;bottom:56px;display:flex;align-items:center;gap:5px;
	padding:7px 10px;border-radius:14px 14px 4px 14px;border:1px solid rgba(249,190,0,.5);
	background:linear-gradient(140deg,rgba(249,190,0,.24),rgba(249,190,0,.08));
	animation:slot3 var(--cyc) ease-out both infinite}
.brique-bulle i{width:5px;height:5px;border-radius:50%;background:var(--honey);
	animation:chatDot 1.1s ease-in-out infinite}
.brique-bulle i:nth-child(2){animation-delay:.16s}
.brique-bulle i:nth-child(3){animation-delay:.32s}

/* Pastille hexagonale qui marque la brique posee. */
.brique-pastille{position:absolute;width:20px;height:23px;display:grid;place-items:center;
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--honey);
	box-shadow:0 0 16px rgba(249,190,0,.6)}
.brique-recherche .brique-pastille{right:-9px;top:-11px;animation:brick1 var(--cyc) cubic-bezier(.2,.7,.2,1) both infinite}
.brique-grille .brique-pastille{right:-9px;top:-11px;animation:brick2 var(--cyc) cubic-bezier(.2,.7,.2,1) both infinite}
.brique-bulle .brique-pastille{left:-11px;top:-11px;animation:brick3 var(--cyc) cubic-bezier(.2,.7,.2,1) both infinite}

.briques-pied{position:absolute;left:15px;right:15px;bottom:14px;display:flex;align-items:center;gap:10px}
.briques-cpt{position:relative;display:grid;place-items:center;min-width:112px;height:17px}
.briques-cpt span{position:absolute;white-space:nowrap;font-family:var(--disp);font-size:10px;
	font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.5)}
.briques-cpt span:nth-child(1){color:rgba(255,255,255,.42);animation:bCnt0 var(--cyc) steps(1) both infinite}
.briques-cpt span:nth-child(2){animation:bCnt1 var(--cyc) steps(1) both infinite}
.briques-cpt span:nth-child(3){animation:bCnt2 var(--cyc) steps(1) both infinite}
.briques-cpt span:nth-child(4){color:rgba(255,255,255,.62);animation:bCnt3 var(--cyc) steps(1) both infinite}
.briques-cpt b{color:var(--honey)}
.briques-filet{flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.16),transparent)}
.briques-garantie{display:inline-flex;align-items:center;gap:5px;font-family:var(--disp);font-size:9px;
	font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--aqua)}

@keyframes brick1{0%,5%{opacity:0;transform:translate(24px,-18px) scale(.4) rotate(-50deg)}12%,88%{opacity:1;transform:none}94%,100%{opacity:0;transform:translate(24px,-18px) scale(.4) rotate(-50deg)}}
@keyframes brick2{0%,31%{opacity:0;transform:translate(24px,-18px) scale(.4) rotate(-50deg)}38%,88%{opacity:1;transform:none}94%,100%{opacity:0;transform:translate(24px,-18px) scale(.4) rotate(-50deg)}}
@keyframes brick3{0%,57%{opacity:0;transform:translate(-20px,18px) scale(.4) rotate(40deg)}64%,88%{opacity:1;transform:none}94%,100%{opacity:0;transform:translate(-20px,18px) scale(.4) rotate(40deg)}}
@keyframes slot1{0%,7%{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);box-shadow:none}12%{background:rgba(249,190,0,.3);border-color:var(--honey);box-shadow:0 0 22px rgba(249,190,0,.8)}18%,88%{background:rgba(249,190,0,.14);border-color:rgba(249,190,0,.5);box-shadow:0 0 12px rgba(249,190,0,.24)}94%,100%{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);box-shadow:none}}
@keyframes slot2{0%,33%{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);box-shadow:none}38%{background:rgba(249,190,0,.3);border-color:var(--honey);box-shadow:0 0 22px rgba(249,190,0,.8)}44%,88%{background:rgba(249,190,0,.14);border-color:rgba(249,190,0,.5);box-shadow:0 0 12px rgba(249,190,0,.24)}94%,100%{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);box-shadow:none}}
@keyframes slot3{0%,59%{opacity:0;transform:translateY(8px) scale(.9)}64%{opacity:1;transform:none;box-shadow:0 0 26px rgba(249,190,0,.7)}70%,88%{opacity:1;transform:none;box-shadow:0 0 14px rgba(249,190,0,.3)}94%,100%{opacity:0;transform:translateY(8px) scale(.9)}}
@keyframes chatDot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
@keyframes stk1{0%,22%{opacity:1}25%,100%{opacity:0}}
@keyframes stk2{0%,23%{opacity:0}26%,47%{opacity:1}50%,100%{opacity:0}}
@keyframes stk3{0%,48%{opacity:0}51%,72%{opacity:1}75%,100%{opacity:0}}
@keyframes stk4{0%,73%{opacity:0}76%,97%{opacity:1}100%{opacity:0}}
@keyframes bCnt0{0%,11%{opacity:1}12%,100%{opacity:0}}
@keyframes bCnt1{0%,11%{opacity:0}12%,37%{opacity:1}38%,100%{opacity:0}}
@keyframes bCnt2{0%,37%{opacity:0}38%,63%{opacity:1}64%,100%{opacity:0}}
@keyframes bCnt3{0%,63%{opacity:0}64%,92%{opacity:1}93%,100%{opacity:0}}

/* --- Hero developpement : le meme besoin, deux approches ------------------
   Les deux colonnes avancent au meme rythme, un seul jeu de keyframes sert
   les deux : c est ce synchronisme qui rend la comparaison lisible. */

.compa2{--cyc:12s}
.compa2-barre{position:absolute;left:0;right:0;top:0;height:40px;display:flex;align-items:center;
	gap:10px;padding:0 15px;border-bottom:1px solid var(--line);background:rgba(12,10,20,.5)}
.compa2-stack{margin-left:auto;position:relative;display:grid;place-items:center;min-width:74px;height:18px}
.compa2-stack span{position:absolute;white-space:nowrap;padding:3px 9px;border-radius:20px;
	border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);
	font-family:var(--disp);font-size:8.5px;font-weight:700;letter-spacing:.08em;
	text-transform:uppercase;color:rgba(255,255,255,.55)}
.compa2-stack span:nth-child(1){animation:stk1 var(--cyc) steps(1) both infinite}
.compa2-stack span:nth-child(2){animation:stk2 var(--cyc) steps(1) both infinite}
.compa2-stack span:nth-child(3){animation:stk3 var(--cyc) steps(1) both infinite}
.compa2-stack span:nth-child(4){animation:stk4 var(--cyc) steps(1) both infinite}

.compa2-cols{position:absolute;left:15px;right:15px;top:50px;bottom:48px;display:flex;gap:11px}
.compa2-col{flex:1;min-width:0;display:flex;flex-direction:column}
.compa2-tete{flex:none;display:flex;align-items:center;gap:6px;margin-bottom:7px;
	font-family:var(--disp);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.compa2-tete b{width:8px;height:9px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.compa2-cms .compa2-tete{color:rgba(255,255,255,.5)}
.compa2-cms .compa2-tete b{background:rgba(255,255,255,.3)}
.compa2-sur .compa2-tete{color:var(--honey)}
.compa2-sur .compa2-tete b{background:var(--honey)}

/* La pile est posee sur des offsets en pourcentage : elle remplit sa zone
   quelle que soit la taille du panneau. */
.pile{position:relative;flex:1;min-height:0}
.pile span{position:absolute;left:0;right:0;height:calc(20% - 4px);display:flex;align-items:center;
	gap:6px;padding:0 9px;border-radius:6px;background:rgba(255,255,255,.085);
	font-size:9px;color:rgba(255,255,255,.62);white-space:nowrap;overflow:hidden}
.pile span:nth-child(1){bottom:0;background:rgba(255,255,255,.13);color:rgba(255,255,255,.75)}
.pile span:nth-child(2){bottom:20%;animation:app1 var(--cyc) ease-out both infinite}
.pile span:nth-child(3){bottom:40%;animation:app2 var(--cyc) ease-out both infinite}
.pile span:nth-child(4){bottom:60%;animation:app3 var(--cyc) ease-out both infinite}
.pile span:nth-child(5){bottom:80%;border:1px solid rgba(255,61,139,.5);background:rgba(255,61,139,.1);
	color:var(--white);animation:app4 var(--cyc) ease-out both infinite}

.bloc-code{position:relative;flex:none;padding:9px 10px;border:1px solid rgba(249,190,0,.45);
	border-radius:6px;background:linear-gradient(150deg,rgba(249,190,0,.16),rgba(249,190,0,.05));overflow:hidden}
.bloc-code i{position:absolute;left:0;right:0;top:0;height:16px;pointer-events:none;
	background:linear-gradient(to bottom,transparent,rgba(255,224,102,.28),transparent);
	animation:codeSweep var(--cyc) ease-in-out infinite}
.bloc-code b{position:relative;display:block;font-family:var(--disp);font-size:8px;font-weight:800;
	letter-spacing:.08em;text-transform:uppercase;color:var(--honey);margin-bottom:6px}
.bloc-code u{position:relative;display:flex;flex-direction:column;gap:5px;text-decoration:none}
.bloc-code u span{font-size:9px;line-height:1.2;color:rgba(255,255,255,.8);white-space:nowrap}
.bloc-code u span:nth-child(1){animation:app1 var(--cyc) ease-out both infinite}
.bloc-code u span:nth-child(2){animation:app2 var(--cyc) ease-out both infinite}
.bloc-code u span:nth-child(3){animation:app3 var(--cyc) ease-out both infinite}
.bloc-code u span:nth-child(4){animation:app4 var(--cyc) ease-out both infinite}

.compa2-mesure{flex:none;margin-top:8px}
.compa2-rail{position:relative;display:block;height:4px;border-radius:3px;background:rgba(255,255,255,.09);overflow:hidden}
.compa2-rail b{position:absolute;left:0;top:0;bottom:0;border-radius:3px}
.compa2-cms .compa2-rail b{animation:barCms var(--cyc) ease-out both infinite}
.compa2-sur .compa2-rail b{width:19%;background:linear-gradient(90deg,var(--honey-deep),var(--honey-light));
	box-shadow:0 0 12px rgba(249,190,0,.5)}
.compa2-chrono{position:relative;display:grid;place-items:start;height:15px;margin-top:5px}
.compa2-chrono span{position:absolute;font-family:var(--disp);font-size:9.5px;font-weight:700;color:rgba(255,255,255,.5)}
.compa2-chrono span:nth-child(1){animation:t0 var(--cyc) steps(1) both infinite}
.compa2-chrono span:nth-child(2){animation:t1 var(--cyc) steps(1) both infinite}
.compa2-chrono span:nth-child(3){animation:t2 var(--cyc) steps(1) both infinite}
.compa2-chrono span:nth-child(4){animation:t3 var(--cyc) steps(1) both infinite}
.compa2-chrono span:nth-child(5){color:var(--neon);animation:t4 var(--cyc) steps(1) both infinite}
.compa2-fixe{display:block;height:15px;margin-top:5px;font-family:var(--disp);font-size:9.5px;
	font-weight:800;color:var(--honey)}

.compa2-pied{position:absolute;left:15px;right:15px;bottom:14px;display:flex;align-items:center;gap:10px}
.compa2-cpt{position:relative;display:grid;place-items:center;min-width:104px;height:17px}
.compa2-cpt span{position:absolute;white-space:nowrap;font-family:var(--disp);font-size:9.5px;
	font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.5)}
.compa2-cpt span:nth-child(1){animation:p0 var(--cyc) steps(1) both infinite}
.compa2-cpt span:nth-child(2){animation:p1 var(--cyc) steps(1) both infinite}
.compa2-cpt span:nth-child(3){animation:p2 var(--cyc) steps(1) both infinite}
.compa2-cpt span:nth-child(4){animation:p3 var(--cyc) steps(1) both infinite}
.compa2-cpt span:nth-child(5){color:var(--neon);animation:p4 var(--cyc) steps(1) both infinite}
.compa2-filet{flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.16),transparent)}
.compa2-verdict{padding:4px 11px;border-radius:20px;background:rgba(249,190,0,.16);
	border:1px solid rgba(249,190,0,.45);font-family:var(--disp);font-size:9px;font-weight:800;
	letter-spacing:.08em;text-transform:uppercase;color:var(--honey);white-space:nowrap;
	animation:verdictIn var(--cyc) cubic-bezier(.2,.7,.2,1) both infinite}

@keyframes app1{0%,6%{opacity:0;transform:translateY(-7px)}12%,88%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(-7px)}}
@keyframes app2{0%,20%{opacity:0;transform:translateY(-7px)}26%,88%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(-7px)}}
@keyframes app3{0%,34%{opacity:0;transform:translateY(-7px)}40%,88%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(-7px)}}
@keyframes app4{0%,48%{opacity:0;transform:translateY(-7px)}54%,88%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(-7px)}}
@keyframes barCms{0%,8%{width:19%;background:rgba(255,255,255,.3)}14%,22%{width:38%}28%,36%{width:57%}42%,50%{width:78%}56%,88%{width:100%;background:linear-gradient(90deg,rgba(255,255,255,.3),var(--neon))}94%,100%{width:19%;background:rgba(255,255,255,.3)}}
@keyframes t0{0%,11%{opacity:1}12%,100%{opacity:0}}
@keyframes t1{0%,11%{opacity:0}12%,25%{opacity:1}26%,100%{opacity:0}}
@keyframes t2{0%,25%{opacity:0}26%,39%{opacity:1}40%,100%{opacity:0}}
@keyframes t3{0%,39%{opacity:0}40%,53%{opacity:1}54%,100%{opacity:0}}
@keyframes t4{0%,53%{opacity:0}54%,92%{opacity:1}93%,100%{opacity:0}}
@keyframes p0{0%,11%{opacity:1}12%,100%{opacity:0}}
@keyframes p1{0%,11%{opacity:0}12%,25%{opacity:1}26%,100%{opacity:0}}
@keyframes p2{0%,25%{opacity:0}26%,39%{opacity:1}40%,100%{opacity:0}}
@keyframes p3{0%,39%{opacity:0}40%,53%{opacity:1}54%,100%{opacity:0}}
@keyframes p4{0%,53%{opacity:0}54%,92%{opacity:1}93%,100%{opacity:0}}
@keyframes verdictIn{0%,58%{opacity:0;transform:translateY(6px)}66%,88%{opacity:1;transform:none}94%,100%{opacity:0}}
@keyframes codeSweep{0%{opacity:0;transform:translateY(-100%)}12%{opacity:1}40%{opacity:0;transform:translateY(320%)}100%{opacity:0;transform:translateY(320%)}}

/* --- Hero SMS : on redige, on envoie, les telephones vibrent ------------- */

.sms{--cyc:10s}
.sms-usage{margin-left:auto;position:relative;display:grid;place-items:center;min-width:80px;height:18px}
.sms-usage span{position:absolute;white-space:nowrap;padding:3px 9px;border-radius:20px;
	border:1px solid rgba(34,230,230,.34);background:rgba(34,230,230,.09);
	font-family:var(--disp);font-size:8.5px;font-weight:700;letter-spacing:.08em;
	text-transform:uppercase;color:var(--aqua)}
.sms-usage span:nth-child(1){animation:stk1 var(--cyc) steps(1) both infinite}
.sms-usage span:nth-child(2){animation:stk2 var(--cyc) steps(1) both infinite}
.sms-usage span:nth-child(3){animation:stk3 var(--cyc) steps(1) both infinite}
.sms-usage span:nth-child(4){animation:stk4 var(--cyc) steps(1) both infinite}

.sms-zone{position:absolute;left:15px;right:15px;top:50px;bottom:48px;container-type:size}
/* Le gap vit sur cet enfant : il ne peut pas se resoudre contre le conteneur
   qui le declare, et retomberait sur le viewport. */
.sms-in{height:100%;display:flex;gap:clamp(8px,4cqw,14px)}
.sms-col{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(4px,6cqh,12px)}
.sms-col.gauche{flex:1.05}
.sms-col.droite{flex:1}
.sms-tete{flex:none;display:flex;align-items:center;gap:6px}
.sms-tete i{width:8px;height:9px;flex:none;
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.sms-tete b{font-family:var(--disp);font-size:clamp(6.5px,8cqh,9px);font-weight:700;
	letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;overflow:hidden}
.sms-tete.miel i{background:var(--honey)}
.sms-tete.miel b{color:var(--honey)}
.sms-tete.aqua i{background:var(--aqua)}
.sms-tete.aqua b{color:var(--aqua)}

.sms-piste{flex:none;position:relative;height:clamp(4px,7cqh,17px);border-radius:3px;
	background:rgba(255,255,255,.06);overflow:hidden}
.sms-piste.l1{width:100%}
.sms-piste.l2{width:78%}
.sms-piste i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;
	background:rgba(255,255,255,.24)}
.sms-piste.l1 i{animation:smsWrite var(--cyc) ease-out both infinite}
.sms-piste.l2 i{animation:smsWrite2 var(--cyc) ease-out both infinite}
.sms-piste em{position:absolute;right:-6px;top:-2px;bottom:-2px;width:2px;border-radius:1px;
	background:var(--honey);box-shadow:0 0 8px rgba(249,190,0,.8);
	animation:cursorBlink 1.1s steps(1) infinite}

.sms-envoi{flex:none;display:flex;align-items:center;gap:7px;margin-top:clamp(3px,4cqh,10px)}
.sms-bouton{position:relative;flex:none;display:grid;place-items:center;
	width:clamp(26px,17cqh,40px);height:clamp(26px,17cqh,40px);border-radius:50%;
	background:var(--honey);animation:sendPress var(--cyc) cubic-bezier(.3,1.5,.5,1) both infinite}
.sms-bouton i{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--honey)}
.sms-bouton i:nth-of-type(1){animation:pulse1 var(--cyc) ease-out both infinite}
.sms-bouton i:nth-of-type(2){border-color:var(--honey-light);animation:pulse2 var(--cyc) ease-out both infinite}
.sms-envoi b{min-width:0;font-family:var(--disp);font-size:clamp(6.5px,8cqh,9.5px);
	font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--honey);
	white-space:nowrap;overflow:hidden}

/* La secousse porte sur la rangee entiere : le telephone et son message. */
.sms-recept{flex:none;display:flex;align-items:center;gap:7px}
.sms-recept:nth-of-type(2){animation:buzz1 var(--cyc) steps(1) both infinite}
.sms-recept:nth-of-type(3){animation:buzz2 var(--cyc) steps(1) both infinite}
.sms-recept:nth-of-type(4){animation:buzz3 var(--cyc) steps(1) both infinite}
.sms-combine{flex:none;width:clamp(13px,9cqh,20px);height:clamp(21px,15cqh,32px);
	border-radius:3px;border:1.4px solid rgba(255,255,255,.34);background:rgba(255,255,255,.05)}
.sms-bulle{flex:1;min-width:0;position:relative;height:clamp(10px,13cqh,26px);
	border-radius:6px 6px 6px 2px;
	background:linear-gradient(100deg,rgba(249,190,0,.26),rgba(249,190,0,.09));
	border:1px solid rgba(249,190,0,.42)}
.sms-recept:nth-of-type(2) .sms-bulle{animation:recv1 var(--cyc) cubic-bezier(.3,1.5,.5,1) both infinite}
.sms-recept:nth-of-type(3) .sms-bulle{animation:recv2 var(--cyc) cubic-bezier(.3,1.5,.5,1) both infinite}
.sms-recept:nth-of-type(4) .sms-bulle{animation:recv3 var(--cyc) cubic-bezier(.3,1.5,.5,1) both infinite}

.sms-pied{position:absolute;left:15px;right:15px;bottom:14px;display:flex;align-items:center;gap:11px}
.sms-lib{flex:none;font-family:var(--disp);font-size:9px;font-weight:700;letter-spacing:.1em;
	text-transform:uppercase;color:rgba(255,255,255,.45);white-space:nowrap}
.sms-jauge{position:relative;flex:1;min-width:0;height:5px;border-radius:4px;
	background:rgba(255,255,255,.09);overflow:hidden}
.sms-jauge i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;
	background:linear-gradient(90deg,var(--honey-deep),var(--honey-light));
	box-shadow:0 0 12px rgba(249,190,0,.45);animation:readBar var(--cyc) ease-out both infinite}
/* Fond opaque : sans lui la valeur se pose sur le contour de l hexagone. */
.sms-taux{position:relative;flex:none;display:grid;place-items:center;min-width:52px;height:21px;
	padding:0 8px;border-radius:20px;border:1px solid rgba(249,190,0,.32);background:rgba(12,10,20,.72)}
.sms-taux span{position:absolute;white-space:nowrap;font-family:var(--disp);font-size:11px;
	font-weight:800}
.sms-taux span:nth-child(1){color:rgba(255,255,255,.5);animation:rd0 var(--cyc) steps(1) both infinite}
.sms-taux span:nth-child(2){color:rgba(255,255,255,.62);animation:rd1 var(--cyc) steps(1) both infinite}
.sms-taux span:nth-child(3){color:var(--honey-deep);animation:rd2 var(--cyc) steps(1) both infinite}
.sms-taux span:nth-child(4){color:var(--honey);text-shadow:0 0 12px rgba(249,190,0,.7);
	animation:rd3 var(--cyc) steps(1) both infinite}

@keyframes smsWrite{0%,5%{width:0}16%,88%{width:100%}95%,100%{width:0}}
@keyframes smsWrite2{0%,12%{width:0}23%,88%{width:100%}95%,100%{width:0}}

@keyframes sendPress{
	0%,27%{transform:scale(1);box-shadow:0 0 14px rgba(249,190,0,.35)}
	30%{transform:scale(.94);box-shadow:0 0 30px rgba(249,190,0,.9)}
	34%,88%{transform:scale(1);box-shadow:0 0 14px rgba(249,190,0,.35)}
	95%,100%{transform:scale(1);box-shadow:0 0 14px rgba(249,190,0,.35)}
}
@keyframes pulse1{0%,29%{opacity:0;transform:scale(.4)}33%{opacity:.85}44%,100%{opacity:0;transform:scale(2.6)}}
@keyframes pulse2{0%,33%{opacity:0;transform:scale(.4)}37%{opacity:.7}50%,100%{opacity:0;transform:scale(2.9)}}

@keyframes buzz1{
	0%,35%{transform:translate(0,0)}
	37%{transform:translate(-2px,1px) rotate(-2deg)}
	39%{transform:translate(2px,-1px) rotate(2deg)}
	41%,100%{transform:translate(0,0)}
}
@keyframes buzz2{
	0%,45%{transform:translate(0,0)}
	47%{transform:translate(-2px,1px) rotate(-2deg)}
	49%{transform:translate(2px,-1px) rotate(2deg)}
	51%,100%{transform:translate(0,0)}
}
@keyframes buzz3{
	0%,55%{transform:translate(0,0)}
	57%{transform:translate(-2px,1px) rotate(-2deg)}
	59%{transform:translate(2px,-1px) rotate(2deg)}
	61%,100%{transform:translate(0,0)}
}
@keyframes recv1{0%,34%{opacity:0;transform:translateY(6px)}39%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:translateY(6px)}}
@keyframes recv2{0%,44%{opacity:0;transform:translateY(6px)}49%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:translateY(6px)}}
@keyframes recv3{0%,54%{opacity:0;transform:translateY(6px)}59%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:translateY(6px)}}

@keyframes readBar{
	0%,36%{width:4%}
	40%,45%{width:33%}
	50%,55%{width:64%}
	60%,88%{width:98%}
	95%,100%{width:4%}
}
@keyframes rd0{0%,38%{opacity:1}39%,100%{opacity:0}}
@keyframes rd1{0%,38%{opacity:0}39%,48%{opacity:1}49%,100%{opacity:0}}
@keyframes rd2{0%,48%{opacity:0}49%,58%{opacity:1}59%,100%{opacity:0}}
@keyframes rd3{0%,58%{opacity:0}59%,90%{opacity:1}91%,100%{opacity:0}}

/* --- Hero formation : les acquis se cochent ------------------------------ */

.forma{--cyc:9s}
.forma-liste{position:absolute;left:18px;right:18px;top:52px;bottom:52px;
	display:flex;flex-direction:column;justify-content:center;gap:11px}
.forma-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;
	border:1px solid var(--line);background:rgba(255,255,255,.04);
	font-size:11.5px;color:var(--muted);animation:formaCoche var(--cyc) ease-in-out both infinite}
.forma-item:nth-child(2){animation-delay:calc(var(--cyc) * .18)}
.forma-item:nth-child(3){animation-delay:calc(var(--cyc) * .36)}
.forma-item:nth-child(4){animation-delay:calc(var(--cyc) * .54)}
.forma-case{flex:none;width:18px;height:21px;display:grid;place-items:center;
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
	background:rgba(255,255,255,.1);animation:formaCase var(--cyc) ease-in-out both infinite}
.forma-item:nth-child(2) .forma-case{animation-delay:calc(var(--cyc) * .18)}
.forma-item:nth-child(3) .forma-case{animation-delay:calc(var(--cyc) * .36)}
.forma-item:nth-child(4) .forma-case{animation-delay:calc(var(--cyc) * .54)}

@keyframes formaCoche{0%,10%{border-color:var(--line);background:rgba(255,255,255,.04);color:var(--muted)}
	18%,86%{border-color:rgba(249,190,0,.45);background:rgba(249,190,0,.1);color:var(--white)}
	94%,100%{border-color:var(--line);background:rgba(255,255,255,.04);color:var(--muted)}}
@keyframes formaCase{0%,10%{background:rgba(255,255,255,.1)}18%,86%{background:var(--honey)}94%,100%{background:rgba(255,255,255,.1)}}

/* --- Hero redaction : la page s ecrit, les mots cles s allument ---------- */

.redac{--cyc:11s}
.redac-type{margin-left:auto;position:relative;display:grid;place-items:center;
	min-width:80px;height:18px}
.redac-type span{position:absolute;white-space:nowrap;padding:3px 9px;border-radius:20px;
	border:1px solid rgba(34,230,230,.34);background:rgba(34,230,230,.09);
	font-family:var(--disp);font-size:8.5px;font-weight:700;letter-spacing:.08em;
	text-transform:uppercase;color:var(--aqua)}
.redac-type span:nth-child(1){animation:stk1 var(--cyc) steps(1) both infinite}
.redac-type span:nth-child(2){animation:stk2 var(--cyc) steps(1) both infinite}
.redac-type span:nth-child(3){animation:stk3 var(--cyc) steps(1) both infinite}
.redac-type span:nth-child(4){animation:stk4 var(--cyc) steps(1) both infinite}

.redac-doc{position:absolute;left:15px;right:15px;top:50px;bottom:48px;container-type:size}
/* Le gap vit sur cet enfant : il ne peut pas se resoudre contre le conteneur
   qui le declare, et retomberait sur le viewport. */
.redac-in{height:100%;display:flex;flex-direction:column;justify-content:center;
	gap:clamp(3px,8cqh,24px)}
.redac-rang{flex:none;display:flex;align-items:center;gap:7px}
.redac-rang.bas{margin-top:clamp(2px,3cqh,10px)}
.redac-bal{flex:none;padding:1px 5px;border-radius:3px;font-family:var(--disp);
	font-size:clamp(5.5px,8cqh,10px);font-weight:800;letter-spacing:.06em}
.redac-bal.un{background:rgba(249,190,0,.2);color:var(--honey)}
.redac-bal.deux{background:rgba(34,230,230,.18);color:var(--aqua)}

.redac-piste{flex:none;position:relative;height:clamp(4px,7cqh,19px);border-radius:3px;
	background:rgba(255,255,255,.06);overflow:hidden}
.redac-piste.titre{height:clamp(6px,11cqh,30px)}
.redac-piste.sous{height:clamp(5px,9cqh,25px)}
.redac-piste i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;
	background:rgba(255,255,255,.2)}
.redac-piste b{position:absolute;top:0;bottom:0;border-radius:3px;background:var(--honey)}
.redac-piste em{position:absolute;right:-6px;top:-2px;bottom:-2px;width:2px;border-radius:1px;
	background:var(--honey);box-shadow:0 0 8px rgba(249,190,0,.8);
	animation:cursorBlink 1.1s steps(1) infinite}

.redac-l1{width:62%}
.redac-l2{width:100%}
.redac-l3{width:94%}
.redac-l4{width:48%}
.redac-l5{width:100%}
.redac-l6{width:82%}
.redac-l1 i{background:rgba(255,224,102,.5);animation:write1 var(--cyc) ease-out both infinite}
.redac-l2 i{animation:write2 var(--cyc) ease-out both infinite}
.redac-l3 i{animation:write3 var(--cyc) ease-out both infinite}
.redac-l4 i{background:rgba(255,255,255,.28);animation:write4 var(--cyc) ease-out both infinite}
.redac-l5 i{animation:write5 var(--cyc) ease-out both infinite}
.redac-l6 i{animation:write6 var(--cyc) ease-out both infinite}
.redac-l3 b{left:30%;width:28%;animation:kw1 var(--cyc) ease-out both infinite}
.redac-l5 b{left:52%;width:24%;animation:kw2 var(--cyc) ease-out both infinite}
.redac-l6 b{left:14%;width:22%;animation:kw3 var(--cyc) ease-out both infinite}

.redac-score{position:absolute;left:15px;right:15px;bottom:14px;display:flex;
	align-items:center;gap:11px}
.redac-score-lib{flex:none;font-family:var(--disp);font-size:9px;font-weight:700;
	letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.redac-jauge{position:relative;flex:1;min-width:0;height:5px;border-radius:4px;
	background:rgba(255,255,255,.09);overflow:hidden}
.redac-jauge i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;
	box-shadow:0 0 12px rgba(249,190,0,.45);animation:scoreBar var(--cyc) ease-out both infinite}
/* Fond opaque : sans lui la note se pose sur le contour de l hexagone decoratif. */
.redac-note{position:relative;flex:none;display:grid;place-items:center;min-width:60px;
	height:21px;padding:0 8px;border-radius:20px;border:1px solid rgba(249,190,0,.32);
	background:rgba(12,10,20,.72)}
.redac-note span{position:absolute;white-space:nowrap;font-family:var(--disp);font-size:11px;
	font-weight:800}
.redac-note b{font-size:8px;font-weight:800;opacity:.6}
.redac-note span:nth-child(1){color:rgba(255,255,255,.5);animation:sc0 var(--cyc) steps(1) both infinite}
.redac-note span:nth-child(2){color:rgba(255,255,255,.62);animation:sc1 var(--cyc) steps(1) both infinite}
.redac-note span:nth-child(3){color:var(--honey-deep);animation:sc2 var(--cyc) steps(1) both infinite}
.redac-note span:nth-child(4){color:var(--honey);text-shadow:0 0 12px rgba(249,190,0,.7);
	animation:sc3 var(--cyc) steps(1) both infinite}

@keyframes write1{0%,4%{width:0}12%,90%{width:100%}96%,100%{width:0}}
@keyframes write2{0%,14%{width:0}22%,90%{width:100%}96%,100%{width:0}}
@keyframes write3{0%,24%{width:0}32%,90%{width:100%}96%,100%{width:0}}
@keyframes write4{0%,34%{width:0}42%,90%{width:100%}96%,100%{width:0}}
@keyframes write5{0%,44%{width:0}52%,90%{width:100%}96%,100%{width:0}}
@keyframes write6{0%,54%{width:0}62%,90%{width:100%}96%,100%{width:0}}

@keyframes kw1{0%,32%{opacity:0;box-shadow:none}38%,90%{opacity:1;box-shadow:0 0 10px rgba(249,190,0,.6)}96%,100%{opacity:0;box-shadow:none}}
@keyframes kw2{0%,52%{opacity:0;box-shadow:none}58%,90%{opacity:1;box-shadow:0 0 10px rgba(249,190,0,.6)}96%,100%{opacity:0;box-shadow:none}}
@keyframes kw3{0%,62%{opacity:0;box-shadow:none}68%,90%{opacity:1;box-shadow:0 0 10px rgba(249,190,0,.6)}96%,100%{opacity:0;box-shadow:none}}

@keyframes scoreBar{
	0%,6%{width:42%;background:rgba(255,255,255,.28)}
	38%,57%{width:68%;background:linear-gradient(90deg,rgba(255,255,255,.3),var(--honey-deep))}
	58%,67%{width:84%;background:linear-gradient(90deg,var(--honey-deep),var(--honey))}
	68%,90%{width:96%;background:linear-gradient(90deg,var(--honey-deep),var(--honey-light))}
	96%,100%{width:42%;background:rgba(255,255,255,.28)}
}
@keyframes sc0{0%,37%{opacity:1}38%,100%{opacity:0}}
@keyframes sc1{0%,37%{opacity:0}38%,57%{opacity:1}58%,100%{opacity:0}}
@keyframes sc2{0%,57%{opacity:0}58%,67%{opacity:1}68%,100%{opacity:0}}
@keyframes sc3{0%,67%{opacity:0}68%,92%{opacity:1}93%,100%{opacity:0}}

@keyframes cursorBlink{0%,45%{opacity:1}50%,95%{opacity:0}100%{opacity:1}}


/* --- Hero agence 77 : les projets s allument ----------------------------- */

.projets{--cyc:11s}
.projets-grille{position:absolute;left:18px;right:18px;top:52px;bottom:52px;
	display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:8px;place-items:center}
.projets-grille span{width:100%;aspect-ratio:1/.9;
	clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
	background:rgba(255,255,255,.07);animation:projetAllume var(--cyc) ease-in-out both infinite}
.projets-grille span:nth-child(3n){background:rgba(249,190,0,.16)}

@keyframes projetAllume{0%,4%{opacity:.2;transform:scale(.9)}14%,86%{opacity:1;transform:none}94%,100%{opacity:.2;transform:scale(.9)}}

.projets-grille span:nth-child(1){animation-delay:calc(var(--cyc) * .03)}
.projets-grille span:nth-child(2){animation-delay:calc(var(--cyc) * .06)}
.projets-grille span:nth-child(3){animation-delay:calc(var(--cyc) * .09)}
.projets-grille span:nth-child(4){animation-delay:calc(var(--cyc) * .12)}
.projets-grille span:nth-child(5){animation-delay:calc(var(--cyc) * .15)}
.projets-grille span:nth-child(6){animation-delay:calc(var(--cyc) * .18)}
.projets-grille span:nth-child(7){animation-delay:calc(var(--cyc) * .21)}
.projets-grille span:nth-child(8){animation-delay:calc(var(--cyc) * .24)}
.projets-grille span:nth-child(9){animation-delay:calc(var(--cyc) * .27)}
.projets-grille span:nth-child(10){animation-delay:calc(var(--cyc) * .30)}
.projets-grille span:nth-child(11){animation-delay:calc(var(--cyc) * .33)}
.projets-grille span:nth-child(12){animation-delay:calc(var(--cyc) * .36)}
.projets-grille span:nth-child(13){animation-delay:calc(var(--cyc) * .39)}
.projets-grille span:nth-child(14){animation-delay:calc(var(--cyc) * .42)}
.projets-grille span:nth-child(15){animation-delay:calc(var(--cyc) * .45)}
.projets-grille span:nth-child(16){animation-delay:calc(var(--cyc) * .48)}

/* --- Realisations : bandeau compact ------------------------------------- */

.bandeau{padding:clamp(120px,15vh,160px) clamp(18px,5vw,80px) clamp(34px,5vh,54px);
	background:linear-gradient(180deg,#12101a 0%,#1b1330 60%,#241a3a 100%)}
.bandeau .grille-perspective{opacity:.42}
.bandeau-in{position:relative;max-width:1320px;margin:0 auto;display:grid;
	grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
	gap:clamp(24px,4vw,60px);align-items:end}
.bandeau .txt{max-width:620px}
.bandeau-chiffres{justify-self:end;display:flex;align-items:flex-end;gap:clamp(14px,2vw,26px)}
.bandeau-chiffres > div{text-align:right}
.bandeau-chiffres > div + div{padding-left:clamp(14px,2vw,26px);border-left:1px solid var(--line)}
.bandeau-chiffres .statNum{display:block;font-size:clamp(40px,6vw,86px);line-height:.9;
	text-shadow:0 0 26px rgba(249,190,0,.5)}
.bandeau-chiffres .statLib{display:block;margin-top:6px;font-family:var(--disp);font-size:11.5px;
	font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* --- Realisations : barre de filtres collante --------------------------- */

/* La barre ne colle que le temps de la galerie, pas jusqu au formulaire. */
.zone-galerie{position:relative}
#filtres{position:sticky;top:76px;z-index:150;padding:10px clamp(18px,5vw,80px);
	background:rgba(18,16,26,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
	border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.filtres-in{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:14px;
	flex-wrap:nowrap;min-width:0}
#filtres-lib{flex:none;font-family:var(--disp);font-size:10.5px;font-weight:700;
	letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
#filtres [role="tablist"]{display:flex;gap:8px;flex-wrap:nowrap;flex:1 1 auto;min-width:0;
	overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;
	padding:4px 0 5px}
#filtres [role="tablist"]::-webkit-scrollbar{display:none}
.filt{flex:none;white-space:nowrap;padding:9px 16px;border:1px solid var(--line);
	border-radius:40px;background:rgba(255,255,255,.04);color:var(--white);
	font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;
	transition:border-color .22s ease,background .22s ease,color .22s ease,transform .22s ease}
.filt:hover{border-color:var(--honey);transform:translateY(-2px)}
.filt:focus-visible{outline:2px solid var(--honey);outline-offset:3px}
.filt[aria-selected="true"]{background:var(--honey);border-color:var(--honey);color:var(--ink);
	font-weight:700;box-shadow:0 0 24px rgba(249,190,0,.45)}
@media (max-width:560px){#filtres-lib{display:none}}

/* --- Realisations : la galerie ------------------------------------------ */

.galerie-sec{padding:clamp(30px,5vh,56px) clamp(18px,5vw,80px) clamp(56px,9vh,100px);
	background:linear-gradient(180deg,#241a3a,#1a1526 40%,#12101a)}
.galerie{position:relative;max-width:1320px;margin:0 auto;display:grid;
	grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:clamp(14px,2vw,22px)}
/* display sur les tuiles, donc la regle du navigateur ne suffit pas. */
.galerie > [hidden]{display:none}

.card{position:relative;display:flex;flex-direction:column;min-height:190px;padding:20px;
	border:1px solid var(--line);border-radius:18px;
	background:linear-gradient(155deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
	color:var(--white);overflow:hidden;
	transition:transform .38s cubic-bezier(.2,.7,.2,1),border-color .3s ease,box-shadow .38s ease}
.card:hover{transform:translateY(-8px);border-color:rgba(249,190,0,.55);
	box-shadow:0 0 40px rgba(249,190,0,.28)}
.card:focus-visible{outline:2px solid var(--honey);outline-offset:3px}

.cimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
	filter:saturate(.7) brightness(.5);transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .35s ease}
.card:hover .cimg{transform:scale(1.06);filter:saturate(1) brightness(.62)}
.card-img::before{content:"";position:absolute;inset:0;
	background:linear-gradient(180deg,rgba(18,16,26,.1) 18%,rgba(18,16,26,.72) 58%,rgba(18,16,26,.96) 100%)}

.mono{position:absolute;right:-14px;top:-16px;width:96px;height:106px;display:grid;
	place-items:center;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
	background:rgba(249,190,0,.1);font-family:var(--disp);font-weight:800;font-size:30px;
	color:rgba(249,190,0,.5);
	transition:transform .5s cubic-bezier(.2,.7,.2,1),background .3s ease,color .3s ease}
.card:hover .mono{background:var(--honey);color:var(--ink);transform:rotate(30deg) scale(1.06)}

/* Quand la carte porte une capture, la pastille reste une simple marque. */
.card-img .mono{right:14px;top:14px;width:20px;height:22px;font-size:0;
	background:rgba(249,190,0,.55);box-shadow:0 0 12px rgba(249,190,0,.35)}
.card-img:hover .mono{background:var(--honey);transform:rotate(30deg) scale(1.12)}

.ctxt{position:relative;margin-top:auto;display:flex;flex-direction:column;gap:8px}
.cname{font-family:var(--disp);font-weight:800;font-size:16.5px;line-height:1.16;
	letter-spacing:-.01em;transition:color .3s ease}
.card:hover .cname{color:var(--honey)}
.ctag{font-size:12.5px;line-height:1.45;color:var(--muted)}
.card-img .cname{text-shadow:0 2px 14px rgba(0,0,0,.7)}
.card-img .ctag{color:rgba(255,255,255,.9);text-shadow:0 1px 10px rgba(0,0,0,.85)}
.cgo{display:inline-flex;align-items:center;gap:7px;margin-top:4px;font-family:var(--disp);
	font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
	color:var(--honey);opacity:0;transform:translateY(6px);
	transition:opacity .3s ease,transform .3s ease}
.card:hover .cgo,.card:focus-visible .cgo{opacity:1;transform:none}

.sayTile{grid-column:span 2;display:flex;flex-direction:column;justify-content:center;gap:12px;
	min-height:190px;padding:30px 28px;border:1px solid rgba(249,190,0,.3);border-radius:18px;
	background:linear-gradient(150deg,rgba(249,190,0,.16),rgba(255,255,255,.02));overflow:hidden;
	transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.sayTile:hover{transform:translateY(-4px)}
.sayTile-lien{border-color:rgba(249,190,0,.55);
	background:linear-gradient(150deg,rgba(249,190,0,.24),rgba(255,255,255,.03));
	transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .3s ease,box-shadow .3s ease}
.sayTile-lien:hover,.sayTile-lien:focus-visible{border-color:var(--honey);
	box-shadow:0 0 34px rgba(249,190,0,.26)}
.sayTile svg{flex:none}
.say1{font-family:var(--disp);font-weight:800;font-size:clamp(19px,2.2vw,30px);line-height:1.1;
	text-transform:uppercase;color:var(--white)}
.say2{font-family:var(--script);font-size:clamp(24px,2.8vw,38px);line-height:1;
	color:var(--honey);text-shadow:0 0 20px rgba(249,190,0,.45)}
@media (max-width:560px){.sayTile{grid-column:span 1}}

.galerie-vide{grid-column:1/-1;display:none;margin:0;padding:40px 0;text-align:center;
	color:var(--muted);font-size:14px}
.galerie[data-vide="1"] .galerie-vide{display:block}

/* ==========================================================================
   Page introuvable : le zero du 404 est un hexagone vide
   ========================================================================== */

.e404{
	position:relative;min-height:calc(100vh - 76px);display:flex;flex-direction:column;
	background:linear-gradient(180deg,#0c0a14 0%,#1b1330 40%,#3b2560 74%,#6b2f6e 100%);
	overflow:hidden;padding:0;
}
.e404-ciel{position:absolute;inset:0;pointer-events:none}
.e404-ciel > b{position:absolute;border-radius:50%;background:#fff;
	animation:twinkle 3.4s ease-in-out infinite}
.e404-scan{position:absolute;inset:0;opacity:.5;
	background:repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0 1px,transparent 1px 4px)}
.e404-crt{position:absolute;left:0;right:0;height:22%;
	background:linear-gradient(to bottom,transparent,rgba(255,255,255,.05) 45%,rgba(34,230,230,.06) 55%,transparent);
	animation:crtSweep 9s linear infinite}
.e404-abeille{position:absolute;left:50%;top:46%;animation:e404Vol 17s ease-in-out infinite}
.e404-abeille svg{display:block;width:clamp(34px,4.4vw,58px);height:auto;opacity:.9;
	filter:drop-shadow(0 0 14px rgba(249,190,0,.5))}
.e404-abeille g{transform-origin:60px 40px;animation:e404Ailes .09s linear infinite}

.e404-in{position:relative;z-index:10;flex:1;display:flex;flex-direction:column;
	align-items:center;justify-content:center;text-align:center;
	padding:clamp(14px,3vh,40px) clamp(18px,5vw,60px) clamp(16px,3vh,48px)}

.e404-etat{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;
	border:1px solid rgba(255,61,139,.4);border-radius:40px;background:rgba(12,10,20,.5);
	font-family:var(--disp);font-size:clamp(9.5px,1.1vw,11.5px);font-weight:700;
	letter-spacing:.22em;text-transform:uppercase;color:var(--neon)}
.e404-etat i{width:7px;height:7px;border-radius:50%;background:var(--neon);
	box-shadow:0 0 10px var(--neon);animation:blink 1.1s steps(1) infinite}

.e404-nombre{position:relative;margin-top:clamp(14px,2.5vh,26px)}
.e404-secousse{position:relative;animation:shake 6.5s steps(1) infinite}
.e404-chiffres{display:flex;align-items:center;justify-content:center;
	gap:clamp(4px,1vw,14px);font-family:var(--disp);font-weight:800;
	font-size:clamp(46px,min(20vw,23vh),250px);line-height:.86;letter-spacing:-.03em;
	color:var(--white)}
.e404-hexa{flex:none;width:.68em;height:.9em;display:grid;place-items:center;
	animation:hexGlow 4.4s ease-in-out infinite}
.e404-hexa svg{display:block;animation:hexSpin 26s linear infinite}
.e404-fantome{position:absolute;inset:0;pointer-events:none}
.e404-fantome.aqua{color:var(--aqua);animation:glitchA 6.5s steps(1) infinite}
.e404-fantome.neon{color:var(--neon);animation:glitchB 6.5s steps(1) infinite}
.e404-fantome span.e404-hexa{animation:none}
.e404-fantome span.e404-hexa svg{animation:none}

.e404 h1{margin:clamp(5px,1.2vh,16px) 0 0;line-height:1;font-weight:400}
.e404 h1 span{display:inline-block;font-family:var(--script);
	font-size:clamp(21px,min(6.4vw,8.5vh),84px);color:var(--honey);
	padding:.06em .16em .18em .1em;
	animation:markIn 1s .5s cubic-bezier(.7,0,.2,1) both,titleNeon 5.5s ease-in-out 1.6s infinite}
.e404 p{margin:clamp(9px,1.8vh,22px) 0 0;max-width:520px;
	font-size:clamp(14px,min(1.7vw,2.3vh),18px);line-height:1.66;color:var(--muted)}
.e404-sortie{margin-top:clamp(22px,4.4vh,52px)}

.e404-horizon{position:relative;z-index:5;height:clamp(90px,16vh,180px);overflow:hidden}
.e404-horizon i{position:absolute;left:0;right:0;top:0;height:2px;
	background:linear-gradient(90deg,transparent,var(--honey) 24%,#fff 50%,var(--honey) 76%,transparent);
	box-shadow:0 0 26px 5px rgba(249,190,0,.55)}
.e404-horizon div{position:absolute;left:-25%;right:-25%;top:2px;bottom:0;
	perspective:280px;pointer-events:none}
.e404-horizon div > span{position:absolute;inset:0;transform:rotateX(74deg);
	transform-origin:bottom center;
	background-image:repeating-linear-gradient(to right,rgba(249,190,0,.42) 0 1px,transparent 1px 82px),
		repeating-linear-gradient(to bottom,rgba(255,61,139,.5) 0 1px,transparent 1px 60px);
	animation:e404Grille 2.6s linear infinite;
	-webkit-mask-image:linear-gradient(to bottom,transparent,#000 42%);
	mask-image:linear-gradient(to bottom,transparent,#000 42%)}

.rise{animation:riseIn .8s cubic-bezier(.2,.7,.2,1) both}

/* Sous 480 px de haut, le titre et le bouton suffisent a comprendre la page. */
@media (max-height:480px){
	.e404 p{display:none}
	.e404-horizon{height:clamp(60px,12vh,110px)}
}

@keyframes e404Grille{from{background-position:0 0,0 0}to{background-position:0 0,0 60px}}

@keyframes glitchA{
	0%,84%{opacity:0;transform:translate(0,0);clip-path:inset(0 0 100% 0)}
	85%{opacity:.9;transform:translate(-7px,-2px);clip-path:inset(14% 0 63% 0)}
	87%{opacity:.9;transform:translate(5px,1px);clip-path:inset(46% 0 32% 0)}
	88.5%{opacity:0;clip-path:inset(0 0 100% 0)}
	93%{opacity:.85;transform:translate(-4px,2px);clip-path:inset(70% 0 11% 0)}
	94.5%,100%{opacity:0;transform:translate(0,0);clip-path:inset(0 0 100% 0)}
}
@keyframes glitchB{
	0%,84%{opacity:0;transform:translate(0,0);clip-path:inset(0 0 100% 0)}
	85.5%{opacity:.85;transform:translate(8px,2px);clip-path:inset(36% 0 44% 0)}
	87.5%{opacity:.85;transform:translate(-6px,-1px);clip-path:inset(58% 0 22% 0)}
	89%{opacity:0;clip-path:inset(0 0 100% 0)}
	93.5%{opacity:.8;transform:translate(5px,-2px);clip-path:inset(22% 0 60% 0)}
	95%,100%{opacity:0;transform:translate(0,0);clip-path:inset(0 0 100% 0)}
}
@keyframes shake{
	0%,84%{transform:translate(0,0)}
	85.5%{transform:translate(3px,-1px)}
	87%{transform:translate(-2px,1px)}
	88.5%,92.5%{transform:translate(0,0)}
	93.5%{transform:translate(-2px,0)}
	95%,100%{transform:translate(0,0)}
}

@keyframes hexSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes hexGlow{
	0%,100%{filter:drop-shadow(0 0 10px rgba(249,190,0,.55)) drop-shadow(0 0 30px rgba(249,190,0,.28))}
	50%{filter:drop-shadow(0 0 16px rgba(249,190,0,.85)) drop-shadow(0 0 52px rgba(255,61,139,.4))}
}
@keyframes crtSweep{0%{transform:translateY(-30%)}100%{transform:translateY(130%)}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.15}}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}

@keyframes e404Vol{
	0%{transform:translate(-46vw,4vh) rotate(8deg)}
	22%{transform:translate(-16vw,-9vh) rotate(-6deg)}
	45%{transform:translate(18vw,5vh) rotate(9deg)}
	64%{transform:translate(41vw,-7vh) rotate(-4deg)}
	82%{transform:translate(8vw,10vh) rotate(6deg)}
	100%{transform:translate(-46vw,4vh) rotate(8deg)}
}
@keyframes e404Ailes{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.45)}}
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* --- Hero SaaS : les clients s abonnent, le revenu revient chaque mois --- */

.saas{--cyc:12s}
.saas-multi{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;
	padding:3px 9px;border-radius:20px;border:1px solid rgba(34,230,230,.34);
	background:rgba(34,230,230,.09);font-family:var(--disp);font-size:8.5px;font-weight:700;
	letter-spacing:.08em;text-transform:uppercase;color:var(--aqua);white-space:nowrap}
.saas-multi i{width:5px;height:5px;border-radius:50%;background:var(--aqua);
	box-shadow:0 0 7px var(--aqua)}

/* Tout est place en pourcentage dans un conteneur unique : aucun empilement
   dont la somme puisse depasser la hauteur, donc aucun rognage possible. */
.saas-scene{position:absolute;left:0;right:0;top:40px;bottom:44px}
.saas-scene svg.plan{position:absolute;inset:0;width:100%;height:100%}
.saas-fil{fill:none;stroke:rgba(249,190,0,.5);stroke-width:1.1;stroke-dasharray:60}
.saas-fil:nth-of-type(1){animation:wire1 var(--cyc) ease-out both infinite}
.saas-fil:nth-of-type(2){animation:wire2 var(--cyc) ease-out both infinite}
.saas-fil:nth-of-type(3){animation:wire3 var(--cyc) ease-out both infinite}
.saas-fil:nth-of-type(4){animation:wire4 var(--cyc) ease-out both infinite}

/* Duree courte et delais echelonnes : une pluie de paiements continue. */
.saas-paie{fill:var(--honey-light);animation:pay 2.6s linear infinite}
.saas-paie:nth-of-type(1){offset-path:path('M46 38 L100 75');animation-delay:.6s}
.saas-paie:nth-of-type(2){offset-path:path('M154 38 L100 75');animation-delay:1.25s}
.saas-paie:nth-of-type(3){offset-path:path('M40 112 L100 75');animation-delay:1.9s}
.saas-paie:nth-of-type(4){offset-path:path('M160 112 L100 75');animation-delay:2.55s}

.saas-coeur{position:absolute;left:50%;top:50%;width:clamp(40px,15%,64px);aspect-ratio:1/1.1;
	transform:translate(-50%,-50%);display:grid;place-items:center}
.saas-coeur i{position:absolute;inset:0;
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
	border:1.5px solid var(--honey);animation:coreRing 3.4s ease-out infinite}
.saas-coeur b{position:absolute;inset:0;display:grid;place-items:center;
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
	background:linear-gradient(160deg,var(--honey-light),var(--honey) 60%,var(--honey-deep));
	animation:coreGlow 3.4s ease-in-out infinite}

.saas-cli{position:absolute;width:clamp(26px,10%,42px);aspect-ratio:1/1.1;
	transform:translate(-50%,-50%);display:grid;place-items:center;
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
	background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
	font-family:var(--disp);font-size:clamp(7px,44%,11px);font-weight:800;
	color:rgba(255,255,255,.8)}
.saas-cli.a{left:23%;top:25%;animation:ten1 var(--cyc) cubic-bezier(.3,1.5,.5,1) both infinite}
.saas-cli.b{left:77%;top:25%;animation:ten2 var(--cyc) cubic-bezier(.3,1.5,.5,1) both infinite}
.saas-cli.c{left:20%;top:75%;animation:ten3 var(--cyc) cubic-bezier(.3,1.5,.5,1) both infinite}
.saas-cli.d{left:80%;top:75%;color:var(--honey-light);
	background:linear-gradient(160deg,rgba(249,190,0,.3),rgba(249,190,0,.08));
	animation:ten4 var(--cyc) cubic-bezier(.3,1.5,.5,1) both infinite}

/* Les mois qui repassent : c est ca, l abonnement. */
.saas-mois{position:absolute;left:50%;bottom:2%;transform:translateX(-50%);
	display:flex;align-items:flex-end;gap:5px;height:9px}
.saas-mois i{width:2px;height:100%;border-radius:2px;background:var(--honey);
	animation:tick 2.6s ease-in-out infinite}
.saas-mois i:nth-child(2){animation-delay:.32s}
.saas-mois i:nth-child(3){animation-delay:.64s}
.saas-mois i:nth-child(4){animation-delay:.96s}
.saas-mois i:nth-child(5){animation-delay:1.28s}
.saas-mois i:nth-child(6){animation-delay:1.6s}

.saas-pied{position:absolute;left:15px;right:15px;bottom:13px;display:flex;align-items:center;gap:10px}
.saas-lib{flex:none;font-family:var(--disp);font-size:8.5px;font-weight:700;letter-spacing:.09em;
	text-transform:uppercase;color:rgba(255,255,255,.45);white-space:nowrap}
.saas-jauge{position:relative;flex:1;min-width:0;height:5px;border-radius:4px;
	background:rgba(255,255,255,.09);overflow:hidden}
.saas-jauge i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;
	background:linear-gradient(90deg,var(--honey-deep),var(--honey-light));
	box-shadow:0 0 12px rgba(249,190,0,.5);animation:revBar var(--cyc) ease-out both infinite}
/* Fond opaque : sans lui le montant se pose sur le contour de l hexagone. */
.saas-revenu{position:relative;flex:none;display:grid;place-items:center;min-width:62px;height:20px;
	padding:0 9px;border-radius:20px;border:1px solid rgba(249,190,0,.32);background:rgba(12,10,20,.82)}
.saas-revenu span{position:absolute;white-space:nowrap;font-family:var(--disp);font-size:10px;
	font-weight:800}
.saas-revenu span:nth-child(1){color:rgba(255,255,255,.45);animation:m0 var(--cyc) steps(1) both infinite}
.saas-revenu span:nth-child(2){color:rgba(255,255,255,.6);animation:m1 var(--cyc) steps(1) both infinite}
.saas-revenu span:nth-child(3){color:rgba(255,255,255,.72);animation:m2 var(--cyc) steps(1) both infinite}
.saas-revenu span:nth-child(4){color:var(--honey-deep);animation:m3 var(--cyc) steps(1) both infinite}
.saas-revenu span:nth-child(5){color:var(--honey);text-shadow:0 0 12px rgba(249,190,0,.7);
	animation:m4 var(--cyc) steps(1) both infinite}

@keyframes coreGlow{
	0%,100%{filter:drop-shadow(0 0 10px rgba(249,190,0,.5))}
	50%{filter:drop-shadow(0 0 22px rgba(249,190,0,.85))}
}
@keyframes coreRing{0%{opacity:.5;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.85)}}

@keyframes ten1{0%,7%{opacity:0;transform:scale(.5)}14%,92%{opacity:1;transform:scale(1)}97%,100%{opacity:0;transform:scale(.5)}}
@keyframes ten2{0%,20%{opacity:0;transform:scale(.5)}27%,92%{opacity:1;transform:scale(1)}97%,100%{opacity:0;transform:scale(.5)}}
@keyframes ten3{0%,33%{opacity:0;transform:scale(.5)}40%,92%{opacity:1;transform:scale(1)}97%,100%{opacity:0;transform:scale(.5)}}
@keyframes ten4{0%,46%{opacity:0;transform:scale(.5)}53%,92%{opacity:1;transform:scale(1)}97%,100%{opacity:0;transform:scale(.5)}}

@keyframes wire1{0%,12%{opacity:0;stroke-dashoffset:60}20%,92%{opacity:1;stroke-dashoffset:0}97%,100%{opacity:0;stroke-dashoffset:60}}
@keyframes wire2{0%,25%{opacity:0;stroke-dashoffset:60}33%,92%{opacity:1;stroke-dashoffset:0}97%,100%{opacity:0;stroke-dashoffset:60}}
@keyframes wire3{0%,38%{opacity:0;stroke-dashoffset:60}46%,92%{opacity:1;stroke-dashoffset:0}97%,100%{opacity:0;stroke-dashoffset:60}}
@keyframes wire4{0%,51%{opacity:0;stroke-dashoffset:60}59%,92%{opacity:1;stroke-dashoffset:0}97%,100%{opacity:0;stroke-dashoffset:60}}

@keyframes pay{0%{opacity:0;offset-distance:0%}12%{opacity:1}88%{opacity:1}100%{opacity:0;offset-distance:100%}}

@keyframes revBar{
	0%,13%{width:5%}
	21%,26%{width:29%}
	34%,39%{width:52%}
	47%,52%{width:74%}
	60%,92%{width:96%}
	97%,100%{width:5%}
}
@keyframes m0{0%,20%{opacity:1}21%,100%{opacity:0}}
@keyframes m1{0%,20%{opacity:0}21%,33%{opacity:1}34%,100%{opacity:0}}
@keyframes m2{0%,33%{opacity:0}34%,46%{opacity:1}47%,100%{opacity:0}}
@keyframes m3{0%,46%{opacity:0}47%,59%{opacity:1}60%,100%{opacity:0}}
@keyframes m4{0%,59%{opacity:0}60%,94%{opacity:1}95%,100%{opacity:0}}

@keyframes tick{0%,100%{opacity:.22;transform:scaleY(1)}50%{opacity:1;transform:scaleY(1.9)}}

/* --- Hero depannage : le site tombe, on diagnostique, on referme ---------- */

/* Trois actes dans l ordre du chapo : remettre en ligne, trouver la faille,
   refermer. Le rose signale ici une vraie panne, il ne doit pas etre adouci. */
.repar{--cyc:14s;animation:crash var(--cyc) steps(1) infinite}
.repar-voile{position:absolute;inset:0;
	background:radial-gradient(120% 90% at 50% 30%,rgba(255,61,139,.22),rgba(255,61,139,.05) 60%,transparent);
	animation:downVeil var(--cyc) ease-out both infinite}

.repar-etat{margin-left:auto;position:relative;flex:none;display:grid;place-items:center;
	min-width:76px;height:19px}
.repar-etat span{position:absolute;white-space:nowrap;display:inline-flex;align-items:center;
	gap:5px;padding:3px 9px;border-radius:20px;font-family:var(--disp);font-size:8px;
	font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.repar-etat i{width:5px;height:5px;border-radius:50%}
.repar-etat span:nth-child(1){border:1px solid rgba(255,61,139,.5);background:rgba(255,61,139,.14);
	color:var(--neon);animation:stDown var(--cyc) steps(1) both infinite}
.repar-etat span:nth-child(1) i{background:var(--neon);box-shadow:0 0 7px var(--neon);
	animation:alertBlink 1s steps(1) infinite}
.repar-etat span:nth-child(2){border:1px solid rgba(249,190,0,.5);background:rgba(249,190,0,.14);
	color:var(--honey);animation:stScan var(--cyc) steps(1) both infinite}
.repar-etat span:nth-child(2) i{background:var(--honey);box-shadow:0 0 7px var(--honey);
	animation:alertBlink .7s steps(1) infinite}
.repar-etat span:nth-child(3){border:1px solid rgba(34,230,230,.5);background:rgba(34,230,230,.13);
	color:var(--aqua);animation:stUp var(--cyc) steps(1) both infinite}
.repar-etat span:nth-child(3) i{background:var(--aqua);box-shadow:0 0 7px var(--aqua)}

/* Tout est place en pourcentage : aucune somme de hauteurs a sur-souscrire,
   donc aucun rognage possible. Repasser en flex colonne reintroduirait le bug. */
.repar-scene{position:absolute;left:15px;right:15px;top:48px;bottom:42px}
.repar-faisceau{position:absolute;left:-6px;right:-6px;top:0;height:26%;
	background:linear-gradient(to bottom,transparent,rgba(249,190,0,.3) 45%,rgba(255,224,102,.5) 55%,transparent);
	animation:scanBeam var(--cyc) ease-in-out both infinite}

.repar-alerte{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
	display:flex;flex-direction:column;align-items:center;gap:7px;
	animation:alertIn var(--cyc) cubic-bezier(.3,1.5,.5,1) both infinite}
.repar-alerte b{position:relative;width:clamp(32px,20%,50px);aspect-ratio:1/1.1;display:grid;
	place-items:center;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
	background:linear-gradient(160deg,rgba(255,61,139,.4),rgba(255,61,139,.12))}
.repar-alerte em{font-family:var(--disp);font-size:clamp(7px,3.4%,9.5px);font-weight:800;
	font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--neon);
	white-space:nowrap}

.repar-fic{position:absolute;left:0;right:0;height:17%;display:flex;align-items:center;gap:8px;
	padding:0 9px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.04)}
.repar-fic > i{flex:none;width:7px;height:8px;background:rgba(255,255,255,.3);
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.repar-fic > b{flex:1;min-width:0;height:4px;border-radius:3px;background:rgba(255,255,255,.16)}
.repar-fic > em{position:relative;flex:none;display:grid;place-items:center;width:13px;height:13px}
.repar-fic.veroles > i{background:var(--neon)}
.repar-fic svg{position:absolute}

/* Deux animations par fichier verole : l apparition et le cycle rose vers miel.
   Les proprietes animees sont disjointes, elles ne se marchent pas dessus. */
.repar-f1{top:2%;animation:fileIn1 var(--cyc) ease-out both infinite}
.repar-f2{top:23%;animation:fileIn2 var(--cyc) ease-out both infinite,infected1 var(--cyc) ease-out both infinite}
.repar-f3{top:44%;animation:fileIn3 var(--cyc) ease-out both infinite}
.repar-f4{top:65%;animation:fileIn4 var(--cyc) ease-out both infinite,infected2 var(--cyc) ease-out both infinite}
.repar-f1 .ok{animation:ok1 var(--cyc) cubic-bezier(.3,1.5,.5,1) both infinite}
.repar-f3 .ok{animation:ok2 var(--cyc) cubic-bezier(.3,1.5,.5,1) both infinite}
.repar-f2 .alerte{animation:flag1 var(--cyc) steps(1) both infinite}
.repar-f4 .alerte{animation:flag2 var(--cyc) steps(1) both infinite}
.repar-f2 .repare{animation:fixed1 var(--cyc) cubic-bezier(.3,1.5,.5,1) both infinite}
.repar-f4 .repare{animation:fixed2 var(--cyc) cubic-bezier(.3,1.5,.5,1) both infinite}

.repar-cadenas{position:absolute;left:50%;top:91%;transform:translate(-50%,-50%);
	width:clamp(30px,19%,46px);aspect-ratio:1/1.1;display:grid;place-items:center}
.repar-cadenas i{position:absolute;inset:0;
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
	border:1.5px solid var(--honey);animation:sealRing var(--cyc) ease-out both infinite}
.repar-cadenas b{position:absolute;inset:0;display:grid;place-items:center;
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
	background:linear-gradient(160deg,var(--honey-light),var(--honey) 60%,var(--honey-deep));
	animation:lockIn var(--cyc) cubic-bezier(.3,1.5,.5,1) both infinite}

/* La barre reste pleine : ce n est pas une progression mais un etat de sante,
   que sa seule couleur exprime. */
.repar-pied{position:absolute;left:15px;right:15px;bottom:13px;display:flex;align-items:center;gap:10px}
.repar-jauge{position:relative;flex:1;min-width:0;height:4px;border-radius:3px;
	background:rgba(255,255,255,.09);overflow:hidden}
.repar-jauge i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;
	animation:barDown var(--cyc) ease-out both infinite}
.repar-lib{flex:none;font-family:var(--disp);font-size:8.5px;font-weight:700;letter-spacing:.09em;
	text-transform:uppercase;color:rgba(255,255,255,.45);white-space:nowrap}

@keyframes downVeil{0%,20%{opacity:1}28%,100%{opacity:0}}
@keyframes alertIn{
	0%,3%{opacity:0;transform:scale(.8)}
	7%,20%{opacity:1;transform:scale(1)}
	26%,100%{opacity:0;transform:scale(.9)}
}
@keyframes alertBlink{0%,49%{opacity:1}50%,100%{opacity:.25}}
@keyframes crash{
	0%,4%{transform:translate(0,0)}
	5%{transform:translate(-3px,1px)}
	6.5%{transform:translate(3px,-1px)}
	8%,13%{transform:translate(0,0)}
	14%{transform:translate(-2px,0)}
	15.5%,100%{transform:translate(0,0)}
}

@keyframes scanBeam{
	0%,24%{opacity:0;transform:translateY(-12%)}
	30%{opacity:1}
	52%{opacity:1;transform:translateY(112%)}
	58%,100%{opacity:0;transform:translateY(112%)}
}
@keyframes fileIn1{0%,27%{opacity:0;transform:translateX(-8px)}32%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateX(-8px)}}
@keyframes fileIn2{0%,33%{opacity:0;transform:translateX(-8px)}38%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateX(-8px)}}
@keyframes fileIn3{0%,39%{opacity:0;transform:translateX(-8px)}44%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateX(-8px)}}
@keyframes fileIn4{0%,45%{opacity:0;transform:translateX(-8px)}50%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateX(-8px)}}

@keyframes infected1{
	0%,35%{border-color:var(--line);background:rgba(255,255,255,.04)}
	38%,58%{border-color:rgba(255,61,139,.75);background:rgba(255,61,139,.13)}
	64%,90%{border-color:rgba(249,190,0,.5);background:rgba(249,190,0,.1)}
	96%,100%{border-color:var(--line);background:rgba(255,255,255,.04)}
}
@keyframes infected2{
	0%,47%{border-color:var(--line);background:rgba(255,255,255,.04)}
	50%,66%{border-color:rgba(255,61,139,.75);background:rgba(255,61,139,.13)}
	72%,90%{border-color:rgba(249,190,0,.5);background:rgba(249,190,0,.1)}
	96%,100%{border-color:var(--line);background:rgba(255,255,255,.04)}
}
@keyframes flag1{0%,37%{opacity:0}39%,58%{opacity:1}62%,100%{opacity:0}}
@keyframes flag2{0%,49%{opacity:0}51%,66%{opacity:1}70%,100%{opacity:0}}
@keyframes fixed1{0%,60%{opacity:0;transform:scale(.5)}64%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.5)}}
@keyframes fixed2{0%,68%{opacity:0;transform:scale(.5)}72%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.5)}}
@keyframes ok1{0%,40%{opacity:0;transform:scale(.5)}44%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.5)}}
@keyframes ok2{0%,52%{opacity:0;transform:scale(.5)}56%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.5)}}

@keyframes lockIn{0%,74%{opacity:0;transform:scale(.4) rotate(-25deg)}79%,92%{opacity:1;transform:scale(1) rotate(0deg)}97%,100%{opacity:0;transform:scale(.4) rotate(-25deg)}}
@keyframes sealRing{0%,76%{opacity:0;transform:scale(.5)}80%{opacity:.9}90%,100%{opacity:0;transform:scale(2.4)}}

@keyframes stDown{0%,21%{opacity:1}22%,100%{opacity:0}}
@keyframes stScan{0%,21%{opacity:0}22%,73%{opacity:1}74%,100%{opacity:0}}
@keyframes stUp{0%,73%{opacity:0}74%,94%{opacity:1}95%,100%{opacity:0}}
@keyframes barDown{
	0%,21%{width:100%;background:linear-gradient(90deg,rgba(255,61,139,.7),var(--neon))}
	26%,72%{width:100%;background:linear-gradient(90deg,rgba(249,190,0,.4),var(--honey))}
	78%,90%{width:100%;background:linear-gradient(90deg,var(--honey-deep),var(--honey-light))}
	96%,100%{width:100%;background:linear-gradient(90deg,rgba(255,61,139,.7),var(--neon))}
}


/* --- Hero vitesse : la meme page, avant et apres ------------------------- */

.vitesse{--cyc:11s}
.vit-etat{margin-left:auto;position:relative;flex:none;display:grid;place-items:center;
	min-width:80px;height:19px}
.vit-etat span{position:absolute;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;
	padding:3px 9px;border-radius:20px;font-family:var(--disp);font-size:8px;font-weight:800;
	letter-spacing:.08em;text-transform:uppercase}
.vit-etat i{width:5px;height:5px;border-radius:50%}
.vit-etat span:nth-child(1){border:1px solid rgba(255,61,139,.5);background:rgba(255,61,139,.14);
	color:var(--neon);animation:stDown var(--cyc) steps(1) both infinite}
.vit-etat span:nth-child(1) i{background:var(--neon);box-shadow:0 0 7px var(--neon);
	animation:alertBlink 1s steps(1) infinite}
.vit-etat span:nth-child(2){border:1px solid rgba(249,190,0,.5);background:rgba(249,190,0,.14);
	color:var(--honey);animation:stScan var(--cyc) steps(1) both infinite}
.vit-etat span:nth-child(2) i{background:var(--honey);box-shadow:0 0 7px var(--honey)}
.vit-etat span:nth-child(3){border:1px solid rgba(34,230,230,.5);background:rgba(34,230,230,.13);
	color:var(--aqua);animation:stUp var(--cyc) steps(1) both infinite}
.vit-etat span:nth-child(3) i{background:var(--aqua);box-shadow:0 0 7px var(--aqua)}

.vit-scene{position:absolute;left:15px;right:15px;top:50px;bottom:52px}
.vit-piste{position:absolute;left:0;right:0;display:flex;align-items:center;gap:9px}
.vit-piste b{flex:none;width:44px;font-family:var(--disp);font-size:8.5px;font-weight:700;
	letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.vit-piste i{position:relative;flex:1;min-width:0;height:8px;border-radius:4px;
	background:rgba(255,255,255,.07);overflow:hidden}
.vit-piste i::after{content:"";position:absolute;left:0;top:0;bottom:0;border-radius:4px}
.vit-piste em{flex:none;min-width:34px;text-align:right;font-family:var(--disp);font-size:10px;
	font-weight:800;font-style:normal}

.vit-piste.avant{top:8%}
.vit-piste.avant i::after{background:linear-gradient(90deg,rgba(255,61,139,.55),var(--neon));
	animation:vitLent var(--cyc) linear both infinite}
.vit-piste.avant em{color:var(--neon)}
.vit-piste.apres{top:30%}
.vit-piste.apres i::after{background:linear-gradient(90deg,var(--honey-deep),var(--honey-light));
	box-shadow:0 0 10px rgba(249,190,0,.45);animation:vitRapide var(--cyc) linear both infinite}
.vit-piste.apres em{color:var(--honey)}
.vit-piste.apres{opacity:0;animation:vitParait var(--cyc) ease-out both infinite}

.vit-note{position:absolute;left:0;right:0;top:52%;display:grid;place-items:center;height:34%}
.vit-note span{position:absolute;font-family:var(--disp);font-weight:800;
	font-size:clamp(26px,9cqw,44px);line-height:1}
.vit-note span:nth-child(1){color:rgba(255,61,139,.85);animation:m0 var(--cyc) steps(1) both infinite}
.vit-note span:nth-child(2){color:rgba(255,255,255,.6);animation:m1 var(--cyc) steps(1) both infinite}
.vit-note span:nth-child(3){color:var(--honey-deep);animation:m2 var(--cyc) steps(1) both infinite}
.vit-note span:nth-child(4){color:var(--honey);text-shadow:0 0 16px rgba(249,190,0,.6);
	animation:m3 var(--cyc) steps(1) both infinite}
.vit-lib{position:absolute;left:0;right:0;bottom:2%;text-align:center;font-family:var(--disp);
	font-size:8.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
	color:rgba(255,255,255,.4)}

.vit-pied{position:absolute;left:15px;right:15px;bottom:14px;display:flex;
	justify-content:space-between;gap:6px}
.vit-item{display:inline-flex;align-items:center;gap:5px;font-family:var(--disp);font-size:8px;
	font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.vit-item i{width:7px;height:8px;background:rgba(255,255,255,.18);
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.vit-item:nth-child(1) i{animation:vitCoche var(--cyc) steps(1) both infinite}
.vit-item:nth-child(2) i{animation:vitCoche var(--cyc) steps(1) both infinite;animation-delay:calc(var(--cyc) * .08)}
.vit-item:nth-child(3) i{animation:vitCoche var(--cyc) steps(1) both infinite;animation-delay:calc(var(--cyc) * .16)}
.vit-item:nth-child(4) i{animation:vitCoche var(--cyc) steps(1) both infinite;animation-delay:calc(var(--cyc) * .24)}

@keyframes vitLent{0%,6%{width:0}62%,88%{width:100%}95%,100%{width:0}}
@keyframes vitRapide{0%,40%{width:0}48%,88%{width:100%}95%,100%{width:0}}
@keyframes vitParait{0%,38%{opacity:0}44%,90%{opacity:1}96%,100%{opacity:0}}
@keyframes vitCoche{0%,34%{background:rgba(255,255,255,.18)}40%,90%{background:var(--honey)}96%,100%{background:rgba(255,255,255,.18)}}

/* --- Hero reprise : les cles reviennent une a une ------------------------ */

.reprise{--cyc:12s}
.rep-etat{margin-left:auto;position:relative;flex:none;display:grid;place-items:center;
	min-width:84px;height:19px}
.rep-etat span{position:absolute;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;
	padding:3px 9px;border-radius:20px;font-family:var(--disp);font-size:8px;font-weight:800;
	letter-spacing:.08em;text-transform:uppercase}
.rep-etat i{width:5px;height:5px;border-radius:50%}
.rep-etat span:nth-child(1){border:1px solid rgba(255,61,139,.5);background:rgba(255,61,139,.14);
	color:var(--neon);animation:stDown var(--cyc) steps(1) both infinite}
.rep-etat span:nth-child(1) i{background:var(--neon);box-shadow:0 0 7px var(--neon);
	animation:alertBlink 1s steps(1) infinite}
.rep-etat span:nth-child(2){border:1px solid rgba(249,190,0,.5);background:rgba(249,190,0,.14);
	color:var(--honey);animation:stScan var(--cyc) steps(1) both infinite}
.rep-etat span:nth-child(2) i{background:var(--honey);box-shadow:0 0 7px var(--honey);
	animation:alertBlink .7s steps(1) infinite}
.rep-etat span:nth-child(3){border:1px solid rgba(34,230,230,.5);background:rgba(34,230,230,.13);
	color:var(--aqua);animation:stUp var(--cyc) steps(1) both infinite}
.rep-etat span:nth-child(3) i{background:var(--aqua);box-shadow:0 0 7px var(--aqua)}

/* Positions en pourcentage : rien a empiler, donc rien a rogner. */
.rep-scene{position:absolute;left:15px;right:15px;top:50px;bottom:44px}
.rep-cle{position:absolute;left:0;right:0;height:16%;display:flex;align-items:center;
	justify-content:space-between;gap:8px;padding:0 11px;border-radius:8px;
	border:1px solid var(--line);background:rgba(255,255,255,.04);
	font-family:var(--disp);font-size:clamp(7px,3.2cqw,9.5px);font-weight:700;
	letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.rep-cle b{font-weight:700}
.rep-cle i{flex:none;width:13px;height:15px;
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
	background:rgba(255,61,139,.55)}
.rep-c1{top:0}
.rep-cle.c1{top:0}
.rep-cle.c2{top:21%}
.rep-cle.c3{top:42%}
.rep-cle.c4{top:63%}
.rep-cle.c5{top:84%}
.rep-cle.c1 i{animation:repCle var(--cyc) steps(1) both infinite}
.rep-cle.c2 i{animation:repCle var(--cyc) steps(1) both infinite;animation-delay:calc(var(--cyc) * .09)}
.rep-cle.c3 i{animation:repCle var(--cyc) steps(1) both infinite;animation-delay:calc(var(--cyc) * .18)}
.rep-cle.c4 i{animation:repCle var(--cyc) steps(1) both infinite;animation-delay:calc(var(--cyc) * .27)}
.rep-cle.c5 i{animation:repCle var(--cyc) steps(1) both infinite;animation-delay:calc(var(--cyc) * .36)}
.rep-cle.c1{animation:repLigne var(--cyc) ease-out both infinite}
.rep-cle.c2{animation:repLigne var(--cyc) ease-out both infinite;animation-delay:calc(var(--cyc) * .09)}
.rep-cle.c3{animation:repLigne var(--cyc) ease-out both infinite;animation-delay:calc(var(--cyc) * .18)}
.rep-cle.c4{animation:repLigne var(--cyc) ease-out both infinite;animation-delay:calc(var(--cyc) * .27)}
.rep-cle.c5{animation:repLigne var(--cyc) ease-out both infinite;animation-delay:calc(var(--cyc) * .36)}

.rep-pied{position:absolute;left:15px;right:15px;bottom:14px;display:flex;align-items:center;gap:10px}
.rep-jauge{position:relative;flex:1;min-width:0;height:4px;border-radius:3px;
	background:rgba(255,255,255,.09);overflow:hidden}
.rep-jauge i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;
	animation:repDossier var(--cyc) ease-out both infinite}
.rep-lib{flex:none;font-family:var(--disp);font-size:8.5px;font-weight:700;letter-spacing:.09em;
	text-transform:uppercase;color:rgba(255,255,255,.45);white-space:nowrap}

@keyframes repLigne{
	0%,4%{border-color:rgba(255,61,139,.4);background:rgba(255,61,139,.08);color:rgba(255,255,255,.45)}
	46%,90%{border-color:rgba(249,190,0,.45);background:rgba(249,190,0,.09);color:var(--white)}
	96%,100%{border-color:rgba(255,61,139,.4);background:rgba(255,61,139,.08);color:rgba(255,255,255,.45)}
}
@keyframes repCle{
	0%,40%{background:rgba(255,61,139,.55)}
	46%,90%{background:var(--honey);box-shadow:0 0 10px rgba(249,190,0,.45)}
	96%,100%{background:rgba(255,61,139,.55);box-shadow:none}
}
@keyframes repDossier{
	0%,8%{width:4%;background:var(--neon)}
	50%{width:52%;background:linear-gradient(90deg,var(--neon),var(--honey))}
	84%,90%{width:100%;background:linear-gradient(90deg,var(--honey),var(--aqua))}
	96%,100%{width:4%;background:var(--neon)}
}

/* --- Hero responsive : un seul contenu, qui se reorganise ---------------- */

/* C est toujours la meme carte qui se deplace, jamais une carte qui
   disparait : le contenu n est pas ampute sur mobile, il est reorganise. */
.resp{--cyc:13s}
.resp-appareil{margin-left:auto;position:relative;flex:none;display:grid;place-items:center;
	min-width:74px;height:19px}
.resp-appareil span{position:absolute;white-space:nowrap;padding:3px 9px;border-radius:20px;
	font-family:var(--disp);font-size:8px;font-weight:800;letter-spacing:.07em;
	text-transform:uppercase;border:1px solid rgba(34,230,230,.34);
	background:rgba(34,230,230,.09);color:var(--aqua)}
.resp-appareil span:nth-child(1){animation:lb1 var(--cyc) steps(1) both infinite}
.resp-appareil span:nth-child(2){animation:lb2 var(--cyc) steps(1) both infinite}
.resp-appareil span:nth-child(3){border-color:rgba(249,190,0,.4);background:rgba(249,190,0,.12);
	color:var(--honey);animation:lb3 var(--cyc) steps(1) both infinite}

.resp-scene{position:absolute;left:15px;right:15px;top:50px;bottom:40px}
.resp-cadre{position:absolute;left:50%;top:0;bottom:0;transform:translateX(-50%);
	border:1.4px solid rgba(255,255,255,.28);border-radius:7px;background:rgba(12,10,20,.45);
	overflow:hidden;animation:frameW var(--cyc) cubic-bezier(.5,0,.3,1) both infinite}
.resp-page{position:absolute;left:7%;right:7%;top:5%;bottom:5%}

.resp-nav{position:absolute;left:0;right:0;top:0;height:11%;display:flex;align-items:center;gap:6px}
.resp-nav > b{flex:none;width:14%;height:52%;border-radius:2px;background:var(--honey);
	box-shadow:0 0 8px rgba(249,190,0,.5)}
.resp-liens{margin-left:auto;display:flex;align-items:center;gap:5px;
	animation:navLinks var(--cyc) ease-out both infinite}
.resp-liens i{width:15px;height:2.5px;border-radius:2px;background:rgba(255,255,255,.34)}
.resp-burger{position:absolute;right:0;display:flex;flex-direction:column;gap:2.5px;
	animation:navBurger var(--cyc) ease-out both infinite}
.resp-burger i{width:11px;height:2px;border-radius:2px;background:var(--honey)}

.resp-bandeau{position:absolute;left:0;right:0;border-radius:4px;
	background:linear-gradient(120deg,rgba(249,190,0,.26),rgba(249,190,0,.07));
	border:1px solid rgba(249,190,0,.3);
	animation:heroBlock var(--cyc) cubic-bezier(.5,0,.3,1) both infinite}
.resp-bloc{position:absolute;border-radius:4px;background:rgba(255,255,255,.1);
	border:1px solid rgba(255,255,255,.14)}
.resp-bloc.b1{animation:card1 var(--cyc) cubic-bezier(.5,0,.3,1) both infinite}
.resp-bloc.b2{animation:card2 var(--cyc) cubic-bezier(.5,0,.3,1) both infinite}
.resp-bloc.b3{animation:card3 var(--cyc) cubic-bezier(.5,0,.3,1) both infinite}
.resp-pied{position:absolute;left:0;right:0;height:6%;border-radius:3px;
	background:rgba(255,255,255,.055);
	animation:footBlock var(--cyc) cubic-bezier(.5,0,.3,1) both infinite}

.resp-poignee{position:absolute;right:2px;top:50%;transform:translateY(-50%);display:flex;
	flex-direction:column;gap:2px;animation:gripPulse 2.2s ease-in-out infinite}
.resp-poignee i{width:2px;height:2px;border-radius:50%;background:var(--honey)}

.resp-regle{position:absolute;left:15px;right:15px;bottom:13px;display:flex;align-items:center;gap:10px}
.resp-lib{flex:none;font-family:var(--disp);font-size:8.5px;font-weight:700;letter-spacing:.09em;
	text-transform:uppercase;color:rgba(255,255,255,.45);white-space:nowrap}
.resp-points{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;height:9px}
.resp-points b{width:2px;height:100%;border-radius:2px;background:var(--honey)}
.resp-points i{flex:1;height:1px;background:rgba(255,255,255,.12)}
.resp-points b:nth-of-type(1){animation:bp1 var(--cyc) ease-out both infinite}
.resp-points b:nth-of-type(2){animation:bp2 var(--cyc) ease-out both infinite}
.resp-points b:nth-of-type(3){animation:bp3 var(--cyc) ease-out both infinite}

@keyframes frameW{
	0%,26%{width:100%}
	34%,54%{width:64%}
	62%,88%{width:39%}
	96%,100%{width:100%}
}
@keyframes navLinks{0%,54%{opacity:1}62%,88%{opacity:0}96%,100%{opacity:1}}
@keyframes navBurger{0%,54%{opacity:0}62%,88%{opacity:1}96%,100%{opacity:0}}
@keyframes heroBlock{
	0%,26%{top:17%;height:20%}
	34%,54%{top:17%;height:17%}
	62%,88%{top:15%;height:14%}
	96%,100%{top:17%;height:20%}
}
@keyframes card1{
	0%,26%{left:0;width:31%;top:44%;height:22%}
	34%,54%{left:0;width:48%;top:41%;height:20%}
	62%,88%{left:0;width:100%;top:35%;height:15%}
	96%,100%{left:0;width:31%;top:44%;height:22%}
}
@keyframes card2{
	0%,26%{left:34.5%;width:31%;top:44%;height:22%}
	34%,54%{left:52%;width:48%;top:41%;height:20%}
	62%,88%{left:0;width:100%;top:54%;height:15%}
	96%,100%{left:34.5%;width:31%;top:44%;height:22%}
}
@keyframes card3{
	0%,26%{left:69%;width:31%;top:44%;height:22%}
	34%,54%{left:0;width:100%;top:65%;height:20%}
	62%,88%{left:0;width:100%;top:73%;height:15%}
	96%,100%{left:69%;width:31%;top:44%;height:22%}
}
@keyframes footBlock{
	0%,26%{top:71%}
	34%,54%{top:90%}
	62%,88%{top:92%}
	96%,100%{top:71%}
}
@keyframes bp1{0%,28%{opacity:1;transform:scaleY(1.9)}33%,100%{opacity:.22;transform:scaleY(1)}}
@keyframes bp2{0%,32%{opacity:.22;transform:scaleY(1)}36%,56%{opacity:1;transform:scaleY(1.9)}61%,100%{opacity:.22;transform:scaleY(1)}}
@keyframes bp3{0%,60%{opacity:.22;transform:scaleY(1)}64%,90%{opacity:1;transform:scaleY(1.9)}95%,100%{opacity:.22;transform:scaleY(1)}}
@keyframes lb1{0%,30%{opacity:1}31%,100%{opacity:0}}
@keyframes lb2{0%,30%{opacity:0}31%,58%{opacity:1}59%,100%{opacity:0}}
@keyframes lb3{0%,58%{opacity:0}59%,93%{opacity:1}94%,100%{opacity:0}}
@keyframes gripPulse{0%,100%{opacity:.5}50%{opacity:1}}

/* --- Hero ergonomie : le parcours gagne la course contre le chrono -------- */

/* L objectif doit rester atteint avant la fin du compte a rebours : sinon le
   panneau demontre l inverse de ce que la page vend. */
.ergo{--cyc:11s}
.ergo-chrono{margin-left:auto;position:relative;flex:none;display:grid;place-items:center;
	min-width:36px;height:19px;padding:0 8px;border-radius:20px;
	border:1px solid rgba(249,190,0,.3);background:rgba(12,10,20,.7)}
.ergo-chrono span{position:absolute;font-family:var(--disp);font-size:9.5px;font-weight:800;
	color:var(--honey)}
.ergo-chrono span:nth-child(1){animation:ergoT3 var(--cyc) steps(1) both infinite}
.ergo-chrono span:nth-child(2){animation:ergoT2 var(--cyc) steps(1) both infinite}
.ergo-chrono span:nth-child(3){color:var(--honey-deep);animation:ergoT1 var(--cyc) steps(1) both infinite}
.ergo-chrono span:nth-child(4){color:var(--aqua);animation:ergoT0 var(--cyc) steps(1) both infinite}

.ergo-scene{position:absolute;left:15px;right:15px;top:48px;bottom:42px}

.ergo-fil{position:absolute;left:5.5%;width:1.5px;height:17%;overflow:hidden}
.ergo-fil i{display:block;width:100%;
	background:linear-gradient(to bottom,rgba(249,190,0,.7),rgba(249,190,0,.25))}
.ergo-fil.f1{top:31%}
.ergo-fil.f2{top:57%}
.ergo-fil.f1 i{animation:path1 var(--cyc) ease-out both infinite}
.ergo-fil.f2 i{animation:path2 var(--cyc) ease-out both infinite}

/* Les etapes restent allumees : le chemin parcouru se lit d un coup. */
.ergo-etape{position:absolute;left:0;right:0;height:19%;display:flex;align-items:center;gap:9px;
	padding:0 10px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.04)}
.ergo-etape.e1{top:12%;animation:step1 var(--cyc) ease-out both infinite}
.ergo-etape.e2{top:38%;animation:step2 var(--cyc) ease-out both infinite}
.ergo-etape.e3{top:64%;animation:step3 var(--cyc) ease-out both infinite}
.ergo-num{flex:none;width:clamp(15px,4.6%,21px);aspect-ratio:1/1.12;display:grid;place-items:center;
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
	font-family:var(--disp);font-size:8.5px;font-weight:800}
.ergo-etape.e1 .ergo-num{animation:num1 var(--cyc) ease-out both infinite}
.ergo-etape.e2 .ergo-num{animation:num2 var(--cyc) ease-out both infinite}
.ergo-etape.e3 .ergo-num{animation:num3 var(--cyc) ease-out both infinite}
.ergo-barre{flex:1;min-width:0;position:relative;height:4px;border-radius:3px;
	background:rgba(255,255,255,.1);overflow:hidden}
.ergo-barre i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;
	background:linear-gradient(90deg,var(--honey-deep),var(--honey))}
.ergo-etape.e1 .ergo-barre i{animation:fill1 var(--cyc) ease-out both infinite}
.ergo-etape.e2 .ergo-barre i{animation:fill2 var(--cyc) ease-out both infinite}
.ergo-etape.e3 .ergo-barre i{animation:fill3 var(--cyc) ease-out both infinite}

.ergo-onde{position:absolute;left:26%;width:18px;height:18px;margin:-9px 0 0 -9px;
	border-radius:50%;border:1.5px solid var(--honey)}
.ergo-onde.o1{top:22%;animation:clickRing1 var(--cyc) ease-out both infinite}
.ergo-onde.o2{top:48%;animation:clickRing2 var(--cyc) ease-out both infinite}
.ergo-onde.o3{top:74%;animation:clickRing3 var(--cyc) ease-out both infinite}

.ergo-but{position:relative;flex:none;width:clamp(17px,5.2%,24px);aspect-ratio:1/1.1;
	display:grid;place-items:center}
.ergo-but i{position:absolute;inset:0;
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
	border:1.5px solid var(--aqua);animation:goalRing var(--cyc) ease-out both infinite}
.ergo-but b{position:absolute;inset:0;display:grid;place-items:center;
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
	background:linear-gradient(160deg,rgba(34,230,230,.85),rgba(34,230,230,.5));
	animation:goal var(--cyc) cubic-bezier(.3,1.5,.5,1) both infinite}

/* Le curseur ne tatonne pas : sa trajectoire va droit d une etape a la suivante. */
.ergo-curseur{position:absolute;left:82%;top:88%;margin:-2px 0 0 -2px;
	animation:cursor var(--cyc) cubic-bezier(.4,0,.2,1) both infinite}
.ergo-curseur svg{display:block;filter:drop-shadow(0 2px 5px rgba(0,0,0,.6))}

.ergo-pied{position:absolute;left:15px;right:15px;bottom:13px;display:flex;align-items:center;gap:10px}
.ergo-jauge{position:relative;flex:1;min-width:0;height:4px;border-radius:3px;
	background:rgba(255,255,255,.09);overflow:hidden}
.ergo-jauge i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;
	animation:clock var(--cyc) linear both infinite}
.ergo-verdict{position:relative;flex:none;display:grid;place-items:center;min-width:80px;height:20px;
	padding:0 9px;border-radius:20px;border:1px solid rgba(249,190,0,.32);background:rgba(12,10,20,.82)}
.ergo-verdict span{position:absolute;white-space:nowrap;font-family:var(--disp);font-size:8.5px;
	letter-spacing:.09em;text-transform:uppercase}
.ergo-verdict span:nth-child(1){font-weight:700;color:rgba(255,255,255,.45);
	animation:stWait var(--cyc) steps(1) both infinite}
.ergo-verdict span:nth-child(2){font-weight:800;color:var(--aqua);
	animation:stDone var(--cyc) steps(1) both infinite}

@keyframes clock{
	0%,4%{width:100%;background:linear-gradient(90deg,var(--honey-deep),var(--honey-light))}
	72%{width:31%;background:linear-gradient(90deg,var(--honey-deep),var(--honey-light))}
	78%,92%{width:31%;background:linear-gradient(90deg,var(--aqua),rgba(34,230,230,.6))}
	97%,100%{width:100%;background:linear-gradient(90deg,var(--honey-deep),var(--honey-light))}
}
@keyframes ergoT3{0%,25%{opacity:1}26%,100%{opacity:0}}
@keyframes ergoT2{0%,25%{opacity:0}26%,48%{opacity:1}49%,100%{opacity:0}}
@keyframes ergoT1{0%,48%{opacity:0}49%,71%{opacity:1}72%,100%{opacity:0}}
@keyframes ergoT0{0%,71%{opacity:0}72%,93%{opacity:1}94%,100%{opacity:0}}

@keyframes cursor{
	0%,5%{top:88%;left:82%}
	14%,20%{top:22%;left:26%}
	34%,40%{top:48%;left:26%}
	54%,60%{top:74%;left:26%}
	72%,92%{top:74%;left:84%}
	97%,100%{top:88%;left:82%}
}
@keyframes clickRing1{0%,18%{opacity:0;transform:scale(.3)}22%{opacity:.9}32%,100%{opacity:0;transform:scale(2.6)}}
@keyframes clickRing2{0%,38%{opacity:0;transform:scale(.3)}42%{opacity:.9}52%,100%{opacity:0;transform:scale(2.6)}}
@keyframes clickRing3{0%,58%{opacity:0;transform:scale(.3)}62%{opacity:.9}72%,100%{opacity:0;transform:scale(2.6)}}

@keyframes step1{
	0%,19%{border-color:var(--line);background:rgba(255,255,255,.04)}
	23%,92%{border-color:rgba(249,190,0,.55);background:rgba(249,190,0,.12)}
	97%,100%{border-color:var(--line);background:rgba(255,255,255,.04)}
}
@keyframes step2{
	0%,39%{border-color:var(--line);background:rgba(255,255,255,.04)}
	43%,92%{border-color:rgba(249,190,0,.55);background:rgba(249,190,0,.12)}
	97%,100%{border-color:var(--line);background:rgba(255,255,255,.04)}
}
@keyframes step3{
	0%,59%{border-color:var(--line);background:rgba(255,255,255,.04)}
	63%,92%{border-color:rgba(249,190,0,.55);background:rgba(249,190,0,.12)}
	97%,100%{border-color:var(--line);background:rgba(255,255,255,.04)}
}
@keyframes num1{0%,19%{background:rgba(249,190,0,.22);color:var(--honey)}23%,92%{background:var(--honey);color:var(--ink)}97%,100%{background:rgba(249,190,0,.22);color:var(--honey)}}
@keyframes num2{0%,39%{background:rgba(249,190,0,.22);color:var(--honey)}43%,92%{background:var(--honey);color:var(--ink)}97%,100%{background:rgba(249,190,0,.22);color:var(--honey)}}
@keyframes num3{0%,59%{background:rgba(249,190,0,.22);color:var(--honey)}63%,92%{background:var(--honey);color:var(--ink)}97%,100%{background:rgba(249,190,0,.22);color:var(--honey)}}
@keyframes fill1{0%,20%{width:0}28%,92%{width:100%}97%,100%{width:0}}
@keyframes fill2{0%,40%{width:0}48%,92%{width:100%}97%,100%{width:0}}
@keyframes fill3{0%,60%{width:0}68%,92%{width:100%}97%,100%{width:0}}

@keyframes path1{0%,22%{opacity:0;height:0}30%,92%{opacity:1;height:100%}97%,100%{opacity:0;height:0}}
@keyframes path2{0%,42%{opacity:0;height:0}50%,92%{opacity:1;height:100%}97%,100%{opacity:0;height:0}}

@keyframes goal{0%,68%{opacity:0;transform:scale(.4)}74%,92%{opacity:1;transform:scale(1)}97%,100%{opacity:0;transform:scale(.4)}}
@keyframes goalRing{0%,70%{opacity:0;transform:scale(.5)}75%{opacity:.9}88%,100%{opacity:0;transform:scale(2.5)}}

@keyframes stWait{0%,72%{opacity:1}73%,100%{opacity:0}}
@keyframes stDone{0%,72%{opacity:0}73%,94%{opacity:1}95%,100%{opacity:0}}

/* --- Ciel etoile des heros de contenu ------------------------------------ */

/* Une poignee de points fixes, pas de canvas : l accueil est le seul hero
   qui justifie une boucle de rendu. */
.ciel-etoiles{position:absolute;left:0;right:0;top:0;height:46%;z-index:0;
	pointer-events:none;overflow:hidden}
.ciel-etoiles b{position:absolute;border-radius:50%;
	animation-name:twinkle;animation-timing-function:ease-in-out;
	animation-iteration-count:infinite}


/* --- Hero agence 77 : la ruche se remplit, annee apres annee ------------- */
/* L argument de la page est l anteriorite : la ruche se remplit du bas vers
   le haut, une alveole par palier, de 2009 a aujourd hui. */
.agence{--cyc:13s}
.ag-annee{margin-left:auto;position:relative;flex:none;display:grid;place-items:center;
	min-width:52px;height:19px;padding:0 8px;border-radius:20px;
	border:1px solid rgba(249,190,0,.3);background:rgba(12,10,20,.72)}
.ag-annee span{position:absolute;font-family:var(--disp);font-size:9.5px;
	font-weight:800;color:var(--honey)}
.ag-annee span:nth-child(1){animation:agY1 var(--cyc) steps(1) both infinite}
.ag-annee span:nth-child(2){animation:agY2 var(--cyc) steps(1) both infinite}
.ag-annee span:nth-child(3){animation:agY3 var(--cyc) steps(1) both infinite}
.ag-annee span:nth-child(4){animation:agY4 var(--cyc) steps(1) both infinite}
.ag-annee span:nth-child(5){color:var(--honey-light);text-shadow:0 0 10px rgba(249,190,0,.7);animation:agY5 var(--cyc) steps(1) both infinite}

/* La scene passe devant le decor, la frise devant la scene : sans cet ordre,
   le trace du grand hexagone traverse le libelle du pied. */
.ag-scene{position:absolute;left:15px;right:15px;top:48px;bottom:44px;z-index:2;
	display:flex;align-items:center;justify-content:center}
/* La ruche a son propre rapport : ses positions verticales et la taille des
   alveoles se resolvent alors sur la meme base. */
.ag-ruche{position:relative;width:100%;aspect-ratio:1.84;max-height:100%;
	max-width:calc(100% - 2px)}
.ag-alv{position:absolute;width:19%;aspect-ratio:1/1.1}
.ag-alv b{position:absolute;inset:0;display:grid;place-items:center;
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
	background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.04))}
.ag-alv.bas b{background:linear-gradient(160deg,rgba(249,190,0,.42),rgba(249,190,0,.12))}
.ag-alv.milieu b{background:linear-gradient(160deg,rgba(249,190,0,.34),rgba(249,190,0,.1))}
.ag-alv.code b{background:linear-gradient(160deg,var(--honey-light),var(--honey) 60%,var(--honey-deep))}
.ag-alv i{position:absolute;inset:-14%;
	clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
	background:radial-gradient(circle,rgba(255,224,102,.5),transparent 70%)}
.ag-alv.code i{background:radial-gradient(circle,rgba(255,224,102,.6),transparent 70%)}
.ag-a1{left:0%;top:61.6%;animation:agC1 var(--cyc) cubic-bezier(.3,1.5,.5,1) both infinite}
.ag-a1 i{animation:agLit1 var(--cyc) ease-out both infinite}
.ag-a2{left:25.3%;top:61.6%;animation:agC2 var(--cyc) cubic-bezier(.3,1.5,.5,1) both infinite}
.ag-a2 i{animation:agLit2 var(--cyc) ease-out both infinite}
.ag-a3{left:50.6%;top:61.6%;animation:agC3 var(--cyc) cubic-bezier(.3,1.5,.5,1) both infinite}
.ag-a3 i{animation:agLit3 var(--cyc) ease-out both infinite}
.ag-a4{left:75.9%;top:61.6%;animation:agC4 var(--cyc) cubic-bezier(.3,1.5,.5,1) both infinite}
.ag-a4 i{animation:agLit4 var(--cyc) ease-out both infinite}
.ag-a5{left:12.6%;top:30.8%;animation:agC5 var(--cyc) cubic-bezier(.3,1.5,.5,1) both infinite}
.ag-a5 i{animation:agLit5 var(--cyc) ease-out both infinite}
.ag-a6{left:37.9%;top:30.8%;animation:agC6 var(--cyc) cubic-bezier(.3,1.5,.5,1) both infinite}
.ag-a6 i{animation:agLit6 var(--cyc) ease-out both infinite}
.ag-a7{left:63.2%;top:30.8%;animation:agC7 var(--cyc) cubic-bezier(.3,1.5,.5,1) both infinite}
.ag-a7 i{animation:agLit7 var(--cyc) ease-out both infinite}
.ag-a8{left:0%;top:0;animation:agC8 var(--cyc) cubic-bezier(.3,1.5,.5,1) both infinite}
.ag-a8 i{animation:agLit8 var(--cyc) ease-out both infinite}
.ag-a9{left:25.3%;top:0;animation:agC9 var(--cyc) cubic-bezier(.3,1.5,.5,1) both infinite}
.ag-a9 i{animation:agLit9 var(--cyc) ease-out both infinite}
.ag-a10{left:50.6%;top:0;animation:agC10 var(--cyc) cubic-bezier(.3,1.5,.5,1) both infinite}
.ag-a10 i{animation:agLit10 var(--cyc) ease-out both infinite}
.ag-a11{left:75.9%;top:0;animation:agC11 var(--cyc) cubic-bezier(.3,1.5,.5,1) both infinite}
.ag-a11 i{animation:agLit11 var(--cyc) ease-out both infinite}

.ag-frise{position:absolute;left:15px;right:15px;bottom:13px;display:flex;
	align-items:center;gap:10px;z-index:3;padding-right:2px}
.ag-axe{position:relative;flex:1;min-width:0;height:5px;border-radius:4px;
	background:rgba(255,255,255,.09)}
.ag-axe i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;
	background:linear-gradient(90deg,var(--honey-deep),var(--honey-light));
	box-shadow:0 0 12px rgba(249,190,0,.5);animation:agAxe var(--cyc) linear both infinite}
.ag-axe b{position:absolute;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
	border-radius:50%;background:var(--white);box-shadow:0 0 10px rgba(255,224,102,.9);
	animation:agRepere var(--cyc) linear both infinite}
.ag-age{position:relative;flex:none;display:grid;place-items:center;min-width:74px;
	height:20px;padding:0 9px;border-radius:20px;border:1px solid rgba(249,190,0,.32);
	background:rgba(12,10,20,.82)}
.ag-age span{position:absolute;white-space:nowrap;font-family:var(--disp);font-size:9px;
	font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.ag-age span:nth-child(1){color:rgba(255,255,255,.55);animation:agN1 var(--cyc) steps(1) both infinite}
.ag-age span:nth-child(2){color:rgba(255,255,255,.68);animation:agN2 var(--cyc) steps(1) both infinite}
.ag-age span:nth-child(3){color:var(--honey-deep);animation:agN3 var(--cyc) steps(1) both infinite}
.ag-age span:nth-child(4){color:var(--honey);text-shadow:0 0 10px rgba(249,190,0,.6);animation:agN4 var(--cyc) steps(1) both infinite}

@keyframes agC1{0%,4%{opacity:.16;transform:scale(.82)}9%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:.16;transform:scale(.82)}}
@keyframes agC2{0%,9%{opacity:.16;transform:scale(.82)}14%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:.16;transform:scale(.82)}}
@keyframes agC3{0%,14%{opacity:.16;transform:scale(.82)}19%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:.16;transform:scale(.82)}}
@keyframes agC4{0%,19%{opacity:.16;transform:scale(.82)}24%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:.16;transform:scale(.82)}}
@keyframes agC5{0%,26%{opacity:.16;transform:scale(.82)}31%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:.16;transform:scale(.82)}}
@keyframes agC6{0%,31%{opacity:.16;transform:scale(.82)}36%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:.16;transform:scale(.82)}}
@keyframes agC7{0%,36%{opacity:.16;transform:scale(.82)}41%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:.16;transform:scale(.82)}}
@keyframes agC8{0%,44%{opacity:.16;transform:scale(.82)}49%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:.16;transform:scale(.82)}}
@keyframes agC9{0%,49%{opacity:.16;transform:scale(.82)}54%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:.16;transform:scale(.82)}}
@keyframes agC10{0%,54%{opacity:.16;transform:scale(.82)}59%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:.16;transform:scale(.82)}}
@keyframes agC11{0%,59%{opacity:.16;transform:scale(.82)}64%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:.16;transform:scale(.82)}}

@keyframes agLit1{0%,6%{opacity:0}9%,13%{opacity:1}17%,100%{opacity:0}}
@keyframes agLit2{0%,11%{opacity:0}14%,18%{opacity:1}22%,100%{opacity:0}}
@keyframes agLit3{0%,16%{opacity:0}19%,23%{opacity:1}27%,100%{opacity:0}}
@keyframes agLit4{0%,21%{opacity:0}24%,28%{opacity:1}32%,100%{opacity:0}}
@keyframes agLit5{0%,28%{opacity:0}31%,35%{opacity:1}39%,100%{opacity:0}}
@keyframes agLit6{0%,33%{opacity:0}36%,40%{opacity:1}44%,100%{opacity:0}}
@keyframes agLit7{0%,38%{opacity:0}41%,45%{opacity:1}49%,100%{opacity:0}}
@keyframes agLit8{0%,46%{opacity:0}49%,53%{opacity:1}57%,100%{opacity:0}}
@keyframes agLit9{0%,51%{opacity:0}54%,58%{opacity:1}62%,100%{opacity:0}}
@keyframes agLit10{0%,56%{opacity:0}59%,63%{opacity:1}67%,100%{opacity:0}}
@keyframes agLit11{0%,61%{opacity:0}64%,68%{opacity:1}72%,100%{opacity:0}}

@keyframes agY1{0%,17%{opacity:1}18%,100%{opacity:0}}
@keyframes agY2{0%,17%{opacity:0}18%,35%{opacity:1}36%,100%{opacity:0}}
@keyframes agY3{0%,35%{opacity:0}36%,53%{opacity:1}54%,100%{opacity:0}}
@keyframes agY4{0%,53%{opacity:0}54%,71%{opacity:1}72%,100%{opacity:0}}
@keyframes agY5{0%,71%{opacity:0}72%,93%{opacity:1}94%,100%{opacity:0}}

@keyframes agAxe{0%,5%{width:2%}72%,90%{width:100%}96%,100%{width:2%}}
@keyframes agRepere{0%,5%{left:2%}72%,90%{left:100%}96%,100%{left:2%}}

@keyframes agN1{0%,25%{opacity:1}26%,100%{opacity:0}}
@keyframes agN2{0%,25%{opacity:0}26%,48%{opacity:1}49%,100%{opacity:0}}
@keyframes agN3{0%,48%{opacity:0}49%,71%{opacity:1}72%,100%{opacity:0}}
@keyframes agN4{0%,71%{opacity:0}72%,93%{opacity:1}94%,100%{opacity:0}}

/* --- Plan d acces --------------------------------------------------------- */

/* La carte est pilotee ici, et non deleguee a un cadre distant : le repere
   doit suivre les coordonnees quand on deplace la carte, ce qu une surcouche
   posee par-dessus un cadre ne sait pas faire. */
.plan{position:relative;margin:0;border:1px solid var(--line);border-radius:20px;
	overflow:hidden;background:var(--night)}
#planAcces{height:420px;background:var(--night);font-family:var(--corps)}

/* Les tuiles ne rendent qu en clair. Desaturees puis inversees elles passent
   en nuit ; la teinte du site vient ensuite, sans toucher au repere ni aux
   commandes, qui vivent dans d autres couches. */
.plan .leaflet-tile-pane{
	filter:grayscale(1) invert(1) brightness(.92) contrast(.86)
	       sepia(.9) hue-rotate(234deg) saturate(2.1)}

.plan-repere{display:grid;place-items:center}
.plan-repere svg{position:relative;z-index:2;
	filter:drop-shadow(0 0 8px rgba(249,190,0,.85))}
.plan-halo{position:absolute;left:50%;top:50%;width:58px;height:58px;
	margin:-29px 0 0 -29px;border-radius:50%;
	background:radial-gradient(circle,rgba(249,190,0,.42) 0%,rgba(249,190,0,.12) 44%,transparent 70%);
	animation:planHalo 2.8s ease-in-out infinite}
@keyframes planHalo{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.2);opacity:1}}

.plan .leaflet-control-zoom a{
	background:rgba(12,10,20,.82);color:var(--honey);border-color:var(--line);
	font-family:var(--disp);font-weight:700}
.plan .leaflet-control-zoom a:hover{background:rgba(249,190,0,.18);color:var(--honey-light)}
.plan .leaflet-control-attribution{
	background:rgba(12,10,20,.72);color:var(--muted);font-size:10.5px;padding:2px 7px}
.plan .leaflet-control-attribution a{color:var(--honey)}

@media (max-width:640px){#planAcces{height:300px}}

/* --- Boites de dialogue ---------------------------------------------------- */

/* La bibliotheque arrive avec sa feuille d origine, chargee avant celle-ci.
   On ne la remplace pas, on la rhabille. */
body.v2 .swal2-container{background:rgba(8,6,14,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
body.v2 .swal2-modal{
	border:1px solid var(--line);border-radius:24px;
	background:linear-gradient(155deg,#1b1530,#12101a 70%) !important;
	box-shadow:var(--halo-panneau);padding:34px 30px 28px;
}
body.v2 .swal2-title{
	font-family:var(--disp);font-weight:800;font-size:clamp(19px,2.4vw,26px);
	letter-spacing:.02em;text-transform:uppercase;color:var(--white);margin:0 0 6px;
}
body.v2 .swal2-content{
	font-family:var(--corps);font-size:15px;line-height:1.6;color:var(--muted);
}
body.v2 .swal2-buttonswrapper{margin-top:24px}
body.v2 .swal2-confirm,body.v2 .swal2-cancel{
	display:inline-flex;align-items:center;padding:14px 30px;border:0;
	font-family:var(--disp);font-weight:800;font-size:12.5px;
	letter-spacing:.12em;text-transform:uppercase;border-radius:44px;
	transition:transform .3s var(--courbe),box-shadow .3s ease;
}
body.v2 .swal2-confirm{background:var(--honey) !important;color:var(--ink) !important;
	box-shadow:var(--halo-cta)}
body.v2 .swal2-confirm:hover{transform:translateY(-3px) scale(1.02);box-shadow:var(--halo-cta-actif)}
body.v2 .swal2-cancel{background:rgba(12,10,20,.4) !important;color:var(--white) !important;
	border:1px solid rgba(255,255,255,.24)}

/* Les pastilles de la bibliotheque sont en vert, rouge et bleu : on les
   ramene au miel, au rose et a l aqua. */
body.v2 .swal2-icon.swal2-success{border-color:rgba(249,190,0,.5)}
body.v2 .swal2-icon.swal2-success .swal2-success-ring{border-color:rgba(249,190,0,.35)}
body.v2 .swal2-icon.swal2-success [class^='swal2-success-line']{background-color:var(--honey)}
/* Ces trois elements masquent le trace pendant l animation : la
   bibliotheque leur pose la couleur du panneau en style en ligne, restee
   blanche. Le pictogramme se passe d eux. */
body.v2 .swal2-icon.swal2-success .swal2-success-circular-line-left,
body.v2 .swal2-icon.swal2-success .swal2-success-circular-line-right,
body.v2 .swal2-icon.swal2-success .swal2-success-fix{display:none !important}
body.v2 .swal2-icon.swal2-error{border-color:rgba(255,61,139,.5)}
body.v2 .swal2-icon.swal2-error [class^='swal2-x-mark-line']{background-color:var(--neon)}
body.v2 .swal2-icon.swal2-question,body.v2 .swal2-icon.swal2-info{
	border-color:rgba(34,230,230,.5);color:var(--aqua)}
body.v2 .swal2-icon.swal2-warning{border-color:rgba(249,190,0,.5);color:var(--honey)}