/* ==========================================================================
   Maquette 4 · Survolté (fusion des maquettes 2 et 3)
   Grunge mesuré : fonds nets, explosions vectorielles (héros, appel), encre usée sur les trois grandes phrases.
   Coins arrondis légers (5 px, comme le logo), rouge dominant, jaune en accent rare (focus, manette, coup de pinceau).
   ========================================================================== */
:root { --biais: clamp(36px, 5.5vw, 100px);
  --nuit: #17171A;
  --charbon: #2C2C31;
  --charbon-2: #36363C;
  --rouge: #FF004D;
  --rouge-fonce: #D6003F;
  --jaune: #FAEF5D;
  --blanc: #F6F6F7;
  --papier: #EFEFF1;
  --gris: #B4B4BE;
  --ligne: rgba(246, 246, 247, .14);
  --r: 5px;
  --titre: 'Kanit', 'Arial Black', Arial, sans-serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;
  --bouton: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --enveloppe: 1680px;
  /* la marge latérale de tout le site (barre, hero, sections, pied de page) */
  --gouttiere: clamp(22px, 3.4vw, 64px);
  --rapide: cubic-bezier(.2, .9, .1, 1);
  --claque: cubic-bezier(.34, 1.8, .5, 1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { overflow-x: clip; }
body { margin: 0; background: var(--nuit); color: var(--blanc); font: 400 18px/1.55 var(--titre); overflow-x: clip; }
body.est-fige { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--jaune); outline-offset: 3px; }
.evitement { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--jaune); color: var(--nuit); padding: 10px 14px; font-weight: 700; border-radius: var(--r); }
.evitement:focus { top: 16px; }
.enveloppe { max-width: var(--enveloppe); margin: 0 auto; padding-left: max(var(--gouttiere), env(safe-area-inset-left, 0px)); padding-right: max(var(--gouttiere), env(safe-area-inset-right, 0px)); }

.flash { position: fixed; inset: 0; z-index: 95; pointer-events: none; background: #fff; opacity: 0; }
.intro { position: fixed; inset: 0; z-index: 94; background: var(--nuit); pointer-events: none; animation: intro-fin .3s 2.5s forwards; }
/* filet de sécurité : le voile disparaît de lui-même même si le script ne démarre pas */
@keyframes intro-fin { to { opacity: 0; visibility: hidden; } }
/* préchargeur de l'accueil (site/prechargeur.js) : au-dessus de tout, jusqu'à l'ouverture de l'éclair */
.prechargeur { position: fixed; inset: 0; z-index: 300; width: 100%; height: 100%; display: block; transition: opacity .3s; }
.prechargeur--fondu { opacity: 0; }
html.prechargement, html.prechargement body { overflow: hidden; }
.sans-3d .hero__scene { background: url(../_commun/img/fonds/explosion-heros.svg) 64% 50% / cover; }

/* grandes phrases : couleurs pleines, sans texture */
.hero__titre .mot, .bande__phrase, .cta__titre { color: var(--blanc); }
.hero__titre .mot--rouge, .bande__phrase em, .cta__titre em { color: var(--rouge); font-style: normal; }
.titre { color: var(--blanc); }
.titre em { color: var(--rouge); font-style: normal; }
.titre--fonce { color: var(--nuit); }
.titre--fonce em { color: var(--rouge-fonce); }
.titre { font: 900 clamp(46px, 6.6vw, 108px)/.92 var(--titre); text-transform: uppercase; letter-spacing: .005em; padding-bottom: .06em; }

/* boutons pleins, coins 5 px */
/* boutons : Barlow Condensed en majuscules espacées, lisible et côté interface de jeu */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 700 19px/1.1 var(--bouton); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; padding: 15px 22px; border: 0; border-radius: var(--r); cursor: pointer; white-space: nowrap; transition: transform .14s var(--rapide), box-shadow .14s var(--rapide), background .15s; }
.btn--grand { font-size: 22px; padding: 18px 28px; }
.btn--geant { font-size: clamp(23px, 2.2vw, 28px); padding: 22px 36px; }
.btn--rouge { background: var(--rouge); color: #fff; box-shadow: 0 5px 0 var(--rouge-fonce), 0 5px 0 2px var(--nuit); }
.btn--blanc { background: var(--blanc); color: var(--nuit); box-shadow: 0 5px 0 #A9A9B2; }
.btn--charbon { background: var(--charbon); color: #fff; box-shadow: 0 5px 0 #000; }
@media (hover: hover) { .btn:hover { transform: translateY(-3px); } }
@media (hover: hover) { .btn--rouge:hover { box-shadow: 0 8px 0 var(--rouge-fonce), 0 8px 0 2px var(--nuit); } }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #000; }
/* l'éclair en icône : le « z » du logo, jamais une icône d'éclair générique */
.eclair-blitz { display: inline-block; width: 1em; height: 1em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='432.0 52.0 215.0 224.0'%3E%3Cpath d='M436.7,182.4L497.9,182.4L499,182.7L500.2,183.5L500.9,184.4L501.3,185.8L501.2,187L500.8,187.9L455,269.5L454.8,270.4L454.7,271.3L455,272.5L455.5,273.3L456.2,273.9L457,274.4L457.9,274.6L458.8,274.6L459.7,274.4L460.6,273.9L644.5,137.8L645.3,137L645.7,136.2L645.9,135.1L645.9,134.3L645.7,133.4L645.2,132.7L644.4,131.9L643.4,131.4L642.6,131.2L557.7,131.2L556.6,131L555.4,130.4L554.7,129.7L554.2,128.7L554,127.6L554.2,126.6L554.6,125.6L555.1,124.9L619.9,59.5L620.5,58.5L620.8,57.3L620.6,55.9L620.1,54.9L619.6,54.4L618.7,53.8L617.9,53.5L617.1,53.4L461.4,53.4L460.4,53.5L459.3,54.1L458.6,54.7L458.3,55.2L457.8,56.4L450.3,94.5L450.2,95.3L450.3,96.1L450.6,96.8L451.1,97.5L452.1,98.4L452.9,98.7L453.7,98.8L498.3,98.8L499.6,99.2L500.3,99.6L500.9,100.1L501.5,101.3L501.7,102.1L501.7,102.9L501.4,104.1L500.7,105L434,176.2L433.5,176.9L433.1,177.8L433,178.6L433.1,179.4L433.5,180.7L434.4,181.6L435.1,182.1L435.9,182.3L436.7,182.4Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='432.0 52.0 215.0 224.0'%3E%3Cpath d='M436.7,182.4L497.9,182.4L499,182.7L500.2,183.5L500.9,184.4L501.3,185.8L501.2,187L500.8,187.9L455,269.5L454.8,270.4L454.7,271.3L455,272.5L455.5,273.3L456.2,273.9L457,274.4L457.9,274.6L458.8,274.6L459.7,274.4L460.6,273.9L644.5,137.8L645.3,137L645.7,136.2L645.9,135.1L645.9,134.3L645.7,133.4L645.2,132.7L644.4,131.9L643.4,131.4L642.6,131.2L557.7,131.2L556.6,131L555.4,130.4L554.7,129.7L554.2,128.7L554,127.6L554.2,126.6L554.6,125.6L555.1,124.9L619.9,59.5L620.5,58.5L620.8,57.3L620.6,55.9L620.1,54.9L619.6,54.4L618.7,53.8L617.9,53.5L617.1,53.4L461.4,53.4L460.4,53.5L459.3,54.1L458.6,54.7L458.3,55.2L457.8,56.4L450.3,94.5L450.2,95.3L450.3,96.1L450.6,96.8L451.1,97.5L452.1,98.4L452.9,98.7L453.7,98.8L498.3,98.8L499.6,99.2L500.3,99.6L500.9,100.1L501.5,101.3L501.7,102.1L501.7,102.9L501.4,104.1L500.7,105L434,176.2L433.5,176.9L433.1,177.8L433,178.6L433.1,179.4L433.5,180.7L434.4,181.6L435.1,182.1L435.9,182.3L436.7,182.4Z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* « Nous jaser » : une bouche en icône pleine, à gauche du texte. Au survol, elle s'ouvre et trois traits d'éclat partent vers le texte. */
.jaser { width: 1.58em; height: .9em; flex: none; margin: -.1em .1em -.1em -.1em; overflow: visible; transition: translate .2s cubic-bezier(.34, 1.7, .5, 1); }
.btn:focus-visible .jaser { translate: -.45em 0; }
@media (hover: hover) { .btn:hover .jaser { translate: -.45em 0; } }
.jaser * { transform-box: fill-box; }
.jaser__ouverte { opacity: 0; transform-origin: 50% 45%; transform: scaleY(.55); transition: opacity .1s, transform .2s cubic-bezier(.34, 1.7, .5, 1); }
.jaser__fermee { transition: opacity .1s; }
.jaser__eclat path { transform-origin: 0% 50%; transform: scale(.2); opacity: 0; transition: transform .2s cubic-bezier(.34, 1.7, .5, 1) .06s, opacity .12s .06s; }
.btn:focus-visible .jaser__fermee { opacity: 0; }
@media (hover: hover) { .btn:hover .jaser__fermee { opacity: 0; } }
.btn:focus-visible .jaser__ouverte { opacity: 1; transform: scaleY(1); }
@media (hover: hover) { .btn:hover .jaser__ouverte { opacity: 1; transform: scaleY(1); } }
.btn:focus-visible .jaser__eclat path { transform: scale(1); opacity: 1; }
@media (hover: hover) { .btn:hover .jaser__eclat path { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .jaser, .jaser__ouverte, .jaser__fermee, .jaser__eclat path { transition: none; } }
@keyframes crepite { 50% { transform: translate(1px, -2px) rotate(-14deg); } }

/* ---------- navigation */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; padding-top: env(safe-area-inset-top, 0px); transition: background .25s; }
/* la barre « Le courant » : sombre dès le départ ; en bas, un filet se remplit de rouge à mesure qu'on descend
   la page (--p, de 0 à 1, posé par le script), avec une étincelle jaune au bout */
.nav { --p: 0; background: rgba(23, 23, 26, .94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 -4px 0 var(--charbon-2); }
.nav::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: calc(var(--p) * 100%); background: linear-gradient(90deg, var(--rouge) 0 calc(100% - 26px), var(--jaune)); pointer-events: none; }
.nav::before { content: ""; position: absolute; z-index: 1; left: calc(var(--p) * 100% - 7px); bottom: -5px; width: 14px; height: 14px; background: var(--jaune); pointer-events: none;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: calc(var(--p) * 60); }
.nav.a-mega { background: rgba(23, 23, 26, .98); }
.nav__rangee { max-width: var(--enveloppe); margin: 0 auto; height: 96px; display: flex; align-items: center; gap: 22px; padding-left: max(var(--gouttiere), env(safe-area-inset-left, 0px)); padding-right: max(var(--gouttiere), env(safe-area-inset-right, 0px)); transition: height .25s var(--rapide); }
.nav__logo img { height: 74px; width: auto; transition: height .25s var(--rapide); }
.nav.est-pleine .nav__rangee { height: 80px; }
.nav.est-pleine .nav__logo img { height: 60px; }
.nav__outils { margin-left: auto; display: flex; align-items: center; gap: 12px; }
/* le hamburger est maintenant la seule navigation : il porte un libellé et se voit de loin */
.nav__burger { display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 16px 0 18px; border-radius: var(--r); border: 2px solid var(--blanc); background: rgba(23, 23, 26, .55); color: var(--blanc); font: 700 20px/1 var(--bouton); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
@media (hover: hover) { .nav__burger:hover { background: var(--blanc); color: var(--nuit); } }
@media (hover: hover) { .nav__burger:hover .burger i { background: var(--nuit); } }
.burger { width: 24px; display: grid; gap: 5px; }
.burger i { display: block; height: 3px; background: var(--blanc); border-radius: 2px; transition: width .2s, background .15s; }
.burger i:nth-child(2) { width: 70%; justify-self: end; }
@media (hover: hover) { .nav__burger:hover .burger i:nth-child(2) { width: 100%; } }
.nav__cta { padding: 16px 20px; }
.nav__outils .btn { height: 52px; padding-top: 0; padding-bottom: 0; box-shadow: none; }
@media (hover: hover) { .nav__outils .btn:hover { height: 52px; padding-top: 0; padding-bottom: 0; box-shadow: none; } }
/* Soutien : même bouton que « Nous jaser », en charbon pour rester en retrait */
.nav__soutien { padding: 16px 18px; gap: 8px; border: 2px solid var(--charbon-2); }
.nav__soutien i { font-size: 20px; transition: rotate .3s var(--claque); }
@media (hover: hover) { .nav__soutien:hover { background: var(--charbon-2); } }
.nav__soutien[aria-expanded="true"] i { rotate: -35deg; }
@media (hover: hover) { .nav__soutien:hover i { rotate: -35deg; } }
.nav__soutien[aria-expanded="true"] { background: var(--charbon-2); border-color: var(--blanc); }
/* le petit menu de soutien : une étiquette de papier collée sous le bouton */
.soutien { position: relative; }
.soutien__menu { position: absolute; right: 0; top: calc(100% + 14px); z-index: 2; width: 290px; display: flex; flex-direction: column; gap: 4px; padding: 10px; background: var(--papier); color: var(--nuit); box-shadow: 6px 6px 0 var(--rouge); rotate: -1.5deg; transform-origin: 85% 0; }
/* la pointe fait partie du menu (elle apparaît avec lui) ; le script la place sous le centre du bouton (--pointe) */
.soutien__menu::before { content: ""; position: absolute; left: var(--pointe, 85%); top: -9px; width: 18px; height: 18px; margin-left: -9px; background: var(--papier); rotate: 45deg; }
.soutien__choix { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; text-decoration: none; transition: background .1s, color .1s; }
.soutien__choix i { flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: var(--nuit); color: var(--jaune); font-size: 22px; transition: background .1s, color .1s; }
.soutien__choix span { display: flex; flex-direction: column; gap: 3px; }
.soutien__choix b { font: 800 16px/1.1 var(--titre); text-transform: uppercase; letter-spacing: .02em; }
.soutien__choix small { font-size: 13px; line-height: 1.2; color: #55555E; }
.soutien__choix:focus-visible { background: var(--nuit); color: var(--blanc); outline: none; }
@media (hover: hover) { .soutien__choix:hover { background: var(--nuit); color: var(--blanc); outline: none; } }
.soutien__choix:focus-visible i { background: var(--rouge); color: #fff; }
@media (hover: hover) { .soutien__choix:hover i { background: var(--rouge); color: #fff; } }
.soutien__choix:focus-visible small { color: var(--gris); }
@media (hover: hover) { .soutien__choix:hover small { color: var(--gris); } }

/* ---------- menu roue : la roue à gauche, le méga-panneau à droite */
.roue { position: fixed; inset: 0; z-index: 70; overflow: hidden; }
.roue__fond { position: absolute; inset: 0; background: radial-gradient(circle at 0% 50%, rgba(255, 0, 77, .22), transparent 48%), radial-gradient(rgba(246, 246, 247, .05) 1.5px, transparent 2px) 0 0 / 18px 18px, var(--nuit); }
/* éclat rouge de l'ouverture : il jaillit du bouton Menu, sous le fond sombre qui se déchire par-dessus */
.roue__eclat { position: absolute; z-index: 0; left: 0; top: 0; width: 100px; height: 100px; translate: -50% -50%; opacity: 0; pointer-events: none; background: var(--rouge);
  clip-path: polygon(50% 0%, 57% 30%, 79% 8%, 68% 36%, 98% 26%, 74% 48%, 100% 58%, 72% 62%, 88% 88%, 60% 70%, 52% 100%, 44% 72%, 18% 92%, 30% 64%, 0% 64%, 26% 50%, 4% 30%, 34% 36%, 22% 6%, 42% 28%); }
.roue__fond { z-index: 0; }
.roue__logo { position: absolute; z-index: 2; top: calc(12px + env(safe-area-inset-top, 0px)); left: max(22px, env(safe-area-inset-left, 0px)); height: 74px; width: auto; pointer-events: none; }
/* menu roue : les mots sur un arc ; le survol ne fait que les colorer, le clic tourne la roue et révèle le sous-contenu */
.roue__liste { position: absolute; inset: 0; right: 50%; z-index: 1; }
.roue__liste::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--nuit), transparent 7%, transparent 93%, var(--nuit)); pointer-events: none; }
.jeu { list-style: none; margin: 0; padding: 0; }
.jeu a { --frappe: 0; position: absolute; left: 0; top: 0; z-index: 1; transform-origin: 0 0; white-space: nowrap; text-decoration: none; font: 900 clamp(46px, 5.9vw, 98px)/1 var(--titre); text-transform: uppercase; letter-spacing: .01em; color: var(--blanc); transition: color .12s; will-change: transform, opacity; }
.jeu__num { position: absolute; left: -34px; top: .55em; font: 600 13px/1 var(--mono); letter-spacing: .1em; color: var(--gris); transition: color .12s; }
.jeu a.est-choisi .jeu__num { color: var(--jaune); }
.jeu__texte { position: relative; display: inline-block; transform: scale(calc(1 + var(--frappe) * .2)) rotate(calc(var(--frappe) * -4deg)); transform-origin: 0 50%; }
.jeu a:focus-visible { outline: none; }
.jeu a:focus-visible .jeu__texte { outline: 3px solid var(--jaune); outline-offset: 6px; }
@media (hover: hover) { .jeu a:not(.est-choisi):hover { color: var(--jaune); } }
.jeu a.est-choisi { color: var(--rouge); }
.jeu a.est-choisi .jeu__texte::after { content: ""; position: absolute; z-index: -1; left: -2%; right: -4%; bottom: -.12em; height: .22em; background: url(../_commun/img/decoupes/05-elements-graphiques-49.webp) center / 100% 100% no-repeat; }
.roue__fermer { position: absolute; z-index: 3; top: calc(22px + env(safe-area-inset-top, 0px)); right: max(22px, env(safe-area-inset-right, 0px)); width: 54px; height: 54px; display: grid; place-items: center; padding: 0; line-height: 1; border-radius: var(--r); border: 2px solid var(--blanc); background: transparent; color: var(--blanc); font-size: 26px; cursor: pointer; }
.roue__fermer i { display: block; }
@media (hover: hover) { .roue__fermer:hover { background: var(--rouge); border-color: var(--rouge); } }
.roue__panneaux { position: absolute; z-index: 2; top: 110px; bottom: 90px; left: 47.5%; right: max(22px, env(safe-area-inset-right, 0px)); display: grid; align-items: center; justify-items: start; padding: 30px 10px 30px clamp(10px, 2vw, 30px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
/* en bureau, l'affiche tient dans la zone : pas de barre de défilement qui clignote pendant l'animation */
@media (min-width: 1061px) { .roue__panneaux { scrollbar-width: none; } .roue__panneaux::-webkit-scrollbar { display: none; } }
/* éclat d'explosion derrière l'affiche, au moment où elle se plaque */
.roue__boum { position: absolute; z-index: -1; left: 50%; top: 50%; width: min(720px, 100%); aspect-ratio: 1; translate: -50% -50%; opacity: 0; pointer-events: none; background: var(--rouge);
  clip-path: polygon(50% 0%, 57% 30%, 79% 8%, 68% 36%, 98% 26%, 74% 48%, 100% 58%, 72% 62%, 88% 88%, 60% 70%, 52% 100%, 44% 72%, 18% 92%, 30% 64%, 0% 64%, 26% 50%, 4% 30%, 34% 36%, 22% 6%, 42% 28%); }
/* chaque rubrique a son affiche : sa couleur, son encre, son autocollant */
.panneau { --poster: var(--charbon); --encre: var(--blanc); --doux: var(--gris); --accent: var(--rouge); --sur: var(--jaune); --survol: var(--jaune); --trait: var(--ligne); --points: rgba(246, 246, 247, .06);
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: min(880px, 100%); padding: clamp(30px, 3.4vw, 52px); isolation: isolate; color: var(--encre); }
.panneau--accueil { --poster: var(--rouge); --doux: rgba(255, 255, 255, .9); --accent: var(--nuit); --sur: var(--nuit); --points: rgba(23, 23, 26, .16); }
.panneau--realisations { --poster: var(--papier); --encre: var(--nuit); --doux: #4A4A52; --sur: var(--rouge); --survol: var(--rouge); --trait: rgba(23, 23, 26, .18); --points: rgba(23, 23, 26, .08); }
.panneau--contact { --poster: var(--jaune); --encre: var(--nuit); --doux: #36363C; --sur: var(--nuit); --survol: var(--rouge); --trait: rgba(23, 23, 26, .22); --points: rgba(23, 23, 26, .12); }
/* l'autocollant se colle dans le coin du bas, là où il ne cache aucun texte */
.panneau__collant { position: absolute; z-index: 3; right: -6px; bottom: -18px; width: clamp(110px, 9.5vw, 170px); height: auto; rotate: -10deg; pointer-events: none; filter: drop-shadow(5px 6px 0 rgba(0, 0, 0, .35)); }
.panneau--accueil .panneau__collant { width: clamp(64px, 5vw, 92px); rotate: 14deg; }
.panneau--realisations .panneau__collant { bottom: auto; top: -26px; rotate: -14deg; }
.panneau--realisations .panneau__gros { max-width: 22ch; font-size: clamp(30px, 2.8vw, 48px); }
/* les vignettes sont des captures du haut de chaque site recréé : en couleur, cadrées sur l'en-tête et le titre */
.panneau--realisations .panneau__projet img { aspect-ratio: 16 / 9.4; object-position: center top; filter: none; }
.panneau--realisations .panneau__projet { box-shadow: 5px 5px 0 var(--nuit); }
.panneau::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(var(--points) 1.5px, transparent 2px) 0 0 / 14px 14px, var(--poster);
  clip-path: polygon(0% 2%, 6% 0%, 13% 1.6%, 21% .4%, 30% 1.8%, 38% .2%, 47% 1.4%, 55% 0%, 64% 1.7%, 72% .5%, 81% 1.9%, 89% .3%, 96% 1.5%, 100% .6%, 99.4% 20%, 100% 41%, 99.2% 63%, 100% 84%, 99.5% 99%, 93% 100%, 85% 98.4%, 77% 99.8%, 68% 98.2%, 60% 99.7%, 51% 98.5%, 43% 100%, 34% 98.3%, 26% 99.6%, 17% 98.1%, 9% 99.8%, 2% 98.6%, 0% 99.5%, .7% 78%, 0% 56%, .8% 34%, 0% 14%); }
.panneau__ruban { position: absolute; z-index: 2; top: -22px; left: -26px; width: 130px; height: auto; transform: rotate(-9deg); pointer-events: none; }
.panneau__sur { font: 600 13px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sur); display: flex; gap: 8px; align-items: center; }
.panneau__gros { max-width: 18ch; font: 900 clamp(34px, 3.5vw, 62px)/.98 var(--titre); text-transform: uppercase; letter-spacing: .005em; }
.panneau__gros em { font-style: normal; color: var(--accent); }
.panneau__texte { color: var(--doux); font-size: 19px; line-height: 1.5; max-width: 52ch; }
.panneau__texte b { color: var(--encre); }
.panneau__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.panneau__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 34px; width: 100%; }
.panneau__col { display: flex; flex-direction: column; gap: 2px; }
.panneau__grille--services { gap: 4px 30px; }
.panneau__grille--services a { display: flex; align-items: center; gap: 12px; text-decoration: none; padding: 11px 0; font: 800 clamp(19px, 1.55vw, 25px)/1.1 var(--titre); text-transform: uppercase; letter-spacing: .01em; border-bottom: 2px solid var(--trait); transition: color .15s; }
.panneau__grille--services a i { color: var(--accent); font-size: 26px; }
@media (hover: hover) { .panneau__grille--services a:hover { color: var(--survol); } }
.panneau__titre { font: 900 22px/1 var(--titre); text-transform: uppercase; color: var(--rouge); margin-bottom: 8px; }
.panneau__col a { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 6px 0; font-weight: 500; transition: color .15s; }
.panneau__col a i { color: var(--rouge); font-size: 20px; }
@media (hover: hover) { .panneau__col a:hover { color: var(--jaune); } }
.panneau__suite { display: inline-flex; align-items: center; gap: 10px; font: 600 15px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--encre); border-bottom: 2px solid var(--accent); padding-bottom: 6px; }
@media (hover: hover) { .panneau__suite:hover { color: var(--survol); } }
.panneau__projets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; }
.panneau__projet { position: relative; display: block; border-radius: var(--r); overflow: hidden; text-decoration: none; color: var(--blanc); border: 2px solid var(--nuit); transition: border-color .2s; }
.panneau__projet img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; filter: grayscale(1) contrast(1.1); transition: filter .3s; }
@media (hover: hover) { .panneau__projet:hover { border-color: var(--rouge); } }
@media (hover: hover) { .panneau__projet:hover img { filter: none; } }
.panneau__projet span { position: absolute; left: 10px; bottom: 10px; background: var(--nuit); padding: 7px 10px; border-radius: var(--r); font: 900 15px/1 var(--titre); text-transform: uppercase; }
.panneau__tetes { align-self: stretch; display: flex; justify-content: center; align-items: flex-end; margin: -10px 0 -4px; }
.panneau__tetes img { width: clamp(96px, 8.4vw, 150px); height: auto; margin-left: -1.6vw; filter: drop-shadow(5px 6px 0 rgba(0, 0, 0, .4)); }
.panneau__tetes img:first-child { margin-left: 0; }
.panneau__tetes img:nth-child(odd) { rotate: -5deg; }
.panneau__tetes img:nth-child(even) { rotate: 6deg; translate: 0 -10px; }
.panneau__liens { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.panneau__liens a { font: 600 15px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
@media (hover: hover) { .panneau__liens a:hover { border-color: var(--rouge); } }
/* l'encadré Nouvelles : les trois derniers articles en coupures, vignette et titre */
.panneau--nouvelles { --poster: var(--charbon); }
.panneau--nouvelles .panneau__collant { bottom: auto; top: -30px; width: clamp(90px, 7.5vw, 130px); rotate: 12deg; }
.panneau__articles { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.panneau__article { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; gap: 16px; padding: 8px; text-decoration: none; background: var(--papier); color: var(--nuit); box-shadow: 5px 5px 0 var(--nuit); transition: background 100ms ease-out, color 100ms ease-out; }
.panneau__article:nth-child(1) { rotate: -1deg; } .panneau__article:nth-child(2) { rotate: .8deg; } .panneau__article:nth-child(3) { rotate: -.5deg; }
.panneau__article img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: grayscale(1) contrast(1.1); transition: filter .3s; }
.panneau__article span { display: flex; flex-direction: column; gap: 5px; }
.panneau__article small { font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--rouge); }
.panneau__article b { font: 800 clamp(16px, 1.3vw, 20px)/1.12 var(--titre); text-transform: uppercase; }
.panneau__article:focus-visible { background: var(--jaune); }
@media (hover: hover) { .panneau__article:hover { background: var(--jaune); } }
.panneau__article:focus-visible img { filter: none; }
@media (hover: hover) { .panneau__article:hover img { filter: none; } }
.panneau__tel { font: 900 clamp(44px, 4.8vw, 80px)/1 var(--titre); text-decoration: none; letter-spacing: .005em; color: var(--encre); }
@media (hover: hover) { .panneau__tel:hover { color: var(--rouge); } }
.roue__pied { position: absolute; z-index: 2; left: max(22px, env(safe-area-inset-left, 0px)); right: max(22px, env(safe-area-inset-right, 0px)); bottom: calc(22px + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }
.roue__aide { font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gris); display: flex; gap: 8px; align-items: center; }
.roue__coord { display: flex; gap: 18px; font-weight: 700; }
.roue__coord a { text-decoration: none; }
.sociaux { display: flex; gap: 10px; }
/* réseaux : juste les lettres de chaque marque (pas les logos encadrés), en pastilles qui claquent au survol */
.sociaux a { width: 50px; height: 50px; display: grid; place-items: center; font-size: 25px; color: var(--blanc); text-decoration: none; border-radius: var(--r); background: var(--charbon); box-shadow: 0 4px 0 #000; transition: background .15s, color .15s, transform .2s var(--claque), box-shadow .2s; }
.sociaux__lettres { font: 800 27px/1 var(--titre); letter-spacing: -.03em; transform: translateY(-1px); }
@media (hover: hover) { .sociaux a:hover { background: var(--rouge); transform: translateY(-3px) rotate(-6deg); box-shadow: 4px 6px 0 #000; } }
.sociaux a:focus-visible { outline: 3px solid var(--jaune); outline-offset: 3px; }

/* ---------- arcade (easter egg) : une affiche déchirée tenue par deux rubans, sur des rayons rouges qui tournent */
.arcade { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 36px 40px; overflow: hidden; background: rgba(10, 10, 12, .9); }
.arcade__rayons { position: absolute; left: 50%; top: 50%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 0, 77, .2) 0 4deg, transparent 4deg 13deg); animation: blz-halo 90s linear infinite;
  -webkit-mask: radial-gradient(closest-side, #000 10%, transparent 70%); mask: radial-gradient(closest-side, #000 10%, transparent 70%); }
/* le cadre porte l'ombre rouge, les rubans et le X, qui peuvent dépasser ; le papier découpé défile à l'intérieur */
.arcade__boite { position: relative; width: min(1060px, 100%); filter: drop-shadow(12px 12px 0 var(--rouge)); }
.arcade__corps { max-height: calc(100dvh - 72px); overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: none; padding: clamp(26px, 4vw, 48px); color: var(--blanc);
  background: radial-gradient(rgba(246, 246, 247, .06) 1.5px, transparent 2px) 0 0 / 14px 14px, var(--charbon);
  clip-path: polygon(0% 1.2%, 6% 0%, 14% 1%, 23% .2%, 33% 1.3%, 42% .3%, 51% 1.1%, 60% 0%, 69% 1.2%, 78% .4%, 87% 1.4%, 94% .2%, 100% 1%, 99.5% 18%, 100% 37%, 99.3% 56%, 100% 76%, 99.4% 98.8%, 92% 100%, 83% 98.8%, 74% 99.8%, 64% 98.7%, 55% 99.7%, 45% 98.6%, 36% 99.8%, 26% 98.7%, 17% 99.9%, 8% 98.7%, 0% 99.6%, .6% 79%, 0% 58%, .7% 37%, 0% 18%); }
.arcade__corps::-webkit-scrollbar { display: none; }
.arcade__ruban { position: absolute; z-index: 4; width: clamp(110px, 12vw, 170px); height: auto; pointer-events: none; }
.arcade__ruban--a { right: -46px; bottom: -18px; width: clamp(110px, 11vw, 160px); rotate: -34deg; }
.arcade__ruban--b { top: -20px; left: -48px; width: clamp(110px, 11vw, 160px); rotate: -34deg; }
.arcade__fermer { position: absolute; z-index: 5; top: -16px; right: -16px; width: 52px; height: 52px; display: grid; place-items: center; padding: 0; border: 2px solid var(--blanc); border-radius: var(--r); background: var(--nuit); color: var(--blanc); font-size: 22px; cursor: pointer; transition: background .15s, border-color .15s; }
.arcade__fermer:focus-visible { background: var(--rouge); border-color: var(--rouge); }
@media (hover: hover) { .arcade__fermer:hover { background: var(--rouge); border-color: var(--rouge); } }
.arcade__sur { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 0; font: 600 13px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--jaune); }
.arcade__code { padding: 5px 8px; background: var(--jaune); color: var(--nuit); letter-spacing: .2em; animation: clignote 1.1s steps(2) infinite; }
@keyframes clignote { 50% { opacity: .35; } }
.arcade__titre { margin: 14px 0 0; font: 900 clamp(48px, 7vw, 100px)/.9 var(--titre); text-transform: uppercase; rotate: -3deg; transform-origin: 0 50%; }
.arcade__titre em { position: relative; display: inline-block; color: var(--rouge); font-style: normal; }
.arcade__pinceau { position: absolute; z-index: -1; left: -2%; bottom: -.14em; width: 106%; height: .3em; fill: var(--jaune); }
.arcade__intro { margin: 22px 0 30px; max-width: 46ch; color: var(--gris); font-size: 18px; }
/* les cartouches : des autocollants de papier, chacun de travers ; au survol ils se redressent, sans se soulever */
.cartouches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; padding-top: 30px; }
.cartouche { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 270px; padding: 22px 22px 20px; text-align: left; color: var(--nuit); cursor: pointer; border: 0;
  background: radial-gradient(rgba(23, 23, 26, .09) 1.3px, transparent 1.7px) 0 0 / 11px 11px, var(--papier); rotate: -2deg; outline: 4px solid var(--blanc); outline-offset: 0; box-shadow: 8px 8px 0 var(--nuit); transition: rotate .3s var(--claque), outline-color .15s; }
.cartouche:nth-child(2) { rotate: 1.8deg; }
.cartouche:nth-child(3) { rotate: -1.2deg; }
.cartouche:focus-visible { rotate: 0deg; outline-color: var(--jaune); }
@media (hover: hover) { .cartouche:hover { rotate: 0deg; outline-color: var(--jaune); } }
.cartouche__num { position: absolute; top: -20px; right: 14px; font: 900 italic 46px/1 var(--titre); color: var(--rouge); -webkit-text-stroke: 2px var(--nuit); paint-order: stroke fill; }
.cartouche img { height: 116px; width: auto; max-width: 70%; margin: -50px 0 auto -8px; rotate: -8deg; filter: drop-shadow(5px 6px 0 rgba(0, 0, 0, .35)); transition: rotate .35s var(--claque), scale .35s var(--claque); }
@media (hover: hover) { .cartouche:hover img { rotate: 6deg; scale: 1.12; } }
.cartouche__nom { padding: .42em .7em .34em; background: var(--nuit); color: #fff; font: 900 21px/1 var(--titre); text-transform: uppercase; letter-spacing: .06em; rotate: -1.5deg;
  clip-path: polygon(0 6%, 2% 0, 98% 4%, 100% 0, 100% 96%, 98% 100%, 2% 94%, 0 100%); }
.cartouche__texte { font-size: 15px; line-height: 1.4; color: #3A3A40; }
.cartouche__record { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #6B6B73; }
.cartouche__record.a-record { color: var(--rouge); }
/* l'écran de jeu : une barre, et la scène en trame avec rayons rouges */
.arcade__barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin: 4px 0 18px; padding-right: 24px; }
.arcade__retour { display: inline-flex; gap: 8px; align-items: center; height: 46px; padding: 0 16px; border: 2px solid var(--blanc); border-radius: var(--r); background: none; color: var(--blanc); font: 700 17px/1 var(--bouton); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: color .1s, border-color .1s; }
@media (hover: hover) { .arcade__retour:hover { color: var(--jaune); border-color: var(--jaune); } }
.arcade__hud { display: flex; gap: 12px; margin: 0; }
.arcade__hud .dymo { font-size: 15px; }
.arcade__hud .dymo b { margin-left: .4em; font-size: 1.5em; font-variant-numeric: tabular-nums; vertical-align: -.08em; }
.arcade__temps:has(b:empty) { visibility: hidden; }
.arcade__scene { --deborde: 36px; position: relative; aspect-ratio: 16 / 10; overflow: visible; user-select: none; border: 4px solid var(--blanc); box-shadow: 8px 8px 0 var(--nuit);
  background: radial-gradient(rgba(246, 246, 247, .07) 1.5px, transparent 2px) 0 0 / 16px 16px, repeating-conic-gradient(from 0deg at 50% 120%, rgba(255, 0, 77, .14) 0 4deg, transparent 4deg 12deg), var(--nuit); }
/* la toile déborde du cadre : ce qui tombe arrive d'au-dessus et peut mordre sur les côtés */
.arcade__scene canvas { position: absolute; z-index: 1; inset: calc(var(--deborde) * -1); width: calc(100% + var(--deborde) * 2); height: calc(100% + var(--deborde) * 2); touch-action: none; }
.arcade__grille-bogues, .arcade__message { clip-path: inset(0); }
.arcade__scene.est-attente { background: radial-gradient(rgba(246, 246, 247, .07) 1.5px, transparent 2px) 0 0 / 16px 16px, var(--charbon); }
.arcade__scene.est-go { background: radial-gradient(rgba(23, 23, 26, .16) 1.5px, transparent 2px) 0 0 / 14px 14px, repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, .14) 0 5deg, transparent 5deg 15deg), var(--rouge); }
.arcade__message { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; background: rgba(23, 23, 26, .82); }
.arcade__gros { margin: 0; font: 900 clamp(40px, 6vw, 82px)/1 var(--titre); text-transform: uppercase; font-variant-numeric: tabular-nums; rotate: -3deg; padding: .06em .3em .1em; background: var(--nuit); box-shadow: 6px 6px 0 var(--rouge); }
.arcade__detail { margin: 0; max-width: 44ch; color: var(--gris); font-size: 17px; }
.arcade__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 6px; }
/* cache-cache : douze petites fenêtres de navigateur ; une tête de l'équipe sort du bas de l'une d'elles */
.arcade__grille-bogues { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 12px; padding: 18px; }
.trou { position: relative; overflow: hidden; background: radial-gradient(rgba(23, 23, 26, .09) 1.3px, transparent 1.7px) 0 0 / 11px 11px, var(--papier); border: 3px solid var(--nuit); box-shadow: 5px 5px 0 rgba(0, 0, 0, .45); }
.trou::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: 16px; background: radial-gradient(circle, var(--rouge) 3px, transparent 4px) 6px 50% / 11px 11px no-repeat, radial-gradient(circle, var(--jaune) 3px, transparent 4px) 17px 50% / 11px 11px no-repeat, radial-gradient(circle, var(--gris) 3px, transparent 4px) 28px 50% / 11px 11px no-repeat, var(--nuit); }
.trou:has(.est-sorti) { border-color: var(--rouge); }
.tete-jeu { position: absolute; left: 50%; bottom: -6%; width: 64%; max-width: 130px; padding: 0; border: 0; background: none; cursor: pointer; transform: translate(-50%, 120%); transition: transform .16s var(--claque); -webkit-tap-highlight-color: transparent; }
.tete-jeu img { display: block; width: 100%; height: auto; pointer-events: none; filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, .45)); }
.tete-jeu.est-sorti { transform: translate(-50%, 0); }
.tete-jeu.est-frappe { transform: translate(-50%, -8%) scale(.4) rotate(30deg); opacity: 0; transition: transform .22s, opacity .22s; }
.tete-jeu:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }
.trou:has(.est-frappe)::after { content: ""; position: absolute; left: 50%; top: 55%; width: 90%; aspect-ratio: 1.07; translate: -50% -50%; background: url(../_commun/img/hero/pack-07.webp) center / contain no-repeat; animation: blz-paf .42s var(--claque) forwards; pointer-events: none; }
@keyframes blz-paf { 0% { scale: .3; rotate: -20deg; opacity: 1; } 60% { scale: 1; rotate: 6deg; opacity: 1; } 100% { scale: 1.1; opacity: 0; } }
/* la surprise du code Konami : un flash, un éclair qui traverse, une explosion « Bonus! » */
.konami { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; transition: opacity .4s; }
.konami.est-fini { opacity: 0; }
.konami__flash { position: absolute; inset: 0; background: var(--jaune); animation: blz-flash .5s ease-out forwards; }
@keyframes blz-flash { 0% { opacity: .95; } 30% { opacity: .2; background: var(--rouge); } 100% { opacity: 0; background: var(--rouge); } }
.konami__eclair { position: absolute; left: 50%; top: 50%; width: min(34vw, 300px); translate: -50% -50%; animation: blz-eclair .55s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes blz-eclair { 0% { transform: translate(-80vw, -70vh) rotate(-30deg) scale(.6); } 70% { transform: translate(0, 0) rotate(8deg) scale(1.2); } 100% { transform: translate(0, 0) rotate(0) scale(0); opacity: 0; } }
.konami__boum { position: absolute; left: 50%; top: 50%; width: min(70vw, 560px); translate: -50% -50%; display: grid; place-items: center; animation: blz-boum .6s var(--claque) .38s both; }
.konami__boum img { grid-area: 1 / 1; width: 100%; height: auto; }
.konami__boum b { grid-area: 1 / 1; font: 900 italic clamp(44px, 9vw, 104px)/1 var(--titre); text-transform: uppercase; color: var(--jaune); -webkit-text-stroke: 3px var(--nuit); paint-order: stroke fill; rotate: -8deg; }
@keyframes blz-boum { 0% { transform: scale(.1) rotate(-30deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.konami__code { position: absolute; left: 50%; bottom: 14%; translate: -50% 0; padding: 8px 14px; background: var(--nuit); color: var(--jaune); font: 600 clamp(14px, 2vw, 20px)/1 var(--mono); letter-spacing: .3em; white-space: nowrap; animation: blz-boum .4s var(--claque) .5s both; }
@media (max-width: 760px) {
  .arcade { padding: 22px 16px; }
  .arcade__corps { max-height: calc(100dvh - 44px); padding: 26px 18px 30px; }
  .arcade__fermer { top: -10px; right: -6px; width: 46px; height: 46px; }
  .arcade__ruban { width: 84px; }
  .arcade__ruban--a { right: -26px; bottom: -12px; }
  .arcade__ruban--b { top: -12px; left: -28px; }
  .arcade__titre { font-size: 13vw; margin-right: 50px; }
  .arcade__intro { font-size: 16px; margin: 18px 0 10px; }
  .cartouches { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .cartouche { min-height: 0; padding-top: 18px; }
  .cartouche img { position: absolute; right: 12px; top: -26px; height: 78px; margin: 0; }
  .cartouche__num { left: 14px; right: auto; }
  .cartouche__nom { margin-top: 18px; font-size: 18px; }
  .arcade__barre { padding-right: 30px; }
  .arcade__scene { aspect-ratio: 3 / 4; --deborde: 16px; }
  .arcade__grille-bogues { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); gap: 10px; padding: 12px; }
  .arcade__gros { font-size: 40px; }
}

/* ---------- héros */
.hero { position: relative; min-height: 100dvh; display: flex; align-items: center; overflow: hidden; background: var(--nuit); }
.hero__scene { position: absolute; inset: 0; touch-action: pan-y; }
/* un voile sombre à gauche calme l'explosion derrière le titre : le rouge reste lisible sur les rayons rouges */
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 50% 46% at 22% 40%, rgba(23, 23, 26, .82), rgba(23, 23, 26, .5) 55%, rgba(23, 23, 26, 0) 100%); }
.hero__texte { position: relative; z-index: 2; width: 100%; max-width: var(--enveloppe); margin: 0 auto; padding: 130px max(var(--gouttiere), env(safe-area-inset-right, 0px)) 150px max(var(--gouttiere), env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 26px; pointer-events: none; }
/* le texte laisse passer les clics vers la scène (éclair, étiquettes) ; seuls les boutons restent cliquables */
.hero__texte > *, .hero__actions { pointer-events: none; }
.hero__actions .btn { pointer-events: auto; }
/* titre en affiche : Kanit Black droit, quatre lignes de même taille alignées à gauche,
   la première phrase en blanc, la deuxième en rouge, le bloc légèrement penché */
.hero__titre { display: flex; flex-direction: column; align-items: flex-start; font: 900 clamp(50px, 6.2vw, 112px)/.9 var(--titre); text-transform: uppercase; letter-spacing: .012em; transform: rotate(-4deg); transform-origin: 0 0; margin: .42em 0 .5em; }
.hero__titre .mot { display: block; position: relative; white-space: nowrap; }
.hero__titre .mot--rouge { color: var(--rouge); font-style: normal; }
.hero__titre .mot:nth-child(3) { margin-top: .12em; }
.hero__pinceau { position: absolute; z-index: -1; left: -2%; right: -3%; bottom: -.12em; width: 105%; height: .3em; fill: var(--jaune); transform-origin: 0 50%; }
.hero__sous { max-width: 54ch; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; text-shadow: 0 1px 12px rgba(23, 23, 26, .9); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }
/* bord déchiré : le bas du héros se déchire sur la section suivante */
.hero, .hero + .budget { --h-dechirure: clamp(38px, 5.4vw, 80px); }
.hero__dechirure { position: absolute; z-index: 3; left: 0; bottom: -1px; width: 100%; height: var(--h-dechirure); pointer-events: none; }
.hero__dechirure-fibre { fill: var(--papier); }
.hero__dechirure-fond { fill: var(--nuit); }
/* la trame de la section suivante entre dans les creux de la déchirure : le bas du héros est découpé selon la
   déchirure (--dechirure, posée sur <main> par _travail/outils/dechirure.py) et la section glisse dessous */
.hero { z-index: 1; -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--h-dechirure) + 1px) no-repeat, var(--dechirure) bottom / 100% var(--h-dechirure) no-repeat;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--h-dechirure) + 1px) no-repeat, var(--dechirure) bottom / 100% var(--h-dechirure) no-repeat; }
.hero + .budget { margin-top: calc(-1 * var(--h-dechirure)); border-top: var(--h-dechirure) solid transparent; background-origin: border-box; }

