/* ==========================================================================
   THEOBORA - Design system v2 (2026-09-09) - Projection Web
   Prefix: --tb-* variables, .tb-* classes. ASCII comments only.
   ========================================================================== */

:root {
  --tb-black: #0b0b0c;
  --tb-ink: #111111;
  --tb-ink-2: #1c1c1f;
  --tb-white: #ffffff;
  --tb-off: #f4f3f0;
  --tb-off-2: #e9e7e2;
  --tb-gray-700: #3a3a3e;
  --tb-gray-500: #6b6b70;
  --tb-gray-300: #b9b9bf;
  --tb-red: #cd1133;
  --tb-red-dark: #a80d2a;
  --tb-red-light: #cd1133; /* Eddy 11/09 : plus de rouge clair, partout le rouge charte */
  --tb-font-display: 'Jost', 'Jost-fb', sans-serif;
  --tb-font-body: 'Inter', 'Inter-fb', system-ui, sans-serif;
  --tb-container: 1280px;
  --tb-gutter: clamp(20px, 5vw, 72px);
  --tb-section: clamp(64px, 8vw, 116px);   /* 05/10 (Eddy) : 150 px trop grand, « remonter un peu le tout » */
  --tb-ease: cubic-bezier(.22, 1, .36, 1);
  --tb-radius: 4px;
}

/* --------------------------------------------------------------------------
   Base overrides (Impeka wrapper)
   -------------------------------------------------------------------------- */
/* Metric-compatible fallbacks to limit CLS while Google Fonts load */
@font-face { font-family: 'Jost-fb'; src: local('Futura'), local('Avenir Next'), local('Arial'); size-adjust: 97%; ascent-override: 100%; descent-override: 27%; line-gap-override: 0%; }
@font-face { font-family: 'Inter-fb'; src: local('Helvetica Neue'), local('Arial'); size-adjust: 100%; ascent-override: 93%; descent-override: 23%; line-gap-override: 0%; }
body { font-family: var(--tb-font-body); }
html body, html body.grve-body { background-color: var(--tb-black); }   /* 13/10 (Eddy) : Impeka pose #171a1d sur body = couleur de « damier » de Chrome quand une tuile de rendu n'est pas encore peinte (bandes gris bleute intermittentes sur les sections sombres pendant les animations) ; #grve-theme-content reste blanc */
/* WPBakery/Impeka row wrappers: no inner spacing around our fullwidth sections */
body.page #grve-main-content .grve-row-section { padding-top: 0 !important; padding-bottom: 0 !important; }
body.page #grve-main-content .grve-row-section .grve-row { margin-top: 0 !important; margin-bottom: 0 !important; }
body.page #grve-main-content .grve-row-section .grve-column { margin-top: 0 !important; margin-bottom: 0 !important; }
#grve-theme-wrapper { overflow-x: clip; }
.tb, .tb * { box-sizing: border-box; }
.tb { font-family: var(--tb-font-body); color: var(--tb-ink); line-height: 1.6; }
.tb img { max-width: 100%; height: auto; display: block; }
.tb a { text-decoration: none; color: inherit; }
.tb h1, .tb h2, .tb h3, .tb h4, .tb .tb-display {
  display: block; font-family: var(--tb-font-display); font-weight: 700; line-height: 1.02;
  letter-spacing: -0.02em; margin: 0; color: inherit;
  word-break: normal; overflow-wrap: normal; hyphens: manual;
}
.tb p { margin: 0 0 1em; }
.tb p:last-child { margin-bottom: 0; }
.tb ul { list-style: none; margin: 0; padding: 0; }

/* Sections and containers */
.tb-section { position: relative; padding: var(--tb-section) 0; }
.tb-section--flush { padding: 0; }
.tb-section--tight { padding: calc(var(--tb-section) * .6) 0; }
.tb-container { width: min(100% - 2 * var(--tb-gutter), var(--tb-container)); margin: 0 auto; }
.tb-container--wide { width: calc(100% - 2 * var(--tb-gutter)); max-width: none; }
.tb-container--narrow { width: min(100% - 2 * var(--tb-gutter), 860px); }

.tb-dark { background: var(--tb-black); color: var(--tb-white); }
.tb-dark .tb-muted { color: var(--tb-gray-300); }
.tb-ink { background: var(--tb-ink); color: var(--tb-white); }
.tb-light { background: var(--tb-white); color: var(--tb-ink); }
.tb-off { background: var(--tb-off); color: var(--tb-ink); }
.tb-light .tb-muted, .tb-off .tb-muted { color: var(--tb-gray-500); }
.tb-red-bg { background: var(--tb-red); color: var(--tb-white); }

/* Typography scale */
.tb-h1 { font-size: clamp(2.6rem, 7vw, 6.5rem); font-weight: 700; }
.tb-nb { white-space: nowrap; }   /* groupe insecable dans un titre (SplitText l'ignore) */
.tb-h1--xl { font-size: clamp(2.8rem, 9vw, 5.5rem); letter-spacing: -0.035em; }
.tb-h2 { font-size: clamp(2rem, 4.6vw, 4rem); }
.tb-h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); }
.tb-h4 { font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
.tb-lead { font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.5; font-weight: 300; }
.tb-body { font-size: 1rem; line-height: 1.7; }
.tb-small { font-size: .85rem; letter-spacing: .02em; }
.tb-max-sm { max-width: 32rem; }
.tb-max-md { max-width: 44rem; }
.tb-max-lg { max-width: 58rem; }
.tb-center { text-align: center; margin-left: auto; margin-right: auto; }
.tb-accent { color: var(--tb-red); }
.tb-dark .tb-accent, .tb-ink .tb-accent { color: var(--tb-red-light); }
.tb-italic { font-style: italic; font-weight: 400; }
.tb-outline-text { -webkit-text-stroke: 1px currentColor; color: transparent; }

.tb-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--tb-font-display); font-size: .78rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--tb-red);
  margin-bottom: 1.4rem;
}
.tb-eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.tb-dark .tb-eyebrow, .tb-ink .tb-eyebrow { color: var(--tb-white); }   /* 22/09 : texte blanc sur fond sombre, tiret rouge (contraste) */
.tb-dark .tb-eyebrow::before, .tb-ink .tb-eyebrow::before { background: var(--tb-red); }
.tb-eyebrow--light { color: var(--tb-white); }
/* Light eyebrow (hero): white text, dash and middle dot in brand red */
.tb-eyebrow--light::before, .tb-eyebrow .tb-eyebrow__dot { color: var(--tb-red); }
.tb-eyebrow .tb-eyebrow__dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--tb-red); vertical-align: middle; margin: 0 3px 0 0; font-size: 0; line-height: 0; position: relative; top: -2px; }   /* px: with font-size 0 an em offset is 0 */   /* CSS circle instead of the middot glyph: same optical centre in every browser */
.tb-eyebrow--light::before { background: var(--tb-red); }

.tb-head { margin-bottom: clamp(40px, 5vw, 72px); }
.tb-head--split { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: end; }
.tb-head--split .tb-lead { margin-bottom: .3em; }
@media (max-width: 860px) { .tb-head--split { grid-template-columns: 1fr; } }

