/* =====================================================================
   Vertical Sud Informatique — feuille de style
   Noir · orange #EA471A · blanc. Titres Unbounded, texte Manrope, détails JetBrains Mono.
   ===================================================================== */

@font-face { font-family: 'Unbounded'; src: url(/assets/fonts/unbounded.woff2) format('woff2'); font-weight: 200 900; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url(/assets/fonts/manrope.woff2) format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url(/assets/fonts/jetbrains-mono.woff2) format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --noir: #0a0a0b;
  --noir-2: #101012;
  --noir-3: #17171a;
  --noir-4: #202024;
  --ligne: rgba(255, 255, 255, .09);
  --ligne-2: rgba(255, 255, 255, .16);
  --blanc: #f4f4f2;
  --gris: #9b9ba3;
  --gris-2: #c8c8ce;
  --orange: #ea471a;
  --orange-2: #ff6a33;
  --orange-l: rgba(234, 71, 26, .14);
  --orange-glow: 0 0 24px rgba(234, 71, 26, .55);
  --papier: #f3f2ee;
  --encre: #121214;

  --f-titre: 'Unbounded', 'Arial Black', system-ui, sans-serif;
  --f-texte: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --marge: clamp(16px, 4.5vw, 72px);
  --max: 1360px;
  --r: 18px;
  --r-s: 10px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --entete-h: 76px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--entete-h) + 12px); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--noir); color: var(--blanc);
  font-family: var(--f-texte); font-size: clamp(16px, 1.05vw + 10px, 18px); line-height: 1.65; font-weight: 450;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration-color: rgba(234, 71, 26, .6); text-underline-offset: .2em; }
a:hover { color: var(--orange-2); }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--orange); color: #fff; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.evitement { position: fixed; left: 12px; top: -60px; z-index: 1000; background: var(--orange); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 700; }
.evitement:focus { top: 12px; }
.ic { width: 1.2em; height: 1.2em; flex: none; stroke-width: 1.6; }

/* Transitions entre pages (navigateurs récents) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-sortie .45s var(--ease) both; }
::view-transition-new(root) { animation: vt-entree .55s var(--ease) both; }
@keyframes vt-sortie { to { opacity: 0; transform: translateY(-2vh); filter: blur(4px); } }
@keyframes vt-entree { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }

/* ---------- Typo ---------- */
.titre-xl { font-family: var(--f-titre); font-size: clamp(2.1rem, 5.4vw, 5rem); font-weight: 600; letter-spacing: -.035em; line-height: 1; }
.titre-l { font-family: var(--f-titre); font-size: clamp(1.6rem, 3.2vw, 2.9rem); font-weight: 600; letter-spacing: -.03em; }
.titre-m { font-family: var(--f-titre); font-size: clamp(1.2rem, 1.8vw, 1.6rem); font-weight: 600; letter-spacing: -.02em; }
.kicker { display: inline-flex; align-items: center; gap: .6em; margin: 0 0 1.2rem; font-family: var(--f-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-2); }
.kicker i { color: var(--orange); font-style: normal; letter-spacing: -.1em; }
.chapo, .chapo p { font-size: clamp(1.1rem, 1.4vw, 1.35rem); line-height: 1.55; color: var(--gris-2); }
.sous-titre { font-family: var(--f-mono); color: var(--orange); text-transform: uppercase; letter-spacing: .12em; font-size: .85rem; margin-top: .8rem; }
.paras p { color: var(--gris-2); max-width: 68ch; }
.paras p:last-child { margin-bottom: 0; }
.sec-num { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); margin: 0 0 2rem; display: flex; align-items: center; gap: .6em; }
.sec-num span { color: var(--orange); }
.sec-num::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--ligne-2), transparent); }
.sec-tete { display: grid; grid-template-columns: 1fr minmax(0, 28rem); gap: 2rem; align-items: end; margin-bottom: clamp(2rem, 5vw, 4rem); }
.sec-aside { color: var(--gris); margin: 0; font-size: 1.02rem; }

/* ---------- Boutons ---------- */
.btn {
  --b: var(--ligne-2);
  position: relative; display: inline-flex; align-items: center; gap: .6em; padding: .95em 1.5em; border-radius: 999px;
  border: 1px solid var(--b); background: rgba(255, 255, 255, .03); color: var(--blanc); text-decoration: none;
  font-weight: 650; font-size: .95rem; letter-spacing: .01em; cursor: pointer; overflow: hidden; isolation: isolate;
  transition: border-color .3s, color .3s, transform .3s var(--ease); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--orange); transform: translateY(101%); transition: transform .45s var(--ease); border-radius: inherit; }