/* ---------- à propos : la cause et l'effet. À gauche, nos choix d'organisation ; à droite, ce qu'ils changent pour le client
   (« Concrètement, ça change quoi? », fusionné ici). Au défilement, un fil se trace de chaque choix vers son effet, l'éclair en tête,
   et l'effet s'allume à l'arrivée du courant. Sans épinglage ; tout s'éteint si on remonte. L'état par défaut est l'état allumé :
   seule la classe effets--anime, posée par le script hors mouvement réduit, éteint ce qui attend le courant. */
.budget { position: relative; background: var(--nuit); }
/* le décor : la gerbe de rayons, sur un calque plus grand que la section pour pouvoir tourner sans montrer ses bords.
   Le calque descend sous la déchirure du héros, comme l'ancien fond posé sur la bordure. Le script le fait tourner
   d'environ 18 degrés et glisser à mesure que la section traverse l'écran ; sans script, il reste immobile. */
.budget__fond { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero + .budget .budget__fond { top: calc(-1 * var(--h-dechirure)); }
.budget__decor { position: absolute; inset: -15% -12%; background: url(../_commun/img/fonds/decor-apropos.svg) right top / cover; transform-origin: 85% 15%; will-change: transform; }
.effets > .enveloppe { position: relative; z-index: 1; }
.effets { padding-top: clamp(90px, 10vw, 150px); padding-bottom: clamp(90px, 10vw, 150px); }
.budget__sur { font: 600 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--jaune); }
.effets__titre { margin-top: 14px; max-width: 16ch; font: 900 clamp(42px, 5.4vw, 92px)/.95 var(--titre); text-transform: uppercase; text-wrap: balance; }
.effets__titre em { font-style: normal; color: var(--rouge); }
.effets__sous { margin-top: 22px; max-width: 46ch; font-size: clamp(18px, 1.35vw, 21px); line-height: 1.5; color: var(--gris); }

