/* ============================================================
   MAQUETTE V2 : « éditorial technique »
   Principes : angles vifs + une coupe en biais (l'angle du A), capsules réservées
   à l'interrupteur et aux boutons, filets fins, grands chiffres, photos réelles.
   Charte : Mona Sans (titres, corps), Comfortaa Bold (accents et sous-titres).
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --navy: #001A65; --navy-dark: #0b1a3d; --night: #060f2b; --blue: #0036BF;
  --cyan: #00CCFF; --cyan2: #01D6FD; --orange: #F47807; --orange2: #F2670D;
  --yellow: #FFDF26; --violet: #8230A5; --light: #E2F4F8; --white: #fff;
  --text: #2B313C; --gray: #55627f; --orange-ink: #b34700;
  --warm: linear-gradient(135deg, #FFC32B, #F2670D);
  --cold: linear-gradient(135deg, #01D6FD, #004ABF);
  --ld: rgba(255,255,255,.16);   /* filet sur fond sombre */
  --ll: rgba(0,26,101,.2);       /* filet sur fond clair */
  --cut: 30px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 76px;
}
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 8px); }
body { font-family: 'Mona Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--text); background: var(--white); overflow-x: hidden; line-height: 1.5; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; text-align: inherit; }
ul { list-style: none; }
::selection { background: var(--cyan); color: var(--navy); }
a:focus-visible, button:focus-visible, select:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 5%; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }

/* Fonds de section */
.dark { background: var(--night); color: #fff; }
.dark.navy { background: var(--navy); }
.paper { background: var(--light); color: var(--navy); }
.white { background: #fff; color: var(--navy); }
.grid-bg { background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 88px 88px; }
.sec { position: relative; padding: 120px 0; }

/* En-tête de section : numéro, intitulé, filet */
.sec-top { display: flex; align-items: center; gap: 18px; margin-bottom: 56px; font-size: 12px; font-weight: 800; letter-spacing: 2.2px; text-transform: uppercase; }
.sec-top .idx { color: var(--orange); font-variant-numeric: tabular-nums; }
.dark .sec-top .idx { color: #FFC32B; }
.sec-top .rule { flex: 1; height: 1px; background: currentColor; opacity: .22; }
.sec-top .tot { opacity: .55; font-variant-numeric: tabular-nums; }

/* Titres : sans très serré + accent en Comfortaa */
.display { font-size: clamp(38px, 5.6vw, 84px); font-weight: 800; line-height: .98; letter-spacing: -.035em; }
.display .acc { font-family: 'Comfortaa', 'Mona Sans', sans-serif; font-weight: 700; letter-spacing: -.04em; color: var(--blue); }
.dark .display .acc { color: var(--cyan); }
.display .o { color: var(--orange); }
.lead { font-family: 'Comfortaa', 'Mona Sans', sans-serif; font-weight: 700; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.65; color: var(--gray); max-width: 560px; }
.dark .lead { color: rgba(255,255,255,.78); }

/* Cadre à repères d'angle (viseur) */
.brk { position: relative; }
.brk::after { content: ''; position: absolute; inset: -12px; pointer-events: none; --c: var(--cyan); --l: 26px; --t: 2px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) top left / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) top right / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) bottom left / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) bottom right / var(--t) var(--l) no-repeat; }
.brk.warm::after { --c: #FFC32B; }

/* Coupe en biais (l'angle du A) */
.cut { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.cut-bl { clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }

/* Boutons : capsule (forme de l'interrupteur) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 30px; border-radius: 40px; font-weight: 800; font-size: 15px; text-decoration: none; border: 1.5px solid transparent; transition: transform .25s var(--ease), box-shadow .25s, background .2s, border-color .2s, color .2s; cursor: pointer; }
.btn:active { transform: scale(.97); }
.btn-cyan { background: var(--cyan); color: var(--navy-dark); }
.btn-cyan:hover { background: var(--cyan2); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,204,255,.35); }
.btn-warm { background: var(--warm); color: var(--navy-dark); }
.btn-warm:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(244,120,7,.42); }
.btn-ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.btn-ghost:hover { border-color: #fff; transform: translateY(-2px); }
.btn-ink { color: var(--navy); border-color: var(--navy); }
.btn-ink:hover { background: var(--navy); color: #fff; transform: translateY(-2px); }
.btn.sm { min-height: 44px; padding: 10px 22px; font-size: 13px; }
.arr { display: inline-block; transition: transform .25s var(--ease); }
a:hover > .arr, button:hover > .arr { transform: translateX(5px); }

/* ---------- NAV : groupe capsule vitré ---------- */
.nav { position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 100; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 0 5%; transition: background .3s, box-shadow .3s; }
.nav.solid { background: rgba(6,15,43,.92); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--ld); }
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; justify-self: start; }
.nav-logo img { width: 54px; height: 54px; }
.nav-logo b { display: block; font-family: 'Comfortaa', sans-serif; font-size: 18px; font-weight: 700; color: #fff; line-height: 1; }
.nav-logo small { display: block; font-size: 9px; color: var(--cyan); letter-spacing: 1.2px; text-transform: uppercase; margin-top: 3px; }
.nav-links { display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 40px; background: rgba(255,255,255,.07); border: 1px solid var(--ld); backdrop-filter: blur(10px); }
.nav-links a { font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.82); text-decoration: none; padding: 9px 16px; border-radius: 30px; transition: background .2s, color .2s; white-space: nowrap; }
.nav-links a:hover { background: rgba(255,255,255,.12); color: #fff; }
.nav-links a.active { background: #fff; color: var(--navy); }
.nav-links .fin { color: #FFC32B; }
.nav-cta { justify-self: end; }
.burger { display: none; justify-self: end; width: 44px; height: 44px; flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.burger span { width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s, opacity .3s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.scroll-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--warm); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.menu-m { position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 99; background: rgba(6,15,43,.98); padding: 14px 5% 26px; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility .2s; }
.menu-m.open { opacity: 1; visibility: visible; transform: none; }
.menu-m a { color: rgba(255,255,255,.88); text-decoration: none; font-weight: 700; font-size: 17px; padding: 15px 0; border-bottom: 1px solid var(--ld); }
.menu-m .btn { margin-top: 18px; border: none; color: var(--navy-dark); justify-content: center; }

/* ---------- 01 HERO : l'interrupteur ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; background: var(--night); overflow: hidden; isolation: isolate; }
.hero-stage { position: absolute; inset: 0; z-index: 0; }
.stage-art { position: absolute; right: 0; top: 0; height: 100%; aspect-ratio: 16 / 9; }
.stage-art picture, .stage-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.art-on { opacity: 0; transition: opacity 1s ease; }
.hero.is-on .art-on { opacity: 1; }
.art-off { filter: brightness(.8); }
.hero::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, rgba(6,15,43,.96) 0%, rgba(6,15,43,.8) 34%, rgba(6,15,43,0) 62%); }
.hero-grid { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 88px 88px; -webkit-mask-image: linear-gradient(90deg, #000 0, transparent 55%); mask-image: linear-gradient(90deg, #000 0, transparent 55%); }
.hero-switch { position: absolute; left: 72.55%; top: 33.33%; width: 12.34%; height: 6.67%; z-index: 2; padding: 0; border-radius: 999px; }
.hero-switch:focus-visible { outline: 3px solid var(--cyan); outline-offset: 6px; }
.sw-track { position: absolute; inset: 0; border-radius: 999px; background: linear-gradient(135deg, #0b3a78, #0a2150); border: 3px solid #14357f; box-shadow: inset 0 3px 8px rgba(0,0,0,.45); transition: opacity .6s .15s; animation: ping 2.4s ease-out infinite; }
.sw-knob { position: absolute; top: 50%; left: 5.9%; height: 62%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #cfd6e6 70%); box-shadow: 0 3px 8px rgba(0,0,0,.45); transform: translate(0, -50%); transition: left .55s var(--ease), transform .55s var(--ease), opacity .6s .15s; }
.hero.knob-right .sw-knob { left: 94.1%; transform: translate(-100%, -50%); }
.hero.is-on .sw-track, .hero.is-on .sw-knob { opacity: 0; animation: none; }
@keyframes ping { 0% { box-shadow: inset 0 3px 8px rgba(0,0,0,.45), 0 0 0 0 rgba(0,204,255,.55); } 70%, 100% { box-shadow: inset 0 3px 8px rgba(0,0,0,.45), 0 0 0 22px rgba(0,204,255,0); } }
.sw-hint { position: absolute; left: 50%; top: calc(100% + 18px); transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--cyan); display: inline-flex; align-items: center; gap: 10px; transition: opacity .4s; }
.sw-hint::before { content: ''; width: 20px; height: 2px; background: var(--cyan); transform-origin: right; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: scaleX(.4); } 50% { transform: scaleX(1); } }
.hero.is-on .sw-hint, .hero.knob-right .sw-hint { opacity: 0; }

.hero-inner { position: relative; z-index: 3; width: 100%; padding-top: calc(var(--nav-h) + 40px); padding-bottom: 150px; }
.hero-text { max-width: 620px; }
.proof { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 30px; padding: 7px 18px 7px 8px; border-radius: 40px; background: rgba(255,255,255,.07); border: 1px solid var(--ld); font-size: 13px; font-weight: 700; color: rgba(255,255,255,.88); }
.proof .stack { display: flex; }
.proof .stack span { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid var(--night); margin-left: -9px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.proof .stack span:first-child { margin-left: 0; }
.proof .stack img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.proof b { color: #FFC32B; }
.hero h1 { font-size: clamp(44px, 6.4vw, 96px); font-weight: 800; line-height: .96; letter-spacing: -.045em; color: rgba(255,255,255,.9); margin-bottom: 28px; }
.hero h1 .w { display: inline-block; transition: color .8s; }
.hero h1 .w1 { font-family: 'Comfortaa', 'Mona Sans', sans-serif; font-weight: 700; letter-spacing: -.05em; }
.hero.is-on h1 .w1 { color: var(--cyan); }
.hero.is-on h1 .w2 { color: var(--orange); }
.hero-sub { font-size: 18px; line-height: 1.65; color: rgba(255,255,255,.8); max-width: 500px; margin-bottom: 36px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- 02 TRAILER ---------- */
.trailer { padding: 110px 0 120px; overflow: hidden; }
.trailer-head h2 { font-size: clamp(34px, 4.6vw, 68px); }
.trailer-head { display: grid; grid-template-columns: 1.7fr 1fr; gap: 40px; align-items: end; margin-bottom: 56px; }
.mini-sw { position: relative; display: inline-block; width: 38px; height: 21px; border-radius: 11px; background: rgba(255,255,255,.28); transition: background .35s var(--ease); vertical-align: -5px; margin-right: 12px; }
.mini-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .35s var(--ease); }
.mini-sw.on { background: var(--cold); }
.mini-sw.on::after { transform: translateX(17px); }
.frame { position: relative; margin: 0 auto; max-width: 1120px; aspect-ratio: 16 / 9; background: var(--navy-dark); box-shadow: 0 50px 120px -30px rgba(0,0,0,.8), 0 0 100px -20px rgba(0,54,191,.6); }
.frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame .controls { position: absolute; inset: auto 20px 20px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; pointer-events: none; }
.tbtn { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 30px; background: rgba(6,15,43,.8); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.22); color: #fff; font-weight: 700; font-size: 13px; transition: background .2s, border-color .2s; }
.tbtn:hover { background: rgba(6,15,43,.96); border-color: var(--cyan); }
.tbtn.icon { width: 44px; padding: 0; justify-content: center; }
.progress { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--warm); transform-origin: left; transform: scaleX(0); }
.play-big { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(6,15,43,.4); }
.play-big span { width: 92px; height: 92px; border-radius: 50%; background: var(--cyan); display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 40px rgba(0,204,255,.5); transition: transform .25s var(--ease); }
.play-big:hover span { transform: scale(1.1); }
.frame.idle .play-big { display: flex; }
.frame.idle .controls { display: none; }

/* ---------- 03 IMPACT : tableau de bord à filets ---------- */
.dash { display: grid; grid-template-columns: repeat(12, 1fr); border-top: 1px solid var(--ll); border-left: 1px solid var(--ll); }
.cell { position: relative; padding: 30px 30px 28px; border-right: 1px solid var(--ll); border-bottom: 1px solid var(--ll); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; min-height: 200px; transition: background .3s; }
.cell:hover { background: rgba(255,255,255,.7); }
.cell .k { position: absolute; top: 24px; left: 30px; font-size: 11px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: var(--gray); }
.cell .num { font-size: clamp(54px, 6.4vw, 104px); font-weight: 800; line-height: .9; letter-spacing: -.05em; color: var(--navy); font-variant-numeric: tabular-nums; }
.cell .lab { margin-top: 12px; font-weight: 800; font-size: 17px; color: var(--navy); }
.cell .sub { font-size: 13px; color: var(--gray); margin-top: 2px; }
.c-hero { grid-column: span 5; grid-row: span 2; background: var(--navy); border-color: var(--navy); }
.c-hero:hover { background: var(--navy); }
.c-hero .k { color: #FFC32B; }
.c-hero .num { font-size: clamp(64px, 7.6vw, 124px); background: var(--warm); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.c-hero .lab { color: #fff; font-size: 22px; }
.c-hero .sub { color: rgba(255,255,255,.75); font-size: 14px; }
.c-photo { grid-column: span 4; grid-row: span 2; padding: 0; background: var(--navy); }
.c-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); transition: transform .8s var(--ease); }
.c-photo:hover img { transform: scale(1.05); }
.c-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,26,101,.05) 40%, rgba(0,26,101,.9)); }
.c-photo figcaption { position: relative; z-index: 2; margin-top: auto; padding: 24px 28px; color: #fff; font-weight: 800; font-size: 17px; line-height: 1.3; }
.c-photo figcaption small { display: block; font-size: 11px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: var(--cyan); margin-bottom: 6px; }
.c-3 { grid-column: span 3; }
.c-6 { grid-column: 1 / -1; }
.deps { display: flex; flex-wrap: wrap; gap: 0; margin-top: 14px; }
.deps li { font-size: 12px; font-weight: 800; padding: 7px 13px; border: 1px solid var(--ll); margin: 0 -1px -1px 0; color: var(--navy); background: rgba(255,255,255,.5); }
.c-6 { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.c-6 .num-wrap { display: flex; align-items: baseline; gap: 20px; }
.impact-foot { margin-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 14px; color: var(--gray); }
.impact-foot a { font-weight: 800; color: var(--blue); text-decoration: none; }
.impact-foot a:hover { color: var(--orange-ink); }

/* ---------- 04 JE SUIS : liste typographique + aperçu photo ---------- */
.who-wrap { position: relative; display: grid; grid-template-columns: 1fr 340px; gap: 60px; align-items: start; }
.who { border-top: 1px solid var(--ll); }
.who li { border-bottom: 1px solid var(--ll); }
.who-row { position: relative; display: grid; grid-template-columns: 44px 62px 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 30px 8px 30px 0; transition: padding .4s var(--ease), color .3s; }
.who-row .n { font-size: 13px; font-weight: 800; letter-spacing: 1.5px; color: var(--orange-ink); font-variant-numeric: tabular-nums; }
.who-row .t { font-size: clamp(30px, 4.6vw, 70px); font-weight: 800; letter-spacing: -.035em; line-height: 1; color: rgba(0,26,101,.42); transition: color .3s; }
.who-row .t small { display: block; margin-top: 12px; font-family: 'Mona Sans', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0; line-height: 1.55; color: var(--gray); max-width: 520px; }
.who-row .go { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--ll); color: var(--navy); display: flex; align-items: center; justify-content: center; transition: background .3s, border-color .3s, transform .3s var(--ease); }
.who-row:hover, .who-row:focus-visible, .who-row.on { padding-left: 18px; }
.who-row:hover .t, .who-row:focus-visible .t, .who-row.on .t { color: var(--navy); }
.who-row:hover .go, .who-row:focus-visible .go, .who-row.on .go { background: var(--cyan); border-color: var(--cyan); color: var(--navy-dark); transform: rotate(-45deg); }
.who-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--warm); transform: scaleY(0); transform-origin: top; transition: transform .4s var(--ease); }
.who-row:hover::before, .who-row.on::before, .who-row:focus-visible::before { transform: scaleY(1); }
.who-prev { position: sticky; top: calc(var(--nav-h) + 30px); aspect-ratio: 4 / 5; background: var(--navy); overflow: hidden; }
.who-prev img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .5s, transform .9s var(--ease); }
.who-prev img.on { opacity: 1; transform: scale(1); }
.who-prev::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,26,101,0) 55%, rgba(0,26,101,.85)); pointer-events: none; }
.who-prev .cap { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 18px; font-size: 11px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: var(--cyan); }
.who-prev .motif { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .5s; }
.who-prev .motif.on { opacity: 1; }
.who-prev .motif img { position: static; width: 70%; opacity: 1; transform: none; }