.btn:hover { color: #fff; border-color: var(--orange); }
.btn:hover::before { transform: translateY(0); }
.btn-plein { background: var(--orange); border-color: var(--orange); color: #fff; box-shadow: 0 10px 40px -12px rgba(234, 71, 26, .8); }
.btn-plein::before { background: #fff; }
.btn-plein:hover { color: var(--noir); }
.btn-petit { padding: .6em 1.15em; font-size: .85rem; }
.btn .ic { width: 1.1em; height: 1.1em; }
.lien-fleche { display: inline-flex; align-items: center; gap: .4em; font-weight: 650; text-decoration: none; color: var(--blanc); border-bottom: 1px solid var(--orange); padding-bottom: 2px; }
.lien-fleche .fl { transition: transform .3s var(--ease); }
.lien-fleche:hover .fl { transform: translate(3px, -3px); }

/* ---------- La verticale (progression du défilement) ---------- */
.verticale { position: fixed; left: calc(var(--marge) / 2 - 1px); top: 0; bottom: 0; width: 1px; z-index: 40; background: linear-gradient(var(--ligne), var(--ligne)); pointer-events: none; }
.verticale i { position: absolute; left: -1px; top: 0; width: 3px; height: 100%; background: linear-gradient(to bottom, transparent, var(--orange) 92%, #ffd2bf); transform-origin: top; transform: scaleY(var(--p, 0)); box-shadow: var(--orange-glow); border-radius: 3px; }
@media (max-width: 760px) { .verticale { left: 0; width: 100%; height: 2px; top: 0; bottom: auto; background: none; } .verticale i { width: 100%; height: 2px; transform: scaleX(var(--p, 0)); transform-origin: left; background: var(--orange); } }

/* ---------- En-tête ---------- */
.entete {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--entete-h); display: flex; align-items: center; gap: clamp(12px, 2vw, 28px);
  padding: 0 var(--marge); transition: background .4s, border-color .4s, transform .5s var(--ease); border-bottom: 1px solid transparent;
}
.entete.solide { background: rgba(10, 10, 11, .72); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border-color: var(--ligne); }
.entete.cache { transform: translateY(-100%); }
.entete-logo { display: block; width: clamp(150px, 15vw, 210px); flex: none; }
.entete-logo .logo-vs { width: 100%; height: auto; }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: clamp(10px, 1.5vw, 26px); }
.nav a { position: relative; text-decoration: none; font-size: .88rem; font-weight: 600; color: var(--gris-2); padding: 6px 0; white-space: nowrap; transition: color .25s; }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.nav a:hover, .nav a[aria-current] { color: #fff; }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.entete-tel { display: inline-flex; align-items: center; gap: .45em; text-decoration: none; font-family: var(--f-mono); font-size: .85rem; color: var(--gris-2); white-space: nowrap; }
.entete-tel .ic { color: var(--orange); }
.burger { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--ligne-2); background: rgba(255, 255, 255, .04); position: relative; cursor: pointer; flex: none; }
.burger span:not(.sr) { position: absolute; left: 14px; right: 14px; height: 2px; background: #fff; transition: transform .4s var(--ease), top .4s var(--ease); }
.burger span:nth-child(1) { top: 18px; } .burger span:nth-child(2) { top: 26px; right: 20px; background: var(--orange); }
.burger[aria-expanded="true"] span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { top: 22px; right: 14px; transform: rotate(-45deg); }
@media (max-width: 1240px) { .nav { display: none; } .entete-tel { margin-left: auto; } .burger { display: block; } }
@media (max-width: 640px) { .entete-tel span { display: none; } .entete-tel { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--ligne-2); justify-content: center; } .entete-contact { display: none; } :root { --entete-h: 66px; } }

.menu-plein { position: fixed; inset: 0; z-index: 45; background: radial-gradient(120% 80% at 100% 100%, rgba(234, 71, 26, .22), transparent 60%), var(--noir); padding: calc(var(--entete-h) + 4vh) var(--marge) 32px; display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto; }
.menu-plein[hidden] { display: none; }
.menu-plein ol { display: grid; gap: .2rem; }
.menu-plein ol a { display: flex; align-items: baseline; gap: 1rem; text-decoration: none; font-family: var(--f-titre); font-size: clamp(1.7rem, 6vw, 3.6rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; color: var(--blanc); }
.menu-plein ol a small { font-family: var(--f-mono); font-size: .8rem; color: var(--orange); letter-spacing: .1em; }
.menu-plein ol a:hover, .menu-plein ol a[aria-current] { color: var(--orange); }
.menu-plein-pied { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-top: 2rem; font-family: var(--f-mono); font-size: .85rem; color: var(--gris); }
.menu-plein-pied a { color: var(--blanc); text-decoration: none; }
body.menu-ouvert { overflow: hidden; }

/* ---------- Rubans de lumière (WebGL) ---------- */
.rubans { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.no-webgl .rubans { background: radial-gradient(90% 70% at 85% 105%, rgba(234, 71, 26, .38), transparent 60%), radial-gradient(60% 50% at 10% 0%, rgba(234, 71, 26, .1), transparent 60%); }

/* ---------- Intro (accueil, une fois par visite) ---------- */
/* La scène 3D (écran d'ordinateur) vit dans le héros : elle joue l'intro puis reste en fond */
.intro { position: fixed; inset: 0; z-index: 200; background: #0a0a0b; pointer-events: none; transition: background .6s; }
.intro.transparente { background: transparent; }
.intro[hidden] { display: none; }
html.intro-prevue .intro[hidden] { display: block; } /* affichée dès le départ quand l'intro est prévue */
.scene3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; transition: opacity 1.2s; pointer-events: none; }
html.scene-active .scene3d { opacity: 1; }
html.scene-active .hero .rubans { opacity: 0; transition: opacity 1.2s; }
html.scene-active .hero-sud { display: none; }
html.scene-active .hero::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(10, 10, 11, .92) 0%, rgba(10, 10, 11, .55) 38%, rgba(10, 10, 11, 0) 62%); }
html.intro-active .hero-in, html.intro-active .hero-sud, html.intro-active .hero-grille, html.intro-active .hero::before { opacity: 0; }
.intro-legende { position: absolute; left: 0; right: 0; bottom: 12vh; display: flex; justify-content: center; gap: 2.4em; margin: 0; font-family: var(--f-mono); font-size: .8rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gris-2); opacity: 0; }
.intro-legende span:first-child { color: var(--orange); }
@media (max-width: 640px) { .intro-legende { flex-direction: column; align-items: center; gap: .5em; letter-spacing: .2em; font-size: .72rem; bottom: 16vh; } }
.intro-passer { pointer-events: auto; position: absolute; right: var(--marge); bottom: 32px; background: none; border: 1px solid var(--ligne-2); border-radius: 999px; padding: .6em 1.2em; font-family: var(--f-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gris-2); cursor: pointer; }
.intro-passer:hover { color: #fff; border-color: var(--orange); }
html.intro-active { overflow: hidden; }
html.intro-active .entete, html.intro-active .verticale { opacity: 0; }
.entete, .verticale { transition: opacity .8s; }

/* ---------- Héros accueil ---------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--entete-h) + 6vh) var(--marge) clamp(36px, 7vh, 80px); overflow: hidden; isolation: isolate; }
.hero-grille { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .35;
  background-image: linear-gradient(var(--ligne) 1px, transparent 1px), linear-gradient(90deg, var(--ligne) 1px, transparent 1px); background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 30%, #000, transparent 75%); mask-image: radial-gradient(80% 70% at 50% 30%, #000, transparent 75%); }
.hero-in { position: relative; z-index: 2; width: 100%; max-width: var(--max); margin: 0 auto; }
.hero-sur { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3em .6em; font-family: var(--f-mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-2); margin-bottom: 2.2vh; }
.hero-sur .ic { color: var(--orange); }
.hero-sur i { font-style: normal; color: var(--orange); }
.hero-titre { font-family: var(--f-titre); font-weight: 700; text-transform: uppercase; letter-spacing: -.045em; line-height: .95; font-size: clamp(1.4rem, 6.9vw, 7.6rem); margin: 0 0 4vh; }
.hero-titre .l1, .hero-titre .l2 { display: block; }
.hero-titre .l2 { color: var(--orange); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero-titre .l2 .mot > span, .hero-titre .l2:not(.mots) { color: transparent; background: linear-gradient(100deg, var(--orange) 0 30%, #ffb08f 45%, var(--orange) 60%, #c2340e 100%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; animation: brillance 7s linear infinite; }
}
@keyframes brillance { from { background-position: 100% 0; } to { background-position: -200% 0; } }
.hero-bas { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem 4rem; align-items: end; border-top: 1px solid var(--ligne); padding-top: 3vh; }
.hero-sous { grid-column: 1; font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.5; color: var(--gris-2); margin: 0; max-width: 46ch; }
.hero-sous i { color: var(--orange); font-style: normal; letter-spacing: -.1em; margin-right: .2em; }
.hero-public { grid-column: 1; margin: 0; font-size: 1rem; color: var(--gris); }
.hero-public strong { color: #fff; font-weight: 700; margin-right: .35em; }
.hero-actions { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; gap: .8rem; justify-content: flex-end; }
.hero-sud { position: absolute; z-index: 2; right: var(--marge); top: 50%; display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gris); writing-mode: vertical-rl; }
.hero-sud i { width: 1px; height: 90px; background: linear-gradient(var(--ligne-2), var(--orange)); position: relative; overflow: hidden; }
.hero-sud i::after { content: ''; position: absolute; left: 0; width: 1px; height: 30px; background: #fff; animation: chute 2.2s var(--ease) infinite; box-shadow: var(--orange-glow); }
@keyframes chute { from { top: -30px; } to { top: 100%; } }
@media (max-width: 860px) { .hero-bas { grid-template-columns: 1fr; } .hero-actions { grid-column: 1; grid-row: auto; justify-content: flex-start; } .hero-sud { display: none; } }

/* ---------- Bandeau défilant ---------- */
.defilant { position: relative; overflow: hidden; border-block: 1px solid var(--ligne); padding: clamp(14px, 2.2vw, 26px) 0; background: var(--noir-2); }
.defilant-piste { display: flex; width: max-content; animation: defile 38s linear infinite; }
.defilant p { display: flex; align-items: center; margin: 0; flex: none; }
.defilant span { font-family: var(--f-titre); font-size: clamp(1.3rem, 3vw, 2.6rem); font-weight: 500; letter-spacing: -.03em; white-space: nowrap; padding: 0 .55em; color: var(--blanc); }
.defilant span:nth-of-type(even) { color: #55555c; }
.defilant i { color: var(--orange); font-style: normal; font-size: clamp(.9rem, 1.6vw, 1.3rem); }
@keyframes defile { to { transform: translateX(-50%); } }

/* ---------- Sections génériques ---------- */
.services, .histoire, .partenaires, .faq, .bloc, .visuel, .cta-page, .contact-in, .texte-legal { width: 100%; max-width: calc(var(--max) + var(--marge) * 2); margin: 0 auto; padding: clamp(64px, 8.5vw, 124px) var(--marge); }

/* ---------- Services (accueil) ---------- */
.srv-liste { border-top: 1px solid var(--ligne); counter-reset: s; }
.srv { border-bottom: 1px solid var(--ligne); }
.srv-lien { position: relative; display: grid; grid-template-columns: 4.5rem 3.2rem minmax(0, 1fr) minmax(0, 1.15fr) auto; gap: 1.6rem; align-items: center; padding: clamp(22px, 3vw, 38px) 0; text-decoration: none; color: var(--blanc); isolation: isolate; }
.srv-lien::before { content: ''; position: absolute; inset: 0 calc(var(--marge) * -1); z-index: -1; background: linear-gradient(90deg, var(--orange), #c2340e); clip-path: inset(0 100% 0 0); transition: clip-path .6s var(--ease); }
.srv-lien:hover { color: #fff; }
.srv-lien:hover::before { clip-path: inset(0 0 0 0); }
.srv-num { font-family: var(--f-mono); font-size: .85rem; color: var(--orange); transition: color .3s; }
.srv-ic { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 1px solid var(--ligne-2); color: var(--orange); transition: all .4s var(--ease); }
.srv-ic .ic { width: 1.3rem; height: 1.3rem; }
.srv-titre { font-family: var(--f-titre); font-size: clamp(1.4rem, 2.9vw, 2.6rem); font-weight: 600; letter-spacing: -.035em; transition: transform .5s var(--ease); }
.srv-texte { margin: 0; color: var(--gris); font-size: .98rem; transition: color .3s; }
.srv-voir { display: inline-flex; align-items: center; gap: .4em; font-family: var(--f-mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; }
.srv-voir .ic { transition: transform .4s var(--ease); }
.srv-lien:hover .srv-num, .srv-lien:hover .srv-texte { color: rgba(255, 255, 255, .9); }
.srv-lien:hover .srv-ic { background: #fff; color: var(--orange); border-color: #fff; transform: rotate(-8deg) scale(1.06); }
.srv-lien:hover .srv-titre { transform: translateX(10px); }
.srv-lien:hover .srv-voir .ic { transform: translate(4px, -4px) scale(1.2); }
@media (max-width: 960px) { .srv-lien { grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: .5rem 1rem; } .srv-ic { display: none; } .srv-texte { grid-column: 2 / -1; } .srv-voir { grid-row: 1; grid-column: 3; } .srv-voir { font-size: 0; } .srv-voir .ic { width: 1.4rem; height: 1.4rem; } .sec-tete { grid-template-columns: 1fr; } }

/* ---------- Histoire ---------- */
.histoire .titre-xl { margin-bottom: clamp(2rem, 4vw, 3rem); }
.frise { position: relative; aspect-ratio: 1000 / 300; margin: 0 auto clamp(2rem, 5vw, 4rem); max-width: 1100px; }
.frise-arc { position: absolute; inset: 0; width: 100%; height: 86%; overflow: visible; }
.frise-fond { fill: none; stroke: var(--ligne-2); stroke-width: 1.5; stroke-dasharray: 2 8; vector-effect: non-scaling-stroke; }
.frise-trait { fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: var(--frise, 1); vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 8px rgba(234, 71, 26, .8)); }
.jalons { position: absolute; inset: 0; }
.jalon { position: absolute; display: flex; flex-direction: column; align-items: center; gap: .6rem; transform: translate(-50%, -50%); }
.jalon-1 { left: 4%; top: 76%; } .jalon-2 { left: 50%; top: 20%; } .jalon-3 { left: 96%; top: 76%; }
.jalon-ic { display: grid; place-items: center; width: clamp(48px, 6vw, 76px); aspect-ratio: 1; border-radius: 50%; background: var(--noir); border: 1.5px solid var(--orange); color: var(--orange); box-shadow: 0 0 0 8px var(--noir), var(--orange-glow); }
.jalon-ic .ic { width: 45%; height: 45%; }
.jalon b { font-family: var(--f-titre); font-size: clamp(1.1rem, 2.6vw, 2.3rem); font-weight: 600; letter-spacing: -.03em; white-space: nowrap; }
.jalon-3 b { color: var(--orange); }
.histoire-textes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 6rem); margin-bottom: clamp(4rem, 8vw, 7rem); }
.histoire-textes .titre-m { margin-bottom: 1rem; display: flex; align-items: center; gap: .6em; }
.histoire-textes .titre-m::before { content: ''; width: 28px; height: 2px; background: var(--orange); }
@media (max-width: 760px) { .histoire-textes { grid-template-columns: 1fr; } .frise { aspect-ratio: 1000 / 420; width: calc(100% - 5.5rem); } .jalon b { font-size: 1rem; } }

/* Orbite des pôles */
.orbite { --taille: min(86vw, 720px); position: relative; width: var(--taille); aspect-ratio: 1; margin: 0 auto; }
.orbite::before, .orbite::after { content: ''; position: absolute; inset: 9%; border-radius: 50%; border: 1px dashed var(--ligne-2); }
.orbite::after { inset: 27%; border: 1px solid var(--ligne); background: radial-gradient(circle, rgba(234, 71, 26, .16), transparent 70%); }
.orbite-centre { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; z-index: 1; }
.orbite-centre img { width: clamp(54px, 7vw, 80px); height: auto; margin: 0 auto 1rem; border-radius: 18px; box-shadow: 0 0 40px rgba(234, 71, 26, .45); }
.orbite-centre span { font-family: var(--f-mono); font-size: clamp(.62rem, 1vw, .78rem); letter-spacing: .14em; text-transform: uppercase; color: var(--gris-2); line-height: 1.6; }
.orbite-anneau { position: absolute; inset: 0; transform: rotate(var(--rot, 0deg)); }
.orbite-anneau li { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(calc(360deg / var(--n) * var(--i))) translateY(calc(var(--taille) * -.41)); }
.pole { position: absolute; transform: translate(-50%, -50%) rotate(calc(-360deg / var(--n) * var(--i) - var(--rot, 0deg))); display: flex; flex-direction: column; align-items: center; gap: .4rem; width: clamp(96px, 15vw, 150px); text-align: center; font-size: clamp(.7rem, 1.1vw, .86rem); font-weight: 650; line-height: 1.25; }
.pole .ic { width: clamp(42px, 5vw, 58px); height: clamp(42px, 5vw, 58px); padding: clamp(10px, 1.2vw, 14px); border-radius: 50%; background: var(--noir-3); border: 1px solid var(--ligne-2); color: var(--orange); transition: all .35s var(--ease); }
.pole:hover .ic { background: var(--orange); color: #fff; box-shadow: var(--orange-glow); }

/* ---------- Partenaires (rubans de logos) ---------- */
.partenaires { padding-inline: 0; max-width: none; }
.partenaires > .sec-num, .partenaires > .sec-tete, .partenaires > .partenaires-lien { max-width: var(--max); margin-inline: auto; padding-inline: var(--marge); box-sizing: content-box; }
.ruban-logos { overflow: hidden; padding: 10px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ruban-piste { display: flex; gap: 14px; width: max-content; animation: defile 60s linear infinite; }
.ruban-inverse .ruban-piste { animation-direction: reverse; animation-duration: 45s; }
.ruban-logos:hover .ruban-piste { animation-play-state: paused; }
.ruban-piste li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: clamp(150px, 16vw, 210px); height: clamp(104px, 10vw, 130px); padding: 18px; border: 1px solid var(--ligne); border-radius: var(--r); background: linear-gradient(160deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)); transition: border-color .3s, background .3s; }
.ruban-piste li:hover { border-color: rgba(234, 71, 26, .6); background: var(--orange-l); }
.ruban-piste li > span { display: none; }
.logo { height: calc(var(--h, 30px) * var(--k, 1)); width: auto; max-width: 100%; object-fit: contain; opacity: .92; }
.logo-compose { display: inline-flex; align-items: center; gap: 8px; height: 34px; }
.logo-compose img { height: 28px; width: auto; }
.logo-compose b { font-family: var(--f-titre); font-size: .8rem; font-weight: 600; line-height: 1.05; letter-spacing: -.01em; max-width: 6.5em; }
.logo-texte { font-family: var(--f-titre); font-weight: 700; font-size: 1.6rem; letter-spacing: -.03em; }
.partenaires-lien { margin-top: 2.5rem; }

/* ---------- Facturation (teaser accueil) ---------- */
.fact-teaser { position: relative; background: radial-gradient(70% 90% at 100% 50%, rgba(234, 71, 26, .2), transparent 60%), var(--noir-2); border-block: 1px solid var(--ligne); overflow: hidden; }
.fact-teaser-in { max-width: calc(var(--max) + var(--marge) * 2); margin: 0 auto; padding: clamp(72px, 10vw, 140px) var(--marge); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.fact-teaser .paras { margin: 1.6rem 0 2rem; }
.fact-teaser .titre-xl { font-size: clamp(2rem, 4.2vw, 3.8rem); }
.fact-teaser-dates { display: grid; gap: 1rem; }
.fd { padding: 1.5rem 1.6rem; border: 1px solid var(--ligne-2); border-radius: var(--r); background: rgba(10, 10, 11, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.fd-date { font-family: var(--f-titre); font-size: 1.3rem; font-weight: 600; color: var(--orange); margin: 0 0 .3rem; }
.fd-texte { margin: 0 0 1rem; color: var(--gris-2); font-size: .95rem; }
.fd-etat { display: inline-flex; align-items: center; gap: .5em; margin: 0; font-family: var(--f-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: #7bd88f; }
.fd-etat::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #7bd88f; box-shadow: 0 0 12px #7bd88f; }
.fd-passee { opacity: .75; }
.compte-gros { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.compte-gros span { display: flex; flex-direction: column; align-items: center; padding: .7rem .3rem; border-radius: 12px; background: var(--noir-3); border: 1px solid var(--ligne); }
.compte-gros b { font-family: var(--f-titre); font-size: clamp(1.4rem, 3vw, 2.3rem); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.compte-gros small { font-family: var(--f-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .12em; color: var(--gris); }
@media (max-width: 860px) { .fact-teaser-in { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq .titre-xl { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.faq-liste { border-top: 1px solid var(--ligne); }
.faq-item { border-bottom: 1px solid var(--ligne); }
.faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 0; cursor: pointer; font-family: var(--f-titre); font-size: clamp(1rem, 1.6vw, 1.3rem); font-weight: 500; letter-spacing: -.015em; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ligne-2); transition: all .35s var(--ease); }
.faq-item summary i::before, .faq-item summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform .35s var(--ease); }
.faq-item summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] summary i { background: var(--orange); border-color: var(--orange); }
.faq-item[open] summary i::after { transform: translate(-50%, -50%) rotate(0); }
.faq-item summary:hover { color: var(--orange-2); }
.faq-r { padding: 0 3.5rem 1.6rem 0; color: var(--gris-2); max-width: 80ch; }
.faq-item::details-content { block-size: 0; overflow: hidden; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; }
.faq-item[open]::details-content { block-size: auto; }
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }

/* ---------- Contact ---------- */
.contact { position: relative; background: linear-gradient(var(--noir), var(--noir-2)); border-top: 1px solid var(--ligne); }
.contact-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); }
.contact .titre-xl { margin-bottom: 2.5rem; }
.agences { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.6rem; }
.agence { position: relative; padding: 1.4rem 1.4rem 1.2rem; border-radius: var(--r); border: 1px solid var(--ligne); background: var(--noir-3); overflow: hidden; }
.agence::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--orange); box-shadow: var(--orange-glow); }
.agence-num { font-family: var(--f-mono); font-size: .72rem; color: var(--orange); margin: 0 0 .4rem; }
.agence h3 { font-family: var(--f-titre); font-size: 1.25rem; margin-bottom: .6rem; }
.agence p { color: var(--gris-2); font-size: .95rem; }
.agence .lien-fleche { font-size: .88rem; }
.contact-direct { display: grid; gap: .5rem; }
.contact-gros { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; font-family: var(--f-titre); font-size: clamp(1rem, 1.9vw, 1.45rem); font-weight: 500; letter-spacing: -.02em; width: fit-content; }
.contact-gros .ic { color: var(--orange); }
.formulaire { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-content: start; padding: clamp(1.4rem, 3vw, 2.4rem); border-radius: calc(var(--r) + 6px); border: 1px solid var(--ligne); background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); }
.champ { position: relative; }
.champ-large, .choix, .accord, .formulaire .btn, .formulaire-etat, .champ-select { grid-column: 1 / -1; }
.champ input, .champ textarea, .champ select { width: 100%; padding: 1.35rem 1rem .55rem; border-radius: 12px; border: 1px solid var(--ligne-2); background: rgba(10, 10, 11, .6); color: var(--blanc); font: inherit; font-size: 1rem; transition: border-color .25s, box-shadow .25s; }
.champ select { padding: 1rem; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--orange) 50%), linear-gradient(135deg, var(--orange) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.champ textarea { resize: vertical; min-height: 140px; }
.champ label { position: absolute; left: 1rem; top: 1rem; color: var(--gris); pointer-events: none; transition: all .2s var(--ease); }
.champ input:focus, .champ textarea:focus, .champ select:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px var(--orange-l); }
.champ input:focus + label, .champ input:not(:placeholder-shown) + label, .champ textarea:focus + label, .champ textarea:not(:placeholder-shown) + label { top: .4rem; font-size: .72rem; color: var(--orange-2); letter-spacing: .02em; }
.choix { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.choix legend { float: left; margin-right: .6rem; font-size: .9rem; color: var(--gris); }
.choix label { cursor: pointer; }
.choix input { position: absolute; opacity: 0; }
.choix span { display: inline-block; padding: .5em 1.1em; border-radius: 999px; border: 1px solid var(--ligne-2); font-size: .9rem; font-weight: 600; transition: all .25s; }
.choix input:checked + span { background: var(--orange); border-color: var(--orange); color: #fff; }
.choix input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }
.accord { display: flex; gap: .7rem; font-size: .85rem; color: var(--gris); line-height: 1.45; cursor: pointer; }
.accord input { margin-top: .2em; accent-color: var(--orange); width: 18px; height: 18px; flex: none; }
.formulaire .btn { justify-self: start; }
.formulaire-etat { margin: 0; font-size: .95rem; min-height: 1.4em; }
.formulaire-etat.ok { color: #7bd88f; } .formulaire-etat.erreur { color: #ff8a6a; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 960px) { .contact-in { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .formulaire, .agences { grid-template-columns: 1fr; } }

/* ---------- Pied de page ---------- */
.pied { position: relative; padding: clamp(60px, 9vw, 120px) var(--marge) 28px; background: #050506; border-top: 1px solid var(--ligne); overflow: hidden; }
.pied::before { content: ''; position: absolute; left: 50%; bottom: -40%; width: 120%; height: 80%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(234, 71, 26, .18), transparent); pointer-events: none; }
.pied > * { position: relative; max-width: var(--max); margin-inline: auto; }
.pied-haut { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem; padding-bottom: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--ligne); }
.pied-logo { display: block; width: min(560px, 80vw); }
.pied-logo .logo-vs { width: 100%; height: auto; }
.pied-accroche { margin: 0; color: var(--gris); font-family: var(--f-mono); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; max-width: 30ch; }
.pied-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; padding: clamp(2.5rem, 5vw, 4rem) 0; }
.pied-titre { font-family: var(--f-mono); font-size: .78rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); margin-bottom: 1rem; }
.pied-col p, .pied-col li { color: var(--gris-2); font-size: .95rem; }
.pied-col a { text-decoration: none; }
.pied-col li { margin-bottom: .3rem; }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; padding-top: 1.4rem; border-top: 1px solid var(--ligne); font-size: .82rem; color: var(--gris); }
.pied-bas p { margin: 0; }
.pied-bas a { color: var(--gris-2); }
@media (max-width: 860px) { .pied-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .pied-grille { grid-template-columns: 1fr; } }

/* =====================================================================
   PAGES DE SERVICE
   ===================================================================== */
.ph { position: relative; min-height: 100svh; padding: calc(var(--entete-h) + clamp(40px, 9vh, 110px)) var(--marge) clamp(40px, 7vh, 80px); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; overflow: hidden; isolation: isolate; max-width: none; }
.ph > :not(.rubans):not(.ph-descendre) { position: relative; z-index: 1; }
.ph-court { min-height: 0; display: block; padding-bottom: clamp(40px, 6vw, 70px); }
.ph-in { max-width: 920px; }
.fil { display: flex; gap: .6rem; align-items: center; margin-bottom: 2rem; font-family: var(--f-mono); font-size: .75rem; letter-spacing: .08em; color: var(--gris); }
.fil a { text-decoration: none; } .fil a:hover { color: var(--orange-2); }
.fil [aria-current] { color: var(--blanc); }
.titre-page { font-family: var(--f-titre); font-size: clamp(1.9rem, 4.3vw, 4.4rem); font-weight: 650; letter-spacing: -.045em; line-height: .98; margin-bottom: 2rem; }
.titre-page .l1, .titre-page .l2 { display: block; }
.titre-page .l2 { color: var(--orange); font-weight: 400; font-size: .62em; letter-spacing: -.03em; margin-top: .3em; }
.ph-intro p:first-child { font-size: clamp(1.08rem, 1.3vw, 1.25rem); color: var(--blanc); }
.ph-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.ph-chips { align-self: end; }
.chips-titre { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.chips { display: grid; gap: .7rem; counter-reset: c; }
.chip { position: relative; padding: 1.05rem 1.2rem 1.05rem 3.4rem; border-radius: 14px; border: 1px solid var(--ligne); background: rgba(16, 16, 18, .66); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: border-color .3s, transform .4s var(--ease); }
.chip:hover { border-color: rgba(234, 71, 26, .55); transform: translateX(-6px); }
.chip-num { position: absolute; left: 1.1rem; top: 1.15rem; font-family: var(--f-mono); font-size: .72rem; color: var(--orange); }
.chip h2 { font-family: var(--f-texte); font-size: 1rem; font-weight: 750; letter-spacing: 0; margin-bottom: .2rem; }
.chip p { margin: 0; font-size: .88rem; color: var(--gris); line-height: 1.45; }
.ph-descendre { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--ligne-2); color: var(--gris-2); animation: rebond 2.4s var(--ease) infinite; }
@keyframes rebond { 50% { transform: translate(-50%, 6px); } }
@media (max-width: 1000px) { .ph { grid-template-columns: 1fr; min-height: 0; } .ph-descendre { display: none; } }

.bloc-tete { max-width: 860px; margin-bottom: clamp(2rem, 4vw, 3.4rem); }
.bloc-tete .titre-l, .bloc-tete .titre-m { margin-bottom: 1.4rem; }
.bloc { border-top: 1px solid var(--ligne); }
.bloc + .bloc { border-top: 1px solid var(--ligne); }

/* Cartes */
.cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; perspective: 1200px; }
.cartes-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.carte { position: relative; padding: clamp(1.4rem, 2.5vw, 2.2rem); border-radius: var(--r); border: 1px solid var(--ligne); background: linear-gradient(165deg, var(--noir-3), var(--noir-2)); overflow: hidden; transform-style: preserve-3d; transition: border-color .35s; min-height: 240px; display: flex; flex-direction: column; }
.carte::after { content: ''; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(234, 71, 26, .22), transparent 45%); opacity: 0; transition: opacity .35s; pointer-events: none; }
.carte:hover { border-color: rgba(234, 71, 26, .45); }
.carte:hover::after { opacity: 1; }
.carte-num { font-family: var(--f-mono); font-size: .72rem; color: var(--gris); margin-bottom: auto; padding-bottom: 2rem; }
.carte-k { font-family: var(--f-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; color: var(--orange); margin: 0 0 .5rem; }
.carte-t { font-family: var(--f-titre); font-size: clamp(1.1rem, 1.5vw, 1.35rem); margin-bottom: .8rem; }
.carte-d { margin: 0; color: var(--gris-2); font-size: .95rem; }
@media (max-width: 960px) { .cartes, .cartes-6 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .cartes, .cartes-6 { grid-template-columns: 1fr; } .carte { min-height: 0; } }

/* Pack (4 éléments avec icône) */
.pack { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--ligne); border-radius: var(--r); overflow: hidden; }
.pack-item { padding: clamp(1.4rem, 2.5vw, 2.2rem); border-right: 1px solid var(--ligne); transition: background .35s; }
.pack-item:last-child { border-right: 0; }
.pack-item:hover { background: var(--orange-l); }
.pack-ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: var(--orange); color: #fff; margin-bottom: 1.4rem; box-shadow: 0 12px 30px -10px rgba(234, 71, 26, .9); }
.pack-ic .ic { width: 26px; height: 26px; }
.pack-item h3 { font-family: var(--f-titre); font-size: 1.1rem; margin-bottom: .6rem; }
.pack-item p { margin: 0; color: var(--gris-2); font-size: .94rem; }
@media (max-width: 960px) { .pack { grid-template-columns: 1fr 1fr; } .pack-item:nth-child(2) { border-right: 0; } .pack-item:nth-child(-n+2) { border-bottom: 1px solid var(--ligne); } }
@media (max-width: 560px) { .pack { grid-template-columns: 1fr; } .pack-item { border-right: 0; border-bottom: 1px solid var(--ligne); } }

/* Listes */
.listes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(1.5rem, 4vw, 4rem); }
.liste-titre { font-family: var(--f-texte); font-size: 1.05rem; font-weight: 750; letter-spacing: 0; margin-bottom: 1.1rem; color: var(--blanc); line-height: 1.4; }
.puces li { position: relative; padding: .7rem 0 .7rem 2rem; border-bottom: 1px solid var(--ligne); color: var(--gris-2); }
.puces li::before { content: ''; position: absolute; left: 0; top: calc(.7rem + .8em); width: 14px; height: 2px; background: var(--orange); transition: width .3s var(--ease); }
.puces li:hover::before { width: 22px; }
.puces li:first-letter { text-transform: uppercase; }
.puces-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.puces-tags li { padding: .4em .9em; border: 1px solid var(--ligne-2); border-radius: 999px; font-size: .85rem; }
.puces-tags li::before { display: none; }
.puces-coches li::before { width: 16px; height: 16px; top: .95rem; border-radius: 50%; background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 10px no-repeat; }
.bloc-fin { margin-top: 2.5rem; }
.bloc-fin p { font-size: 1.1rem; color: var(--blanc); }

/* Bloc clair (rythme) */
.clair { background: var(--papier); color: var(--encre); max-width: none; border-radius: 0; }
.clair > * { max-width: var(--max); margin-inline: auto; }
.clair .paras p, .clair .puces li { color: #3d3d44; }
.clair .liste-titre { color: var(--encre); }
.clair .puces li { border-color: rgba(0, 0, 0, .1); }
.listes-cartes .liste { padding: clamp(1.4rem, 3vw, 2.4rem); border-radius: var(--r); background: #fff; box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .35); }
.publics-logos { display: flex; gap: 2rem; align-items: center; margin-top: 2.5rem; }
.clair .logo { filter: invert(1); }
.clair .logo-ebp { filter: invert(1) brightness(.2); }

/* Étapes */
.etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; position: relative; }
.etapes::before { content: ''; position: absolute; left: 28px; right: 28px; top: 28px; height: 1px; background: linear-gradient(90deg, var(--orange), var(--ligne-2)); }
.etape { position: relative; padding-top: 5rem; }
.etape-num { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--noir); border: 1.5px solid var(--orange); font-family: var(--f-titre); font-weight: 600; color: var(--orange); box-shadow: 0 0 0 6px var(--noir); }
.etape h3 { font-family: var(--f-titre); font-size: 1.15rem; margin-bottom: .6rem; }
.etape p { color: var(--gris-2); font-size: .95rem; margin: 0; }
@media (max-width: 860px) { .etapes { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; } .etapes::before { display: none; } }
@media (max-width: 520px) { .etapes { grid-template-columns: 1fr; } }

/* Cycle 3 ans */
.bloc-cycle { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.bloc-cycle .listes { grid-column: 1 / -1; }
.cycle-visuel { position: relative; aspect-ratio: 1; max-width: 420px; width: 100%; justify-self: center; }
.cycle-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.cycle-fond { fill: none; stroke: var(--ligne-2); stroke-width: 1; stroke-dasharray: 1.5 4; }
.cycle-trait { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: var(--cycle, 1); filter: drop-shadow(0 0 6px rgba(234, 71, 26, .8)); }
.cycle-chiffre { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; margin: 0; }
.cycle-chiffre b { font-family: var(--f-titre); font-size: clamp(5rem, 14vw, 11rem); font-weight: 700; line-height: .9; letter-spacing: -.06em; }
.cycle-chiffre span { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .3em; color: var(--orange); }
@media (max-width: 860px) { .bloc-cycle { grid-template-columns: 1fr; } .cycle-visuel { max-width: 280px; } }

/* Alliance du Numérique */
.alliance { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.alliance-encart { position: relative; padding: clamp(1.6rem, 3vw, 2.6rem); border-radius: calc(var(--r) + 4px); background: linear-gradient(150deg, var(--orange), #b32c0a); color: #fff; overflow: hidden; }
.alliance-encart::after { content: ''; position: absolute; right: -30%; top: -40%; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .25), transparent); }
.alliance-chiffre { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 1rem; }
.alliance-chiffre b { font-family: var(--f-titre); font-size: clamp(4rem, 9vw, 7rem); line-height: .9; letter-spacing: -.05em; }
.alliance-chiffre span { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; }
.alliance-encart h3 { font-family: var(--f-titre); font-size: 1.3rem; margin-bottom: .8rem; }
.alliance-encart p { color: rgba(255, 255, 255, .92); }
.alliance-badge { display: inline-flex; align-items: center; gap: .6rem; margin: 1rem 0 0; padding: .6rem 1rem; border-radius: 999px; background: rgba(0, 0, 0, .25); font-weight: 700; font-size: .9rem; }
.alliance-badge small { font-family: var(--f-mono); font-weight: 400; font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; opacity: .85; }
.alliance .listes { grid-template-columns: 1fr; gap: 2rem; }
@media (max-width: 860px) { .alliance { grid-template-columns: 1fr; } }

/* Marques */
.marques { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--ligne); border: 1px solid var(--ligne); border-radius: var(--r); overflow: hidden; margin-bottom: 2.5rem; }
.marques li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; min-height: 150px; background: var(--noir); padding: 1.2rem; transition: background .35s; }
.marques li:hover { background: var(--noir-3); }
.marques li > span { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.marques { --k: 1.35; }
.marques-stock { background: var(--orange) !important; color: #fff; flex-direction: row !important; text-align: left; gap: 1rem !important; }
.marques-stock .ic { width: 40px; height: 40px; }
.marques-stock strong { display: block; font-family: var(--f-titre); font-size: 1rem; text-transform: uppercase; }
.marques-stock span { font-size: .88rem; opacity: .92; }
.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.point { display: flex; gap: 1rem; }
.point .ic { width: 30px; height: 30px; color: var(--orange); }
.point h3 { font-family: var(--f-texte); font-size: 1.02rem; font-weight: 750; letter-spacing: 0; text-transform: uppercase; margin-bottom: .3rem; }
.point p { margin: 0; color: var(--gris); font-size: .92rem; }
@media (max-width: 860px) { .marques { grid-template-columns: repeat(2, minmax(0, 1fr)); } .marques li { min-height: 120px; } .points { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .marques { --k: 1; } .marques-stock { flex-direction: column !important; text-align: center; } }

/* Bandeau d'icônes */
.bandeau { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-block: 1px solid var(--ligne); }
.bandeau li { display: flex; flex-direction: column; gap: .9rem; padding: 1.6rem 1.2rem; border-right: 1px solid var(--ligne); font-family: var(--f-mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-2); line-height: 1.45; }
.bandeau li:last-child { border-right: 0; }
.bandeau .ic { width: 30px; height: 30px; color: var(--orange); }
.bloc-bandeau { padding-block: clamp(48px, 7vw, 90px); }

/* Solutions logicielles */
.solutions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.solution { padding: clamp(1.6rem, 3vw, 2.6rem); border-radius: calc(var(--r) + 4px); border: 1px solid var(--ligne); background: linear-gradient(170deg, var(--noir-3), var(--noir)); display: flex; flex-direction: column; gap: 1rem; scroll-margin-top: calc(var(--entete-h) + 20px); }
.solution-tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--ligne); }
.solution-tete { --k: 1.1; }
.solution-k { margin: 0; font-family: var(--f-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--orange); text-align: right; }
.solution-t { font-family: var(--f-titre); font-size: clamp(1.2rem, 1.8vw, 1.55rem); }
.solution-intro { margin: 0; color: var(--gris-2); }
.solution-fin { margin: auto 0 0; padding-top: 1rem; color: var(--gris); font-size: .92rem; border-top: 1px dashed var(--ligne-2); }
@media (max-width: 860px) { .solutions { grid-template-columns: 1fr; } }

/* Mur de logos (page Logiciels) */
.mur-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; perspective: 1000px; }
.mur-logos li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; min-height: 170px; padding: 1.4rem; border-radius: var(--r); border: 1px solid var(--ligne); background: radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, .06), transparent 60%), var(--noir-2); text-align: center; transform-style: preserve-3d; transition: border-color .3s; }
.mur-logos li:hover { border-color: rgba(234, 71, 26, .55); }
.mur-logos { --k: 1.2; }
.mur-logos span { font-weight: 700; font-size: .92rem; }
.mur-logos small { display: block; font-family: var(--f-mono); font-weight: 400; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); margin-top: .2rem; }