/* les deux colonnes et le fil entre elles */
.effets__tableau { --fil: clamp(110px, 12vw, 200px); margin-top: clamp(50px, 6vw, 90px); }
.effets__tetes, .paire { display: grid; grid-template-columns: minmax(0, 1fr) var(--fil) minmax(0, 1fr); align-items: center; }
.effets__tete { font: 600 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.effets__tete--effet { grid-column: 3; font: 900 clamp(24px, 2.2vw, 36px)/1 var(--titre); letter-spacing: .01em; color: var(--blanc); }
.effets__tete--effet em { font-style: normal; color: var(--rouge); }
.paires { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 26px; }

/* la cause : un choix d'organisation, encadré ; le cadre et le numéro passent au jaune quand le courant part */
.cause { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: start; padding: 24px 26px; border: 2px solid var(--jaune); border-radius: var(--r); background: rgba(23, 23, 26, .85); transition: border-color .3s; }
.cause .cause__no { grid-row: span 2; margin: -4px 0 0; font: 900 clamp(40px, 3.4vw, 56px)/1 var(--titre); color: var(--jaune); transition: color .3s; }
.cause b { font: 900 clamp(20px, 1.6vw, 26px)/1.05 var(--titre); text-transform: uppercase; }
.cause span:not(.cause__no) { margin-top: 8px; color: var(--gris); font-size: 17px; line-height: 1.45; }
.effets--anime .paire:not(.est-branche) .cause { border-color: var(--charbon-2); }
.effets--anime .paire:not(.est-branche) .cause__no { color: #4a4a52; }

/* le fil : il se trace de la cause vers l'effet, l'éclair (le brandmark) en tête */
.fil { position: relative; height: 100%; min-height: 40px; }
.fil__ligne { position: absolute; left: 0; right: 14px; top: 50%; height: 4px; margin-top: -2px; background: var(--charbon-2); border-radius: 2px; }
.fil__ligne::after { content: ""; position: absolute; inset: 0; background: var(--jaune); border-radius: inherit; transform-origin: 0 50%; scale: var(--p, 1) 1; }
.fil__pointe { position: absolute; right: 0; top: 50%; margin-top: -9px; border: 9px solid transparent; border-left: 14px solid var(--jaune); border-right: 0; transition: border-left-color .2s; }
.effets--anime .paire:not(.est-allume) .fil__pointe { border-left-color: var(--charbon-2); }
.fil__eclair { position: absolute; top: 50%; left: calc(var(--p, 1) * (100% - 14px)); width: 34px; height: 34px; margin: -17px 0 0 -17px; color: var(--jaune); opacity: var(--vu, 0); transition: opacity .2s; }

/* l'effet : l'autocollant de « Concrètement », éteint tant que le courant n'est pas arrivé */
.paire .gain { rotate: var(--rot, 0deg); transition: opacity .3s, filter .3s; }
.effets--anime .paire:not(.est-allume) .gain { opacity: .32; filter: grayscale(1); }
.effets--anime .paire.est-allume .gain { animation: effets-colle .45s var(--claque); }
@keyframes effets-colle { from { scale: 1.08; } }
.paire:nth-child(1) .gain { --rot: -1.6deg; }
.paire:nth-child(2) .gain { --rot: 1.2deg; }
.paire:nth-child(3) .gain { --rot: -.8deg; }
.paire:nth-child(4) .gain { --rot: 1.6deg; }
.gain i.eclair-blitz { width: 46px; height: 46px; }
.effets__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 54px; }

@media (max-width: 860px) {
  .effets__tetes { display: none; }
  .paire { grid-template-columns: minmax(0, 1fr); }
  .fil { height: 70px; min-height: 0; }
  .fil__ligne { left: 50%; right: auto; top: 0; bottom: 14px; width: 4px; height: auto; margin: 0 0 0 -2px; }
  .fil__ligne::after { transform-origin: 50% 0; scale: 1 var(--p, 1); }
  .fil__pointe { left: 50%; right: auto; top: auto; bottom: 0; margin: 0 0 0 -9px; border: 9px solid transparent; border-top: 14px solid var(--jaune); border-bottom: 0; }
  .effets--anime .paire:not(.est-allume) .fil__pointe { border-left-color: transparent; border-top-color: var(--charbon-2); }
  .fil__eclair { left: 50%; top: calc(var(--p, 1) * (100% - 14px)); }
  .paires { gap: 46px; }
  /* au téléphone, l'effet porte aussi le titre de la colonne pour garder le lien */
  .paire .gain::before { content: "Concrètement"; font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
}
@media (max-width: 640px) {
  .cause { padding: 20px 20px; column-gap: 14px; }
  .effets__titre { font-size: clamp(36px, 10.5vw, 48px); }
}
@media (prefers-reduced-motion: reduce) {
  .effets *, .effets *::before, .effets *::after { transition: none !important; animation: none !important; }
}

/* les autocollants de « Concrètement » (colonne de droite de la cause et l'effet) */
.gain { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 22px 28px; background: radial-gradient(rgba(246, 246, 247, .06) 1.5px, transparent 2px) 0 0 / 14px 14px, var(--charbon);
  clip-path: polygon(0% 2%, 8% 0%, 19% 1.6%, 31% .3%, 44% 1.8%, 57% .2%, 70% 1.5%, 83% 0%, 94% 1.4%, 100% .5%, 99.4% 24%, 100% 50%, 99.3% 76%, 100% 99%, 90% 100%, 77% 98.4%, 64% 99.8%, 51% 98.3%, 38% 99.7%, 25% 98.4%, 12% 99.8%, 1% 98.7%, .6% 74%, 0% 50%, .7% 26%); }
.gain i { font-size: 46px; color: var(--rouge); }
.gain b { font: 900 clamp(20px, 1.7vw, 26px)/1.05 var(--titre); text-transform: uppercase; }
.gain span { color: var(--gris); font-size: 17px; line-height: 1.45; }



/* ---------- services : la liste à gauche, l'affiche du service ouvert à droite (dessous en mobile) */
/* la section est taillée en biais en haut et en bas, en sens contraires : elle déborde sur ses deux voisines */
.services { position: relative; z-index: 3; margin: calc(-1 * var(--biais)) 0; padding: calc(110px + var(--biais) * .6) 0 calc(140px + var(--biais) * .4); clip-path: polygon(0 var(--biais), 100% 0, 100% 100%, 0 calc(100% - var(--biais))); background: url(../_commun/img/fonds/decor-services.svg) center / cover, var(--rouge); color: var(--nuit); }
.services__sur { margin: 0 0 12px; font: 600 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--jaune); }
.services .titre { color: var(--nuit); margin-bottom: 48px; }
.services .titre em { color: var(--blanc); }
.offre { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: clamp(30px, 5vw, 90px); align-items: start; }
.offre__item { grid-column: 1; margin: 0; border-top: 2px solid rgba(23, 23, 26, .22); }
.offre__item:last-of-type { border-bottom: 2px solid rgba(23, 23, 26, .22); }
.offre__tete { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(10px, 1.3vw, 16px) 0; background: none; border: 0; text-align: left; cursor: pointer; color: var(--nuit); }
.offre__nom { position: relative; z-index: 0; font: 900 clamp(30px, 3.5vw, 56px)/1 var(--titre); text-transform: uppercase; letter-spacing: .005em; transition: color .15s; }
/* trait de pinceau charcoal sous le service ouvert (il reste dans la largeur du mot) */
.offre__nom::before { content: ""; position: absolute; z-index: -1; left: -2%; right: -4%; bottom: -.08em; height: .42em; background: var(--nuit); transform: scaleX(0) skewX(-12deg); transform-origin: 0 50%; transition: transform .25s var(--rapide); }
.offre__tete > i { font-size: clamp(22px, 2vw, 30px); opacity: .45; transition: opacity .15s, transform .2s var(--rapide); }
@media (hover: hover) { .offre__tete:hover .offre__nom { color: var(--blanc); } }
@media (hover: hover) { .offre__tete:hover > i { opacity: 1; transform: translateX(4px); } }
.offre__tete[aria-expanded="true"] .offre__nom { color: var(--blanc); }
.offre__tete[aria-expanded="true"] .offre__nom::before { transform: scaleX(1) skewX(-12deg); }
.offre__tete[aria-expanded="true"] > i { opacity: 1; color: var(--blanc); }
.offre__tete:focus-visible { outline: 3px solid var(--jaune); outline-offset: 4px; }
/* l'affiche : charcoal aux bords déchirés, plaquée de travers avec un ruban, l'autocollant du service qui déborde */
.offre__panneau { grid-column: 2; grid-row: 1 / span 8; position: sticky; top: 130px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 40px;
  padding: clamp(110px, 12vw, 160px) clamp(26px, 3vw, 46px) clamp(30px, 3vw, 44px); color: var(--blanc); isolation: isolate; transform: rotate(-1.2deg); }
.offre__panneau::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(rgba(246, 246, 247, .06) 1.5px, transparent 2px) 0 0 / 14px 14px, var(--nuit);
  filter: drop-shadow(12px 14px 0 rgba(0, 0, 0, .3));
  clip-path: polygon(0% 2%, 6% 0%, 13% 1.6%, 21% .4%, 30% 1.8%, 38% .2%, 47% 1.4%, 55% 0%, 64% 1.7%, 72% .5%, 81% 1.9%, 89% .3%, 96% 1.5%, 100% .6%, 99.4% 20%, 100% 41%, 99.2% 63%, 100% 84%, 99.5% 99%, 93% 100%, 85% 98.4%, 77% 99.8%, 68% 98.2%, 60% 99.7%, 51% 98.5%, 43% 100%, 34% 98.3%, 26% 99.6%, 17% 98.1%, 9% 99.8%, 2% 98.6%, 0% 99.5%, .7% 78%, 0% 56%, .8% 34%, 0% 14%); }
.offre__ruban { position: absolute; z-index: 2; top: -20px; left: -24px; width: 130px; height: auto; transform: rotate(-9deg); pointer-events: none; }
.offre__illu { position: absolute; z-index: 1; top: clamp(-110px, -7vw, -60px); right: clamp(-10px, 1vw, 30px); width: auto; height: clamp(170px, 17vw, 250px); max-width: 62%; object-fit: contain; transform: rotate(6deg); filter: drop-shadow(10px 12px 0 rgba(0, 0, 0, .35)); pointer-events: none; }
.offre__sur { font: 600 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--jaune); }
.offre__accroche { font: 900 clamp(26px, 2.5vw, 40px)/1.02 var(--titre); text-transform: uppercase; letter-spacing: .005em; text-wrap: balance; }
.offre__texte { color: var(--gris); font-size: 18px; line-height: 1.5; max-width: 46ch; }
.offre__panneau .btn { margin-top: 8px; }
.offre__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.offre__plus { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding-bottom: 4px; font: 700 17px/1 var(--bouton); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid var(--jaune); transition: color 100ms ease-out; }
@media (hover: hover) { .offre__plus:hover { color: var(--jaune); } }

/* ---------- réalisations : section papier */
.realisations { position: relative; z-index: 2; padding-bottom: var(--biais); /* la marge que mange le biais de l'équipe */ background: url(../_commun/img/fonds/decor-realisations.svg) center / cover, var(--nuit); overflow: hidden; }
/* blz-fiches-debut */
/* ---------- réalisations, piste B : une rangée d'affiches collées au mur, qui glisse au défilement.
   Chaque affiche est de travers et à sa hauteur ; celle du centre se fait coller (deux rubans), sa phrase
   claque dans un carré rouge par-dessus le site, et ses étiquettes sortent d'une étiqueteuse. */
.realisations__scene { position: relative; height: 100vh; height: 100dvh; display: flex; flex-direction: column; justify-content: center; gap: clamp(10px, 2vh, 22px); padding: 92px 0 22px; overflow: hidden; }
.realisations__tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 30px; }
.realisations__tete .realisations__sur { margin-bottom: 6px; }
.realisations__tete .titre { font-size: clamp(38px, 4.4vw, 76px); }
.realisations__sur { font: 600 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--jaune); }
.fiches { --h: clamp(240px, calc(100dvh - 420px), 620px); --w: min(74vw, calc(var(--h) * 1.72)); position: relative; outline: none; }
.fiches:focus-visible .fiche.est-devant .fiche__cadre { outline: 3px solid var(--jaune); outline-offset: 10px; }
.fiches__piste { display: flex; align-items: flex-start; gap: 7vw; padding: 26px calc(50vw - var(--w) / 2) 0; will-change: transform; }
.fiche { position: relative; flex: none; width: var(--w); display: flex; flex-direction: column; gap: 18px; text-decoration: none; color: inherit; transform-origin: 50% 40%; }
.fiche__affiche { position: relative; height: var(--h); }
.fiche__cadre { height: 100%; filter: drop-shadow(12px 12px 0 var(--rouge)); }
.fiche__papier { height: 100%; padding: 1.8% 1.8% 2.2%; background: radial-gradient(rgba(23, 23, 26, .09) 1.3px, transparent 1.7px) 0 0 / 11px 11px, var(--papier);
  clip-path: polygon(0% 1.4%, 7% 0%, 15% 1.2%, 24% .2%, 33% 1.5%, 42% .3%, 51% 1.3%, 60% 0%, 69% 1.4%, 78% .4%, 87% 1.6%, 94% .2%, 100% 1.1%, 99.5% 18%, 100% 37%, 99.3% 56%, 100% 76%, 99.4% 98.7%, 92% 100%, 83% 98.6%, 74% 99.8%, 64% 98.5%, 55% 99.7%, 45% 98.4%, 36% 99.8%, 26% 98.6%, 17% 99.9%, 8% 98.5%, 0% 99.6%, .6% 79%, 0% 58%, .7% 37%, 0% 18%); }
