/* ==========================================================================
   KulturMind — Design System
   Rebuild of the tonyrobbins.com/fr layout language, as KulturMind.
   Dark-dominant, alternating bands (black/white/tint), rounded-inset heroes,
   4 bright accents, high-contrast serif display, pill buttons, notched brand
   tabs, carousels, quadrant diagram, numbered steps, pricing, FAQ.
   No copied assets or copy — original build.
   ========================================================================== */
:root{
  /* Base */
  --black:#0a0a0b; --ink:#111214; --white:#ffffff; --paper:#f6f5f2;
  --navy:#010e28; --navy-2:#03122f;
  --grey:#8a8d93; --grey-2:#c7c9cd; --line:rgba(255,255,255,.14); --line-dk:rgba(10,10,11,.12);
  /* 4 accents (Tony-style) */
  --blue:#1a5cff; --blue-light:#4d80fe; --green:#37e0a0; --orange:#ff9f24; --powder:#c3e4ea;
  /* KulturMind concept tints (used for ZIZ/MQ labels) */
  --ziz:#37e0a0; --mq:#ff9f24;
  /* Semantic */
  --danger:#ff6b6b;
  /* Type */
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Inter",system-ui,-apple-system,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
  /* Fluid scale */
  --s--1:clamp(.8rem,.76rem + .2vw,.9rem);
  --s-0:clamp(1rem,.95rem + .2vw,1.12rem);
  --s-1:clamp(1.2rem,1.05rem + .6vw,1.5rem);
  --s-2:clamp(1.7rem,1.4rem + 1.4vw,2.4rem);
  --s-3:clamp(2.3rem,1.8rem + 2.6vw,4rem);
  --s-4:clamp(3rem,2.1rem + 4.5vw,6rem);
  --s-5:clamp(3.6rem,2.4rem + 6vw,7.5rem);
  /* Space */
  --pad:clamp(1rem,3.5vw,2.5rem);
  --gap:clamp(1rem,.8rem + 1vw,1.5rem);
  --sect:clamp(3.5rem,7vw,7rem);
  --maxw:1280px; --r:20px; --r-sm:12px; --r-pill:100px;
}
*,*::before,*::after{box-sizing:border-box}*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--black)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
img,svg,video{display:block;max-width:100%}
body{font-family:var(--body);font-size:var(--s-0);line-height:1.6;color:var(--white);background:var(--black);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.02;letter-spacing:-.02em}
h1{font-size:var(--s-4)}h2{font-size:var(--s-3)}h3{font-size:var(--s-1)}
h1,h2{text-wrap:balance}
p{max-width:60ch;color:var(--grey-2)}a{color:inherit;text-decoration:none}

/* Layout ------------------------------------------------------------------ */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--sect);position:relative}
.stack>*+*{margin-top:var(--gap)}
.center{text-align:center;margin-inline:auto}
.center p{margin-inline:auto}