/* ---------- 05 OFFRE : index filtrable, deux niveaux ---------- */
.offre-head { margin-bottom: 60px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: end; }
.cat-grid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 56px; align-items: start; }
.cat-grid > * { min-width: 0; }
.side { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 30px; }
.fgroup h3 { font-size: 11px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: var(--gray); padding-bottom: 10px; border-bottom: 1px solid var(--ll); margin-bottom: 4px; }
.fopt { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 8px 4px; border-bottom: 1px solid rgba(0,26,101,.08); font-weight: 700; font-size: 15px; color: var(--navy); transition: padding .25s var(--ease), color .2s; }
.fopt .ct { font-size: 12px; font-weight: 800; color: var(--gray); font-variant-numeric: tabular-nums; }
.fopt:hover { padding-left: 12px; }
.fopt[aria-pressed="true"] { color: var(--navy); padding-left: 14px; box-shadow: inset 4px 0 0 var(--orange); background: rgba(255,255,255,.7); }
.fopt[aria-pressed="true"] .ct { color: var(--orange-ink); }
.theme-sel { width: 100%; min-height: 46px; padding: 8px 40px 8px 12px; border: 1px solid var(--ll); background: #fff; font: inherit; font-weight: 700; font-size: 14px; color: var(--navy); appearance: none; border-radius: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23001A65' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; }
.legend { display: grid; gap: 8px; font-size: 12px; font-weight: 700; color: var(--gray); }
.legend span { display: flex; align-items: center; gap: 10px; }

.count { font-size: 13px; color: var(--gray); margin-bottom: 18px; min-height: 20px; }
.count b { color: var(--navy); }
.grp { display: flex; align-items: center; gap: 14px; margin: 34px 0 6px; font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--navy); }
.grp:first-child { margin-top: 0; }
.grp .rule { flex: 1; height: 1px; background: var(--ll); }
.grp small { color: var(--gray); font-weight: 700; letter-spacing: .5px; text-transform: none; font-size: 12px; }
.row { border-bottom: 1px solid var(--ll); animation: rowIn .45s var(--ease) backwards; }
.row:first-of-type { border-top: 1px solid var(--ll); }
@keyframes rowIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.row-h { position: relative; display: grid; grid-template-columns: 150px 1fr 190px 44px; gap: 18px; align-items: center; width: 100%; padding: 22px 8px 22px 16px; transition: background .25s, padding .3s var(--ease); }
.row-h::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--warm); transform: scaleY(0); transform-origin: top; transition: transform .35s var(--ease); }
.row-h:hover, .row.open .row-h { background: rgba(255,255,255,.75); }
.row-h:hover::before, .row.open .row-h::before { transform: scaleY(1); }
.r-ref { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; color: var(--gray); }
.r-title b { display: block; font-size: clamp(18px, 1.7vw, 24px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--navy); }
.r-title small { display: block; margin-top: 5px; font-size: 13px; font-weight: 600; color: var(--gray); }
.r-fmt { font-size: 13px; font-weight: 700; color: var(--navy); }
.r-fmt small { display: block; font-weight: 500; color: var(--gray); font-size: 12px; margin-top: 2px; }
.r-plus { position: relative; width: 36px; height: 36px; border: 1.5px solid var(--ll); border-radius: 50%; justify-self: end; transition: background .25s, border-color .25s; }
.r-plus::before, .r-plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--navy); transform: translate(-50%, -50%); transition: transform .3s var(--ease); }
.r-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.row.open .r-plus { background: var(--navy); border-color: var(--navy); }
.row.open .r-plus::before, .row.open .r-plus::after { background: #fff; }
.row.open .r-plus::after { transform: translate(-50%, -50%) rotate(0); }
.row-p { display: grid; grid-template-columns: 1.25fr 1fr; gap: 44px; padding: 8px 16px 34px 16px; background: rgba(255,255,255,.75); border-top: 1px dashed var(--ll); }
.row-p[hidden] { display: none; }
.row-p .acc { font-size: 16px; line-height: 1.75; color: var(--text); margin-bottom: 18px; padding-top: 22px; }
.row-p .pas { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .5px; padding: 5px 12px; background: var(--navy); color: #fff; margin: 22px 0 10px; }
.tags { display: flex; flex-wrap: wrap; gap: 0; }
.tags li { font-size: 12px; font-weight: 700; padding: 6px 12px; border: 1px solid var(--ll); margin: 0 -1px -1px 0; color: var(--navy); background: #fff; }
.spec { padding-top: 22px; }
.spec dl { display: grid; gap: 0; border-top: 1px solid var(--ll); }
.spec dl > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ll); }
.spec dt { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gray); padding-top: 3px; }
.spec dd { font-size: 14.5px; font-weight: 700; color: var(--navy); line-height: 1.45; }
.spec .acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.flip { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 12px; font-weight: 800; color: var(--navy); margin-top: 6px; }
.flip .mini-sw { background: rgba(0,26,101,.28); margin: 0; vertical-align: 0; }
.flip[aria-checked="true"] .mini-sw { background: var(--cold); }
.flip[aria-checked="true"] .mini-sw::after { transform: translateX(17px); }
.custom { margin-top: 34px; padding: 34px 36px; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.custom h3 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px; }
.custom p { color: rgba(255,255,255,.8); max-width: 520px; font-size: 15px; line-height: 1.65; }

/* ---------- 06 TERRITOIRE ---------- */