.fiche .navigateur { height: 100%; }
/* on ne peut ni cliquer, ni survoler, ni sélectionner dans le site recréé : la souris ne voit que l'écran (pour le faire défiler) */
.fiche .mini, .fiche .mini * { pointer-events: none !important; user-select: none; -webkit-user-select: none; }
.fiche .navigateur__ecran { overflow-y: hidden; }
.fiche:not(.est-devant) .navigateur__ecran { pointer-events: none; }
.fiche.est-devant:not(.est-explore) .navigateur__ecran { cursor: pointer; }
.fiche.est-explore .navigateur__ecran { overflow-y: auto; }
.fiche.est-explore .fiche__cadre { filter: drop-shadow(12px 12px 0 var(--jaune)); }
/* deux rubans, posés de travers sur deux coins opposés ; ils se collent une fois l'affiche arrivée */
.fiche__ruban { position: absolute; z-index: 3; width: clamp(96px, 9vw, 150px); height: auto; pointer-events: none; opacity: 0; }
.fiche__ruban--a { top: -18px; left: 7%; rotate: -8deg; }
.fiche__ruban--b { right: 5%; bottom: -16px; rotate: 6deg; }
/* la phrase : un carré rouge collé à gauche, par-dessus le site, qui déborde de l'affiche */
.fiche__phrase { position: absolute; z-index: 4; left: calc(var(--w) * -.27); top: 24%; width: clamp(250px, 23vw, 380px); margin: 0; padding: 22px 24px 24px; background: var(--rouge); color: #fff; font: 900 clamp(19px, 1.75vw, 29px)/1.04 var(--titre); text-transform: uppercase; letter-spacing: .005em; rotate: -3deg; box-shadow: 8px 8px 0 var(--nuit); opacity: 0; pointer-events: none; }
.fiche__phrase::before { content: "“"; display: block; height: .5em; margin-bottom: .1em; font-size: 2.2em; line-height: .9; color: var(--jaune); }
/* la légende : le numéro, puis le nom et les étiquettes comme sortis d'une étiqueteuse */
.fiche__legende { display: flex; align-items: flex-start; gap: 18px; padding-left: 2%; }
.fiche__legende p { margin: 0; }
.fiche__num { font: 900 italic clamp(44px, 4.4vw, 76px)/.8 var(--titre); color: var(--jaune); rotate: -6deg; }
.fiche__etiquettes { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.dymo { display: inline-block; padding: .42em .8em .36em; background: var(--nuit); color: #fff; font: 800 13px/1 var(--titre); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  clip-path: polygon(0 6%, 2% 0, 98% 4%, 100% 0, 100% 96%, 98% 100%, 2% 94%, 0 100%); }
.fiche__nom { font-size: clamp(18px, 1.6vw, 28px); letter-spacing: .1em; padding: .38em .7em .32em; background: #000; outline: 2px solid var(--charbon-2); rotate: -1.5deg; }
.fiche__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-left: 10px !important; rotate: 1.2deg; }
.dymo--rouge { background: var(--rouge); }
.dymo--blanc { background: var(--blanc); color: var(--nuit); }
.fiche__actions { margin-left: auto; align-self: center; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.fiche__cas { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 3px; font: 700 15px/1 var(--bouton); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid var(--rouge); transition: color 100ms ease-out; }
.fiche__cas:hover { color: var(--jaune); }
.fiche:not(.est-devant) .fiche__cas { visibility: hidden; }
.fiche__explorer { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 0; border-radius: var(--r); background: var(--jaune); color: var(--nuit); font: 700 15px/1 var(--bouton); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s; }
.fiche.est-devant:not(.est-explore) .fiche__explorer { opacity: 1; pointer-events: auto; }
/* au survol : le bouton passe au rouge, le curseur clique deux fois et une onde part du clic */
.fiche__explorer i { position: relative; transition: color .15s; }
.fiche__explorer i::after { content: ""; position: absolute; left: 4px; top: 3px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; }
.fiche__explorer { transition: opacity .2s, background .15s, color .15s; }
.fiche__explorer:hover, .fiche__explorer:focus-visible { background: var(--rouge); color: #fff; }
.fiche__explorer:hover i { animation: blz-clic .7s var(--claque) 2; }
.fiche__explorer:hover i::after { animation: blz-onde .7s ease-out 2; }
@keyframes blz-clic { 0%, 100% { scale: 1; } 30% { scale: .72; } 55% { scale: 1.15; } }
@keyframes blz-onde { 0%, 25% { opacity: 0; scale: .4; } 35% { opacity: 1; } 100% { opacity: 0; scale: 2.8; } }
.fiche:not(.est-devant) .fiche__legende { opacity: .35; }
/* la 7e affiche : toutes les réalisations */
.toutes { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 7% 8%; background: var(--jaune); color: var(--nuit); overflow: hidden; }
.toutes__sur { position: relative; z-index: 1; margin: 0; font: 600 14px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.toutes__titre { position: relative; z-index: 1; margin: 0; font: 900 clamp(48px, calc(var(--w) * .112), 150px)/.96 var(--titre); text-transform: uppercase; }
/* au survol, un trait de surligneur rouge passe derrière chaque ligne, dans la largeur du texte */
.toutes__titre span { padding: 0 .08em; background: linear-gradient(var(--rouge), var(--rouge)) 0 62% / 0% 58% no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .45s cubic-bezier(.7, 0, .2, 1), color .3s; }
.toutes__titre span:nth-of-type(2) { transition-delay: .08s; }
.toutes__titre span:nth-of-type(3) { transition-delay: .16s; }
.fiche--toutes:hover .toutes__titre span, .fiche--toutes:focus-visible .toutes__titre span { background-size: 100% 58%; color: #fff; }
.fiche--toutes:focus-visible .fiche__cadre { outline: 3px solid var(--blanc); outline-offset: 10px; }
/* le bas : les points pour sauter d'une affiche à l'autre */
.realisations__bas { display: flex; align-items: center; justify-content: center; gap: 22px; }
.fiches__points { display: flex; align-items: center; gap: 8px; }
.fiches__points button { width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.fiches__points button::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; background: var(--charbon-2); border-radius: 2px; transition: background .2s, height .2s; }
.fiches__points button:hover::before { background: var(--gris); }
.fiches__points button[aria-current="true"]::before { background: var(--rouge); height: 8px; margin-top: -4px; }
.fiches__tout { flex: none; margin-bottom: .9em; display: inline-flex; align-items: center; gap: 10px; font: 700 18px/1 var(--bouton); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; padding-bottom: 5px; border-bottom: 2px solid var(--rouge); }
.fiches__tout:hover { color: var(--jaune); }
.fiches__tout i { transition: translate .25s var(--claque); }
.fiches__tout:hover i { translate: 6px 0; }
@media (max-width: 640px) {
  .realisations__scene { height: auto; padding: 90px 0 50px; gap: 16px; }
  .realisations__tete { flex-direction: column; align-items: flex-start; }
  .fiches__tout { margin-bottom: 0; }
  .fiches { --w: 84vw; --h: 64vw; }
  .fiches__piste { gap: 6vw; padding: 24px 8vw 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .fiches__piste::-webkit-scrollbar { display: none; }
  .fiche { scroll-snap-align: center; rotate: calc(var(--r) * .6); translate: 0 calc(var(--y) * .4); }
  .fiche .navigateur__ecran { overflow-y: auto; }
  .fiche__affiche { height: auto; }
  .fiche__cadre { height: var(--h); }
  .fiche__phrase { position: relative; left: -2%; top: auto; width: 92%; margin-top: -12px; padding: 14px 16px; font-size: 16px; }
  .fiche__legende { gap: 12px; padding-left: 0; }
  .fiche__num { font-size: 40px; }
  .fiche__ruban--b { bottom: auto; top: calc(var(--h) - 22px); }
  .fiche__explorer { display: none; }
  .fiche__actions { margin-left: 0; align-items: flex-start; }
  .fiche:not(.est-devant) .fiche__cas { visibility: visible; }
  .fiche__nom { font-size: 18px; }
  .toutes__titre { font-size: 34px; }
  .fiches__points { display: none; }
}
/* blz-fiches-fin */
.navigateur { height: 100%; display: flex; flex-direction: column; background: #fff; border: 2px solid var(--nuit); border-radius: 6px; overflow: hidden; }
.navigateur__barre { flex: none; height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 10px; background: var(--nuit); }
.navigateur__barre i { width: 9px; height: 9px; border-radius: 50%; background: var(--rouge); }
.navigateur__barre i:nth-child(2) { background: var(--jaune); }
.navigateur__barre i:nth-child(3) { background: var(--gris); }
.navigateur__barre span { flex: 0 1 46%; margin-left: 10px; padding: 3px 10px; border-radius: 3px; background: var(--charbon); font: 600 10.5px/1.3 var(--mono); color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navigateur__ecran { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #b9b7af transparent; }
.navigateur__ecran { overflow-y: hidden; }

/* ---------- recréation du site de Groupe Fjord Cité (largeur virtuelle de 1200 px, mise à l'échelle par zoom) */
.mini { --encre: #181714; --sable: #dee0da; --taupe: #9b978c; position: relative; width: 1200px; zoom: var(--k, .4); background: #fff; color: var(--encre); font: 400 15.5px/1.55 'Funnel Sans', system-ui, sans-serif; }
.mini p { margin: 0; }
.mini__grille { position: absolute; inset: 0; z-index: 6; display: grid; grid-template-columns: repeat(6, 1fr); padding: 0 56px; pointer-events: none; opacity: 0; }
.mini__grille i { border-left: 1px solid rgba(255, 0, 77, .35); transform-origin: 50% 0; }
.mini__grille i:last-child { border-right: 1px solid rgba(255, 0, 77, .35); }
.mini--fjord .mini__entete { position: relative; z-index: 2; height: 76px; display: flex; align-items: center; gap: 46px; padding: 0 56px; background: rgba(255, 255, 255, .96); border-bottom: 1px solid #e9e9e4; }
.mini--fjord .mini__logo { height: 34px; width: auto; }
.mini--fjord .mini__nav { display: flex; gap: 26px; font: 500 12px/1 'Funnel Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.mini--fjord .mini__nav span { padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color .2s; cursor: pointer; }
@media (hover: hover) { .mini--fjord .mini__nav span:hover { border-color: var(--encre); } }
.mini--fjord .mini__tel { margin-left: auto; font: 500 13px/1 'Funnel Sans', sans-serif; letter-spacing: .06em; }
.mini--fjord .mini__heros { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; min-height: 700px; background: var(--sable); }
.mini--fjord .mini__texte { position: relative; z-index: 1; padding: 104px 0 80px 56px; }
.mini--fjord .mini__sur { display: flex; align-items: center; gap: 14px; font: 500 11px/1 'Funnel Sans', sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #6e6b63; }
.mini--fjord .mini__sur::before { content: ""; width: 30px; height: 1px; background: currentColor; }
.mini--fjord .mini__titre { margin: 26px -140px 30px 0 !important; font: 400 88px/.95 'Funnel Display', system-ui, sans-serif; letter-spacing: -.012em; text-transform: uppercase; }
.mini--fjord .mini__titre span { display: block; overflow: hidden; padding-bottom: .04em; }
.mini--fjord .mini__titre i { display: block; font-style: normal; }
.mini--fjord .mini__lead { max-width: 430px; color: #3d3b36; }
.mini--fjord .mini__liens { display: flex; gap: 30px; margin-top: 32px !important; font: 600 11.5px/1 'Funnel Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.mini--fjord .mini__liens span { padding-bottom: 5px; border-bottom: 1px solid var(--encre); cursor: pointer; }
.mini--fjord .mini__photo { position: relative; overflow: hidden; }
.mini--fjord .mini__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mini--fjord .mini__loyers { padding: 92px 56px 110px; }
.mini--fjord .mini__loyers-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.mini--fjord .mini__h2 { margin-top: 18px !important; font: 400 50px/1 'Funnel Display', system-ui, sans-serif; text-transform: uppercase; }
.mini--fjord .mini__compte { font: 500 11px/1 'Funnel Sans', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--taupe); }
.mini--fjord .mini__cartes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin-top: 38px; }
.mini--fjord .mini__carte { cursor: pointer; }
.mini--fjord .mini__carte-photo { position: relative; aspect-ratio: 310 / 290; overflow: hidden; background: var(--sable); }
.mini--fjord .mini__carte-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(0, 0, 0, .55)); }
.mini--fjord .mini__carte-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
@media (hover: hover) { .mini--fjord .mini__carte:hover .mini__carte-photo img { transform: scale(1.07); } }
.mini--fjord .mini__badge { position: absolute; z-index: 1; top: 12px; left: 12px; padding: 6px 9px; background: #fff; font: 600 9.5px/1 'Funnel Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.mini--fjord .mini__prix { position: absolute; z-index: 1; left: 14px; bottom: 12px; display: flex; align-items: baseline; gap: 6px; color: #fff; }
.mini--fjord .mini__prix small { font: 500 10px/1 'Funnel Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.mini--fjord .mini__prix small:first-child { position: absolute; left: 0; top: -14px; }
.mini--fjord .mini__prix b { font: 400 34px/1 'Funnel Display', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.mini--fjord .mini__nom { margin-top: 16px !important; font: 400 22px/1.1 'Funnel Display', system-ui, sans-serif; }
.mini--fjord .mini__ville { margin-top: 4px !important; color: #6e6b63; font-size: 13.5px; }
.mini--fjord .mini__dispo { margin-top: 10px !important; font: 600 10.5px/1 'Funnel Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; }
/* blz-minis-debut */
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 400 700; font-style: normal; font-display: swap; src: url(../_commun/fonts/conseiller-bricolage.woff2) format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 400 700; font-style: normal; font-display: swap; src: url(../_commun/fonts/conseiller-figtree.woff2) format('woff2'); }
.mini--conseiller { --navy: #173142; --cuivre: #b56f4d; --cuivre-encre: #945236; --cuivre-bouton: #9b5536; --ivoire: #f4f3ef; --papier: #fcfbf8; --ardoise: #e5ebee; --encre: #26343d; --sourdine: #586974; --ligne: #d6dddf; --titre: 'Bricolage Grotesque', 'Avenir Next', system-ui, sans-serif; --texte: 'Figtree', system-ui, sans-serif; background: var(--ivoire); color: var(--encre); font: 400 15px/1.6 var(--texte); }
.mini--conseiller p { margin: 0; }
.mini--conseiller svg { display: block; }

.mini--conseiller .vc-rail { position: sticky; top: 64px; z-index: 5; height: 0; }
.mini--conseiller .vc-agenda { position: absolute; left: 18px; top: 0; width: 214px; padding: 18px 16px 14px; border-radius: 24px; background: var(--papier); box-shadow: inset 0 1px 0 #fff, 0 26px 50px -24px rgba(16, 39, 51, .45), 0 0 0 1px rgba(23, 49, 66, .05); }
.mini--conseiller .vc-top { display: flex; align-items: center; justify-content: space-between; padding: 0 0 14px 2px; border-bottom: 1px solid var(--ligne); }
.mini--conseiller .vc-logo { height: 36px; width: auto; }
.mini--conseiller .vc-dial { width: 36px; height: 36px; }
.mini--conseiller .vc-mbtn { display: none; }
.mini--conseiller .vc-liste { margin: 0; padding: 12px 0 0; list-style: none; }
.mini--conseiller .vc-liste li { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 6px 0 3px; border-radius: 10px; font: 600 15px/1 var(--texte); color: var(--sourdine); cursor: pointer; transition: background-color .2s, color .2s; }
.mini--conseiller .vc-liste li:hover { background: #eef1f2; color: var(--navy); }
.mini--conseiller .vc-liste li i { flex: none; width: 20px; height: 20px; border: 1px solid #aab6bc; border-radius: 50%; }
.mini--conseiller .vc-varia { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; padding: 8px 10px 8px 8px; border-radius: 12px; background: var(--ardoise); color: var(--navy); cursor: pointer; transition: background-color .2s; }
.mini--conseiller .vc-varia:hover { background: #dae2e6; }
.mini--conseiller .vc-varia-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--navy); color: var(--papier); }
.mini--conseiller .vc-varia-ic svg { width: 18px; height: 18px; }
.mini--conseiller .vc-varia-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.mini--conseiller .vc-varia-txt b { font: 700 13px/1.2 var(--texte); }
.mini--conseiller .vc-varia-txt small { font: 600 10.7px/1.2 var(--texte); color: var(--cuivre-encre); }
.mini--conseiller .vc-varia-go { width: 15px; height: 15px; }
.mini--conseiller .vc-pied { padding-top: 10px; border-top: 1px solid var(--ligne); }
.mini--conseiller .vc-tel { height: 36px; display: grid; place-items: center; font: 700 15px/1 var(--texte); color: var(--encre); }
.mini--conseiller .vc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 12px; background: var(--cuivre-bouton); color: var(--papier); font: 700 13.4px/1 var(--texte); white-space: nowrap; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 22px -14px rgba(90, 45, 25, .7); transition: background-color .2s; }
.mini--conseiller .vc-btn:hover { background: #874627; }
.mini--conseiller .vc-btn--plein { display: flex; height: 44px; margin-top: 8px; }
.mini--conseiller .vc-reseaux { display: flex; justify-content: center; gap: 4px; margin-top: 6px; color: var(--sourdine); }
.mini--conseiller .vc-reseaux svg { width: 36px; height: 34px; padding: 9px 10px; fill: currentColor; }
.mini--conseiller .vc-reseaux svg[stroke] { fill: none; }

.mini--conseiller .vc-heros { position: relative; min-height: 740px; padding: 98px 0 60px 302px; background-color: var(--ivoire); background-image: radial-gradient(70% 60% at 85% 30%, #fbf9f4, transparent 70%), radial-gradient(55% 40% at 10% 72%, #ece8de, transparent 70%); overflow: hidden; }
.mini--conseiller .vc-copie { position: relative; z-index: 1; width: 560px; }
.mini--conseiller .vc-qui { display: flex; align-items: flex-start; gap: 13px; font-size: 13.3px; line-height: 1.6; color: var(--sourdine); }
.mini--conseiller .vc-qui b { font-weight: 700; color: var(--navy); white-space: nowrap; }
.mini--conseiller .vc-roles { display: flex; flex-direction: column; white-space: nowrap; padding-left: 13px; border-left: 1px solid var(--ligne); line-height: 1.45; }
.mini--conseiller .vc-h1 { margin-top: 26px !important; font: 620 68px/.93 var(--titre); letter-spacing: -.026em; color: var(--navy); }
.mini--conseiller .vc-h1 span { display: block; overflow: hidden; padding-bottom: .05em; }
.mini--conseiller .vc-h1 i { display: block; font-style: normal; }
.mini--conseiller .vc-h1 .vc-l2 { color: var(--cuivre-encre); }
.mini--conseiller .vc-sous { margin-top: 20px !important; font-size: 17.3px; color: var(--encre); }
.mini--conseiller .vc-rangee { display: flex; align-items: center; margin-top: 16px; }
.mini--conseiller .vc-btn--grand { height: 47px; padding: 0 21px; font-size: 14px; }
.mini--conseiller .vc-meta { display: flex; flex-direction: column; margin-left: 20px !important; padding-left: 20px; border-left: 1px solid var(--ligne); font-size: 13px; line-height: 1.35; color: var(--sourdine); }
.mini--conseiller .vc-meta b { font-size: 14px; color: var(--navy); }
.mini--conseiller .vc-aparte { margin-top: 18px !important; font-size: 13.3px; color: var(--sourdine); }
.mini--conseiller .vc-citation { display: grid; grid-template-columns: 44px 1fr; gap: 18px; width: 400px; margin-top: 30px; padding: 18px 23px 17px 20px; border-radius: 15px; background: var(--papier); box-shadow: 0 20px 36px -26px rgba(16, 39, 51, .4), 0 0 0 1px rgba(23, 49, 66, .07); }
.mini--conseiller .vc-guil { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #f1e5dc; font: 700 44px/1 var(--titre); color: var(--cuivre-encre); padding-top: 11px; box-sizing: border-box; }
.mini--conseiller .vc-cit-t { font: 450 14.7px/1.45 var(--titre); color: var(--encre); }
.mini--conseiller .vc-cit-a { margin-top: 8px !important; font-size: 12px; color: var(--sourdine); }
.mini--conseiller .vc-cit-a b { color: var(--encre); }
.mini--conseiller .vc-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 440px; overflow: hidden; }
.mini--conseiller .vc-arche { position: absolute; left: 56px; top: 213px; width: 443px; bottom: 0; border-radius: 999px 999px 0 0; background: radial-gradient(60% 45% at 50% 38%, rgba(221, 166, 132, .35), transparent 70%), linear-gradient(#1d3d52, #102733); }
.mini--conseiller .vc-arche::after { content: ""; position: absolute; inset: 24px 24px -2px; border: 1px solid rgba(244, 243, 239, .16); border-bottom: 0; border-radius: 999px 999px 0 0; }
.mini--conseiller .vc-photo img { position: absolute; left: 9px; top: 70px; width: 448px; height: 672px; object-fit: contain; object-position: 50% 0; }
.mini--conseiller .vc-photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 170px; background: linear-gradient(rgba(244, 243, 239, 0), rgba(244, 243, 239, .85) 70%, var(--ivoire)); }

.mini--conseiller .vc-outil { padding: 26px 50px 70px 302px; }
.mini--conseiller .vc-sur { font: 700 11px/1.6 var(--texte); letter-spacing: .13em; text-transform: uppercase; color: var(--cuivre-encre); }
.mini--conseiller .vc-h2 { margin-top: 6px !important; font: 620 42px/1.05 var(--titre); letter-spacing: -.03em; color: var(--navy); }
.mini--conseiller .vc-travail { display: grid; grid-template-columns: 336px minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 18px; }
.mini--conseiller .vc-ctl { padding: 18px 18px 20px; border-radius: 24px; background: var(--papier); box-shadow: 0 0 0 1px rgba(23, 49, 66, .07), 0 20px 40px -30px rgba(16, 39, 51, .4); }
.mini--conseiller .vc-ctl-h { font: 600 19.5px/1.5 var(--titre); letter-spacing: -.015em; color: var(--navy); }
.mini--conseiller .vc-fld { margin-top: 12px; }
.mini--conseiller .vc-lbl { font: 600 13.4px/1.35 var(--texte); color: var(--encre); }
.mini--conseiller .vc-lbl span { font-weight: 500; color: var(--sourdine); }
.mini--conseiller .vc-boite { display: flex; align-items: center; justify-content: space-between; height: 42px; margin-top: 6px !important; padding: 0 14px; border: 1px solid var(--ligne); border-radius: 12px; background: #fff; }
.mini--conseiller .vc-pas { width: 20px; font: 400 18px/1 var(--texte); color: var(--sourdine); text-align: center; cursor: pointer; }
.mini--conseiller .vc-val { display: flex; align-items: baseline; gap: 4px; }
.mini--conseiller .vc-val b { font: 600 18px/1 var(--titre); letter-spacing: -.01em; color: var(--navy); font-variant-numeric: tabular-nums; }
.mini--conseiller .vc-val small { font: 600 13.4px/1 var(--texte); color: var(--sourdine); }
.mini--conseiller .vc-piste { position: relative; height: 4px; margin-top: 15px !important; border-radius: 9px; background: var(--ligne); }
.mini--conseiller .vc-piste i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); border-radius: 9px; background: var(--cuivre); }
.mini--conseiller .vc-piste em { position: absolute; left: var(--p); top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; box-sizing: border-box; border: 2px solid var(--cuivre); border-radius: 50%; background: var(--papier); box-shadow: 0 2px 6px rgba(16, 39, 51, .2); cursor: grab; }
.mini--conseiller .vc-bornes { display: flex; justify-content: space-between; margin-top: 9px !important; font-size: 10.7px; line-height: 1.4; color: var(--sourdine); }
.mini--conseiller .vc-res-carte { padding: 22px 26px 20px; border-radius: 24px; background: var(--papier); box-shadow: 0 0 0 1px rgba(23, 49, 66, .07), 0 20px 40px -34px rgba(16, 39, 51, .35); }
.mini--conseiller .vc-res-h { margin-top: 8px !important; font: 600 20px/1.5 var(--titre); color: var(--navy); }
.mini--conseiller .vc-total { margin-top: 4px !important; font: 650 72px/1 var(--titre); letter-spacing: -.045em; color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini--conseiller .vc-fig { margin-top: 16px !important; font: 700 15px/1.5 var(--texte); color: var(--encre); }
.mini--conseiller .vc-graph { position: relative; height: 160px; margin-top: 8px; }
.mini--conseiller .vc-grille { position: absolute; left: 0; right: 0; top: 0; bottom: 22px; display: flex; flex-direction: column; justify-content: space-between; }
.mini--conseiller .vc-grille span { position: relative; height: 0; margin-left: 52px; border-top: 1px solid #dde3e5; }
.mini--conseiller .vc-grille span:last-child { border-color: #98a7af; }
.mini--conseiller .vc-grille b { position: absolute; right: calc(100% + 8px); top: -8px; font: 400 10.4px/16px var(--texte); color: var(--sourdine); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mini--conseiller .vc-courbe { position: absolute; left: 52px; top: 0; width: calc(100% - 52px); height: calc(100% - 22px); overflow: visible; }
.mini--conseiller .vc-axe { position: absolute; left: 52px; right: 0; bottom: 0; height: 16px; font-size: 10.8px; line-height: 16px; color: var(--sourdine); }
.mini--conseiller .vc-axe span { position: absolute; top: 0; white-space: nowrap; }
.mini--conseiller .vc-axe span:nth-child(1) { left: 0; }
.mini--conseiller .vc-axe span:nth-child(2) { left: 40%; transform: translateX(-50%); }
.mini--conseiller .vc-axe span:nth-child(3) { left: 60%; transform: translateX(-50%); }
.mini--conseiller .vc-axe span:nth-child(4) { right: 0; }
.mini--conseiller .vc-legende { display: flex; gap: 20px; margin-top: 14px !important; font-size: 12.3px; color: var(--encre); }
.mini--conseiller .vc-legende span { display: flex; align-items: center; gap: 7px; }
.mini--conseiller .vc-legende i { width: 17px; height: 3px; border-radius: 2px; background: var(--navy); }
.mini--conseiller .vc-legende i.vc-cu { background: var(--cuivre); }
.mini--conseiller .vc-metriques { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.mini--conseiller .vc-metriques div { padding: 12px 15px 10px; border-radius: 15px; background: var(--papier); box-shadow: 0 0 0 1px rgba(23, 49, 66, .07); }
.mini--conseiller .vc-metriques p { font-size: 12px; line-height: 1.6; color: var(--sourdine); }
.mini--conseiller .vc-metriques b { display: block; margin-top: 2px; font: 600 23.3px/1.5 var(--titre); letter-spacing: -.02em; color: var(--navy); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .mini--conseiller { width: 760px; }
  .mini--conseiller .vc-rail { position: relative; top: 0; height: auto; padding: 22px 28px 0; }
  .mini--conseiller .vc-agenda { position: static; width: auto; padding: 12px 14px 12px 22px; border-radius: 22px; }
  .mini--conseiller .vc-top { padding: 0; border: 0; gap: 16px; }
  .mini--conseiller .vc-logo { height: 44px; margin-right: auto; }
  .mini--conseiller .vc-dial { width: 42px; height: 42px; }
  .mini--conseiller .vc-mbtn { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 20px; border-radius: 14px; background: var(--navy); color: var(--papier); font: 700 17px/1 var(--texte); }
  .mini--conseiller .vc-mbtn svg { width: 20px; height: 20px; }
  .mini--conseiller .vc-liste, .mini--conseiller .vc-varia, .mini--conseiller .vc-pied { display: none; }
  .mini--conseiller .vc-heros { display: flex; flex-direction: column; min-height: 0; padding: 0 40px 64px; }
  .mini--conseiller .vc-photo { position: relative; order: -1; width: auto; height: 560px; margin: 0 -40px 22px; }
  .mini--conseiller .vc-arche { left: 50%; top: 170px; width: 580px; margin-left: -290px; }
  .mini--conseiller .vc-photo img { left: 50%; top: 0; width: 400px; height: 600px; margin-left: -200px; }
  .mini--conseiller .vc-photo::after { height: 150px; }
  .mini--conseiller .vc-copie { width: auto; }
  .mini--conseiller .vc-qui { font-size: 17px; }
  .mini--conseiller .vc-h1 { font-size: 84px; }
  .mini--conseiller .vc-sous { font-size: 22px; }
  .mini--conseiller .vc-btn--grand { height: 60px; padding: 0 28px; font-size: 18px; }
  .mini--conseiller .vc-meta { font-size: 16px; }
  .mini--conseiller .vc-meta b { font-size: 17px; }
  .mini--conseiller .vc-aparte { font-size: 16px; }
  .mini--conseiller .vc-citation { width: auto; }
  .mini--conseiller .vc-cit-t { font-size: 18px; }
  .mini--conseiller .vc-cit-a { font-size: 14px; }
  .mini--conseiller .vc-outil { padding: 56px 40px 72px; }
  .mini--conseiller .vc-h2 { font-size: 52px; }
  .mini--conseiller .vc-travail { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .mini--conseiller .vc-sur { font-size: 14px; }
  .mini--conseiller .vc-ctl { padding: 24px 26px 28px; }
  .mini--conseiller .vc-ctl-h { font-size: 26px; }
  .mini--conseiller .vc-fld { margin-top: 18px; }
  .mini--conseiller .vc-lbl { font-size: 18px; }
  .mini--conseiller .vc-boite { height: 56px; padding: 0 20px; }
  .mini--conseiller .vc-pas { font-size: 24px; }
  .mini--conseiller .vc-val b { font-size: 24px; }
  .mini--conseiller .vc-val small { font-size: 17px; }
  .mini--conseiller .vc-piste { height: 6px; margin-top: 20px !important; }
  .mini--conseiller .vc-piste em { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
  .mini--conseiller .vc-bornes { margin-top: 12px !important; font-size: 14px; }
  .mini--conseiller .vc-res-carte { padding: 28px 30px 26px; }
  .mini--conseiller .vc-res-h { font-size: 26px; }
  .mini--conseiller .vc-total { font-size: 96px; }
  .mini--conseiller .vc-fig { font-size: 19px; }
  .mini--conseiller .vc-graph { height: 240px; }
  .mini--conseiller .vc-grille b { font-size: 13px; }
  .mini--conseiller .vc-axe { font-size: 13.5px; }
  .mini--conseiller .vc-legende { font-size: 16px; }
  .mini--conseiller .vc-metriques p { font-size: 15px; }
  .mini--conseiller .vc-metriques b { font-size: 30px; }
}
@font-face { font-family: 'Big Shoulders Display'; font-weight: 100 900; font-style: normal; font-display: swap; src: url(../_commun/fonts/moninspect-big-shoulders-display.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 100 700; font-style: normal; font-display: swap; src: url(../_commun/fonts/moninspect-ibm-plex-sans.woff2) format('woff2'); }
@font-face { font-family: 'Space Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url(../_commun/fonts/moninspect-space-mono-400.woff2) format('woff2'); }
@font-face { font-family: 'Space Mono'; font-weight: 700; font-style: normal; font-display: swap; src: url(../_commun/fonts/moninspect-space-mono-700.woff2) format('woff2'); }

.mini--moninspect { --mo-bg: #0a1420; --mo-texte: #eef3f8; --mo-or: #caa661; --mo-or-2: #dcbf85; --mo-gris: #8ba0b3; --mo-gris-3: #7d92a6; --mo-gris-4: #6d8296; --mo-ligne: rgba(255, 255, 255, .12); --mo-titre: 'Big Shoulders Display', 'Arial Narrow', sans-serif; --mo-corps: 'IBM Plex Sans', system-ui, sans-serif; --mo-mono: 'Space Mono', 'Courier New', monospace;
  background: var(--mo-bg); color: var(--mo-texte); font: 400 15px/1.6 var(--mo-corps); -webkit-font-smoothing: antialiased; }
.mini--moninspect p { margin: 0; }
.mini--moninspect .mo-or { color: var(--mo-or); }

.mini--moninspect .mo-haut { position: relative; background: var(--mo-bg); overflow: hidden; }
.mini--moninspect .mo-entete { position: relative; z-index: 4; height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 36px; }
.mini--moninspect .mo-logo img { display: block; width: auto; }
.mini--moninspect .mo-logo-lg { height: 50px; }
.mini--moninspect .mo-logo-sm { display: none !important; height: 36px; }
.mini--moninspect .mo-droite { display: flex; align-items: center; gap: 16px; }
.mini--moninspect .mo-tel { font: 400 13px/1 var(--mo-mono); color: var(--mo-texte); cursor: pointer; transition: color .25s; }
.mini--moninspect .mo-tel:hover { color: var(--mo-or-2); }
.mini--moninspect .mo-menu { display: flex; align-items: center; gap: 11px; padding: 13px 18px; border-radius: 8px; background: var(--mo-or); color: var(--mo-bg); font: 700 12px/1 var(--mo-mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background-color .3s; }
.mini--moninspect .mo-menu:hover { background: var(--mo-or-2); }
.mini--moninspect .mo-menu i { display: flex; flex-direction: column; gap: 3px; }
.mini--moninspect .mo-menu b { display: block; width: 16px; height: 2px; background: var(--mo-bg); }

.mini--moninspect .mo-heros { position: relative; min-height: 704px; }
.mini--moninspect .mo-lueur { position: absolute; z-index: 0; top: -76px; right: 0; bottom: 0; width: 64%; background: radial-gradient(34% 40% at 58% 44%, rgba(202, 166, 97, .2), rgba(202, 166, 97, 0) 72%), radial-gradient(62% 66% at 60% 50%, #18293d 0, rgba(24, 41, 61, .55) 45%, rgba(24, 41, 61, 0) 78%); }
.mini--moninspect .mo-lueur::before { content: ""; position: absolute; inset: 0; opacity: .55; background-image: radial-gradient(rgba(202, 166, 97, .3) 1px, transparent 1.5px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(50% 55% at 60% 45%, #000 0, transparent 78%); mask-image: radial-gradient(50% 55% at 60% 45%, #000 0, transparent 78%); }
.mini--moninspect .mo-photo { position: absolute; z-index: 1; right: 36px; bottom: 0; width: 516px; height: 437px; overflow: hidden; }
.mini--moninspect .mo-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transform-origin: 50% 100%; }
.mini--moninspect .mo-photo::after { content: ""; position: absolute; inset: auto 0 0; z-index: 1; height: 120px; background: linear-gradient(0deg, var(--mo-bg) 0, rgba(10, 20, 32, .7) 30%, rgba(10, 20, 32, 0)); }
.mini--moninspect .mo-texte { position: relative; z-index: 3; width: 576px; padding: 92px 0 70px 36px; }
.mini--moninspect .mo-sur { display: flex; align-items: center; gap: 12px; margin-bottom: 20px !important; font: 400 12px/1 var(--mo-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--mo-or); }
.mini--moninspect .mo-sur span { flex: none; width: 34px; height: 1px; background: var(--mo-or); }
.mini--moninspect .mo-titre { font: 800 76px/1 var(--mo-titre); letter-spacing: -.03em; }
.mini--moninspect .mo-titre span { display: block; overflow: hidden; padding-bottom: .02em; }
.mini--moninspect .mo-titre i { display: block; font-style: normal; }
.mini--moninspect .mo-lead { max-width: 530px; margin-top: 36px !important; color: #d3dde6; }
.mini--moninspect .mo-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 26px !important; }
.mini--moninspect .mo-btn { display: inline-block; padding: 17px 30px; border: 1px solid transparent; border-radius: 9px; background: var(--mo-or); color: var(--mo-bg); font: 700 15px/1.2 var(--mo-corps); cursor: pointer; transition: background-color .3s, border-color .3s, color .25s; }
.mini--moninspect .mo-btn:hover { background: var(--mo-or-2); }
.mini--moninspect .mo-btn--ligne { padding: 17px 24px; border-color: rgba(255, 255, 255, .28); background: transparent; color: var(--mo-texte); font-weight: 600; }
.mini--moninspect .mo-btn--ligne:hover { background: transparent; border-color: var(--mo-or); color: var(--mo-or-2); }
.mini--moninspect .mo-faits { display: grid; grid-template-columns: repeat(2, max-content); gap: 18px 36px; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .16); }
.mini--moninspect .mo-fv { font: 700 25px/1 var(--mo-titre); }
.mini--moninspect .mo-fk { margin-top: 5px !important; font: 400 11px/1.3 var(--mo-mono); letter-spacing: .03em; color: #cbd7e2; }

.mini--moninspect .mo-chiffres { position: relative; padding: 56px 36px 8px; }
.mini--moninspect .mo-trait { position: absolute; top: 0; left: 36px; right: 36px; height: 1px; background: var(--mo-ligne); }
.mini--moninspect .mo-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mini--moninspect .mo-stats > div { padding: 0 24px; border-right: 1px solid rgba(255, 255, 255, .1); }
.mini--moninspect .mo-stats > div:first-child { padding-left: 0; }
.mini--moninspect .mo-stats > div:last-child { padding-right: 0; border-right: 0; }
.mini--moninspect .mo-v { font: 800 72px/.9 var(--mo-titre); color: var(--mo-or); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini--moninspect .mo-v b { font-weight: 800; }
.mini--moninspect .mo-v small { font-size: .4em; }
.mini--moninspect .mo-vk { margin-top: 10px !important; font-size: 13px; color: var(--mo-gris); }

.mini--moninspect .mo-services { padding: 72px 36px 90px; }
.mini--moninspect .mo-svc-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 34px; }
.mini--moninspect .mo-k { margin-bottom: 14px !important; font: 400 12px/1 var(--mo-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--mo-or); }
.mini--moninspect .mo-h2 { font: 800 66px/.9 var(--mo-titre); letter-spacing: -.02em; }
.mini--moninspect .mo-note { max-width: 280px; font: 400 12px/1.6 var(--mo-mono); color: var(--mo-gris-4); }
.mini--moninspect .mo-liste { position: relative; border-bottom: 1px solid var(--mo-ligne); }
.mini--moninspect .mo-idx { position: relative; z-index: 1; display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 24px; padding: 26px 8px; cursor: pointer; transition: background-color .35s; }
.mini--moninspect .mo-ligne { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--mo-ligne); }
.mini--moninspect .mo-num { font: 400 14px/1 var(--mo-mono); color: var(--mo-or); }
.mini--moninspect .mo-nm { font: 700 50px/.92 var(--mo-titre); letter-spacing: -.01em; transition: color .3s; }
.mini--moninspect .mo-desc { max-width: 440px; margin-top: 8px !important; font-size: 13.5px; line-height: 1.4; color: var(--mo-gris); }
.mini--moninspect .mo-vignette { position: absolute; z-index: 4; right: 2%; top: 50%; width: 360px; height: 228px; margin-top: -114px; border-radius: 10px; overflow: hidden; opacity: 0; pointer-events: none; box-shadow: 0 34px 80px -26px #000; transform: scale(.94); transition: opacity .45s cubic-bezier(.2, .7, .3, 1), transform .45s cubic-bezier(.2, .7, .3, 1); }
.mini--moninspect .mo-vignette img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mini--moninspect .mo-vignette--defaut { z-index: 5; top: 0; margin-top: -26px; opacity: 1; transform: none; transition: opacity .3s; }
.mini--moninspect .mo-idx:hover { z-index: 3; }
.mini--moninspect .mo-idx:hover, .mini--moninspect .mo-idx--actif { background-color: rgba(202, 166, 97, .05); }
.mini--moninspect .mo-idx:hover .mo-nm, .mini--moninspect .mo-idx--actif .mo-nm { color: var(--mo-or); }
.mini--moninspect .mo-idx:hover .mo-vignette { opacity: 1; transform: scale(1); }
.mini--moninspect .mo-liste:hover .mo-vignette--defaut { opacity: 0; }
.mini--moninspect .mo-liste:hover .mo-idx--actif:not(:hover) { background-color: transparent; }
.mini--moninspect .mo-liste:hover .mo-idx--actif:not(:hover) .mo-nm { color: var(--mo-texte); }
.mini--moninspect .mo-plus { margin-top: 22px !important; font: 400 12px/1.5 var(--mo-mono); letter-spacing: .04em; color: var(--mo-gris-3); }

@media (max-width: 640px) {
  .mini--moninspect { width: 760px; font-size: 16px; }
  .mini--moninspect .mo-entete { height: 72px; padding: 0 30px; }
  .mini--moninspect .mo-logo-lg { display: none !important; }
  .mini--moninspect .mo-logo-sm { display: block !important; }
  .mini--moninspect .mo-heros { min-height: 0; }
  .mini--moninspect .mo-lueur { top: -72px; bottom: auto; width: 100%; height: 640px; }
  .mini--moninspect .mo-photo { position: relative; right: auto; width: 640px; height: 500px; margin: 0 auto; }
  .mini--moninspect .mo-texte { width: auto; padding: 34px 30px 64px; }
  .mini--moninspect .mo-titre { font-size: 112px; }
  .mini--moninspect .mo-lead { margin-top: 28px !important; }
  .mini--moninspect .mo-faits { gap: 20px 40px; }
  .mini--moninspect .mo-fv { font-size: 30px; }
  .mini--moninspect .mo-fk { font-size: 12px; }
  .mini--moninspect .mo-chiffres { padding: 0 30px 40px; }
  .mini--moninspect .mo-trait { left: 30px; right: 30px; }
  .mini--moninspect .mo-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mini--moninspect .mo-stats > div, .mini--moninspect .mo-stats > div:first-child, .mini--moninspect .mo-stats > div:last-child { padding: 26px 18px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .mini--moninspect .mo-v { font-size: 84px; }
  .mini--moninspect .mo-vk { font-size: 15px; }
  .mini--moninspect .mo-services { padding: 60px 30px 70px; }
  .mini--moninspect .mo-svc-tete { display: block; margin-bottom: 26px; }
  .mini--moninspect .mo-h2 { font-size: 56px; }
  .mini--moninspect .mo-note { display: none; }
  .mini--moninspect .mo-vignette { display: none; }
  .mini--moninspect .mo-idx { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 30px 40px; text-align: center; }
  .mini--moninspect .mo-nm { font-size: 44px; }
  .mini--moninspect .mo-desc { max-width: 420px; margin: 10px auto 0 !important; font-size: 15px; }
}
@font-face { font-family: 'Fraunces Optimum'; font-weight: 100 900; font-style: normal; font-display: swap; src: url(../_commun/fonts/optimum-fraunces.woff2) format('woff2'); }
@font-face { font-family: 'Fraunces Optimum'; font-weight: 100 900; font-style: italic; font-display: swap; src: url(../_commun/fonts/optimum-fraunces-italique.woff2) format('woff2'); }
@font-face { font-family: 'Inter Optimum'; font-weight: 100 900; font-style: normal; font-display: swap; src: url(../_commun/fonts/optimum-inter.woff2) format('woff2'); }
.mini--optimum { --nuit: #0b0d10; --or: #e0a33e; --or-cl: #f3c978; --ivoire: #f2ede3; --bronze: #7a4e12; --encre: #14181e; --encre-2: #55504a; --tit: 'Fraunces Optimum', 'Iowan Old Style', Georgia, serif; --txt: 'Inter Optimum', 'Segoe UI', Roboto, sans-serif; background: var(--ivoire); color: var(--encre); font: 400 15px/1.62 var(--txt); -webkit-font-smoothing: antialiased; }
.mini--optimum ol { margin: 0; padding: 0; list-style: none; }
.mini--optimum .mini__rail { position: absolute; z-index: 4; left: 25px; top: 0; bottom: 0; width: 37px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='100'%3E%3Cpath d='M22 0V52L17 54.8 32.4 58.2 5.3 62.2 36.4 65.6 19 68.4 22 70.4V100' fill='none' stroke='%237C776F' stroke-opacity='.4' stroke-width='1.1' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 37px 83px repeat-y; }
.mini--optimum .mini__entete { position: absolute; z-index: 5; top: 0; left: 0; right: 0; height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; }
.mini--optimum .mini__logo { width: 172px; height: auto; filter: brightness(0); }
.mini--optimum .mini__rdv { position: relative; padding: 6px 0; font: 600 13px/1.6 var(--txt); color: var(--bronze); cursor: pointer; }
.mini--optimum .mini__rdv::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: currentColor; transform-origin: 100% 50%; transition: transform .32s cubic-bezier(.16, 1, .3, 1); }
.mini--optimum .mini__rdv:hover::after { transform: scaleX(0); }
.mini--optimum .mini__heros { position: relative; overflow: hidden; min-height: 784px; padding: 104px 0 56px 170px; background: var(--ivoire); }
.mini--optimum .mini__photo { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: 64%; overflow: hidden; }
.mini--optimum .mini__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 21% 40%; filter: grayscale(1) sepia(.08) contrast(1.08);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%), linear-gradient(180deg, transparent 0, transparent 6%, #000 12%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 30%), linear-gradient(180deg, transparent 0, transparent 6%, #000 12%); mask-composite: intersect; }
.mini--optimum .mini__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(92deg, rgba(242, 237, 227, .98) 0, rgba(242, 237, 227, .94) 15.6%, rgba(242, 237, 227, .8) 28%, rgba(242, 237, 227, 0) 36%); }
.mini--optimum .mini__texte { position: relative; z-index: 1; max-width: 436px; }
.mini--optimum .mini__titre { width: 760px; font: 400 106px/1.03 var(--tit); font-optical-sizing: auto; letter-spacing: -.036em; color: var(--encre); }
.mini--optimum .mini__titre span { display: block; overflow: hidden; padding: .04em 0 .02em; margin: -.04em 0 -.02em; }
.mini--optimum .mini__titre i { display: block; font-style: normal; }
.mini--optimum .mini__titre .mini__titre-it i { font-style: italic; color: var(--bronze); }
.mini--optimum .mini__lead { margin-top: 34px !important; font-size: 18px; line-height: 1.5; color: var(--encre-2); }
.mini--optimum .mini__bouton { display: flex; align-items: center; justify-content: center; width: max-content; height: 46px; margin-top: 22px; padding: 0 26px; background: var(--or); color: #12100b; font: 600 13.5px/1 var(--txt); cursor: pointer; transition: background-color .17s cubic-bezier(.22, .61, .36, 1); }
.mini--optimum .mini__bouton:hover { background: var(--or-cl); }
.mini--optimum .mini__note { max-width: 370px; margin-top: 12px !important; font-size: 12px; line-height: 1.55; color: var(--encre-2); }
.mini--optimum .mini__note b { font-weight: 600; color: var(--encre); }
.mini--optimum .mini__lieux { margin-top: 22px !important; font-size: 10.8px; line-height: 1.62; letter-spacing: .2em; text-transform: uppercase; color: var(--encre-2); }
.mini--optimum .mini__lieux span { margin: 0 .3rem; color: var(--bronze); }
.mini--optimum .mini__folio { position: absolute; z-index: 4; left: 63px; top: 636px; width: 0; height: 0; }
.mini--optimum .mini__folio > span { position: absolute; left: 0; bottom: 0; display: flex; align-items: baseline; gap: 11px; transform-origin: 0 100%; transform: rotate(-90deg); white-space: nowrap; font: 400 10.8px/1.6 var(--txt); letter-spacing: .26em; text-transform: uppercase; color: rgba(20, 24, 30, .6); }
.mini--optimum .mini__folio b { font: 400 12.8px/1 var(--tit); letter-spacing: .08em; color: var(--bronze); font-variant-numeric: tabular-nums; }
.mini--optimum .mini__folio--nuit > span { color: rgba(242, 238, 231, .6); }
.mini--optimum .mini__folio--nuit b { color: var(--or); }
.mini--optimum .mini__plan { position: relative; padding: 74px 84px 84px 170px; background: var(--nuit); color: #f2eee7; }
.mini--optimum .mini__num { font: 500 56px/.9 var(--tit); letter-spacing: -.03em; color: var(--or); opacity: .55; font-variant-numeric: tabular-nums; }
.mini--optimum .mini__h2 { max-width: 17ch; margin-top: 7px !important; font: 400 52px/1.03 var(--tit); letter-spacing: -.018em; }
.mini--optimum .mini__spread { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 53px; margin-top: 50px; }
.mini--optimum .mini__entrees { position: relative; }
.mini--optimum .mini__filet { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(242, 238, 231, .13); }
.mini--optimum .mini__filet--haut { top: 0; bottom: auto; }
.mini--optimum .mini__entree { position: relative; padding: 15px 0 15px 39px; cursor: pointer; }
.mini--optimum .mini__entree-n { position: absolute; left: 0; top: 14px; font: 400 14.5px/1.6 var(--tit); color: var(--or); font-variant-numeric: tabular-nums; }
.mini--optimum .mini__entree-t { font: 500 19.5px/1.25 var(--tit); color: #f2eee7; transition: color .32s cubic-bezier(.22, .61, .36, 1); }
.mini--optimum .mini__entree:hover .mini__entree-t { color: var(--or-cl); }
.mini--optimum .mini__entree-d { max-width: 46ch; margin-top: 5px !important; font-size: 12.6px; line-height: 1.55; color: #9ea5ae; }
.mini--optimum .mini__prose { display: flex; flex-direction: column; gap: 13px; max-width: 52ch; padding-top: 1px; }
.mini--optimum .mini__prose p { font-size: 15px; line-height: 1.62; color: #9ea5ae; }
.mini--optimum .mini__prose .mini__tete { font-size: 18px; line-height: 1.5; color: #f2eee7; }
.mini--optimum .mini__intro { margin-top: 50px !important; font-size: 12.3px; color: #9ea5ae; }
.mini--optimum .mini__jetons { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px !important; }
.mini--optimum .mini__jetons span { display: inline-block; padding: 7px 15px; font: 400 13.6px/1.6 var(--tit); color: var(--or); box-shadow: inset 0 0 0 1px rgba(224, 163, 62, .3); }
.mini--optimum .mini__engage { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 46px; text-align: center; }
.mini--optimum .mini__bouton--lg { height: 52px; margin-top: 0; padding: 0 33px; color: var(--nuit); font-size: 14px; }
.mini--optimum .mini__engage .mini__note { max-width: none; margin-top: 0 !important; font-size: 11.7px; color: #9ea5ae; }
.mini--optimum .mini__engage .mini__note b { color: #f2eee7; }
@media (max-width: 640px) {
  .mini.mini--optimum { width: 760px; }
  .mini--optimum .mini__rail, .mini--optimum .mini__folio { display: none; }
  .mini--optimum .mini__entete { height: 92px; padding: 0 40px; }
  .mini--optimum .mini__logo { width: 230px; }
  .mini--optimum .mini__rdv { font-size: 18px; }
  .mini--optimum .mini__heros { min-height: 0; padding: 150px 40px 72px; }
  .mini--optimum .mini__photo { width: 100%; }
  .mini--optimum .mini__photo img { object-position: 30% 40%; -webkit-mask-image: none; mask-image: none; }
  .mini--optimum .mini__photo::after { background: linear-gradient(180deg, var(--ivoire) 0, rgba(242, 237, 227, .78) 12%, rgba(242, 237, 227, .78) 34%, rgba(242, 237, 227, .93) 64%, var(--ivoire) 94%); }
  .mini--optimum .mini__texte { max-width: none; }
  .mini--optimum .mini__titre { width: auto; font-size: 92px; }
  .mini--optimum .mini__lead { font-size: 25px; }
  .mini--optimum .mini__bouton { height: 64px; padding: 0 34px; font-size: 19px; }
  .mini--optimum .mini__note { max-width: none; font-size: 17px; }
  .mini--optimum .mini__lieux { font-size: 15px; }
  .mini--optimum .mini__plan { padding: 84px 40px 96px; }
  .mini--optimum .mini__num { font-size: 74px; }
  .mini--optimum .mini__h2 { font-size: 66px; }
  .mini--optimum .mini__spread { grid-template-columns: minmax(0, 1fr); row-gap: 44px; margin-top: 44px; }
  .mini--optimum .mini__prose { order: -1; max-width: none; gap: 18px; }
  .mini--optimum .mini__prose p { font-size: 20px; }
  .mini--optimum .mini__prose .mini__tete { font-size: 25px; }
  .mini--optimum .mini__entree { padding: 22px 0 22px 50px; }
  .mini--optimum .mini__entree-n { top: 21px; font-size: 21px; }
  .mini--optimum .mini__entree-t { font-size: 29px; }
  .mini--optimum .mini__entree-d { max-width: none; font-size: 18px; }
  .mini--optimum .mini__intro { margin-top: 44px !important; font-size: 17px; }
  .mini--optimum .mini__jetons { gap: 10px; margin-top: 18px !important; }
  .mini--optimum .mini__jetons span { padding: 10px 20px; font-size: 20px; }
  .mini--optimum .mini__bouton--lg { height: 70px; font-size: 19px; }
  .mini--optimum .mini__engage .mini__note { font-size: 16px; }
}
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(../_commun/fonts/repere-archivo.woff2) format('woff2'); }
.mini--repere { --rouge: #9C392E; --rouge-vif: #B4453A; --charbon: #212226; --neige: #F2EEE6; --papier: #FBF9F4; --filet: rgba(33, 34, 38, .18); background: var(--neige); color: var(--charbon); font: 500 15px/1.55 'Archivo', system-ui, sans-serif; font-stretch: 100%; -webkit-font-smoothing: antialiased; }
.mini--repere p { margin: 0; }
.mini--repere svg { display: block; flex: none; }
.mini--repere .rp-entete { position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 70px; display: flex; align-items: center; gap: 34px; padding: 0 64px; color: var(--neige); }
.mini--repere .rp-logo { width: 137px; height: auto; margin-right: auto; }
.mini--repere .rp-nav { display: flex; gap: 22px; font: 800 17px/1 'Archivo', sans-serif; font-stretch: 62%; letter-spacing: .05em; text-transform: uppercase; }
.mini--repere .rp-nav span { position: relative; padding: 8px 3px; cursor: pointer; }
.mini--repere .rp-nav span::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: 2px; height: 2.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .26s cubic-bezier(.23, 1, .32, 1); }
.mini--repere .rp-nav span:hover::after { transform: scaleX(1); }
.mini--repere .rp-burger { display: none; }
.mini--repere .rp-bouton { display: inline-flex; align-items: center; justify-content: center; gap: .7em; height: 43px; padding: 0 1.6em; border: 2px solid var(--charbon); border-radius: 3px; background: var(--charbon); color: var(--neige); font: 800 13px/1 'Archivo', sans-serif; font-stretch: 100%; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background-color .16s, border-color .16s, color .16s; }
.mini--repere .rp-bouton svg { width: 1.05em; height: 1.05em; transition: transform .2s cubic-bezier(.23, 1, .32, 1); }
.mini--repere .rp-bouton:hover svg { transform: translateX(4px); }
.mini--repere .rp-bouton--neige { border-color: var(--neige); background: var(--neige); color: var(--rouge); }
.mini--repere .rp-bouton--neige:hover { border-color: #fff; background: #fff; }
.mini--repere .rp-bouton--contour { border-color: currentColor; background: transparent; color: var(--neige); }
.mini--repere .rp-bouton--contour:hover { border-color: var(--neige); background: var(--neige); color: var(--charbon); }
.mini--repere .rp-bouton--rouge { border-color: var(--rouge); background: var(--rouge); color: var(--neige); }
.mini--repere .rp-bouton--rouge:hover { border-color: var(--rouge-vif); background: var(--rouge-vif); }
.mini--repere .rp-bouton--petit { height: 37px; padding: 0 .95em; font-size: 11px; }
.mini--repere .rp-heros { position: relative; isolation: isolate; height: 624px; background: var(--rouge); color: var(--neige); }
.mini--repere .rp-heros::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 37px, rgba(20, 4, 2, .075) 37px 38px, rgba(255, 244, 236, .04) 38px 42px, rgba(20, 4, 2, .06) 42px 43px); }
.mini--repere .rp-panneau { position: absolute; top: 0; right: 0; bottom: 0; width: 696px; background: var(--charbon); }
.mini--repere .rp-photo { position: absolute; inset: 0; overflow: hidden; }
.mini--repere .rp-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.mini--repere .rp-heros__texte { position: relative; z-index: 1; padding: 96px 64px 0; }
.mini--repere .rp-titre { width: 760px; font: 900 101px/.93 'Archivo', sans-serif; font-stretch: 62%; letter-spacing: -.012em; text-transform: uppercase; }
.mini--repere .rp-titre span { display: block; overflow: hidden; margin-bottom: -.06em; padding-bottom: .06em; }
.mini--repere .rp-titre i { display: block; font-style: normal; }
.mini--repere .rp-signature { margin-top: 36px !important; font-size: 16.8px; font-weight: 500; letter-spacing: -.005em; }
.mini--repere .rp-boutons { display: flex; gap: 10px; margin-top: 28px !important; }
.mini--repere .rp-barre { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .62fr) auto; align-items: end; gap: 0 17px; padding: 22px 64px 36px; background: var(--neige); box-shadow: 0 -1px 0 rgba(0, 0, 0, .12); }
.mini--repere .rp-champ__nom { margin-bottom: 7px !important; font: 800 14px/1.2 'Archivo', sans-serif; font-stretch: 62%; letter-spacing: .08em; text-transform: uppercase; }
.mini--repere .rp-champ__boite { display: flex; align-items: center; justify-content: space-between; height: 45px; padding: 0 13px; border: 2px solid var(--charbon); border-radius: 3px; background: var(--papier); font-size: 14.5px; font-weight: 500; color: rgba(33, 34, 38, .72); cursor: pointer; transition: background-color .16s; }
.mini--repere .rp-champ__boite:hover { background: #fff; }
.mini--repere .rp-champ__boite svg { width: 15px; height: 15px; color: var(--charbon); }
.mini--repere .rp-pas { padding: 0; color: var(--charbon); }
.mini--repere .rp-pas span { display: grid; place-items: center; width: 42px; height: 100%; font-size: 20px; font-weight: 500; }
.mini--repere .rp-pas span:first-child { border-right: 1.5px solid var(--filet); }
.mini--repere .rp-pas span:last-child { border-left: 1.5px solid var(--filet); }
.mini--repere .rp-pas b { flex: 1; text-align: center; font-size: 16px; font-weight: 600; font-stretch: 108%; }
.mini--repere .rp-barre__envoi { width: 130px; height: 45px; padding: 0; }
.mini--repere .rp-an { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); padding: 42px 64px 40px; background: var(--charbon); color: var(--neige); }
.mini--repere .rp-an__annee { margin-left: 14px !important; font: 700 186px/.84 'Archivo', sans-serif; font-stretch: 125%; letter-spacing: -.045em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.mini--repere .rp-an__lead { max-width: 46ch; margin-top: 30px !important; font-size: 19.5px; line-height: 1.42; font-weight: 500; letter-spacing: .004em; }
.mini--repere .rp-fleche { display: inline-flex; align-items: center; gap: .55em; margin-top: 16px !important; padding: 8px 0; font: 800 12.8px/1 'Archivo', sans-serif; font-stretch: 100%; letter-spacing: .08em; text-transform: uppercase; background: linear-gradient(currentColor, currentColor) left 100% / 100% 2px no-repeat; cursor: pointer; transition: background-size .24s cubic-bezier(.23, 1, .32, 1); }
.mini--repere .rp-fleche svg { width: 1.05em; height: 1.05em; transition: transform .22s cubic-bezier(.23, 1, .32, 1); }
.mini--repere .rp-fleche:hover { background-size: 0 2px; background-position: right 100%; }
.mini--repere .rp-fleche:hover svg { transform: translateX(5px); }
.mini--repere .rp-renard { position: absolute; right: 64px; bottom: -56px; width: 416px; height: auto; }
.mini--repere .rp-camp { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: 60px; padding: 70px 64px 78px; }
.mini--repere .rp-camp__texte { display: grid; gap: 22px; justify-items: start; }
.mini--repere .rp-affiche { color: var(--rouge); font: 900 80px/.86 'Archivo', sans-serif; font-stretch: 62%; letter-spacing: -.02em; text-transform: uppercase; }
.mini--repere .rp-affiche span { display: block; white-space: nowrap; }
.mini--repere .rp-camp__lead { max-width: 62ch; font-size: 14.5px; line-height: 1.6; font-weight: 400; }
.mini--repere .rp-chiffres { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin-top: 4px; }
.mini--repere .rp-chiffres__filet { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--charbon); }
.mini--repere .rp-chiffres p { padding: 14px 12px 0 0; }
.mini--repere .rp-chiffres p + p { padding-left: 14px; border-left: 1.5px solid var(--filet); }
.mini--repere .rp-chiffres b { display: block; color: var(--rouge); font: 700 62px/.9 'Archivo', sans-serif; font-stretch: 125%; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini--repere .rp-chiffres span { display: block; margin-top: 7px; font: 700 11.3px/1.2 'Archivo', sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.mini--repere .rp-trame { position: relative; margin: 0; aspect-ratio: 2169 / 1683; overflow: hidden; background: var(--charbon); }
.mini--repere .rp-trame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mini--repere .rp-trame figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 13px 9px; background: linear-gradient(to top, rgba(33, 34, 38, .82), rgba(33, 34, 38, 0)); color: var(--neige); font-size: 12.3px; font-weight: 500; }
@media (max-width: 640px) {
  .mini--repere { width: 760px; }
  .mini--repere .rp-entete { height: 76px; gap: 26px; padding: 0 36px; }
  .mini--repere .rp-logo { width: 148px; }
  .mini--repere .rp-nav { display: none; }
  .mini--repere .rp-bouton--petit { height: 44px; padding: 0 1.15em; font-size: 13px; }
  .mini--repere .rp-burger { display: grid; gap: 6px; width: 30px; }
  .mini--repere .rp-burger i { display: block; height: 3px; background: currentColor; }
  .mini--repere .rp-heros { display: flex; flex-direction: column; height: auto; }
  .mini--repere .rp-heros__texte { order: -1; }
  .mini--repere .rp-heros__texte { padding: 110px 36px 48px; }
  .mini--repere .rp-titre { width: auto; font-size: 90px; }
  .mini--repere .rp-signature { margin-top: 30px !important; font-size: 18px; }
  .mini--repere .rp-boutons { margin-top: 24px !important; }
  .mini--repere .rp-bouton { height: 52px; font-size: 15px; }
  .mini--repere .rp-panneau { position: relative; width: auto; height: 560px; }
  .mini--repere .rp-photo img { object-position: 50% 70%; }
  .mini--repere .rp-barre { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 14px; padding: 26px 36px 34px; }
  .mini--repere .rp-champ__nom { font-size: 16px; }
  .mini--repere .rp-champ__boite { height: 54px; font-size: 16px; }
  .mini--repere .rp-barre__envoi { width: 100%; height: 54px; font-size: 15px; }
  .mini--repere .rp-an { grid-template-columns: minmax(0, 1fr); padding: 56px 36px 0; }
  .mini--repere .rp-an__annee { margin-left: 6px !important; font-size: 200px; }
  .mini--repere .rp-an__lead { font-size: 22px; }
  .mini--repere .rp-renard { position: relative; right: auto; bottom: auto; justify-self: end; width: 400px; margin: -20px 0 -58px; }
  .mini--repere .rp-camp { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 64px 36px 72px; }
  .mini--repere .rp-affiche { font-size: 104px; }
  .mini--repere .rp-camp__lead { font-size: 17px; }
  .mini--repere .rp-chiffres b { font-size: 64px; }
  .mini--repere .rp-chiffres span { font-size: 12.5px; }
  .mini--repere .rp-trame { margin: 0 -36px; }
  .mini--repere .rp-trame figcaption { font-size: 14px; }
}
@font-face { font-family: 'Red Hat Display'; font-weight: 500 900; font-style: normal; font-display: swap; src: url(../_commun/fonts/kiwanis-redhatdisplay.woff2) format('woff2'); }
@font-face { font-family: 'Red Hat Text'; font-weight: 400 700; font-style: normal; font-display: swap; src: url(../_commun/fonts/kiwanis-redhattext.woff2) format('woff2'); }
.mini--kiwanis.mini { --marine: #003874; --ciel: #99caea; --ciel-2: #d3e9f7; --ciel-1: #eaf4fb; --or: #b49759; --or-t: #7a6228; --encre: #0e2f58; --encre-2: #36506f; --titre: 'Red Hat Display', 'Segoe UI', system-ui, sans-serif; --sortie: cubic-bezier(.16, 1, .3, 1); overflow: hidden; background: #fff; color: var(--encre); font: 400 15.5px/1.65 'Red Hat Text', 'Segoe UI', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.mini--kiwanis img { display: block; }
.mini--kiwanis svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.mini--kiwanis .kw-entete { position: relative; z-index: 3; height: 76px; display: flex; align-items: center; gap: 18px; padding: 0 40px; background: #fff; box-shadow: 0 1px 0 rgba(0, 56, 116, .1), 0 8px 19px -13px rgba(0, 56, 116, .35); }
.mini--kiwanis .kw-logo { height: 50px; width: auto; margin-right: auto; }
.mini--kiwanis .kw-nav { display: flex; align-items: center; }
.mini--kiwanis .kw-nav span { padding: 10px 10px; color: var(--marine); font: 700 14.5px/1 var(--titre); white-space: nowrap; cursor: pointer; transition: color .35s ease; }
.mini--kiwanis .kw-nav:hover span:not(:hover) { color: var(--encre-2); }
.mini--kiwanis .kw-nav span:hover { color: var(--or-t); }
.mini--kiwanis .kw-don { display: inline-flex; align-items: center; gap: 9px; padding: 10px 4px 10px 6px; color: var(--marine); font: 700 15.5px/1 var(--titre); cursor: pointer; }
.mini--kiwanis .kw-don i { position: relative; width: .72em; height: .72em; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; transition: transform .5s var(--sortie); }
.mini--kiwanis .kw-don i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; transform: scale(0); transition: transform .5s var(--sortie); }
.mini--kiwanis .kw-don:hover i { transform: scale(1.25); }
.mini--kiwanis .kw-don:hover i::after { transform: scale(1); }
.mini--kiwanis .kw-burger { display: none; }

.mini--kiwanis .kw-btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 8px 22px; border-radius: 999px; font: 700 15px/1.15 var(--titre); white-space: nowrap; cursor: pointer; transition: color .3s ease; }
.mini--kiwanis .kw-btn b { font-weight: 700; }
.mini--kiwanis .kw-btn::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 240%; aspect-ratio: 1; border-radius: 50%; background: var(--disque); transform: translate(-50%, -50%) scale(0); transition: transform .6s var(--sortie); }
.mini--kiwanis .kw-btn:hover::before { transform: translate(-50%, -50%) scale(1); }
.mini--kiwanis .kw-btn--p { --disque: var(--ciel); background: var(--marine); color: #fff; }
.mini--kiwanis .kw-btn--p:hover { color: var(--marine); }
.mini--kiwanis .kw-btn--entete { min-height: 44px; padding: 8px 20px; font-size: 14.5px; }
.mini--kiwanis .kw-btn__f { display: grid; place-items: center; width: 30px; height: 30px; margin-right: -13px; border-radius: 50%; background: #fff; color: var(--marine); transition: background-color .3s ease, color .3s ease; }
.mini--kiwanis .kw-btn__f svg { width: 17px; height: 17px; stroke-width: 2.4; }
.mini--kiwanis .kw-btn--p:hover .kw-btn__f { background: var(--marine); color: #fff; }
.mini--kiwanis .kw-btn--s { --disque: var(--ciel-2); padding-left: 18px; color: var(--marine); box-shadow: inset 0 0 0 1.5px rgba(0, 56, 116, .38); }
.mini--kiwanis .kw-btn--s::before { left: 25px; width: 220%; }
.mini--kiwanis .kw-btn__pt { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--or); transition: background-color .3s ease, transform .5s var(--sortie); }
.mini--kiwanis .kw-btn--s:hover .kw-btn__pt { background: var(--marine); transform: scale(.72); }

.mini--kiwanis .kw-heros { position: relative; overflow: clip; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; min-height: 704px; padding: 40px 88px 70px; background: var(--ciel-2); }
.mini--kiwanis .kw-heros::before { content: ""; position: absolute; inset: 0; background: linear-gradient(155deg, #fff 0%, rgba(255, 255, 255, .52) 38%, rgba(255, 255, 255, 0) 100%); }
.mini--kiwanis .kw-lueur { position: absolute; right: -14%; top: 50%; width: 900px; height: 900px; margin-top: -450px; border-radius: 50%; background: radial-gradient(circle, rgba(153, 202, 234, .55) 0, rgba(153, 202, 234, .28) 55%, rgba(153, 202, 234, 0) 70%); }
.mini--kiwanis .kw-texte { position: relative; z-index: 1; }
.mini--kiwanis .kw-marque { display: flex; align-items: center; gap: 10px; margin: 0 0 26px; color: var(--marine); font: 700 15px/1 var(--titre); }
.mini--kiwanis .kw-marque img { width: 34px; height: 34px; }
.mini--kiwanis .kw-titre { margin: 0; color: var(--marine); font: 800 72px/1.02 var(--titre); letter-spacing: -.03em; }
.mini--kiwanis .kw-titre span { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.mini--kiwanis .kw-titre i { display: block; font-style: normal; }
.mini--kiwanis .kw-mission { max-width: 440px; margin: 24px 0 30px; font-size: 17px; line-height: 1.55; color: var(--encre); }
.mini--kiwanis .kw-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

.mini--kiwanis .kw-orbite { position: relative; z-index: 1; justify-self: center; width: 420px; height: 420px; }
.mini--kiwanis .kw-anneau { position: absolute; border-radius: 50%; }
.mini--kiwanis .kw-anneau--1 { inset: 0; box-shadow: inset 0 0 0 1px rgba(0, 56, 116, .2); }
.mini--kiwanis .kw-anneau--2 { inset: 8%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9); }
.mini--kiwanis .kw-arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mini--kiwanis .kw-arc circle { stroke: var(--or); stroke-width: .55; stroke-dasharray: 9 16 5 20 14 36; stroke-dashoffset: 6; }
.mini--kiwanis .kw-orbe { position: absolute; inset: 15%; filter: drop-shadow(0 10px 14px rgba(0, 56, 116, .28)); }
.mini--kiwanis .kw-photo { position: absolute; inset: 0; overflow: hidden; border: 3px solid #fff; border-radius: 50%; background: var(--ciel); }
.mini--kiwanis .kw-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mini--kiwanis .kw-sat { position: absolute; overflow: hidden; border-radius: 50%; }
.mini--kiwanis .kw-sat img { width: 100%; height: 100%; object-fit: cover; }
.mini--kiwanis .kw-sat--sceau { left: 331px; top: 37px; width: 88px; height: 88px; padding: 5px; background: #fff; box-shadow: 0 6px 17px -6px rgba(0, 56, 116, .45); }
.mini--kiwanis .kw-sat--sceau img { object-fit: contain; }
.mini--kiwanis .kw-sat--g { left: -9px; top: 260px; width: 97px; height: 97px; box-shadow: 0 0 0 3px #fff, 0 6px 17px -6px rgba(0, 56, 116, .45); }
.mini--kiwanis .kw-sat--m { left: 290px; top: 357px; width: 63px; height: 63px; box-shadow: 0 0 0 3px #fff, 0 6px 17px -6px rgba(0, 56, 116, .45); }
.mini--kiwanis .kw-sat--or { left: 95px; top: 18px; width: 19px; height: 19px; background: var(--or); }
.mini--kiwanis .kw-sat--point { left: 174px; top: 378px; width: 11px; height: 11px; background: var(--marine); }
.mini--kiwanis .kw-bas { position: absolute; z-index: 2; left: 0; right: 0; bottom: 18px; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; color: var(--marine); font-size: 13.5px; font-weight: 500; }
.mini--kiwanis .kw-bas svg { width: 16px; height: 16px; }

.mini--kiwanis .kw-real { position: relative; padding: 26px 88px 64px; background: var(--ciel-1); text-align: center; }
.mini--kiwanis .kw-real::before { content: ""; position: absolute; left: -12%; right: -12%; top: -60px; height: 132px; border-radius: 50%; background: var(--ciel-1); }
.mini--kiwanis .kw-real > * { position: relative; }
.mini--kiwanis .kw-h2 { margin: 0 0 40px; color: var(--marine); font: 800 44px/1.08 var(--titre); letter-spacing: -.02em; }
.mini--kiwanis .kw-faits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.mini--kiwanis .kw-fait { cursor: pointer; }
.mini--kiwanis .kw-fait__photo { position: relative; width: 150px; height: 150px; margin: 10px auto 22px; }
.mini--kiwanis .kw-fait__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; transition: transform .6s var(--sortie); }
.mini--kiwanis .kw-fait:hover .kw-fait__photo img { transform: scale(1.05); }
.mini--kiwanis .kw-fait__or { position: absolute; inset: -10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--or); }
.mini--kiwanis .kw-chiffre { margin: 0 0 2px; color: var(--marine); font: 900 56px/1 var(--titre); letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini--kiwanis .kw-chiffre b { font-weight: 900; }
.mini--kiwanis .kw-fait__txt { max-width: 268px; margin: 4px auto 0; color: var(--marine); font: 600 17px/1.2 var(--titre); letter-spacing: -.01em; text-wrap: balance; }
.mini--kiwanis .kw-real__suite { margin: 42px 0 0; }

.mini--kiwanis .kw-soir { position: relative; overflow: clip; height: 250px; padding: 64px 88px 0; background: var(--marine); color: #fff; }
.mini--kiwanis .kw-soir__photo { position: absolute; right: -120px; top: -40px; width: 620px; height: 620px; overflow: hidden; border-radius: 50%; opacity: .5; }
.mini--kiwanis .kw-soir__photo img { width: 100%; height: 100%; object-fit: cover; }
.mini--kiwanis .kw-soir__titre { position: relative; max-width: 520px; margin: 0 0 16px; color: var(--or); font: 800 58px/1.08 var(--titre); letter-spacing: -.02em; }
.mini--kiwanis .kw-soir__intro { position: relative; max-width: 440px; margin: 0; color: #e6f0f9; font-size: 16.5px; }

@media (max-width: 640px) {
  .mini--kiwanis.mini { width: 760px; }
  .mini--kiwanis .kw-entete { height: 70px; gap: 10px; padding: 0 22px; }
  .mini--kiwanis .kw-logo { height: 46px; }
  .mini--kiwanis .kw-nav, .mini--kiwanis .kw-don { display: none; }
  .mini--kiwanis .kw-btn--entete { min-height: 46px; padding: 8px 18px; font-size: 15px; }
  .mini--kiwanis .kw-burger { position: relative; display: block; width: 48px; height: 48px; border-radius: 50%; background: var(--ciel-1); }
  .mini--kiwanis .kw-burger i { position: absolute; inset: 6px; border-radius: 50%; background: var(--marine); }
  .mini--kiwanis .kw-burger i::before, .mini--kiwanis .kw-burger i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 15px; height: 2px; margin: -1px 0 0 -7.5px; border-radius: 2px; background: #fff; transform: translateY(-3.5px); }
  .mini--kiwanis .kw-burger i::after { transform: translateY(3.5px); }
  .mini--kiwanis .kw-heros { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 64px 48px 30px; }
  .mini--kiwanis .kw-lueur { right: -45%; top: 72%; }
  .mini--kiwanis .kw-titre { font-size: 76px; }
  .mini--kiwanis .kw-mission { max-width: 560px; font-size: 19px; }
  .mini--kiwanis .kw-actions .kw-btn { min-height: 54px; font-size: 16.5px; }
  .mini--kiwanis .kw-orbite { margin: 60px 0 76px; }
  .mini--kiwanis .kw-bas { position: relative; bottom: auto; font-size: 18px; }
  .mini--kiwanis .kw-real { padding: 30px 48px 70px; }
  .mini--kiwanis .kw-h2 { font-size: 52px; }
  .mini--kiwanis .kw-faits { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .mini--kiwanis .kw-fait__photo { width: 170px; height: 170px; }
  .mini--kiwanis .kw-chiffre { font-size: 72px; }
  .mini--kiwanis .kw-fait__txt { max-width: 420px; font-size: 23px; }
  .mini--kiwanis .kw-soir { padding: 56px 48px 0; }
  .mini--kiwanis .kw-soir__photo { right: -220px; }
}
@font-face { font-family: 'TeX Gyre Adventor'; font-weight: 400; font-style: normal; font-display: swap; src: url(../_commun/fonts/egconseils-adventor.woff2) format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 300 900; font-style: normal; font-display: swap; src: url(../_commun/fonts/egconseils-figtree.woff2) format('woff2'); }
.mini--egconseils { --fond: #f3f4f2; --papier: #fff; --encre: #262726; --encre-2: #3c3c3b; --gris: #62635f; --gris-2: #696a66; --vert: #43c29f; --vert-profond: #17775e; --vert-encre: #0f5a47; --vert-pale: #e2f4ed; --ligne: rgba(38, 39, 38, .12); --or: #e0a526; --doux: cubic-bezier(.16, 1, .3, 1); --titre: 'TeX Gyre Adventor', 'Century Gothic', 'Avenir Next', system-ui, sans-serif; --texte: 'Figtree', system-ui, sans-serif; background: var(--fond); color: var(--encre); font: 400 15px/1.55 var(--texte); -webkit-font-smoothing: antialiased; }
.mini--egconseils p, .mini--egconseils figure, .mini--egconseils ul { margin: 0; }
.mini--egconseils ul { padding: 0; list-style: none; }
.mini--egconseils svg { display: block; flex: none; }

.mini--egconseils .eg-heros { position: relative; height: 756px; background-color: var(--fond); overflow: hidden; }
.mini--egconseils .eg-entete { position: absolute; z-index: 4; top: 12px; left: 40px; right: 40px; }
.mini--egconseils .eg-ilot { display: flex; align-items: center; gap: 14px; height: 54px; padding: 0 6px 0 18px; border-radius: 999px; background: rgba(255, 255, 255, .88); box-shadow: 0 14px 34px -22px rgba(38, 39, 38, .45), 0 0 0 1px rgba(38, 39, 38, .04); }
.mini--egconseils .eg-marques { display: flex; align-items: center; gap: 14px; flex: none; }
.mini--egconseils .eg-logo { height: 23px; width: auto; }
.mini--egconseils .eg-cabinet { display: flex; align-items: center; height: 31px; padding-left: 14px; border-left: 1px solid var(--ligne); }
.mini--egconseils .eg-cabinet img { height: 27px; width: auto; }
.mini--egconseils .eg-nav { display: flex; gap: 27px; margin-left: 33px; font: 500 13px/1 var(--texte); color: var(--encre-2); }
.mini--egconseils .eg-nav span { display: flex; align-items: center; gap: 5px; padding: 6px 0; cursor: pointer; transition: color .25s; }
.mini--egconseils .eg-nav span:hover { color: var(--vert-profond); }
.mini--egconseils .eg-nav svg { width: 12px; height: 12px; color: var(--gris-2); }
.mini--egconseils .eg-tel { display: flex; align-items: center; gap: 8px; margin-left: auto; font: 600 13px/1 var(--texte); color: var(--encre); white-space: nowrap; }
.mini--egconseils .eg-tel i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--vert-pale); color: var(--vert-profond); }
.mini--egconseils .eg-tel svg { width: 14px; height: 14px; }
.mini--egconseils .eg-burger { display: none; }

.mini--egconseils .eg-btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 6px 0 18px; border-radius: 999px; background: var(--encre); color: var(--fond); font: 600 13.5px/1 var(--texte); white-space: nowrap; cursor: pointer; transition: color .45s var(--doux); }
.mini--egconseils .eg-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--vert-profond); transform: translateY(101%); transition: transform .55s var(--doux); }
.mini--egconseils .eg-btn:hover::before { transform: none; }
.mini--egconseils .eg-rond { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: rgba(243, 244, 242, .14); transition: transform .5s var(--doux); }
.mini--egconseils .eg-btn:hover .eg-rond { transform: translate(3px, -1px) scale(1.06); }
.mini--egconseils .eg-rond svg { width: 15px; height: 15px; }
.mini--egconseils .eg-btn--ilot { flex: none; }
.mini--egconseils .eg-btn--sec { gap: 8px; padding: 0 19px; background: transparent; color: var(--encre); box-shadow: inset 0 0 0 1.5px rgba(38, 39, 38, .22); }
.mini--egconseils .eg-btn--sec:hover { color: var(--fond); }
.mini--egconseils .eg-btn--sec svg { width: 15px; height: 15px; }

.mini--egconseils .eg-scene { position: relative; height: 100%; }
.mini--egconseils .eg-texte { position: absolute; z-index: 2; left: 52px; top: 222px; width: 530px; }
.mini--egconseils .eg-pastille { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 12px; border-radius: 999px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--ligne); font: 600 11.5px/1.2 var(--texte); color: var(--encre-2); }
.mini--egconseils .eg-etoiles { display: inline-flex; gap: 1px; color: var(--or); }
.mini--egconseils .eg-etoiles svg { width: 11px; height: 11px; fill: currentColor; }
.mini--egconseils .eg-h1 { margin: 15px 0 15px !important; font: 400 42px/1.02 var(--titre); letter-spacing: -.025em; color: var(--encre); }
.mini--egconseils .eg-h1 span { display: block; overflow: hidden; padding-bottom: .09em; margin-bottom: -.09em; }
.mini--egconseils .eg-h1 .eg-l1, .mini--egconseils .eg-h1 .eg-l2 { display: inline-block; vertical-align: top; }
.mini--egconseils .eg-h1 .eg-l1 { margin-right: .26em; }
.mini--egconseils .eg-h1 i { display: block; font-style: normal; }
.mini--egconseils .eg-sous { max-width: 400px; font-size: 16px; line-height: 1.55; color: var(--gris); }
.mini--egconseils .eg-cta { display: flex; gap: 11px; margin-top: 30px; }

.mini--egconseils .eg-maison { position: absolute; left: 600px; top: 92px; width: 570px; height: 658px; }
.mini--egconseils .eg-masque { position: absolute; left: 40px; top: 18px; width: 490px; height: 620px; overflow: hidden; background: var(--encre); clip-path: polygon(0 175px, 50% 0, 100% 175px, 100% 100%, 0 100%); }
.mini--egconseils .eg-col { position: absolute; width: 240px; display: grid; grid-auto-rows: 300px; gap: 5px; }
.mini--egconseils .eg-col--g { left: -127px; top: -70px; }
.mini--egconseils .eg-col--c { left: 118px; top: -10px; }
.mini--egconseils .eg-col--d { left: 363px; top: -85px; }
.mini--egconseils .eg-tuile { position: relative; overflow: hidden; background: #555653; }
.mini--egconseils .eg-tuile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; transition: transform 1s var(--doux); }
.mini--egconseils .eg-tuile--photo img { object-position: 50% 50%; filter: saturate(.9); }
.mini--egconseils .eg-tuile:hover img { transform: scale(1.045); }
.mini--egconseils .eg-tuile figcaption { position: absolute; left: 7px; right: 7px; bottom: 7px; display: grid; gap: 2px; padding: 8px 10px; border-radius: 11px; background: rgba(255, 255, 255, .92); color: var(--encre); line-height: 1.2; opacity: 0; transform: translateY(8px); transition: opacity .45s var(--doux), transform .55s var(--doux); }
.mini--egconseils .eg-tuile figcaption b { font-size: 12.5px; font-weight: 600; }
.mini--egconseils .eg-tuile figcaption span { overflow: hidden; font-size: 10.5px; color: var(--gris); white-space: nowrap; text-overflow: ellipsis; }
.mini--egconseils .eg-tuile:hover figcaption { opacity: 1; transform: none; }
.mini--egconseils .eg-tuile--logo { display: grid; place-items: center; background: var(--encre); }
.mini--egconseils .eg-tuile--logo svg { width: 52%; height: auto; fill: #fff; }
.mini--egconseils .eg-toit { position: absolute; left: 0; top: 0; width: 570px; height: 220px; overflow: visible; }
.mini--egconseils .eg-toit path { fill: none; stroke: var(--vert); stroke-width: 12; stroke-linejoin: miter; stroke-miterlimit: 10; }

.mini--egconseils .eg-suite { padding: 44px 52px 74px; background: var(--fond); }
.mini--egconseils .eg-preuves { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mini--egconseils .eg-preuves li { display: grid; align-content: start; gap: 4px; padding: 14px 18px 16px; border-left: 1px solid var(--ligne); }
.mini--egconseils .eg-preuves li:first-child { padding-left: 0; border-left: 0; }
.mini--egconseils .eg-preuves b { font: 400 23px/1.15 var(--titre); letter-spacing: -.02em; color: var(--encre); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mini--egconseils .eg-preuves span { font-size: 13px; line-height: 1.45; color: var(--gris); }
.mini--egconseils .eg-preuves .eg-etoiles { gap: 2px; margin: 2px 0 1px; color: var(--or); }
.mini--egconseils .eg-preuves .eg-etoiles svg { width: 14px; height: 14px; }
.mini--egconseils .eg-source { margin-top: 12px !important; font-size: 11px; color: var(--gris-2); }
.mini--egconseils .eg-prix { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 0 40px; margin-top: 30px; padding: 26px 40px 26px 32px; border-radius: 18px 58px 58px 18px; background: var(--papier); }
.mini--egconseils .eg-prix-tete { display: grid; justify-items: start; gap: 10px; }
.mini--egconseils .eg-prix-tete i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--vert-pale); color: var(--vert-encre); }
.mini--egconseils .eg-prix-tete svg { width: 21px; height: 21px; }
.mini--egconseils .eg-prix-tete p { font: 600 13px/1.3 var(--texte); color: var(--encre); }
.mini--egconseils .eg-prix-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.mini--egconseils .eg-prix-liste li { display: grid; align-content: start; gap: 5px; padding-left: 18px; border-left: 1px solid var(--ligne); }
.mini--egconseils .eg-prix-liste b { font: 400 19px/1.15 var(--titre); letter-spacing: -.015em; }
.mini--egconseils .eg-prix-liste span { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.mini--egconseils .eg-prix-liste small { font-size: 10.8px; line-height: 1.5; color: var(--gris); }
.mini--egconseils .eg-prix-liens { display: grid; justify-items: start; gap: 13px; }
.mini--egconseils .eg-lien { position: relative; display: inline-flex; align-items: center; gap: 7px; padding-bottom: 4px; font: 600 12.5px/1.2 var(--texte); color: var(--encre); white-space: nowrap; cursor: pointer; }
.mini--egconseils .eg-lien svg { width: 13px; height: 13px; transition: transform .4s var(--doux); }
.mini--egconseils .eg-lien:hover svg { transform: translateX(3px); }
.mini--egconseils .eg-lien i { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(38, 39, 38, .3); }
.mini--egconseils .eg-services { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 92px; }
.mini--egconseils .eg-h2 { max-width: 66%; font: 400 52px/1.02 var(--titre); letter-spacing: -.025em; color: var(--encre); text-wrap: balance; }
.mini--egconseils .eg-services .eg-lien { font-size: 13px; }

@media (max-width: 640px) {
  .mini--egconseils { width: 760px; }
  .mini--egconseils .eg-heros { height: auto; }
  .mini--egconseils .eg-entete { top: 22px; left: 28px; right: 28px; }
  .mini--egconseils .eg-ilot { height: 82px; padding: 0 12px 0 30px; }
  .mini--egconseils .eg-logo { height: 36px; }
  .mini--egconseils .eg-cabinet, .mini--egconseils .eg-nav, .mini--egconseils .eg-tel, .mini--egconseils .eg-btn--ilot { display: none; }
  .mini--egconseils .eg-burger { display: grid; align-content: center; justify-items: center; gap: 8px; width: 60px; height: 60px; margin-left: auto; border-radius: 50%; background: var(--encre); }
  .mini--egconseils .eg-burger i { width: 22px; height: 2px; border-radius: 2px; background: var(--fond); }
  .mini--egconseils .eg-scene { display: flex; flex-direction: column; height: auto; padding-top: 136px; }
  .mini--egconseils .eg-texte { position: static; width: auto; padding: 0 40px; }
  .mini--egconseils .eg-pastille { gap: 10px; padding: 9px 18px 9px 16px; font-size: 18px; }
  .mini--egconseils .eg-etoiles svg { width: 17px; height: 17px; }
  .mini--egconseils .eg-h1 { margin: 22px 0 22px !important; font-size: 70px; }
  .mini--egconseils .eg-h1 .eg-l1, .mini--egconseils .eg-h1 .eg-l2 { display: block; margin-right: 0; }
  .mini--egconseils .eg-sous { max-width: none; font-size: 24px; }
  .mini--egconseils .eg-cta { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 34px; }
  .mini--egconseils .eg-btn { height: 70px; gap: 16px; padding: 0 10px 0 30px; font-size: 22px; }
  .mini--egconseils .eg-rond { width: 50px; height: 50px; }
  .mini--egconseils .eg-rond svg { width: 22px; height: 22px; }
  .mini--egconseils .eg-btn--sec { gap: 12px; padding: 0 30px; }
  .mini--egconseils .eg-btn--sec svg { width: 22px; height: 22px; }
  .mini--egconseils .eg-maison { position: relative; left: auto; top: auto; zoom: 1.25; height: 544px; margin: 22px auto 0; }
  .mini--egconseils .eg-masque { height: 526px; }
  .mini--egconseils .eg-suite { padding: 64px 40px 84px; }
  .mini--egconseils .eg-preuves { grid-template-columns: 1fr 1fr; }
  .mini--egconseils .eg-preuves li, .mini--egconseils .eg-preuves li:first-child { gap: 6px; padding: 24px 0 24px 0; border-left: 0; border-top: 1px solid var(--ligne); }
  .mini--egconseils .eg-preuves li:nth-child(even) { padding-left: 30px; border-left: 1px solid var(--ligne); }
  .mini--egconseils .eg-preuves li:nth-child(-n+2) { border-top: 0; }
  .mini--egconseils .eg-preuves b { font-size: 40px; }
  .mini--egconseils .eg-preuves span { font-size: 20px; }
  .mini--egconseils .eg-preuves .eg-etoiles svg { width: 22px; height: 22px; }
  .mini--egconseils .eg-source { font-size: 16px; }
  .mini--egconseils .eg-prix { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 34px 40px 36px; border-radius: 24px 72px 72px 24px; }
  .mini--egconseils .eg-prix-tete { display: flex; align-items: center; gap: 16px; }
  .mini--egconseils .eg-prix-tete i { width: 58px; height: 58px; }
  .mini--egconseils .eg-prix-tete svg { width: 30px; height: 30px; }
  .mini--egconseils .eg-prix-tete p { font-size: 20px; }
  .mini--egconseils .eg-prix-liste { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .mini--egconseils .eg-prix-liste li { gap: 7px; padding-left: 24px; }
  .mini--egconseils .eg-prix-liste b { font-size: 30px; }
  .mini--egconseils .eg-prix-liste span { font-size: 19px; }
  .mini--egconseils .eg-prix-liste small { font-size: 16px; }
  .mini--egconseils .eg-prix-liens { display: flex; flex-wrap: wrap; gap: 18px 34px; }
  .mini--egconseils .eg-lien { gap: 10px; padding-bottom: 6px; font-size: 19px; }
  .mini--egconseils .eg-lien svg { width: 19px; height: 19px; }
  .mini--egconseils .eg-services { flex-direction: column; align-items: flex-start; margin-top: 76px; }
  .mini--egconseils .eg-h2 { max-width: none; font-size: 64px; }
  .mini--egconseils .eg-services .eg-lien { font-size: 20px; }
}
.mini--festival { --sable: #F5F1EA; --sable-2: #ECE5D9; --ligne: #E0D8CB; --nuit: #141B28; --encre: #1B2230; --encre-2: #545C6A; --accent: #E4572E; --jaune: #F6BE3B; --bleu: #2F5D7C; background: var(--sable); color: var(--encre); font: 400 15px/1.55 'Barlow', 'Segoe UI', system-ui, sans-serif; }
.mini--festival .mini__entete { position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 76px; display: flex; align-items: center; gap: 24px; padding: 0 44px; color: #fff; }
.mini--festival .mini__logo { height: 44px; width: auto; }
.mini--festival .mini__filet { width: 1px; height: 34px; background: rgba(255, 255, 255, .35); }
.mini--festival .mini__nav { display: flex; gap: 26px; font: 700 13px/1 'Barlow Condensed', 'Arial Narrow', sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.mini--festival .mini__nav span { cursor: pointer; transition: color .2s; }
.mini--festival .mini__nav span:hover { color: var(--jaune); }
.mini--festival .mini__billets { margin-left: auto; padding: 9px 14px 8px; border-radius: 4px; background: var(--accent); font: 700 12px/1 'Barlow Condensed', 'Arial Narrow', sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.mini--festival .mini__menu { display: flex; align-items: center; gap: 10px; font: 700 13px/1 'Barlow Condensed', 'Arial Narrow', sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.mini--festival .mini__menu i { width: 20px; height: 10px; border-top: 2px solid #fff; border-bottom: 2px solid #fff; }
.mini--festival .mini__heros { position: relative; height: 760px; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; color: #fff; text-align: center; background: var(--nuit); }
.mini--festival .mini__photo { position: absolute; inset: 0; overflow: hidden; }
.mini--festival .mini__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mini--festival .mini__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(20, 27, 40, .35), rgba(20, 27, 40, .15) 40%, rgba(20, 27, 40, .55)); }
.mini--festival .mini__contenu { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; margin-top: 40px; }
.mini--festival .mini__sur { color: var(--jaune); font: 700 13px/1 'Barlow Condensed', 'Arial Narrow', sans-serif; letter-spacing: .32em; text-transform: uppercase; }
.mini--festival .mini__titre { margin: 18px 0 10px !important; font: 700 104px/.95 'Barlow Condensed', 'Arial Narrow', sans-serif; text-transform: uppercase; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.mini--festival .mini__titre span { display: block; overflow: hidden; padding-bottom: .04em; }
.mini--festival .mini__titre i { display: block; font-style: normal; }
.mini--festival .mini__dates { font: 700 38px/1 'Barlow Condensed', 'Arial Narrow', sans-serif; text-transform: uppercase; }
.mini--festival .mini__lieu { margin-top: 14px !important; font-size: 17px; }
.mini--festival .mini__actions { display: flex; gap: 14px; margin-top: 28px !important; }
.mini--festival .mini__btn { padding: 15px 22px 14px; border: 2px solid var(--accent); border-radius: 4px; background: var(--accent); font: 700 14px/1 'Barlow Condensed', 'Arial Narrow', sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .2s, border-color .2s; }
.mini--festival .mini__btn:hover { background: #c8461f; border-color: #c8461f; }
.mini--festival .mini__btn--contour { background: transparent; border-color: #fff; }
.mini--festival .mini__btn--contour:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.mini--festival .mini__rebours { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; gap: 12px; padding: 18px 0 20px; background: linear-gradient(transparent, rgba(20, 27, 40, .7)); }
.mini--festival .mini__rebours-titre { margin-right: 12px; color: var(--jaune); font: 700 12px/1 'Barlow Condensed', 'Arial Narrow', sans-serif; letter-spacing: .24em; text-transform: uppercase; }
.mini--festival .mini__case { display: flex; flex-direction: column; align-items: center; min-width: 46px; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .3); }
.mini--festival .mini__case:nth-child(2) { border-left: 0; }
.mini--festival .mini__case b { font: 700 32px/1 'Barlow Condensed', 'Arial Narrow', sans-serif; font-variant-numeric: tabular-nums; }
.mini--festival .mini__case small { margin-top: 3px; font: 700 9px/1 'Barlow Condensed', 'Arial Narrow', sans-serif; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.mini--festival .mini__passes { padding: 84px 64px 96px; background: #fff; }
.mini--festival .mini__surtitre { color: var(--accent); font: 700 12px/1 'Barlow Condensed', 'Arial Narrow', sans-serif; letter-spacing: .26em; text-transform: uppercase; }
.mini--festival .mini__passes-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-top: 14px; }
.mini--festival .mini__h2 { font: 700 46px/1 'Barlow Condensed', 'Arial Narrow', sans-serif; text-transform: uppercase; }
.mini--festival .mini__chapo { margin-top: 10px !important; color: var(--encre-2); }
.mini--festival .mini__lien { padding-bottom: 4px; border-bottom: 2px solid var(--accent); font: 700 12px/1 'Barlow Condensed', 'Arial Narrow', sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.mini--festival .mini__cartes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 36px; }
.mini--festival .mini__carte { display: flex; flex-direction: column; padding: 18px 16px; border: 1px solid var(--ligne); border-top: 3px solid var(--accent); background: #fff; transition: border-color .2s; }
.mini--festival .mini__carte--jaune { border-top-color: var(--jaune); }
.mini--festival .mini__carte--bleu { border-top-color: var(--bleu); }
.mini--festival .mini__carte:hover { border-color: var(--encre-2); }
.mini--festival .mini__etiquettes { display: flex; gap: 6px; }
.mini--festival .mini__etiquettes span { padding: 4px 6px 3px; background: var(--nuit); color: #fff; font: 700 9px/1 'Barlow Condensed', 'Arial Narrow', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.mini--festival .mini__etiquettes span + span { background: var(--sable-2); color: var(--encre); }
.mini--festival .mini__soirs { margin-top: 18px !important; font: 700 11px/1 'Barlow Condensed', 'Arial Narrow', sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.mini--festival .mini__soirs b { font-size: 40px; letter-spacing: 0; }
.mini--festival .mini__nom { margin-top: 8px !important; font: 700 20px/1.05 'Barlow Condensed', 'Arial Narrow', sans-serif; text-transform: uppercase; }
.mini--festival .mini__desc { min-height: 48px; margin-top: 8px !important; color: var(--encre-2); font-size: 13px; line-height: 1.45; }
.mini--festival .mini__prix { margin-top: 14px !important; font: 700 30px/1 'Barlow Condensed', 'Arial Narrow', sans-serif; }
.mini--festival .mini__prix small { font: 400 12px/1 'Barlow', 'Segoe UI', sans-serif; color: var(--encre-2); }
.mini--festival .mini__tarif { display: flex; justify-content: space-between; margin-top: 6px !important; color: var(--encre-2); font-size: 12px; }
.mini--festival .mini__tarif b { color: var(--encre); font-weight: 700; }
.mini--festival .mini__jours { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 16px !important; }
.mini--festival .mini__jours i { padding: 6px 0 5px; border: 1px solid var(--ligne); font: 700 10px/1.2 'Barlow Condensed', 'Arial Narrow', sans-serif; font-style: normal; text-align: center; text-transform: uppercase; color: var(--encre-2); }
.mini--festival .mini__jours i.est-inclus { background: var(--nuit); border-color: var(--nuit); color: #fff; }
.mini--festival .mini__acheter { margin-top: 14px; padding: 11px 0 10px; border-radius: 4px; background: var(--accent); color: #fff; font: 700 12px/1 'Barlow Condensed', 'Arial Narrow', sans-serif; letter-spacing: .08em; text-align: center; text-transform: uppercase; cursor: pointer; transition: background .2s; }
.mini--festival .mini__acheter:hover { background: #c8461f; }
@media (max-width: 640px) {
  .mini--festival { width: 760px; }
  .mini--festival .mini__nav, .mini--festival .mini__filet, .mini--festival .mini__menu { display: none; }
  .mini--festival .mini__entete { padding: 0 32px; }
  .mini--festival .mini__heros { height: 900px; }
  .mini--festival .mini__titre { font-size: 92px; }
  .mini--festival .mini__actions { flex-direction: column; }
  .mini--festival .mini__passes { padding: 64px 36px 80px; }
  .mini--festival .mini__passes-tete { flex-direction: column; align-items: flex-start; }
  .mini--festival .mini__cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* blz-minis-fin */

.rond { width: 58px; height: 58px; border-radius: 50%; border: 2px solid var(--blanc); background: transparent; color: var(--blanc); font-size: 22px; display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s, transform .2s var(--claque); }
@media (hover: hover) { .rond:hover { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); transform: scale(1.08); } }

/* ---------- l'équipe : têtes à ressort qui sortent de la bande */
/* fond net : un projecteur rouge derrière l'équipe, une trame de points dans le coin */
/* le haut de l'équipe monte en biais, dans le sens contraire de la séparation précédente ; la découpe emporte le décor avec elle */
.gang { position: relative; z-index: 3; overflow-x: clip; margin-top: calc(-1 * var(--biais)); padding: calc(110px + var(--biais) * .6) 0 0; clip-path: polygon(0 var(--biais), 100% 0, 100% 100%, 0 100%); background: url(../_commun/img/fonds/decor-gang-papier.svg) center bottom / cover, var(--papier); color: var(--nuit); }
/* fond clair : une planche d'autocollants sur papier. Trame de points qui s'épaissit vers le bas */
.gang::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(rgba(23, 23, 26, .14) 1.4px, transparent 1.9px) 0 0 / 12px 12px;
  -webkit-mask: linear-gradient(to bottom, transparent 15%, #000 85%); mask: linear-gradient(to bottom, transparent 15%, #000 85%); }
/* la déchirure du haut : le papier mord sur la section précédente, avec sa frange de fibres blanches */
.gang__tete { position: relative; z-index: 0; display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; gap: 20px; }
.gang .titre { color: var(--nuit); position: relative; font-size: clamp(52px, 7.4vw, 136px); line-height: .86; }
.gang .titre em { display: block; white-space: nowrap; }
.gang__accroche { position: relative; color: var(--nuit); font: 800 clamp(18px, 1.6vw, 26px)/1.25 var(--titre); text-transform: uppercase; text-align: right; margin-top: 1.4em; max-width: 21ch; flex-shrink: 0; }
.gang__accroche p { margin: 0; }
.gang__lien { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding-bottom: 4px; font: 700 17px/1 var(--bouton); letter-spacing: .06em; color: var(--nuit); text-decoration: none; border-bottom: 2px solid var(--rouge); transition: color 100ms ease-out; }
@media (hover: hover) { .gang__lien:hover { color: var(--rouge); } }
/* chaque personne : un autocollant (sa tête) et, devant, son étiquette nom + rôle qui ne bouge pas.
   Au survol, l'autocollant se décolle et se retourne : l'endos est la même silhouette, en miroir et toute blanche */
.gang__rangee { position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-end; gap: 2.4vw; margin: 2vw 0 0; padding: 0 3vw 96px; list-style: none; }
/* la toile WebGL de l'enroulement : par-dessus les têtes, sous les étiquettes, avec de la marge pour le rouleau */
.gang__gl { position: absolute; z-index: 2; left: 0; top: max(-10vw, -140px); width: 100%; height: calc(100% + min(10vw, 140px)); pointer-events: none; }
.perso { position: relative; flex: 0 0 15vw; display: flex; flex-direction: column; align-items: center; margin-bottom: var(--y, 0px); outline: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.perso:nth-child(1) { --a: -4deg; --y: 1vw; --e: -7deg; --n: 0deg; --o: 3deg; --dx: -6%; }
.perso:nth-child(2) { --a: 3deg; --y: 5vw; --e: 4deg; --n: 3deg; --o: -3deg; --dx: 4%; }
.perso:nth-child(3) { --a: -2deg; --y: 0vw; --e: -4deg; --n: 2deg; --o: 4deg; --dx: -2%; }
.perso:nth-child(4) { --a: 4deg; --y: 4vw; --e: 6deg; --n: 4deg; --o: -8deg; --dx: 8%; }
.perso:nth-child(5) { --a: -3deg; --y: 1.5vw; --e: -10deg; --n: -2deg; --o: 7deg; --dx: 0%; }
.perso__tete { position: relative; z-index: 1; width: 100%; transform: rotate(var(--a)); }
.perso__carte { position: relative; transform-style: preserve-3d; will-change: transform; }
.perso__face, .perso__dos { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.perso__face { display: block; width: 100%; height: auto; filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, .4)); user-select: none; -webkit-user-drag: none; }
.perso__dos { position: absolute; inset: 0; display: grid; place-items: center; transform: rotateY(180deg); }
.perso__dos img { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, .4)); user-select: none; -webkit-user-drag: none; }
.perso__dos p { position: relative; max-width: 72%; margin: 0 0 14%; text-align: center; color: var(--nuit); font: 600 clamp(10px, .78vw, 13px)/1.35 var(--mono); }
.perso__etiquette { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: max(17vw, 200px); margin: -2.6vw 0 0; translate: var(--dx, 0) 0; transform: rotate(var(--e, -6deg)); }
/* le nom et le rôle sont collés chacun de leur côté, à leur propre angle (propriété rotate : l'animation d'entrée garde transform) */
.perso__nom { position: relative; z-index: 2; rotate: var(--n, 0deg); }
.perso__role { position: relative; z-index: 1; rotate: var(--o, 0deg); padding-top: 11px !important; }
.perso__nom { background: var(--rouge); color: #fff; font: 900 clamp(20px, 2.2vw, 38px)/1 var(--titre); text-transform: uppercase; padding: .3em .45em; border-radius: var(--r); box-shadow: 4px 4px 0 var(--nuit); }
.perso__role { margin-left: 8%; max-width: 92%; font: 600 clamp(11px, .9vw, 13px)/1.3 var(--mono); color: var(--blanc); background: var(--nuit); padding: 6px 9px; border-radius: 3px; box-shadow: 4px 4px 0 rgba(0, 0, 0, .4); }
.perso:focus-visible .perso__nom { outline: 3px solid var(--jaune); outline-offset: 4px; }

/* ---------- la bande : cache la coupure du bas des photos */
.bande { position: relative; z-index: 4; margin-top: -64px; overflow: hidden; transform: rotate(-2deg); background: var(--nuit); border-block: 4px solid var(--blanc); box-shadow: 0 -10px 0 var(--rouge); width: 104%; margin-left: -2%; }
/* marquee : la phrase de marque défile sans fin ; le petit ruban dessous part dans l'autre sens */
.bande__marquee { overflow: hidden; padding: 16px 0 8px; }
.bande__marquee-piste { display: flex; align-items: center; width: max-content; animation: defile 34s linear infinite; }
.bande__phrase { font: 900 clamp(56px, 8.5vw, 150px)/1 var(--titre); text-transform: uppercase; letter-spacing: -.02em; white-space: nowrap; padding-bottom: .06em; }
.bande__eclair { flex: none; width: clamp(50px, 6.8vw, 118px); height: auto; margin: 0 .35em; transform: rotate(12deg); }
.bande__defile { border-top: 2px solid var(--ligne); overflow: hidden; }
.bande__piste { display: flex; align-items: center; gap: 22px; width: max-content; padding: 14px 0; animation: defile 52s linear infinite reverse; }
.bande__piste span { font: 800 18px/1 var(--titre); text-transform: uppercase; white-space: nowrap; }
.bande__piste i { color: var(--rouge); font-size: 18px; }
@keyframes defile { to { transform: translateX(-50%); } }

/* ---------- appel à l'action */
.cta { position: relative; z-index: 3; min-height: 92vh; margin-top: -30px; display: grid; place-items: center; text-align: center; overflow: hidden; padding: 150px max(22px, env(safe-area-inset-right, 0px)) 160px max(22px, env(safe-area-inset-left, 0px)); background: var(--nuit) url(../_commun/img/fonds/explosion-cta.svg) center / cover; }
.cta__z { position: absolute; inset: 0; z-index: 1; }
.cta__main { position: absolute; z-index: 2; left: -2%; bottom: -12%; width: clamp(200px, 26vw, 400px); transform: rotate(8deg); }
.cta__mega { position: absolute; z-index: 2; right: -3%; bottom: 2%; width: clamp(220px, 30vw, 460px); transform: rotate(-12deg); }
.cta__contenu { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 900px; }
/* le titre reprend la composition du hero : un bloc penché, des lignes alignées à gauche, un coup de pinceau
   jaune sous le dernier mot. Les lignes rouges sont posées sur une bande sombre pour se détacher de l'éclair rouge. */
.cta__titre { display: flex; flex-direction: column; align-items: flex-start; gap: .06em; font: 900 clamp(58px, 9vw, 156px)/.9 var(--titre); text-transform: uppercase; letter-spacing: .005em; text-align: left; rotate: -4deg; filter: drop-shadow(6px 7px 0 rgba(0,0,0,.6)); padding-bottom: .1em; margin-bottom: .32em; }
.cta__titre em { display: contents; }
.cta__ligne { position: relative; display: block; white-space: nowrap; }
.cta__ligne--rouge { z-index: 0; margin-left: -.12em; padding: .02em .14em .06em; }
.cta__ligne--rouge::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--nuit);
  clip-path: polygon(0 6%, 4% 0, 30% 4%, 58% 0, 86% 3%, 100% 0, 99% 48%, 100% 100%, 70% 96%, 42% 100%, 12% 97%, 0 100%, 1% 52%); }
.cta__ligne--rouge + .cta__ligne--rouge { margin-left: .5em; }
.cta__pinceau { position: absolute; z-index: -1; left: .1em; right: 0; bottom: -.2em; width: 100%; height: .3em; fill: var(--jaune); }
.cta__sous { font-size: clamp(18px, 1.6vw, 22px); max-width: 40ch; text-shadow: 0 2px 10px #000; }
.cta__actions { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 8px; }
.cta__direct { display: flex; gap: 22px; font-weight: 800; font-size: 20px; text-shadow: 0 2px 10px #000; }
.cta__direct a { text-decoration: none; display: inline-block; padding: 6px 0; }
.cta__direct span { user-select: all; }

/* ---------- pied */
/* ---------- pied de page : il monte en biais sur l'appel final, et le grand « Force numérique » se remplit
   de courant au défilement, du gris éteint au rouge tramé, avec un front jaune qui avance */
.pied { position: relative; z-index: 4; background: var(--nuit); margin-top: calc(-1 * var(--biais)); padding: calc(110px + var(--biais) * .6) 0 26px; overflow: hidden; clip-path: polygon(0 var(--biais), 100% 0, 100% 100%, 0 100%); }
.pied__grille { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.pied__identite { display: flex; flex-direction: column; gap: 18px; }
.pied__identite img { width: 190px; }
address { font-style: normal; color: var(--gris); line-height: 1.6; }
address a { text-decoration: none; }
.pied__col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.pied__titre { font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--jaune); margin-bottom: 10px; }
.pied__col a { text-decoration: none; font: 800 clamp(17px, 1.25vw, 20px)/1.15 var(--titre); text-transform: uppercase; letter-spacing: .01em; transition: color .15s; }
@media (hover: hover) { .pied__col a:hover { color: var(--rouge); } }
/* les liens texte qui ne font que changer de couleur : un fondu court et égal partout */
.jeu a, .panneau__grille--services a, .panneau__col a, .panneau__suite, .panneau__tel, .fiches__tout, .pied__col a { transition: color 100ms ease-out; }
.pied__bas { position: relative; z-index: 1; margin-top: 10px; text-align: center; color: var(--gris); font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.pied__bas a { margin-left: 14px; color: var(--gris); transition: color 100ms ease-out; }
@media (hover: hover) { .pied__bas a:hover { color: var(--blanc); } }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* l'infolettre : le titre à gauche, et la case dans une grande bulle de BD qui lui répond ; au survol du bouton, l'avion de papier décolle */
.infolettre { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 26px clamp(40px, 5vw, 90px); margin-bottom: 70px; padding-bottom: 54px; border-bottom: 2px solid var(--ligne); }
.infolettre__sur { margin: 0 0 8px; font: 600 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--jaune); }
.infolettre__titre { margin: 0; font: 900 clamp(28px, 2.8vw, 46px)/1 var(--titre); text-transform: uppercase; }
.infolettre__bulle { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 16px 16px 26px; background: #fff; color: var(--nuit); border-radius: 28px; box-shadow: 8px 8px 0 var(--rouge); rotate: -1.2deg; }
.infolettre__bulle::before { content: ""; position: absolute; left: -26px; top: 50%; width: 34px; height: 30px; margin-top: -8px; background: #fff; clip-path: polygon(100% 0, 0 70%, 100% 100%); }
.infolettre__champ { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.infolettre__libelle { font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--rouge-fonce); }
.infolettre__champ input { width: 100%; height: 44px; padding: 0 4px; border: 0; border-bottom: 3px solid var(--nuit); border-radius: 0; background: transparent; color: var(--nuit); font: 700 clamp(18px, 1.4vw, 22px)/1 var(--titre); transition: background .15s, border-color .15s; }
.infolettre__champ input::placeholder { color: #9A9AA3; font-weight: 500; }
.infolettre__champ input:focus { outline: none; border-color: var(--rouge); background: linear-gradient(transparent 55%, rgba(250, 239, 93, .8) 55%); }
.infolettre__bouton { flex: none; height: 58px; }
.infolettre__bouton i { transition: transform .35s var(--claque); }
.infolettre__bouton:focus-visible i { transform: translate(5px, -6px) rotate(-12deg); }
@media (hover: hover) { .infolettre__bouton:hover i { transform: translate(5px, -6px) rotate(-12deg); } }
@media (max-width: 1060px) { .infolettre { grid-template-columns: minmax(0, 1fr); } .infolettre__bulle::before { left: 40px; top: -24px; margin: 0; width: 30px; height: 30px; clip-path: polygon(0 0, 100% 100%, 0 100%); } }
.pied__grand { pointer-events: none; --p: 1; margin: 18px 0 0; text-align: center; white-space: nowrap; line-height: .78; font: 900 10.6vw/.78 var(--titre); text-transform: uppercase; letter-spacing: -.02em; transform: translateY(.1em); }
.pied__grand span { display: inline-block; color: transparent; -webkit-background-clip: text; background-clip: text;
  background:
    radial-gradient(rgba(23, 23, 26, .45) 1.1px, transparent 1.6px) 0 0 / 7px 7px,
    linear-gradient(90deg, var(--rouge) 0 calc(var(--p) * 108% - 8%), var(--jaune) calc(var(--p) * 108% - 4%), #26262B calc(var(--p) * 108%));
  -webkit-background-clip: text; background-clip: text; }

/* ---------- retour en haut : un autocollant jaune penché, la flèche file vers le haut et revient par le bas au survol */
.haut { position: fixed; z-index: 60; right: max(22px, env(safe-area-inset-right, 0px)); bottom: calc(22px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: center; gap: 2px; width: 66px; padding: 8px 0 7px; background: var(--jaune); color: var(--nuit); text-decoration: none; border: 3px solid var(--nuit); rotate: -7deg;
  clip-path: polygon(0 4%, 8% 0, 52% 3%, 92% 0, 100% 6%, 98% 52%, 100% 96%, 60% 100%, 14% 97%, 0 100%, 2% 50%); opacity: 0; translate: 0 30px; pointer-events: none; transition: opacity .25s, translate .35s var(--claque), background .15s, color .15s; }
.haut.est-visible { opacity: 1; translate: 0 0; pointer-events: auto; }
.haut__fleche { position: relative; display: block; width: 30px; height: 30px; overflow: hidden; font-size: 30px; line-height: 1; }
.haut__fleche i { position: absolute; left: 0; top: 0; transition: translate .35s cubic-bezier(.7, 0, .2, 1); }
.haut__fleche i + i { translate: 0 110%; }
.haut__mot { font: 800 12px/1 var(--titre); letter-spacing: .14em; text-transform: uppercase; }
.haut:focus-visible { background: var(--nuit); color: var(--jaune); border-color: var(--jaune); }
@media (hover: hover) { .haut:hover { background: var(--nuit); color: var(--jaune); border-color: var(--jaune); } }
.haut:focus-visible .haut__fleche i { translate: 0 -110%; }
@media (hover: hover) { .haut:hover .haut__fleche i { translate: 0 -110%; } }
.haut:focus-visible .haut__fleche i + i { translate: 0 0; }
@media (hover: hover) { .haut:hover .haut__fleche i + i { translate: 0 0; } }
@media (max-width: 640px) { .haut { width: 54px; padding: 6px 0 5px; } .haut__fleche { width: 24px; height: 24px; font-size: 24px; } .haut__mot { font-size: 10px; } }

/* ---------- responsive */
@media (max-width: 1060px) {
  /* une seule rangée qu'on fait glisser */
  .gang__rangee { justify-content: flex-start; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 6vw; padding: 40px 22vw 70px; }
  .gang__rangee::-webkit-scrollbar { display: none; }
  .perso { flex: 0 0 30vw; scroll-snap-align: center; }
  .perso:nth-child(n) { --y: 0px; }
  .perso:nth-child(even) { --y: 40px; }
  .nav__cta { display: none; }
  .nav__soutien { width: 48px; height: 48px; padding: 0; } .nav__soutien span { display: none; }
  .soutien__menu { right: -64px; width: min(290px, calc(100vw - 32px)); }
  .hero { align-items: flex-start; }
  .hero__texte { padding-top: 120px; padding-bottom: 46vh; }
  /* menu : la roue en haut, le panneau dessous */
  .roue__liste { right: 0; bottom: 52%; }
  .roue__panneaux { top: 50%; bottom: 84px; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); padding: 22px 6px 10px; align-items: start; }
  .panneau__tetes img { width: 17vw; margin-left: -3vw; }
  .pied__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pied__identite { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .panneau__article { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
  .panneau__article b { font-size: 15px; }
  .infolettre { grid-template-columns: minmax(0, 1fr); margin-bottom: 50px; padding-bottom: 36px; }
  .infolettre__bulle { flex-direction: column; align-items: stretch; padding: 16px 16px 18px; border-radius: 22px; }
  .infolettre__bouton { width: 100%; }
  .pied__bas a { display: inline-block; margin: 8px 0 0; padding: 6px 0; }
  /* passe mobile : « Force numérique » garde de l'air sur les côtés ; la main et le mégaphone de l'appel final restent dans l'écran */
  .pied__grand { font-size: 9.2vw; }
  .cta__main { left: 2%; }
  .cta__mega { right: 5%; }
  .nav__outils .btn { height: 48px; }
  @media (hover: hover) { .nav__outils .btn:hover { height: 48px; } }
  /* audit mobile : cibles tactiles de 40 px et plus, textes lisibles, rien de coupé au bord */
  .pied__col { gap: 0; }
  .pied__col a { padding: 9px 0; }
  .pied__titre { margin-bottom: 4px; }
  address a { display: inline-block; padding: 5px 0; }
  .fiches__tout { padding-top: 10px; }
  .jeu__num { display: none; }
  .cta__titre { font-size: 12.4vw; }
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__titre { font-size: 10.2vw; }
  .offre { grid-template-columns: minmax(0, 1fr); }
  .offre__panneau { grid-column: 1; grid-row: auto; position: relative; top: 0; margin: 64px 4px 26px; padding: 92px 20px 26px; }
  .offre__illu { height: 130px; top: -64px; right: 6px; }
  .offre__ruban { width: 96px; top: -14px; left: -8px; }
  .offre__nom { font-size: 26px; }
  /* sur mobile les étiquettes passent sous le texte : la phrase devient un encart lisible */
  .hero__sous { align-self: flex-start; background: rgba(23, 23, 26, .92); padding: 10px 12px; border-radius: var(--r); font-size: 16px; text-shadow: none; }
  .nav__rangee { height: 76px; }
  .nav__logo img, .nav.est-pleine .nav__logo img { height: 54px; }
  .nav.est-pleine .nav__rangee { height: 68px; }
  .nav__burger { height: 48px; padding: 0 14px; }
  .roue__logo { height: 54px; }
  .jeu a { font-size: 10.2vw; }
  .jeu__num { left: -24px; font-size: 10px; }
  .roue__pied .sociaux { display: none; }
  .panneau { padding: 22px 18px; }
  .panneau__ruban { width: 96px; top: -16px; left: -10px; }
  .roue__aide, .roue__coord { display: none; }
  .roue__panneaux { top: 46%; bottom: 82px; }
  .panneau__grille { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .panneau__projets { gap: 10px; }
  .panneau__projet span { left: 6px; bottom: 6px; padding: 5px 6px; font-size: 11px; }
  .navigateur__ecran { overflow-y: auto; }
  /* le site recréé prend sa mise en page mobile */
  .mini { width: 760px; }
  .mini--fjord .mini__nav { display: none; }
  .mini--fjord .mini__heros { grid-template-columns: minmax(0, 1fr); }
  .mini--fjord .mini__texte { padding: 64px 40px 48px; }
  .mini--fjord .mini__titre { margin-right: 0 !important; font-size: 78px; }
  .mini--fjord .mini__photo { height: 380px; }
  .mini--fjord .mini__loyers { padding: 64px 40px 80px; }
  .mini--fjord .mini__loyers-tete { flex-direction: column; align-items: flex-start; }
  .mini--fjord .mini__cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gang .titre { font-size: 12.5vw; }
  .perso { flex-basis: 56vw; }
  .perso__dos p { font-size: 12px; }
  .perso__etiquette { max-width: 62vw; margin-top: -24px; }
  .gang__tete { flex-wrap: wrap; }
  .gang__accroche { text-align: left; font-size: 16px; margin-top: 0; }
  .bande { margin-top: -36px; }
  .cta__main { width: 150px; } .cta__mega { width: 170px; }
  .cta__direct { flex-direction: column; gap: 4px; }
  .pied__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- liens texte, sur tout le site : un trait jaune sous le mot ; au survol, le trait monte et devient
   un surlignage (dans la largeur du texte) et le texte passe au foncé. --hl / --hl-texte changent la couleur au besoin. */
.lien, :where(main, .pied, .roue, .arcade, .cta) a:where(:not([class], .sociaux a)) {
  --hl: var(--jaune); --hl-texte: var(--nuit);
  color: inherit; text-decoration: none; padding-inline: .12em; margin-inline: -.12em;
  background: linear-gradient(var(--hl), var(--hl)) 0 100% / 100% 2px no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .28s cubic-bezier(.7, 0, .2, 1), color .15s ease-out;
}
.lien:focus-visible, :where(main, .pied, .roue, .arcade, .cta) a:where(:not([class], .sociaux a)):focus-visible { background-size: 100% 100%; color: var(--hl-texte); outline: none; }
@media (hover: hover) { .lien:hover, :where(main, .pied, .roue, .arcade, .cta) a:where(:not([class], .sociaux a)):hover { background-size: 100% 100%; color: var(--hl-texte); outline: none; } }
/* les listes de liens (pied de page, encadrés du menu) : pas de trait au repos, le surlignage balaie de gauche à droite */
.pied__col a, .pied__bas a { background-size: 0 100%; background-position: 0 0; transition: background-size .28s cubic-bezier(.7, 0, .2, 1), color .15s ease-out; }
.pied__col a:focus-visible, .pied__bas a:focus-visible { background-size: 100% 100%; color: var(--nuit); }
@media (hover: hover) { .pied__col a:hover, .pied__bas a:hover { background-size: 100% 100%; color: var(--nuit); } }
/* sur fond jaune, le surlignage passe au foncé */
.panneau--contact { --hl: var(--nuit); --hl-texte: var(--jaune); }
@media (prefers-reduced-motion: reduce) { .lien, :where(main, .pied, .roue, .arcade, .cta) a:where(:not([class], .sociaux a)) { transition: none; } }
.pied__bas a { margin-left: 14px; }

/* les liens « de suite » (Tout sur ce service, Voir les projets, L'étude de cas…) : même effet, le trait devient surlignage */
:is(.panneau__suite, .offre__plus, .fiche__cas, .fiches__tout, .gang__lien, .sv-autres__tout) {
  border-bottom: 0 !important; padding: 2px .2em 4px; margin-inline: -.2em; text-decoration: none;
  background: linear-gradient(var(--hl, var(--rouge)), var(--hl, var(--rouge))) 0 100% / 100% 2px no-repeat;
  transition: background-size .28s cubic-bezier(.7, 0, .2, 1), color .15s ease-out;
}
/* dans le menu, le surlignage monte du trait jusqu'à couvrir le mot, comme ailleurs sur le site (les règles du menu ne gardaient que la couleur) */
.roue.roue a:where(:not([class], .sociaux a)) { transition: background-size .32s cubic-bezier(.7, 0, .2, 1), color .18s ease-out; }
@media (prefers-reduced-motion: reduce) { .roue.roue a:where(:not([class], .sociaux a)) { transition: none; } }
@media (hover: hover) { .roue a:where(:not([class], .sociaux a)):is(:hover, :focus-visible), .roue a:where(:not([class], .sociaux a)):is(:hover, :focus-visible) * { color: var(--hl-texte) !important; } }
@media (hover: hover) { :is(.panneau__suite, .offre__plus, .fiche__cas, .fiches__tout, .gang__lien, .sv-autres__tout):is(:hover, :focus-visible) { background-size: 100% 100%; color: var(--hl-texte, #fff) !important; outline: none; } }
.offre__plus { --hl: var(--jaune); --hl-texte: var(--nuit); }
.panneau__suite { --hl: var(--accent); --hl-texte: var(--poster); }
.gang__lien { --hl: var(--rouge); --hl-texte: #fff; }

/* « Force numérique » déborde sous sa boîte (interlignage serré) : on lui rend cette place pour que la barre © ait ses 10 px */
.pied__grand { margin-bottom: .16em; }

/* ---------- la trame en dégradé (reprise de l'en-tête de lettre) : des points de trame qui grossissent vers la droite.
   À poser sur une section : class="trame-degrade" ; couleur des points : --trame ; sens inversé : .trame-degrade--gauche */
.trame-degrade { position: relative; isolation: isolate; }
.trame-degrade::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--trame, #3A3A41);
  -webkit-mask: url(../_commun/img/fonds/trame-degrade.svg) right top / 1400px 9px repeat-y; mask: url(../_commun/img/fonds/trame-degrade.svg) right top / 1400px 9px repeat-y; }
.trame-degrade--gauche::after { transform: scaleX(-1); }


/* ==========================================================================
   PASSE MOBILE : le doigt d'abord
   ========================================================================== */
/* le toucher : pas de voile gris du navigateur, pas de délai, un retour franc à la pression */
a, button, summary, label, select, input, textarea { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (hover: none) {
  main a:not(.btn):active, .pied a:not(.btn):active, .roue a:not(.btn):active, summary:active { opacity: .62; transition: opacity 0s; }
  .btn { -webkit-user-select: none; user-select: none; }
}

/* la barre d'action : cachée sur grand écran et sans JS */
.barre-action { display: none; }
.pied__bascule { display: none; }
.pied__liens, .pied__liens-dedans { display: contents; }

@media (max-width: 760px) {
  .barre-action { position: fixed; z-index: 44; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px;
    padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    background: var(--nuit); border-top: 3px solid var(--rouge); transform: translateY(110%); visibility: hidden; transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s .28s; }
  .barre-action.est-visible { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
  .barre-action__jaser.btn { flex: 1 1 auto; min-height: 50px; padding-block: 10px; font-size: 19px; box-shadow: none; }
  .barre-action__bouton { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border: 2px solid var(--charbon-2); border-radius: var(--r); background: var(--charbon); color: var(--blanc); font-size: 22px; text-decoration: none; cursor: pointer; }
  .barre-action__bouton:active { background: var(--jaune); color: var(--nuit); }
  /* la flèche « Haut » vit maintenant dans la barre */
  .haut { display: none !important; }

  /* la barre du haut : plus mince, pour laisser l'écran au contenu */
  .nav__rangee, .nav.est-pleine .nav__rangee { height: 64px; }
  .nav__logo img, .nav.est-pleine .nav__logo img { height: 46px; }
  .nav__outils { gap: 8px; }
  .nav__outils .btn, .nav__outils .btn:hover { height: 44px; }
  .nav__burger { height: 44px; padding: 0 12px; }
  .nav__soutien { width: auto; height: 44px; padding: 0 12px; }

  /* le pied de page : des accordéons, de vraies cibles pour le pouce */
  .pied { padding-top: calc(70px + var(--biais) * .6); }
  .pied__grille { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pied__identite { grid-column: 1; margin-bottom: 26px; }
  .pied__identite img { width: 150px; height: auto; }
  .pied address { font-size: 16px; line-height: 1.5; }
  .pied address a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; background-position: 0 calc(100% - 8px); }
  .pied .sociaux a { width: 48px; height: 48px; }
  .pied__col { display: block; border-top: 2px solid var(--charbon-2); }
  .pied__col:last-of-type { border-bottom: 2px solid var(--charbon-2); }
  .pied__titre { display: none; }
  .pied__bascule { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 0; border: 0; background: none; color: var(--blanc); font: 800 18px/1 var(--titre); text-transform: uppercase; letter-spacing: .01em; cursor: pointer; }
  .pied__bascule i { font-size: 20px; color: var(--jaune); transition: rotate .25s cubic-bezier(.2, .8, .2, 1); }
  .pied__bascule[aria-expanded="true"] i { rotate: 45deg; }
  .pied__liens { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s cubic-bezier(.2, .8, .2, 1); }
  .pied__col.est-ouvert .pied__liens { grid-template-rows: 1fr; }
  .pied__liens-dedans { display: flex; flex-direction: column; align-items: flex-start; min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s .28s; }
  .pied__col.est-ouvert .pied__liens-dedans { visibility: visible; transition: visibility 0s; padding-bottom: 10px; }
  .pied__col a { display: flex; align-items: center; min-height: 44px; padding: 0; font: 500 17px/1.2 var(--titre); text-transform: none; }
  .pied__grand { margin-top: 34px; }
  .pied__bas { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; letter-spacing: .05em; line-height: 1.5; }
  .pied__bas a { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0; background-position: 0 calc(100% - 10px); }
  .infolettre__libelle { font-size: 12px; }

  /* mentions et légendes : jamais sous 12 px quand elles informent */
  .budget__sur, .perso__role, .dymo { font-size: max(12px, 1em); }
}
@media (min-width: 380px) and (max-width: 760px) {
  .nav__soutien span { display: inline; font-size: 16px; }
  .nav__soutien { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { .barre-action, .barre-action.est-visible, .pied__liens { transition: none; } }

/* ---------- une rangée qu'on balaie du doigt, la suivante dépasse pour montrer qu'il y a une suite */
.balayage__suivi { display: none; }
@media (max-width: 760px) {
  .balayage { display: flex !important; align-items: flex-end; gap: 14px; margin-inline: calc(-1 * var(--gouttiere, 22px)); padding-inline: var(--gouttiere, 22px); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gouttiere, 22px); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .balayage::-webkit-scrollbar { display: none; }
  .balayage > * { flex: 0 0 var(--balaye, 78vw); scroll-snap-align: start; min-width: 0; }
  .balayage__suivi { display: flex; align-items: center; gap: 12px; margin-top: 16px; font: 600 13px/1 var(--mono); letter-spacing: .06em; color: inherit; }
  .balayage__barre { position: relative; flex: 1; height: 4px; border-radius: 2px; background: color-mix(in srgb, currentColor 22%, transparent); overflow: hidden; }
  .balayage__barre i { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--rouge); transform-origin: 0 50%; transform: scaleX(var(--p, .1)); }

  /* des cibles d'au moins 44 px pour les liens de suite */
  :is(.offre__plus, .fiches__tout, .fiche__cas, .gang__lien, .sv-autres__tout, .sv-partheo__lien, .fait__voir) { display: inline-flex; align-items: center; min-height: 44px; background-position: 0 calc(100% - 8px); }
  main a.dymo { display: inline-flex; align-items: center; min-height: 32px; }
}

/* ---------- le menu sur téléphone : la roue en haut, l'encadré a toute la place du dessous */
@media (max-width: 760px) {
  .roue__logo { height: 46px; top: calc(9px + env(safe-area-inset-top, 0px)); left: max(16px, env(safe-area-inset-left, 0px)); }
  .roue__fermer { width: 44px; height: 44px; top: calc(10px + env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); }
  .roue__liste { bottom: 60%; }
  .jeu a { font-size: min(10.2vw, 6vh); }
  .roue__panneaux { top: 40%; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding: 20px 4px 10px; overscroll-behavior: contain; scrollbar-width: none; }
  .roue__panneaux::-webkit-scrollbar { display: none; }
  .roue__pied { display: none; }
  .panneau { padding: 24px 16px 22px; }
  .panneau__gros { font-size: clamp(25px, 7.4vw, 30px); }
  .panneau__sur { font-size: 12px; padding-left: 58px; }
  .panneau__texte { font-size: 16px; line-height: 1.42; }
  /* le ruban tient le coin et ne couvre plus le surtitre ; rien de collé sur un titre */
  .panneau__ruban { width: 66px; top: -20px; left: -12px; }
  .panneau--nouvelles .panneau__collant, .panneau--accueil .panneau__collant { display: none; }
  .panneau--realisations .panneau__collant, .panneau--services .panneau__collant, .panneau--contact .panneau__collant { width: 58px; top: -22px; right: 2px; }
  /* l'encadré Accueil va droit au but : son texte s'efface au profit des trois boutons */
  .panneau--accueil .panneau__texte { display: none; }
  .panneau__actions { gap: 10px; margin-top: 14px; }
  .panneau__actions .btn { flex: 1 1 calc(50% - 5px); min-height: 50px; padding: 10px 12px; font-size: 18px; }
  .panneau__actions .btn:first-child { flex-basis: 100%; }
  /* les services sur deux colonnes */
  .panneau__grille { gap: 0 14px; }
  .panneau__grille--services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panneau__grille--services a { display: flex; align-items: center; min-height: 48px; font-size: 15px; line-height: 1.1; }
  .panneau__suite { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; }
  .panneau__tetes img { width: 15vw; }
}

/* ---------- les déroulants de formulaire : une liste de papier, comme les menus de tri */
.deroulant { position: relative; }
.deroulant.est-ouvert { z-index: 30; }
.deroulant__natif { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.deroulant__bouton { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; text-align: left; cursor: pointer; }
.deroulant__bouton.est-vide .deroulant__valeur { color: #6A6A72; }
.deroulant__valeur { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deroulant__bouton i { flex: none; font-size: 17px; transition: rotate .22s cubic-bezier(.2, .8, .2, 1); }
.deroulant.est-ouvert .deroulant__bouton i { rotate: 180deg; }
.deroulant__liste { position: absolute; z-index: 1; left: -3px; right: -3px; top: calc(100% + 12px); max-height: min(340px, 56vh); margin: 0; padding: 8px; overflow-y: auto; overscroll-behavior: contain; list-style: none; background: #fff; color: var(--nuit); border: 3px solid var(--nuit); box-shadow: 7px 7px 0 var(--rouge); rotate: -.5deg; outline: none; transform-origin: 50% 0; animation: deroulant-ouvre .16s cubic-bezier(.2, .8, .2, 1); }
.deroulant.vers-haut .deroulant__liste { top: auto; bottom: calc(100% + 12px); transform-origin: 50% 100%; }
@keyframes deroulant-ouvre { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.deroulant__option { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 11px; font: 600 17px/1.2 var(--titre); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.deroulant__option + .deroulant__option { border-top: 1px dashed rgba(23, 23, 26, .22); }
.deroulant__option i { flex: none; font-size: 18px; color: var(--rouge-fonce); visibility: hidden; }
.deroulant__option[aria-selected="true"] { font-weight: 800; }
.deroulant__option[aria-selected="true"] i { visibility: visible; }
.deroulant__option.est-active { background: var(--jaune); }
@media (prefers-reduced-motion: reduce) { .deroulant__liste { animation: none; } .deroulant__bouton i { transition: none; } }

/* le fil d'Ariane : le texte reste petit, la zone à toucher non ; quelques petites mentions remontent à 12 px */
@media (max-width: 760px) {
  .ariane a { position: relative; }
  .ariane a::after { content: ""; position: absolute; inset: -14px -6px; }
  .av-facultatif, .carrieres dt, .page-carrieres dt, .page-blogue time, .perso__role, .dos__deroule-sur { font-size: 12px; }
}