/* Bands: alternating black / white / tint -------------------------------- */
.band-black{background:var(--black);color:var(--white)}
.band-white{background:var(--white);color:var(--ink)}
.band-white h1,.band-white h2,.band-white h3,.band-white h4{color:var(--ink)}
.band-white p{color:#4b4e55}
.band-blue{background:var(--blue);color:#fff}
.band-green{background:var(--green);color:#04140e}
.band-green h1,.band-green h2,.band-green h3{color:#04140e}.band-green p{color:#0a2a1e}
.band-orange{background:var(--orange);color:#1a1200}
.band-orange h1,.band-orange h2,.band-orange h3{color:#1a1200}.band-orange p{color:#3a2a00}
.band-powder{background:var(--powder);color:#0a2429}
.band-powder h1,.band-powder h2,.band-powder h3{color:#0a2429}.band-powder p{color:#22434a}
.band-navy{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 50%,var(--navy) 100%);color:var(--white)}

/* ZIZ infographic showcase — image sits centered on the exact sampled navy so
   it reads as seamless, not pasted. Lightbox-clickable; mobile-only hint. -- */
.infographic-frame{max-width:720px;margin-inline:auto;position:relative;cursor:pointer;border-radius:var(--r-sm);overflow:hidden;aspect-ratio:1/1}
.infographic-frame img{width:100%;height:100%;object-fit:contain;transition:transform .35s ease}
.infographic-frame:hover img{transform:scale(1.02)}
.infographic-hint{display:none;text-align:center;margin-top:.8rem;font-size:var(--s-0);opacity:.6}
@media(max-width:700px){.infographic-hint{display:block}}

/* Eyebrow (bullet + uppercase spaced) ------------------------------------ */
.eyebrow{font-family:var(--body);font-weight:500;font-size:var(--s--1);letter-spacing:.16em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.6em;color:inherit;opacity:.85}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}

/* Buttons (pills) --------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:.6em;font-weight:500;font-size:var(--s--1);padding:.85em 1.6em;border-radius:var(--r-pill);border:1px solid transparent;cursor:pointer;transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn--white{background:#fff;color:#0a0a0b}.btn--white:hover{background:#eee}
.btn--dark{background:#0a0a0b;color:#fff}.btn--dark:hover{background:#222}
.btn--ghost{background:transparent;border-color:currentColor;color:inherit}
.btn .arrow{transition:transform .2s ease}.btn:hover .arrow{transform:translateX(3px)}

/* Header ------------------------------------------------------------------ */
.announce{background:var(--blue);color:#fff;text-align:center;font-size:var(--s--1);font-weight:500;padding:.55rem 1rem}
.announce a{text-decoration:underline;text-underline-offset:2px}
.site-header{position:sticky;top:0;z-index:60;background:rgba(10,10,11,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.9rem}
.brand{font-family:var(--display);font-weight:600;font-size:1.35rem;letter-spacing:.02em;color:#fff;text-transform:uppercase}
.nav{display:flex;align-items:center;gap:clamp(.8rem,1.6vw,1.7rem)}
.nav a{font-size:var(--s--1);color:var(--grey-2)}.nav a:hover{color:#fff}
.nav .lang{font-family:var(--mono);letter-spacing:.08em}

/* Mobile-overlay-only chrome — inert on desktop, the ≤900px block below turns
   each piece on. display:contents lets .nav-scroll/.nav-standalone/.nav-bottom
   promote their children straight into .nav's own flex row on desktop, so the
   desktop layout needs zero rules of its own for these wrappers. */
.nav-bar{display:none}
.nav-scroll{display:contents}
.nav-standalone{display:contents}
.nav-bottom{display:contents}
.nav a[aria-current="page"]{color:var(--acc,#fff);opacity:1;font-weight:600}
.nav-divider{display:none}

/* Nav dropdown (Corporate / Particuliers mega-menu) ------------------------ */
.nav-item{position:relative}
.nav-item>a{display:inline-flex;align-items:center;gap:.42em}
.nav-item .caret{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .2s ease}
.nav-item:hover .caret,.nav-item:focus-within .caret{transform:rotate(-135deg);margin-top:2px}

.submenu{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  background:#fff;border-radius:var(--r-sm);box-shadow:0 20px 45px rgba(10,10,11,.28);
  padding:1.2rem 1.3rem;display:flex;gap:1.8rem;min-width:220px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,visibility .2s ease;z-index:80;
}
/* hover-bridge: covers the visual gap above so the pointer never leaves a hoverable descendant */
.submenu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-item:hover .submenu,.nav-item:focus-within .submenu{opacity:1;visibility:visible;pointer-events:auto}

.sub-col{display:flex;flex-direction:column;gap:.1rem;min-width:170px}
.sub-h{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-bottom:.5rem}
.nav .submenu a{font-family:var(--body);font-size:var(--s--1);color:var(--ink);min-height:auto;display:block;padding:.45rem .5rem;border-radius:6px;white-space:nowrap}
.nav .submenu a:hover{background:var(--paper);color:#000}
.nav-toggle{display:none;align-items:center;justify-content:center;position:relative;width:44px;height:44px;padding:0;background:none;border:0;color:#fff;cursor:pointer;z-index:70}
.nav-toggle i{display:block;position:relative;width:22px;height:2px;background:#fff;border-radius:2px;transition:background .2s ease}
.nav-toggle i::before,.nav-toggle i::after{content:"";position:absolute;left:0;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .25s ease,top .25s ease}
.nav-toggle i::before{top:-7px}
.nav-toggle i::after{top:7px}
.nav-toggle[aria-expanded="true"] i{background:transparent}
.nav-toggle[aria-expanded="true"] i::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg)}

/* HERO — rounded inset container ----------------------------------------- */
.hero{padding:clamp(.6rem,1.2vw,1rem)}
.hero-inner{position:relative;border-radius:var(--r);overflow:hidden;min-height:min(74vh,640px);display:flex;align-items:flex-end}
.hero-inner .bg{position:absolute;inset:0;z-index:0}
.hero-inner .bg img,.hero-inner .bg video{width:100%;height:100%;object-fit:cover;object-position:var(--heropos,50% 50%)}
/* Home hero photo — shift the crop so Zakia sits clear of the headline
   instead of centered under it */
.bg--home img{object-position:20% 25%}

/* Below ~1024px the hero box turns portrait (width < height), so object-fit:
   cover crops the source horizontally instead of vertically — the opposite
   axis from desktop — and the text column runs full-width, so the 20%/25%
   desktop crop and unconstrained text both need a mobile-specific override
   to keep her face clear of the headline. */
@media (max-width:1024px){
  .bg--home img{object-position:42% center}
  .hero-inner.hero-inner--home{min-height:min(80vh,700px)}
  .hero-inner.hero-inner--home::after{background:linear-gradient(90deg,rgba(10,10,11,.95) 0%,rgba(10,10,11,.88) 38%,rgba(10,10,11,.55) 62%,rgba(10,10,11,.1) 82%)}
  .hero-inner.hero-inner--home .content{max-width:56%}
  .hero-inner.hero-inner--home h1{max-width:none;font-size:clamp(1.6rem,7.2vw,2.15rem)}
  .hero-inner.hero-inner--home .lede{font-size:var(--s-0)}
  .hero-inner.hero-inner--home .eyebrow{font-size:.7rem;letter-spacing:.1em}
}
.hero-inner::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(105deg,rgba(10,10,11,.85) 0%,rgba(10,10,11,.45) 45%,rgba(10,10,11,.15) 75%)}
.hero-inner .content{position:relative;z-index:2;padding:clamp(1.5rem,4vw,3.5rem);width:100%;max-width:none}
.hero-inner h1{max-width:16ch;color:#fff}
.hero-inner .lede{max-width:44ch;color:#fff;font-size:var(--s-1);opacity:.92}
.hero-inner .actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.4rem}
/* hero meta row (date/place) + brand tab */
.hero-meta{display:flex;flex-wrap:wrap;gap:2rem;margin-top:1.4rem;font-size:var(--s--1)}
.hero-meta .m .k{text-transform:uppercase;letter-spacing:.12em;opacity:.6;font-size:.72rem}
.hero-meta .m .v{font-weight:600;color:#fff}
.brand-tab{position:absolute;right:clamp(1rem,3vw,2.5rem);bottom:clamp(1rem,3vw,2.5rem);z-index:3;background:#0a0a0b;color:#fff;padding:1rem 1.4rem;border-radius:var(--r-sm);font-family:var(--display);text-align:center;line-height:1.05}
.brand-tab small{display:block;font-family:var(--body);font-size:.6rem;letter-spacing:.2em;opacity:.7;text-transform:uppercase;margin-bottom:.2rem}
.brand-tab b{font-size:1.5rem;font-weight:600;letter-spacing:.02em}
/* floating video card bottom-right */
.hero-vidcard{position:absolute;right:clamp(1rem,3vw,2.5rem);bottom:clamp(1rem,3vw,2.5rem);z-index:3;width:min(300px,42%);border-radius:var(--r-sm);overflow:hidden;aspect-ratio:16/10;background:#000}
.hero-vidcard img{width:100%;height:100%;object-fit:cover}
.hero-vidcard .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--s--1)}
.hero-vidcard .play::before{content:"▶";margin-right:.4em}

/* Big centered statement -------------------------------------------------- */
.statement h2{max-width:18ch;margin-inline:auto;text-align:center}
.statement p{text-align:center;margin-inline:auto;margin-top:1.2rem}

/* Rounded video block — façade: poster + play button only; the iframe/video
   element is injected by JS on click, never present at load. ------------- */
.videoblock{border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;position:relative;background:linear-gradient(135deg,#12151b,#1d2129)}
.videoblock img{width:100%;height:100%;object-fit:cover}
.videoblock .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.videoblock .play button{all:unset;cursor:pointer;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);color:#fff;padding:.7em 1.3em;border-radius:var(--r-pill);font-size:var(--s--1);display:inline-flex;align-items:center}
.videoblock .play button::before{content:"▶";margin-right:.5em;font-size:.85em}
.videoblock iframe,.videoblock video{position:absolute;inset:0;width:100%;height:100%;border:0}
/* No video set yet — an always-visible placeholder, not an empty gap */
.videoblock.placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}
.videoblock.placeholder .glyph{width:60px;height:60px;border-radius:50%;border:1.5px solid rgba(255,255,255,.32);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.65);font-size:1rem}
.videoblock.placeholder .cap{font:600 .7rem/1 var(--body);text-transform:uppercase;letter-spacing:.16em;color:rgba(255,255,255,.5)}

/* LinkedIn post embed — unlike YouTube/Vimeo, the iframe contains the whole
   feed card (author header + caption text + hashtags stacked above the
   actual video), so its real aspect ratio runs much taller than 16:9 and
   varies by width as the caption reflows. Measured against this specific
   post at the .videoblock's actual rendered width on program.php at each
   breakpoint (1200px/714px/358px), rather than guessed, to keep the
   reserved space matching what LinkedIn actually renders — a generic 16:9
   box here would either crop the card or leave a large empty gap. */
/* Ceremony video grid — 2x2 desktop/tablet, single column on phones. Each cell
   reserves its ratio via an inline aspect-ratio on .videoblock, so the grid is
   laid out at its final height before any poster decodes (no CLS). */
.videogrid,.imgduo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1rem,2.2vw,1.8rem);align-items:start}
.videogrid--single{grid-template-columns:minmax(0,640px)}
@media(max-width:640px){.videogrid,.imgduo{grid-template-columns:minmax(0,1fr)}}
.vgrid-cell{margin:0;display:flex;flex-direction:column}
.vgrid-cell .videoblock{width:100%}
.vgrid-cap{margin-top:.75rem;font-size:.78rem;font-weight:600;letter-spacing:.01em;line-height:1.4;color:var(--grey)}
.band-white .vgrid-cap,.band-powder .vgrid-cap,.band-green .vgrid-cap,.band-orange .vgrid-cap{color:#4a4a4a}

.videoblock--linkedin.is-embed{aspect-ratio:1200/1140}
@media(max-width:900px){.videoblock--linkedin.is-embed{aspect-ratio:714/840}}
@media(max-width:560px){.videoblock--linkedin.is-embed{aspect-ratio:358/700}}
/* The poster is a 16:9 video-cover frame, but the reserved box above is much
   taller (it's sized to the whole LinkedIn card, not just the video) —
   object-fit:cover would blow the photo up and crop it almost beyond
   recognition. Contain + center it instead, so the full frame stays legible
   and the surrounding space reads as the same dark gradient the placeholder
   state already uses, rather than as a bug. */
.videoblock--linkedin img{object-fit:contain;background:linear-gradient(135deg,#12151b,#1d2129)}

/* Instagram reel — click-to-load façade, portrait 9:16. Nothing but this
   poster (no script, no iframe) exists until the visitor clicks; see
   reel_embed() in components.php and the '.reel-embed' handler in
   layout_bottom.php. The card frame (radius/shadow) stays constant whether
   showing the poster, the live embed, or the failure fallback, so the
   surrounding grid never reflows regardless of which state is showing. */
.reel-embed{position:relative;aspect-ratio:9/16;border-radius:var(--r-sm);overflow:hidden;background:linear-gradient(160deg,#12151b,#1d2129);box-shadow:0 1px 2px rgba(10,10,11,.05),0 14px 32px rgba(10,10,11,.1)}
.reel-poster{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;padding:1.5rem}
.reel-poster-icon{width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(255,255,255,.32);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75)}
.reel-poster-icon svg{width:22px;height:22px}
/* Real video-cover thumbnail (poster_path set) — button moves to the bottom
   with a scrim behind it, so it reads over a face/photo instead of sitting
   centered on top of it like the icon-only fallback does. */
.reel-poster-bg{position:absolute;inset:0}
.reel-poster-bg img{width:100%;height:100%;object-fit:cover}
.reel-poster.has-photo{justify-content:flex-end}
.reel-poster.has-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,7,9,0) 45%,rgba(6,7,9,.85) 100%);pointer-events:none}
.reel-poster.has-photo .play{position:relative;z-index:1}
.reel-embed .play button{all:unset;cursor:pointer;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);color:#fff;padding:.65em 1.2em;border-radius:var(--r-pill);font-size:var(--s--1);display:inline-flex;align-items:center;gap:.5em;text-align:center}
.reel-embed .play button::before{content:"▶";font-size:.8em}
.reel-embed:hover .reel-poster-icon{color:#fff;border-color:rgba(255,255,255,.55)}
.reel-poster.has-photo:hover .reel-poster-bg img{transform:scale(1.04)}
.reel-poster-bg img{transition:transform .5s cubic-bezier(.4,0,.2,1)}
/* Instagram's own blockquote/iframe replaces .reel-poster on click — force
   it to fill the same 9:16 frame instead of using Instagram's own fixed
   width/margins, so the surrounding card treatment (radius, shadow) holds. */
.reel-embed iframe{position:absolute;inset:0;width:100%!important;height:100%!important;border:0}
.reel-embed blockquote.instagram-media{margin:0!important;min-width:0!important;width:100%!important;height:100%!important;border:0!important}
.reel-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:1.5rem;text-align:center}
.reel-fallback a{display:inline-flex;align-items:center;gap:.5em;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);color:#fff;padding:.65em 1.2em;border-radius:var(--r-pill);font-size:var(--s--1)}

/* 4-up reel grid (Zakia Slaoui media section) — dedicated breakpoints so it
   reads as 4/2/1 exactly, independent of .icongrid--4's own 760px cutoff. */
.reelgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
@media(max-width:820px){.reelgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.reelgrid{grid-template-columns:1fr}}

/* Icon grid (system/benefits) -------------------------------------------- */
.icongrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
.iconcell{display:flex;flex-direction:column;gap:.6rem}
.iconcell .ico{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);font-size:1.1rem}
.iconcell .ico svg{width:1.3rem;height:1.3rem}
.band-white .iconcell .ico,.band-green .iconcell .ico,.band-powder .iconcell .ico,.band-orange .iconcell .ico{background:rgba(0,0,0,.08)}
.iconcell h4{font-family:var(--body);font-weight:600;font-size:var(--s-0)}
.iconcell p{font-size:var(--s-0);max-width:34ch}

/* Partner-institutions grid (credibility restoration, component B) — reuses
   .iconcell's text-first look (no flat tile background) but at a genuine
   4-column layout since there are always exactly four institutions; kept
   independent of .icongrid so its own breakpoint rule can't lose a
   specificity fight with .icongrid's. */
.icongrid--4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2.5vw,2rem)}

/* Client-logo trust band (component A) — continuous marquee. The track is
   rendered twice (see render_logo_band()) and animates exactly -50%, so the
   loop point lines up seamlessly. Grayscale/low-opacity, full colour on
   hover; dark bands need an invert since source logos are colour-on-white. */
.logomarquee{
  position:relative;overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%);
}
.logomarquee-track{display:flex;width:max-content;animation:km-marquee 50s linear infinite}
.logomarquee:hover .logomarquee-track,.logomarquee:focus-within .logomarquee-track{animation-play-state:paused}
.logomarquee-set{display:flex;align-items:center;flex:0 0 auto;gap:clamp(1.6rem,3.5vw,3rem);padding-right:clamp(1.6rem,3.5vw,3rem)}
.logomarquee-item{height:40px;flex:0 0 auto;display:flex;align-items:center}
.logomarquee-item img{height:100%;width:auto;max-width:140px;object-fit:contain;filter:grayscale(1);opacity:.6;transition:filter .25s ease,opacity .25s ease}
.logomarquee-item img:hover{filter:grayscale(0);opacity:1}
.band-black .logomarquee-item img,.band-blue .logomarquee-item img{filter:grayscale(1) invert(1) brightness(1.6);opacity:.6}
.band-black .logomarquee-item img:hover,.band-blue .logomarquee-item img:hover{filter:none;opacity:1}
@keyframes km-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:700px){
  .logomarquee-item{height:30px}
  .logomarquee-track{animation-duration:32s}
  .logomarquee-set{gap:1.2rem;padding-right:1.2rem}
}
@media(prefers-reduced-motion:reduce){
  .logomarquee{-webkit-mask-image:none;mask-image:none}
  .logomarquee-track{animation:none;width:100%}
  .logomarquee-set{flex-wrap:wrap;justify-content:center;padding-right:0}
  .logomarquee-set[aria-hidden="true"]{display:none}
}

/* Named video testimonials (homepage) ------------------------------------- */
.testivideos{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,3vw,2rem);max-width:760px;margin-inline:auto}
.testivideo-item{display:flex;flex-direction:column;gap:.7rem}
.testivideo-cap{display:flex;flex-direction:column;gap:.15rem}
.testivideo-cap strong{font-family:var(--display);font-size:var(--s-0)}
.testivideo-cap span{font-size:var(--s--1);color:var(--grey)}
@media(max-width:700px){.testivideos{grid-template-columns:1fr}}

/* Multisector row (component D) ------------------------------------------- */
.sectorrow{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.sectorpill{font-family:var(--mono);font-size:var(--s--1);letter-spacing:.04em;padding:.5em 1.1em;border:1px solid currentColor;border-radius:var(--r-pill);opacity:.85}

/* Particuliers category chooser — 2x2 editorial grid. Each card is a
   full-bleed photo; the problem statement (display serif) is the headline,
   category name a small eyebrow above it, programme(s) hinted below, all
   bottom-anchored so baselines line up regardless of statement length. */
.catgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.cat-card{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;transition:transform .4s cubic-bezier(.4,0,.2,1)}
.cat-card:hover{transform:translateY(-5px)}
.cat-bg{position:absolute;inset:0}
.cat-bg img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.cat-card:hover .cat-bg img{transform:scale(1.06)}
.cat-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,7,9,.05) 0%,rgba(6,7,9,.28) 38%,rgba(6,7,9,.74) 62%,rgba(6,7,9,.95) 100%);pointer-events:none}
.cat-scrim-hover{position:absolute;inset:0;background:rgba(6,7,9,.16);opacity:0;transition:opacity .4s ease;pointer-events:none}
.cat-card:hover .cat-scrim-hover{opacity:1}
.cat-fg{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(1.5rem,3vw,2.4rem)}
.cat-eyebrow{font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cat-accent,#fff);text-shadow:0 1px 8px rgba(0,0,0,.5)}
.cat-statement{font-family:var(--display);font-weight:600;color:#fff;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.2;margin-top:.6rem;max-width:22ch;text-shadow:0 2px 16px rgba(0,0,0,.55)}
.cat-hint{font-size:var(--s--1);color:rgba(255,255,255,.62);margin-top:.9rem;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.cat-arrow-row{margin-top:1.1rem}
.cat-arrow{display:inline-block;color:var(--cat-accent,#fff);font-size:1.2rem;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.cat-card:hover .cat-arrow{transform:translateX(7px)}

/* Static 3-up programme grid (Carrière & transition page) — all three
   shown together, no carousel, since there are only three to compare. */
.progstatic{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}

/* MQ hub — l'équation QI + QE + MQ = impact, construite en typographie
   (aucune image importée). Accent or = MQ, réservé à cette page. */
.mqeq{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:clamp(.5rem,1.6vw,1.1rem);margin-top:clamp(1.6rem,3vw,2.4rem)}
.mqeq-term{font-family:var(--display);font-weight:600;font-size:clamp(2.2rem,6vw,4rem);line-height:1;letter-spacing:-.02em}
.mqeq-term--mq{color:var(--mq)}
.mqeq-op{font-family:var(--mono);font-size:clamp(1rem,2.2vw,1.5rem);opacity:.45;transform:translateY(-.15em)}
.mqeq-result{font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(1.6rem,4vw,2.6rem);line-height:1;color:var(--mq)}
.mqeq-note{margin-top:1.1rem;font-size:var(--s--1);opacity:.7;text-align:center;margin-inline:auto}

/* MQ hub — les trois niveaux. Les visuels fournis sont des marques (logo MQ +
   nom + niveau), pas des photos : la carte les présente donc contenues sur un
   fond clair plutôt qu'en fond perdu recadré. Mêmes tokens de mouvement que
   .cat-card / .mediacard. Le niveau 03 passe pleine largeur = sommet. */
.levelgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.2vw,1.6rem)}
@media(max-width:640px){.levelgrid{grid-template-columns:1fr}}
.levelcard{display:block;border-radius:var(--r);overflow:hidden;background:var(--paper);border:1px solid var(--line-dk);color:var(--ink);transition:transform .4s cubic-bezier(.4,0,.2,1),border-color .4s ease}
.levelcard:hover{transform:translateY(-5px);border-color:rgba(10,10,11,.28)}
.levelcard:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.levelcard--top{grid-column:1/-1;border-color:rgba(255,159,36,.55);background:linear-gradient(180deg,rgba(255,159,36,.07),var(--paper) 55%)}
.levelcard--top:hover{border-color:var(--mq)}
.levelcard-mark{display:block;background:#fff;aspect-ratio:16/10;padding:clamp(1.1rem,3vw,2rem);overflow:hidden}
.levelcard--top .levelcard-mark{aspect-ratio:21/6}
.levelcard-mark img{width:100%;height:100%;object-fit:contain;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.levelcard:hover .levelcard-mark img{transform:scale(1.04)}
.levelcard-info{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;padding:clamp(1rem,2.2vw,1.4rem)}
.levelcard-index{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.18em;color:var(--mq)}
.levelcard-name{font-family:var(--display);font-weight:600;font-size:var(--s-1);line-height:1.2;color:var(--ink)}
.levelcard-promise{font-size:var(--s--1);color:#4b4e55;max-width:52ch}
.levelcard-cta{display:inline-flex;align-items:center;gap:.45em;font-size:var(--s--1);color:#4b4e55}
.levelcard:hover .levelcard-cta .cat-arrow{transform:translateX(7px)}

/* Numéro d'index large et discret sur une .cat-card (brief MQ, point 4) */
.cat-index{position:absolute;top:clamp(1.1rem,2.4vw,1.7rem);left:clamp(1.5rem,3vw,2.4rem);z-index:2;font-family:var(--mono);font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.42);text-shadow:0 1px 10px rgba(0,0,0,.45)}

/* Visuel optionnel de la bande médias */
.mediaband-visual{max-width:320px;margin:0 auto clamp(1rem,2.4vw,1.6rem)}
.mediaband-visual img{width:100%;height:auto}

/* Interview cards (press/media band) — same motion tokens as .cat-card:
   image scale(1.06), translateY(-5px) lift, cubic-bezier(.4,0,.2,1). The
   broadcast stills already carry burnt-in lower thirds, so the card's own
   text sits in an information bar UNDER the image rather than over it. */
.mediacards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.2vw,1.6rem);max-width:940px;margin-inline:auto}
@media(max-width:640px){.mediacards{grid-template-columns:1fr}}
.mediacard{display:block;border-radius:var(--r);overflow:hidden;background:var(--paper);border:1px solid var(--line-dk);color:var(--ink);transition:transform .4s cubic-bezier(.4,0,.2,1),border-color .4s ease}
.mediacard:hover{transform:translateY(-5px);border-color:rgba(10,10,11,.28)}
.mediacard:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.mediacard-media{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink)}
.mediacard-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.mediacard:hover .mediacard-media img{transform:scale(1.06)}
.mediacard-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,7,9,0) 58%,rgba(6,7,9,.5) 100%);pointer-events:none}
.mediacard-play{position:absolute;left:50%;top:50%;width:56px;height:56px;transform:translate(-50%,-50%);border-radius:50%;border:1.5px solid rgba(255,255,255,.7);background:rgba(6,7,9,.32);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.8rem;transition:background .3s ease,border-color .3s ease}
.mediacard:hover .mediacard-play{background:rgba(6,7,9,.62);border-color:#fff}
.mediacard-info{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;padding:clamp(1rem,2.2vw,1.35rem)}
.mediacard-logo{height:30px;width:auto;max-width:132px;object-fit:contain;object-position:left center}
.mediacard-label{font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.mediacard-title{font-family:var(--display);font-weight:600;font-size:var(--s-1);line-height:1.2;color:var(--ink)}
.mediacard-cta{display:inline-flex;align-items:center;gap:.45em;font-size:var(--s--1);color:#4b4e55}
.mediacard-cta .cat-arrow{color:currentColor}

/* "Lire aussi" — the written articles kept as a quiet line under the cards */
.readalso{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:.5rem 1.5rem;margin-top:clamp(1.6rem,3vw,2.2rem)}
.readalso-label{font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.55}
.readalso a{font-size:var(--s--1);text-decoration:underline;text-underline-offset:3px;opacity:.82;transition:opacity .2s ease}
.readalso a:hover{opacity:1}
.readalso a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px}

/* Clickable press/media band (component E) -------------------------------- */
.medialinks{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 1.6rem}
.medialink{display:flex;align-items:baseline;gap:.6em;padding:.7em 1.2em;border:1px solid currentColor;border-radius:var(--r-pill);opacity:.85;transition:opacity .2s ease,transform .2s ease;color:inherit}
.medialink:hover{opacity:1;transform:translateY(-2px)}
.medialink-name{font-family:var(--display);font-weight:600}
.medialink-cta{font-size:var(--s--1);text-decoration:underline;text-underline-offset:2px}

/* Justified body copy (intro + module paragraphs) — headings/taglines stay
   left-aligned by not carrying this class. Hyphens need the lang attribute
   set on the element (or an ancestor) to pick the right dictionary. ------ */
.justify-text{text-align:justify;hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto}

/* Split feature ----------------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,5vw,4.5rem);align-items:center}
.split .media{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;background:var(--ink)}
.split .media img{width:100%;height:100%;object-fit:cover}
.split.rev .txt{order:2}

/* Carousel ---------------------------------------------------------------- */
/* nowrap + flex-shrink:0 on the arrows keeps them pinned to the row's end
   even when .lead wraps to two lines (a long h2 used to push them onto
   their own line below, reading as "stranded" under the title). */
.car-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.4rem;flex-wrap:nowrap}
.car-head .lead{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;min-width:0}
.car-arrows{display:flex;gap:.5rem;flex-shrink:0;padding-top:.3rem}
.car-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;color:inherit;cursor:pointer;font-size:1rem;transition:background .2s}
.band-white .car-btn{border-color:var(--line-dk)}
.car-btn:hover{background:rgba(127,127,127,.15)}
.carousel{display:grid;grid-auto-flow:column;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.carousel::-webkit-scrollbar{display:none}

/* Programme card — redesigned as a light "paper" frame around an inset
   square photo, with name/description/CTA below on solid ground instead of
   text overlaid on the photo via a scrim. Works on any band since the card
   carries its own light background regardless of the section behind it. */
.carousel.events{grid-auto-columns:min(70%,260px)}
.ev-card{
  scroll-snap-align:start;display:flex;flex-direction:column;
  background:var(--paper);border-radius:var(--r-sm);overflow:hidden;
  padding:.6rem .6rem 1.15rem;box-shadow:0 1px 2px rgba(10,10,11,.05),0 14px 32px rgba(10,10,11,.1);
  transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s ease;
}
.ev-card:hover{transform:translateY(-6px);box-shadow:0 1px 2px rgba(10,10,11,.06),0 22px 44px rgba(10,10,11,.16)}
.ev-photo{position:relative;aspect-ratio:1/1;border-radius:calc(var(--r-sm) - 5px);overflow:hidden}
.ev-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.ev-card:hover .ev-photo img{transform:scale(1.05)}
.ev-body{padding:.95rem .45rem 0;display:flex;flex-direction:column;flex:1}
.ev-name-row{display:flex;align-items:center;gap:.45em}
.ev-card .wm{font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--ink);letter-spacing:.01em}
.ev-badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:17px;height:17px;border-radius:50%;background:var(--ev-accent,#1a5cff);color:var(--ev-accfg,#fff)}
.ev-badge svg{width:10px;height:10px;stroke-width:3}
.ev-card .sub{font-size:.9rem;line-height:1.42;color:var(--grey);margin-top:.35rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ev-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:auto;padding-top:1rem}
.ev-eyebrow{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.ev-pill{display:inline-flex;align-items:center;gap:.35em;background:var(--ink);color:#fff;font-size:.78rem;font-weight:600;padding:.55em 1.05em;border-radius:var(--r-pill);white-space:nowrap;transition:background .2s ease,color .2s ease}
.ev-card:hover .ev-pill{background:var(--ev-accent,#1a5cff);color:var(--ev-accfg,#fff)}
.ev-pill .arrow{display:inline-block;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.ev-card:hover .ev-pill .arrow{transform:translateX(3px)}
/* generic content card (blog/testimonial) */
.carousel.cards{grid-auto-columns:min(80%,340px)}
.c-card{scroll-snap-align:start;display:flex;flex-direction:column;gap:.6rem;transition:transform .3s ease}
.c-card:hover{transform:translateY(-6px)}
.c-card .media{border-radius:var(--r-sm);overflow:hidden;aspect-ratio:1/1;background:var(--ink)}
.c-card .media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.c-card:hover .media img{transform:scale(1.05)}
.c-card .cat{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);margin-top:.4rem}
.c-card h4{font-family:var(--body);font-weight:600;font-size:var(--s-0);color:inherit}
.c-card p{font-size:var(--s-0)}
.c-card .by{font-size:var(--s--1);color:var(--grey)}

/* Full-bleed photo carousel — breaks out of .wrap to the viewport edge; the
   mask lives on the track (not a coloured overlay) so it fades against
   whatever band background it sits on. --sbw is set by JS to the measured
   scrollbar width so 100vw never overshoots the visible viewport. ------- */
.bleed{position:relative;width:100vw;width:calc(100vw - var(--sbw,0px));margin-left:calc(50% - 50vw);margin-left:calc(50% - 50vw + var(--sbw,0px)/2);overflow:hidden}

/* Focus + slivers filmstrip ------------------------------------------------
   One active slide (aspect-ratio-derived width from a fixed row height) plus
   compressed pill slivers either side. Width/margin are what animate (never
   transform-scale, which would distort the crop). Off-window items collapse
   to width:0 with no margin so they don't consume a flex gap. ------------ */
.filmstrip{display:flex;align-items:center;justify-content:center;height:clamp(320px,27vw,400px)}
@media(max-width:900px){.filmstrip{height:clamp(260px,43vw,340px)}}
@media(max-width:700px){.filmstrip{height:clamp(140px,45vw,190px)}}
.fs-item{position:relative;flex:0 0 auto;height:100%;width:0;margin-inline:0;opacity:0;overflow:hidden;background:var(--ink);cursor:pointer;transition:width .55s cubic-bezier(.4,0,.2,1),margin .55s cubic-bezier(.4,0,.2,1),border-radius .4s ease,opacity .3s ease}
.fs-item.sliver,.fs-item.active{margin-inline:7px;opacity:1}
.fs-item.sliver{width:66px;border-radius:9999px}
.fs-item.sliver:hover{background:var(--grey)}
.fs-item.active{width:auto;aspect-ratio:16/10;border-radius:24px;cursor:default}
.fs-item img{width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;-webkit-user-drag:none;user-select:none}
.fs-item .fs-label{position:absolute;right:.9rem;bottom:.9rem;padding:.45em 1em;border-radius:999px;background:rgba(255,255,255,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#141414;font-size:.7rem;font-weight:600;letter-spacing:.01em;opacity:0;transition:opacity .3s ease .15s;white-space:nowrap}
.fs-item.active .fs-label{opacity:1}

/* Dot position indicator -------------------------------------------------- */
.fs-dots{display:flex;justify-content:center;gap:.5rem;margin-top:1.1rem}
.fs-dots .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.3;border:0;padding:0;cursor:pointer;transition:opacity .25s ease,transform .25s ease}
.fs-dots .dot.active{opacity:1;transform:scale(1.35)}

/* Arrow buttons dim/disable at the start or end of the track ------------ */
.car-btn:disabled{opacity:.3;cursor:default;pointer-events:none}

/* Lightbox — one shared overlay per page; opened by any gallery card ---- */
.lightbox[hidden]{display:none}
.lightbox{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;background:rgba(4,5,6,.94);opacity:0;visibility:hidden;transition:opacity .25s ease;padding:4vh 4vw}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:100%;max-height:84vh;border-radius:var(--r-sm);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.lightbox .lb-cap{position:absolute;left:0;right:0;bottom:3vh;text-align:center;color:#fff;font-size:var(--s--1);opacity:.75}
.lightbox .lb-close,.lightbox .lb-arrow{position:absolute;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;font-size:1.15rem;cursor:pointer;transition:background .2s ease}
.lightbox .lb-close:hover,.lightbox .lb-arrow:hover{background:rgba(255,255,255,.18)}
.lightbox .lb-close{top:1.4rem;right:1.4rem}
.lightbox .lb-arrow{top:50%;transform:translateY(-50%)}
.lightbox .lb-prev{left:1.4rem}
.lightbox .lb-next{right:1.4rem}
@media(max-width:600px){.lightbox .lb-close{top:.8rem;right:.8rem}.lightbox .lb-prev{left:.6rem}.lightbox .lb-next{right:.6rem}}

/* Quadrant diagram (2x2 with plus gap) ----------------------------------- */
.quad{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:820px;margin-inline:auto}
.quad--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.quad--3{grid-template-columns:1fr}}
.quad .q{background:var(--blue);color:#fff;border-radius:var(--r-sm);aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;text-align:center;padding:1rem}
.quad .q .ico{font-size:1.6rem}
.quad .q .ico svg{width:1.9rem;height:1.9rem}
.quad .q p{font-size:var(--s--1);opacity:.85;margin-top:.3rem;max-width:22ch;text-align:center}
.quad .q h4{font-family:var(--display);font-weight:600;font-size:var(--s-1);color:#fff}

/* Numbered steps ---------------------------------------------------------- */
.steps{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,5vw,4rem)}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;padding:1.5rem 0;border-top:1px solid var(--line)}
.band-white .step{border-color:var(--line-dk)}
.step .num{font-family:var(--body);font-size:var(--s--1);color:var(--grey);white-space:nowrap;letter-spacing:.05em}
.step h4{font-family:var(--body);font-weight:600;font-size:var(--s-0);margin-bottom:.4rem}
.step p{font-size:var(--s-0)}
.step-meta{margin-top:.5rem;font-family:var(--mono);font-size:.7rem;line-height:1.5;letter-spacing:.04em;color:var(--grey);display:flex;flex-wrap:wrap;gap:.2em .6em}
.step-meta .sep{opacity:.45}
.band-white .step-meta,.band-powder .step-meta{color:#6b6e75}

/* Stats ------------------------------------------------------------------- */
.stats{display:flex;flex-wrap:wrap;gap:clamp(2rem,5vw,4rem)}
.stat .n{font-family:var(--display);font-weight:600;font-size:var(--s-3);line-height:1}
.stat .l{font-size:var(--s--1);color:var(--grey);margin-top:.4rem;max-width:16ch}
.band-green .stat .n,.band-orange .stat .n,.band-powder .stat .n{color:inherit}
/* Named-KPI variant (e.g. "Taux d'évolution" + a full sentence, not a big
   number + short label) — equal-width columns, top-aligned regardless of
   copy length, independent of the section's own text-align:center. */
.stats--grid{display:grid;grid-template-columns:repeat(3,1fr);align-items:start;text-align:left}
.stats--grid .stat .l{max-width:none}

/* Nos déploiements — client logo row (program.php). Same grayscale/colour-
   on-hover treatment as the homepage .logomarquee, but static with a caption
   per logo instead of a scrolling strip. */
.depl-logo{height:48px;display:flex;align-items:center;justify-content:flex-start}
.depl-logo img{max-height:48px;width:auto;max-width:100%;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .25s ease,opacity .25s ease}
.depl-logo img:hover{filter:grayscale(0);opacity:1}
.band-black .depl-logo img,.band-blue .depl-logo img{filter:grayscale(1) invert(1) brightness(1.6);opacity:.7}
.band-black .depl-logo img:hover,.band-blue .depl-logo img:hover{filter:none;opacity:1}
.depl-logo-placeholder{height:48px;width:100%;box-sizing:border-box;border:1px dashed var(--line-dk);border-radius:6px;display:flex;align-items:center;justify-content:center;padding:0 .6rem}
.depl-logo-placeholder span{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);text-align:center}
.depl-caption{min-height:1.3em}
/* Caption-less client-logo band: same grayscale->colour logo treatment as the
   deployments grid, laid out as a centred wrapping row so any number of logos
   (5 doesn't divide into 4 columns) reads as one band, not a grid with orphans. */
.depl-logos--band{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(1.8rem,4.5vw,3.6rem)}
.depl-logos--band .depl-cell{flex:0 0 auto}
.depl-logos--band .depl-logo{justify-content:center}

/* Notched brand-tab panel ------------------------------------------------- */
.notch{position:relative;background:var(--ink);color:#fff;border-radius:var(--r);padding:clamp(1.5rem,3vw,2.5rem)}
.notch h2,.notch h3,.notch p,.notch strong{color:#fff}
.notch .tab{display:inline-block;background:var(--orange);color:#1a1200;font-family:var(--display);font-weight:600;padding:1rem 1.4rem;border-radius:var(--r-sm);margin-bottom:1.2rem;line-height:1.05;text-align:center}
.notch .tab small{display:block;font-family:var(--body);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;opacity:.7}
.notch .tab b{font-size:1.4rem}

/* Spec table (Format & investissement) — a real dl, grid-per-row so the
   hairline always lands after the value regardless of column count. ----- */
.spec-table{margin:0}
.spec-row{display:grid;grid-template-columns:180px 1fr;column-gap:1.5rem;align-items:start;padding-block:1.2rem;border-bottom:1px solid var(--line)}
.spec-row:last-child{border-bottom:none}
.spec-table dt{margin:0;font-size:var(--s--1);text-transform:uppercase;letter-spacing:.12em;color:var(--grey);font-weight:600}
.spec-table dd{margin:0;font-size:var(--s-0);color:#fff}
.spec-row.spec-highlight dd{font-size:var(--s-1);font-weight:600}
@media(max-width:700px){.spec-row{grid-template-columns:1fr;row-gap:.4rem}}

/* Pricing cards ----------------------------------------------------------- */
.pricing{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;max-width:820px;margin-inline:auto}
.price-card{background:#fff;color:var(--ink);border-radius:var(--r);padding:clamp(1.4rem,3vw,2.2rem);display:flex;flex-direction:column;gap:1rem;transition:transform .3s ease}
.price-card:hover{transform:translateY(-6px)}
.price-card .head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.price-card .plan{font-family:var(--display);font-weight:600;font-size:var(--s-1)}
.price-card .amt{font-weight:600;white-space:nowrap}
.price-card ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:.6rem}
.price-card li{display:flex;gap:.6em;font-size:var(--s-0);color:#3a3d44}
.price-card li::before{content:"✓";color:var(--green);font-weight:700}
.price-card .btn{margin-top:auto;justify-content:center}

/* FAQ --------------------------------------------------------------------- */
.faq{display:grid;grid-template-columns:1fr 2fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.faq-item{border-top:1px solid var(--line);padding:1.1rem 0;cursor:pointer}
.band-white .faq-item{border-color:var(--line-dk)}
.faq-item summary{list-style:none;display:flex;justify-content:space-between;gap:1rem;font-weight:500;font-size:var(--s-0)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"⌄";color:var(--grey);transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(180deg)}
.faq-item p{margin-top:.8rem;font-size:var(--s-0)}
/* The FAQ's lead column is sized for the word "FAQ"; a real sentence heading
   needs more room before it wraps to four narrow lines. */
.faq--modules{grid-template-columns:1.4fr 2fr}
/* Syllabus bullets inside an accordion row (module content) */
.module-list{margin:.8rem 0 .2rem;padding-left:1.1rem;display:grid;gap:.5rem}
.module-list li{font-size:var(--s-0);line-height:1.55;list-style:disc}
.module-list li::marker{color:var(--grey)}

/* Big program grid (2x2 image cards) ------------------------------------- */
.proggrid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.prog-card{position:relative;width:100%;border-radius:var(--r);overflow:hidden;aspect-ratio:16/10;display:flex;align-items:flex-end;min-height:260px;transition:transform .3s ease}
.prog-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.prog-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,11,.15) 0%,rgba(10,10,11,.85) 100%)}
.prog-card:hover{transform:translateY(-6px)}
.prog-card:hover img{transform:scale(1.04)}
.prog-card .cap{position:relative;z-index:2;padding:clamp(1.2rem,2.5vw,2rem);max-width:60%}
.prog-card .cap h3{color:#fff;font-size:var(--s-2)}
.prog-card .cap p{color:var(--grey-2);font-size:var(--s-0);margin-top:.5rem}

/* Fork cards (two equal-weight journey cards) — a taller, fuller-caption
   variant of .prog-card so the key-facts list and CTA pill both fit. ----- */
.prog-card.fork{min-height:440px}
.prog-card.fork .cap{max-width:100%}
.prog-card.fork .facts{display:flex;flex-wrap:wrap;color:var(--grey-2);font-size:var(--s--1);margin-top:.9rem}
.prog-card.fork .facts span{white-space:nowrap}
.prog-card.fork .facts span:not(:last-child)::after{content:"·";margin:0 .6em;opacity:.5}
.prog-card.fork .cta-pill{display:inline-flex;align-items:center;gap:.5em;margin-top:1.4rem;padding:.75em 1.5em;border-radius:var(--r-pill);background:#fff;color:#111214;font-size:var(--s--1);font-weight:500}
/* ----- Les deux cartes de /ziz-leadership portent des photos en 16:9. En
   colonne etroite la carte devient plus haute que large (358x440), et une
   photo posee en fond y perd ses bords : les personnes sortaient du cadre.
   Sous 900px on empile donc le visuel au-dessus du texte au lieu de le mettre
   derriere. Portee limitee a .fork, qui n'existe que sur cette page. ----- */
@media (max-width:900px){
  .prog-card.fork{aspect-ratio:auto;min-height:0;flex-direction:column;align-items:stretch;background:#141416}
  /* Ratio impose plutot que naturel : les images sont en loading=lazy et
     sans attribut width/height, un ratio auto ne reserve aucune place et
     decale la mise en page au chargement. */
  .prog-card.fork img{position:static;width:100%;height:auto;aspect-ratio:16/10}
  .prog-card.fork::after{display:none}
  .prog-card.fork:hover{transform:none}
  .prog-card.fork:hover img{transform:none}
}

/* Full-bleed CTA ---------------------------------------------------------- */
.cta-band{position:relative;border-radius:var(--r);overflow:hidden;min-height:min(48vh,420px);display:flex;align-items:center;justify-content:center;text-align:center}
.cta-band .bg{position:absolute;inset:0}
.cta-band .bg img{width:100%;height:100%;object-fit:cover}
.cta-band::after{content:"";position:absolute;inset:0;background:rgba(10,10,11,.55)}
.cta-band .content{position:relative;z-index:2;padding:2rem}
.cta-band h2{color:#fff;max-width:18ch;margin-inline:auto}

/* Logos ------------------------------------------------------------------- */
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1.5rem,4vw,3.5rem);opacity:.55}
.logos span{font-family:var(--display);font-weight:600;font-size:var(--s-1)}

/* Footer ------------------------------------------------------------------ */
.site-footer{background:var(--black);border-top:1px solid var(--line);padding-block:var(--sect) 2rem}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr) 1.4fr;gap:1.5rem}
.footer-grid h5{font-family:var(--body);font-size:var(--s--1);letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-bottom:1rem}
.footer-grid a{display:block;color:var(--grey-2);font-size:var(--s--1);padding:.25rem 0}
.footer-grid a:hover{color:#fff}
.footer-bottom{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:var(--s--1);color:var(--grey)}

/* Forms ------------------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}
.field label{font-size:var(--s--1);letter-spacing:.04em;color:var(--grey-2)}
.field input,.field textarea,.field select{font:inherit;padding:.85em 1em;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--ink);color:#fff}
.band-white .field input,.band-white .field textarea{background:#fff;color:var(--ink);border-color:var(--line-dk)}
.field input:focus,.field textarea:focus{outline:2px solid var(--blue);outline-offset:1px}
.hp{position:absolute;left:-9999px}

/* Focus ring — consistent, branded, keyboard-only (mouse clicks don't trigger it) */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px;border-radius:4px;
}

/* Reveal ------------------------------------------------------------------ */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s,transform .7s}.reveal.in{opacity:1;transform:none}

/* Responsive -------------------------------------------------------------- */

/* Nav collapses into a hamburger opening a full-screen overlay below ~900px */
@media (max-width:900px){
  /* backdrop-filter on the sticky header establishes a containing block for
     position:fixed descendants, trapping the nav overlay inside the header's
     own box instead of the viewport — drop it only while the overlay is open */
  body.nav-open .site-header{backdrop-filter:none}
  .nav-toggle{display:flex}
  /* the overlay ships its own close control in .nav-bar — hide the sticky
     header's hamburger/✕ while open so only one close affordance shows */
  body.nav-open .nav-toggle{opacity:0;pointer-events:none}

  /* Full-screen overlay: a fixed header bar (logo + close) pinned above a
     scrollable list, so the list always starts at its first item and never
     hides behind the bar. align-items/justify-content are reset from the
     desktop row rule — inherited "center" is what centered every item and
     vertically re-centered tall content, landing the user mid-list. */
  .nav{
    position:fixed;inset:0;z-index:65;
    display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    background:var(--black);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .25s ease,visibility .25s ease,transform .25s ease;
    overflow:hidden;
  }
  .nav.open{opacity:1;visibility:visible;transform:none}

  .nav-bar{
    display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;
    height:64px;padding:0 var(--pad);border-bottom:1px solid var(--line);
  }
  .nav-logo{font-family:var(--display);font-weight:600;font-size:1.1rem;letter-spacing:.02em;text-transform:uppercase;color:#fff}
  .nav-close{width:44px;height:44px;margin-right:-10px;display:flex;align-items:center;justify-content:center;background:none;border:0;color:#fff;font-size:1.7rem;line-height:1;cursor:pointer}

  .nav-scroll{
    display:block;flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:.25rem var(--pad) 1.5rem;
  }

  .nav-item{display:block;position:static}
  .nav-item>a{
    font-family:var(--body);font-weight:600;font-size:.72rem;
    text-transform:uppercase;letter-spacing:.1em;color:var(--grey);
    min-height:44px;padding:.9rem 0 .3rem;display:flex;align-items:center;gap:.4em;
  }
  .nav-item .caret{display:none}
  .submenu{
    position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    background:transparent;box-shadow:none;padding:0 0 .3rem;
    display:flex;flex-direction:column;gap:0;min-width:0;
  }
  .submenu::before{display:none}
  .sub-col{gap:0;min-width:0}
  .sub-h{
    font-family:var(--body);font-size:.66rem;font-weight:600;color:var(--grey);opacity:.65;
    margin:.5rem 0 .1rem;padding:0 0 0 1rem;letter-spacing:.08em;
  }
  .nav .submenu a{
    font-family:var(--body);font-size:17px;color:#fff;
    min-height:44px;display:flex;align-items:center;
    padding:14px 0 14px 1rem;white-space:normal;border-radius:0;
  }
  .nav .submenu a:hover{background:transparent;color:var(--grey-2)}

  .nav-standalone{display:flex;flex-direction:column}
  .nav-standalone a{
    font-family:var(--body);font-size:17px;color:#fff;
    min-height:44px;display:flex;align-items:center;padding:14px 0;
  }

  .nav-divider{display:block;height:0;border:0;border-top:1px solid var(--line);margin:.6rem 0}

  .nav-bottom{
    display:flex;flex-direction:column;gap:.9rem;
    border-top:1px solid var(--line);margin-top:.6rem;padding-top:1.1rem;
  }
  .nav a.lang{font-family:var(--mono);font-size:var(--s-0);letter-spacing:.08em;color:var(--grey-2);min-height:auto}
  .nav a.btn{width:100%;justify-content:center;font-size:var(--s--1);color:#0a0a0b;min-height:48px}

  body.nav-open{overflow:hidden}

  /* hero corner elements stack below the copy instead of pinning to a corner —
     .hero-inner is a row flexbox, so once static-positioned they also need the
     container itself to switch to a column or they overflow the row and get
     clipped by its overflow:hidden (invisible to page-level scrollWidth checks) */
  .hero-inner{flex-direction:column;align-items:flex-start}
  .brand-tab,.hero-vidcard{position:static;width:auto;margin-top:1.2rem}

  .footer-grid{grid-template-columns:1fr 1fr}
}

/* Multi-column content sections collapse to a single column below ~760px */
@media (max-width:760px){
  .split,.faq,.pricing,.proggrid,.quad,.steps,.catgrid,.progstatic,.stats--grid{grid-template-columns:1fr}
  .split .media{order:-1}
  .split.rev .txt{order:0}
  .icongrid{grid-template-columns:1fr}
  .icongrid--4{grid-template-columns:1fr 1fr}
  :root{--sect:clamp(2.5rem,9vw,4rem)}
  .hero-inner{min-height:68vh}
}

/* Carousels stay horizontal — just tune peek width and hide arrows for touch */
@media (max-width:700px){
  .car-arrows{display:none}
  .carousel.events{grid-auto-columns:min(72vw,300px)}
  .carousel.cards{grid-auto-columns:min(80vw,340px)}
}

@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr}
  .icongrid--4{grid-template-columns:1fr}
}


/* ----- Lecteur video en surimpression (liens medias portant data-video-modal).
   z-index au-dessus de la lightbox pour que les deux ne se disputent jamais le
   premier plan. [hidden] est explicite : sans cette regle, un bloc masque par la
   seule CSS reapparait des que la feuille manque. ----- */
.vmodal{position:fixed;inset:0;z-index:310;display:flex;align-items:center;justify-content:center;background:rgba(4,5,6,.94);opacity:0;transition:opacity .22s ease;padding:clamp(1rem,4vw,3rem)}
.vmodal[hidden]{display:none}
.vmodal.open{opacity:1}
.vmodal-frame{width:100%;max-width:min(520px,92vw)}
.vmodal-frame video{display:block;width:100%;max-height:84vh;border-radius:14px;background:#000}
.vmodal-close{position:absolute;top:clamp(.7rem,2vw,1.4rem);right:clamp(.7rem,2vw,1.4rem);background:none;border:0;color:#fff;font-size:30px;line-height:1;cursor:pointer;padding:4px 10px}
.vmodal-close:focus-visible{outline:2px solid var(--ziz);outline-offset:2px}
.medialink--video .arrow{font-size:.8em}


/* ----- Grille d'institutions à cinq colonnes. Déclarée à part de .icongrid--4
   plutôt qu'en modificateur, pour la même raison que celle-ci : ses règles de
   rupture ne doivent pas perdre un duel de spécificité avec .icongrid. Les
   pistes sont en minmax(0,1fr) — un 1fr nu prend la largeur de son plus long
   mot et fait déborder la rangée sur un nom d'école un peu long. ----- */
.icongrid--5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(1rem,2vw,1.7rem)}
@media (max-width:1100px){.icongrid--5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.icongrid--5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.icongrid--5{grid-template-columns:1fr}}