/* Buttons */
.tb a.tb-btn { color: var(--btn-fg); }
.tb a.tb-btn:hover, .tb a.tb-btn:focus-visible { color: var(--btn-hfg, #fff); }
.tb-btn {
  --btn-bg: var(--tb-red); --btn-fg: #fff; --btn-bd: var(--tb-red);
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 28px; border: 1.5px solid var(--btn-bd); border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--tb-font-display); font-weight: 600; font-size: .92rem;
  letter-spacing: .06em; text-transform: uppercase; line-height: 1;
  overflow: hidden; isolation: isolate; cursor: pointer;
  transition: color .4s var(--tb-ease), border-color .4s var(--tb-ease), transform .4s var(--tb-ease);
}
.tb-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tb-ink);
  transform: translateY(101%); transition: transform .5s var(--tb-ease);
}
.tb-btn:hover::before, .tb-btn:focus-visible::before { transform: translateY(0); }
.tb-btn:hover, .tb-btn:focus-visible { color: #fff; border-color: var(--tb-ink); }
.tb-btn svg { width: 16px; height: 16px; transition: transform .4s var(--tb-ease); }
.tb-btn:hover svg { transform: translateX(4px); }
.tb-btn--outline { --btn-bg: transparent; --btn-fg: var(--tb-ink); --btn-bd: var(--tb-ink); --btn-hfg: #fff; }
.tb-btn--outline::before { background: var(--tb-ink); }
.tb-dark .tb-btn--outline, .tb-ink .tb-btn--outline, .tb-btn--light {
  --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.55); --btn-hfg: var(--tb-ink);
}
.tb-dark .tb-btn--outline::before, .tb-ink .tb-btn--outline::before, .tb-btn--light::before { background: #fff; }
.tb-dark .tb-btn--outline:hover, .tb-ink .tb-btn--outline:hover, .tb-btn--light:hover { color: var(--tb-ink); border-color: #fff; }
.tb-dark .tb-btn:not(.tb-btn--outline)::before, .tb-hero .tb-btn:not(.tb-btn--outline)::before { background: #fff; }
.tb-dark .tb-btn:not(.tb-btn--outline), .tb-hero .tb-btn:not(.tb-btn--outline) { --btn-hfg: var(--tb-ink); }
.tb-dark .tb-btn:not(.tb-btn--outline):hover, .tb-hero .tb-btn:not(.tb-btn--outline):hover { border-color: #fff; }
.tb-btn--white { --btn-bg: #fff; --btn-fg: var(--tb-ink); --btn-bd: #fff; --btn-hfg: #fff; }
.tb-btn--white::before { background: var(--tb-ink); }
.tb-btn--white:hover { color: #fff; border-color: var(--tb-ink); }
/* Paires de CTA (Eddy 24/09) : memes dimensions partout - pistes de largeur egale (la plus large), hauteur fixe, largeur mini commune, empilees a gauche sous 600 px */
.tb-btn-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: fit-content; max-width: 100%; gap: 14px; align-items: center; }
.tb-btn-row[style*="flex-end"] { margin-inline-start: auto; }
.tb-btn-row:has(> .tb-btn + .tb-btn) .tb-btn { min-width: 258px; }
.tb-btn { min-height: 52px; justify-content: center; }
@media (max-width: 600px) { .tb-btn-row { grid-auto-flow: row; gap: 12px; } .tb-btn-row:has(> .tb-btn + .tb-btn) .tb-btn { min-width: 0; } }
.tb-link {
  display: inline-flex; align-items: center; gap: 10px; font-family: var(--tb-font-display);
  font-weight: 600; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase;
  padding-bottom: 4px; position: relative;
}
.tb-link::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%; background: currentColor; transform-origin: right; transition: transform .5s var(--tb-ease); }
.tb-link:hover::after { transform: scaleX(0); transform-origin: left; }
.tb-link svg { width: 14px; height: 14px; transition: transform .4s var(--tb-ease); }
.tb-link:hover svg { transform: translate(3px, -3px); }

/* --------------------------------------------------------------------------
   Intro curtain (first visit)
   -------------------------------------------------------------------------- */
.tb-curtain {
  position: fixed; inset: 0; z-index: 99999; background: #000;
  display: grid; place-items: center; pointer-events: none; isolation: isolate; transform: translateZ(0);   /* own compositing layer, pure black like the hero */
}
.tb-curtain__mark { width: clamp(64px, 8vw, 104px); height: auto; overflow: visible; }
.tb-curtain__mark rect { fill: var(--tb-red); }
/* hidden until GSAP animates them in (no CSS transform-origin here: it would double GSAP's own SVG origin handling) */
html.tb-js .tb-curtain__mark rect { opacity: 0; }
html.tb-no-curtain .tb-curtain { display: none; }
html:not(.tb-js) .tb-curtain { display: none; }
html:not(.tb-js) .tb-hero__media::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.72); }   /* 12/10 : image de repli (Danette) sans JavaScript, voile pour la lisibilite du titre */   /* 12/10 : sans JavaScript, le rideau restait affiche et masquait tout le site */
/* while the curtain runs, the hero video stays hidden: Chrome/Mac promotes <video> to a GPU overlay that can paint a grey 16:9 plate through the curtain */
html.tb-curtain-on .tb-hero__video { visibility: hidden; }

/* --------------------------------------------------------------------------
   Header tweaks (Impeka offcanvas header)
   -------------------------------------------------------------------------- */
#grve-main-header { transition: background-color .5s var(--tb-ease), border-color .5s; }
html.tb-header-light:not(.tb-at-top) #grve-main-header { background-color: rgba(255,255,255,.97) !important; }
html.tb-header-dark:not(.tb-at-top) #grve-main-header { background-color: rgba(255,255,255,.97) !important; }   /* pages a hero clair : meme fond blanc au sticky */
html.tb-header-dark.tb-at-top #grve-main-header { background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; }
html.tb-header-light.tb-at-top #grve-main-header { background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; }
html.tb-header-light.tb-at-top #grve-main-header .grve-logo img { display: none !important; }
html.tb-header-light.tb-at-top #grve-main-header .grve-logo img.grve-light { display: block !important; }
html.tb-header-light.tb-at-top #grve-main-header .grve-item, html.tb-header-light.tb-at-top #grve-main-header .grve-icon,
html.tb-header-light.tb-at-top #grve-main-header a { color: #fff !important; }
html.tb-header-light.tb-at-top #grve-main-header .grve-item svg path { fill: #fff !important; }
/* burger hover = brand red in both header states (Impeka's default accent #FF4433 replaced in the theme options too) */
html.tb-header-light.tb-at-top #grve-main-header .grve-toggle-offcanvas:hover .grve-item svg path { fill: var(--tb-red) !important; }
#grve-main-header .grve-toggle-offcanvas .grve-item svg path { transition: fill .3s; }
html.tb-header-light.tb-at-top #grve-main-header .grve-menu-btn span, html.tb-header-light.tb-at-top #grve-main-header .grve-hidden-menu span span { background-color: #fff !important; }
html.tb-header-light.tb-at-top #grve-main-header .grve-border, html.tb-header-light.tb-at-top #grve-main-header .grve-border-right { border-color: rgba(255,255,255,.25) !important; }
@media (max-width: 1024px) { html.tb-header-light.tb-at-top #grve-main-header .grve-logo img.grve-logo-responsive { display: none !important; } }
/* Sticky (des que la page a defile) : seul le picto rouge (option Impeka logo_sticky = picto-theobora-rouge-160.png), plus de typo (Eddy 24/09) */
@media (min-width: 1025px) {
html.tb-header-light:not(.tb-at-top) #grve-main-header .grve-logo img, html.tb-header-dark:not(.tb-at-top) #grve-main-header .grve-logo img { display: none !important; }
html.tb-header-light:not(.tb-at-top) #grve-main-header .grve-logo img.grve-sticky, html.tb-header-dark:not(.tb-at-top) #grve-main-header .grve-logo img.grve-sticky { display: block !important; height: 40px; width: auto; }
}   /* mobile : le header responsive n'a qu'une image (logo complet), inchange */

/* --------------------------------------------------------------------------
   HERO (home)
   -------------------------------------------------------------------------- */
.tb-hero {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  color: #fff; overflow: hidden; background: var(--tb-black);
}
.tb-hero__media { position: absolute; inset: -10% 0; z-index: 0; overflow: hidden; }
.tb-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.12); }
.tb-hero__media picture { display: block; width: 100%; height: 100%; }
/* Hero video (desktop only, JS on): plays once after the curtain and holds its last frame; the photo stays for mobile / no JS */
.tb-hero__logo3d { display: none; position: absolute; inset: 0; overflow: hidden; background: #000; }
.tb-hero__video { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; background: var(--tb-black); }
/* Smaller framed playback: the clip sits in a centred box, letterboxed on black, its edges fading into the black ground */
/* Video mode: the whole hero sits on the same pure black as the clip so its box never shows */
.tb-hero--video { background: #000; }
.tb-hero--video .tb-hero__video { background: #000; left: 42.5vw; right: auto; top: 50%; bottom: auto; width: 52vw; height: 29.25vw; margin-top: -15.6vw; object-fit: contain;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 45%, #000 52%, rgba(0,0,0,.6) 72%, transparent 100%); mask-image: radial-gradient(ellipse 62% 58% at 50% 45%, #000 52%, rgba(0,0,0,.6) 72%, transparent 100%); }
@media (min-width: 961px) {
  html.tb-js .tb-hero--video .tb-hero__video { display: block; }
  html.tb-js .tb-hero--video .tb-hero__media picture { display: none; }
  html.tb-js .tb-hero--3d .tb-hero__logo3d { display: block; }
  html.tb-js .tb-hero--3d .tb-hero__media picture { display: none; }
  .tb-hero--3d .tb-hero__media::after { background: linear-gradient(180deg, rgba(11,11,12,.25) 0%, rgba(11,11,12,0) 40%, rgba(11,11,12,.8) 100%); }
  .tb-hero--video .tb-hero__title, .tb-hero--3d .tb-hero__title { max-width: none; letter-spacing: -.03em; font-size: clamp(2.8rem, 6.2vw, 5.5rem); }
  .tb-hero--video .tb-hero__media::after { background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.8) 100%); }
}
.tb-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,11,12,.55) 0%, rgba(11,11,12,.15) 40%, rgba(11,11,12,.85) 100%);
}
.tb-hero__grain { position: absolute; inset: 0; z-index: 1; opacity: .07; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* Hero : trois blocs independants sur la video (21/09, demande d'Eddy) - texte a gauche (eyebrow, titre, lead), indicateur scroll sous le texte, CTA seuls a droite.
   Reglages independants : --tb-hero-lift = remontee du bloc texte (eyebrow, titre, lead) par rapport au bas ; --tb-hero-cta-lift = remontee des CTA ;
   --tb-hero-scroll-gap = espace lead -> icone scroll (l'icone est accrochee sous le bloc texte en absolu : elle ne bouge rien d'autre) */
.tb-hero { --tb-hero-lift: 217px; --tb-hero-cta-lift: 96px; --tb-hero-scroll-gap: 13px; }
.tb-hero__inner { position: relative; z-index: 2; width: 100%; padding: 140px 0 48px; }
.tb-hero__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-areas: "text ctas"; column-gap: 48px; align-items: end; }
.tb-hero__text { grid-area: text; position: relative; margin-bottom: var(--tb-hero-lift); }
.tb-hero__scroll { position: absolute; left: 0; top: 100%; margin-top: var(--tb-hero-scroll-gap); }
.tb-hero__ctas { grid-area: ctas; justify-self: start; margin-bottom: var(--tb-hero-cta-lift); }
@media (min-width: 961px) and (max-width: 1365.98px) { .tb-hero--video { --tb-hero-cta-lift: 40px; } .tb-hero--video .tb-hero__ctas { grid-auto-flow: row; --wc: min(100vw - 2 * var(--tb-gutter), var(--tb-container)); margin-left: calc(57.1vw - (100vw - var(--wc)) / 2 - (var(--wc) - 48px) * 1.4 / 2.4 - 48px); } }   /* 14/10 (Eddy, iPad 1024) : CTA empiles en colonne, bord gauche sur celui du logo de la video (video a 42,5vw, logo a 28,1 % de sa largeur = 57,1vw ; CTA abaisses : lift 96 -> 40 px pour degager le bas du logo) ; corrige aussi le bouton rogne a 1024 / colle au bord a 1280 (D2) */
@media (min-width: 1366px) { .tb-hero--video .tb-hero__ctas { --wc: min(100vw - 2 * var(--tb-gutter), var(--tb-container)); justify-self: start; margin-left: 0; max-width: none; width: calc(2 * (68.4vw - (100vw - var(--wc)) / 2 - (var(--wc) - 48px) * 1.4 / 2.4 - 48px)); justify-content: center; } }   /* 19/10 soir (Eddy, grand ecran) : CTA centres sous le logo de la video (logo de 57,1vw a 79,7vw, centre 68,4vw) au lieu d etre cales a droite ; ne mangent plus la pastille cookies Complianz ; bloc elargi depuis le debut de la colonne jusqu a 2x le centre + justify-content center (pas de translate : GSAP le convertit en px figes au chargement, decale apres redimensionnement) */
.tb-hero__title { max-width: 14ch; }
.tb-hero__title .tb-line { display: block; overflow: hidden; }
.tb-hero__title em { font-style: normal; color: var(--tb-red-light); white-space: nowrap; }   /* « vos projets » toujours seul sur la 2e ligne (retour force par <br>, 21/09) */
.tb-hero__lead, .tb .tb-hero__lead { max-width: 30rem; color: rgba(255,255,255,.82); margin-top: 40px; }
/* tb-hero__meta masque le 11/09 (attribut hidden dans build.py, Eddy : charge trop le hero) - styles conserves */
.tb-hero__meta[hidden] { display: none !important; }
.tb-hero__meta {
  display: flex; gap: clamp(20px, 3vw, 48px); flex-wrap: wrap; margin-top: 56px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.18);
}
.tb-hero__meta div { font-size: .82rem; letter-spacing: .04em; color: rgba(255,255,255,.7); }
.tb-hero__meta strong { display: block; font-family: var(--tb-font-display); font-size: 1.5rem; font-weight: 600; color: #fff; letter-spacing: 0; }
/* scroll cue : dans le flux, sous le lead, aligne a gauche (mouse outline, molette rouge) */
.tb-hero__scroll {
  z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: #fff;   /* 13/10 (Eddy) : tout en plein (avant .7) */
}
.tb-hero__scroll::before { content: ""; display: block; width: 56px; height: 1px; background: #fff; margin-bottom: 8px; }   /* 13/10 : plein (avant .25) */
.tb-hero__mouse { width: 24px; height: 38px; color: #fff; overflow: visible; }
.tb-hero__wheel { stroke: var(--tb-red); animation: tb-wheel 1.8s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes tb-wheel { 0% { transform: translateY(0); opacity: 1; } 55% { transform: translateY(9px); opacity: 0; } 56% { transform: translateY(0); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
/* ---------- Hero « décor de théâtre » (07/10, idée d'Eddy, calques Codex) : page noire + picto scroll centré, au 1er scroll les 4 calques se lèvent
   du plus loin au plus près, la vidéo du logo démarre, puis le texte. Desktop ≥ 961 px seulement ; mobile = hero habituel. heroDecor() dans custom.js ---------- */
.tb-hero__decor { display: none; position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #000; }
.tb-hero__decor-box { position: absolute; left: calc((100% - var(--bw, 100%)) / 2); bottom: -4.5%; width: var(--bw, 100%); aspect-ratio: 1672 / 941; filter: saturate(1.12); }   /* 08/10 : largeur = --bw (voir .tb-hero--decor) : 100 % sauf fenetres tres larges, ou le decor retrecit pour garder la barre du portique visible ; bas a -4,5 % (bande noire sous l estrade hors cadre) ; saturation 1.12 */
.tb-hero__decor-layer { position: absolute; inset: 0; will-change: transform, opacity; }
.tb-hero__decor-layer img { display: block; width: 100%; height: 100%; max-width: none; }
.tb-hero__decor-anim { position: absolute; height: auto; aspect-ratio: 442 / 684; opacity: 0; transition: opacity .3s; pointer-events: none; }   /* 08/10 : singe anime pose sur la statue fixe ; l'image fixe s'efface quand la video tourne (.is-anim), sinon elle reste */
.tb-hero__decor-layer.is-anim .tb-hero__decor-anim { opacity: 1; }
.tb-hero__decor-layer.is-anim > img { opacity: 0; transition: opacity .3s .1s; }
/* 08/10 (essai ?tblights=1) : lumieres des 4 projecteurs eteints du calque structures (centres des lentilles fournis par Codex, en % du canevas 1672 x 941) ;
   calque au-dessus du decor (les cones eclairent l'estrade et le singe), fusion ecran, allumage en sequence a la fin du releve, respiration lente, eteint au repli */
.tb-hero__decor-lights { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity .3s; }
.tb-hero--decor.is-lit .tb-hero__decor-lights { opacity: 1; }
.tb-hero--decor.is-folded .tb-hero__decor-lights { opacity: 0; transition: opacity .35s; }
.tb-lamp { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.tb-lamp__glow, .tb-lamp__cone { position: absolute; opacity: 0; }
.tb-lamp__glow { left: 0; top: 0; width: calc(var(--bw, 100vw) * .065); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,244,222,1) 0 5.5%, rgba(255,198,130,.6) 14%, rgba(255,160,90,.17) 37%, rgba(255,140,70,0) 68%); }
.tb-lamp__cone { left: 0; top: 0; width: calc(var(--bw, 100vw) * .15); height: calc(var(--bw, 100vw) * .356); transform: translateX(-50%) rotate(var(--r, 0deg)); transform-origin: 50% 0; filter: blur(calc(var(--bw, 100vw) * .011)); }   /* tailles en largeur du decor (--bw) ; flou sur le parent, apres la decoupe du cone (clip-path sur ::before) -> bords fondus */
.tb-lamp__cone::before { content: ""; position: absolute; inset: 0; clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  background: linear-gradient(to bottom, rgba(255,222,172,.41), rgba(255,196,130,.17) 50%, rgba(255,180,110,.06) 82%, rgba(255,180,110,0)); }
.tb-hero--decor.is-lit .tb-lamp { animation: tbLightPulse var(--d, 4s) ease-in-out calc(1s + var(--i) * .45s) infinite; }   /* 08/10 (Eddy : trop statique apres l'allumage) : pulsations irregulieres, un rythme par projecteur */
.tb-hero--decor.is-lit .tb-lamp__glow, .tb-hero--decor.is-lit .tb-lamp__cone { animation: tbLampOn .9s linear calc(var(--i) * .22s) both; }
@keyframes tbLampOn { 0% { opacity: 0; } 12% { opacity: .75; } 20% { opacity: .08; } 34% { opacity: .9; } 44% { opacity: .35; } 60%, 100% { opacity: 1; } }
@keyframes tbLightPulse { 0% { opacity: 1; } 14% { opacity: .62; } 26% { opacity: .96; } 41% { opacity: .78; } 55% { opacity: 1; } 70% { opacity: .5; } 82% { opacity: .9; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tb-hero--decor.is-lit .tb-lamp, .tb-hero--decor.is-lit .tb-lamp__glow, .tb-hero--decor.is-lit .tb-lamp__cone { animation: none; opacity: 1; } }
.tb-hero__decor-layer--lights img { transform-origin: 0 0; transform: translate(-9.72%, .53%) scale(1.1715, 1.084); }   /* calage fourni avec les PNG (hero-decor.css de Codex) : ne pas toucher */
.tb-hero__start { display: none; position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%); flex-direction: column; align-items: center; gap: 14px; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.7); transition: opacity .4s; }
.tb-hero__start .tb-hero__mouse { width: 30px; height: 47px; }
/* 08/10 (Eddy) : chargement reel de la scene (5 calques + 2 videos) avant l'invitation a scroller ; les deux etats se superposent au centre */
.tb-hero__start > div { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: 14px; white-space: nowrap; transition: opacity .5s; }
.tb-hero__load-bar { display: block; width: 180px; height: 2px; background: rgba(255,255,255,.14); overflow: hidden; }
.tb-hero__load-bar i { display: block; height: 100%; background: var(--tb-red); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; transition: transform .45s cubic-bezier(.3, 0, .2, 1); }
.tb-hero__go { opacity: 0; pointer-events: none; }
.tb-hero__start.is-loaded .tb-hero__load { opacity: 0; }
.tb-hero__start.is-loaded .tb-hero__go { opacity: 1; pointer-events: auto; transition-delay: .25s; }
@media (min-width: 961px) {
  .tb-hero--decor .tb-hero__decor { display: block; }
  html.tb-js .tb-hero--decor .tb-hero__media::after { background: none; }   /* 07/10 : le voile du hero assombrissait les faisceaux et le haut des structures (enceintes « absentes », spots « tamisés ») */
  html.tb-js .tb-hero--decor .tb-hero__media picture { display: none; }
  html.tb-js .tb-hero--decor .tb-hero__video { left: calc(var(--bl) + var(--bw) * (.37 + var(--sx) + var(--vx))); width: calc(var(--bw) * .52); height: calc(var(--bw) * .2925); top: calc(91.667% - var(--bw) * (.478 - var(--sy) - var(--vy))); bottom: auto; margin-top: 0; background: transparent; -webkit-mask-image: none; mask-image: none; filter: brightness(.74) saturate(1.3); }   /* 08/10 : calee sur le decor (--bw) : haut du cadre (depart des fils) a 5,95 % de la largeur du decor sous son bord haut = dans la barre du portique, quelle que soit la fenetre ; .tb-hero__media deborde de 10 % (91,667 % = bas du hero) ; rouge charte : brightness .74 + saturate 1.3 (valide) */
  /* décor : tout le texte à gauche sur le noir (titre, lead, CTA en dessous), picto scroll en bas à gauche sous les CTA */
  .tb-hero--decor .tb-hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "ctas"; }
  .tb-hero--decor .tb-hero__text { margin-bottom: 0; }
  .tb-hero--decor .tb-hero__ctas { margin: 32px 0 var(--tb-hero-lift); }
  .tb-hero--decor .tb-hero__scroll { top: calc(100% + 120px); margin-top: 0; }   /* sous la rangée de CTA, sans plaque (Eddy : peu lisible sur l'estrade, on s'en fiche) */
  .tb-hero--decor { --tb-hero-lift: 150px; --bw: min(100vw, calc((100svh - 24px) * 1.9818)); --bl: calc((100vw - var(--bw)) / 2); --sx: .02; --sy: .025; --ty: -.015; --vx: 0; --vy: 0; --mx: .02; }
  /* 08/10 (Eddy) : position de la structure (+ logo, lumieres, texte) selon le format : --sx = decalage horizontal, --sy = descente, en fraction de --bw */
  @media (max-aspect-ratio: 17/10) { .tb-hero--decor { --sx: -.005; --sy: .005; --vx: .02; --vy: .011; --ty: -.03; } }   /* 16:10 (1440 x 900, 1280 x 800...) : structure plus a gauche (sans rogner l enceinte), remontee ; video un peu a droite et plus bas (fils au bas de la barre) */
  @media (min-aspect-ratio: 2/1) { .tb-hero--decor { --sx: -.015; --sy: .045; --mx: .012; --ty: -.03; } }   /* grand ecran large (iMac en grand) : moins a droite, plus basse */
  /* 08/10 (Eddy : les fondus font cheap) : chaque calque a son ancrage horizontal (translate, compose avec le releve GSAP qui pilote transform) :
     botanique gauche + estrade + singe colles au bord GAUCHE de l ecran, botanique droite colle au bord DROIT (fin de l estrade cachee dessous),
     structure + lumieres + video au centre, decalees de 3 % vers la droite ; --bl = marge de la boite quand le decor est plus etroit que l ecran */
  .tb-hero--decor .tb-hero__decor-layer--bota-g { translate: calc(-1 * var(--bl)) 0; }
  .tb-hero--decor .tb-hero__decor-layer--estrade { translate: calc(-1 * var(--bl) - var(--bw) * .03) 0; }
  .tb-hero--decor .tb-hero__decor-layer--statue { translate: calc(-.5 * var(--bl) + var(--bw) * var(--mx)) 0; }   /* 08/10 (Eddy : trop a gauche sur grand ecran, tronque a 1440) : a mi-chemin entre le bord de l ecran et le decor, +2 % */
  .tb-hero--decor .tb-hero__decor-layer--bota-d { translate: calc(var(--bl) + var(--bw) * .03) 0; }
  .tb-hero--decor .tb-hero__decor-layer--structures, .tb-hero--decor .tb-hero__decor-lights { translate: calc(var(--bw) * var(--sx)) calc(var(--bw) * var(--sy)); }   /* 08/10 (Eddy) : structure elargie de 300 px (4 travees au centre de la barre), decalee de 5 % a droite et descendue de 2,5 % (socles derriere l estrade, barre plus loin du haut) */   /* 08/10 (Eddy : le haut de la structure coupe sur grand ecran) : largeur du decor = la plus grande qui garde le haut de la barre (50,46 % de la largeur au-dessus du bas du hero) a 24 px du haut ; au-dela de ~2:1 le decor retrecit et se centre */
  /* 08/10 (Eddy : a 1440 / 1280 le texte chevauche le singe, le montant et la barre) : le texte est cale sur le DECOR, pas sur la grille de la page.
     Le decor est en largeur 100 % ancre en bas : barre du portique (bas) a y = H - 46,6 vw, dessus de l'estrade a y = H - 8 vw, singe jusqu'a 14,5 vw, panneaux du logo a partir de 44,7 vw.
     Zone de texte = entre la barre et l'estrade (centree verticalement, jamais sous le header), colonne de 16 a 44 vw, titre proportionnel plafonne a la taille d'origine. */
  .tb-hero--decor .tb-hero__inner { position: absolute; left: 0; right: 0; top: max(calc(100% - var(--bw) * (.4523 - var(--sy) - var(--vy) - var(--ty))), 110px); bottom: calc(var(--bw) * (.2274 - var(--sy) - var(--vy) - var(--ty)));   /* --ty : texte remonte par rapport au logo (Eddy, 08/10) */ padding: 0; display: flex; align-items: center; }   /* 08/10 (Eddy : texte aligne sur le logo) : zone = hauteur des panneaux du logo (haut a 9,17 %, bas a 31,66 % de --bw sous le bord haut du decor), texte centre dessus */
  .tb-hero--decor .tb-hero__grid.tb-container { width: calc(var(--bw) * .28); max-width: none; margin: 0 0 0 max(calc(var(--bl) + var(--bw) * (.135 + var(--sx))), calc(var(--bl) * .5 + var(--bw) * .18)); padding: 0; }   /* apres le montant gauche, jamais sur le singe */   /* colonne dans le portique : apres le montant gauche (13,2 % avec le decalage de 3 %), avant le logo (52 % depuis l elargissement de la structure) */
  .tb-hero--decor .tb-hero__title { font-size: min(calc(var(--bw) * .047), 5.5rem); }
  .tb-hero--decor .tb-hero__text .tb-eyebrow { display: none; }   /* 08/10 (Eddy) : eyebrow retire sur le decor (repete la baseline du logo du header) ; texte = titre seul, toujours centre sur le logo */
  .tb-hero--decor .tb-hero__lead, .tb .tb-hero--decor .tb-hero__lead { max-width: none; margin-top: clamp(20px, 2.2vw, 40px); font-size: clamp(1rem, 1.2vw, 1.2rem); }
  .tb-hero--decor .tb-hero__ctas { margin: clamp(20px, 2vw, 32px) 0 0; width: max-content; }
  .tb-hero--decor .tb-hero__scroll { top: calc(100% + 96px); }
  /* 08/10 (Eddy, essai ?tbepure=1) : hero epure facon grandes agences = eyebrow + titre seuls ; chapo et CTA masques sur le decor desktop
     (le bouton Contactez-nous du header = Demander un devis, le portfolio suit juste en dessous) ; mobile inchange, texte garde dans le DOM (relecture) */
  .tb-hero--decor.tb-hero--epure .tb-hero__lead, .tb-hero--decor.tb-hero--epure .tb-hero__ctas { display: none; }
  .tb-hero--decor.tb-hero--epure .tb-hero__scroll { top: calc(100% + 18px); }   /* 08/10 (Eddy) : rapprochee du titre */
  html.tb-js .tb-hero--decor:not(.is-live) .tb-hero__start { display: grid; justify-items: center; }
  html.tb-js .tb-hero--decor:not(.is-live) .tb-hero__decor-layer { transform: translateY(110%); opacity: 0; }
  html.tb-js .tb-hero--decor:not(.is-live) .tb-hero__video, html.tb-js .tb-hero--decor:not(.is-live) .tb-hero__inner { opacity: 0; }
  html.tb-js .tb-hero--decor.is-live .tb-hero__start { opacity: 0; pointer-events: none; }
}
/* 08/10 (Eddy, iPhone) : header mobile transparent en haut de la home, logo et burger blancs ; le header reste dans le flux (pas de saut au scroll),
   c'est le hero qui remonte dessous ; des qu'on defile, Impeka reprend la main (blanc, logo fonce) */
@media (max-width: 1024px) {
  html.tb-header-light.tb-at-top body.home #grve-main-responsive-header { background-color: transparent !important; box-shadow: none !important; border-color: transparent !important; position: relative; z-index: 20; }
  html.tb-header-light.tb-at-top body.home #grve-main-responsive-header img.grve-logo-responsive { content: url(/wp-content/uploads/2026/09/logo-theobora-blanc-v2.png); }
  html.tb-header-light.tb-at-top body.home #grve-main-responsive-header .grve-toggle-responsive-menu svg path { fill: #fff !important; }
  html.tb-header-light.tb-at-top body.home #grve-main-responsive-header .grve-toggle-responsive-menu { color: #fff !important; }
  body.home .tb-hero--decor { margin-top: calc(-1 * var(--tb-rh, 74px)); }
}
/* 08/10 (Eddy) : video du logo DANS le calque structures (deplacee par heroDecor) : position en % du canevas 1672 x 941, elle suit la structure (translate, releve, repli) ;
   haut du cadre = y 100 du canevas (dans la barre, d'ou partent les fils) ; desktop : x = 37 % (+ --vx) ; mobile : structure resserree, logo centre sur le portique (x 377 -> -3,45 %) */
html.tb-js .tb-hero--decor .tb-hero__decor-layer--structures .tb-hero__video, html.tb-js .tb-hero--decor .tb-hero__decor-layer--structures .tb-hero__vposter { display: block; position: absolute; left: calc((.37 + var(--vx, 0)) * 100%); top: calc(10.63% + var(--vy, 0) * 177.7%); right: auto; bottom: auto; width: 52%; height: auto; aspect-ratio: 16 / 9; max-width: none; margin: 0; object-fit: contain; transform: none; opacity: 1; background: transparent; -webkit-mask-image: none; mask-image: none; filter: brightness(.74) saturate(1.3); }
@media (max-width: 960px) { html.tb-js .tb-hero--decor .tb-hero__decor-layer--structures .tb-hero__video, html.tb-js .tb-hero--decor .tb-hero__decor-layer--structures .tb-hero__vposter { left: -3.45%; } }
html.tb-js .tb-hero--decor .tb-hero__decor-layer--structures .tb-hero__vposter { z-index: 1; pointer-events: none; }
/* 08/10 (Eddy) : hero decor sur MOBILE / tablette portrait = scene recomposee en portrait, montee automatique apres le chargement (pas de geste, pas de blocage du scroll, pas de repli) ;
   memes variables que le desktop : --bw = largeur du decor (cadre sur le logo, centre a 63 % de --bw), --bl = position de la boite ; singe et botanique droite reduits et accroches aux bords */
@media (max-width: 960px) {
  .tb-hero--decor { --bw: min(250vw, calc((100svh - 230px) * 1.9818)); --bl: calc(50vw - var(--bw) * .63); --sx: 0; --sy: .02; --vx: 0; --vy: .011; min-height: 100svh; }
  .tb-hero--decor .tb-hero__decor { display: block; }
  .tb-hero--decor .tb-hero__decor-box { left: var(--bl); }
  html.tb-js .tb-hero--decor .tb-hero__media picture { display: none; }
  html.tb-js .tb-hero--decor .tb-hero__media::after { background: none; }
  html.tb-js .tb-hero--decor .tb-hero__video { display: block; position: absolute; left: calc(var(--bl) + var(--bw) * (.37 + var(--sx) + var(--vx))); right: auto; width: calc(var(--bw) * .52); height: calc(var(--bw) * .2925); top: calc(91.667% - var(--bw) * (.478 - var(--sy) - var(--vy))); bottom: auto; margin: 0; max-width: none; aspect-ratio: auto; object-fit: contain; transform: none; background: transparent; -webkit-mask-image: none; mask-image: none; filter: brightness(.74) saturate(1.3); }
  .tb-hero--decor .tb-hero__decor-layer--bota-g { translate: calc(-1 * var(--bl)) calc(var(--bw) * .005); }   /* 08/10 (Eddy, iPhone) : descendue, coupee par le bas de l'ecran (elle flottait sur l'estrade) */
  .tb-hero--decor .tb-hero__decor-layer--estrade { translate: calc(-1 * var(--bl) - var(--bw) * .03) 0; }
  .tb-hero--decor .tb-hero__decor-layer--structures, .tb-hero--decor .tb-hero__decor-lights { translate: calc(50vw - var(--bl) - var(--bw) * .2255) calc(var(--bw) * var(--sy)); }   /* structure resserree (image mobile) centree sur le logo : centre du portique = x 377 du canevas */
  .tb-hero--decor .tb-hero__decor-layer--statue { scale: .78; translate: calc(6px - var(--bl) - var(--bw) * .1201) 0; }   /* 78 % autour de sa base, bord gauche a 6 px (Eddy : plus grand, plus a droite) */
  .tb-hero--decor .tb-hero__decor-layer--bota-d { scale: .6; translate: calc(100vw - var(--bl) - var(--bw) * .8 + 12px) 0; }   /* reduite a 60 %, 44 px au-dela du bord droit : coupee par l'ecran (Eddy : elle flottait tronquee) */
  .tb-hero__decor-layer picture { display: contents; }
  .tb-hero--decor .tb-hero__inner { position: absolute; left: 0; right: 0; top: var(--tb-rh, 74px); bottom: calc(var(--bw) * .5099 - 4.5% + 12px); padding: 0; z-index: 3; display: flex; align-items: center; }   /* 08/10 (Eddy) : titre centre dans le noir entre le header et la barre du portique (haut de la barre = 104,5 % - 50,99 % bw) */
  .tb-hero--decor .tb-hero__text .tb-eyebrow { display: none !important; }   /* 08/10 (Eddy) : pas d'eyebrow sur mobile (repete la baseline du logo) */
  .tb-hero--decor .tb-hero__grid.tb-container { display: block; }
  .tb-hero--decor .tb-hero__title { font-size: clamp(2.6rem, 13vw, 4.2rem); line-height: 1.02; }   /* 08/10 (Eddy) : plus gros, centre (comble le vide au-dessus du portique) */
  .tb-hero--decor .tb-hero__text .tb-eyebrow { white-space: nowrap; font-size: min(2.6vw, .78rem); letter-spacing: .16em; flex-direction: column; align-items: center; gap: 12px; margin-inline: auto; width: max-content; }   /* 08/10 (Eddy) : centre, tiret rouge SOUS le texte */
  .tb-hero--decor .tb-hero__text .tb-eyebrow::before { order: 2; width: 40px; }
  .tb-hero--decor .tb-hero__text { text-align: center; }
  .tb-hero--decor .tb-hero__title { max-width: none; margin-inline: auto; }
  .tb-hero--decor .tb-hero__lead, .tb .tb-hero--decor .tb-hero__lead, .tb-hero--decor .tb-hero__ctas, .tb-hero--decor .tb-hero__scroll { display: none; }
  html.tb-js .tb-hero--decor:not(.is-live) .tb-hero__start { display: grid; justify-items: center; }
  .tb-hero--decor .tb-hero__go { display: none; }   /* pas d'invitation a scroller : la scene se monte seule */
  html.tb-js .tb-hero--decor.is-live .tb-hero__start { opacity: 0; pointer-events: none; }
  html.tb-js .tb-hero--decor:not(.is-live) .tb-hero__decor-layer, html.tb-js .tb-hero--decor:not(.is-live) .tb-hero__video, html.tb-js .tb-hero--decor:not(.is-live) .tb-hero__inner { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { html.tb-js .tb-hero--decor:not(.is-live) .tb-hero__decor-layer, html.tb-js .tb-hero--decor:not(.is-live) .tb-hero__inner, html.tb-js .tb-hero--decor:not(.is-live) .tb-hero__video { transform: none; opacity: 1; } html.tb-js .tb-hero--decor .tb-hero__start { display: none; } }
@keyframes tb-scrollline { 0% { top: -100%; } 60% { top: 100%; } 100% { top: 100%; } }
@media (max-width: 960px) { .tb-hero__grain { display: none; } }
@media (max-width: 960px) {   /* 19/10 soir (Eddy, DevTools a 960) : 860 -> 960 = meme seuil que la video mobile (tb-hero--mvideo) ; entre 861 et 960 la grille restait en 2 colonnes (titre coince, CTA hors ecran) */
  .tb-hero { --tb-hero-lift: 0px; --tb-hero-cta-lift: 0px; --tb-hero-scroll-gap: 24px; }
  .tb-hero__grid { grid-template-columns: 1fr; grid-template-areas: "text" "ctas"; row-gap: 0; }
  .tb .tb-hero__lead { margin-top: 24px; }
  .tb-hero__ctas { margin-top: 24px; }
  .tb-hero__scroll { position: static; margin-top: var(--tb-hero-scroll-gap); }   /* mobile : dans le flux, sous le lead, avant les CTA */
  .tb-hero__inner { padding: 120px 0 40px; }
}

/* Interior page hero */
.tb-page-hero { position: relative; overflow: hidden; color: #fff; background: var(--tb-black); padding: clamp(150px, 20vw, 220px) 0 clamp(60px, 7vw, 100px); }
.tb-page-hero__bg { position: absolute; inset: -10% 0; z-index: 0; }
.tb-page-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 1; filter: saturate(.8); }   /* 25/09 : image a 1, c'est le voile qui assombrit (comme les fiches projet) ; avant .45 + degrade */
.tb-page-hero__bg::after { content: ""; position: absolute; inset: 0; background: #000; opacity: .35; mix-blend-mode: multiply; }   /* 13/10 (Eddy) : .7 -> .35 apres test sur Habillage & Covering (sans voile = trop vif) ; Eddy 25/09 : noir uni .7 en multiply sur tous les heros de page (avant : degrade .15 -> .95) */
.page-id-51 .tb-page-hero__bg::after { opacity: .5; }   /* 14/10 (Eddy) : page Services seulement, fond tres charge (surtout sur mobile) : voile .35 -> .5, mobile et desktop */
/* 25/09 (Eddy) : meme hauteur pour tous les heros de page sur desktop (Atelier / Logistique etaient plus bas que Covering, Services, Contact : hauteur = contenu) ; fiches projet exclues */
@media (min-width: 861px) { .tb-page-hero:not(.tb-proj-hero) { min-height: min(78vh, 760px); display: flex; flex-direction: column; justify-content: flex-end; } }   /* meme formule que Contact / A propos (page-id-42 / 35) ; 26/09 00h15 (Eddy) : texte cale en bas partout */
.tb-page-hero .tb-container { position: relative; z-index: 1; }
.tb-page-hero__crumb { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.85); margin-bottom: 20px; display: flex; gap: 10px; }   /* .85 partout (Eddy 22-23/09) */
.tb-page-hero__crumb a:hover { color: #fff; }
.tb-page-hero__crumb { flex-wrap: wrap; row-gap: 4px; }
.tb-page-hero__crumb > * { white-space: nowrap; }   /* 24/09 : mobile, les items flex cassaient les mots (ACCUEI / L) */
.tb-page-hero__eyebrow { margin-bottom: 18px; }   /* eyebrow optionnel des heros de page (page_hero(eb=...), 25/09 : Services) */
.tb-page-hero__grid { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 46rem; align-items: start; }   /* 24/09 (Eddy) : regle generique = une colonne, texte a gauche, accroche sous le titre (reglages valides sur Contact) */
.tb-page-hero .tb-h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); }   /* titre reduit sur toutes les pages interieures (fiches projet : 5.2rem via .tb-proj-hero) */
.tb-page-hero__grid .tb-lead { color: #fff; }   /* 13/10 (Eddy) : blanc pur (avant .8, terne avec le voile a .35) */
.tb-page-hero--light { background: var(--tb-off); color: var(--tb-ink); }
.tb-page-hero--light .tb-page-hero__crumb { color: var(--tb-gray-500); }
.tb-page-hero--light .tb-page-hero__grid .tb-lead { color: var(--tb-gray-700); }
@media (max-width: 860px) { .tb-page-hero__grid { grid-template-columns: 1fr; gap: 24px; } }

/* Split text lines (JS) */
.tb-lines .tb-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.tb-lines .tb-line > div { display: block; }

/* --------------------------------------------------------------------------
   Marquee
   -------------------------------------------------------------------------- */
.tb-marquee { overflow: hidden; white-space: nowrap; padding: 22px 0; border-top: 1px solid rgba(127,127,127,.2); border-bottom: 1px solid rgba(127,127,127,.2); }
.tb-marquee__track { display: inline-flex; gap: 0; animation: tb-marquee 40s linear infinite; will-change: transform; }
.tb-marquee:hover .tb-marquee__track, .tb-marquee.is-off .tb-marquee__track { animation-play-state: paused; }
.tb-marquee__item { display: inline-flex; align-items: center; gap: 28px; padding: 0 28px; font-family: var(--tb-font-display); font-size: clamp(1.1rem, 2vw, 1.6rem); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.tb-marquee__item::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tb-red); }
.tb-marquee--big .tb-marquee__item { font-size: clamp(3rem, 9vw, 9rem); padding: 0 40px; letter-spacing: -.02em; text-transform: none; }
.tb-marquee--big { border: 0; padding: 0; }
.tb-marquee--big .tb-marquee__item::after { width: 18px; height: 18px; }
.tb-marquee--ghost .tb-marquee__item { -webkit-text-stroke: 1px currentColor; color: transparent; }
.tb-marquee--ghost .tb-marquee__item:nth-child(even) { -webkit-text-stroke: 0; color: inherit; }
@keyframes tb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   Manifesto + stats
   -------------------------------------------------------------------------- */
.tb-manifesto { font-family: var(--tb-font-display); font-size: clamp(1.6rem, 3.4vw, 3rem); font-weight: 500; line-height: 1.22; letter-spacing: -.015em; }
.tb-manifesto .tb-w { display: inline-block; opacity: .38; transition: opacity .4s; }
.tb-manifesto .tb-w.is-on { opacity: 1; }
/* Highlighted phrase: a marker-like red bar behind the lower part of the letters, drawn in once all its words are on */
.tb-manifesto .tb-hl { font-style: normal; background-image: linear-gradient(var(--tb-red), var(--tb-red)); background-repeat: no-repeat; background-size: 0% .3em; background-position: 0 84%; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .7s var(--tb-ease) .15s; }
/* The capital J of Jost dips below the baseline: set it in Inter, bold and red, so it sits on the line */
.tb-manifesto .tb-j { font-family: var(--tb-font-body); font-weight: 800; }
.tb-manifesto .tb-hl.is-on { background-size: 100% .3em; }
/* Notre metier (21/09, Eddy) : a gauche le titre en display (« Vous imaginez, nous fabriquons. ») puis le corps de texte en Inter, revele mot a mot
   avec des barres rouges fines ; a droite le visuel en paysage, grand. Projecteur : le rough (fond blanc) est toujours visible, la photo au-dessus n'apparait
   que dans un cercle qui suit le pointeur sur le bloc texte. Mobile : texte puis les deux images empilees, sans effet. */
.tb-metier { position: relative; }
.tb-metier__title { display: block; }
.tb-metier__body { display: block; font-family: var(--tb-font-body); font-size: clamp(1.05rem, 1.35vw, 1.25rem); font-weight: 400; line-height: 1.6; letter-spacing: 0; margin-top: 24px; max-width: 36rem; }
.tb-metier__body .tb-hl { font-weight: 600; background-size: 0% .34em; background-position: 0 100%; }   /* marqueur epais a cheval sur la ligne de base, sous les mots (Eddy 21/09) */
.tb-metier__body .tb-hl.is-on { background-size: 100% .34em; }
.tb-metier__text .tb-eyebrow { margin-bottom: 24px; }
.tb-metier__img { display: grid; gap: 16px; margin-top: 32px; }
.tb-metier__rough, .tb-metier__photo { overflow: hidden; border-radius: var(--tb-radius); background: #fff; }
.tb-metier__img img { display: block; width: 100%; height: auto; }
/* Legende sous le visuel + lien video (modale sombre), CTA A propos sous le texte (Eddy 21/09) */
.tb-metier__cta { margin-top: 48px; }
.tb-metier__fig { margin: 0; }
.tb-metier__caption { display: block; margin-top: 16px; font-size: .9rem; line-height: 1.5; color: var(--tb-muted, #6b6a66); }
.tb-metier__caption span { display: block; max-width: 38rem; }
.tb a.tb-metier__play { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font-family: var(--tb-font-display); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tb-ink); text-decoration: none; transition: color .25s; }
.tb a.tb-metier__play svg { width: 34px; height: 34px; color: var(--tb-red); transition: transform .3s var(--tb-ease); }
.tb a.tb-metier__play:hover { color: var(--tb-red); }
.tb a.tb-metier__play:hover svg { transform: scale(1.1); }
/* Modale video : lecteur 9/16 (Reel) centre sur fond noir, meme habillage que la visite virtuelle */
.tb-video { display: none; --tb-video-w: min(100%, 440px, calc((100svh - 236px) * 9 / 16)); }   /* largeur du lecteur deduite de la hauteur VISIBLE (svh : barres de Chrome iOS deduites) : bandeau 56 + credit ~90 + marges ; tout tient sans couper */
.tb-video[open] { display: grid; place-items: center; height: 100svh; height: 100dvh; }
/* Le bandeau (eyebrow + fermer) est AU-DESSUS du lecteur, jamais par-dessus : sur iOS les commandes natives (plein ecran, PiP, son) occupent le haut de la video (Eddy 21/09) */
.tb-video__dialog { position: relative; display: flex; flex-direction: column; width: var(--tb-video-w); max-height: 100%; background: #000; border-radius: var(--tb-radius); overflow: hidden; box-shadow: 0 40px 120px rgba(0,0,0,.6); }
.tb-video__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 12px 12px 20px; color: #fff; }
.tb-video__head .tb-eyebrow { margin: 0; white-space: nowrap; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.tb-video__head .tb-eyebrow > span { overflow: hidden; text-overflow: ellipsis; }
.tb-video__head .tb-vtour__close { flex: 0 0 44px; margin-left: 0; }
@media (max-width: 480px) { .tb-video__head { padding: 10px 10px 10px 16px; } .tb-video__head .tb-eyebrow { font-size: .68rem; letter-spacing: .14em; } }
.tb-video__player { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: #000; }
.tb-video .tb-vtour__credit { position: static; display: flex; align-items: stretch; gap: 16px; margin-top: 14px; width: var(--tb-video-w); padding: 10px 16px 10px 18px; text-align: left; font-size: .8rem; line-height: 1.45; text-shadow: none; pointer-events: auto; }   /* plaque .tb-glass de la charte : verre noir 75 %, angles carres, barre rouge 4 px a cheval sur le bord gauche (Eddy 21/09) */
/* Mobile / tablette portrait : la modale occupe quasi tout l'ecran (5 px de flou autour), la video prend toute la hauteur restante (Eddy 21/09) */
@media (max-width: 860px) {
  .tb-vtour.tb-video { padding: 5px; }
  .tb-video[open] { display: flex; flex-direction: column; align-items: stretch; justify-content: stretch; }
  .tb-video__dialog { width: 100%; flex: 1 1 auto; min-height: 0; max-height: none; }
  .tb-video__player { flex: 1 1 auto; min-height: 0; height: auto; aspect-ratio: auto; object-fit: cover; }
  .tb-video .tb-vtour__credit { width: 100%; max-width: none; margin-top: 5px; flex: 0 0 auto; }
}
.tb-video[open] { grid-auto-rows: max-content; align-content: center; }
/* 19/10 (Nolwenn, portables sous Edge, ecran peu haut) : lecteur trop etroit (≈ 300 px) car le credit sous la video mangeait la hauteur ; en paysage le credit passe A DROITE du lecteur, la largeur ne deduit plus que le bandeau et les marges */
@media (min-width: 861px) and (min-aspect-ratio: 1/1) {
  .tb-video { --tb-video-w: min(480px, calc((100svh - 112px) * 9 / 16)); }
  .tb-video .tb-vtour__credit { position: absolute; top: 50%; left: calc(50% + var(--tb-video-w) / 2 + 20px); width: min(260px, calc(50vw - var(--tb-video-w) / 2 - 40px)); height: max-content; align-self: start; margin-top: 0; transform: translateY(-50%); }   /* 19/10 (Eddy) : lecteur centre dans l'ecran, credit a sa droite, centre en hauteur */
}
@media (min-width: 961px) {
  .tb-metier { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
  .tb-metier__text { position: relative; z-index: 1; }
  .tb-metier__img { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--tb-radius); display: block; }
  .tb-metier__rough, .tb-metier__photo { position: absolute; inset: 0; border-radius: 0; }
  .tb-metier__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}
@media (min-width: 961px) and (hover: hover) {
  .tb-metier__photo { --mx: 50%; --my: 50%; --r: 0px; clip-path: circle(var(--r) at var(--mx) var(--my)); }
}
.tb-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: clamp(48px, 6vw, 88px); padding-top: 40px; border-top: 1px solid rgba(127,127,127,.25); }
.tb-stat strong { display: block; font-family: var(--tb-font-display); font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.tb-stat strong sup { font-size: .45em; vertical-align: top; margin-left: 2px; color: var(--tb-red); }
.tb-stat > span { display: block; margin-top: 10px; font-size: .9rem; color: var(--tb-gray-500); }
.tb-dark .tb-stat > span { color: var(--tb-gray-300); }
@media (max-width: 860px) { .tb-stats { grid-template-columns: repeat(2, 1fr); } }

/* --------------------------------------------------------------------------
   Service cards
   -------------------------------------------------------------------------- */
.tb-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: rgba(127,127,127,.18); border: 1px solid rgba(127,127,127,.18); }
.tb-card {
  position: relative; display: flex; flex-direction: column; gap: 28px; padding: clamp(28px, 3vw, 44px);
  background: var(--tb-white); min-height: 420px; overflow: hidden; isolation: isolate;
  transition: color .5s var(--tb-ease);
}
.tb-dark .tb-card { background: var(--tb-ink-2); color: #fff; }
.tb-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tb-ink); transform: translateY(101%); transition: transform .6s var(--tb-ease); }
.tb-card:hover::before { transform: translateY(0); }
.tb-card:hover { color: #fff; }
.tb-card__num { font-family: var(--tb-font-display); font-size: .8rem; letter-spacing: .2em; color: var(--tb-red); }
.tb-card:hover .tb-card__num, .tb-card:hover .tb-card__icon { color: var(--tb-red-light); }
.tb-card__icon { width: 64px; height: 64px; color: var(--tb-red); }
.tb-card__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tb-card h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); }
.tb-card p { color: var(--tb-gray-500); transition: color .5s; }
.tb-card:hover p { color: rgba(255,255,255,.75); }
.tb-card .tb-link { margin-top: auto; }
.tb-card__img { position: absolute; inset: 0; z-index: -2; opacity: 0; transition: opacity .6s var(--tb-ease), transform 1.2s var(--tb-ease); transform: scale(1.08); }
.tb-card__img img { width: 100%; height: 100%; object-fit: cover; }
.tb-card:hover .tb-card__img { opacity: .28; transform: scale(1); }
.tb-card--link { cursor: pointer; }
@media (max-width: 960px) { .tb-services { grid-template-columns: 1fr; } .tb-card { min-height: 0; } }

/* --------------------------------------------------------------------------
   Scene: expertises (intro fading to dark + pinned horizontal 3D deck of full-width panels)
   Default = stacked sticky cards (mobile, no JS, reduced motion). .tb-scene--pin = desktop GSAP mode.
   -------------------------------------------------------------------------- */
.tb-scene { --scene-bg: #4a0a18; --scene-fg: #ffffff; --scene-muted: #ffffff; --scene-eb: #ffffff;   /* rouge profond + textes blancs fixes (Eddy 21/09), seul le fond va vers le noir */ --stage-l: clamp(16px, 3vw, 48px); --stage-r: clamp(72px, 9vw, 130px); --stage-t: 14vh; --panel-pad: clamp(20px, 4vw, 64px); position: relative; background: var(--scene-bg); color: var(--scene-fg); }
.tb-scene .tb-muted { color: var(--scene-muted); }
.tb-scene .tb-eyebrow { color: var(--scene-eb); }
.tb-scene .tb-eyebrow::before { background: var(--tb-red); }   /* trait rouge, texte blanc */
.tb-scene__intro { padding: var(--tb-section) 0 clamp(32px, 4vw, 56px); }
.tb-scene__intro .tb-head { margin-bottom: 0; }
/* Intro (Eddy 21/09) : titre en haut sur 3/4 du conteneur, puis les deux paragraphes en deux colonnes (une seule sous 860 px) */
.tb-scene__title { max-width: 75%; }
.tb-scene__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px clamp(32px, 4vw, 64px); margin-top: clamp(28px, 3vw, 44px); }
.tb-scene__cols .tb-lead { margin: 0; }
.tb-scene__cols strong { font-weight: 600; color: #fff; }
@media (max-width: 860px) { .tb-scene__title { max-width: none; } .tb-scene__cols { grid-template-columns: 1fr; } }
.tb-scene__stage { position: relative; padding: 0 0 clamp(16px, 3vw, 48px); }
.tb-scene__panels { display: grid; gap: 16px; padding: 0 clamp(16px, 3vw, 48px); }
.tb-panel {
  position: sticky; top: 100px; height: calc(100svh - 116px); min-height: 520px;
  border-radius: 10px; overflow: hidden; background: var(--tb-ink-2); color: #fff;
  box-shadow: 0 -20px 60px rgba(0,0,0,.35);
}
.tb-panel__bg { position: absolute; inset: 0; }
.tb-panel__bg img { width: 100%; height: 100%; object-fit: cover; }
.tb-panel__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,11,12,.78) 0%, rgba(11,11,12,.38) 55%, rgba(11,11,12,.12) 100%), linear-gradient(0deg, rgba(11,11,12,.7) 0%, rgba(11,11,12,0) 55%); }
.tb-panel__dim { position: absolute; inset: 0; z-index: 3; background: var(--tb-black); opacity: 0; pointer-events: none; }
/* Ghost word: SVG text so the outline can draw itself (dash) and fill on hover */
.tb-panel__ghost { position: absolute; z-index: 1; right: 0; bottom: 0; width: 100%; height: 1em; font-size: clamp(5rem, 15vw, 15rem); overflow: visible; pointer-events: none; display: none; }
.tb-panel__ghost text { font-family: var(--tb-font-display); font-weight: 800; letter-spacing: -.045em; fill: rgba(255,255,255,0); stroke: rgba(255,255,255,.38); stroke-width: 1px; stroke-linejoin: round; stroke-dasharray: 1800; stroke-dashoffset: 1800; pointer-events: all; cursor: default; transition: fill .7s var(--tb-ease), stroke .7s; }
.tb-panel__ghost text:hover { fill: rgba(255,255,255,.92); stroke: rgba(255,255,255,.92); }
.tb-scene--static .tb-panel__ghost text { stroke-dashoffset: 0; }
.tb-panel__inner { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; padding: var(--panel-pad); pointer-events: none; }
.tb-panel__inner > * { pointer-events: auto; }
.tb-panel__index { position: absolute; top: var(--panel-pad); left: var(--panel-pad); font-family: var(--tb-font-display); font-size: clamp(2rem, 4vw, 3.6rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.tb-panel__index span { font-size: .4em; font-weight: 500; color: rgba(255,255,255,.5); margin-left: .15em; }
.tb-panel__glass {
  position: relative; overflow: visible; width: min(100%, 560px); padding: clamp(24px, 3vw, 44px); border-radius: 0;
  display: flex; flex-direction: column; gap: 20px;
  background: rgba(11,11,12,.62); border: 0;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  transition: transform .7s var(--tb-ease), box-shadow .7s var(--tb-ease), border-color .7s;
}
.tb-panel__glass:hover { transform: translateY(-4px) scale(1.012); box-shadow: 0 40px 90px rgba(0,0,0,.45); }
.tb-panel__neon { position: absolute; left: -2.5px; top: 25%; bottom: 25%; width: 5px; background: var(--tb-red); transform: scaleY(0); transform-origin: top; }
@keyframes tb-neon-pulse { 0%, 100% { box-shadow: 0 0 12px 2px rgba(255,77,106,.8), 0 0 40px 6px rgba(205,17,51,.45); } 50% { box-shadow: 0 0 18px 4px rgba(255,77,106,1), 0 0 70px 12px rgba(205,17,51,.6); } }
/* Travelling neon along the border (SVG injected by JS) */
.tb-panel__trail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; }
.tb-panel__trail path { fill: none; stroke-linecap: butt; stroke-linejoin: miter; }
.tb-panel__trail .tb-trail-glow { display: none; }
.tb-panel__trail .tb-trail-core { stroke: var(--tb-red); stroke-width: 5; }
.tb-panel__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tb-panel__num { font-family: var(--tb-font-display); font-size: 1rem; font-weight: 600; letter-spacing: .24em; color: var(--tb-red); }
.tb-panel__icon { width: 52px; height: 52px; color: #fff; }
.tb-panel__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* Eddy's filled pictograms (inline SVG, fill = currentColor), a bit larger than the line icons */
.tb-panel__icon--svg { width: auto; height: 100px; display: flex; align-items: flex-end; gap: 18px; }   /* Eddy 11/09 : 100 px */
.tb-panel__icon--svg svg { width: auto; height: 100%; fill: currentColor; stroke: none; }
/* stroke exports (svg[data-outline]): constant 2px screen stroke whatever the viewBox scale */
.tb-panel__icon--svg svg[data-outline] { shape-rendering: geometricPrecision; }   /* epaisseurs = celles du fichier Illustrator (Eddy 11/09), rendues a l'echelle : 1 px dessine = 1 px a 100 px de haut */
.tb-panel__icon--illu { width: clamp(120px, 11vw, 160px); height: auto; }
.tb-panel__icon--illu img { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 24px rgba(0,0,0,.5)); }
.tb-panel h3 { font-size: clamp(1.7rem, 3vw, 2.8rem); letter-spacing: -.025em; }
.tb-panel p { color: rgba(255,255,255,.8); max-width: 34rem; }
.tb-scene__scan, .tb-scene__nav { display: none; }
.tb-scene--static .tb-panel__neon { transform: scaleY(1); }

/* Desktop pinned mode (set by JS): deck fans out horizontally to the right */
.tb-scene--pin .tb-scene__stage { height: 100vh; height: 100svh; padding: 0; overflow: hidden; }
.tb-scene--pin .tb-scene__panels { position: absolute; inset: 0; display: block; padding: 0; perspective: 1600px; }
.tb-scene--pin .tb-panel { position: absolute; top: var(--stage-t); bottom: 7vh; left: var(--stage-l); right: var(--stage-r); height: auto; min-height: 0; box-shadow: 0 40px 90px rgba(0,0,0,.45); will-change: transform; backface-visibility: hidden; }
.tb-scene--pin .tb-panel__bg img { transform: scale(1.12); }
.tb-scene--pin .tb-panel__ghost { display: block; }
.tb-scene--pin .tb-panel__glass { -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); background: rgb(0 0 0 / 75%); }
.tb-scene--pin .tb-scene__scan { display: none; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; z-index: 5; pointer-events: none; opacity: 0; background: linear-gradient(180deg, transparent, var(--tb-red-light) 30%, #fff 50%, var(--tb-red-light) 70%, transparent); box-shadow: 0 0 22px 3px rgba(255,77,106,.6); }
.tb-scene--pin .tb-scene__nav { display: flex; position: absolute; top: calc(var(--stage-t) + var(--panel-pad)); right: calc(var(--stage-r) + var(--panel-pad)); z-index: 6; flex-direction: column; gap: 14px; align-items: flex-end; padding: 22px 24px; border-radius: 0; background: rgb(0 0 0 / 85%); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); border: 0; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.tb-scene__track { position: absolute; right: 12px; top: 22px; bottom: 22px; width: 1px; background: rgba(255,255,255,.2); }
.tb-scene__track b { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--tb-red); transform: scaleY(0); transform-origin: top; }
.tb-scene__nav button { appearance: none; background: none; border: 0; padding: 4px 0; margin: 0; cursor: pointer; display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.6); font-family: var(--tb-font-display); font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; transition: color .4s; }
.tb-scene__nav button span { color: rgba(255,255,255,.35); transition: color .4s; }
.tb-scene__nav button::after { content: ""; width: 20px; height: 1px; background: currentColor; transition: width .5s var(--tb-ease), background .4s; }
.tb-scene__nav button:hover { color: #fff; }
.tb-scene__nav button.is-active { color: #fff; }
.tb-scene__nav button.is-active span { color: var(--tb-red); }
.tb-scene__nav button.is-active::after { width: 44px; background: var(--tb-red); }
@media (max-width: 960px) {
  .tb-panel { top: 84px; height: calc(100svh - 100px); }
  .tb-panel__glass { width: 100%; }
  .tb-panel__index { font-size: 1.6rem; }
}

/* --------------------------------------------------------------------------
   Custom cursor for draggable zones ([data-tb-cursor="drag"]): red translucent disc + two solid triangles
   -------------------------------------------------------------------------- */
.tb-cursor { position: fixed; left: 0; top: 0; z-index: 99990; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: rgba(205,17,51,.8); outline: 2px solid var(--tb-red); outline-offset: 8px; pointer-events: none; opacity: 0; will-change: transform; transition: outline-offset .35s var(--tb-ease), background .3s; }   /* scale/opacity are driven by GSAP (it owns the transform) */
.tb-cursor::before, .tb-cursor::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -8px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.tb-cursor::before { right: 100%; margin-right: 18px; border-right: 11px solid var(--tb-red); }
.tb-cursor::after { left: 100%; margin-left: 18px; border-left: 11px solid var(--tb-red); }
/* pressed: the disc tightens (GSAP), the ring opens, the triangles come in */
.tb-cursor.is-down { outline-offset: 16px; background: rgba(205,17,51,.92); }
.tb-cursor.is-down::before { transform: translateX(10px); } .tb-cursor.is-down::after { transform: translateX(-10px); }
/* "spot" variant (text spotlight zones): the same disc and ring, without the drag triangles */
.tb-cursor[data-variant="spot"]::before, .tb-cursor[data-variant="spot"]::after { display: none; }
@media (hover: hover) and (pointer: fine) { html.tb-js [data-tb-cursor], html.tb-js [data-tb-cursor] * { cursor: none !important; } }
@media (hover: none), (pointer: coarse) { .tb-cursor { display: none; } }
.tb-showcase__viewport.is-dragging .tb-work { pointer-events: none; }
.tb-work { scroll-snap-align: start; }
.tb-showcase__tail { flex: 0 0 100vw; height: 1px; pointer-events: none; }   /* toutes largeurs (etait limite au desktop : sur mobile le clone de fin ne pouvait pas se caler, la boucle s'arretait apres la tuile 6, Eddy 24/09) */
/* v5 : bouton « Voir le projet » a droite du cartouche, revele au survol de la tuile (toujours visible au doigt), seul lien de la tuile */
.tb-work__glass > div { min-width: 0; flex: 1 1 auto; }
.tb-work__go.tb-btn { margin-left: auto; flex: 0 0 auto; min-height: 0; padding: 10px 16px; font-size: .72rem; letter-spacing: .1em; gap: 8px; white-space: nowrap; opacity: 1; transform: none; transition: opacity .35s, transform .5s var(--tb-ease), color .4s var(--tb-ease), border-color .4s var(--tb-ease); }
.tb-work__go.tb-btn svg { width: 14px; height: 14px; }
/* 14/10 (Eddy) : bouton rouge visible des le depart (il n'apparaissait plus qu'au survol de la tuile active) ; son etat de survol se declenche sur tout le cartouche (@media hover plus bas) */
@media (hover: none) { .tb-work__go.tb-btn { opacity: 1; transform: none; } }
@media (hover: hover) {   /* 14/10 (Eddy) : le cartouche entier ouvre la fiche (showcase()) -> son survol donne l'etat de survol du bouton (fond blanc, texte encre, fleche decalee) et le curseur systeme (cartouche dans OFF de cursor()) */
  .tb-work.is-active .tb-work__glass { cursor: pointer; }
  .tb .tb-work.is-active .tb-work__glass:hover a.tb-work__go.tb-btn { opacity: 1; transform: none; color: var(--tb-ink); border-color: #fff; }
  .tb-work.is-active .tb-work__glass:hover .tb-work__go.tb-btn::before { transform: translateY(0); }
  .tb-work.is-active .tb-work__glass:hover .tb-work__go.tb-btn svg { transform: translateX(4px); }
}
@media (max-width: 960px) {   /* au doigt : le bouton passe sous le texte (a cote, il ecrasait le titre sur 375 px), barre rouge en absolu sur toute la hauteur */
  .tb-work__glass { flex-wrap: wrap; gap: 10px 14px; }
  .tb-work .tb-work__glass i { position: absolute; left: -2px; top: 0; bottom: 0; margin: 0; width: 4px; }   /* specificite > la regle de base (plus bas dans le fichier) qui garde margin-left: -20px */
  .tb-work__glass > div { flex: 1 1 100%; }
  .tb-work__go.tb-btn { margin: 0; padding: 9px 14px; font-size: .68rem; }
  .tb-work__glass > div > span { display: none; }   /* mobile : nom du client seul, le titre du projet faisait trop de lignes (Eddy 24/09) */
}
/* indice au survol (option C, 24/09) : « Voir le projet » en haut a droite de la tuile, pour dire « ici on clique » */
.tb-work__hint { position: absolute; top: 20px; right: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; color: #fff; font-family: var(--tb-font-display); font-weight: 600; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 1px 12px rgba(0,0,0,.6); opacity: 0; transform: translateY(-6px); transition: opacity .35s, transform .5s var(--tb-ease); pointer-events: none; }
.tb-work__hint::after { content: ""; position: absolute; left: 0; right: 22px; bottom: -4px; height: 1px; background: #fff; }
.tb-work__hint svg { width: 14px; height: 14px; }
@media (hover: hover) { .tb-work:hover .tb-work__hint, .tb-work:focus-visible .tb-work__hint { opacity: 1; transform: none; } }
.tb-showcase__bg-layer { will-change: opacity; }   /* le flou de 46 px est rasterise une fois, pas a chaque image */

/* Feature grid (small items) */
.tb-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(28px, 4vw, 56px) clamp(24px, 3vw, 48px); }
.tb-features--3 { grid-template-columns: repeat(3, 1fr); }   /* 6 elements -> 2 rangees de 3 (Eddy 14/09) */
@media (max-width: 860px) { .tb-features--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tb-features--3 { grid-template-columns: 1fr; } }
@media (min-width: 561px) and (max-width: 1279px) { .tb-features:has(> .tb-feature:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }   /* 14/10 (Eddy, iPad paysage, Developpement durable) : 4 engagements en 2 x 2 (auto-fit donnait 3 + 1) */
.tb-feature__icon { width: 48px; height: 48px; color: var(--tb-red); margin-bottom: 20px; }
.tb-feature__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tb-dark .tb-feature__icon { color: var(--tb-red-light); }
.tb-feature h3 { margin-bottom: 10px; font-size: 1.2rem; }
.tb-feature p { color: var(--tb-gray-500); font-size: .95rem; }
.tb-dark .tb-feature p { color: var(--tb-gray-300); }
.tb-feature--bordered { padding-top: 24px; border-top: 1px solid rgba(127,127,127,.3); }

/* --------------------------------------------------------------------------
   Showcase scene (horizontal scroll pinned on desktop): backdrop fading to the active work,
   3D-tilted plates, glass captions with neon, ghost word, HUD counter + client name
   -------------------------------------------------------------------------- */
.tb-showcase { position: relative; overflow: hidden; --tb-showcase-pb: 200px; }   /* espace sous les plaques (viewport + carte CTA), Eddy 11/09 : plus d'air en bas */
.tb-showcase__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.tb-showcase__bg-layer { position: absolute; inset: -8%; background-size: cover; background-position: center; opacity: 0; transform: scale(1.05); filter: blur(46px) saturate(1.15) brightness(.55); transition: opacity 1.2s var(--tb-ease); }
.tb-showcase__bg-layer.is-on { opacity: .42; }
.tb-showcase__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,12,.92) 0%, rgba(11,11,12,.55) 45%, rgba(11,11,12,.9) 100%); }
.tb-showcase__ghost { position: absolute; z-index: 1; right: 0; top: 40px; width: 100%; height: 1em; font-size: clamp(5rem, 14vw, 14rem); overflow: visible; pointer-events: none; }
.tb-showcase__ghost text { font-family: var(--tb-font-display); font-weight: 800; letter-spacing: -.045em; fill: rgba(255,255,255,0); stroke: rgba(255,255,255,.16); stroke-width: 1px; }
.tb-showcase__head, .tb-showcase__viewport, .tb-showcase__hud { position: relative; z-index: 2; }
.tb-showcase__head { padding: calc(var(--tb-section) * .7 + 64px) 0 28px; }
.tb-showcase__head .tb-head { margin-bottom: 0; }
/* the plates live in a clipped viewport that ends before the fixed CTA card: nothing ever passes behind the CTA */
.tb-showcase__viewport { padding-bottom: var(--tb-showcase-pb); }
@media (min-width: 961px) {
  /* 24/09 soir (Eddy) : deux tuiles a l'ecran, la 1re decalee du titre, la 2e qui passe sous le CTA rouge avec un fondu ; le viewport prend toute la largeur */
  html.tb-js .tb-showcase__viewport { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-left: calc(var(--tb-edge) + 80px); overscroll-behavior-x: contain; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--tb-edge) - var(--tb-cta-w, 400px) - 300px), rgba(0,0,0,.28) calc(100% - var(--tb-edge) - var(--tb-cta-w, 400px) - 120px), rgba(0,0,0,.05) calc(100% - var(--tb-edge) - var(--tb-cta-w, 400px)), transparent calc(100% - var(--tb-edge) - var(--tb-cta-w, 400px) + 60px));
    mask-image: linear-gradient(90deg, #000 calc(100% - var(--tb-edge) - var(--tb-cta-w, 400px) - 300px), rgba(0,0,0,.28) calc(100% - var(--tb-edge) - var(--tb-cta-w, 400px) - 120px), rgba(0,0,0,.05) calc(100% - var(--tb-edge) - var(--tb-cta-w, 400px)), transparent calc(100% - var(--tb-edge) - var(--tb-cta-w, 400px) + 60px)); }   /* fondu de la pochette : commence 300 px avant le CTA (14/10, Eddy : 640 px trop large sur laptop, le bouton rouge « Voir le projet » etait assombri a 1440 ; avant : 640 / 260 px, plus sombre des le bord gauche de la tuile) */
  html.tb-js .tb-showcase__track { padding-left: calc(var(--tb-edge) + 80px); padding-right: 0; gap: max(80px, calc(20vw - 239px)); }   /* 1re tuile decalee de 80 px par rapport au titre, ecart resserre (Eddy 24/09 soir) */   /* ecart cale sur le CTA : environ un tiers de la 2e tuile (projetee) hors de la pochette (Eddy : « 1/3 pas plus ») */
  html.tb-js .tb-work:not(.tb-work--cta) { width: 42vw; height: auto; aspect-ratio: 16 / 10; overflow: visible; box-shadow: none; background: transparent; }   /* pas le CTA rouge (il est aussi une .tb-work) */
  html.tb-js .tb-work__in { position: absolute; inset: 0; overflow: hidden; background: var(--tb-ink-2); box-shadow: 0 30px 70px rgba(0,0,0,.45); transform-origin: right center; will-change: transform; }   /* calque 3D : le snap mesure .tb-work, jamais transformee */   /* largeur proportionnelle : sur 27" la 2e tuile doit passer sous le CTA */
  html.tb-js .tb-showcase__head { margin-bottom: clamp(48px, 5vw, 80px); }   /* plus d'air entre le titre et le slider (Eddy : 80 px maxi) */
  html.tb-js .tb-showcase__viewport::-webkit-scrollbar { display: none; }
  html.tb-js .tb-showcase__track { padding-right: var(--tb-edge); }
  /* soft edge: plates fade to transparent before the zone ends (mask, the backdrop shows through) */
  /* the fade is applied by JS on the one plate crossing the zone's right edge only (mask on the viewport dimmed every plate) */
  /* plates not fully inside the zone are blurred as a whole (no half-sharp plates) */
  html.tb-js .tb-work { transition: filter .7s var(--tb-ease); }
  html.tb-js .tb-work.is-offstage { filter: none; }   /* flou par plaque retiré (Eddy 11/09 soir) */
}
/* plates start on the same left line as the title (centred 1280px container), whatever the screen width */
.tb-showcase { --tb-edge: var(--tb-gutter); }   /* Eddy 11/09 : alignement sur la gouttière, pas sur le conteneur du titre */
.tb-showcase__track { display: flex; align-items: flex-end; gap: clamp(16px, 2vw, 32px); padding: 0 0 0 var(--tb-edge); }
/* plates stay clear (Eddy 11/09: no blur/dark overlay per plate); only the right edge of the zone blurs and fades out */
.tb-work { position: relative; flex: 0 0 auto; width: auto; height: min(47vh, 500px); aspect-ratio: 4 / 3; overflow: hidden; background: var(--tb-ink-2); border-radius: 0; box-shadow: 0 30px 70px rgba(0,0,0,.45); transform-style: preserve-3d; }
.tb-work__media { position: absolute; inset: 0; overflow: hidden; }
.tb-work img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--tb-ease); }
.tb-work:hover img { transform: scale(1.06); }
.tb-work__glass { position: absolute; left: 18px; bottom: 18px; right: 18px; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 0; background: rgb(0 0 0 / 75%); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); border: 0; color: #fff; }
.tb-work__glass { overflow: visible; }
.tb-work__glass i { flex: 0 0 4px; align-self: stretch; margin-left: -20px; background: var(--tb-red); }   /* 4 px straddling the card edge: 2 px out, 2 px in, like the expertises bar */
.tb-work__glass strong { display: block; font-family: var(--tb-font-display); font-size: 1.1rem; font-weight: 600; line-height: 1.1; }
.tb-work__glass span { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.tb-work__tag { position: absolute; top: 18px; left: 18px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: rgba(255,255,255,.92); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }   /* blanc translucide comme les pilules du hero des fiches (Eddy 24/09) */
@media (max-width: 960px) { .tb-work__tag { display: none; } }   /* 08/10 (Eddy) : pas de pastille categorie sur les tuiles du slider Realisations (home) en mobile */
.tb-showcase__hud { position: absolute; left: max(var(--tb-gutter), calc((100vw - var(--tb-container)) / 2)); right: max(var(--tb-gutter), calc((100vw - var(--tb-container)) / 2)); bottom: 72px; display: none; align-items: flex-end; gap: 28px; color: #fff; }
.tb-showcase__count { font-family: var(--tb-font-display); font-weight: 700; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1; letter-spacing: -.03em; }
.tb-showcase__count span { font-size: .4em; font-weight: 500; color: rgba(255,255,255,.5); margin-left: .15em; }
.tb-showcase__client { font-family: var(--tb-font-display); font-size: .82rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--tb-red); padding-bottom: 6px; }
/* arrows + dots, at the right of the HUD */
.tb-showcase__arrows { display: flex; gap: 10px; margin-left: auto; margin-right: 22px; margin-bottom: 4px; }
.tb-showcase__arrow { appearance: none; width: 44px; height: 44px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.45); background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; transition: border-color .3s, background .3s, color .3s, opacity .3s; }
.tb-showcase__arrow svg { width: 18px; height: 18px; }
.tb-showcase__arrow:hover { border-color: var(--tb-red); background: var(--tb-red); }
.tb-showcase__arrow[disabled] { opacity: .3; cursor: default; border-color: rgba(255,255,255,.45); background: transparent; }
/* dots: circles, the active one becomes a filled pill */
.tb-showcase__dots { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }   /* 19/10 soir (Lighthouse target-size) : gap 10 -> 14 = centres a 24 px ; zone de toucher agrandie par ::before */
.tb-showcase__dots button { position: relative; }
.tb-showcase__dots button::before { content: ""; position: absolute; inset: -7px; }
.tb-showcase__dots button { appearance: none; border: 1.5px solid rgba(255,255,255,.55); background: transparent; width: 10px; height: 10px; border-radius: 999px; padding: 0; margin: 0; cursor: pointer; transition: width .35s var(--tb-ease), background .3s, border-color .3s; }
.tb-showcase__dots button:hover { border-color: #fff; }
.tb-showcase__dots button[aria-selected="true"] { width: 30px; background: var(--tb-red); border-color: var(--tb-red); }
@media (min-width: 961px) { html.tb-js .tb-showcase__hud { display: flex; } }
@media (max-width: 960px) {
  .tb-showcase__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--tb-gutter); -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: var(--tb-section); }
  .tb-showcase__viewport::-webkit-scrollbar { display: none; }
  .tb-showcase__track { padding-right: var(--tb-gutter); }
  .tb-work { scroll-snap-align: start; width: 78vw !important; height: auto !important; aspect-ratio: 4 / 3 !important; }
  .tb-work__glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(11,11,12,.7); }
  .tb-work__glass { cursor: pointer; }   /* 14/10 : tout le cartouche ouvre la fiche (showcase()) */
}
@media (max-width: 600px) {   /* 14/10 (Eddy, etape 2) : tuiles du slider Realisations de la home en portrait 3:4 sur mobile, comme la page Realisations ; images en pleine definition (sizes 150vw dans le shortcode) */
  .tb-work:not(.tb-work--cta) { aspect-ratio: 2 / 3 !important; }   /* 3:4 -> 2:3 (Eddy : plus haut sur la home ; la page Realisations reste en 3:4) */
  .tb-showcase__ghost { font-size: 4rem; top: 24px; }
}

/* Showcase CTA card (no nested link) */
/* CTA card: always visible at the right edge of the pinned scene, so the portfolio is one click away without scrolling the whole track */
.tb-work--cta { display: grid; place-items: center; background: var(--tb-red); color: #fff; text-align: center; padding: 24px; }
@media (min-width: 961px) { html.tb-js .tb-work--cta { position: absolute; z-index: 3; right: var(--tb-edge); bottom: calc(var(--tb-showcase-pb) - 26px); height: calc(26.25vw + 52px); aspect-ratio: 3 / 4; width: auto; margin: 0; } }   /* « pochette » : depasse de 26 px au-dessus et au-dessous des tuiles 16/10 de 42vw (26.25vw de haut) */
@media (max-width: 960px) { .tb-work--cta { display: grid; width: calc(100% - 2 * var(--tb-gutter)) !important; aspect-ratio: auto !important; height: auto; margin: 0 var(--tb-gutter) var(--tb-section); padding: 40px 24px; } }
.tb-work--cta .tb-h3 { color: #fff; margin-bottom: 16px; }
.tb-work--cta .tb-link { color: #fff; }
.tb-work--cta > div { position: relative; z-index: 1; }
/* marching-ants lines crossing the top of the CTA card */
.tb-work__ants { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tb-work__ants--tl, .tb-work__ants--tr { display: none; inset: auto; top: 0; }
.tb-work__ants--tl { left: 0; width: 150px; height: 150px; }
.tb-work__ants--tr { right: 0; width: 88px; height: 88px; }
.tb-work__ants path { fill: none; stroke: #fff; stroke-linecap: round; }
.tb-work__ants .solid--a { stroke-width: 1.5; opacity: .6; }
.tb-work__ants .solid--b { stroke-width: 1; opacity: .45; }
.tb-work__ants .ants--a { stroke-width: 1; opacity: .85; stroke-dasharray: 6 6; animation: tb-ants 1.6s linear infinite; }
.tb-work__ants .ants--b { stroke-width: 2; opacity: .5; stroke-dasharray: 4 9; animation: tb-ants 2.4s linear infinite reverse; }
@keyframes tb-ants { to { stroke-dashoffset: -28; } }
@media (prefers-reduced-motion: reduce) { .tb-work__ants .ants { animation: none; } }
.tb-work--cta:hover { background: var(--tb-red-dark); }

/* Gallery grid (interior pages) */
.tb-gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(12px, 1.5vw, 24px); }
.tb-gallery figure { margin: 0; overflow: hidden; border-radius: var(--tb-radius); background: var(--tb-off-2); position: relative; }
.tb-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--tb-ease); }
.tb-gallery figure:hover img { transform: scale(1.05); }
.tb-gallery figcaption { position: absolute; left: 16px; bottom: 14px; padding: 6px 12px; background: rgba(0,0,0,.6); color: #fff; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; border-radius: 999px; }
.tb-gallery .g-8 { grid-column: span 8; aspect-ratio: 16/10; }
.tb-gallery .g-4 { grid-column: span 4; aspect-ratio: 4/5; }
.tb-gallery .g-6 { grid-column: span 6; aspect-ratio: 3/2; }
.tb-gallery .g-12 { grid-column: span 12; aspect-ratio: 21/9; }
.tb-gallery figure img { position: absolute; left: 0; top: -7%; height: 114%; }   /* 07/10 : le parallaxe (±6 %) decouvrait le fond beige en haut des vignettes */
/* ---------- Atelier de production > Ce que nous faisons : 4 cards photo plein fond (07/10, Eddy) ---------- */
.tb-trades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px) clamp(20px, 2.5vw, 36px); margin-top: clamp(32px, 4vw, 56px); }   /* 2 x 2, grandes cards (Eddy 07/10 soir) */
.tb-trade { position: relative; outline: none; container-type: inline-size; }
/* flip horizontal (07/10 soir, Eddy) : face avant = le geste, face arriere = la piece finie seule ; titre + texte SOUS la photo ; survol desktop, tap / clavier ailleurs (is-flipped) */
.tb-trade__media { position: relative; aspect-ratio: 3 / 2; perspective: 1600px; }
.tb-trade__in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.tb-trade__face, .tb-trade__back { position: absolute; inset: 0; overflow: hidden; border-radius: var(--tb-radius); background: var(--tb-ink); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tb-trade__back { transform: rotateY(180deg); }
.tb-trade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tb-trade.is-flipped .tb-trade__in { transform: rotateY(180deg); }
@media (hover: hover) { .tb-trade:hover .tb-trade__in, .tb-trade:focus-visible .tb-trade__in { transform: rotateY(180deg); } }
@media (prefers-reduced-motion: reduce) { .tb-trade__in { transition: none; } }
/* mobile / tactile : pastille « Voir la pièce finie » sur la photo (le tap retourne la card), masquée sur les appareils a survol et une fois retournee */
.tb-trade__hint { display: none; position: absolute; right: 12px; bottom: 12px; z-index: 2; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; background: rgba(0,0,0,.62); color: #fff; font-size: .74rem; font-weight: 600; letter-spacing: .04em; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: none; }
.tb-trade__hint svg { width: 14px; height: 14px; }
@media (hover: none) { .tb-trade__hint { display: inline-flex; } .tb-trade.is-flipped .tb-trade__hint { display: none; } }
.tb-trade__body { padding: 22px 8px 0; text-align: center; }
.tb-trade__bar { display: block; width: 28px; height: 4px; background: var(--tb-red); margin: 0 auto 14px; }
.tb-trade h3 { display: block; margin: 0 auto 10px; font-family: var(--tb-font-display); font-weight: 600; font-size: clamp(1.05rem, 4.6cqw, 1.9rem); line-height: 1.12; letter-spacing: -.01em; color: var(--tb-ink); white-space: nowrap; }   /* 07/10 (Eddy) : une seule ligne sur tous les devices, taille liee a la largeur de la card */
.tb-trade p { margin: 0 auto; max-width: 46ch; font-size: clamp(.95rem, 1.1vw, 1.05rem); line-height: 1.55; color: var(--tb-gray-500); text-wrap: pretty; }
@media (max-width: 960px) {   /* rangee a glisser (regle mobile du site) : snapDots() dans metiers() */
  .tb-trades.tb-trades--swipe { display: flex; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: var(--tb-gutter); gap: 14px; padding: 0 var(--tb-gutter) 8px; margin-left: calc(-1 * var(--tb-gutter)); margin-right: calc(-1 * var(--tb-gutter)); scrollbar-width: none; }
  .tb-trades.tb-trades--swipe::-webkit-scrollbar { display: none; }
  .tb-trades.tb-trades--swipe .tb-trade { flex: 0 0 min(86vw, 440px); scroll-snap-align: start; }
}
@media (max-width: 760px) { .tb-gallery .g-8, .tb-gallery .g-4, .tb-gallery .g-6, .tb-gallery .g-12 { grid-column: span 12; aspect-ratio: 4/3; } }

/* --------------------------------------------------------------------------
   Process (sticky title + steps)
   -------------------------------------------------------------------------- */
.tb-process { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.tb-process__sticky { position: sticky; top: 120px; }
.tb-process-scene { position: relative; overflow: hidden; overflow: clip; }   /* 14/10 : clip (et non hidden) pour que la colonne sticky colle en mode repli ; hidden reste en secours pour les vieux navigateurs */
body:has(.tb-process-scene) { overflow: visible; overflow-x: clip; }   /* 14/10 : Impeka met overflow:hidden sur body, ce qui casse position:sticky (meme correctif que les fiches) */
/* 14/10 (Eddy, iPad 1024) : Methode non epinglee (> 960 px mais trop haute pour l'ecran) = chaque visuel dans son etape, sous le paragraphe, sans pastille ; la colonne de gauche reste sticky. Figures clonees par process() (pas dans le HTML : la relecture compterait les visuels en double) */
.tb-process--inline .tb-process__visual { display: none; }
.tb-process-scene--swipe:has(.tb-step__media) .tb-process__visual { display: none; }   /* 14/10 : tablette portrait, visuels dans les cartes a glisser */
.tb-process-scene--swipe .tb-step__media { margin-top: 16px; }
.tb-step__media { margin: 20px 0 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--tb-radius); background: var(--tb-off-2); opacity: .45; transition: opacity .5s var(--tb-ease); }
.tb-step.is-active .tb-step__media { opacity: 1; }
.is-pin .tb-step__media { display: none; }   /* 14/10 : figures clonees gardees apres une rotation vers le mode epingle, masquees */
.tb-step__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tb-process--inline .tb-step { grid-template-columns: max-content 1fr; gap: 12px; }   /* 14/10 (Eddy, iPad 1024) : numero plus pres du contenu (80 -> 45 px, gap 24 -> 12), visuels plus larges */
.tb-process__ghost { position: absolute; z-index: 0; left: -.04em; bottom: -.06em; width: 100%; height: 1em; font-size: clamp(5rem, 14vw, 14rem); overflow: visible; pointer-events: none; }   /* Eddy 21/09 : en bas a gauche (le haut est coupe par le header sticky, la droite est chargee de texte), taille 14 rem, il passe SOUS le slider photo */
.tb-process__ghost text { font-family: var(--tb-font-display); font-weight: 800; letter-spacing: -.045em; fill: rgba(17,17,17,0); stroke: rgba(17,17,17,.07); stroke-width: 1px; }
.tb-process-scene .tb-container { position: relative; z-index: 1; }
.tb-process__visual { z-index: 1; }   /* le visuel recouvre le mot fantome : effet de traits de coupe */
/* Step visual (replaces the big counter): stacked images crossfaded by JS, small counter pill in the corner */
.tb-process__visual { position: relative; margin-top: 32px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--tb-radius); background: var(--tb-off-2); }
.tb-process__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity .7s var(--tb-ease), transform 1.2s var(--tb-ease); }
.tb-process__visual img.is-on { opacity: 1; transform: none; }
.tb-process__count { position: absolute; left: 16px; top: 16px; z-index: 1; padding: 8px 14px; border-radius: 999px; background: rgb(0 0 0 / 60%); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: rgba(255,255,255,.55); font-family: var(--tb-font-display); font-weight: 600; font-size: .85rem; letter-spacing: .08em; }
.tb-process__count span { color: #fff; font-size: 1.15em; }
/* Pinned mode (desktop, section fits the viewport): the whole section is on screen before the steps start, then
   the steps advance on a fixed scroll distance with snap - no step can be skipped by a strong wheel gesture */
.tb-process-scene.is-pin { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; padding: clamp(112px, 14vh, 136px) 0 clamp(56px, 9vh, 88px); }   /* Eddy 21/09 : plus d'air en haut (mot fantome) et en bas ; le visuel (flex:1) absorbe */
/* compact type in pinned mode so the section fits 100vh down to ~700px-high viewports */
.tb-process-scene.is-pin .tb-h2 { font-size: clamp(2rem, 5.2vh, 3.2rem); }
.tb-process-scene.is-pin .tb-lead { font-size: clamp(1rem, 2.1vh, 1.25rem); margin-top: clamp(12px, 2vh, 24px) !important; }
.tb-process-scene.is-pin .tb-step h3 { font-size: clamp(1.15rem, 2.5vh, 1.5rem); margin-bottom: 6px; }
.tb-process-scene.is-pin .tb-step p { font-size: clamp(.9rem, 1.7vh, 1rem); line-height: 1.5; }
.tb-process-scene.is-pin .tb-step__num { font-size: clamp(1.8rem, 3.6vh, 2.8rem); }
.tb-process-scene.is-pin .tb-step__dot { top: calc(clamp(14px, 2.4vh, 26px) + .6em); }
.tb-process-scene.is-pin > .tb-container { display: flex; flex: 1; }
.tb-process-scene.is-pin .tb-process { flex: 1; align-items: stretch; }
.tb-process-scene.is-pin .tb-process__sticky { position: static; display: flex; flex-direction: column; }
.tb-process-scene.is-pin .tb-process__visual { flex: 1; aspect-ratio: auto; min-height: 140px; }
.tb-process-scene.is-pin .tb-step { padding: clamp(14px, 2.4vh, 26px) 0; }
.tb-process-scene.is-pin .tb-process > div:last-child { align-self: center; width: 100%; }   /* steps column centred against the full-height left column */
.tb-process-scene.is-pin .tb-steps__rail { bottom: auto; }   /* geometry set by JS: from the first dot to the last */
.tb-process__big { margin-top: clamp(32px, 4vw, 56px); font-family: var(--tb-font-display); font-weight: 800; font-size: clamp(5rem, 9vw, 9rem); line-height: 1; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px rgba(17,17,17,.28); display: flex; align-items: baseline; gap: .1em; }
.tb-process__big span { display: inline-block; }
.tb-process__big small { font-size: .28em; font-weight: 600; letter-spacing: 0; -webkit-text-stroke: 0; color: var(--tb-gray-300); }
/* steps on a rail (flat, no glow - Eddy 11/09); the rail is 2px at x=8..10, dots are centred on it (x=9) */
.tb-steps { position: relative; padding-left: 34px; }
.tb-steps__rail { position: absolute; left: 8px; top: 40px; bottom: 40px; width: 2px; background: rgba(127,127,127,.3); }
.tb-steps__rail i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--tb-red); transform: scaleY(0); transform-origin: top; }
.tb-step { position: relative; display: grid; grid-template-columns: 80px 1fr; gap: 24px; padding: 36px 0; border-top: 1px solid rgba(127,127,127,.3); }
/* inactive steps dim their number and text only - the dot keeps its solid white fill and grey outline */
.tb-step__num, .tb-step > div { transition: opacity .6s var(--tb-ease); }
.tb-step:not(.is-active) .tb-step__num, .tb-step:not(.is-active) > div { opacity: .45; }
/* whole row clickable: pointer, hover highlight (text brightens, dot outline turns red), focus ring */
.tb-step.is-clickable { cursor: pointer; outline: none; }
.tb-step.is-clickable:hover:not(.is-active) .tb-step__num, .tb-step.is-clickable:hover:not(.is-active) > div { opacity: .85; }
.tb-step.is-clickable:hover .tb-step__dot { border-color: var(--tb-red); }
.tb-step.is-clickable:focus-visible .tb-step__dot { box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px var(--tb-red); }
.tb-step:last-child { border-bottom: 1px solid rgba(127,127,127,.3); }
.tb-step__dot { position: absolute; z-index: 1; left: -34px; top: 49px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(127,127,127,.5); background: #fff; transition: background .4s, border-color .4s, box-shadow .4s; }
.tb-step.is-active .tb-step__dot { background: var(--tb-red); border-color: var(--tb-red); box-shadow: 0 0 0 3px var(--tb-white), 0 0 0 4.5px var(--tb-red); }   /* flat ring: gap + red outline, like the cursor */
.tb-off .tb-step.is-active .tb-step__dot { box-shadow: 0 0 0 3px var(--tb-off), 0 0 0 4.5px var(--tb-red); }
.tb-step__num { white-space: nowrap; font-family: var(--tb-font-display); font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 700; color: var(--tb-red); line-height: 1; letter-spacing: -.03em; }
.tb-step h3 { font-size: 1.5rem; margin-bottom: 10px; }
.tb-step p { color: var(--tb-gray-500); }
.tb-dark .tb-step p { color: var(--tb-gray-300); }
.tb-dark .tb-step__num { color: var(--tb-red-light); }
html.tb-js [data-tb-reveal].tb-step.is-in { opacity: 1; }
@media (max-width: 860px) { .tb-process { grid-template-columns: 1fr; } .tb-process__sticky { position: static; } .tb-step { grid-template-columns: 56px 1fr; } .tb-process__big, .tb-process__visual { display: none; } .tb-process__ghost { font-size: 4rem; } }
@media (prefers-reduced-motion: reduce) { .tb-step { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   Split (image + text)
   -------------------------------------------------------------------------- */
.tb-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.tb-split--rev .tb-split__media { order: 2; }
.tb-split__media { position: relative; overflow: hidden; border-radius: var(--tb-radius); aspect-ratio: 4 / 5; background: var(--tb-off-2); }
.tb-split__media--wide { aspect-ratio: 4 / 3; }
/* flat brand-red offset shadow, bottom-left (Eddy 11/09, home Atelier) */
.tb-split__media--shadow { overflow: visible; box-shadow: none; }
.tb-split__media--shadow img { border-radius: var(--tb-radius); }
/* a red plate smaller than the photo, anchored bottom-left and offset 18px: reads as a cast shadow, not an outline */
.tb-split__media--shadow::before { content: ""; position: absolute; left: -18px; bottom: -78px; width: 82%; height: 106%; background: var(--tb-red); border-radius: var(--tb-radius); z-index: 0; }   /* reglages Eddy (devtools, 11/09) */
.tb-split__media--shadow img { position: relative; z-index: 1; }
/* the white badge straddles the photo's bottom edge (24px inside, the rest outside, over the red plate); one bold black line */
.tb-split__media--shadow .tb-split__badge { z-index: 2; top: calc(100% - 24px); bottom: auto; white-space: nowrap; font-family: var(--tb-font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; color: var(--tb-ink); padding: 16px 22px; }
.tb-split__media--shadow .tb-split__badge strong { display: inline; font-size: 1em; letter-spacing: inherit; }
.tb-split__media--shadow .tb-split__badge span { font-size: 1em; color: inherit; margin-left: .28em; }
@media (max-width: 860px) { .tb-split__media--shadow { margin-bottom: 96px; } }   /* room for the plate (78px) + badge below the photo when stacked */
.tb-split__media img { width: 100%; height: 100%; object-fit: cover; }
/* Video muette en boucle a la place de la photo (home Atelier, capsule 4 de la captation du 25/09) : format paysage 16/9, memes plaque rouge et badge */
/* .tb-split__media--video : pas de ratio propre -> 4/5 par defaut (home, capsule 21 portrait), 4/3 avec --wide (A propos, capsule 4), 16/9 dans .tb-split-lg (V2 home) */
/* Essai 25/09 (comparaison) : variante paysage, colonne media elargie a 1.5fr et video 16/9 (section .tb-split-lg, ATELIER_VARIANT = "paysage4" dans build.py) */
.tb-split-lg .tb-split { grid-template-columns: 1fr 1.5fr; }
.tb-split-lg .tb-split__media--video { aspect-ratio: 16 / 9; }
@media (max-width: 860px) { .tb-split-lg .tb-split { grid-template-columns: 1fr; } }
.tb-split__video { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--tb-radius); background: var(--tb-off-2); }
.tb-split__media .tb-ph { position: absolute; inset: 0; width: 100%; height: 100%; }
.tb-split__badge { position: absolute; left: 24px; bottom: 24px; padding: 18px 22px; background: #fff; color: var(--tb-ink); border-radius: var(--tb-radius); box-shadow: 0 20px 50px rgba(0,0,0,.18); }
.tb-split__badge strong { display: block; font-family: var(--tb-font-display); font-size: 2rem; line-height: 1; letter-spacing: -.03em; }
.tb-split__badge span { font-size: .8rem; color: var(--tb-gray-500); }
.tb-split ul.tb-checks { margin-top: 28px; display: grid; gap: 12px; }
.tb-checks li { display: flex; gap: 14px; align-items: flex-start; }
.tb-checks li::before { content: ""; flex: 0 0 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--tb-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat; }
@media (max-width: 860px) { .tb-split { grid-template-columns: 1fr; } .tb-split--rev .tb-split__media { order: 0; } }

/* Generative SVG placeholders */
.tb-ph { display: block; width: 100%; height: 100%; }
.tb-ph--ratio { aspect-ratio: 4/3; height: auto; }

/* --------------------------------------------------------------------------
   Timeline
   -------------------------------------------------------------------------- */
.tb-timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding-top: 48px; }
.tb-timeline__line { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(127,127,127,.25); overflow: hidden; }
.tb-timeline__line i { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: var(--tb-red); transform: scaleX(0); transform-origin: left; }
.tb-milestone { position: relative; }
.tb-milestone::before { content: ""; position: absolute; top: -55px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--tb-red); box-shadow: 0 0 0 6px rgba(205,17,51,.15); }
.tb-milestone strong { display: block; font-family: var(--tb-font-display); font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; margin-bottom: 14px; }
.tb-milestone h3 { font-size: 1.1rem; margin-bottom: 8px; }
.tb-milestone p { font-size: .95rem; color: var(--tb-gray-500); }
.tb-dark .tb-milestone p { color: var(--tb-gray-300); }
@media (max-width: 860px) {
  .tb-timeline { grid-template-columns: 1fr; padding-top: 0; padding-left: 32px; gap: 40px; }
  .tb-timeline__line { top: 0; bottom: 0; left: 0; right: auto; width: 2px; height: auto; }
  .tb-timeline__line i { transform: scaleY(0); transform-origin: top; width: 100%; height: 100%; }
  .tb-milestone::before { top: 6px; left: -37px; }
}

/* --------------------------------------------------------------------------
   Testimonial + client logos
   -------------------------------------------------------------------------- */
.tb-quote { position: relative; padding-left: clamp(0px, 4vw, 48px); }
.tb-quote__mark { width: 56px; height: 56px; color: var(--tb-red); margin-bottom: 28px; }
.tb-quote blockquote { margin: 0; font-family: var(--tb-font-display); font-size: clamp(1.5rem, 3vw, 2.6rem); font-weight: 500; line-height: 1.25; letter-spacing: -.015em; }
.tb-quote figcaption { margin-top: 28px; display: flex; align-items: center; gap: 16px; font-size: .95rem; }
.tb-quote figcaption i { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--tb-red), #4a0b16); flex: 0 0 auto; }
.tb-quote figcaption strong { display: block; font-weight: 600; }
.tb-quote figcaption span { color: var(--tb-gray-500); }
/* --------------------------------------------------------------------------
   Testimonials: intro column + one square black card holding a fading slider of quotes (flat red mark, red author bar)
   -------------------------------------------------------------------------- */
.tb-testimonials { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.tb-testimonials__card { position: relative; background: var(--tb-ink); color: #fff; padding: clamp(32px, 4vw, 56px); border-radius: 0; }
.tb-testimonials__mark { width: 48px; height: 48px; color: var(--tb-red); margin-bottom: 24px; display: block; }
.tb-testimonials__track { display: grid; }
.tb-testimonial { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(14px); transition: opacity .6s var(--tb-ease), transform .6s var(--tb-ease); pointer-events: none; }
.tb-testimonial.is-active { opacity: 1; transform: none; pointer-events: auto; }
.tb-testimonial blockquote { margin: 0; padding: 0; border: 0; background: none; font-style: normal; font-family: var(--tb-font-display); font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.tb-testimonial blockquote::before, .tb-testimonial blockquote::after { display: none; }   /* Impeka's blockquote bar / quote glyphs */
/* 06/10 (Eddy) : tous les témoignages à la même hauteur de base = citation limitée à 6 lignes, « Lire plus » (bouton créé par le JS si la citation est tronquée) */
.tb-testimonial blockquote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.tb-testimonial.is-open blockquote { -webkit-line-clamp: unset; display: block; overflow: visible; }
.tb-testimonial__more { appearance: none; border: 0; background: none; padding: 0; margin: 14px 0 0; cursor: pointer; font: inherit; font-size: .92rem; font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--tb-red); display: none; }
.tb-testimonial.has-more .tb-testimonial__more { display: inline-block; }
.tb-testimonial__more:hover { text-decoration-color: #fff; }
.tb-testimonial figcaption { margin-top: 28px; display: flex; align-items: stretch; gap: 16px; font-size: .95rem; }
.tb-testimonial figcaption i { flex: 0 0 4px; background: var(--tb-red); }   /* flat red bar, the charter's mark */
.tb-testimonial figcaption strong { display: block; font-weight: 600; }
.tb-testimonial figcaption span { color: rgba(255,255,255,.6); }
.tb-testimonials__nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); }
.tb-testimonials__dots { display: flex; align-items: center; gap: 10px; }
.tb-testimonials__dots button { appearance: none; border: 1.5px solid rgba(255,255,255,.55); background: transparent; width: 10px; height: 10px; border-radius: 999px; padding: 0; margin: 0; cursor: pointer; transition: width .35s var(--tb-ease), background .3s, border-color .3s; }
.tb-testimonials__dots button:hover { border-color: #fff; }
.tb-testimonials__dots button[aria-selected="true"] { width: 30px; background: var(--tb-red); border-color: var(--tb-red); }
.tb-testimonials__arrows { display: flex; gap: 10px; }
.tb-testimonials__arrow { appearance: none; width: 44px; height: 44px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.45); background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; transition: border-color .3s, background .3s; }
.tb-testimonials__arrow svg { width: 18px; height: 18px; }
.tb-testimonials__arrow:hover { border-color: var(--tb-red); background: var(--tb-red); }
@media (max-width: 860px) { .tb-testimonials { grid-template-columns: 1fr; } }
/* Client references: white tiles, black logos, light border, no hover (not links). Mobile: one swipable row that overflows */
.tb-logos-head { margin-top: clamp(56px, 7vw, 104px); }
.tb-logos-head .tb-eyebrow { margin-bottom: 1rem; }
.tb-logos-head .tb-h3 { margin: 0; }
.tb-logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; margin-top: 28px; }
.tb-logos div { display: grid; place-items: center; height: 96px; background: #fff; border: 1px solid rgba(127,127,127,.22); border-radius: 0; }
/* client logos (not links): black on white tiles, light grey border, no hover; fitted to a common visual weight */
.tb-logos div { padding: 0 22px; }
.tb-logos img { display: block; width: auto; height: auto; max-width: 100%; max-height: 38px; object-fit: contain; }
.tb-logos div.is-sq img { max-height: 54px; }
.tb-logos div.is-lg img { max-height: 50px; }   /* 01/10 (Eddy) : Charal, Kerimedical un cran plus grands */
.tb-logos div.is-sq.is-lg img { max-height: 68px; }   /* Head & Shoulders, MCC, G'Vine, Groupama, Skoda */
.tb-logos div.is-xl img { max-height: 60px; }   /* larges deux crans : Charal, Kerimedical, Weldom */
.tb-logos div.is-sq.is-xl img { max-height: 78px; }   /* Jack Daniel's */   /* logos compacts / carres (ratio < 1.6, classe posee par build.py) : Renault, G'Vine, Oatly, Dash, Lenor, Groupama, Skoda, Head & Shoulders, MCC, Jack Daniel's, Weldom */
.tb-logos img { filter: grayscale(1); opacity: .85; transition: filter .3s, opacity .3s; }   /* 01/10 (Eddy) : niveaux de gris, couleur au survol de la tuile */
.tb-logos div:hover img { filter: none; opacity: 1; }
@media (hover: none) { .tb-logos img { filter: grayscale(1); } }   /* tactile : reste en gris (pas de survol) */
@media (max-width: 860px) {
  .tb-logos { display: flex; gap: 2px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: calc(-1 * var(--tb-gutter)); margin-right: calc(-1 * var(--tb-gutter)); padding: 0 var(--tb-gutter); }
  .tb-logos::-webkit-scrollbar { display: none; }
  .tb-logos div { flex: 0 0 auto; min-width: 180px; padding: 0 28px; scroll-snap-align: start; }
}

/* --------------------------------------------------------------------------
   News cards
   -------------------------------------------------------------------------- */
.tb-news { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 40px); }
.tb-post { display: flex; flex-direction: column; gap: 18px; }
.tb-post__media { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--tb-radius); background: var(--tb-off-2); }
.tb-post__media img, .tb-post__media svg { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--tb-ease); }
.tb-post:hover .tb-post__media img, .tb-post:hover .tb-post__media svg { transform: scale(1.04); }
.tb-post__meta { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tb-gray-500); display: flex; gap: 14px; }
.tb-post__meta b { color: var(--tb-red); font-weight: 600; }
.tb-post h3 { font-size: 1.35rem; line-height: 1.2; }
.tb-post h3 a { background-image: linear-gradient(currentColor, currentColor); background-size: 0 1.5px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .5s var(--tb-ease); }
.tb-post:hover h3 a { background-size: 100% 1.5px; }
@media (max-width: 860px) { .tb-news { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.tb-cta { position: relative; overflow: hidden; background: var(--tb-red); color: #fff; }
.tb-cta__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; padding: var(--tb-section) 0; }
.tb-cta h2 { font-size: clamp(2.2rem, 5.5vw, 5rem); }
.tb-cta h2 { line-height: 1.12; }   /* 14/10 (Eddy) : interligne des titres de bandeau CTA (1.02 de base : les lignes se touchaient, surtout sur 3 lignes en mobile), toutes largeurs */
@media (max-width: 600px) { .tb-cta h2 { font-size: 1.95rem; } }   /* 14/10 (Eddy, iPhone) : 35 -> 31 px, « Et si on donnait vie a vos projets ensemble ? » sur 2 lignes des 375 px */
.tb-cta p { color: rgba(255,255,255,.85); margin-top: 18px; max-width: 30rem; }
.tb-cta__shapes { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.tb-cta__shapes svg { position: absolute; width: 100%; height: 100%; }
.tb-cta__shapes circle, .tb-cta__shapes path { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 1; }
.tb-cta--dark { background: var(--tb-black); }
.tb-cta--dark .tb-cta__shapes circle, .tb-cta--dark .tb-cta__shapes path { stroke: rgba(255,255,255,.12); }
@media (max-width: 1199px) { .tb-cta__inner { grid-template-columns: 1fr; } .tb-btn-row[style*="flex-end"] { margin-inline-start: 0; } }   /* bandeau empile : paire de CTA a gauche (Eddy 24/09) ; seuil 860 -> 1199 le 14/10 : la colonne boutons fait 530 px, a 1024 le titre n'avait plus que 350 px (mots coupes) */

/* --------------------------------------------------------------------------
   Values / team / FAQ / fleet / contact
   -------------------------------------------------------------------------- */
.tb-values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: rgba(127,127,127,.18); border: 1px solid rgba(127,127,127,.18); }
.tb-value { padding: clamp(28px, 3vw, 48px); background: var(--tb-white); }
.tb-dark .tb-value { background: var(--tb-ink-2); }
.tb-value__num { font-family: var(--tb-font-display); font-size: .8rem; letter-spacing: .2em; color: var(--tb-red); display: block; margin-bottom: 20px; }
.tb-value h3 { font-size: 1.5rem; margin-bottom: 12px; }
.tb-value p { color: var(--tb-gray-500); }
.tb-dark .tb-value p { color: var(--tb-gray-300); }
@media (max-width: 760px) { .tb-values { grid-template-columns: 1fr; } }

.tb-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 32px); }
.tb-member__media { aspect-ratio: 3/4; overflow: hidden; border-radius: var(--tb-radius); background: var(--tb-off-2); position: relative; }
.tb-member__media svg { width: 100%; height: 100%; }
.tb-member__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tb-member__media--photo::after { display: none; }
.tb-member__media::after { content: "Photo à fournir"; position: absolute; left: 14px; top: 14px; padding: 5px 10px; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; background: rgba(255,255,255,.85); color: var(--tb-ink); border-radius: 999px; }
.tb-member h3 { margin-top: 18px; font-size: 1.15rem; }
.tb-member span { display: block; color: var(--tb-gray-500); font-size: .9rem; margin-top: 4px; }
@media (max-width: 860px) { .tb-team { grid-template-columns: repeat(2, 1fr); } }

.tb-faq { border-top: 1px solid rgba(127,127,127,.3); }
.tb-faq details { border-bottom: 1px solid rgba(127,127,127,.3); }
.tb-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; font-family: var(--tb-font-display); font-size: 1.25rem; font-weight: 600; }
.tb-faq summary::-webkit-details-marker { display: none; }
.tb-faq summary::after { content: ""; flex: 0 0 40px; height: 40px; border-radius: 50%; border: 1px solid currentColor; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/16px no-repeat; transition: transform .4s var(--tb-ease); }
.tb-faq details[open] summary::after { transform: rotate(45deg); }
.tb-faq details p { padding: 0 0 26px; max-width: 46rem; color: var(--tb-gray-500); }