/* Partenaire 3FD */
.partenaire { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: clamp(1.6rem, 4vw, 3.5rem); border-radius: calc(var(--r) + 8px); background: radial-gradient(80% 120% at 0% 50%, rgba(234, 71, 26, .2), transparent 60%), var(--noir-2); border: 1px solid var(--ligne); }
.partenaire-logo { display: grid; place-items: center; gap: .6rem; aspect-ratio: 1; max-width: 360px; width: 100%; justify-self: center; border-radius: 50%; background: #fff; padding: 18%; box-shadow: 0 0 0 10px rgba(255, 255, 255, .05), 0 0 80px -10px rgba(234, 71, 26, .6); }
.partenaire-logo img { width: 100%; height: auto; }
.partenaire-logo p { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.6rem, 3vw, 2.4rem); color: #1c4577; line-height: 1; text-align: center; }
.partenaire-logo p span { display: block; font-size: .42em; letter-spacing: .16em; text-transform: uppercase; margin-top: .3em; }
.partenaire-texte .titre-l { margin-bottom: 1.2rem; }
.partenaire-encart { padding: 1rem 1.2rem; border-left: 3px solid var(--orange); background: rgba(255, 255, 255, .03); color: var(--gris-2); border-radius: 0 12px 12px 0; margin: 1.4rem 0 2rem; }
@media (max-width: 860px) { .partenaire { grid-template-columns: 1fr; } .partenaire-logo { max-width: 240px; } }

/* Flux IA */
.flux { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; counter-reset: f; }
.flux li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2rem 1rem; text-align: center; border-radius: var(--r); border: 1px solid var(--ligne); background: var(--noir-2); font-weight: 700; }
.flux li:not(:last-child)::after { content: ''; position: absolute; right: -1rem; top: 50%; width: 1rem; height: 2px; background: var(--orange); box-shadow: var(--orange-glow); }
.flux-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; border: 1px solid rgba(234, 71, 26, .5); color: var(--orange); background: var(--orange-l); }
.flux-ic .ic { width: 28px; height: 28px; }
@media (max-width: 760px) { .flux { grid-template-columns: 1fr 1fr; } .flux li::after { display: none; } }