/* ---------- 07 TÉMOIGNAGES ---------- */
.pull { display: grid; grid-template-columns: 120px 1fr; gap: 20px; margin-bottom: 70px; text-decoration: none; color: inherit; }
.pull .q { font-family: Georgia, serif; font-size: 190px; line-height: .75; color: var(--orange); }
.pull blockquote { font-size: clamp(24px, 3.2vw, 44px); font-weight: 800; letter-spacing: -.03em; line-height: 1.18; color: var(--navy); }
.pull .by { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--ll); font-size: 14px; color: var(--gray); }
.pull .by strong { display: block; font-size: 17px; color: var(--navy); }
.pull .by .more { font-weight: 800; color: var(--blue); }
.pull:hover .by .more { color: var(--orange-ink); }
.mq-tools { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.pause { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ll); color: var(--navy); display: inline-flex; align-items: center; justify-content: center; background: #fff; }
.pause:hover { background: var(--light); border-color: var(--blue); }
.pause .i-play { display: none; }
.pause[aria-pressed="true"] .i-play { display: block; }
.pause[aria-pressed="true"] .i-pause { display: none; }
.mq { position: relative; overflow: hidden; margin-bottom: 16px; }
.mq.anim { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.mq-track { display: flex; width: max-content; }
.mq:not(.anim) .mq-track { width: auto; flex-wrap: wrap; gap: 16px; }
.mq.anim .mq-track { animation: marq 80s linear infinite; }
.mq.anim.rev .mq-track { animation-direction: reverse; animation-duration: 92s; }
.mq.anim:hover .mq-track, .mq.anim:focus-within .mq-track, .mq.paused .mq-track { animation-play-state: paused; }
.verb { flex: 0 0 auto; width: 380px; margin-right: 16px; padding: 28px 30px 24px; background: #fff; border-left: 4px solid; border-image: var(--warm) 1; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.mq:not(.anim) .verb { margin-right: 0; }
.verb q { quotes: none; font-size: 16px; line-height: 1.65; color: var(--text); font-weight: 500; }
.verb cite { font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: .3px; color: var(--gray); line-height: 1.5; }
.logos { margin-top: 70px; }
.logos-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ll); border-left: 1px solid var(--ll); }
.logos-grid li { display: flex; align-items: center; justify-content: center; height: 120px; padding: 18px 28px; background: #fff; border-right: 1px solid var(--ll); border-bottom: 1px solid var(--ll); transition: background .3s; }
.logos-grid li:hover { background: var(--light); }
.logos-grid img { max-height: 62px; max-width: 160px; width: auto; object-fit: contain; }
.logos-label { font-size: 12px; font-weight: 800; letter-spacing: 2.2px; text-transform: uppercase; color: var(--navy); margin-bottom: 18px; display: flex; align-items: center; gap: 16px; }
.logos-label .rule { flex: 1; height: 1px; background: var(--ll); }

/* ---------- 08 FINANCEURS : dossier ---------- */
.fin-top { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; }
.id-table { border-top: 2px solid #FFC32B; }
.id-table div { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--ld); }
.id-table dt { font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: #FFC32B; padding-top: 3px; }
.id-table dd { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.45; }
.docs { margin-top: 70px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ld); border-left: 1px solid var(--ld); }
.doc { display: flex; flex-direction: column; gap: 10px; padding: 30px 30px 28px; border-right: 1px solid var(--ld); border-bottom: 1px solid var(--ld); text-decoration: none; color: #fff; transition: background .3s; min-height: 220px; }
.doc:hover { background: rgba(255,255,255,.06); }
.doc .no { font-size: 12px; font-weight: 800; letter-spacing: 1.6px; color: #FFC32B; }
.doc h3 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.doc p { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.78); flex: 1; }
.doc .dl { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; color: #FFC32B; }
.anchors { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
.anchors > span { font-size: 12px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,.75); margin-right: 18px; }
.anchors li { font-size: 13px; font-weight: 700; padding: 9px 16px; border: 1px solid rgba(255,195,43,.5); margin: 0 -1px -1px 0; color: #FFC32B; }

/* ---------- CTA + FOOTER ---------- */
.cta { position: relative; padding: 130px 0; text-align: center; overflow: hidden; }
.cta::before { content: ''; position: absolute; left: 50%; top: 50%; width: 1100px; height: 1100px; margin: -550px 0 0 -550px; background: repeating-conic-gradient(from 0deg, rgba(0,120,255,.2) 0 4deg, transparent 4deg 12deg); -webkit-mask: radial-gradient(circle, #000 0, transparent 62%); mask: radial-gradient(circle, #000 0, transparent 62%); animation: spin 100s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.cta .wrap { position: relative; }
.cta h2 { font-size: clamp(40px, 6.6vw, 104px); font-weight: 800; letter-spacing: -.045em; line-height: .96; margin-bottom: 26px; }
.cta h2 .acc { font-family: 'Comfortaa', sans-serif; color: var(--cyan); letter-spacing: -.05em; }
.cta p { color: rgba(255,255,255,.8); max-width: 520px; margin: 0 auto 34px; font-size: 17px; line-height: 1.65; }
.cta-pts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 32px; font-size: 13px; color: rgba(255,255,255,.75); }
.cta-pts li::before { content: ''; display: inline-block; width: 7px; height: 7px; background: var(--orange); margin-right: 10px; transform: rotate(45deg); }
.foot { position: relative; background: #000d33; color: #fff; padding: 60px 0 28px; }
.foot::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--warm); }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 40px; }
.foot img { height: 70px; width: auto; margin-bottom: 14px; }
.foot h2 { font-family: 'Comfortaa', sans-serif; font-size: 14px; font-weight: 700; margin-bottom: 14px; }
.foot li a, .foot li span { display: inline-block; padding: 5px 0; font-size: 14px; color: rgba(255,255,255,.78); text-decoration: none; }
.foot li a:hover { color: #fff; }
.foot .slogan { font-family: 'Comfortaa', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--cyan); margin-top: 12px; }
.foot .legal { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--ld); font-size: 12px; color: rgba(255,255,255,.65); }

/* ---------- NOTES DE MAQUETTE ---------- */
.notes-btn { position: fixed; left: 16px; bottom: 16px; z-index: 120; min-height: 44px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; border-radius: 40px; border: 2px solid var(--orange); background: #fff; color: var(--navy); font-weight: 800; font-size: 13px; box-shadow: 0 10px 28px rgba(0,13,51,.3); }
.notes-btn[aria-pressed="true"] { background: var(--orange); color: var(--navy-dark); }
.note { display: none; position: relative; z-index: 5; margin: 0 0 28px; max-width: 900px; padding: 14px 18px; background: #FFF4E6; border: 2px dashed var(--orange); color: #5a2b00; font-size: 13px; line-height: 1.6; }
.note b { color: var(--orange-ink); letter-spacing: .5px; text-transform: uppercase; font-size: 11px; display: block; margin-bottom: 4px; }
.hero .note { position: absolute; z-index: 6; left: 5%; top: calc(var(--nav-h) + 10px); max-width: 520px; margin: 0; }
body.show-notes .note { display: block; }
body.show-notes .prov { outline: 2px dashed var(--orange); outline-offset: 3px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1180px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav-links, .nav-cta { display: none; }
  .burger { display: flex; }
  .cat-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .offre-head { grid-template-columns: 1fr; gap: 20px; }
  .side { position: static; grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .who-wrap { grid-template-columns: 1fr; }
  .who-prev { display: none; }
  .fin-top { grid-template-columns: 1fr; gap: 40px; }
  .trailer-head { grid-template-columns: 1fr; gap: 20px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .stage-art { right: auto; left: 50%; transform: translateX(-50%); top: calc(650px - 50.7vw); height: 177.78vw; width: 100vw; aspect-ratio: auto; }
  .art-off, .art-on { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%); mask-image: linear-gradient(180deg, transparent 0, #000 24%); }
  .hero { display: block; min-height: calc(800px + 101.3vw); }
  .hero-switch { left: 32.9%; top: 42.1%; width: 34.4%; height: 5.83%; }
  .hero::before { background: linear-gradient(180deg, rgba(6,15,43,.88) 0%, rgba(6,15,43,.6) 46%, rgba(6,15,43,0) 60%); }
  .hero-grid { -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 55%); mask-image: linear-gradient(180deg, #000 0, transparent 55%); }
  .hero-inner { padding-top: calc(var(--nav-h) + 24px); padding-bottom: 0; }
  .hero-sub { font-size: 16px; margin-bottom: 26px; }
  .ticker { grid-template-columns: repeat(2, 1fr); }
  .ticker div { padding: 14px 5%; border-bottom: 1px solid var(--ld); }
  .ticker div:nth-child(2) { border-right: none; }
  .ticker b { font-size: 21px; }
  .dash { grid-template-columns: repeat(2, 1fr); }
  .c-hero, .c-photo, .c-6 { grid-column: 1 / -1; }
  .c-hero { grid-row: auto; min-height: 260px; }
  .c-photo { grid-row: auto; min-height: 280px; }
  .c-3 { grid-column: span 1; }
  .row-h { grid-template-columns: 1fr 44px; gap: 8px 14px; }
  .row-h .r-ref { grid-column: 1; }
  .row-h .r-title { grid-column: 1; }
  .row-h .r-fmt { grid-column: 1; }
  .row-h .r-plus { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .row-p { grid-template-columns: 1fr; gap: 6px; }
  .docs { grid-template-columns: 1fr; }
  .pull { grid-template-columns: 1fr; }
  .pull .q { font-size: 110px; height: 70px; }
  .logos-grid { grid-template-columns: repeat(2, 1fr); }
  .terr-stage iframe { height: 420px; }
  .terr-panel { position: static; width: 100%; }
  .terr-full { bottom: 12px; right: 12px; }
}
@media (max-width: 700px) {
  .sec { padding: 80px 0; }
  .sec-top { margin-bottom: 38px; }
  .side { grid-template-columns: 1fr; }
  .who-row { grid-template-columns: 40px 1fr 44px; padding-right: 0; }
  .who-row .go { width: 44px; height: 44px; }
  .id-table div { grid-template-columns: 1fr; gap: 4px; }
  .verb { width: 290px; }
  .foot-grid { grid-template-columns: 1fr; }
  .custom { padding: 26px 22px; }
  .spec dl > div { grid-template-columns: 1fr; gap: 2px; }
  .hero .note { top: calc(var(--nav-h) + 6px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   v2.1 : usage de la charte (trame, élément de motif, curseurs, logo principal)
   Règle respectée : les motifs ne vont que sur fond clair, rognés par un bord,
   jamais derrière le logo.
   ============================================================ */
.motif-bg { background: #fff url('../assets/trame-douce.png') repeat; background-size: 640px 416px; }
.deco { position: absolute; z-index: 0; pointer-events: none; user-select: none; }
.deco-r { right: -110px; top: -70px; width: 360px; opacity: .95; }
.deco-l { right: -120px; bottom: 40px; width: 330px; }
.sec { overflow: clip; }
.sec > .wrap { position: relative; z-index: 1; }

/* curseur de la charte en puce */
.mark { display: inline-block; width: 28px; height: 10px; flex-shrink: 0; background: url('../assets/curseur-bc.png') center / contain no-repeat; }
.mark.o { background-image: url('../assets/curseur-orange.png'); }
.mark.v { background-image: url('../assets/curseur-violet.png'); }
.legend .mark { margin-right: 0; }

/* hero : pastille vers la page Partenaires, repère de défilement */
a.proof { text-decoration: none; transition: background .25s, border-color .25s; }
a.proof:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.4); }
a.proof .arr { color: #FFC32B; }
.hero-inner { padding-bottom: 110px; }
.scroll-cue { position: absolute; z-index: 4; left: 5%; bottom: 36px; display: inline-flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(255,255,255,.75); text-decoration: none; }
.scroll-cue span { width: 22px; height: 36px; border: 2px solid rgba(255,255,255,.5); border-radius: 12px; position: relative; }
.scroll-cue span::after { content: ''; position: absolute; left: 50%; top: 6px; width: 4px; height: 8px; border-radius: 2px; margin-left: -2px; background: var(--cyan); animation: wheel 1.8s ease-in-out infinite; }
@keyframes wheel { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

/* thématiques abordées : ruban de trame + défilement */
.themes { position: relative; background: #fff; border-bottom: 1px solid var(--ll); overflow: hidden; }
.ribbon { height: 92px; background: #fff url('../assets/trame-couleur.png') repeat-x 0 -70px; background-size: 760px 495px; border-bottom: 3px solid var(--navy); }
.th-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 34px; padding-bottom: 6px; }
.th-top .eyebrow { margin: 0; color: var(--blue); }
.themes .note { margin-top: 24px; }
.th-mq { margin: 8px 0 0; padding: 10px 0 36px; }
.th-mq .mq-track { align-items: center; }
.th-mq.anim .mq-track { animation-duration: 50s; }
.th-mq:not(.anim) .mq-track { justify-content: center; }
.th { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font-size: clamp(32px, 4.6vw, 64px); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; color: var(--navy); white-space: nowrap; }
.th.h span { color: var(--orange-ink); }
.th .mark { width: 40px; height: 14px; }
.th:nth-child(even) .mark { background-image: url('../assets/curseur-orange.png'); }
.th-variant { display: none; min-height: 44px; padding: 8px 16px; border: 1.5px solid var(--orange); border-radius: 40px; font-weight: 800; font-size: 12px; color: var(--navy); background: #fff; }
body.show-notes .th-variant { display: inline-flex; align-items: center; }

/* je suis : pictogrammes */
.who-row .pic { width: 44px; height: 44px; object-fit: contain; font-size: 34px; display: flex; align-items: center; justify-content: center; }
.who-row .go { background: #fff; }

/* offre : bloc « demande particulière » clair avec l'élément de trame */
.custom { position: relative; overflow: hidden; background: #fff; color: var(--navy); border: 1px solid var(--ll); padding-right: min(34%, 340px); }
.custom::after { content: ''; position: absolute; right: -70px; top: 50%; width: 300px; height: 280px; margin-top: -140px; background: url('../assets/element-isole.png') center / contain no-repeat; pointer-events: none; }
.custom > * { position: relative; z-index: 1; }
.custom p { color: var(--gray); }
.legend span { display: flex; align-items: center; gap: 12px; }

/* territoire : titre au-dessus, carte nue */
.terr-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 50px; align-items: end; margin-bottom: 56px; }
.terr-head .display { font-size: clamp(34px, 4.6vw, 68px); }
.terr-stage { --map-h: 640px; position: relative; }
.map-clip { position: relative; overflow: hidden; background: var(--navy); height: var(--map-h); box-shadow: 0 30px 80px -30px rgba(0,26,101,.45); }
.map-clip iframe { width: 100%; height: calc(var(--map-h) + 70px); margin-top: -70px; border: 0; display: block; }
.terr-full { position: absolute; z-index: 3; right: 18px; bottom: 18px; }

/* conclusion : fond clair + panneau de trame en couleurs */
.cta { background: #fff url('../assets/trame-douce.png') repeat; background-size: 640px 416px; color: var(--navy); text-align: left; padding: 110px 0; }
.cta::before { display: none; }
.cta-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 60px; align-items: center; }
.cta h2 { color: var(--navy); font-size: clamp(40px, 5.4vw, 84px); }
.cta h2 .acc { color: var(--blue); }
.cta p { color: var(--gray); margin: 0 0 32px; font-family: 'Comfortaa', sans-serif; font-weight: 700; }
.cta-pts { justify-content: flex-start; color: var(--navy); font-weight: 600; margin-top: 34px; }
.cta-pts li { display: flex; align-items: center; gap: 12px; }
.cta-pts li::before { content: ''; width: 28px; height: 10px; margin: 0; transform: none; background: url('../assets/curseur-bc.png') center / contain no-repeat; }
.cta-pts li:nth-child(even)::before { background-image: url('../assets/curseur-orange.png'); }
.cta-motif { height: 440px; background: #fff url('../assets/trame-couleur.png') repeat; background-size: 700px 456px; box-shadow: 0 30px 70px -30px rgba(0,26,101,.35); }

/* pied de page : logo principal haute définition */
.foot .logo-p { width: 300px; max-width: 100%; height: auto; margin-bottom: 18px; }

/* financeurs : curseurs en puces */
.anchors li { display: flex; align-items: center; gap: 10px; }
.anchors li::before { content: ''; width: 24px; height: 9px; background: url('../assets/curseur-orange.png') center / contain no-repeat; }

@media (max-width: 1180px) {
  .terr-head { grid-template-columns: 1fr; gap: 20px; }
  .cta-grid { grid-template-columns: 1fr; gap: 44px; }
  .cta-motif { height: 260px; }
}
@media (max-width: 900px) {
  .scroll-cue { left: 50%; transform: translateX(-50%); bottom: 22px; }
  .hero-inner { padding-bottom: 0; }
  .ribbon { height: 64px; background-position: 0 -50px; background-size: 520px 339px; }
  .deco-r { width: 240px; right: -90px; top: -50px; }
  .deco-l { width: 220px; right: -90px; }
  .map-clip { --map-h: 440px; height: 440px; }
  .terr-stage { --map-h: 440px; }
  .custom { padding-right: 22px; }
  .custom::after { opacity: .18; }
  .who-row { grid-template-columns: 34px 1fr 44px; }
  .who-row .pic { display: none; }
}
@media (max-width: 700px) {
  .cta { padding: 70px 0; }
  .th { gap: 18px; padding-right: 18px; }
  .th .mark { width: 28px; height: 10px; }
}


/* ============================================================
   v2.2 : éléments de la trame pris séparément, animés en fond
   (flottement lent, halo qui respire, légère parallaxe au défilement)
   ============================================================ */
.motif-bg { background: #fff; }
.ribbon, .deco, .cta-motif { display: none; }
.floaters { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.fl { position: absolute; width: var(--s); transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
.fl img { width: 100%; height: auto; display: block;
  animation: flFloat var(--dur) ease-in-out var(--delay) infinite alternate, flGlow var(--gdur) ease-in-out var(--delay) infinite alternate; }
@keyframes flFloat { from { transform: translate(0, 0) rotate(var(--r0)); } to { transform: translate(var(--dx), var(--dy)) rotate(var(--r1)); } }
@keyframes flGlow { from { opacity: .45; filter: drop-shadow(0 0 0 var(--glow)); } to { opacity: .78; filter: drop-shadow(0 0 18px var(--glow)); } }
.themes .floaters { z-index: 0; }
.themes > .wrap, .th-mq { position: relative; z-index: 1; }
.cta { position: relative; overflow: clip; background: #fff; text-align: center; }
.cta > .wrap { position: relative; z-index: 1; }
.cta h2 { margin-left: auto; margin-right: auto; max-width: 1000px; }
.cta p { margin: 0 auto 34px; max-width: 520px; }
.cta-pts { justify-content: center; }
.cta-grid { display: block; }
@media (prefers-reduced-motion: reduce) { .fl img { opacity: .7; filter: none; } }

.th-top > span { margin-left: auto; }
.cell { background: rgba(255,255,255,.62); }
.c-hero, .c-photo { background: var(--navy); }

/* défilement des bandeaux (thématiques, témoignages) */
@keyframes marq { to { transform: translateX(-50%); } }


/* ============================================================
   v2.3 : bande défilante au style d'origine (cyan, capitales, mots pleins et en contour)
   ============================================================ */
.themes { background: var(--cyan); color: var(--navy-dark); border-block: 1px solid var(--navy-dark); overflow: hidden; }
.themes .floaters { display: none; }
.th-band { position: relative; }
.th-mq { margin: 0; padding: 0; -webkit-mask-image: none; mask-image: none; }
.th-mq.anim { -webkit-mask-image: none; mask-image: none; }
.th-mq .mq-track { align-items: center; }
.th-mq.anim .mq-track { animation-duration: 55s; }
.th { gap: 38px; padding: 20px 38px 20px 0; font-size: clamp(34px, 5.4vw, 76px); font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; color: var(--navy-dark); }
.th.h span { color: var(--cyan); -webkit-text-stroke: 4px var(--navy-dark); paint-order: stroke fill; } /* le remplissage cyan masque les recouvrements internes de la police variable */
.th .mark, .th:nth-child(even) .mark { width: .8em; height: .42em; border-radius: 99px; background: radial-gradient(circle at 74% 50%, #fff 0 .15em, transparent .16em), var(--navy-dark); }
.th-top { position: absolute; right: 5%; top: 50%; transform: translateY(-50%); z-index: 3; display: flex; align-items: center; gap: 12px; }
.themes .pause { background: var(--navy-dark); border-color: var(--navy-dark); color: #fff; }
.themes .pause:hover { background: var(--navy); }
.themes .note { margin: 18px 0; background: #FFF4E6; }
@media (max-width: 700px) { .th { gap: 22px; padding-right: 22px; } .th-top { right: 12px; } }

.grp em { font-style: normal; color: var(--orange-ink); margin-right: 10px; font-variant-numeric: tabular-nums; }


/* ============================================================
   v2.4 : les éléments traversent la section d'un bord à l'autre
   ============================================================ */
.fl { left: 0; }
.fl-x { width: var(--s); transform: translateX(-24vw); animation: flTravel var(--tdur, 80s) linear var(--tdelay, 0s) infinite var(--tdir, normal); will-change: transform; }
.fl-x img { width: 100%; height: auto; display: block;
  animation: flFloat var(--dur) ease-in-out var(--delay) infinite alternate, flGlow var(--gdur) ease-in-out var(--delay) infinite alternate; }
.fl img { animation: none; }
.fl .fl-x img { animation: flFloat var(--dur) ease-in-out var(--delay) infinite alternate, flGlow var(--gdur) ease-in-out var(--delay) infinite alternate; }
@keyframes flTravel { from { transform: translateX(-24vw); } to { transform: translateX(112vw); } }
@keyframes flGlow { from { opacity: .4; filter: drop-shadow(0 0 0 var(--glow)); } to { opacity: .72; filter: drop-shadow(0 0 18px var(--glow)); } }
@media (prefers-reduced-motion: reduce) { .fl-x { animation: none !important; transform: translateX(var(--sx, 20vw)); } }


/* ============================================================
   v2.5 : un mouvement différent par section
   travel (traversée) · rise (montée) · diag (diagonale) · orbit (orbite)
   tint (traversée + teinte des cartes) · cursor (attirés par le curseur)
   ============================================================ */
.who-prev img.hab { object-position: 56% 50%; }
.fl { transform: translate3d(var(--px, 0px), var(--py, 0px), 0); }

/* montée : bulles qui montent en se balançant */
.m-rise { top: 0 !important; left: var(--x, 50%); }
.m-rise .fl-x { transform: translateY(var(--H, 800px)); animation: flRise var(--tdur) linear var(--tdelay) infinite; }
@keyframes flRise { from { transform: translateY(calc(var(--H, 800px) + 40px)); } to { transform: translateY(calc(-1 * var(--s) - 40px)); } }

/* diagonale : de haut en bas, de gauche à droite */
.m-diag .fl-x { animation: flDiag var(--tdur) linear var(--tdelay) infinite var(--tdir, normal); }
@keyframes flDiag { from { transform: translate(-24vw, var(--ty0, 0px)); } to { transform: translate(112vw, var(--ty1, 300px)); } }

/* orbite : tourne autour d'un point */
.m-orbit { left: var(--cx); top: var(--cy); }
.m-orbit .fl-x { animation: flOrbit var(--tdur) linear var(--tdelay) infinite var(--tdir, normal); transform: none; }
@keyframes flOrbit { from { transform: rotate(0deg) translateX(var(--rad, 220px)) rotate(0deg); } to { transform: rotate(360deg) translateX(var(--rad, 220px)) rotate(-360deg); } }

/* curseur : flottent sur place, attirés par le pointeur */
.m-cursor { left: var(--x, 50%); }
.m-cursor .fl-x { animation: none; transform: none; }
.m-cursor .fl-x img { animation: flFloat var(--dur) ease-in-out var(--delay) infinite alternate, flGlow var(--gdur) ease-in-out var(--delay) infinite alternate; }

/* teinte : la carte prend la couleur de l'élément qui passe derrière */
.verb, .logos-grid li { position: relative; }
.verb::before, .logos-grid li::before { content: ''; position: absolute; inset: 0; background: rgb(var(--tint, 0, 204, 255)); opacity: 0; transition: opacity .9s ease; pointer-events: none; }
.verb.tinted::before, .logos-grid li.tinted::before { opacity: .22; }
.verb > *, .logos-grid li > * { position: relative; z-index: 1; }
.verb { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .m-rise .fl-x { animation: none !important; transform: translateY(40%); }
  .m-diag .fl-x { animation: none !important; transform: translateX(var(--sx, 20vw)); }
  .m-orbit .fl-x { animation: none !important; transform: translateX(var(--rad, 220px)); }
}


/* ============================================================
   v2.6 : colonne de filtres toujours entièrement atteignable
   ============================================================ */
.side { max-height: calc(100vh - var(--nav-h) - 36px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 6px; gap: 22px; }
.side::-webkit-scrollbar { width: 6px; }
.side::-webkit-scrollbar-thumb { background: var(--ll); border-radius: 3px; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--ll); background: rgba(255,255,255,.6); }
.seg .fopt { flex-direction: column; justify-content: center; align-items: center; gap: 2px; min-height: 52px; padding: 8px 4px; border-bottom: none; border-right: 1px solid var(--ll); font-size: 13px; text-align: center; }
.seg .fopt:last-child { border-right: none; }
.seg .fopt:hover { padding-left: 4px; background: #fff; }
.seg .fopt[aria-pressed="true"] { padding-left: 4px; box-shadow: inset 0 -3px 0 var(--orange); background: #fff; }
.legend { display: none; }
@media (max-width: 1180px) { .side { max-height: none; overflow: visible; padding-right: 0; } .legend { display: grid; } }

.g2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
.g2 .fopt { font-size: 14px; }
.g2 .fopt:first-child { grid-column: 1 / -1; }


/* ============================================================
   v2.7 : interactions
   ============================================================ */
/* titres : mots colorés au passage de l'élément */
.w-r { transition: color .45s ease; }
.w-r.hit { color: rgb(var(--tint, 0, 160, 210)) !important; }

/* lignes de l'offre : un élément se loge sur le bord gauche et colore la ligne */
.row.k-i { --rt: 0, 204, 255; --lg: url('../assets/elem-3.png'); }
.row.k-a { --rt: 244, 120, 7; --lg: url('../assets/elem-7.png'); }
.row-h { overflow: hidden; }
.row-h .lodge { position: absolute; left: 0; top: 50%; width: 46px; height: 58px; margin-top: -29px; background: var(--lg) center / contain no-repeat; opacity: 0; transform: translateX(-130%) rotate(-55deg); transition: transform .7s var(--ease), opacity .3s; pointer-events: none; filter: drop-shadow(0 0 10px rgba(var(--rt), .5)); }
.row-h:hover .lodge, .row.open .row-h .lodge, .row-h:focus-visible .lodge { opacity: 1; transform: translateX(-32%) rotate(-6deg); }
.row-h:hover, .row.open .row-h { background: linear-gradient(90deg, rgba(var(--rt), .22), rgba(255,255,255,.8) 42%); padding-left: 30px; }
.row-h::before { display: none; }

/* jauges des chiffres */
.gauge { position: relative; height: 6px; margin-top: 18px; border-radius: 3px; background: rgba(0,26,101,.14); flex-basis: 100%; width: 100%; }
.c-hero .gauge { background: rgba(255,255,255,.2); }
.gauge b { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--g, 0) * 100%); background: var(--warm); border-radius: 3px; }
.gauge i { position: absolute; top: 50%; left: calc(var(--g, 0) * 100%); width: 30px; height: 30px; margin: -15px 0 0 -15px; background: url('../assets/elem-5.png') center / contain no-repeat; filter: drop-shadow(0 0 10px rgba(255,195,43,.95)); opacity: calc(var(--g, 0) * 4); }
.c-6 .gauge { margin-top: 20px; }

/* interrupteurs de section */
.sw-sep { position: relative; height: 0; z-index: 8; }
.sw-sep .beam { position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: var(--warm); transform: scaleX(0); transform-origin: center; transition: transform 1.2s var(--ease) .15s; }
.sw-sep.on .beam { transform: scaleX(1); }
.sw-sep .cap { position: absolute; left: 50%; top: 0; width: 78px; height: 40px; margin: -20px 0 0 -39px; border-radius: 99px; background: var(--navy-dark); border: 3px solid #fff; box-shadow: 0 8px 24px rgba(0,26,101,.3); transition: background .5s; }
.sw-sep .cap::after { content: ''; position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #cfd6e6 70%); transition: transform .6s var(--ease); }
.sw-sep.on .cap { background: var(--cold); }
.sw-sep.on .cap::after { transform: translateX(38px); }
/* la section « allumée » : son filet d'en-tête se remplit en dégradé chaud */
.sec-top .rule { position: relative; background: none; opacity: 1; height: 2px; }
.sec-top .rule::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: currentColor; opacity: .22; }
.sec-top .rule::after { content: ''; position: absolute; left: 0; right: 0; top: -.5px; height: 2px; background: var(--warm); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease) .4s; }
.lit .sec-top .rule::after { transform: scaleX(1); }
.lit .sec-top .idx { text-shadow: 0 0 14px rgba(244,120,7,.55); }
@media (max-width: 700px) { .sw-sep .cap { width: 64px; height: 34px; margin: -17px 0 0 -32px; } .sw-sep .cap::after { width: 22px; height: 22px; } .sw-sep.on .cap::after { transform: translateX(30px); } }
@media (prefers-reduced-motion: reduce) { .row-h .lodge { transition: none; } }


/* ============================================================
   Revue de presse
   ============================================================ */
.press { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.pcard { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--ll); transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.pcard:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -22px rgba(0,26,101,.35); border-color: var(--navy); }
.pimg { position: relative; height: 230px; overflow: hidden; background: var(--navy); --cut: 34px; }
.pimg img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .8s var(--ease); }
.pcard:hover .pimg img { transform: scale(1.05); }
.pbody { display: flex; flex-direction: column; gap: 10px; padding: 24px 26px 26px; flex: 1; }
.pmedia { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--orange-ink); }
.pmedia time { margin-left: auto; color: var(--gray); letter-spacing: .4px; text-transform: none; font-weight: 700; font-size: 12px; }
.pbody h3 { font-size: clamp(20px, 1.8vw, 26px); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; color: var(--navy); }
.pdesc { font-size: 14px; line-height: 1.65; color: var(--gray); flex: 1; }
.pgo { font-size: 13px; font-weight: 800; color: var(--blue); display: inline-flex; gap: 8px; }
.pcard:hover .pgo { color: var(--orange-ink); }
dialog.lb { border: none; padding: 0; background: transparent; max-width: 94vw; max-height: 94vh; overflow: visible; margin: auto; }
dialog.lb::backdrop { background: rgba(6,15,43,.88); backdrop-filter: blur(4px); }
dialog.lb img { display: block; max-width: 92vw; max-height: 90vh; object-fit: contain; box-shadow: 0 40px 100px rgba(0,0,0,.6); }
dialog.lb .f-close { top: -14px; right: -14px; background: #fff; color: var(--navy); z-index: 2; }
@media (max-width: 1180px) { .press { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .press { grid-template-columns: 1fr; } .pimg { height: 200px; } }


/* ============================================================
   v2.8 : vague de couleur sur les témoignages, presse en liste typographique
   ============================================================ */
.verb::before, .logos-grid li::before { background: linear-gradient(115deg, rgba(var(--tint, 0, 204, 255), .42), rgba(var(--tint, 0, 204, 255), .1) 75%); opacity: var(--ti, 0); transition: none; }
.verb.tinted::before, .logos-grid li.tinted::before { opacity: var(--ti, 0); }

.pr-wrap { grid-template-columns: 1fr 460px; }
.pr-row { text-decoration: none; grid-template-columns: 44px 1fr auto; align-items: start; }
.pr-row .n { padding-top: 14px; }
.pr-row .go { align-self: center; }
.pr-row .t small { max-width: 620px; font-size: 14px; line-height: 1.6; }
.pr-row .t small b { display: inline; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--navy); }
.pr-row .t small .pl { display: block; margin-top: 10px; font-style: normal; font-weight: 800; font-size: 13px; color: var(--blue); }
.pr-row:hover .t small .pl, .pr-row.on .t small .pl { color: var(--orange-ink); }
.pr-prev { aspect-ratio: 5 / 4; }
.pr-prev img { object-position: top; }
@media (max-width: 1180px) { .pr-wrap { grid-template-columns: 1fr; } }

.pthumb { display: none; }
@media (max-width: 1180px) { .pthumb { display: block; width: 100%; max-width: 520px; height: 190px; object-fit: cover; object-position: top; margin-top: 14px; border: 1px solid var(--ll); } }


/* ============================================================
   v2.9 : revue de presse en frise horizontale
   ============================================================ */
.frise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fr-item { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 78px 34px 6px 0; text-decoration: none; color: inherit; }
/* le trait : un segment par parution, qui se dessine l'un après l'autre */
.fr-item::before { content: ''; position: absolute; left: 0; right: 0; top: 33px; height: 2px; background: rgba(0,26,101,.16); }
.fr-item::after { content: ''; position: absolute; left: 0; right: 0; top: 32px; height: 4px; background: var(--warm); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease) calc(var(--i, 0) * .55s + .2s); }
.frise.on .fr-item::after { transform: scaleX(1); }
.fr-item:last-child::before, .fr-item:last-child::after { right: 34px; }
/* l'interrupteur de la parution */
.node { position: absolute; left: 0; top: 14px; width: 62px; height: 38px; border-radius: 99px; background: var(--navy-dark); border: 3px solid #fff; box-shadow: 0 6px 18px rgba(0,26,101,.28); z-index: 2; transition: background .5s calc(var(--i, 0) * .55s + .4s); }
.node::after { content: ''; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #cfd6e6 70%); transition: transform .6s var(--ease) calc(var(--i, 0) * .55s + .4s); }
.frise.on .node { background: var(--cold); }
.frise.on .node::after { transform: translateX(24px); }
.fr-media { font-size: clamp(26px, 2.6vw, 38px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: var(--navy); }
.fr-date { font-size: 12px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--orange-ink); min-height: 18px; }
.fr-img { position: relative; height: 190px; overflow: hidden; background: var(--navy); margin: 6px 0 6px; --cut: 30px; }
.fr-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .8s var(--ease); }
.fr-item:hover .fr-img img { transform: scale(1.06); }
.fr-item h3 { font-size: 19px; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; color: var(--navy); }
.fr-desc { font-size: 14px; line-height: 1.65; color: var(--gray); flex: 1; }
.fr-item:hover .pgo { color: var(--orange-ink); }
.fr-item:hover .node { box-shadow: 0 0 0 6px rgba(0,204,255,.25), 0 6px 18px rgba(0,26,101,.28); }
.fr-item:focus-visible { outline-offset: 6px; }
@media (max-width: 1180px) {
  .frise { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; padding-bottom: 14px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; margin-right: -5vw; padding-right: 5vw; }
  .fr-item { flex: 0 0 min(360px, 84%); scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .fr-item::after { transform: scaleX(1); } .frise .node { background: var(--cold); } .frise .node::after { transform: translateX(24px); } }


/* ============================================================
   v2.10 : témoignages en scène de citations (une à la fois, en grand)
   ============================================================ */
.stage { max-width: 1100px; margin: 0 auto; }
.q-body { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 20px; min-height: 270px; align-items: start; }
.q-mark { font-family: Georgia, serif; font-size: 190px; line-height: .72; background: var(--warm); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
#qText { font-size: clamp(26px, 3.4vw, 50px); font-weight: 800; letter-spacing: -.03em; line-height: 1.16; color: var(--navy); position: relative; }
#qText.s-xl { font-size: clamp(34px, 5.2vw, 76px); line-height: 1.08; }
#qText.s-l { font-size: clamp(30px, 4.2vw, 62px); }
#qText.s-s { font-size: clamp(24px, 2.9vw, 40px); line-height: 1.22; }
#qText .w { display: inline-block; opacity: 0; transform: translateY(.5em); transition: color .45s ease; }
#qText.in .w { animation: wIn .6s var(--ease) forwards; animation-delay: calc(var(--k) * 40ms); }
#qText .w.hit { color: rgb(var(--tint, 0, 160, 210)); }
@keyframes wIn { to { opacity: 1; transform: none; } }
.q-by { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--ll); }
.q-by strong { font-size: 18px; font-weight: 800; color: var(--navy); }
.q-by span { font-size: 15px; font-weight: 600; color: var(--gray); }
.q-more { margin-left: auto; font-weight: 800; color: var(--blue); text-decoration: none; }
.q-more:hover { color: var(--orange-ink); }
.q-prog { height: 3px; background: rgba(0,26,101,.12); margin-top: 26px; overflow: hidden; }
.q-prog i { display: block; height: 100%; background: var(--warm); transform: scaleX(0); transform-origin: left; }
.q-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.q-arr { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--ll); background: #fff; color: var(--navy); font-size: 20px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s, transform .2s var(--ease); }
.q-arr:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.q-arr:active { transform: scale(.94); }
.q-dots { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; }
.q-dot { position: relative; width: 38px; height: 22px; margin: 0 4px; padding: 0; border-radius: 99px; background: rgba(0,26,101,.26); transition: background .4s; }
.q-dot::before { content: ''; position: absolute; inset: -12px -3px; }
.q-dot::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #cfd6e6 70%); transition: transform .45s var(--ease); }
.q-dot:hover { background: rgba(0,26,101,.45); }
.q-dot[aria-current="true"] { background: var(--cold); }
.q-dot[aria-current="true"]::after { transform: translateX(16px); }
.q-count { font-size: 12px; font-weight: 800; letter-spacing: 1.5px; color: var(--gray); font-variant-numeric: tabular-nums; margin-left: 4px; }
.q-all { margin-left: auto; font-weight: 800; font-size: 14px; color: var(--blue); text-decoration: none; }
.q-all:hover { color: var(--orange-ink); }
@media (max-width: 900px) {
  .q-body { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .q-mark { font-size: 120px; height: 70px; }
  .q-all { margin-left: 0; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { #qText .w { opacity: 1; transform: none; animation: none !important; } }


/* ============================================================
   Bande partenaires : fond sombre, plaques blanches à coupe en biais
   ============================================================ */
.pband { position: relative; background: var(--night); color: #fff; padding: 46px 0 54px; overflow: hidden; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 88px 88px; }
.pband .note { margin-top: 0; }
.pb-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.pb-head .eyebrow { margin: 0; color: var(--cyan); }
.pb-tools { display: flex; align-items: center; gap: 16px; }
.pb-link { font-weight: 800; font-size: 14px; color: #FFC32B; text-decoration: none; }
.pb-link:hover { color: #fff; }
.pband .pause { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
.pband .pause:hover { background: rgba(255,255,255,.14); border-color: var(--cyan); }
.pb-mq { margin: 0; padding: 4px 0; }
.pb-mq.anim .mq-track { animation-duration: 70s; }
.plaque { flex: 0 0 auto; width: 200px; height: 100px; margin-right: 20px; padding: 14px 24px; background: #fff; display: flex; align-items: center; justify-content: center; --cut: 22px; transition: transform .3s var(--ease); }
.plaque:hover { transform: translateY(-4px); }
.plaque img { max-height: 60px; max-width: 150px; width: auto; height: auto; object-fit: contain; }
.pb-mq:not(.anim) .mq-track { justify-content: center; gap: 16px; padding: 0 5%; }
.pb-mq:not(.anim) .plaque { margin-right: 0; }


/* ============================================================
   Réseau de partenaires
   ============================================================ */
.pband { padding: 96px 0; }
.pn-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
.pn-text .eyebrow { margin: 0 0 18px; color: var(--cyan); }
.pn-lead { font-family: 'Comfortaa', sans-serif; font-weight: 700; font-size: clamp(20px, 2.1vw, 30px); line-height: 1.45; color: #fff; max-width: 460px; }
.pn-card { margin-top: 34px; padding: 18px 22px; border-left: 4px solid; border-image: var(--warm) 1; background: rgba(255,255,255,.06); min-height: 84px; }
.pn-card strong { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.pn-card span { display: block; margin-top: 4px; font-size: 13px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #FFC32B; }
.pn-actions { margin-top: 26px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pn-graph { position: relative; width: 100%; max-width: 640px; aspect-ratio: 1; justify-self: end; }
.pn-graph svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pn-line { stroke: rgba(0,204,255,.8); stroke-width: 1.8px; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke .3s, stroke-width .3s; }
.pn-graph.on .pn-line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--ease) calc(var(--i, 0) * .12s + .2s), stroke .3s, stroke-width .3s; }
.pn-line.hot { stroke: #FFC32B; stroke-width: 2.4px; }
.pn-pulse { fill: var(--cyan); filter: drop-shadow(0 0 4px var(--cyan)); opacity: 0; }
.pn-core { position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(.4); opacity: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #12337f, #0a1d5c); border: 3px solid rgba(255,255,255,.9); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 50px rgba(0,204,255,.45); transition: transform .8s var(--ease), opacity .5s; z-index: 3; }
.pn-graph.on .pn-core { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.pn-core img { width: 74%; height: auto; }
.pn-core .ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(0,204,255,.55); animation: radar 3.6s ease-out infinite; }
.pn-core .ring.r2 { animation-delay: 1.8s; }
@keyframes radar { from { transform: scale(1); opacity: .8; } to { transform: scale(2.3); opacity: 0; } }
.pn-node { position: absolute; width: 15.5%; aspect-ratio: 1; border-radius: 50%; background: #fff; border: 3px solid rgba(255,255,255,.95); box-shadow: 0 8px 26px rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; padding: 0; transform: translate(-50%, -50%) scale(0); opacity: 0; z-index: 2; transition: transform .7s var(--ease) calc(var(--i, 0) * .12s + .5s), opacity .4s calc(var(--i, 0) * .12s + .5s), box-shadow .3s; }
.pn-graph.on .pn-node { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.pn-graph.on .pn-node:hover, .pn-graph.on .pn-node:focus-visible, .pn-graph.on .pn-node.act { transform: translate(-50%, -50%) scale(1.16); transition-delay: 0s; box-shadow: 0 0 0 6px rgba(255,195,43,.5), 0 12px 34px rgba(0,0,0,.5); z-index: 4; }
.pn-node img { width: 68%; height: 68%; object-fit: contain; }
@media (max-width: 1000px) { .pn-grid { grid-template-columns: 1fr; gap: 40px; } .pn-graph { justify-self: center; } .pn-node { width: 17%; } }
@media (prefers-reduced-motion: reduce) { .pn-core .ring { animation: none; } .pn-line { stroke-dashoffset: 0; } .pn-node, .pn-core { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

.pn-node img.fill { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.pn-node { overflow: hidden; }

/* Offre de l'accueil : mêmes lignes que la page Interventions (valeurs reprises de pages.css) */
#offre .r-ref span { display: block; line-height: 1.35; }
#offre .r-ref span b { display: block; font-weight: 800; letter-spacing: .6px; color: var(--navy); text-transform: none; }
#offre .k-a .r-ref span { color: var(--orange-ink); }
#offre .k-i .r-ref span { color: var(--blue); }
#offre .after-k { padding-top: 6px; margin: 22px 0 6px; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gray); }
#offre .after-v { font-size: clamp(22px, 2.4vw, 32px); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; color: var(--navy); }
#offre .p-sub-r { margin: 8px 0 0; font-family: 'Comfortaa', 'Mona Sans', sans-serif; font-weight: 700; font-size: 15px; color: var(--orange-ink); }

.row-p .row-img { display: block; width: 100%; height: auto; margin: 22px 0 4px; }

/* « Pour qui » : sous chaque description, le nombre de fiches et quelques pastilles (accueil) */
.who-row .t .wr-meta { display: block; margin-top: 16px; font-family: 'Mona Sans', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0; line-height: 1.4; color: var(--gray); }
.wr-count { display: flex; flex-wrap: wrap; gap: 4px 22px; font-weight: 700; }
.wr-count .mark { width: 22px; height: 8px; margin-right: 8px; vertical-align: 1px; }
.wr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.wr-chips span { padding: 5px 10px; border: 1px solid var(--ll); font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--navy); }
.who-all { margin-top: 44px; }

/* « Pour qui » sur ordinateur : la taille des titres suit la largeur réelle de la liste (et non celle de l'écran), pour que « Les professionnels » reste sur une seule ligne quelle que soit la largeur de la fenêtre */
@media (min-width: 1181px) {
  @supports (container-type: inline-size) {
    .who li { container-type: inline-size; }
    .who-row .t { font-size: clamp(28px, calc((100cqw - 224px) / 8.9), 70px); }
  }
}

/* « Pour qui » : les lignes sont des liens vers le catalogue filtré, sans soulignement */
.who-row, .who-row:hover, .who-row:focus-visible { text-decoration: none; color: inherit; }

/* « Pour qui » sur téléphone et tablette : chaque public devient une carte avec sa photo en fond, sous un voile bleu nuit pour garder le texte lisible */
.who-row .wr-bg { display: none; }
@media (max-width: 1180px) {
  .who { display: grid; gap: 14px; border-top: 0; }
  .who li { border-bottom: 0; }
  .who-row, .who-row:hover, .who-row:focus-visible, .who-row.on { position: relative; overflow: hidden; isolation: isolate; padding: 26px 16px; background: var(--night); color: #fff; }
  .who-row .wr-bg { display: block; position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; }
  .who-row::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,15,43,.5) 0%, rgba(6,15,43,.86) 100%); }
  .who-row::before, .who-row.on::before { display: none; }
  .who-row .n { color: #FFC32B; }
  .who-row .t, .who-row:hover .t, .who-row:focus-visible .t, .who-row.on .t { color: #fff; }
  .who-row .t small { color: rgba(255,255,255,.9); }
  .who-row .t .wr-meta { color: rgba(255,255,255,.92); }
  .who-row .wr-chips span { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.1); color: #fff; }
  .who-row .go, .who-row:hover .go, .who-row.on:not(:hover):not(:focus-visible) .go { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.6); color: #fff; transform: none; }
}

/* Pied de page : réseaux sociaux (repris du site actuel) */
.foot .foot-social { display: flex; gap: 10px; align-items: center; margin-top: 20px; }
.foot .foot-social a { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); transition: background .2s, border-color .2s; }
.foot .foot-social a:hover { background: rgba(255,255,255,.18); border-color: var(--cyan); }
.foot .foot-social img { width: 22px; height: 22px; margin: 0; object-fit: contain; }