.tb-fleet { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 32px); }
.tb-vehicle { border: 1px solid rgba(127,127,127,.25); border-radius: var(--tb-radius); overflow: hidden; background: var(--tb-white); display: flex; flex-direction: column; transition: transform .5s var(--tb-ease), box-shadow .5s; }
.tb-vehicle:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(0,0,0,.12); }
.tb-vehicle__media { aspect-ratio: 16/10; background: var(--tb-off-2); overflow: hidden; }
.tb-vehicle__media img, .tb-vehicle__media svg { width: 100%; height: 100%; object-fit: cover; }
.tb-vehicle__body { padding: 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.tb-vehicle h3 { font-size: 1.3rem; }
.tb-vehicle p { color: var(--tb-gray-500); font-size: .95rem; }
.tb-vehicle__specs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 12px; }
.tb-vehicle__specs span { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border: 1px solid rgba(127,127,127,.35); border-radius: 999px; }
@media (max-width: 960px) { .tb-fleet { grid-template-columns: 1fr; } }

.tb-contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.tb-contact__info { display: grid; gap: 2px; }
.tb-info { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 26px 0; border-top: 1px solid rgba(127,127,127,.3); }
.tb-info:last-child { border-bottom: 1px solid rgba(127,127,127,.3); }
.tb-info__icon { width: 44px; height: 44px; color: var(--tb-red); }
.tb-info__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tb-info h3 { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tb-gray-500); margin-bottom: 6px; font-family: var(--tb-font-body); font-weight: 600; }
.tb-info p { font-family: var(--tb-font-display); font-size: 1.25rem; font-weight: 500; }
.tb-form { padding: clamp(28px, 3vw, 48px); background: var(--tb-white); border: 1px solid rgba(127,127,127,.25); border-radius: var(--tb-radius); }
.tb-form h3 { margin-bottom: 8px; }
.tb-form .wpcf7 p, .tb-form .wpcf7 label { display: block; }
.tb-form .wpcf7 label { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tb-gray-500); font-weight: 600; margin-top: 18px; }
.tb-form .wpcf7 input:not([type=submit]), .tb-form .wpcf7 textarea, .tb-form .wpcf7 select {
  width: 100%; margin-top: 8px; padding: 14px 16px; border: 1px solid var(--tb-gray-300); border-radius: var(--tb-radius); font: inherit; background: #fbf8f1; transition: border-color .3s, background .3s;   /* 09/10 (Eddy) : creme doux au lieu du gris --tb-off */
}
.tb-form .wpcf7 input:focus, .tb-form .wpcf7 textarea:focus { outline: 0; border-color: var(--tb-ink); background: #fff; box-shadow: 0 0 0 3px rgba(205,17,51,.25); }
.tb-form .wpcf7 input[type=submit] {
  margin-top: 24px; padding: 16px 28px; border: 1.5px solid var(--tb-red); border-radius: 999px; background: var(--tb-red); color: #fff;
  font-family: var(--tb-font-display); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .4s, border-color .4s;
}
.tb-form .wpcf7 input[type=submit]:hover { background: var(--tb-ink); border-color: var(--tb-ink); }
.tb-map { position: relative; aspect-ratio: 21/9; overflow: hidden; border-radius: var(--tb-radius); background: var(--tb-off-2); }
.tb-map svg { width: 100%; height: 100%; }
.tb-map__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.tb-map__label { position: absolute; left: 24px; bottom: 24px; }
.tb-map__label span { display: inline-block; padding: 10px 16px; background: rgba(11,11,12,.75); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: #fff; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; box-shadow: inset 4px 0 0 var(--tb-red); }
.tb-map__pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tb-map__pin span { padding: 8px 14px; background: var(--tb-ink); color: #fff; border-radius: 999px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.tb-map__pin i { width: 14px; height: 14px; border-radius: 50%; background: var(--tb-red); box-shadow: 0 0 0 0 rgba(205,17,51,.5); animation: tb-pulse 2s infinite; }
@keyframes tb-pulse { 0% { box-shadow: 0 0 0 0 rgba(205,17,51,.5); } 100% { box-shadow: 0 0 0 24px rgba(205,17,51,0); } }
@media (max-width: 860px) { .tb-contact { grid-template-columns: 1fr; } }

/* Big statement text (RSE, about) */
.tb-statement { font-family: var(--tb-font-display); font-size: clamp(1.8rem, 4.2vw, 3.8rem); font-weight: 600; line-height: 1.1; letter-spacing: -.025em; }
.tb-statement em { font-style: normal; color: var(--tb-red); }
.tb-dark .tb-statement em { color: var(--tb-red-light); }

/* Pill list */
.tb-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.tb-pills span { padding: 10px 16px; border: 1px solid rgba(127,127,127,.4); border-radius: 999px; font-size: .85rem; }

/* --------------------------------------------------------------------------
   Native Impeka blocks wrappers (portfolio, blog)
   -------------------------------------------------------------------------- */
.tb-native { padding: var(--tb-section) 0; background: var(--tb-white); }
.tb-native .grve-portfolio-item, .tb-native .grve-post-item { border-radius: var(--tb-radius); overflow: hidden; }

/* --------------------------------------------------------------------------
   Footer (custom, hooked before Impeka footer)
   -------------------------------------------------------------------------- */
#grve-footer { display: none !important; }
.tb-footer { background: var(--tb-black); color: #fff; position: relative; overflow: hidden; }
.tb-footer__top { padding: var(--tb-section) 0 clamp(40px, 5vw, 72px); border-bottom: 1px solid rgba(255,255,255,.12); display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: end; }
.tb-footer__top h2 { font-size: clamp(2.2rem, 5.5vw, 5.4rem); }
.tb-footer__top h2 em { font-style: normal; color: var(--tb-red-light); }
.tb-footer__top .tb-btn-row { justify-content: flex-end; }
.tb-footer__grid { padding: clamp(48px, 6vw, 80px) 0; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }
.tb-footer__brand img { width: 200px; }
.tb-footer__brand p { margin-top: 22px; color: var(--tb-gray-300); max-width: 26rem; font-size: .95rem; }
/* social links under the brand text: label + round icon buttons (real links, so they do hover) */
.tb-footer__social { margin-top: 28px; }
.tb-footer__social .tb-footer__h { margin-bottom: 14px; }
.tb-footer__social-links { display: flex; gap: 10px; }
.tb-footer .tb-footer__social-links a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.35); color: #fff; transition: border-color .3s, background .3s; }
.tb-footer .tb-footer__social-links a:hover { border-color: var(--tb-red); background: var(--tb-red); color: #fff; }
.tb-footer__social-links svg { width: 18px; height: 18px; }
.tb-footer .tb-footer__h { font-family: var(--tb-font-display); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tb-gray-300); margin: 0 0 20px; }
.tb-footer ul li { margin-bottom: 12px; }
.tb-footer ul a { color: #fff; opacity: .85; transition: opacity .3s, padding-left .3s; }
.tb-footer ul a:hover { opacity: 1; padding-left: 6px; color: var(--tb-red-light); }
.tb-footer address { font-style: normal; color: var(--tb-gray-300); line-height: 1.8; }
.tb-footer address strong { color: #fff; font-weight: 500; }
.tb-footer__bar { padding: 24px 0; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; font-size: .8rem; color: var(--tb-gray-300); }
.tb-footer__bar a { color: var(--tb-gray-300); }
.tb-footer__bar a:hover { color: #fff; }
.tb-footer__bar nav { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.tb-footer__bar nav a { white-space: nowrap; }   /* 14/10 : un lien ne se coupe jamais, la rangee passe a la ligne (601-960) */
@media (max-width: 600px) { .tb-footer__bar { flex-direction: column; } .tb-footer__bar nav { flex-direction: column; align-items: flex-start; gap: 14px; } }   /* 14/10 (Eddy, iPhone) : liens legaux empiles, ils se cassaient lettre par lettre a 375 / 430 (G1) */
.tb-footer .tb-eyebrow { color: var(--tb-white); }
.tb-footer .tb-eyebrow::before { background: var(--tb-red); }
/* footer band buttons: leading icons (mail, phone), the red button hovers white / black text like the hero */
.tb-btn__ico { width: 18px; height: 18px; flex: 0 0 auto; }
.tb-btn:hover .tb-btn__ico { transform: none; }
.tb-footer .tb-btn:not(.tb-btn--outline)::before { background: #fff; }
.tb-footer .tb-btn:not(.tb-btn--outline) { --btn-hfg: var(--tb-ink); }
.tb-footer .tb-btn:not(.tb-btn--outline):hover { border-color: #fff; }
.tb-footer .tb-btn--outline { --btn-fg: #fff; --btn-bd: rgba(255,255,255,.55); --btn-hfg: var(--tb-ink); }
.tb-footer .tb-btn--outline::before { background: #fff; }
.tb-footer__word::after { content: "THEOBORA"; }
.tb-footer__word { position: absolute; left: 0; right: 0; bottom: -0.15em; font-family: var(--tb-font-display); font-weight: 800; font-size: clamp(6rem, 22vw, 22rem); line-height: 1; letter-spacing: -.04em; color: rgba(255,255,255,.035); text-align: center; pointer-events: none; user-select: none; white-space: nowrap; }
@media (max-width: 1199px) { .tb-footer__top { grid-template-columns: 1fr; } .tb-footer__top .tb-btn-row { justify-content: flex-start; } }   /* meme seuil que .tb-cta__inner (14/10) */
@media (max-width: 960px) {
  .tb-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .tb-footer__grid { grid-template-columns: 1fr; } }

/* 404 */
.grve-error-404 #grve-default-page-404 { padding: 0; }
.grve-error-404 .grve-container, .grve-error-404 .grve-inner, .grve-error-404 .grve-404-content { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
.grve-error-404 .grve-main-content-wrapper { padding: 0 !important; }
.tb-404 { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 160px 0 100px; background: var(--tb-black); color: #fff; }
.tb-404 .tb-h1--xl { -webkit-text-stroke: 1.5px rgba(255,255,255,.6); color: transparent; }

/* --------------------------------------------------------------------------
   Reveal helpers (JS sets initial state to avoid FOUC when JS is off)
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Header: "Contactez-nous" pill (injected by JS before the burger) replaces the LinkedIn icon; Impeka's own
   off-canvas / responsive menus are hidden, the burger opens our drawer instead
   -------------------------------------------------------------------------- */
#grve-main-header .grve-header-elements { display: none !important; }
#grve-offcanvas-area, #grve-responsive-menu-area { display: none !important; }
#grve-main-header .grve-right-area { display: flex; align-items: center; gap: 22px; }
.tb-header__cta { --btn-bg: var(--tb-red); --btn-fg: #fff; --btn-bd: var(--tb-red); --btn-hfg: var(--tb-ink); padding: 12px 20px; font-size: .78rem; letter-spacing: .08em; gap: 8px; }
.tb-header__cta::before { background: #fff; }
.tb-header__cta:hover { border-color: #fff; }
html:not(.tb-at-top) .tb-header__cta { --btn-hfg: #fff; }
html:not(.tb-at-top) .tb-header__cta::before { background: var(--tb-ink); }
html:not(.tb-at-top) .tb-header__cta:hover { border-color: var(--tb-ink); }
#grve-main-header .tb-header__cta { color: #fff !important; }
html:not(.tb-at-top) #grve-main-header .tb-header__cta:hover { color: #fff !important; }
html.tb-at-top #grve-main-header .tb-header__cta:hover { color: var(--tb-ink) !important; }
.tb-header__cta svg { width: 15px; height: 15px; }
@media (max-width: 1024px) { .tb-header__cta { display: none; } }

/* --------------------------------------------------------------------------
   Drawer menu: black panel from the right, numbered Jost items, red bar on the active one, big "+" toggles,
   contact + social at the bottom
   -------------------------------------------------------------------------- */
.tb-drawer { position: fixed; inset: 0; z-index: 99980; pointer-events: none; visibility: hidden; transition: visibility 0s linear .65s; }   /* ferme = invisible (a11y : rien de focusable ni de mesure par axe), le delai laisse jouer la sortie du panneau */
.tb-drawer__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .5s var(--tb-ease); }
/* the blur is only declared while open: a permanent full-screen backdrop-filter layer can paint a grey plate in Chrome/Mac during load */
html.tb-drawer-open .tb-drawer__overlay { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tb-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(650px, 100%); background: #000; color: #fff; display: flex; flex-direction: column; padding: 28px clamp(24px, 4vw, 56px) 36px; overflow-y: auto; transform: translateX(100%); transition: transform .65s cubic-bezier(.76, 0, .24, 1); box-shadow: -30px 0 80px rgba(0,0,0,.35); }
html.tb-drawer-open .tb-drawer { pointer-events: auto; visibility: visible; transition-delay: 0s; }
html.tb-drawer-open .tb-drawer__overlay { opacity: 1; }
html.tb-drawer-open .tb-drawer__panel { transform: none; }
/* page scroll stays possible behind the open drawer (Eddy 11/09, like La Fourmi) */
.tb-drawer__head { display: flex; align-items: center; justify-content: space-between; min-height: 45px; }
.tb-drawer__label { font-family: var(--tb-font-display); font-size: .78rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--tb-red); display: inline-flex; align-items: center; gap: 12px; }
.tb-drawer__label::before { content: ""; width: 28px; height: 2px; background: var(--tb-red); }
.tb-drawer__close { appearance: none; position: relative; width: 44px; height: 44px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.35); background: transparent; cursor: pointer; padding: 0; transition: border-color .3s, background .3s; }
.tb-drawer__close span { position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; background: #fff; transform: translate(-50%, -50%) rotate(45deg); }
.tb-drawer__close span + span { transform: translate(-50%, -50%) rotate(-45deg); }
.tb-drawer__close:hover { border-color: var(--tb-red); background: var(--tb-red); }
.tb-drawer__nav { flex: 1; display: flex; align-items: center; padding: 32px 0; }
.tb-drawer__nav ul { list-style: none; margin: 0; padding: 0; width: 100%; }
.tb-drawer__item { position: relative; border-top: 1px solid rgba(255,255,255,.1); }
.tb-drawer__item:last-child { border-bottom: 1px solid rgba(255,255,255,.1); }
.tb-drawer__item > a, .tb-drawer__row > a { display: flex; align-items: baseline; gap: 18px; padding: 16px 0 16px 20px; font-family: var(--tb-font-display); font-size: clamp(1.5rem, 2.6vh, 2rem); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; color: #fff; text-decoration: none; transition: color .3s; }
.tb-drawer__row { display: flex; align-items: center; justify-content: space-between; }
.tb-drawer__row > a { flex: 1; }
/* .tb-drawer__num retire le 01/10 (Eddy : numeros du menu "trop IA") */
/* red bar straddling the left edge, like the cards */
.tb-drawer__item::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; background: var(--tb-red); transform: scaleY(0); transform-origin: top; transition: transform .35s var(--tb-ease); }
.tb-drawer__item:hover::before, .tb-drawer__item.is-current::before, .tb-drawer__item.is-open::before { transform: scaleY(1); }
.tb-drawer__item.is-current > a, .tb-drawer__item.is-current .tb-drawer__row > a { color: #fff; }
.tb-drawer__item:not(.is-current):not(:hover) > a, .tb-drawer__item:not(.is-current):not(:hover) .tb-drawer__row > a { color: rgba(255,255,255,.82); }
.tb-drawer__toggle { appearance: none; position: relative; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.3); background: transparent; cursor: pointer; padding: 0; transition: border-color .3s, background .3s, transform .45s var(--tb-ease); }
.tb-drawer__toggle span { position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; background: #fff; transform: translate(-50%, -50%); }
.tb-drawer__toggle span + span { transform: translate(-50%, -50%) rotate(90deg); }
.tb-drawer__toggle:hover { border-color: var(--tb-red); background: var(--tb-red); }
.tb-drawer__item.is-open .tb-drawer__toggle { transform: rotate(45deg); border-color: var(--tb-red); background: var(--tb-red); }
/* collapsible: a grid with ONE child (the ul) going 0fr -> 1fr; li as direct grid items would create visible implicit rows */
.tb-drawer__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--tb-ease); }
.tb-drawer__nav .tb-drawer__sub > ul { min-height: 0; overflow: hidden; list-style: none; margin: 0; padding: 0 0 0 calc(20px + 2em + 18px); }
.tb-drawer__item.is-open .tb-drawer__sub { grid-template-rows: 1fr; }
.tb-drawer__nav .tb-drawer__item.is-open .tb-drawer__sub > ul { padding-bottom: 14px; }
.tb-drawer__sub li a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 1.05rem; color: rgba(255,255,255,.7); text-decoration: none; transition: color .3s, padding-left .3s; }
.tb-drawer__sub li a:hover, .tb-drawer__sub li a.is-current { color: #fff; padding-left: 6px; }
/* sub-service thumbnail on the right (Eddy 11/09) */
.tb-drawer__sub li img { flex: 0 0 auto; width: 72px; height: 54px; object-fit: cover; border-radius: var(--tb-radius); opacity: .75; filter: saturate(.85); transition: opacity .3s, transform .4s var(--tb-ease); }
.tb-drawer__sub li a:hover img, .tb-drawer__sub li a.is-current img { opacity: 1; transform: scale(1.04); }
.tb-drawer__foot { display: grid; gap: 18px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); }
.tb-drawer__cta { justify-self: start; --btn-hfg: var(--tb-ink); }
.tb-drawer__cta::before { background: #fff; }
.tb-drawer__cta:hover { border-color: #fff; }
.tb-drawer .tb-drawer__cta { display: none; }
@media (max-width: 1024px) { .tb-drawer .tb-drawer__cta { display: inline-flex; } }
.tb-drawer__contact { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: .95rem; }
.tb-drawer .tb-drawer__contact a { color: rgba(255,255,255,.75); text-decoration: none; }
.tb-drawer .tb-drawer__contact a:hover { color: #fff; }
.tb-drawer__social { display: flex; gap: 10px; }
.tb-drawer .tb-drawer__social a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.35); color: #fff; transition: border-color .3s, background .3s; }
.tb-drawer .tb-drawer__social a:hover { border-color: var(--tb-red); background: var(--tb-red); }
.tb-drawer__social svg { width: 18px; height: 18px; }
/* item entrance (GSAP sets the base) */
html.tb-js .tb-drawer__item, html.tb-js .tb-drawer__foot > * { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) { .tb-drawer, .tb-drawer__panel, .tb-drawer__overlay { transition: none; } }

/* --------------------------------------------------------------------------
   A propos (14/09) : mission avec visuel, coverflow des valeurs, visite virtuelle 360, accordeon histoire
   -------------------------------------------------------------------------- */
/* shared black glass plate with the red bar straddling its left edge (same as .tb-work__glass) */
.tb-glass { background: rgb(0 0 0 / 75%); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); border-radius: 0; color: #fff; overflow: visible; }
.tb-glass > i { flex: 0 0 4px; align-self: stretch; margin-left: -20px; background: var(--tb-red); }

/* Mission : statement + big visual with the red plate (no badge: plate closer to the photo than on the Atelier) */
.tb-mission { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.tb-mission .tb-statement { max-width: none; margin: 0; }
.tb-mission__media.tb-split__media { aspect-ratio: 3 / 2; }
.tb-mission__media.tb-split__media--shadow::before { bottom: -18px; height: 82%; }
@media (max-width: 860px) { .tb-mission { grid-template-columns: 1fr; } .tb-mission__media.tb-split__media--shadow { margin-bottom: 40px; } }

/* Coverflow (reference: 7 slots, the active card big in the centre, the others shrinking in width AND height towards the edges,
   vertically centred; the stage is symmetric thanks to clones of the cards for the far slots) */
.tb-coverflow { --w0: min(700px, 48.6vw); --h0: min(460px, 32vw); --w1: min(150px, 10.4vw); --h1: min(360px, 25vw); --w2: min(100px, 7vw); --h2: min(300px, 20.8vw); --w3: min(36px, 2.5vw); --h3: min(220px, 15.3vw); --g: min(24px, 1.7vw); }
.tb-coverflow__stage { position: relative; height: var(--h0); overflow: hidden; user-select: none; touch-action: pan-y; }
.tb-coverflow__card { appearance: none; border: 0; padding: 0; margin: 0; cursor: pointer; position: absolute; top: 50%; left: 50%; height: var(--h0); width: var(--w0); border-radius: var(--tb-radius); overflow: hidden; background: var(--tb-ink); color: #fff; text-align: left; opacity: 0; transform: translate(-50%, -50%); transition: transform .8s cubic-bezier(.76, 0, .24, 1), width .8s cubic-bezier(.76, 0, .24, 1), height .8s cubic-bezier(.76, 0, .24, 1), opacity .5s; will-change: transform, width, height; }
.tb-coverflow__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; transition: filter .6s; }   /* no native image drag: it cancelled the pointer drag */
.tb-coverflow__card.is-active { opacity: 1; z-index: 4; }
/* slot offsets: centre of slot d = w0/2 + g + (widths of the slots in between) + w_d/2, mirrored with --dir */
.tb-coverflow__card.is-near { opacity: 1; z-index: 3; width: var(--w1); height: var(--h1); transform: translate(calc(-50% + var(--dir) * (var(--w0) / 2 + var(--g) + var(--w1) / 2)), -50%); }
.tb-coverflow__card.is-far { opacity: 1; z-index: 2; width: var(--w2); height: var(--h2); transform: translate(calc(-50% + var(--dir) * (var(--w0) / 2 + 2 * var(--g) + var(--w1) + var(--w2) / 2)), -50%); }
.tb-coverflow__card.is-edge { opacity: 1; z-index: 1; width: var(--w3); height: var(--h3); transform: translate(calc(-50% + var(--dir) * (var(--w0) / 2 + 3 * var(--g) + var(--w1) + var(--w2) + var(--w3) / 2)), -50%); }
.tb-coverflow__card.is-out { width: var(--w3); height: var(--h3); opacity: 0; transform: translate(calc(-50% + var(--dir) * (var(--w0) / 2 + 4 * var(--g) + var(--w1) + var(--w2) + var(--w3) * 1.5)), -50%); }
.tb-coverflow__card:not(.is-active) img { filter: brightness(.85); }
.tb-coverflow__card:not(.is-active):hover img { filter: brightness(1); }
.tb-coverflow__card.is-clone { pointer-events: auto; }
.tb-coverflow__label { position: absolute; left: 18px; bottom: 18px; width: max-content; max-width: calc(100% - 36px); box-sizing: border-box; display: flex; flex-wrap: nowrap; align-items: baseline; gap: 14px; padding: 14px 18px; white-space: nowrap; overflow: visible; opacity: 0; transform: translateY(12px); transition: opacity .5s .25s, transform .6s .25s var(--tb-ease); }   /* explicit width + nowrap: WebKit gave the absolute flex label a min-content width and wrapped / broke the title */
.tb-coverflow__label > i { display: none; }
.tb-coverflow__label::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 4px; background: var(--tb-red); }   /* the red bar as a pseudo-element: full height, straddling the plate's edge whatever the line count */
.tb-coverflow__card.is-active .tb-coverflow__label { opacity: 1; transform: none; }
.tb-coverflow__num { font-family: var(--tb-font-display); font-weight: 600; font-size: 1rem; letter-spacing: .08em; color: #fff; }
.tb-coverflow__title { font-family: var(--tb-font-display); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 2.2rem); letter-spacing: -.02em; line-height: 1.05; white-space: nowrap; }
.tb-coverflow__texts { display: grid; margin-top: 28px; max-width: 42rem; }
.tb-coverflow__text { grid-area: 1 / 1; margin: 0; font-size: 1.1rem; line-height: 1.6; color: var(--tb-gray-500); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .5s, transform .5s var(--tb-ease), visibility 0s .5s; }
.tb-coverflow__text.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* 12/10 (Eddy) : accroche de la valeur en grand, separee du texte, soulignee d'une cote de plan (trait rouge, butees, tirets d'architecte a 45 deg) qui se trace a l'activation */
.tb-coverflow__text > p { margin: 0; }
.tb-coverflow__text > .tb-coverflow__hook { position: relative; width: fit-content; max-width: 100%; margin: 0 0 34px; font-family: var(--tb-font-display); font-weight: 500; font-size: clamp(1.55rem, 2.4vw, 2.2rem); line-height: 1.15; letter-spacing: -.01em; color: var(--tb-ink); }
.tb-cote { position: absolute; left: 0; right: 0; bottom: -18px; height: 11px; border-left: 1px solid var(--tb-red); border-right: 1px solid var(--tb-red); background: linear-gradient(var(--tb-red), var(--tb-red)) center / 100% 1px no-repeat; transform: scaleX(0); transition: transform .8s var(--tb-ease) .15s; }
.tb-cote::before, .tb-cote::after { content: ""; position: absolute; top: 5px; width: 11px; height: 1.5px; background: var(--tb-red); transform: rotate(-45deg); }
.tb-cote::before { left: -6px; } .tb-cote::after { right: -6px; }
.tb-coverflow__text.is-active .tb-cote { transform: scaleX(1); }
.tb-coverflow__nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
.tb-coverflow__dots { display: flex; align-items: center; gap: 4px; }
.tb-coverflow__dots button { appearance: none; position: relative; border: 0; background: none; width: 24px; height: 24px; padding: 0; margin: 0; cursor: pointer; }   /* 24px hit area, the dot is drawn in ::before */
.tb-coverflow__dots button::before { content: ""; position: absolute; left: 7px; top: 7px; width: 10px; height: 10px; border-radius: 999px; border: 1.5px solid rgba(17,17,17,.6); transition: width .35s var(--tb-ease), background .3s, border-color .3s; }
.tb-coverflow__dots button:hover::before { border-color: var(--tb-ink); }
.tb-coverflow__dots button[aria-selected="true"] { width: 44px; }
.tb-coverflow__dots button[aria-selected="true"]::before { width: 30px; background: var(--tb-red); border-color: var(--tb-red); }
.tb-coverflow__arrows { display: flex; gap: 10px; }
.tb-coverflow__arrow { appearance: none; width: 44px; height: 44px; border-radius: 999px; border: 1.5px solid rgba(17,17,17,.6); background: transparent; color: var(--tb-ink); display: grid; place-items: center; cursor: pointer; padding: 0; transition: border-color .3s, background .3s, color .3s; }
.tb-coverflow__arrow svg { width: 18px; height: 18px; }
.tb-coverflow__arrow:hover { border-color: var(--tb-red); background: var(--tb-red); color: #fff; }
@media (max-width: 860px) {
  .tb-coverflow { --w0: 92vw; --h0: 62vw; --w1: 92vw; --h1: 52vw; --w2: 92vw; --h2: 44vw; --w3: 92vw; --h3: 40vw; --g: 12px; }   /* nearly full width (Eddy 14/09) */
  .tb-coverflow__title { font-size: 1.3rem; }
  .tb-coverflow__card.is-far, .tb-coverflow__card.is-edge { opacity: 0; }
  .tb-coverflow__card:not(.is-active) img { filter: none; }
  .tb-coverflow__label { left: 14px; bottom: 14px; padding: 12px 14px; }
}

/* Visite virtuelle: native <dialog> (top layer, focus trap), equirectangular strip that turns with the pointer or the arrow keys */
.tb-vtour { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: clamp(16px, 4vh, 48px) clamp(16px, 4vw, 64px); border: 0; background: transparent; color: #fff; }
.tb-vtour::backdrop { background: rgb(0 0 0 / 75%); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.tb-vtour__dialog { position: relative; width: 100%; height: 100%; background: #000; border-radius: var(--tb-radius); overflow: hidden; box-shadow: 0 40px 120px rgba(0,0,0,.6); transform: scale(.96); opacity: 0; transition: transform .5s var(--tb-ease), opacity .4s; }
.tb-vtour[open] .tb-vtour__dialog { transform: none; opacity: 1; }
html.tb-vtour-open { overflow: hidden; }
/* Film de la captation 2026 (25/09) a la place du panorama : lecteur natif plein cadre, letterbox noir */
.tb-vtour__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
@media (max-width: 860px) { .tb-vtour[open]:has(.tb-vtour__film) { display: flex; align-items: center; } .tb-vtour:has(.tb-vtour__film) .tb-vtour__dialog { height: auto; aspect-ratio: 16 / 9; } }   /* mobile : le cadre epouse le film au lieu de bandes noires pleine hauteur */
.tb-vtour__view { position: absolute; inset: 0; overflow: hidden; cursor: ew-resize; background: #000 center / cover no-repeat; outline: none; }
.tb-vtour__view:focus-visible { box-shadow: inset 0 0 0 3px var(--tb-red); }
.tb-vtour__strip { position: absolute; top: -5%; left: 0; height: 110%; display: flex; will-change: transform; }
.tb-vtour__strip img { height: 100%; width: auto; max-width: none !important; max-height: none !important; display: block; flex: 0 0 auto; user-select: none; -webkit-user-drag: none; }   /* Impeka's global img { max-width:100% } squashed the panorama on iOS */
.tb-vtour__hud { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 18px; padding: 20px 24px; background: linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,0)); color: #fff; pointer-events: none; }
.tb-vtour__hud > * { pointer-events: auto; }
.tb-vtour__hud .tb-eyebrow { margin: 0; white-space: nowrap; }
@media (max-width: 480px) { .tb-vtour__hud { padding: 16px; gap: 12px; } .tb-vtour__hud .tb-eyebrow { font-size: .7rem; } }
.tb-vtour__hint { font-size: .85rem; color: rgba(255,255,255,.85); }
.tb-vtour__hint--touch { display: none; }
.tb-vtour__close { appearance: none; margin-left: auto; position: relative; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.6); background: rgba(0,0,0,.5); cursor: pointer; padding: 0; transition: border-color .3s, background .3s; }
.tb-vtour__close span { position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; background: #fff; transform: translate(-50%, -50%) rotate(45deg); }
.tb-vtour__close span + span { transform: translate(-50%, -50%) rotate(-45deg); }
.tb-vtour__close:hover { border-color: var(--tb-red); background: var(--tb-red); }
.tb-vtour__credit { position: absolute; right: 16px; bottom: 12px; font-size: .78rem; color: rgba(255,255,255,.7); pointer-events: none; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.tb-vtour__credit--link { pointer-events: auto; bottom: 64px; }   /* 05/10 : credit du videaste (VP EVENT, Nolwenn) cliquable, au-dessus de la barre de commandes du lecteur */
.tb-vtour__credit--link a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px), (hover: none) { .tb-vtour__hint--mouse { display: none; } .tb-vtour__hint--touch { display: inline; } .tb-vtour__view { cursor: grab; } }

/* History: horizontal accordion, the open year shows a big visual with its text below, the others are narrow dimmed columns */
.tb-history { --closed: 96px; --gap: 12px; display: flex; gap: var(--gap); }
.tb-history__item { position: relative; flex: 0 0 auto; width: var(--closed); min-width: 0; overflow: hidden; border-radius: var(--tb-radius); background: var(--tb-ink); color: #fff; transition: width .8s cubic-bezier(.76, 0, .24, 1); }
.tb-history__item.is-open { width: calc(100% - 3 * (var(--closed) + var(--gap))); }
.tb-history__media { position: absolute; inset: 0; }
.tb-history__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.35); transform: scale(1.06); transition: filter .8s, transform 1.2s var(--tb-ease); }
.tb-history__item.is-open .tb-history__media img { filter: none; transform: none; }
.tb-history__item:not(.is-open):hover .tb-history__media img { filter: grayscale(.4) brightness(.55); }
/* the whole column is the button (keyboard + screen reader: year, then the title in .tb-sr) */
.tb-history__trigger { appearance: none; position: absolute; inset: 0; z-index: 1; border: 0; padding: 0; margin: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; outline: none; }
.tb-history__item.is-open .tb-history__trigger { cursor: default; }
.tb-history__trigger:focus-visible { box-shadow: inset 0 0 0 3px var(--tb-red); }
.tb-history__year { position: absolute; left: 0; top: 0; padding: 24px 0 0; width: var(--closed); display: flex; justify-content: center; font-family: var(--tb-font-display); font-weight: 700; font-size: 1.4rem; letter-spacing: -.02em; color: rgba(255,255,255,.75); transition: color .4s; }
.tb-history__year > i { display: none; }
.tb-history__year > span { display: block; writing-mode: vertical-rl; transform: rotate(180deg); }
.tb-history__item.is-open .tb-history__year { width: auto; padding: 28px 32px; color: #fff; font-size: clamp(2rem, 4vw, 3.2rem); display: flex; align-items: stretch; gap: 16px; }
.tb-history__item.is-open .tb-history__year > i { display: block; width: 4px; margin-left: -14px; background: var(--tb-red); }   /* white year + red bar straddling the left edge (no red text on photo) */
.tb-history__item.is-open .tb-history__year > span { writing-mode: horizontal-tb; transform: none; line-height: 1; }
.tb-history__body { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2; display: flex; align-items: stretch; gap: 14px; padding: 18px 22px; pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .5s, transform .6s var(--tb-ease), visibility 0s .5s; }
.tb-history__item.is-open .tb-history__body { opacity: 1; visibility: visible; transform: none; transition-delay: .35s, .35s, 0s; pointer-events: auto; }
.tb-history__body > i { margin-left: -24px; }   /* 22/09 : barre rouge a cheval sur le bord (padding 22 + 2) */
.tb-history__body h3 { font-size: clamp(1.3rem, 2.2vw, 1.9rem); margin: 0 0 6px; color: #fff; }
.tb-history__body p { margin: 0; max-width: 40rem; color: rgba(255,255,255,.85); font-size: 1rem; }
.tb-history, .tb-history__item { height: min(560px, 40vw); }
.tb-history__media img { object-position: var(--pos, 50% 50%); }
.tb-history__credit { position: absolute; top: 12px; right: 14px; z-index: 2; font-size: .72rem; color: rgba(255,255,255,.85); text-shadow: 0 1px 4px rgba(0,0,0,.8); pointer-events: none; opacity: 0; transition: opacity .4s .35s; }   /* 12/10 : le copyright incruste dans la photo est rogne par le cadrage cover */
.tb-history__item.is-open .tb-history__credit { opacity: 1; }
/* 13/10 (Eddy) : « Lire la suite » sur TOUS les ecrans (le texte deplie mangeait les visuels) ; texte replie sous le titre, grille 0fr -> 1fr, un seul enfant */
.tb-history__txt { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--tb-ease); }
.tb-history__txt > p { min-height: 0; overflow: hidden; }
.tb-history__item.is-more .tb-history__txt { grid-template-rows: 1fr; }
.tb-history__item.is-more .tb-history__txt > p { padding-top: 4px; }
.tb-history__more { display: inline-flex; align-items: center; gap: 10px; margin: 8px 0 0; padding: 4px 0; border: 0; background: none; color: #fff; font-family: var(--tb-font-display); font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.tb-history__plus { position: relative; flex: 0 0 12px; width: 12px; height: 12px; }
.tb-history__plus::before, .tb-history__plus::after { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 2px; background: var(--tb-red); transition: transform .3s var(--tb-ease); }
.tb-history__plus::after { transform: rotate(90deg); }
.tb-history__item.is-more .tb-history__plus::after { transform: rotate(90deg) scaleX(0); }
@media (max-width: 860px) {
  .tb-history { flex-direction: column; height: auto; --closed: 64px; }
  .tb-history__item { width: 100% !important; height: var(--closed); transition: height .6s var(--tb-ease); }
  .tb-history__item.is-open { height: 78vw; }
  .tb-history__year { width: auto; padding: 18px 20px; } .tb-history__year > span { writing-mode: horizontal-tb; text-orientation: mixed; transform: none; }   /* 08/10 : sans transform:none, la rotation 180 deg du desktop (texte vertical) retournait les annees */
  .tb-history__item.is-open .tb-history__year { padding: 18px 20px; }
  .tb-history__body { left: 12px; right: 12px; bottom: 12px; padding: 14px 16px; }
  .tb-history__body > i { margin-left: -18px; }
  .tb-history__item.is-open { height: auto; min-height: 78vw; display: flex; flex-direction: column; justify-content: flex-end; padding: 72px 12px 12px; interpolate-size: allow-keywords; }   /* 12/10 : textes longs de Florian (2016, 2024) : l'etape ouverte grandit avec son texte au lieu de deborder sur l'annee */
  .tb-history__item.is-open .tb-history__body { position: relative; left: auto; right: auto; bottom: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .tb-coverflow__card, .tb-coverflow__card img, .tb-coverflow__label, .tb-coverflow__text, .tb-cote, .tb-history__item, .tb-history__media img, .tb-history__body, .tb-history__year, .tb-vtour__dialog { transition: none !important; }
}

html.tb-js [data-tb-reveal] { opacity: 0; transform: translateY(32px); }
html.tb-js [data-tb-reveal].is-in { opacity: 1; transform: none; transition: opacity .9s var(--tb-ease), transform .9s var(--tb-ease); }
html.tb-js .tb-hero__inner, html.tb-js .tb-page-hero > .tb-container { visibility: hidden; }
html.tb-js .tb-hero__inner.is-ready, html.tb-js .tb-page-hero > .tb-container.is-ready { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  html.tb-js [data-tb-reveal] { opacity: 1; transform: none; transition: none; }
  .tb-marquee__track, .tb-hero__wheel, .tb-map__pin i { animation: none; }
  .tb-hero__media img { transform: none; }
  .tb-curtain { display: none; }
  html.tb-js .tb-hero__inner, html.tb-js .tb-page-hero > .tb-container { visibility: visible; }
}

/* Focus (Impeka retire l'outline partout) */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--tb-red) !important; outline-offset: 4px; }
.tb-dark :focus-visible, .tb-ink :focus-visible, .tb-hero :focus-visible, .tb-page-hero:not(.tb-page-hero--light) :focus-visible, .tb-cta :focus-visible, .tb-footer :focus-visible, .tb-showcase :focus-visible { outline-color: #fff !important; }
/* Apres un toucher / clic (html.tb-pointer, pose par custom.js), aucun anneau de focus ; ils reviennent au clavier */
html.tb-pointer :focus-visible { outline: none !important; }
html.tb-pointer .tb-vtour__view:focus-visible, html.tb-pointer .tb-history__trigger:focus-visible { box-shadow: none; }
html.tb-pointer .tb-step.is-clickable:focus-visible .tb-step__dot { box-shadow: none; }

.tb p a, .tb address a, .tb-info p a { text-decoration: underline; text-underline-offset: 3px; }
.tb-sr, .tb-skip { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tb-skip:focus { position: fixed !important; left: 16px; top: 16px; width: auto; height: auto; clip: auto; z-index: 100000; padding: 12px 18px; background: var(--tb-ink); color: #fff; border-radius: 999px; font-family: var(--tb-font-display); font-weight: 600; }
#grve-main-header a.grve-toggle-modal { display: none !important; }


/* --------------------------------------------------------------------------
   Portfolio (22/09) : fiches projet (single-portfolio.php du child + inc/portfolio.php) et grille de la page 37
   -------------------------------------------------------------------------- */
.tb-chip { display: inline-flex; align-items: center; padding: 7px 14px; border: 1px solid #fff; border-radius: 999px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; text-decoration: none; transition: background .3s, color .3s, border-color .3s; }
.tb a.tb-chip:hover { background: rgba(255,255,255,.14); color: #fff; border-color: #fff; }   /* Eddy 22/09 : pas de plein blanc (hors charte), pas de rouge (reserve aux CTA) */
.tb-proj-hero--full { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 140px; padding-bottom: clamp(44px, 6vh, 80px); }
.tb-proj-hero--full .tb-page-hero__bg img { opacity: 1; filter: saturate(.95) contrast(1.05); }
.tb-proj-hero--full .tb-page-hero__bg::after { background: rgba(0,0,0,.85); opacity: 1; mix-blend-mode: multiply; }   /* opacity 1 : la regle generique des heros de page (26/09, .7) ne doit pas s'ajouter au voile des fiches / de Realisations */   /* Eddy 22/09 : noir uni .85 en multiply (pas de degrade), image a 1 pour garder la profondeur */
.tb-proj-hero .tb-page-hero__crumb { color: rgba(255,255,255,.85); }
.tb-proj-hero .tb-hero__scroll { position: static; margin-top: 44px; }
body.single-portfolio { overflow: visible; overflow-x: clip; }   /* Impeka met overflow:hidden sur body : casse position:sticky (fiche projet) */
.tb-proj-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.tb-proj-hero__eyebrow { margin-bottom: 18px; }
.tb-proj-hero .tb-h1 { font-size: clamp(2.4rem, 5.6vw, 5.2rem); }
.tb-proj-hero .tb-page-hero__grid { grid-template-columns: 1fr; gap: 28px; max-width: 52rem; }   /* Eddy 22/09 : une colonne, accroche + chips sous le titre */   /* Eddy 22/09 : un poil moins grand que les autres heros (6.5rem) */
.tb-proj-hero .tb-page-hero__bg img { opacity: .5; }
/* 05/10 (Eddy, test sur Sephora 147) : hero « clean » = visuel plein ecran sans voile, typo discrete (ref. case studies Immersive Garden), fil d'Ariane deplace en tete du contenu */
.tb-proj-hero--clean .tb-page-hero__bg img { opacity: 1; filter: none; }
.tb-proj-hero--clean .tb-page-hero__bg::after { opacity: 1; mix-blend-mode: normal; background: linear-gradient(to top right, rgba(0,0,0,.72) 0%, rgba(0,0,0,.4) 24%, rgba(0,0,0,.12) 44%, transparent 58%); }   /* 05/10 : plus de voile plein ; un scrim localise dans le coin bas gauche, derriere le texte seulement (le reste du visuel est intact) ; fonce un cran a la demande d'Eddy, puis generalise a toutes les fiches */
.tb-proj-hero--clean .tb-h1 { font-size: clamp(1.5rem, 2.2vw, 2.1rem); font-weight: 500; letter-spacing: .01em; line-height: 1.2; max-width: 30rem; text-shadow: 0 1px 12px rgba(0,0,0,.25); }
.tb-proj-hero--clean .tb-proj-hero__eyebrow { margin-bottom: 12px; }
.tb-proj-hero--clean .tb-proj-hero__eyebrow span { font-size: .68rem; }
.tb-proj-hero--clean .tb-page-hero__grid { gap: 16px; }
.tb-proj-hero--clean .tb-lead { font-size: .95rem; max-width: 28rem; color: #fff; }
.tb-proj-hero--clean .tb-chip { font-size: .66rem; padding: 6px 12px; border-color: #fff; }   /* 13/10 (Eddy) : bordure pleine (avant .5) */
.tb-proj-hero--clean .tb-hero__scroll { margin-top: 28px; }
.tb-proj-crumb { display: flex; flex-wrap: wrap; gap: 10px; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tb-gray-500); margin: 0 0 clamp(28px, 4vw, 44px); }
.tb-proj-crumb > span { display: flex; flex-wrap: wrap; gap: 10px; }   /* structure Yoast : un span englobant, separateurs en texte */
.tb-proj-crumb strong, .tb-proj-crumb .breadcrumb_last { font-weight: 600; color: var(--tb-ink); }
.tb-proj-body.tb-section { padding-top: clamp(28px, 3.2vw, 48px); }   /* 05/10 : le fil d'Ariane remonte juste sous le hero (espace vide inutile) */
.tb-proj-crumb a:hover { color: var(--tb-ink); }
/* 07/10 (Eddy) : fil d'Ariane des pages hors du hero, en tete de la 1re section (comme les fiches) ; remonte dans le padding de la section */
.tb-page-crumb { margin: calc(clamp(28px, 3.2vw, 48px) - var(--tb-section)) 0 clamp(28px, 4vw, 44px); }   /* = meme distance hero -> fil d'Ariane que sur les fiches (28-48 px), quel que soit le padding de la section */
.tb-svc .tb-page-crumb { margin-top: calc(clamp(28px, 3.2vw, 48px) - clamp(40px, 4.5vw, 64px)); }   /* Services : section a padding reduit */
.tb-dark .tb-page-crumb { color: rgba(255,255,255,.6); }
.tb-dark .tb-page-crumb strong, .tb-dark .tb-page-crumb a:hover { color: #fff; }

/* corps : fiche + texte */
.tb-proj-body__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(40px, 6vw, 96px); align-items: start; }   /* Eddy 23/09 : texte a gauche, fiche + CTA a droite */
.tb-proj-sheet { order: 2; }
.tb-proj-body__content { order: 1; }
.tb-proj-sheet { position: sticky; top: 120px; background: var(--tb-ink); color: #fff; padding: 32px 36px 36px; border-radius: var(--tb-radius); }
.tb-proj-sheet > i { position: absolute; left: -2px; top: 15%; width: 4px; height: 70%; background: var(--tb-red); }   /* barre rouge a cheval sur le bord, hauteur du surtitre (Eddy 22/09) */
.tb-proj-sheet__list > div.is-wide { grid-template-columns: 1fr; gap: 10px; }   /* prestations : pastilles en lignes sur toute la largeur */
.tb-proj-sheet .tb-eyebrow { color: #fff; margin: 0; }
.tb-proj-sheet .tb-eyebrow::before { background: var(--tb-red); }
.tb-proj-sheet__list { margin: 22px 0 0; }
.tb-proj-sheet__list > div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.12); }
.tb-proj-sheet__list dt { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.85); padding-top: 4px; }
.tb-proj-sheet__list dd { margin: 0; padding: 0; font-family: var(--tb-font-display); font-size: 1.08rem; font-weight: 500; line-height: 1.35; color: #fff; }
.tb-proj-sheet__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tb-proj-sheet__chips span { display: inline-block; padding: 5px 10px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; font-family: var(--tb-font-body); font-size: .74rem; font-weight: 500; letter-spacing: .04em; color: rgba(255,255,255,.9); }
.tb-proj-sheet__empty { margin: 18px 0 0; color: rgba(255,255,255,.6); font-size: .95rem; }
.tb-proj-sheet__cta { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); }
@media (min-width: 961px) and (max-width: 1279px) { .tb-proj-sheet__cta .tb-btn { font-size: .78rem; padding: 14px 20px; gap: 8px; white-space: nowrap; } }   /* 14/10 (Eddy, iPad paysage) : « Un projet similaire ? » sur une ligne dans la fiche sticky */
.tb-proj-body__content { min-width: 0; }
.tb-proj-body__content #grve-post-content > .grve-container { width: 100%; max-width: none; padding: 0; margin: 0; }   /* Impeka enveloppe the_content() dans un conteneur avec gouttieres : on les retire (le texte doit partir du bord de la colonne) */
.tb-proj-body__content .tb-body { font-size: 1.05rem; line-height: 1.75; color: var(--tb-gray-700); max-width: 46rem; }
.tb-proj-body__content .tb-body > *:first-child { margin-top: 0; }
.tb-proj-body__content .tb-body p { margin: 0 0 1.2em; }
.tb-proj-body__content .tb-body p:first-of-type, .tb-proj-body__content .tb-body p.tb-proj-intro { font-size: 1.22rem; line-height: 1.55; color: var(--tb-ink); font-weight: 400; }   /* intro = tous les paragraphes avant l'encart Brief */
.tb-proj-body__content .tb-body h2, .tb-proj-body__content .tb-body h3 { display: block; font-family: var(--tb-font-display); font-weight: 600; color: var(--tb-ink); line-height: 1.15; margin: 1.8em 0 .6em; }
.tb-proj-body__content .tb-body h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.tb-proj-body__content .tb-body h3 { font-size: 1.25rem; }
.tb-proj-body__content .tb-body ul { list-style: none; padding: 0; margin: 0 0 1.6em; display: grid; gap: 10px; }
.tb-proj-body__content .tb-body li { position: relative; margin: 0; padding: 12px 18px 12px 52px; background: var(--tb-off); border-radius: var(--tb-radius); }
.tb-proj-body__content .tb-body li { display: flex; align-items: center; min-height: 52px; line-height: 1.45; font-size: 1.02rem; }   /* Eddy 23/09 : interligne resserre (le corps est a 1.75) */
.tb-proj-body__content .tb-body li::before { content: ""; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; background: var(--tb-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat; }
.tb-proj-body__head { margin-bottom: 28px; }
/* Encart "Le brief" (23/09, v5) : icone crayon rouge + separateur, mot fantome (text-stroke, comme les ghosts du site), texte en Inter */
.tb-proj-callout { position: relative; margin: 2.4em 0 2.8em; padding: 0 0 26px; border-bottom: 1px solid var(--tb-off-2); }   /* filet de cloture avant "Ce que nous avons fabrique" */
.tb-proj-callout__head { position: relative; display: flex; align-items: center; gap: 20px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--tb-off-2); }   /* filet sous le mot fantome */
.tb-proj-callout__ico { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--tb-red); border-radius: 50%; color: var(--tb-red); }   /* crayon dans un cercle filet rouge */
@media (min-width: 861px) {
  .tb-proj-callout__ico { position: absolute; left: calc(4px - var(--tb-gutter)); top: calc((100% - 14px) / 2); transform: translateY(-50%); }   /* dans la gouttiere du conteneur, jamais hors ecran */   /* Eddy 23/09 : en retrait dans la marge, sort de la colonne comme un ::before */
}
.tb-proj-callout__ico svg { width: 20px; height: 20px; display: block; }
.tb-proj-body__content .tb-body .tb-proj-callout__ghost { margin: 0; padding: 0; font-family: var(--tb-font-display); font-weight: 800; font-size: clamp(2.6rem, 5.2vw, 4.6rem); line-height: .95; letter-spacing: -.035em; text-transform: none; color: transparent; -webkit-text-stroke: 1px rgba(17,17,17,.42); }
.tb-proj-body__content .tb-body .tb-proj-callout p { margin: 0; font-family: var(--tb-font-body); font-size: 1.12rem; line-height: 1.7; color: var(--tb-gray-700); max-width: 42rem; }
@media (max-width: 600px) {
  .tb-proj-body__content .tb-body .tb-proj-callout__ghost { font-size: 2.4rem; }
}
.tb-proj-body__content .tb-body img { max-width: 100%; height: auto; border-radius: var(--tb-radius); }
.tb-proj-body__content .tb-body blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--tb-red); font-family: var(--tb-font-display); font-size: 1.35rem; line-height: 1.4; color: var(--tb-ink); }
.tb-proj-body__content .tb-body blockquote p { margin: 0; font-size: inherit; }

/* media Impeka (galerie / slider / video) */
.tb-proj-media__inner { margin: 8px auto 0; max-width: 1040px; }   /* 05/10 (Eddy) : slider moins large sur toutes les fiches (images un peu plus petites = plus nettes) */
/* 05/10 : Owl recalculait la scene a chaque diapositive de hauteur differente (portrait 1265 px vs 720) -> sauts, image « doublee » ; cadre 16/9 identique pour toutes, image entiere dedans sur fond sombre */
.tb-proj-media .grve-slider-item .grve-thumbnail { padding-top: 56.25% !important; position: relative; background: #111; border-radius: var(--tb-radius); overflow: hidden; }
.tb-proj-media .grve-slider-item .grve-thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.tb-proj-media .grve-slider-item-wrapper { height: auto !important; }
.tb-proj-media .grve-media img, .tb-proj-media .grve-gallery-item img { border-radius: var(--tb-radius); }
.tb-proj-media .grve-portfolio-media { padding: 0; }
.tb-proj-media .grve-gallery.grve-classic-style { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0; }
.tb-proj-media .grve-gallery.grve-classic-style .grve-gallery-item { float: none; width: auto; margin: 0; padding: 0; }
.tb-proj-media .grve-gallery.grve-classic-style .grve-gallery-item img { width: 100%; height: auto; display: block; }
.tb-proj-media .grve-carousel-wrapper { position: relative; padding-bottom: 70px; }
/* 05/10 : vidéo optionnelle sous la galerie des fiches (meta _tb_video) : portrait centré et étroit, paysage à la largeur du slider */
.tb-proj-video { margin: 0; max-width: 1040px; margin-inline: auto; }
.tb-proj-video--after { margin-top: clamp(40px, 5vw, 72px); }
.tb-proj-video__eyebrow { margin-bottom: 18px; }
.tb-proj-video__frame { background: #111; border-radius: var(--tb-radius); overflow: hidden; }
.tb-proj-video__frame video { display: block; width: 100%; height: auto; background: #111; }
.tb-proj-video--portrait .tb-proj-video__frame { max-width: 400px; margin-inline: auto; aspect-ratio: 9 / 16; }
.tb-proj-video--portrait .tb-proj-video__frame video { height: 100%; object-fit: contain; }
.tb-proj-video__credit { margin-top: 12px; font-size: .78rem; color: var(--tb-muted, #6b6b6b); text-align: center; }
.tb-proj-media .grve-carousel-wrapper .grve-carousel-navigation { position: absolute !important; right: 0 !important; bottom: 0 !important; top: auto !important; left: auto !important; transform: none !important; width: auto !important; height: auto !important; margin: 0 !important; }
.tb-proj-media .grve-carousel-wrapper .grve-carousel-buttons { position: static !important; display: flex !important; gap: 10px; }
.tb-proj-media .grve-carousel-wrapper .grve-carousel-buttons .grve-carousel-prev, .tb-proj-media .grve-carousel-wrapper .grve-carousel-buttons .grve-carousel-next { position: static !important; display: grid !important; place-items: center; width: 46px !important; height: 46px !important; margin: 0 !important; padding: 0 !important; border: 1px solid var(--tb-ink); border-radius: 50%; background: transparent !important; color: var(--tb-ink); opacity: 1 !important; visibility: visible !important; transform: none !important; cursor: pointer; transition: background .3s, color .3s; }
.tb-proj-media .grve-carousel-wrapper .grve-carousel-buttons .grve-carousel-prev:hover, .tb-proj-media .grve-carousel-wrapper .grve-carousel-buttons .grve-carousel-next:hover { background: var(--tb-ink) !important; color: #fff; }
.tb-proj-media .grve-carousel-buttons .grve-svg-icon { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; display: grid; place-items: center; }
.tb-proj-media .grve-carousel-buttons .grve-svg-icon svg { display: none !important; }
.tb-proj-media .grve-carousel-buttons .grve-svg-icon::before { content: ""; display: block; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }   /* memes fleches que le slider de la home */
.tb-proj-media .grve-carousel-buttons .grve-svg-icon { transform: none !important; }   /* Impeka tourne l'icone gauche : on fournit la fleche retour a la place */
.tb-proj-media .grve-carousel-prev .grve-svg-icon::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E"); }
.tb-proj-media .grve-slider-element { overflow: visible; }
.tb-proj-media .grve-slider-element .grve-carousel-pagination { position: absolute !important; left: 0 !important; right: auto !important; top: auto !important; bottom: -52px !important; width: auto !important; height: auto !important; display: flex !important; align-items: center; justify-content: flex-start; gap: 10px; margin: 0 !important; padding: 0 !important; text-align: left !important; transform: none !important; }   /* dots sous l'image, a gauche, face aux fleches (wrapper padding-bottom 70) */
.tb-proj-media .grve-carousel-pagination .grve-dot { appearance: none; border: 1.5px solid rgba(17,17,17,.6); background: transparent; width: 10px; height: 10px; border-radius: 999px; padding: 0; margin: 0; cursor: pointer; transition: width .35s var(--tb-ease), background .3s, border-color .3s; }
.tb-proj-media .grve-carousel-pagination .grve-dot:hover { border-color: var(--tb-ink); }
.tb-proj-media .grve-carousel-pagination .grve-dot.active { width: 30px; background: var(--tb-red); border-color: var(--tb-red); }
.tb-proj-media .grve-carousel-pagination .grve-dot span, .tb-proj-media .grve-carousel-pagination .grve-dot::before, .tb-proj-media .grve-carousel-pagination .grve-dot::after { display: none; }
.tb-proj-media .grve-slider img { border-radius: var(--tb-radius); }
/* 14/10 (Eddy) : galerie des fiches = apercu ; clic = lightbox (photo entiere) ; pastille « agrandir » + curseur loupe */
.tb-proj-media .grve-thumbnail.tb-zoomable { cursor: zoom-in; }
.tb-proj-media .grve-thumbnail.tb-zoomable::after { content: ""; position: absolute; right: 14px; bottom: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: var(--tb-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 18px no-repeat; pointer-events: none; transition: transform .4s var(--tb-ease); }
.tb-proj-media .grve-thumbnail.tb-zoomable:hover::after { transform: scale(1.1); }
.tb-lightbox { position: fixed; inset: 0; width: 100vw; height: 100svh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(0,0,0,.94); color: #fff; overflow: hidden; }
.tb-lightbox::backdrop { background: rgba(0,0,0,.6); }
.tb-lightbox[open] { display: grid; place-items: center; }
.tb-lightbox__fig { margin: 0; width: 100%; height: 100%; display: grid; place-items: center; }
.tb-lightbox__fig img { display: block; width: auto; height: auto; object-fit: contain; border-radius: var(--tb-radius); user-select: none; -webkit-user-drag: none; }
.tb-lightbox__close, .tb-lightbox__nav { appearance: none; position: absolute; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 1.5px solid rgba(255,255,255,.55); border-radius: 50%; background: rgba(0,0,0,.4); color: #fff; cursor: pointer; transition: background .3s, border-color .3s, color .3s; }
.tb-lightbox__close:hover, .tb-lightbox__nav:hover { background: #fff; border-color: #fff; color: var(--tb-ink); }
.tb-lightbox__close svg, .tb-lightbox__nav svg { width: 20px; height: 20px; }
.tb-lightbox__close { top: 20px; right: 20px; }
.tb-lightbox__nav { top: 50%; margin-top: -26px; }
.tb-lightbox__nav--prev { left: 20px; } .tb-lightbox__nav--prev svg { transform: rotate(180deg); }
.tb-lightbox__nav--next { right: 20px; }
.tb-lightbox__count { position: absolute; left: 0; right: 0; bottom: 18px; margin: 0; text-align: center; font-family: var(--tb-font-display); font-weight: 600; font-size: .85rem; letter-spacing: .12em; color: rgba(255,255,255,.8); }
html.tb-lightbox-on { overflow: hidden; }
@media (max-width: 600px) { .tb-lightbox__nav { top: auto; bottom: 10px; margin-top: 0; width: 46px; height: 46px; } .tb-lightbox__close { top: 12px; right: 12px; width: 46px; height: 46px; } .tb-lightbox__count { bottom: 24px; } }
/* 14/10 (Eddy, 13" / 15") : slider des fiches plafonne a la hauteur de l'ecran (les points restaient sous le pli) ; fleches de part et d'autre de l'image des 1200 px (il y a la place), centrees en hauteur */
@media (min-width: 961px) { .tb-proj-media__inner { max-width: min(1040px, calc((100svh - 240px) * 16 / 9)); } }
@media (min-width: 1200px) {
  .tb-proj-media .grve-carousel-wrapper .grve-carousel-navigation { left: -84px !important; right: -84px !important; top: 0 !important; bottom: 70px !important; display: flex !important; align-items: center; pointer-events: none; }
  .tb-proj-media .grve-carousel-wrapper .grve-carousel-buttons { width: 100%; justify-content: space-between; }
  .tb-proj-media .grve-carousel-wrapper .grve-carousel-buttons > * { pointer-events: auto; }
}

/* navigation precedent / suivant */
.tb-proj-nav { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--tb-black); color: #fff; }
.tb-proj-nav__item { position: relative; display: flex; align-items: flex-end; min-height: min(420px, 42vw); padding: clamp(36px, 5vw, 72px); overflow: hidden; color: #fff; text-decoration: none; background: var(--tb-ink); }
.tb-proj-nav__item + .tb-proj-nav__item { border-left: 1px solid rgba(255,255,255,.14); }
.tb-proj-nav__bg { position: absolute; inset: 0; }
.tb-proj-nav__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .32; filter: saturate(.7); transform: scale(1.02); transition: transform 1.4s var(--tb-ease), opacity .6s, filter .6s; }
.tb-proj-nav__item:hover .tb-proj-nav__bg img { opacity: .55; filter: saturate(1); transform: scale(1.07); }
.tb-proj-nav__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,12,.1) 0%, rgba(11,11,12,.75) 100%); }
.tb-proj-nav__inner { position: relative; z-index: 1; display: grid; gap: 10px; max-width: 30rem; }
.tb-proj-nav__item--next .tb-proj-nav__inner { margin-left: auto; text-align: right; justify-items: end; }
.tb-proj-nav__item .tb-eyebrow { color: #fff; margin: 0 0 4px; }
.tb-proj-nav__item--next .tb-eyebrow { flex-direction: row-reverse; }
.tb-proj-nav__title { font-family: var(--tb-font-display); font-size: clamp(1.5rem, 2.6vw, 2.4rem); font-weight: 600; line-height: 1.1; margin: 0; color: #fff; }
.tb-proj-nav__client { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.tb-proj-nav__arrow { display: grid; place-items: center; width: 46px; height: 46px; margin-top: 12px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; transition: background .3s, color .3s, border-color .3s, transform .5s var(--tb-ease); }
.tb-proj-nav__arrow svg { width: 20px; height: 20px; }
.tb-proj-nav__item:hover .tb-proj-nav__arrow { background: #fff; color: var(--tb-ink); border-color: #fff; }
.tb-proj-nav__item--prev:hover .tb-proj-nav__arrow { transform: translateX(-6px); }
.tb-proj-nav__item--next:hover .tb-proj-nav__arrow { transform: translateX(6px); }
.tb-proj-nav__item--all { background: var(--tb-black); }
.tb-proj-nav__all { position: absolute; z-index: 2; left: 50%; top: 50%; width: 56px; height: 56px; transform: translate(-50%, -50%); display: grid; grid-template-columns: repeat(2, 7px); gap: 5px; place-content: center; border-radius: 50%; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: background .3s, transform .5s var(--tb-ease); }
.tb-proj-nav__all span { width: 7px; height: 7px; border-radius: 1px; background: var(--tb-ink); transition: background .3s; }
.tb-proj-nav__all:hover { background: var(--tb-red); transform: translate(-50%, -50%) scale(1.08); }
.tb-proj-nav__all:hover span { background: #fff; }

/* autres realisations */
.tb-proj-related .tb-head--split { align-items: end; }
.tb-proj-related__link { justify-self: end; padding-bottom: 6px; }
.tb-proj-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 8px; }
.tb-proj-card { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--tb-radius); background: var(--tb-ink); color: #fff; text-decoration: none; }
.tb-proj-card__media { position: absolute; inset: 0; }
.tb-proj-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--tb-ease); }
.tb-proj-card:hover .tb-proj-card__media img { transform: scale(1.06); }
.tb-proj-card__ph { display: grid; place-items: center; height: 100%; background: var(--tb-off-2); color: var(--tb-gray-500); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.tb-proj-card__glass { position: absolute; left: 18px; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.tb-proj-card__glass strong { display: block; font-family: var(--tb-font-display); font-size: 1.05rem; font-weight: 600; line-height: 1.2; color: #fff; }
.tb-proj-card__glass span { display: block; margin-top: 3px; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.92); }

/* grille de la page Realisations (shortcode [impeka_portfolio] dans .tb-native) : alignee sur le conteneur (Eddy 23/09), filtres = style de base Impeka */
.tb-native { width: 100vw; margin-left: calc(50% - 50vw); padding: 56px max(var(--tb-gutter), calc((100vw - var(--tb-container)) / 2)) var(--tb-section); box-sizing: border-box; }
.tb-native .grve-filter { margin-bottom: 36px; }
.tb-native .grve-filter { padding: 0 24px !important; }   /* Impeka force 32 px avec un selecteur plus specifique */   /* Impeka : 32 px ; avec le decalage de -24 px ci-dessous, le premier filtre et le select tombent sur le bord du conteneur */
.tb-native .grve-portfolio { margin: 0 -24px; width: calc(100% + 48px); }   /* Isotope : conteneur padding 12 + item left 12 + item padding 12 = 24 px avant l'image ; on decale tout le bloc de 24 px pour que les images partent du bord du conteneur, sans toucher aux mesures */
.tb-native .grve-filter ul li { font-family: var(--tb-font-body); font-size: .8rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.tb-native .grve-filters-select { font-family: var(--tb-font-body); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tb-ink); border-bottom-color: var(--tb-ink); margin: 0 24px 28px; width: calc(100% - 48px); }   /* le select mobile est hors .grve-filter : on le recale sur le conteneur */
.tb-native .grve-hover-item { position: relative; overflow: hidden; border-radius: var(--tb-radius); background: var(--tb-ink); }
.tb-native .grve-hover-item .grve-thumbnail img { transition: transform 1.2s var(--tb-ease); }
.tb-native .grve-hover-item:hover .grve-thumbnail img { transform: scale(1.06); }
.tb-native .grve-hover-item .grve-hover-overlay { transition: opacity .6s; }
.tb-native .grve-hover-item:hover .grve-hover-overlay { opacity: .3 !important; }
.tb-native .grve-hover-item .grve-content { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2; padding: 14px 18px 14px 18px; background: rgb(0 0 0 / 75%); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); color: #fff; pointer-events: none; text-align: left; }
.tb-native .grve-hover-item .grve-content::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 4px; background: var(--tb-red); }
.tb-native .grve-hover-item .grve-content-inner { padding: 0; }
.tb-native .grve-hover-item .grve-title { font-family: var(--tb-font-display); font-size: 1.05rem; font-weight: 600; line-height: 1.2; margin: 0; color: #fff !important; }
.tb-native .grve-hover-item .grve-title a { color: #fff !important; }
.tb-native .grve-hover-item .grve-description { margin: 3px 0 0; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.92) !important; }   /* Eddy 23/09 : client lisible */
.tb-native .grve-hover-item .grve-description a { color: inherit !important; }
.tb-native .grve-load-more-wrapper, .tb-native .grve-btn-load-more { margin-top: 32px; }

@media (max-width: 1100px) {
  .tb-proj-body__grid { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 860px) {
  .tb-proj-body__grid { grid-template-columns: 1fr; gap: 36px; }
  .tb-proj-sheet { position: static; padding: 26px 24px 28px; }
  .tb-proj-sheet__list > div { grid-template-columns: 96px 1fr; gap: 12px; }
  .tb-proj-nav { grid-template-columns: 1fr; }
  .tb-proj-nav__item { min-height: 240px; padding: 28px 20px; }
  .tb-proj-nav__item + .tb-proj-nav__item { border-left: 0; border-top: 1px solid rgba(255,255,255,.14); }
  .tb-proj-nav__all { display: none; }
  .tb-proj-grid { grid-template-columns: 1fr; gap: 16px; }
  .tb-proj-related__link { justify-self: start; }
  .tb-native { padding: 36px var(--tb-gutter) 64px; }
}


/* --------------------------------------------------------------------------
   Piste B (23/09, brouillon page 142) : vue liste typographique du portfolio, image qui suit le pointeur
   -------------------------------------------------------------------------- */
.tb-plist { position: relative; }
.tb-plist__filters { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-bottom: 40px; }
.tb-plist__filters button { appearance: none; border: 0; background: none; padding: 4px 0; font-family: var(--tb-font-body); font-size: .8rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--tb-gray-500); cursor: pointer; position: relative; }
.tb-plist__filters button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--tb-ink); transform: scaleX(0); transform-origin: left center; transition: transform .35s var(--tb-ease); }
.tb-plist__filters button:hover { color: var(--tb-ink); }
.tb-plist__filters button[aria-pressed="true"] { color: var(--tb-ink); }
.tb-plist__filters button[aria-pressed="true"]::after { transform: scaleX(1); }
.tb-plist__rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tb-off-2); }
.tb-plist__row { border-bottom: 1px solid var(--tb-off-2); transition: opacity .4s, transform .4s var(--tb-ease); }
.tb-plist__row.is-hidden { display: none; }
.tb-plist__row a { display: grid; grid-template-columns: 56px minmax(0, 1.6fr) minmax(0, .9fr) minmax(0, .8fr) 64px 46px; align-items: center; gap: 24px; padding: 30px 0; color: var(--tb-ink); text-decoration: none; }
.tb-plist__num { font-family: var(--tb-font-body); font-size: .78rem; letter-spacing: .12em; color: var(--tb-gray-500); transition: color .3s; }
.tb-plist__title { font-family: var(--tb-font-display); font-size: clamp(1.5rem, 2.6vw, 2.4rem); font-weight: 600; line-height: 1.05; letter-spacing: -.01em; transition: transform .5s var(--tb-ease); }
.tb-plist__client, .tb-plist__cat { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tb-gray-700); }
.tb-plist__cat { color: var(--tb-gray-500); }
.tb-plist__year { font-family: var(--tb-font-display); font-size: 1rem; font-weight: 500; color: var(--tb-gray-700); text-align: right; }
.tb-plist__arrow { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--tb-off-2); border-radius: 50%; color: var(--tb-ink); transition: background .3s, color .3s, border-color .3s, transform .5s var(--tb-ease); }
.tb-plist__arrow svg { width: 18px; height: 18px; }
.tb-plist__thumb { display: none; }
.tb-plist__row a:hover .tb-plist__title { transform: translateX(14px); }
.tb-plist__row a:hover .tb-plist__num { color: var(--tb-red); }
.tb-plist__row a:hover .tb-plist__arrow { background: var(--tb-ink); color: #fff; border-color: var(--tb-ink); transform: rotate(45deg); }
.tb-plist--hover .tb-plist__row:not(:hover) a { opacity: .45; }
.tb-plist__row a { transition: opacity .4s; }
/* image flottante qui suit le pointeur (desktop) */
.tb-plist__preview { position: fixed; z-index: 40; left: 0; top: 0; width: 360px; aspect-ratio: 4 / 3; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.9) rotate(-2deg); transition: opacity .35s, transform .5s var(--tb-ease); overflow: hidden; border-radius: var(--tb-radius); box-shadow: 0 30px 60px rgba(0,0,0,.28); background: var(--tb-ink); }
.tb-plist__preview.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
.tb-plist__preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tb-plist__preview i { position: absolute; left: 18px; bottom: 18px; width: 4px; height: 28px; background: var(--tb-red); }
@media (max-width: 1100px) {
  .tb-plist__row a { grid-template-columns: 48px minmax(0, 1.6fr) minmax(0, 1fr) 46px; }
  .tb-plist__cat, .tb-plist__year { display: none; }
}
@media (max-width: 860px), (hover: none) {
  .tb-plist__preview { display: none; }
  .tb-plist--hover .tb-plist__row:not(:hover) a { opacity: 1; }
  .tb-plist__row a { grid-template-columns: 112px minmax(0, 1fr) 40px; grid-template-areas: "thumb title arrow" "thumb meta arrow"; gap: 6px 18px; padding: 18px 0; }
  .tb-plist__thumb { display: block; grid-area: thumb; width: 112px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--tb-radius); }
  .tb-plist__num { display: none; }
  .tb-plist__title { grid-area: title; font-size: 1.2rem; align-self: end; }
  .tb-plist__client { grid-area: meta; align-self: start; font-size: .72rem; }
  .tb-plist__arrow { grid-area: arrow; width: 40px; height: 40px; }
  .tb-plist__row a:hover .tb-plist__title { transform: none; }
}


/* --------------------------------------------------------------------------
   Piste C (23/09, brouillon page 143) : deck de cartes par type de projet, en cascade, qui filtre la grille
   -------------------------------------------------------------------------- */
.tb-native--deck { padding: 0 !important; }   /* la section du deck gere son propre conteneur, pleine largeur */
.tb-deck-section { background: var(--tb-black); color: #fff; overflow: hidden; }
.tb-deck { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.tb-deck__intro .tb-eyebrow { color: #fff; }
.tb-deck__intro .tb-eyebrow::before { background: var(--tb-red); }
.tb-deck__intro .tb-h2 { color: #fff; }
.tb-deck__intro .tb-lead { color: rgba(255,255,255,.75); margin-top: 20px; max-width: 26rem; }
.tb-deck__nav { display: flex; align-items: center; gap: 10px; margin-top: 34px; }
.tb-deck__btn { appearance: none; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.tb-deck__btn svg { width: 18px; height: 18px; }
.tb-deck__btn:hover { background: #fff; color: var(--tb-ink); border-color: #fff; }
.tb-deck__dots { display: flex; align-items: center; gap: 10px; margin-left: 14px; }
.tb-deck__dots button { appearance: none; border: 1.5px solid rgba(255,255,255,.55); background: transparent; width: 10px; height: 10px; border-radius: 999px; padding: 0; margin: 0; cursor: pointer; transition: width .35s var(--tb-ease), background .3s, border-color .3s; }
.tb-deck__dots button[aria-selected="true"] { width: 30px; background: var(--tb-red); border-color: var(--tb-red); }
/* scene : cartes empilees en cascade vers la droite */
.tb-deck__stage { position: relative; height: clamp(380px, 34vw, 520px); perspective: 1400px; touch-action: pan-y; user-select: none; }
.tb-deck__card { position: absolute; left: 0; top: 0; width: min(100%, 470px); height: 100%; border-radius: var(--tb-radius); overflow: hidden; background: var(--tb-ink); color: #fff; box-shadow: 0 30px 70px rgba(0,0,0,.45); transform-origin: left center; transition: transform .8s cubic-bezier(.76, 0, .24, 1), opacity .6s, filter .6s; will-change: transform; cursor: pointer; }
.tb-deck__card.is-active { cursor: default; }
.tb-deck__media { position: absolute; inset: 0; }
.tb-deck__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--tb-ease); }
.tb-deck__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.82) 100%); }
.tb-deck__card:not(.is-active) .tb-deck__media img { filter: saturate(.6) brightness(.7); }
.tb-deck__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 30px 30px; display: grid; gap: 8px; }
.tb-deck__num { font-size: .74rem; letter-spacing: .16em; color: var(--tb-red); font-weight: 600; }
.tb-deck__title { font-family: var(--tb-font-display); font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 600; line-height: 1.05; margin: 0; color: #fff; }
.tb-deck__meta { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.tb-deck__go { justify-self: start; margin-top: 10px; opacity: 0; transform: translateY(8px); transition: opacity .4s .25s, transform .5s .25s var(--tb-ease); }
.tb-deck__card.is-active .tb-deck__go { opacity: 1; transform: none; }
.tb-deck__card:not(.is-active) .tb-deck__body > *:not(.tb-deck__num):not(.tb-deck__title) { opacity: 0; }
@media (max-width: 860px) {
  .tb-deck { grid-template-columns: 1fr; gap: 28px; }
  .tb-deck__stage { height: auto; perspective: none; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 4px 0 18px; margin: 0 calc(-1 * var(--tb-gutter)); padding-left: var(--tb-gutter); scrollbar-width: none; }
  .tb-deck__stage::-webkit-scrollbar { display: none; }
  .tb-deck__card { position: relative; flex: 0 0 86vw; width: 86vw; height: auto; aspect-ratio: 4 / 5; scroll-snap-align: start; transform: none !important; opacity: 1 !important; }
  .tb-deck__card:not(.is-active) .tb-deck__media img { filter: none; }
  .tb-deck__go, .tb-deck__card:not(.is-active) .tb-deck__body > * { opacity: 1 !important; transform: none !important; }
  .tb-deck__nav .tb-deck__btn { display: none; }
  .tb-deck__dots { margin-left: 0; }
}


/* --------------------------------------------------------------------------
   Version D (23/09, brouillon page 143) : hero qui se floute et bave dans la scene noire,
   categories en grand a gauche (mot fantome / plein), projets deployes a droite en slider
   -------------------------------------------------------------------------- */
.tb-native--scene { padding: 0 !important; background: transparent !important; }   /* Impeka met un fond blanc sur .grve-text : c'etait la bande claire entre hero et scene */
.tb-pscene { position: relative; z-index: 1; margin-top: -220px; padding-top: calc(220px + 40px); background: linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,.6) 140px, #000 300px); color: #fff; }   /* Eddy 23/09 : recouvrement 220 px et moins d'air avant le deck */
.tb-proj-hero--full.tb-hero--bleed { z-index: 0; overflow: visible; min-height: calc(100svh + 140px); padding-bottom: calc(140px + clamp(44px, 6vh, 80px)); }
@media (min-width: 861px) and (max-width: 1199px) { .tb-proj-hero--full.tb-hero--bleed { min-height: calc(100svh + 40px); padding-bottom: calc(40px + clamp(44px, 6vh, 80px)); } .tb-pscene { padding-top: calc(220px + 20px); } }   /* 14/10 (Eddy, iPad paysage) : meme reduction du noir sous le hero que sur mobile (desktop >= 1200 inchange) */
@media (max-width: 860px) { .tb-proj-hero--full.tb-hero--bleed { min-height: calc(100svh + 40px); padding-bottom: calc(40px + clamp(44px, 6vh, 80px)); } }   /* 14/10 (Eddy) : ~250 px de noir sous le hero de Realisations sur mobile -> debord 140 -> 40 px (texte au meme endroit par rapport au bas de l'ecran) */
.tb-proj-hero--full.tb-hero--bleed .tb-page-hero__bg { bottom: -240px; }   /* l'image couvre tout le recouvrement */   /* +140 px = recouvrement par la scene : la partie visible reste plein ecran */
.page-id-37 #grve-main-content { background: #000; }   /* fond noir derriere le hero qui deborde : plus de bande claire */
.tb-proj-hero--full.tb-hero--bleed .tb-page-hero__bg { bottom: -160px; }   /* l'image deborde sous la scene : le degrade de la scene la fond dans le noir (plus de bande blanche) */
.tb-proj-hero--full.tb-hero--bleed { --tb-hero-shade: .55; }
.tb-proj-hero--full.tb-hero--bleed .tb-page-hero__bg::after { background: rgba(0,0,0,var(--tb-hero-shade)); mix-blend-mode: multiply; }   /* Eddy 23/09 : .55 au chargement, .85 au scroll (variable animee par GSAP) */
.tb-pscene > .tb-container { width: calc(100% - 2 * clamp(40px, 5vw, 120px)); max-width: none; margin: 0 auto; }   /* quasi plein ecran (Eddy) : marges moderees, pas de plafond ; le deck deborde a droite */
.tb-pscene__grid { display: grid; grid-template-columns: minmax(0, clamp(420px, 34vw, 760px)) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }   /* colonne des categories plus large sur grand ecran */
.tb-pscene__cats .tb-eyebrow { color: #fff; margin-bottom: 26px; }
.tb-pscene__cats .tb-eyebrow::before { background: var(--tb-red); }
.tb-pscene__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; }   /* plus d'air entre les categories */
/* a partir de 5 entrees (Tous compris), les fantomes descendent d'un cran pour tenir en face du deck (liste de Florian, 24/09) */
.tb-pscene__list[data-count="5"], .tb-pscene__list[data-count="6"] { gap: 22px; }
.tb-pscene__list[data-count="5"] .tb-pscene__name, .tb-pscene__list[data-count="6"] .tb-pscene__name { font-size: clamp(2rem, 3.6vw, 4rem); }
.tb-pscene__list[data-count="7"], .tb-pscene__list[data-count="8"] { gap: 16px; }
.tb-pscene__list[data-count="7"] .tb-pscene__name, .tb-pscene__list[data-count="8"] .tb-pscene__name { font-size: clamp(1.7rem, 2.9vw, 3.2rem); }
.tb-pscene__list button { appearance: none; display: block; width: 100%; padding: 6px 0; border: 0; background: none; text-align: left; cursor: pointer; color: #fff; }
.tb-pscene__name { display: inline; font-family: var(--tb-font-display); font-weight: 800; font-size: clamp(1.7rem, 2.9vw, 3.2rem);   /* 06/10 (Eddy) : taille figée = celle vue avec 7 catégories, quel que soit le nombre (les règles data-count ci-dessus ne grossissent plus) */ line-height: 1; letter-spacing: -.035em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.45); transition: color .45s, -webkit-text-stroke-color .45s, transform .5s var(--tb-ease); }
.tb-pscene__last { white-space: nowrap; }
.tb-pscene__count { position: relative; display: inline-block; margin-left: 12px; padding-left: 0; vertical-align: baseline; white-space: nowrap; font-family: var(--tb-font-body); font-weight: 400; font-size: .78rem; letter-spacing: .14em; color: rgba(255,255,255,.55); -webkit-text-stroke: 0; transition: color .3s, padding-left .5s var(--tb-ease); }
.tb-pscene__count::before { content: ""; position: absolute; left: 0; top: 50%; height: 2px; width: 28px; margin-top: -1px; background: var(--tb-red); transform: scaleX(0); transform-origin: left center; transition: transform .5s var(--tb-ease); }   /* trait rouge qui se deploie vers la droite et pousse le compteur (Eddy 23/09) */
.tb-pscene__list button[aria-selected="true"] .tb-pscene__count { padding-left: 38px; }
.tb-pscene__list button[aria-selected="true"] .tb-pscene__count::before { transform: scaleX(1); }
.tb-pscene__list button:hover .tb-pscene__name { -webkit-text-stroke-color: rgba(255,255,255,.85); }
.tb-pscene__list button[aria-selected="true"] .tb-pscene__name { color: #fff; -webkit-text-stroke-color: #fff; transform: translateX(10px); }
.tb-pscene__list button[aria-selected="true"] .tb-pscene__count { color: var(--tb-red); }

/* panneau droit : slider de tuiles qui deborde vers le bord droit de l'ecran */
.tb-pscene__panel { min-width: 0; }
.tb-pscene__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; }
.tb-pscene__hud { font-family: var(--tb-font-display); font-weight: 600; font-size: 1.1rem; color: rgba(255,255,255,.6); }
.tb-pscene__hud b { font-size: 1.6rem; color: #fff; margin-right: 6px; }
.tb-pscene__arrows { display: flex; gap: 10px; }
.tb-pscene__arrow { appearance: none; width: 44px; height: 44px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.45); background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; transition: border-color .3s, background .3s, color .3s, opacity .3s; }
.tb-pscene__arrow svg { width: 18px; height: 18px; }
.tb-pscene__arrow:hover { border-color: var(--tb-red); background: var(--tb-red); }
.tb-pscene__arrow[disabled] { opacity: .3; cursor: default; border-color: rgba(255,255,255,.45); background: transparent; }
/* 01/10 (Eddy) : une seule tuile active, la suivante rognee a droite ; defilement natif + scroll-snap, boucle par clones (projScene) */
.tb-pscene__viewport { position: relative; overflow-x: auto; overflow-y: hidden; width: var(--tb-pscene-vw, 100%); scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.tb-pscene__viewport::-webkit-scrollbar { display: none; }
/* 05/10 : le snap n'est plus jamais coupe (is-dragging ne sert qu'au curseur) ; is-jumping supprime */
@media (min-width: 861px) { .tb-pscene__viewport { user-select: none; -webkit-user-select: none; } .tb-pscene__viewport.is-dragging { cursor: grabbing; } }   /* pas de selection pendant le glissement souris (sinon autoscroll de selection quand la souris sort du cadre) */
.tb-pscene__track { display: flex; gap: 24px; }
.tb-pscene__track::after { content: ""; flex: 0 0 calc(var(--tb-pscene-vw, 100%) - var(--tb-pscene-tile, 784px)); }   /* espace de fin : la derniere diapositive (clone) peut se caler au bord gauche */
.tb-pscene__tile { flex: 0 0 auto; width: var(--tb-pscene-tile, 784px); scroll-snap-align: start; transition: opacity .5s, transform .6s var(--tb-ease); }
.tb-pscene__tile.is-hidden { display: none; }
.tb-pscene__tile .tb-proj-card { aspect-ratio: 3 / 2; }
.tb-pscene__tile .tb-proj-card__glass strong { font-size: 1.25rem; }   /* cartouche a l'echelle de la grande tuile */
/* .tb-pscene__fade supprime le 01/10 (Eddy) : en position absolue dans un viewport qui defile, le degrade suivait le contenu et tombait sur la tuile active */
.tb-pscene__foot { display: flex; align-items: center; justify-content: flex-start; gap: 44px; margin-top: 22px; }   /* dots + fleches groupes sous les tuiles (Eddy 23/09) */
.tb-pscene__dots { display: flex; align-items: center; gap: 10px; }
.tb-pscene__dots button { appearance: none; border: 1.5px solid rgba(255,255,255,.55); background: transparent; width: 10px; height: 10px; border-radius: 999px; padding: 0; margin: 0; cursor: pointer; transition: width .35s var(--tb-ease), background .3s, border-color .3s; }
.tb-pscene__dots button:hover { border-color: #fff; }
.tb-pscene__dots button[aria-selected="true"] { width: 30px; background: var(--tb-red); border-color: var(--tb-red); }
.tb-pscene .tb-link { color: #fff; }
.tb-pscene.is-switching .tb-pscene__tile { opacity: 0; transform: translateY(14px); }
@media (max-width: 860px) {
  .tb-pscene { margin-top: -80px; padding-top: calc(80px + 16px); }   /* 14/10 : 56 -> 16 px (meme reduction du noir sous le hero) */
  .tb-pscene__grid { grid-template-columns: 1fr; gap: 26px; }
  .tb-pscene__list { display: flex; gap: 18px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y; scrollbar-width: none; margin: 0 calc(-1 * var(--tb-gutter)); padding: 0 var(--tb-gutter) 8px; }   /* 08/10 (Eddy) : overflow-y hidden + overscroll contain (la ligne bougeait aussi a la verticale au doigt, regle snapDots) */
  .tb-pscene__list::-webkit-scrollbar { display: none; }
  .tb-pscene__list li { flex: 0 0 auto; }
  .tb-pscene__grid { grid-template-columns: minmax(0, 1fr) !important; } .tb-pscene__cats { min-width: 0; }   /* 08/10 : la colonne s'elargissait au contenu (457 px dans 360) -> la ligne ne defilait pas, Tour de France / Covering hors d'atteinte */
  .tb-pscene__list::after { content: ""; flex: 0 0 calc(var(--tb-gutter) - 18px + 1px); }   /* 08/10 : le padding droit d'un conteneur flex qui defile est ignore -> la derniere categorie (Tour de France) restait hors d'atteinte */
  .tb-pscene__list .tb-pscene__count { display: none; }   /* 08/10 (Eddy) : pas de compteur ni de tiret rouge sur mobile */
  .tb-pscene__list button { width: auto; gap: 8px; }
  .tb-pscene__list .tb-pscene__name, .tb-pscene__list[data-count] .tb-pscene__name { font-size: 1.15rem; }   /* 08/10 (Eddy) : reduit sur mobile (bat les regles data-count) */
  .tb-pscene__list button[aria-selected="true"] .tb-pscene__name { transform: none; }
  .tb-pscene__hint { display: none; }
  .tb-pscene__viewport { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--tb-gutter); -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--tb-gutter)); scrollbar-width: none; }
  .tb-pscene__track { padding: 0 var(--tb-gutter); }
  .tb-pscene__track::after { content: ""; flex: 0 0 1px; }
  .tb-pscene__viewport::-webkit-scrollbar { display: none; }
  .tb-pscene__track { gap: 14px; }
  .tb-pscene__tile { width: 78vw; scroll-snap-align: start; }
  .tb-pscene__arrows { display: none; }
  .tb-pscene__foot { flex-wrap: wrap; gap: 20px; }
}


/* Version D, etat « Tous » : deck 3D des categories (grandes cartes paysage en cascade perspective, qui sortent de l'ecran) */
.tb-pscene__panel { position: relative; }
.tb-pscene__deck { position: relative; height: var(--tb-deck-h, 480px); width: var(--tb-pscene-vw, 100%); margin-top: var(--tb-deck-top, 120px); perspective: 2000px; perspective-origin: 20% 30%; }   /* dimensions calculees en JS : la carte de devant sort de l'ecran a droite sur toutes les tailles */   /* marge haute = place pour les cartes empilees derriere, en haut a droite */
.tb-pscene__card { appearance: none; position: absolute; left: 0; top: 0; height: 100%; width: var(--tb-deck-w, auto); padding: 0; border: 0; border-radius: var(--tb-radius); overflow: hidden; background: var(--tb-ink); color: #fff; text-align: left; cursor: pointer; box-shadow: 0 34px 80px rgba(0,0,0,.5); transform-origin: left bottom; transition: transform .8s cubic-bezier(.76, 0, .24, 1), opacity .5s, filter .5s; will-change: transform; }
.tb-pscene__card.is-front { cursor: default; }
.tb-pscene__card.is-morphing { transition: none !important; }   /* GSAP pilote le transform pendant le morph */
.tb-pscene__card-media { position: absolute; inset: 0; }
.tb-pscene__card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--tb-ease), filter .5s; }
.tb-pscene__card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 35%, rgba(0,0,0,.85) 100%); }
.tb-pscene__card:not(.is-front) .tb-pscene__card-media img { filter: saturate(.5) brightness(.6) blur(var(--tb-card-blur, 0px)); }   /* flou leger des cartes arriere (Dribbble) */
.tb-pscene__card:hover .tb-pscene__card-media img { transform: scale(1.05); filter: none; }
.tb-pscene__card-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 28px 28px; display: grid; gap: 6px; }
.tb-pscene__card-num { font-size: .74rem; letter-spacing: .16em; color: var(--tb-red); font-weight: 600; }
.tb-pscene__card-title { font-family: var(--tb-font-display); font-size: clamp(1.5rem, 2.4vw, 2.2rem); font-weight: 600; line-height: 1.05; }
.tb-pscene__card-meta { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.tb-pscene__card-go { justify-self: start; margin-top: 12px; opacity: 0; transform: translateY(8px); transition: opacity .35s .2s, transform .5s .2s var(--tb-ease); cursor: pointer; }
.tb-pscene__card.is-front .tb-pscene__card-go { opacity: 1; transform: none; }
.tb-pscene__card:not(.is-front) .tb-pscene__card-meta, .tb-pscene__card:not(.is-front) .tb-pscene__card-go { opacity: 0; }
.tb-pscene__card-body { transition: opacity .3s; }
.tb-pscene.is-morph .tb-pscene__card:not(.is-front) { opacity: 0; }
.tb-pscene.is-morph .tb-pscene__card.is-front .tb-pscene__card-body { opacity: 0; }
.tb-pscene[data-mode="slider"] .tb-pscene__deck { display: none; }
.tb-pscene[data-mode="deck"] .tb-pscene__slider { display: none; }
.tb-pscene__slider { transition: opacity .35s; }
.tb-pscene.is-morph .tb-pscene__slider { opacity: 0; }
.tb-pscene__slider.is-measuring { display: block !important; visibility: hidden; position: absolute; left: 0; top: 0; width: 100%; }
/* fondu croise a la fin du morph : le slider se superpose sous la carte (meme position que la mesure), la 1re tuile n'a pas d'entree, la carte s'efface par-dessus */
.tb-pscene.is-crossfade .tb-pscene__deck { display: block !important; pointer-events: none; }
.tb-pscene.is-crossfade .tb-pscene__slider { position: absolute; left: 0; top: 0; width: 100%; }
.tb-pscene.is-crossfade .tb-pscene__card:not(.is-front) { opacity: 0; }
.tb-pscene.is-entering .tb-pscene__tile.is-first, .tb-pscene.is-crossfade .tb-pscene__tile.is-first { animation: none !important; }   /* la 1re tuile (celle sous la carte) n'a jamais d'entree : exclusion tenue jusqu'a la fin de is-entering */
.tb-pscene.is-crossfade .tb-pscene__tile, .tb-pscene.is-entering .tb-pscene__tile { transition: none; }
/* slider -> slider (clic sur un fantome en mode slider) : simple fondu, aucune autre animation */
.tb-pscene.is-quiet .tb-pscene__tile { animation: none !important; transition: none !important; }
.tb-pscene.is-quiet .tb-pscene__slider { transition: none !important; }
.tb-pscene.is-quiet .tb-pscene__track { transition: none !important; }
/* entree en cascade des tuiles : seulement a l'arrivee depuis le deck (classe is-entering posee le temps du fondu croise) */
.tb-pscene.is-entering .tb-pscene__tile { animation: tbTileIn .6s var(--tb-ease) both; }
.tb-pscene.is-entering .tb-pscene__tile:nth-child(2) { animation-delay: .08s; } .tb-pscene.is-entering .tb-pscene__tile:nth-child(3) { animation-delay: .16s; } .tb-pscene.is-entering .tb-pscene__tile:nth-child(n+4) { animation-delay: .24s; }
@keyframes tbTileIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) {
  .tb-pscene__deck { height: auto; perspective: none; width: auto; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--tb-gutter)); padding: 4px var(--tb-gutter) 14px; scrollbar-width: none; }
  .tb-pscene__deck::-webkit-scrollbar { display: none; }
  .tb-pscene__deck { margin-top: 0; }
  .tb-pscene__card { position: relative; flex: 0 0 82vw; width: 82vw; height: auto; aspect-ratio: 4 / 3; transform: none !important; opacity: 1 !important; scroll-snap-align: start; }
  .tb-pscene__card .tb-pscene__card-go, .tb-pscene__card .tb-pscene__card-meta { opacity: 1 !important; transform: none !important; }
  .tb-pscene__list .tb-pscene__name, .tb-pscene__list[data-count] .tb-pscene__name { font-size: 1.15rem; }   /* 08/10 (Eddy) : reduit sur mobile (bat les regles data-count) */
  .tb-pscene__list { gap: 14px; }
  .tb-pscene__card:not(.is-front) .tb-pscene__card-media img { filter: none; }
}
@media (max-width: 600px) {   /* 14/10 (Eddy) : cartes de categorie et tuiles projet en portrait 4:5 sur mobile (le paysage faisait ~240 px de haut, texte et CTA couvraient la moitie) */
  .tb-pscene__card { aspect-ratio: 3 / 4; }   /* 4:5 -> 3:4 (Eddy : un peu plus haut) */
  .tb-pscene__card-media picture, .tb-pscene__tile .tb-proj-card__media picture { display: block; width: 100%; height: 100%; }
  .tb-pscene__card-media::after { background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.82) 100%); }
  .tb-pscene__card-body { padding: 20px 20px 22px; gap: 4px; }
  .tb-pscene__card-go.tb-btn { min-height: 40px; padding: 10px 18px; font-size: .74rem; gap: 8px; margin-top: 10px; }
  .tb-pscene__card-go.tb-btn svg { width: 14px; height: 14px; }
  .tb-pscene__tile .tb-proj-card { aspect-ratio: 3 / 4; }
  /* 14/10 (Eddy) : rangee des categories = filet clair + trait rouge sous l'active, meme vocabulaire que les onglets de la page Services (on comprend qu'elle se glisse) */
  .tb-pscene__list { padding-bottom: 0; background: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22)) no-repeat var(--tb-gutter) 100% / calc(100% - 2 * var(--tb-gutter)) 1px; }
  .tb-pscene__list button { position: relative; padding-bottom: 14px; }
  .tb-pscene__list button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--tb-red); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--tb-ease); }
  .tb-pscene__list button[aria-selected="true"]::after { transform: scaleX(1); }
}

/* zones a curseur custom : les vrais boutons gardent le pointeur natif (Eddy 23/09) */
html.tb-js [data-tb-cursor] .tb-work.is-active .tb-work__glass, html.tb-js [data-tb-cursor] .tb-work.is-active .tb-work__glass *, html.tb-js [data-tb-cursor] .tb-btn, html.tb-js [data-tb-cursor] .tb-btn *, html.tb-js [data-tb-cursor] .tb-link, html.tb-js [data-tb-cursor] .tb-link *, html.tb-js [data-tb-cursor] .tb-pscene__arrow, html.tb-js [data-tb-cursor] .tb-pscene__arrow *, html.tb-js [data-tb-cursor] .tb-deck__btn, html.tb-js [data-tb-cursor] [data-tb-cursor-off], html.tb-js [data-tb-cursor] .tb-pscene__card-go, html.tb-js [data-tb-cursor] .tb-pscene__card-go * { cursor: pointer !important; }   /* plus specifique que la regle cursor:none de la zone */


/* --------------------------------------------------------------------------
   Bloc CTA photo (23/09, page Realisations) : photo + plaque rouge decalee a gauche, panneau noir a droite
   -------------------------------------------------------------------------- */
.tb-cta-photo { display: grid; grid-template-columns: 1.1fr 1fr; min-height: min(72vh, 720px); background: var(--tb-black); color: #fff; }
.tb-cta-photo__media { position: relative; overflow: visible; }
.tb-cta-photo__media img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.tb-cta-photo__plate { position: absolute; z-index: 0; left: clamp(20px, 3vw, 44px); top: clamp(20px, 3vw, 44px); right: calc(-1 * clamp(20px, 3vw, 44px)); bottom: calc(-1 * clamp(20px, 3vw, 44px)); background: var(--tb-red); }   /* plaque rouge decalee en bas a droite, comme sur l'Atelier de la home */
.tb-cta-photo__body { display: flex; align-items: center; padding: clamp(56px, 8vw, 120px) clamp(32px, 6vw, 96px); }
.tb-cta-photo__inner { max-width: 34rem; }
.tb-cta-photo .tb-eyebrow { color: #fff; }
.tb-cta-photo .tb-eyebrow::before { background: var(--tb-red); }
.tb-cta-photo .tb-h2 { color: #fff; margin-top: 18px; }
.tb-cta-photo .tb-lead { color: rgba(255,255,255,.75); margin-top: 22px; }
.tb-cta-photo .tb-btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 34px; }
.tb-cta-photo__tel { font-family: var(--tb-font-display); font-weight: 600; font-size: 1.1rem; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 2px; transition: border-color .3s; }
.tb a.tb-cta-photo__tel:hover { border-color: var(--tb-red); }
/* bandeau CTA compact sous le slider (colonne droite, mode slider seulement) : photo + plaque rouge decalee, lien souligne a fleche par-dessus */
.tb-cta-photo--strip { display: block; position: relative; margin: 60px 0 0 auto; width: min(520px, 100%); aspect-ratio: 16 / 7; min-height: 0; background: none; color: #fff; text-decoration: none; }
.tb-cta-photo--strip .tb-cta-photo__plate { position: absolute; z-index: 0; left: -18px; top: 18px; right: 18px; bottom: -18px; background: var(--tb-red); }   /* aligne a droite : plaque decalee en bas a gauche */
.tb-cta-photo--strip .tb-cta-photo__media { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: var(--tb-radius); }
.tb-cta-photo--strip .tb-cta-photo__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: brightness(.55); transition: transform 1.2s var(--tb-ease), filter .5s; }
.tb-cta-photo--strip:hover .tb-cta-photo__media img { transform: scale(1.04); filter: brightness(.65); }
.tb-cta-photo--strip .tb-cta-photo__label { position: absolute; z-index: 2; left: 22px; bottom: 20px; right: 22px; }
.tb-cta-photo--strip .tb-link { color: #fff; font-size: .82rem; }
.tb-pscene[data-mode="deck"] .tb-cta-photo--strip { display: none; }
@media (max-width: 860px) {
  .tb-cta-photo { grid-template-columns: 1fr; min-height: 0; }
  .tb-cta-photo--strip { width: auto; margin-top: 28px; aspect-ratio: 16 / 7; }
  .tb-cta-photo--strip .tb-cta-photo__plate { left: -12px; top: 12px; right: 12px; bottom: -12px; }
  .tb-cta-photo__media { aspect-ratio: 4 / 3; overflow: hidden; }
  .tb-cta-photo__plate { display: none; }
  .tb-cta-photo__body { padding: 40px var(--tb-gutter) 56px; }
}



/* --------------------------------------------------------------------------
   View Transitions (23/09) : tuile de projet -> hero de la fiche (navigation reelle, URL qui change, retour arriere anime)
   -------------------------------------------------------------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }
/* l'image partagee : pas de fondu croise sur ses deux etats, juste le deplacement / redimensionnement */
::view-transition-old(*), ::view-transition-new(*) { animation-timing-function: cubic-bezier(.76, 0, .24, 1); }
html:active-view-transition ::view-transition-image-pair(*) { isolation: auto; }
html:active-view-transition ::view-transition-old(*):not(:only-child), html:active-view-transition ::view-transition-new(*):not(:only-child) { animation-name: none; mix-blend-mode: normal; }
html:active-view-transition .tb-proj-card__media[data-tb-vt-media], html:active-view-transition .tb-panel__bg[data-tb-vt-media], html:active-view-transition .tb-page-hero__bg { overflow: hidden; }
/* pendant la transition, le hero de la fiche ne rejoue pas ses animations d'entree par-dessus */
html:active-view-transition .tb-proj-hero .tb-container { animation: none !important; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }


/* ==========================================================================
   Mobile (23/09, retours d'Eddy sur iPhone) : hero, services en rangee, comparateur du metier, methode horizontale, CTA du slider
   ========================================================================== */
/* dots communs aux rangees a glisser (meme vocabulaire que les sliders) */
.tb-snap-dots { display: none; align-items: center; gap: 0; padding: 18px var(--tb-gutter) 0; }
/* 20/10 : zone tactile 24 px (Lighthouse « target-size »), le point visible est dessine par ::before, rendu inchange (10 px, actif 30 px) */
.tb-snap-dots button { appearance: none; border: 0; background: none; position: relative; flex: none; width: 24px; height: 24px; padding: 0; margin: 0; cursor: pointer; transition: width .35s var(--tb-ease); }
.tb-snap-dots button::before { content: ""; position: absolute; left: 50%; top: 50%; box-sizing: border-box; width: 13px; height: 13px; transform: translate(-50%, -50%); border: 1.5px solid rgba(127,127,127,.55); border-radius: 999px; background: transparent; transition: width .35s var(--tb-ease), background .3s, border-color .3s; }
.tb-snap-dots button[aria-current="true"] { width: 37px; }
.tb-snap-dots button[aria-current="true"]::before { width: 33px; background: var(--tb-red); border-color: var(--tb-red); }
.tb-dark .tb-snap-dots button::before, .tb-scene .tb-snap-dots button::before { border-color: rgba(255,255,255,.55); }
.tb-dark .tb-snap-dots button[aria-current="true"]::before, .tb-scene .tb-snap-dots button[aria-current="true"]::before { border-color: var(--tb-red); }   /* actif = rouge plein, sans contour blanc (Eddy) */

@media (max-width: 960px) {
  /* 3. hero : image d'atelier (placeholder) sous un voile noir uni ; 960 = jusqu'ou la video est masquee (iPad portrait servait l'image desktop, 24/09) */
  .tb-hero__media::after { background: rgba(0,0,0,.85); }
}
@media (max-width: 960px) {
  .tb-snap-dots { display: flex; }
  /* 5. Nos services : rangee de cartes a glisser, descriptions masquees */
  .tb-scene--swipe .tb-scene__panels { display: flex; align-items: flex-start; gap: 14px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: var(--tb-gutter); -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 var(--tb-gutter); }
  .tb-scene--swipe { background: var(--scene-bg); }
  .tb-scene--swipe .tb-snap-dots { padding-bottom: 44px; }
  .tb-scene--swipe .tb-scene__panels::-webkit-scrollbar { display: none; }
  .tb-scene--swipe .tb-panel { position: relative; top: auto; flex: 0 0 82vw; width: 82vw; height: auto; aspect-ratio: 3 / 4; min-height: 0; scroll-snap-align: start; box-shadow: none; }
  .tb-scene--swipe .tb-panel p[data-tb-item] { display: none; }
  .tb-scene--swipe .tb-panel__glass { width: 100%; padding: 20px; gap: 12px; }
  .tb-scene--swipe .tb-panel__inner { padding: 14px; }
  .tb-scene--swipe .tb-panel__dim { display: none; }
  .tb-scene--swipe .tb-panel__ghost { display: none; }   /* pas de mot fantome sur les cartes mobile (Eddy) */
  .tb-scene--swipe .tb-panel__glass { background: rgba(11,11,12,.88); }   /* bloc titre + CTA plus fonce */
  .tb-work__glass { background: rgb(0 0 0 / 88%); }   /* legendes du slider Realisations : meme noir a 88 % sur mobile */
  .tb-scene--swipe .tb-scene__stage { padding-bottom: 0; }
  /* 4. Notre metier : comparateur rough / photo */
  .tb-metier__img { position: relative; aspect-ratio: 3 / 2; overflow: visible; border-radius: var(--tb-radius); --cmp: 50%; touch-action: pan-y; }
  .tb-metier__rough, .tb-metier__photo { position: absolute; inset: 0; margin: 0; border-radius: var(--tb-radius); overflow: hidden; }
  .tb-metier__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .tb-metier__photo { clip-path: inset(0 0 0 var(--cmp)); }
  .tb-metier__img::before, .tb-metier__img::after { position: absolute; top: 12px; z-index: 2; padding: 6px 10px; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgb(0 0 0 / 60%); border-radius: 999px; pointer-events: none; }
  .tb-metier__img::before { content: "Photo"; left: 12px; }   /* 08/10 : photo a gauche, rough revele a droite (images inversees le 07/10) */
  .tb-metier__img::after { content: "Rough"; right: 12px; }
  .tb-cmp__range { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; touch-action: pan-y; }
  .tb-cmp__handle { position: absolute; z-index: 3; top: -12px; bottom: -12px; left: var(--cmp); width: 3px; margin-left: -1.5px; background: var(--tb-red); pointer-events: none; }   /* trait rouge qui deborde en haut et en bas (Eddy) */
  .tb-cmp__handle i { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--tb-red); box-shadow: 0 6px 20px rgba(0,0,0,.35); }
  .tb-cmp__handle i::before, .tb-cmp__handle i::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; border: 6px solid transparent; margin-top: -6px; }
  .tb-cmp__handle i::before { left: 7px; border-right-color: #fff; }
  .tb-cmp__handle i::after { right: 7px; border-left-color: #fff; }
  /* 6. Notre methode : etapes en rangee horizontale */
  .tb-process-scene--swipe .tb-process { grid-template-columns: minmax(0, 1fr); }
  .tb-process-scene--swipe .tb-process > div { min-width: 0; }
  .tb-process-scene--swipe .tb-steps { display: flex; align-items: stretch; gap: 14px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: var(--tb-gutter); -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 var(--tb-gutter); margin: 0 calc(-1 * var(--tb-gutter)); }
  .tb-process-scene--swipe .tb-steps::-webkit-scrollbar { display: none; }
  .tb-process-scene--swipe .tb-steps__rail { display: none; }
  .tb-process-scene--swipe .tb-step { flex: 0 0 78vw; scroll-snap-align: start; display: block; padding: 22px 20px 26px; border: 1px solid rgba(127,127,127,.3); border-radius: var(--tb-radius); background: #fff; }
  .tb-process-scene--swipe .tb-step__dot { display: none; }
  .tb-process-scene--swipe .tb-step__num { margin-bottom: 12px; }
  .tb-process-scene--swipe .tb-step:not(.is-active) .tb-step__num, .tb-process-scene--swipe .tb-step:not(.is-active) > div { opacity: .6; }
  .tb-process-scene--swipe .tb-step.is-active { border-color: var(--tb-red); }
  .tb-process-scene--swipe .tb-snap-dots { padding-left: 0; }
  /* 7. Realisations : le CTA redevient une carte portrait, ses traces SVG couvrent la carte */
  .tb-work--cta { width: calc(100% - 2 * var(--tb-gutter)) !important; aspect-ratio: auto !important; height: auto; padding: 44px 24px; }   /* horizontal comme avant, traits SVG dans les coins */
  .tb-work--cta > .tb-work__ants:not(.tb-work__ants--tl):not(.tb-work__ants--tr) { display: none; }
  .tb-work__ants--tl, .tb-work__ants--tr { display: block; }
  /* Chiffres cles : une ligne par chiffre, chiffre a gauche, texte a droite */
  .tb-stats { display: block; margin-top: 40px; padding-top: 0; border-top: 0; }
  .tb-stat { display: flex; align-items: center; gap: 18px; padding: 16px 0; border-top: 1px solid rgba(127,127,127,.25); }
  .tb-stat:last-child { border-bottom: 1px solid rgba(127,127,127,.25); }
  .tb-stat strong { flex: 0 0 auto; min-width: 128px; font-size: 1.9rem; font-weight: 600; }
  .tb-stat > span { margin: 0; font-size: .92rem; line-height: 1.4; }
  /* Logos references : premier logo decale, le deuxieme coupe a droite = on comprend qu'on peut glisser */
  .tb-logos { scroll-padding-left: var(--tb-gutter); }
  .tb-logos div { flex: 0 0 62vw !important; min-width: 0 !important; }
}


/* --------------------------------------------------------------------------
   Page Contact (24/09, round 1) : hero sombre aligne a gauche, icones en cercle rouge, atelier + carte en 1/3 - 2/3
   -------------------------------------------------------------------------- */
.page-id-42 .tb-page-hero, .page-id-35 .tb-page-hero { min-height: min(78vh, 760px); display: flex; flex-direction: column; justify-content: flex-end; }   /* 35 = A propos (Eddy 24/09 : meme hauteur que Contact) */
.page-id-35 .tb-page-hero__bg { inset: 0; }
.page-id-35 .tb-page-hero__bg img { object-position: center 35%; }   /* hero plus haut : les personnages ne sont plus coupes en haut */
.page-id-42 .tb-page-hero__bg { inset: 0; }
.page-id-42 .tb-page-hero__bg img { object-position: center 20%; }
.tb-contact .tb-info__icon { display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--tb-red); color: #fff; }   /* 14/10 (Eddy) : pastille rouge pleine + picto blanc, comme les + de la FAQ et les puces des listes (le contour rouge seul ne suivait pas la charte) */
.tb-contact .tb-info__icon svg { width: 20px; height: 20px; stroke-width: 2.6; }   /* traits plus epais a cette taille */
@media (max-width: 600px) {   /* 14/10 (Eddy, mobile) : coordonnees un peu plus compactes (trop gros, long a defiler) */
  .tb-contact .tb-info { grid-template-columns: 38px 1fr; gap: 16px; padding: 20px 0; }
  .tb-contact .tb-info__icon { width: 38px; height: 38px; }
  .tb-contact .tb-info__icon svg { width: 17px; height: 17px; }
  .tb-contact .tb-info h3 { font-size: .72rem; margin-bottom: 4px; }
  .tb-contact .tb-info p, .tb-contact .tb-contact__pair .tb-info p { font-size: 1.02rem; }
}
.tb-contact__pair .tb-info:last-child { border-bottom: 0; }   /* pas de double filet sous la paire */
.tb-contact__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }   /* e-mail + telephone sur une ligne */
.tb-contact__pair .tb-info p { font-size: 1.1rem; }
@media (max-width: 600px) { .tb-contact__pair { grid-template-columns: 1fr; } }
.tb-atelier-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(32px, 5vw, 72px); align-items: stretch; }
.tb-atelier-map__text .tb-h2 { font-size: clamp(1.7rem, 2.5vw, 2.5rem); }   /* colonne etroite : titre reduit */
.tb-atelier-map__text .tb-lead { margin-top: 22px; font-size: 1.05rem; }
.tb-atelier-map__text .tb-body { margin-top: 16px; }
.tb-atelier-map__visual { position: relative; margin-top: 28px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--tb-radius); }
.tb-atelier-map__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tb-atelier-map .tb-map { aspect-ratio: auto; height: 100%; min-height: 480px; }
@media (max-width: 860px) {
  .tb-atelier-map { grid-template-columns: 1fr; }
  .tb-atelier-map .tb-map { min-height: 0; aspect-ratio: 4 / 3; }
}

/* Formulaire contact (24/09) : champs obligatoires marques d'une asterisque rouge, societe optionnelle */
.tb-form .tb-req { color: var(--tb-red); margin-left: 4px; }
.tb-form .tb-opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--tb-gray-300); margin-left: 6px; }
.tb-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }   /* e-mail + telephone sur une ligne */
.tb-form__row label { min-width: 0; }
@media (max-width: 600px) { .tb-form__row { grid-template-columns: 1fr; } }
/* intl-tel-input (drapeau + indicatif, comme sur Betaglue) : le champ reste au style .tb-form */
.tb-form .iti { display: block; width: 100%; z-index: 30; text-transform: none; letter-spacing: 0; font-weight: 400; }   /* le widget vit dans le <label> : on annule ses styles ; z-index pour passer au-dessus des champs suivants */
.tb-form .iti { margin-top: 8px; }   /* meme retrait sous le label que les autres champs (l'input est enveloppe) */
.tb-form .wpcf7 .iti input { margin-top: 0; }
.tb-form .iti__country-container { padding: 0; }
.tb-form .iti__selected-country-primary { padding: 0 0 0 14px; }
.tb-form .iti__arrow { display: block; width: 7px; height: 7px; border-style: solid !important; border-width: 0 1.5px 1.5px 0 !important; border-color: #6b6b70 !important; transform: translateY(-2px) rotate(45deg); margin-left: 6px; }   /* chevron maison (celui de la lib sortait en rectangle gris ; une regle Impeka repeint les bordures, d'ou !important) */
.tb-form .iti__arrow--up { transform: translateY(2px) rotate(-135deg); }
.tb-form .iti__selected-country { background: none; }
.tb-form .iti__selected-dial-code { font-size: .85rem; color: var(--tb-gray-500); margin: 0 4px 0 10px; }   /* indicatif discret, compact (Eddy 24/09) */   /* respiration avant le numero (le padding du champ suit la largeur du conteneur) */
.tb-form .iti--separate-dial-code .iti__selected-country-primary:hover, .tb-form .iti__country-container:hover button { background: none; }
.tb-form .iti__dropdown-content { border: 1px solid rgba(127,127,127,.3); border-radius: var(--tb-radius); box-shadow: 0 12px 32px rgba(0,0,0,.12); font-size: .95rem; }
.tb-form .wpcf7 .iti__search-input, .tb-form .wpcf7 .iti__search-input:focus { padding: 12px 14px; font: inherit; font-size: .95rem; background: #fff; border: 0; border-bottom: 1px solid rgba(127,127,127,.25); border-radius: 0; box-shadow: none; }
.tb-form .iti__country { padding: 8px 12px; }
.tb-form .iti__country.iti__highlight { background: var(--tb-off); }
.tb-form .iti__country-list .iti__dial-code { color: var(--tb-gray-500); }

/* --------------------------------------------------------------------------
   Services > Pourquoi Theobora : bento visuel (24/09, demande d'Eddy) - tuiles photo, cartouche noir .85 + barre rouge a cheval, une tuile pleine rouge.
   Animation (souris fine, >= 961 px) : la tuile survolee s'elargit (colonnes / rangees en variables, transition des pistes), les autres se resserrent
   dans la meme boite ; l'image, en object-fit cover, se devoile davantage. JS bento() dans custom.js lit data-c / data-r.
   -------------------------------------------------------------------------- */
.tb-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 250px; gap: 12px; }
.tb-bento__tile { position: relative; overflow: hidden; background: #161617; color: #fff; isolation: isolate; min-width: 0; }
.tb-bento__tile.is-lg { grid-column: span 2; grid-row: span 2; }
.tb-bento__tile.is-wide { grid-column: span 2; }
.tb-bento__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 1.1s var(--tb-ease), filter .5s; filter: saturate(.85); }
.tb-bento__tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.18) 50%, rgba(0,0,0,.5) 100%); }
.tb-bento__tile:hover img { filter: saturate(1); }
.tb-bento__body { position: absolute; left: 22px; bottom: 22px; z-index: 2; max-width: min(34rem, calc(100% - 44px)); padding: 20px 24px 22px 26px; background: rgba(0,0,0,.85); }   /* cartouche */
.tb-bento__body::before { content: ""; position: absolute; left: -2px; top: 22px; width: 4px; height: 28px; background: var(--tb-red); }   /* barre rouge a cheval : signature */
.tb-bento__body h3 { font-size: 1.3rem; margin: 0 0 8px; line-height: 1.15; }
@media (min-width: 961px) { .tb-bento__tile.is-lg .tb-bento__body h3 { font-size: 1.75rem; } }
@media (min-width: 961px) and (max-width: 1279px) { .tb-bento__body h3 { font-size: 1.02rem; line-height: 1.2; } .tb-bento__tile.is-lg .tb-bento__body h3 { font-size: 1.35rem; } }   /* 14/10 (Eddy, iPad paysage 1024) : titres trop gros dans les petites tuiles (« Un(e) chef(fe) de projet dedie(e) » sur 4 lignes, peu lisible) */
.tb-bento__body p { margin: 0; color: rgba(255,255,255,.82); font-size: .95rem; line-height: 1.55; max-width: 38ch; }
/* 13/10 TEST (Eddy) : titres seuls par defaut, le texte ne se deplie que sur la tuile agrandie (.is-hot, survol desktop) ; plus de cartouche trop haut pour sa tuile.
   Tactile / mobile : pas de survol -> titres seuls (a affiner en responsive : texte reduit ou masque) */
.tb-bento__body h3 { margin: 0; }
.tb-bento__body p { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; transition: max-height .5s var(--tb-ease), opacity .3s, margin-top .5s var(--tb-ease); }
.tb-bento__tile.is-hot .tb-bento__body p { max-height: 14em; opacity: 1; margin-top: 8px; transition-delay: .12s, .22s, .12s; }
.tb-bento__tile--solid { background: var(--tb-red); }
.tb-bento__tile--solid::after { display: none; }
.tb-bento__tile--solid .tb-bento__body { background: transparent; padding-left: 26px; }
.tb-bento__tile--solid .tb-bento__body::before { background: #fff; }
.tb-bento__tile--solid .tb-bento__body p { color: rgba(255,255,255,.9); max-height: none; opacity: 1; margin-top: 8px; }
@media (min-width: 961px) {
  /* placement explicite (4 colonnes x 3 rangees) pour pouvoir animer les pistes */
  .tb-bento { grid-template-columns: var(--c1, 1fr) var(--c2, 1fr) var(--c3, 1fr) var(--c4, 1fr); grid-template-rows: var(--r1, 1fr) var(--r2, 1fr) var(--r3, 1fr); grid-auto-rows: auto; height: 774px; transition: grid-template-columns .75s var(--tb-ease), grid-template-rows .75s var(--tb-ease); }
  .tb-bento__tile:nth-child(1) { grid-area: 1 / 1 / 3 / 3; } .tb-bento__tile:nth-child(2) { grid-area: 1 / 3 / 2 / 5; } .tb-bento__tile:nth-child(3) { grid-area: 2 / 3 / 3 / 4; }
  .tb-bento__tile:nth-child(4) { grid-area: 2 / 4 / 3 / 5; } .tb-bento__tile:nth-child(5) { grid-area: 3 / 1 / 4 / 3; } .tb-bento__tile:nth-child(6) { grid-area: 3 / 3 / 4 / 5; }
  .tb-bento.is-live .tb-bento__tile { transition: opacity .5s; }
  .tb-bento.is-live .tb-bento__tile:not(.is-hot) { opacity: .78; }
}
@media (prefers-reduced-motion: reduce) { .tb-bento { transition: none; } }
/* Mecanisme SVG derriere le bento (test 24/09, idee d'Eddy) : pleine largeur, tiges + pistons qui entrent dans la grille par les cotes ; dessine par bentoMech() (custom.js) */
.tb-section--clip { overflow: clip; }
.tb-bento-wrap { position: relative; }
.tb-bento-wrap .tb-bento { position: relative; z-index: 1; }
.tb-bento-wrap .tb-bento__mech { z-index: 2; }   /* v2 : au-dessus des tuiles (brides boulonnees sur les bords, arbre dans l'interstice), pointer-events none */
.tb-bento__mech { display: none; position: absolute; top: 0; left: 50%; width: 100vw; height: 100%; transform: translateX(-50%); z-index: 0; pointer-events: none; overflow: visible; color: #fff; }
.tb-bento__mech .m-line { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; opacity: .3; }
.tb-bento__mech .m-thin { fill: none; stroke: currentColor; stroke-width: .8; opacity: .14; }
.tb-bento__mech .m-fill { fill: #0b0b0c; stroke: currentColor; stroke-width: 1.2; opacity: .42; }
.tb-bento__mech .m-red { fill: var(--tb-red); stroke: none; }
.tb-bento__mech .m-redline { fill: none; stroke: var(--tb-red); stroke-width: 1.4; stroke-linecap: round; }
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) { .tb-bento__mech { display: block; } }
@media (prefers-reduced-motion: reduce) { .tb-bento__mech { display: none; } }
@media (max-width: 960px) { .tb-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 220px; } .tb-bento__tile.is-lg { grid-column: span 2; grid-row: span 1; } }
@media (max-width: 560px) { .tb-bento { grid-template-columns: 1fr; grid-auto-rows: 230px; gap: 10px; } .tb-bento__tile.is-lg, .tb-bento__tile.is-wide { grid-column: span 1; } .tb-bento__body { left: 14px; bottom: 14px; max-width: calc(100% - 28px); padding: 16px 18px 18px 20px; } .tb-bento__body h3 { font-size: 1.15rem; } .tb-bento__body p { font-size: .88rem; line-height: 1.5; } }

/* --------------------------------------------------------------------------
   Hero home, test 24/09 (Eddy) : sur mobile / tablette (<= 960 px) la video est servie en haut du viewport, en bande 16/9 sous le logo,
   le texte suit sur fond noir (au lieu de la photo d'atelier sous voile). Classe tb-hero--mvideo posee dans build.py : a retirer si non retenu.
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  html.tb-js .tb-hero--mvideo { display: block; min-height: 0; background: #000; }
  html.tb-js .tb-hero--mvideo .tb-hero__media { position: relative; inset: auto; height: auto; padding-top: 0; background: #000; overflow: hidden; }
  html.tb-js .tb-hero--mvideo .tb-hero__media picture { display: none; }
  html.tb-js .tb-hero--mvideo .tb-hero__media::after { display: none; }
  /* le clip Blender est letterboxe sur noir uni (logo au centre) : on le zoome dans une bande plus courte, le fond noir permet le recadrage sans perte */
  html.tb-js .tb-hero--mvideo .tb-hero__video { display: block; position: relative; inset: auto; left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 4 / 3; margin: 0; object-fit: cover; transform: scale(1.2); transform-origin: 50% 50%; -webkit-mask-image: none; mask-image: none; }
  html.tb-js .tb-hero--mvideo .tb-hero__inner { padding: 28px 0 44px; }
}
@media (min-width: 561px) and (max-width: 960px) { html.tb-js .tb-hero--mvideo .tb-hero__video { aspect-ratio: 16 / 9; transform: scale(1.15); } }

/* --------------------------------------------------------------------------
   Page Services : les trois services dans une seule section, slider a onglets (24/09, Eddy). Charte du bloc split conservee.
   Piste = flex + scroll-snap (une diapositive = 100 %), onglets numerotes soulignes de rouge, points + fleches rondes, glissement souris (svcSlider) et au doigt.
   -------------------------------------------------------------------------- */
.tb-svc__tabs { display: flex; gap: clamp(24px, 3.5vw, 56px); box-shadow: inset 0 -1px 0 rgba(17,17,17,.14); margin-bottom: clamp(24px, 2.6vw, 40px); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }   /* 14/10 (Eddy, iPhone) : overflow-y hidden, sinon la rangee bouge verticalement au doigt (meme piege que les categories de Realisations) ; le soulignement rouge debordait de 1 px sous la rangee = cause du defilement vertical : filet gris en box-shadow inset, soulignement a bottom 0, meme rendu */
.tb-svc__tabs::-webkit-scrollbar { display: none; }
.tb-svc__tab { appearance: none; background: none; border: 0; padding: 12px 0 18px; margin: 0; position: relative; cursor: pointer; white-space: nowrap; font-family: var(--tb-font-display); font-weight: 600; font-size: clamp(1rem, 1.3vw, 1.2rem); letter-spacing: .01em; color: rgba(17,17,17,.45); transition: color .35s; }
.tb-svc__tab:hover { color: var(--tb-ink); }
.tb-svc__tab[aria-selected="true"] { color: var(--tb-ink); }
.tb-svc__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--tb-red); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--tb-ease); }
.tb-svc__tab[aria-selected="true"]::after { transform: scaleX(1); }
.tb-svc__num { color: var(--tb-red); font-size: .78em; margin-right: 10px; font-variant-numeric: tabular-nums; }
.tb-svc__viewport { margin-left: -24px; width: calc(100% + 24px); }   /* la plaque rouge deborde de 18 px a gauche et 78 px en bas : on donne cette marge dans le conteneur qui defile */
.tb-svc__track { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tb-svc__track::-webkit-scrollbar { display: none; }
.tb-svc__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; padding: 0 0 68px 24px; box-sizing: border-box; display: flex; }
.tb-svc__slide > .tb-split { width: 100%; }
.tb-svc .tb-split__media { aspect-ratio: 1 / 1; }   /* carre (Eddy 24/09 : le mieux vu la grille) */   /* moins haut que le 4/5 des sections split : sur iMac 27" le 4/5 + plaque debordait du viewport (Eddy 24/09) */
.tb-svc .tb-split__media--shadow::before { bottom: -56px; height: 104%; }
.tb-svc__slide img { -webkit-user-drag: none; user-select: none; }
.tb-svc__foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: -40px; }
.tb-svc .tb-snap-dots { display: flex; padding: 0; }
.tb-svc__arrows { display: flex; gap: 10px; }
.tb-svc__arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--tb-ink); background: transparent; color: var(--tb-ink); display: grid; place-items: center; padding: 0; cursor: pointer; transition: background .3s, border-color .3s, color .3s, opacity .3s; }
.tb-svc__arrow svg { width: 18px; height: 18px; }
.tb-svc__arrow:hover:not(:disabled) { background: var(--tb-red); border-color: var(--tb-red); color: #fff; }
.tb-svc__arrow:disabled { opacity: .28; cursor: default; }
.tb-svc__slide.is-clone { pointer-events: none; }   /* clones de boucle : jamais interactifs */
html.tb-js .tb-svc__track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
/* 3 salles, 3 ambiances : un fond tres flou par service sous un voile clair, fondu d'une diapositive a l'autre (svcSlider pose is-on) */
.tb-svc { position: relative; overflow: hidden; padding-top: clamp(40px, 4.5vw, 64px); }   /* marge haute reduite : onglets plus haut (Eddy 24/09) */
.tb-svc > .tb-container { position: relative; z-index: 1; }
.tb-svc__bgs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.tb-svc__bg { position: absolute; inset: -12%; background-size: cover; background-position: center; filter: blur(36px) saturate(1.15); opacity: 0; transition: opacity 1.1s var(--tb-ease); will-change: opacity; }   /* valeurs d'Eddy (devtools) : blur 36, opacite .44 */
.tb-svc__bg.is-on { opacity: .34; }
.tb-svc__bgs::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.5) 55%, rgba(255,255,255,.72) 100%); }   /* voile : garde le contraste du texte encre */
@media (prefers-reduced-motion: reduce) { .tb-svc__bg { transition: none; } }
@media (max-width: 860px) {
  .tb-svc__viewport { margin-left: -18px; width: calc(100% + 18px); }
  .tb-svc__slide { padding: 0 0 84px 18px; }
  .tb-svc__foot { margin-top: -30px; }
  .tb-svc__arrows { display: none; }   /* au doigt : glissement + points */
}

/* --------------------------------------------------------------------------
   Complianz (25/09) : banniere de consentement et espaces reserves a la charte. Les variables sont celles du CSS genere par Complianz
   (uploads/complianz/css/banner-1-optin.css) ; on les surcharge ici avec une specificite superieure (id + classe) pour ne pas dependre du generateur.
   -------------------------------------------------------------------------- */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
  --cmplz_banner_background_color: #0b0b0c; --cmplz_banner_border_color: #0b0b0c; --cmplz_banner_border_radius: 4px; --cmplz_banner_border_width: 0;
  --cmplz_text_color: #fff; --cmplz_hyperlink_color: #fff;
  --cmplz_button_accept_background_color: #cd1133; --cmplz_button_accept_border_color: #cd1133; --cmplz_button_accept_text_color: #fff;
  --cmplz_button_deny_background_color: transparent; --cmplz_button_deny_border_color: rgba(255,255,255,.55); --cmplz_button_deny_text_color: #fff;
  --cmplz_button_settings_background_color: transparent; --cmplz_button_settings_border_color: rgba(255,255,255,.28); --cmplz_button_settings_text_color: #fff;
  --cmplz_button_border_radius: 999px; --cmplz_slider_active_color: #cd1133; --cmplz_slider_bullet_color: #fff; --cmplz_slider_inactive_color: #4a4a4e;
  --cmplz_category_header_always_active_color: #cd1133; --cmplz_text_font_size: 13px; --cmplz_text_line_height: 1.55; --cmplz_button_font_size: 12px;
  font-family: var(--tb-font-body, Inter, system-ui, sans-serif); box-shadow: 0 30px 70px rgba(0,0,0,.45);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title { font-family: var(--tb-font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn { font-family: var(--tb-font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; transition: background .3s, color .3s, border-color .3s; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover { background: #fff; border-color: #fff; color: #0b0b0c; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover, #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover, #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:hover { border-color: #fff; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links a { color: rgba(255,255,255,.7); text-decoration: underline; text-underline-offset: 3px; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links a:hover { color: #fff; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close { color: #fff; }
/* onglet « Gérer le consentement » (rappel apres choix) */
#cmplz-manage-consent .cmplz-manage-consent { background: #0b0b0c; color: #fff; border: 1px solid rgba(255,255,255,.28); border-bottom: 0; border-radius: 4px 4px 0 0; font-family: var(--tb-font-display); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
/* 09/10 (Eddy) : onglet remplace par un disque noir fixe (13/10 : passe en bas a DROITE, il chevauchait le texte des heros cales a gauche), toujours visible, icone cookie blanche en trait (Lucide « cookie », ISC) ; le texte reste dans le bouton pour les lecteurs d'ecran */
#cmplz-manage-consent .cmplz-manage-consent, #cmplz-manage-consent .cmplz-manage-consent:hover, #cmplz-manage-consent .cmplz-manage-consent:focus {
  position: fixed !important; bottom: 20px !important; right: 20px !important; top: auto !important; left: auto !important; transform: none !important;
  width: 48px !important; height: 48px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important;
  background: #0b0b0c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5'/%3E%3Cpath d='M8.5 8.5v.01'/%3E%3Cpath d='M16 15.5v.01'/%3E%3Cpath d='M12 12v.01'/%3E%3Cpath d='M11 17v.01'/%3E%3Cpath d='M7 14v.01'/%3E%3C/svg%3E") center / 24px 24px no-repeat !important;
  color: transparent !important; font-size: 0 !important; line-height: 0 !important; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: background-color .25s, box-shadow .25s; cursor: pointer;
}
#cmplz-manage-consent .cmplz-manage-consent:hover { background-color: var(--tb-red) !important; }
@media print { #cmplz-manage-consent { display: none; } }
/* espace reserve (carte Google bloquee) : plaque noire, texte blanc, bouton pilule */
.cmplz-blocked-content-container { background: #111 !important; }
.cmplz-blocked-content-container .cmplz-blocked-content-notice { font-family: var(--tb-font-body); color: #fff; }
.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-links a, .cmplz-blocked-content-container .cmplz-blocked-content-notice a { color: #fff; }

/* Page RSE (39), section Demain (08/10, Eddy) : logo EcoVadis blanc sur fond noir uni a la place du visuel */
.tb-split__media .tb-ecovadis { position: absolute; inset: 0; display: grid; place-items: center; background: #000; border-radius: var(--tb-radius); }
.tb-ecovadis svg { width: 58%; height: auto; }

/* Fiches portfolio (08/10, Eddy) : "Ce que nous avons fait" en mot fantome comme l'ancien encart Brief, sans crayon */
.tb-proj-body__content .tb-body .tb-proj-fait__head { margin: 2.4em 0 22px; }
.tb-proj-body__content .tb-body .tb-proj-fait__head .tb-proj-callout__ghost { font-size: clamp(2.2rem, 3.6vw, 3.6rem); }   /* tient sur une ligne dans la colonne de texte */
@media (max-width: 860px) { .tb-proj-body__content .tb-body .tb-proj-fait__head .tb-proj-callout__ghost { font-size: 1.9rem; } }
.tb-proj-body__content .tb-body > p.tb-proj-intro { font-style: italic; }   /* 08/10 (Eddy) : accroche en italique pour la distinguer du retour sur le projet (meme taille) */

/* 08/10 (Eddy, valide apres test sur Leclerc) : hero des fiches = bloc texte a gauche, aligne sur le bord gauche du logo Theobora (32 px du viewport) au lieu de la grille.
   Fallback (ancienne version alignee sur la grille) : ajouter la classe tb-proj-hero--grid a la section, ou supprimer ce bloc. Essai ferre a droite abandonne (« ca fait bizarre »). */
@media (min-width: 861px) {
  .tb-proj-hero--clean:not(.tb-proj-hero--grid) .tb-container { max-width: none; width: auto; margin: 0 auto 0 32px; }
}
.tb[hidden], .tb-section[hidden] { display: none !important; }   /* 08/10 : section Actualites de la home masquee (blog en stand-by), l'attribut hidden doit gagner sur les display des sections */
/* 09/10 (Maelie) : piece jointe facultative du formulaire de contact (CF7 [file your-file]) */
.tb-form .wpcf7 input[type=file] { padding: 10px 12px; cursor: pointer; font-size: .9rem; color: var(--tb-gray-500); }
.tb-form .wpcf7 input[type=file]::file-selector-button { margin-right: 14px; padding: 8px 18px; border: 1.5px solid var(--tb-ink); border-radius: 999px; background: transparent; color: var(--tb-ink); font: 600 .75rem/1 var(--tb-font-display, inherit); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; }
.tb-form .wpcf7 input[type=file]:hover::file-selector-button { background: var(--tb-ink); color: #fff; }
/* 14/10 (Eddy) : bouton d'envoi a la charte (Impeka l'ecrasait : #grve-theme-wrapper .wpcf7 input[type=submit] = noir, carre, Jost, opacite .5 desactive) : pilule rouge des .tb-btn, un cran plus grande ; grisee tant que le consentement n'est pas coche (CF7 pose disabled) */
#grve-theme-wrapper .tb-form .wpcf7 input[type=submit]:not(.grve-custom-btn) { display: inline-flex; align-items: center; min-height: 58px; margin-top: 28px; padding: 18px 38px; border: 1.5px solid var(--tb-red); border-radius: 999px; background: var(--tb-red); color: #fff; font-family: var(--tb-font-display); font-weight: 600; font-size: .95rem; letter-spacing: .06em; line-height: 1; text-transform: uppercase; opacity: 1; cursor: pointer; transition: background-color .4s var(--tb-ease), border-color .4s var(--tb-ease), color .4s var(--tb-ease); }
#grve-theme-wrapper .tb-form .wpcf7 input[type=submit]:not(.grve-custom-btn):hover, #grve-theme-wrapper .tb-form .wpcf7 input[type=submit]:not(.grve-custom-btn):focus-visible { background: var(--tb-ink); border-color: var(--tb-ink); color: #fff; }
#grve-theme-wrapper .tb-form .wpcf7 input[type=submit]:not(.grve-custom-btn):disabled { background: var(--tb-gray-300); border-color: var(--tb-gray-300); color: #fff; opacity: 1; cursor: not-allowed; }
@media (max-width: 600px) { #grve-theme-wrapper .tb-form .wpcf7 input[type=submit]:not(.grve-custom-btn) { width: 100%; justify-content: center; } }
/* 14/10 (Eddy, mobile) : « Aucun fichier selectionne » / nom du fichier en entier, a la ligne sous « Choisir un fichier » (le texte natif etait coupe en ellipse) : texte natif masque, libelle .tb-file-name tenu a jour par fileName() (custom.js) */
.tb-file-name { display: none; }
@media (max-width: 600px) {
  .tb-form .wpcf7 input[type=file] { font-size: 0; color: transparent; }
  .tb-file-name { display: block; margin-top: 8px; font-size: .88rem; line-height: 1.4; color: var(--tb-gray-500); text-transform: none; letter-spacing: 0; font-weight: 400; overflow-wrap: anywhere; }
}
/* 09/10 (Eddy) : bulles d'erreur du formulaire au-dessus du champ telephone (le widget intl-tel-input est en z-index 30) ; rouge de la charte au lieu du #f00000 d'Impeka */
#grve-theme-wrapper .tb-form .wpcf7 form .wpcf7-not-valid-tip { z-index: 40; background: var(--tb-red); }
/* 09/10 : photo sous le chapo de la Methode (page Logistique 126, banque de visuels de Maelie) */
.tb-process__pic { margin: 32px 0 0; border-radius: var(--tb-radius); overflow: hidden; aspect-ratio: 3/2; background: var(--tb-off-2); }
.tb-process__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 09/10 (Eddy) : hero Logistique = equipe LOG ; l'homme qui indique du doigt est au bord gauche de la photo -> cadrage cale a gauche quand l'image est rognee sur les cotes (mobile, tablette, cards) */
img[src*="logistique-equipe-log"] { object-position: 50% 50%; }   /* 09/10 : 0 % juge trop decale par Eddy, retour au centre */
/* 09/10 (Eddy) : grille des cards metiers reprise sur la page Logistique, photos fixes (pas de flip) */
.tb-trades--fixed .tb-trade:hover .tb-trade__in, .tb-trades--fixed .tb-trade:focus-visible .tb-trade__in, .tb-trades--fixed .tb-trade.is-flipped .tb-trade__in { transform: none; }
.tb-trades--fixed .tb-trade__media { perspective: none; }
/* 09/10 (Eddy, « Sur la route ») : tuiles portrait (g-4) a la hauteur exacte de la tuile paysage voisine (les gouttieres faussaient les ratios 16/10 et 4/5) ;
   zoom au survol par la propriete `scale` (le parallaxe GSAP ecrit `transform` et annulait l'ancien scale(1.05)) */
@media (min-width: 761px) { .tb-gallery .g-4 { aspect-ratio: auto; min-height: 100%; } }
.tb-gallery figure img { transition: scale 1.1s var(--tb-ease), transform 0s; }
@media (hover: hover) { .tb-gallery figure:hover img { scale: 1.07 !important; } }   /* !important : GSAP ecrit `scale: none` en inline */
@media (prefers-reduced-motion: reduce) { .tb-gallery figure img { transition: none; } .tb-gallery figure:hover img { scale: 1; } }
/* 09/10 : galerie a masques : fond noir sous la photo pendant le contre-mouvement (plus de bande beige) */
.tb-gallery[data-tb-mask] figure { background: #0b0b0c; }
/* 09/10 : effet d'intro des heros services (heroIntro, custom.js) : couche temporaire de cases */
.tb-intro-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; filter: saturate(.8); transform-origin: 50% 50%; }
.tb-intro-grid i { position: absolute; display: block; background-repeat: no-repeat; transform-origin: 50% 50%; will-change: transform, opacity; }
/* 09/10 : intro « autocollant » du hero Covering (introSticker, custom.js) : rabat clair au bord de pose, ombre portee sur le parent (le clip-path de l'enfant n'avale pas le drop-shadow du parent) */
.tb-intro-flap { position: absolute; inset: 0; z-index: 0; pointer-events: none; filter: drop-shadow(-6px 8px 14px rgba(0,0,0,.45)); }
.tb-intro-flap i { position: absolute; inset: 0; display: block; background: linear-gradient(135deg, #d9d6cf 0%, #f6f4ef 45%, #ffffff 55%, #cfcbc2 100%); }
/* 09/10 : intro « soudure » du hero Atelier (introSoudure, custom.js) : cordon incandescent, lueur qui refroidit, etincelles en canvas ; au-dessus du voile noir (z 1) */
.tb-intro-weld { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.tb-intro-weld canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tb-intro-weld__seam { position: absolute; left: 0; right: 0; top: -2px; height: 3px; background: #fffbe8; box-shadow: 0 0 10px 3px rgba(255,200,110,.95), 0 0 34px 10px rgba(255,110,20,.55); }
.tb-intro-weld__glow { position: absolute; left: 0; right: 0; top: -160px; height: 160px; background: linear-gradient(180deg, rgba(255,90,0,0), rgba(255,110,20,.28) 70%, rgba(255,170,80,.5)); mix-blend-mode: screen; }
/* 09/10 (Eddy) : Methode Covering 02, le technicien est au bord droit de la photo : cadre cale a droite (le cadre de la Methode est plus carre que la photo) */
.tb-process__visual img[src*="cov-methode-02"] { object-position: 92% 50%; }
/* 09/10 (Eddy) : signature discrete de Projection Web dans la barre legale du pied de page */
.tb-footer__bar a.tb-footer__credit { opacity: .8; transition: opacity .3s, color .3s; }   /* 19/10 soir (Lighthouse) : .55 -> .8, contraste insuffisant */
.tb-footer__bar a.tb-footer__credit:hover { opacity: 1; }
/* 09/10 : pages sans hero maison (gabarit Impeka : mentions legales, confidentialite, cookies) : pas de bande gris fonce en haut, fond blanc */
html.tb-header-plain #grve-header, html.tb-header-plain #grve-main-header { background-color: #fff !important; }
html.tb-header-plain:not(.tb-at-top) #grve-main-header { background-color: rgba(255,255,255,.97) !important; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
/* 09/10 (Eddy) : Contact, « Venez decouvrir notre atelier ! » en exergue, la phrase des rendez-vous en gras italique */
.tb-atelier-map__invite { display: block; margin: 0 0 10px; font-family: var(--tb-font-display); font-size: clamp(1.3rem, 1.8vw, 1.6rem); font-weight: 600; line-height: 1.2; color: var(--tb-ink); }
.tb-atelier-map__text strong em { color: var(--tb-ink); }
/* 09/10 (Eddy) : Contact : la carte s'arrete au bas du texte, la photo de l'atelier passe en pleine largeur dessous (bandeau, on garde le haut : l'enseigne) */
.tb-atelier-map .tb-map { min-height: 340px; }
.tb-atelier-map__visual--wide { grid-column: 1 / -1; margin-top: 0; aspect-ratio: 21 / 8; }   /* rangee pleine largeur de la grille */
.tb-atelier-map__visual--wide img { object-position: 50% 0; }
@media (max-width: 860px) { .tb-atelier-map__visual--wide { aspect-ratio: 4 / 3; } }
/* 09/10 : chiffres RSE (Florian) : precision sous le libelle */
.tb-stat__detail { display: block; margin-top: 8px; font-size: .82em; opacity: .7; }
/* 09/10 (Eddy) : page Developpement durable (39) : tuile EcoVadis et bandeau CTA en vert fonce (le rouge charte reste sur les accents) */
.page-id-39 { --tb-green-deep: #0f3a2a; }
.page-id-39 .tb-split__media .tb-ecovadis { background: var(--tb-green-deep); }
.page-id-39 .tb-cta--dark { background: var(--tb-green-deep); }
.page-id-39 .tb-section.tb-dark:has(.tb-stats) { background: var(--tb-green-deep); }   /* 09/10 (Eddy) : section « Des engagements qui se mesurent » en vert fonce aussi */
/* 09/10 (Eddy) : bouton « + » des FAQ en disque rouge plein, croix blanche */
.tb-faq summary::after { border-color: var(--tb-red); background: var(--tb-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/16px no-repeat; }
.tb-svc__bg { filter: blur(16px) saturate(1.15); }   /* 09/10 (Eddy) : moins flou (36 -> 16 px) depuis que les fonds sont les photos reelles des slides */

/* 14/10 (Eddy) : pages legales (Mentions legales 122, Politique de confidentialite 3, Politique de cookies 176) = gabarit Impeka : titres bien trop gros (h1 84 px / h2 48 px, « Politique de confidentialite » cassee sur mobile), bandeau de titre de 350 px reduit sur mobile */
:is(.page-id-3, .page-id-122, .page-id-176) #grve-page-title .grve-title { font-size: clamp(2.2rem, 3.6vw, 3.2rem); line-height: 1.1; }
:is(.page-id-3, .page-id-122, .page-id-176) #grve-page-title, :is(.page-id-3, .page-id-122, .page-id-176) #grve-page-title .grve-wrapper, :is(.page-id-3, .page-id-122, .page-id-176) #grve-page-title .grve-content { height: 240px !important; min-height: 0 !important; }   /* 14/10 (Eddy) : bandeau de titre 350 -> 240 px sur desktop, fond rouge charte + titre blanc (faisait vide) */
:is(.page-id-3, .page-id-122, .page-id-176) #grve-page-title, :is(.page-id-3, .page-id-122, .page-id-176) #grve-page-title .grve-wrapper { background-color: var(--tb-red) !important; }
:is(.page-id-3, .page-id-122, .page-id-176) #grve-page-title .grve-title, :is(.page-id-3, .page-id-122, .page-id-176) #grve-page-title .grve-title span { color: #fff !important; }
:is(.page-id-3, .page-id-122, .page-id-176) .grve-entry-item h2 { font-size: clamp(1.4rem, 2vw, 1.9rem); line-height: 1.2; margin-top: 1.8em; }
:is(.page-id-3, .page-id-122, .page-id-176) .grve-entry-item :is(h3, h4) { font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.3; }
@media (max-width: 600px) {
  :is(.page-id-3, .page-id-122, .page-id-176) #grve-page-title .grve-title { font-size: 1.6rem; }
  :is(.page-id-3, .page-id-122, .page-id-176) #grve-page-title, :is(.page-id-3, .page-id-122, .page-id-176) #grve-page-title .grve-wrapper, :is(.page-id-3, .page-id-122, .page-id-176) #grve-page-title .grve-content { height: 140px !important; min-height: 0 !important; }
  :is(.page-id-3, .page-id-122, .page-id-176) .grve-main-content-wrapper { padding-top: 20px; }
  :is(.page-id-3, .page-id-122, .page-id-176) .grve-entry-item h2 { font-size: 1.3rem; }
}

/* 15/10 (Eddy) : labels « Pièce jointe » et consentement en casse normale, interlettrage normal (les autres labels restent en capitales) ; lien vers la politique de confidentialité dans le consentement */
.tb-form .wpcf7 label.tb-label-plain,
.tb-form .wpcf7-acceptance label { text-transform: none; letter-spacing: normal; }
.tb-form .wpcf7-acceptance a { color: var(--tb-red); text-decoration: underline; text-underline-offset: 2px; }
.tb-form .wpcf7-acceptance a:hover { color: var(--tb-ink); }

/* 15/10 (Eddy, iPhone) : cartouche des 3 cards Services de la home sur mobile aligne sur celui des tuiles Realisations (titre 1.1rem, bouton compact .68rem / 9 x 14, padding 14 x 18) */
@media (max-width: 960px) {
  .tb-scene--swipe .tb-panel__glass { padding: 14px 18px; gap: 10px; }
  .tb-scene--swipe .tb-panel h3 { font-size: 1.1rem; line-height: 1.1; letter-spacing: -.01em; }
  .tb-scene--swipe .tb-panel__glass .tb-btn { min-height: 0; padding: 9px 14px; font-size: .68rem; letter-spacing: .1em; gap: 8px; }
  .tb-scene--swipe .tb-panel__glass .tb-btn svg { width: 14px; height: 14px; }
}

/* 15/10 (Eddy, essai) : cartes a glisser des frises Methode (home + sous-pages services, <= 960 px) : visuel en plein (bord a bord, cale en bas de la carte, sans marges) ; contour rouge de la carte active conserve (Eddy, apres essai) */
@media (max-width: 960px) {
  .tb-process-scene--swipe .tb-step { overflow: hidden; display: flex; flex-direction: column; }
  .tb-process-scene--swipe .tb-step > div { flex: 1 1 auto; display: flex; flex-direction: column; }
  .tb-process-scene--swipe .tb-step__media { margin: auto -20px -26px; padding-top: 0; border-radius: 0; }
  .tb-process-scene--swipe .tb-step > div > p:has(+ .tb-step__media) { margin-bottom: 18px; }
}

/* 15/10 (Eddy) : section retiree de l'affichage sans toucher au HTML (la relecture garde sa numerotation) ; ex. Equipe d'A propos en attendant les portraits */
.tb-section.tb-is-off { display: none !important; }