/* Slogan */
.bloc-slogan { text-align: center; }
.slogan { display: inline-flex; flex-direction: column; align-items: center; gap: 1.4rem; margin: 0; }
.slogan > .ic { width: 64px; height: 64px; padding: 14px; border-radius: 50%; background: var(--orange); color: #fff; box-shadow: var(--orange-glow); }
.slogan > span { font-family: var(--f-titre); font-size: clamp(1.6rem, 4.4vw, 3.6rem); font-weight: 650; text-transform: uppercase; letter-spacing: -.04em; line-height: 1.05; }
.slogan-1 { display: block; color: var(--orange); }
.slogan-2 { display: block; }

/* ---------- Visuels propres aux pages ---------- */
.visuel { padding-block: clamp(40px, 6vw, 80px); }
/* Matériel : 5 atouts */
.atouts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--ligne); border-radius: var(--r); background: var(--noir-2); }
.atout { padding: 1.8rem 1.4rem; border-right: 1px solid var(--ligne); text-align: center; display: flex; flex-direction: column; align-items: center; }
.atout:last-child { border-right: 0; }
.atout-ic { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 1.1rem; border-radius: 16px; border: 1.5px solid var(--orange); color: var(--orange); box-shadow: inset 0 0 20px rgba(234, 71, 26, .2); }
.atout-ic .ic { width: 30px; height: 30px; }
.atout h2 { font-family: var(--f-texte); font-size: .95rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; margin-bottom: .5rem; }
.atout p { margin: 0; font-size: .88rem; color: var(--gris); line-height: 1.45; }
@media (max-width: 1000px) { .atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .atout { border-bottom: 1px solid var(--ligne); } .atout:nth-child(2n) { border-right: 0; } .atout:last-child { grid-column: 1 / -1; border-bottom: 0; } }

/* Maintenance : 7 solutions */
.solutions-maint { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .8rem; }
.sm { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.6rem .9rem 1.4rem; border-radius: 18px; border: 1px solid var(--ligne); background: linear-gradient(var(--noir-3), var(--noir)); position: relative; overflow: hidden; transition: transform .45s var(--ease), border-color .3s; }
.sm::after { content: ''; position: absolute; left: 15%; right: 15%; bottom: 0; height: 2px; background: var(--orange); box-shadow: 0 0 20px 2px rgba(234, 71, 26, .7); }
.sm:hover { transform: translateY(-8px); border-color: rgba(234, 71, 26, .5); }
.sm-ic { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--orange-2), var(--orange) 60%, #a52a08); color: #fff; margin-bottom: 1rem; box-shadow: 0 10px 30px -8px rgba(234, 71, 26, .9); }
.sm-ic .ic { width: 28px; height: 28px; }
.sm h3 { font-family: var(--f-texte); font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; line-height: 1.25; }
.sm i { display: block; width: 28px; height: 2px; background: var(--orange); margin: .8rem 0; }
.sm p { margin: 0; font-size: .82rem; color: var(--gris); line-height: 1.4; }
.maint-pied { display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: center; margin-top: 1.4rem; padding: 1.4rem 1.8rem; border-radius: var(--r); border: 1px solid var(--ligne); background: var(--noir-2); }
.maint-pied-item { display: flex; align-items: center; gap: 1rem; }
.maint-pied-item > .ic { width: 42px; height: 42px; color: var(--orange); }
.maint-pied-item strong { display: block; text-transform: uppercase; font-size: .9rem; }
.maint-pied-item span { font-size: .85rem; color: var(--gris); }
.maint-marques { display: flex; justify-content: space-evenly; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.maint-marques { --k: .95; }
@media (max-width: 1200px) { .solutions-maint { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .solutions-maint { grid-template-columns: 1fr 1fr; } .maint-pied { grid-template-columns: 1fr; } }

/* Formation : écran */
.visuel-formation { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.visuel-formation .chapo { margin: 1.2rem 0 2rem; }
.formation-liste { display: grid; gap: 1.1rem; }
.formation-liste li { display: flex; gap: 1rem; align-items: flex-start; }
.formation-liste .ic { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--orange-l); color: var(--orange); }
.formation-liste strong { display: block; font-size: 1.02rem; }
.formation-liste span { color: var(--gris); font-size: .92rem; }
.formation-ecran { position: relative; padding: 2rem; border-radius: 20px; background: linear-gradient(160deg, #f8f8f6, #e9e8e3); color: var(--encre); box-shadow: 0 0 0 10px #1b1b1f, 0 0 0 11px #333, 0 50px 90px -30px rgba(234, 71, 26, .45); transform: perspective(1200px) rotateY(-10deg) rotateX(4deg); transition: transform .8s var(--ease); }
.formation-ecran:hover { transform: perspective(1200px) rotateY(0) rotateX(0); }
.ecran-titre { font-family: var(--f-titre); font-size: 1.4rem; color: var(--orange); font-weight: 650; margin-bottom: 1.2rem; }
.ecran-liste li { display: flex; align-items: center; gap: .8rem; padding: .55rem 0; border-bottom: 1px solid rgba(0, 0, 0, .08); font-weight: 650; }
.ecran-liste li::before { content: ''; width: 18px; height: 18px; flex: none; border-radius: 5px; background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat; }
.ecran-logos { display: flex; gap: 1.4rem; align-items: center; margin-top: 1.6rem; }
.ecran-logos { --k: .8; } .ecran-logos .logo { filter: invert(1) brightness(.25); }
.formation-pied { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--ligne); border-radius: var(--r); }
.formation-pied li { display: flex; flex-direction: column; align-items: center; gap: .7rem; padding: 1.4rem; text-align: center; font-family: var(--f-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; border-right: 1px solid var(--ligne); }
.formation-pied li:last-child { border-right: 0; }
.formation-pied .ic { width: 36px; height: 36px; color: var(--orange); }
@media (max-width: 860px) { .visuel-formation { grid-template-columns: 1fr; } .formation-ecran { transform: none; } .formation-pied { grid-template-columns: 1fr 1fr; } .formation-pied li:nth-child(2) { border-right: 0; } .formation-pied li:nth-child(-n+2) { border-bottom: 1px solid var(--ligne); } }

/* Facturation */
.visuel-facturation { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 1rem; align-items: start; }
.fact-accroche { grid-column: 1 / -1; padding: clamp(1.6rem, 4vw, 3.4rem); border-radius: calc(var(--r) + 6px); background: #fff; color: var(--encre); position: relative; overflow: hidden; }
.fact-accroche::after { content: '€'; position: absolute; right: -2%; bottom: -30%; font-family: var(--f-titre); font-size: clamp(10rem, 28vw, 24rem); font-weight: 800; color: rgba(234, 71, 26, .1); line-height: 1; }
.fact-titre { font-family: var(--f-titre); font-size: clamp(1.8rem, 4.6vw, 4.2rem); font-weight: 700; text-transform: uppercase; letter-spacing: -.04em; line-height: 1; max-width: 16ch; position: relative; z-index: 1; }
.fact-sous { display: inline-block; margin: 1.4rem 0 0; padding: .5em 1em; background: var(--encre); color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; position: relative; z-index: 1; }
.fact-dates, .fact-objectifs { padding: clamp(1.4rem, 3vw, 2.4rem); border-radius: var(--r); border: 1px solid var(--ligne); background: var(--noir-2); }
.fact-dates .titre-m, .fact-objectifs .titre-m { margin-bottom: 1.4rem; text-transform: uppercase; }
.dates { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.date { padding: 1.4rem; border-radius: 14px; border: 1.5px solid var(--orange); position: relative; }
.date-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--noir); margin-bottom: 1rem; }
.date h3 { font-family: var(--f-titre); font-size: 1.15rem; color: var(--orange); text-transform: uppercase; margin-bottom: .5rem; }
.date p { font-size: .9rem; color: var(--gris-2); }
.date-etat { margin: .8rem 0 0 !important; font-family: var(--f-mono); font-size: .75rem !important; text-transform: uppercase; letter-spacing: .12em; color: #7bd88f !important; }
.date:not(.date-passee) .date-etat { color: var(--orange-2) !important; }
.date-passee { border-color: var(--ligne-2); }
.fact-objectifs { background: var(--noir-3); }
.fact-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--ligne); }
.fact-logos p { width: 100%; margin: 0; font-family: var(--f-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--gris); }
.fact-logos span { font-size: .85rem; color: var(--gris); }
@media (max-width: 960px) { .visuel-facturation { grid-template-columns: 1fr; } .dates { grid-template-columns: 1fr; } }

/* IA */
.visuel-ia { text-align: center; }
.ia-piliers { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.4rem; margin-bottom: 1.4rem; }
.ia-piliers li { font-family: var(--f-titre); font-size: clamp(1.1rem, 2.4vw, 1.9rem); font-weight: 500; letter-spacing: -.02em; }
.ia-piliers li:not(:last-child)::after { content: '•'; color: var(--orange); margin-left: 1.4rem; }
.ia-phrase { color: var(--gris-2); font-size: 1.1rem; margin-bottom: 2.6rem; }
.ia-outils { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; perspective: 1000px; margin-bottom: 2.6rem; }
.ia-outils li { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1.4rem; border-radius: var(--r); border: 1px solid var(--ligne-2); background: var(--noir-2); text-align: left; transform-style: preserve-3d; }
.ia-outils { --k: .95; }
.ia-outils strong { display: block; font-family: var(--f-titre); font-size: 1.15rem; font-weight: 600; }
.ia-outils span { font-size: .85rem; color: var(--gris); }
.ia-slogan { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .3em; font-size: clamp(.8rem, 1.4vw, 1.05rem); color: var(--gris-2); display: flex; align-items: center; gap: 1.4rem; }
.ia-slogan::before, .ia-slogan::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--orange)); }
.ia-slogan::after { transform: scaleX(-1); }
@media (max-width: 860px) { .ia-outils { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ia-outils li { flex-direction: column; text-align: center; padding: 1.2rem .8rem; } }

/* CTA de page */
.cta-page { text-align: center; position: relative; }
.cta-in { position: relative; padding: clamp(2.4rem, 6vw, 5.5rem) clamp(1.4rem, 5vw, 5rem); border-radius: calc(var(--r) + 12px); overflow: hidden; background: radial-gradient(70% 120% at 50% 120%, rgba(234, 71, 26, .55), transparent 70%), var(--noir-2); border: 1px solid var(--ligne); }
.cta-marque { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .2em; font-size: .75rem; color: var(--orange); }
.cta-in .titre-xl { max-width: 20ch; margin: 0 auto 1.4rem; font-size: clamp(1.8rem, 4.4vw, 3.8rem); }
.cta-texte { max-width: 62ch; margin: 0 auto; }
.cta-texte p { margin-inline: auto; }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 2.2rem; }
.cta-zones { margin: 1.6rem 0 0; font-family: var(--f-mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }

/* Pages de texte */
.texte-legal { max-width: 860px; padding-top: 20px; }
.texte-legal h2 { font-family: var(--f-titre); font-size: 1.3rem; margin: 2.6rem 0 1rem; }
.texte-legal p, .texte-legal li { color: var(--gris-2); }
.a-completer { background: #ffd54a; color: #111; padding: 0 .3em; border-radius: 4px; font-weight: 700; }

/* ---------- Pub : badge à gauche sous le menu, qui ouvre les offres ---------- */
.pub-badge { position: fixed; z-index: 44; top: calc(var(--entete-h) + 12px); left: var(--marge); display: inline-flex; align-items: center; gap: .6em; padding: .62em 1.05em .62em .85em; border: 0; border-radius: 999px; cursor: pointer; overflow: hidden; isolation: isolate;
  font-family: var(--f-titre); font-size: .74rem; font-weight: 600; letter-spacing: .01em; color: #fff; text-transform: uppercase;
  background: linear-gradient(120deg, #ff7a3d, var(--orange) 45%, #c2340e); box-shadow: 0 8px 26px -6px rgba(234, 71, 26, .9), inset 0 1px 0 rgba(255, 255, 255, .3);
  opacity: 0; transform: translateX(-30px); transition: opacity .6s var(--ease), transform .6s var(--ease), top .5s var(--ease); animation: badge-pouls 2.6s ease-in-out infinite; }
.pub-badge.visible { opacity: var(--estompe, 1); transform: translateY(calc((1 - var(--estompe, 1)) * -10px)); transition: opacity .25s linear, transform .25s linear, top .5s var(--ease); }
.pub-badge.visible.replie { visibility: hidden; pointer-events: none; animation-play-state: paused; }
.pub-badge::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 64%); transform: translateX(-120%); animation: badge-reflet 3.4s ease-in-out infinite 1s; }
.pub-badge svg { width: 1.05em; height: 1.05em; transition: transform .35s var(--ease); }
.pub-badge:hover svg { transform: translate(2px, -2px) scale(1.15); }
.pub-badge:hover { filter: brightness(1.08); }
.pub-badge-nb { display: grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .35em; border-radius: 999px; background: #fff; color: var(--orange); font-size: .9em; }
.pub-badge-point { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #fff; flex: none; }
.pub-badge-point::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #fff; animation: badge-onde 1.6s ease-out infinite; }
.entete.cache ~ .pub-badge { top: 14px; }
body.menu-ouvert .pub-badge { opacity: 0; pointer-events: none; }
@keyframes badge-pouls { 50% { box-shadow: 0 10px 34px -4px rgba(234, 71, 26, 1), inset 0 1px 0 rgba(255, 255, 255, .3); } }
@keyframes badge-reflet { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@keyframes badge-onde { from { opacity: .9; transform: scale(.5); } to { opacity: 0; transform: scale(1.6); } }
@media (max-width: 640px) { .pub-badge { font-size: .64rem; padding: .55em .85em .55em .7em; } }

/* ---------- Pub : la fenêtre (une ou plusieurs offres) ---------- */
.pub { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; }
.pub-fond { position: absolute; inset: 0; background: rgba(0, 0, 4, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .4s; }
.pub-boite { position: relative; width: min(620px, 50vw); opacity: 0; transform: translateY(24px) scale(.96); transition: opacity .45s var(--ease), transform .55s var(--ease); }
.pub.ouverte .pub-fond { opacity: 1; }
.pub.ouverte .pub-boite { opacity: 1; transform: none; }
.pub-cadre { overflow: hidden; border-radius: 18px; box-shadow: 0 30px 90px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08); touch-action: pan-y; }
.pub-piste { display: flex; transition: transform .6s var(--ease); }
.pub-diapo { flex: 0 0 100%; margin: 0; display: grid; place-items: center; background: #000; }
.pub-diapo img { width: 100%; height: auto; display: block; user-select: none; -webkit-user-drag: none; }
.pub-diapo a { display: block; width: 100%; }
.pub-fermer { position: absolute; z-index: 2; top: -14px; right: -14px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: #fff; color: var(--noir); display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .4); font-size: 0; transition: transform .3s var(--ease), background .3s; }
.pub-fermer::before, .pub-fermer::after { content: ''; position: absolute; width: 16px; height: 2px; background: currentColor; transform: rotate(45deg); }
.pub-fermer::after { transform: rotate(-45deg); }
.pub-fermer:hover { transform: rotate(90deg); background: var(--orange); color: #fff; }
.pub-fleche { position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(10, 10, 11, .65); color: #fff; display: grid; place-items: center; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .3s, transform .3s var(--ease); }
.pub-fleche svg { width: 22px; height: 22px; }
.pub-fleche:hover { background: var(--orange); border-color: var(--orange); }
.pub-prec { left: -66px; } .pub-suiv { right: -66px; }
.pub-prec:hover { transform: translateX(-3px); } .pub-suiv:hover { transform: translateX(3px); }
.pub-points { position: absolute; left: 0; right: 0; bottom: -34px; display: flex; justify-content: center; gap: 8px; }
.pub-points button { width: 9px; height: 9px; padding: 0; border-radius: 99px; border: 0; background: rgba(255, 255, 255, .35); cursor: pointer; transition: width .35s var(--ease), background .3s; }
.pub-points button[aria-current] { width: 26px; background: var(--orange); }
@media (max-width: 900px) { .pub-boite { width: 88vw; } .pub-prec { left: 8px; } .pub-suiv { right: 8px; } .pub-fleche { width: 40px; height: 40px; margin-top: -20px; } .pub-cadre { border-radius: 12px; } }

/* ---------- Apparitions au défilement ---------- */
.js:not(.statique) [data-apparait] { opacity: 0; transform: translateY(36px); }
.js .mots .mot { display: inline-block; overflow: clip; overflow-clip-margin: .12em; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.js:not(.statique) .mots .mot > span { display: inline-block; transform: translateY(105%); }

/* ---------- Mouvements réduits ---------- */
html.statique *, html.statique *::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js [data-apparait] { opacity: 1; transform: none; }
  .js .mots .mot > span { transform: none; }
  .defilant-piste, .ruban-piste { animation: none; flex-wrap: wrap; width: auto; }
  .frise-trait, .cycle-trait { stroke-dashoffset: 0; }
}