/* --- CONFIGURATION GÉNÉRALE --- */
body {
  margin: 0;
  padding: 0;
  margin-top: 100px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* --- HEADER PRINCIPAL --- */
.main-header {
  position: fixed;
  top: -2px; 
  left: 0;
  width: 100%;
  height: 102px; 
  background-color: #0e0e0e;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px; 
  box-sizing: border-box;
  z-index: 2000;
  will-change: transform;
  transform: translateZ(0);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-hidden {
  transform: translateY(-105%);
}

.logo img {
  height: 80px; 
  width: auto;
  display: block;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 30px;
}

/* --- BOUTON BURGER --- */
.burger-menu {
  background: transparent;
  border: none;
  cursor: pointer;
  width: 30px;
  height: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  z-index: 3000;
}

.burger-menu span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #ffffff;
  transition: transform 0.3s ease, opacity 0.2s ease;
}

.burger-menu.active span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.burger-menu.active span:nth-child(2) { opacity: 0; }
.burger-menu.active span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* --- BOUTON CONTACT --- */
.btn-contact {
  background-color: #ffffff;
  color: #000000;
  text-decoration: none;
  padding: 12px 25px;
  border-radius: 0px; 
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
  transition: 0.2s ease;
}

/* --- MENU LATÉRAL & OVERLAY (FLOU ENTRÉE SEULEMENT) --- */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1500;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Transition simple sur l'opacité pour la sortie */
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.menu-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* Flou uniquement à l'activation */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.side-menu {
  position: fixed;
  top: 0;
  right: -50%; 
  width: 50%;
  height: 100%;
  background-color: #0e0e0e;
  z-index: 1600;
  display: flex;
  align-items: center;
  will-change: right;
  transition: right 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.side-menu.active {
  right: 0;
}

.menu-content ul {
  list-style: none;
  padding-left: 100px;
  margin: 0;
}

.menu-content ul li { margin-bottom: 25px; }

.menu-content ul li a {
  color: #ffffff;
  text-decoration: none;
  font-size: 45px;
  font-weight: 800;
  text-transform: uppercase;
  transition: 0.2s ease;
  display: inline-block;
}

.menu-content ul li a:hover {
  transform: translateX(10px);
  color: #cccccc;
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .side-menu { width: 70%; right: -70%; }
}

@media (max-width: 768px) {
  .side-menu { width: 100%; right: -100%; }
  .menu-content ul { padding-left: 40px; }
  .menu-content ul li a { font-size: 32px; }
  .main-header { height: 80px; padding: 0 20px; }
  .logo img { height: 50px; }
  body { margin-top: 80px; }
}

/* --- BARRE ADMIN WP --- */
.admin-bar .main-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .main-header { top: 46px; } }
/* Suppression totale des titres de pages et de leurs conteneurs */
.page h1,
.page .title,
.page [class*="title"],
.page [class*="header"] h1,
.page-header,
.elementor-page-title,
.wd-page-title {
    display: none !important;
}
body { overflow-x: clip; }

/* ===== T22 – CSS additionnel proposé (Apparence > Éditeur > Styles > CSS additionnel, ou Customizer > CSS additionnel) ===== */

/* (3) « Discover our work » (accueil, snippet WPCode #1408) : wpautop injecte des <p>/<br> vides
   entre les vignettes ; le navigateur duplique alors les <a> (17 tuiles au lieu de 6) et la grille se décentre.
   Garde-fou minimal (inutile si le snippet #1408 est remplacé par la version corrigée, mais sans risque). */
.t22-portfolio-accueil-6-uniquement > p,
.t22-portfolio-accueil-6-uniquement > br,
.t22-portfolio-accueil-6-uniquement .t22-mini-box p,
.t22-portfolio-accueil-6-uniquement .t22-mini-box br { display: none !important; }

/* Page Projects (le préfixe body est nécessaire pour passer devant le @media 768 inline de la page) : 2 colonnes entre 600 et 1024 px (au lieu de 1 colonne dès 768) */
@media (min-width: 600px) and (max-width: 1024px) {
  body .t22-portfolio-final-clean { grid-template-columns: repeat(2, 1fr) !important; gap: 15px !important; }
}
@media (max-width: 599px) {
  body .t22-portfolio-final-clean { grid-template-columns: 1fr !important; }
}
/* Tactile : logo/nom du projet visibles sans survol */
@media (hover: none) {
  .t22-item .t22-hover { opacity: 1 !important; background-color: rgba(0,0,0,.45) !important; }
}

/* Galeries Jetpack Tiled Gallery : 2 colonnes sous 600 px (au lieu de 4 colonnes minuscules) */
@media (max-width: 599px) {
  .wp-block-jetpack-tiled-gallery .tiled-gallery__row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px !important;
  }
  .wp-block-jetpack-tiled-gallery .tiled-gallery__col { display: contents !important; }
  .wp-block-jetpack-tiled-gallery .tiled-gallery__item { margin: 0 !important; width: auto !important; }
  .wp-block-jetpack-tiled-gallery .tiled-gallery__item img {
    width: 100% !important; height: 100% !important; aspect-ratio: 1 / 1; object-fit: cover;
  }
}

/* ===== T22 – Accueil, « Featured projects » : espacements + chevauchement sur mobile (≤ 768 px uniquement) =====
   À coller À LA FIN du CSS additionnel. Aucun effet au-dessus de 768 px (desktop inchangé).
   Causes :
   - .t22-right-zone a flex-grow:1 + align-items:center : dans l'overlay en colonne, elle remplit toute la hauteur
     et centre la liste (2 FAST / IEM / SMILE) au milieu de l'écran, donc PAR-DESSUS la vidéo.
   - Le panneau sticky fait 100svh : le libellé est collé en haut (padding 36-48 px) et la vidéo (~200 px de haut)
     est centrée, d'où ~270 px de vide sous le titre et ~340 px de vide entre la vidéo et « Discover our work ».
   Le préfixe « body » est nécessaire : le CSS additionnel est chargé AVANT le <style> inline de la section.
   Correctif : sur mobile, libellé / vidéo / liste sont empilés dans un panneau à hauteur naturelle,
   qui reste collé (sticky) au centre de l'écran pendant le défilement. */
@media (max-width: 768px) {
  body .t22-showcase-wrapper .t22-sticky-content {
    height: auto !important;
    flex-direction: column;
    gap: 18px;
    padding: 24px 0;
    /* centre verticalement le panneau épinglé (hauteur ≈ 16:9 de la largeur + ~90 px) */
    top: max(0px, calc(50svh - 28vw - 45px));
  }
  body .t22-showcase-wrapper .t22-nav-overlay { display: contents; }
  body .t22-showcase-wrapper .t22-left-zone { order: 1; }
  body .t22-showcase-wrapper .t22-center-area { order: 2; }
  body .t22-showcase-wrapper .t22-right-zone { order: 3; flex-grow: 0; }
}

/* ===== T22 – Page Contact (/contact/) : à coller à la fin du CSS additionnel =====
   Tout est scopé sous body .t22-contact (aucun effet sur les autres pages).
   Attention : le CSS additionnel masque tout .page [class*="title"] et [class*="header"] h1 :
   aucune classe de cette page ne contient « title » ni « header ». */
body .t22-contact { color: var(--wp--preset--color--base, #F8F7F5); font-family: var(--wp--preset--font-family--ibm-plex-sans); padding-left: 24px; padding-right: 24px; }
body .t22-contact .t22-contact-kicker { font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; opacity: .5; margin: 0 0 12px; }
body .t22-contact .t22-contact-heading { font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; margin: 0; }
body .t22-contact .t22-contact-intro { max-width: 640px; margin-left: 0 !important; opacity: .8; margin-top: 18px; font-size: clamp(1rem, .95rem + .3vw, 1.2rem); }
body .t22-contact .t22-contact-cols { gap: 64px; align-items: flex-start; }

/* Bloc infos */
body .t22-contact .t22-contact-info { background: #1c1c1c; padding: 32px; }
body .t22-contact .t22-contact-subheading { display: block; font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; opacity: .5; margin: 0 0 6px; }
body .t22-contact .t22-contact-info p { margin: 0 0 26px; font-size: 1rem; line-height: 1.5; }
body .t22-contact .t22-contact-info a { color: inherit; text-underline-offset: 4px; }
body .t22-contact .t22-contact-social .wp-block-social-link-anchor { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* Formulaire Jetpack */
body .t22-contact form.contact-form,
body .t22-contact .wp-block-jetpack-contact-form { display: flex; flex-wrap: wrap; gap: 22px 20px; }
body .t22-contact .grunion-field-wrap { flex: 1 1 100%; margin: 0; }
body .t22-contact .grunion-field-name-wrap,
body .t22-contact .grunion-field-email-wrap,
body .t22-contact .grunion-field-select-wrap,
body .t22-contact .grunion-field-text-wrap,
body .t22-contact .grunion-field-date-wrap { flex: 1 1 calc(50% - 10px); min-width: 220px; }
body .t22-contact label { display: block; font-size: 12px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 8px; color: inherit; }
body .t22-contact label .grunion-label-required { opacity: .5; text-transform: none; letter-spacing: 0; margin-left: 4px; }
body .t22-contact input[type="text"],
body .t22-contact input[type="email"],
body .t22-contact input[type="tel"],
body .t22-contact input[type="date"],
body .t22-contact select,
body .t22-contact textarea {
  width: 100%; box-sizing: border-box; background: #1c1c1c; color: #F8F7F5;
  border: 1px solid #2e2e2e; border-radius: 0; padding: 14px 16px; min-height: 48px;
  font: inherit; font-size: 16px; /* 16 px : pas de zoom auto sur iOS */
  transition: border-color .2s ease;
}
body .t22-contact textarea { min-height: 160px; resize: vertical; }
body .t22-contact select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #F8F7F5 50%), linear-gradient(135deg, #F8F7F5 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
body .t22-contact input:focus, body .t22-contact select:focus, body .t22-contact textarea:focus { outline: none; border-color: #ffffff; }
body .t22-contact ::placeholder { color: #8a8a8a; }
body .t22-contact .grunion-field-checkbox-wrap label,
body .t22-contact .grunion-checkbox-label { display: flex; gap: 12px; align-items: flex-start; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 300; line-height: 1.45; opacity: .85; }
body .t22-contact .grunion-field-checkbox-wrap .grunion-label-required { display: none; }
body .t22-contact input[type="checkbox"] { width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 20px; accent-color: #ffffff; }
/* Bouton : même style que « Contact us » du header (.btn-contact) */
body .t22-contact .wp-block-jetpack-button,
body .t22-contact .contact-submit { flex: 1 1 100%; }
body .t22-contact button[type="submit"],
body .t22-contact .wp-block-button__link {
  background: #ffffff; color: #000000; border: 0; border-radius: 0; padding: 16px 32px; min-height: 48px;
  font-weight: 700; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: opacity .2s ease;
}
body .t22-contact button[type="submit"]:hover { opacity: .85; }

/* Tablette / mobile */
@media (max-width: 1024px) {
  body .t22-contact .t22-contact-cols { gap: 40px; }
}
@media (max-width: 781px) {
  body .t22-contact .t22-contact-top-space { height: 110px !important; }
  body .t22-contact .t22-contact-info { padding: 24px; }
}
@media (max-width: 599px) {
  body .t22-contact { padding-left: 0; padding-right: 0; }
  body .t22-contact .grunion-field-wrap { flex-basis: 100% !important; min-width: 0; }
  body .t22-contact button[type="submit"] { width: 100%; }
}


/* ===== T22 – Project pages (EN + FR): hide the template's featured image (21/10/2026) =====
   Where: Appearance > Editor > Styles > ⋮ > Additional CSS (paste at the END).
   Why: the "Pages" template (twentytwentyfive//page) prints a Post Featured Image block above the post title,
   so the cover (COVER_*.webp) appeared before the project name. The featured image itself stays set on each page
   (Rank Math uses it for og:image / twitter:image). Scoped by page ID: no other page is affected.
   EN 1535 society, 1541 2fast-2, 1420 six-invitational-2026, 1544 brasseries-georges-2, 1549 rlcs-paris-major-26-3, 1538 smile, 1547 iem-cologne-2024
   FR 1901 society-bruxelles, 1905 2fast-circuit-zolder, 1908 six-invitational-2026, 1911 brasseries-georges-saison-hivernale, 1914 rlcs-paris-major-2026, 1921 smile-design, 1918 iem-cologne-2024
   New project page later: add its body.page-id-XXXX line. */
body.page-id-1535 .wp-block-post-featured-image,
body.page-id-1541 .wp-block-post-featured-image,
body.page-id-1420 .wp-block-post-featured-image,
body.page-id-1544 .wp-block-post-featured-image,
body.page-id-1549 .wp-block-post-featured-image,
body.page-id-1538 .wp-block-post-featured-image,
body.page-id-1547 .wp-block-post-featured-image,
body.page-id-1901 .wp-block-post-featured-image,
body.page-id-1905 .wp-block-post-featured-image,
body.page-id-1908 .wp-block-post-featured-image,
body.page-id-1911 .wp-block-post-featured-image,
body.page-id-1914 .wp-block-post-featured-image,
body.page-id-1921 .wp-block-post-featured-image,
body.page-id-1918 .wp-block-post-featured-image {
    display: none !important;
}


/* ==========================================================================
   T22 — 22/10/2026 — Header: no white square when clicking EN/FR, burger,
   "Contact us" or the side-menu links.
   Cause: Twenty Twenty-Five global styles ship
     :where(.wp-site-blocks :focus){outline-style:solid;outline-width:2px}
   so every clicked link/button in the header gets a 2px outline in
   currentColor (white), plus the mobile tap-highlight square.
   Fix: drop the outline / tap highlight / background on mouse & touch focus,
   keep a subtle accessible ring for keyboard users (:focus-visible).
   Paste at the END of Appearance > Additional CSS.
   ========================================================================== */
.main-header a,
.main-header button,
.main-header .t22-lang,
.main-header .burger-menu,
.main-header .btn-contact,
.side-menu a,
.menu-overlay {
  -webkit-tap-highlight-color: transparent !important;
}

/* Mouse / touch focus and active state: nothing visible */
.main-header a:focus,
.main-header a:active,
.main-header button:focus,
.main-header button:active,
.side-menu a:focus,
.side-menu a:active {
  outline: none !important;
  box-shadow: none !important;
}
.main-header .t22-lang:focus,
.main-header .t22-lang:active,
.main-header .burger-menu:focus,
.main-header .burger-menu:active,
.side-menu a:focus,
.side-menu a:active {
  background: transparent !important;
}
.main-header .t22-lang::-moz-focus-inner,
.main-header .burger-menu::-moz-focus-inner { border: 0 !important; }

/* Text selection square on fast double-tap / double-click of EN/FR or the burger */
.main-header .t22-lang,
.main-header .burger-menu,
.main-header .btn-contact {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Keyboard focus only: subtle, on-brand */
.main-header .t22-lang:focus-visible {
  outline: none !important;
  color: #C9B79C;
  border-bottom-color: #C9B79C !important; /* underline already defined in the header part */
}
.side-menu a:focus-visible {
  outline: none !important;
  text-decoration: underline !important;
  text-decoration-color: #C9B79C !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 6px !important;
}
.main-header .burger-menu:focus-visible,
.main-header .btn-contact:focus-visible,
.main-header .logo a:focus-visible {
  outline: 1px solid #C9B79C !important;
  outline-offset: 4px !important;
}


/* --- 22/10 : pas de carré blanc au clic, sur tout le site --- */
html { -webkit-tap-highlight-color: transparent; }
*:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; }
a:active, button:active, [role="button"]:active, video:focus, figure:focus, .wp-block-cover:focus { outline: none !important; }
:where(a, button, [role="button"], summary):focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* 23/10: equal-height card titles (home "Who it's for" + "Our services"): 2-line slot, text centred, bar aligned */
@media (min-width:600px){
html body .t22home .t22home-who h3,
html body .t22-skills-section .t22-skill-head{position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;min-height:calc(2.4em + 14px)!important;padding-bottom:14px!important;box-sizing:border-box!important}
html body .t22home .t22home-who h3::after,
html body .t22-skills-section .t22-skill-head::after{position:absolute!important;bottom:0!important;left:50%!important;transform:translateX(-50%)!important;margin:0!important}
}

/* 23/10: no featured image above project titles (title first) */
body.page .wp-block-post-featured-image{display:none!important}

/* 23/10: mobile header (<=768px), sticky instead of fixed so iOS Safari keeps it at the very top while the toolbar moves */
@media (max-width:768px){
html body{margin-top:0!important}
html body .wp-site-blocks>header.wp-block-template-part{position:sticky!important;top:0!important;z-index:2000!important;height:80px!important;margin:0!important}
html body .wp-site-blocks>header.wp-block-template-part+*{margin-block-start:0!important}
html body .wp-site-blocks>header.wp-block-template-part .main-header{position:absolute!important;top:0!important;will-change:auto!important}
}


/* ===== T22 – Accueil, « Featured projects » : chevauchement 769–1199 px (tablette, navigateur Tesla, petits laptops) =====
   À coller À LA FIN du CSS additionnel (après le bloc « ≤ 768 px »). Aucun effet ≤ 768 px ni ≥ 1200 px (desktop inchangé).
   Causes :
   - 769–1024 px : le <style> de la section passe l'overlay (position:absolute sur tout le panneau) en colonne, mais
     .t22-right-zone garde flex-grow:1 + align-items:center : la liste 2 FAST / IEM / SMILE est centrée PILE AU MILIEU
     de la vidéo. Le correctif mobile (display:contents) ne s'applique que ≤ 768 px.
   - 1025–1199 px : mise en page desktop 15 % / 70 % / 15 % du panneau (80 % de l'écran) : la colonne de droite
     (~125–150 px) est plus étroite que « IEM COLOGNE 24 » (126 px + zoom 1,05) → le texte touche/mord la vidéo.
   Préfixe « body » : le CSS additionnel est chargé AVANT le <style> inline de la section. */
@media (min-width: 769px) and (max-width: 1024px) {
  body .t22-showcase-wrapper .t22-sticky-content {
    height: auto !important;
    flex-direction: column;
    gap: 22px;
    padding: 32px 0;
  }
  body .t22-showcase-wrapper .t22-nav-overlay { display: contents; }
  body .t22-showcase-wrapper .t22-left-zone { order: 1; width: auto; }
  body .t22-showcase-wrapper .t22-label-fixed br { display: none; }
  body .t22-showcase-wrapper .t22-center-area {
    order: 2;
    /* 90 % de large, mais jamais plus haut que l'écran moins ~210 px (libellé + liste + marges) */
    width: min(90%, calc((100vh - 210px) * 16 / 9));
  }
  body .t22-showcase-wrapper .t22-right-zone { order: 3; flex-grow: 0; width: auto; }
  body .t22-showcase-wrapper .t22-project-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 32px;
  }
}
@media (min-width: 1025px) and (max-width: 1199px) {
  /* même disposition desktop, colonnes latérales élargies (15 % → 18 %), vidéo 70 % → 64 % */
  body .t22-showcase-wrapper .t22-left-zone { width: 18%; }
  body .t22-showcase-wrapper .t22-center-placeholder,
  body .t22-showcase-wrapper .t22-center-area { width: 64%; }
}


/* ===== T22 – Accueil, « Featured projects » : UNE SEULE mise en page à toutes les largeurs (v2, 23/10/2026) =====
   À coller À LA FIN du CSS additionnel. Remplace (par surcharge, sans rien supprimer) le bloc « ≤ 768 px »
   et le bloc « 769–1199 px » précédents.
   Disposition : libellé centré sur une ligne en haut / vidéo 16:9 presque pleine largeur (~93 % de l'écran) /
   3 noms de projets sur une ligne en bas. La hauteur de la vidéo est plafonnée pour que le bloc entier tienne
   dans l'écran (100svh) avec de l'air ; si la hauteur limite, la vidéo prend la plus grande largeur possible.
   L'interaction (surlignage/zoom du projet actif, changement de vidéo, défilement épinglé) est inchangée :
   le script mesure toujours la hauteur du panneau (--t22-ph) et le centre verticalement.
   Préfixe « body » : le CSS additionnel est chargé AVANT le <style> inline de la section. */

/* 1) Section en pleine largeur (le thème la limite à 80 % : --wp--style--global--content-size) */
body .t22-showcase-wrapper {
  max-width: none !important;
  width: 100%;
}

/* 2) Panneau épinglé : une colonne libellé / vidéo / noms */
body .t22-showcase-wrapper .t22-sticky-content {
  height: auto !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  /* haut > bas : réserve la place de l'en-tête quand il réapparaît (desktop) */
  padding: 72px 0 24px;
}
body .t22-showcase-wrapper .t22-nav-overlay { display: contents; }
body .t22-showcase-wrapper .t22-center-placeholder { display: none; }

/* 3) Libellé : une ligne, centré */
body .t22-showcase-wrapper .t22-left-zone { order: 1; width: auto; height: auto; }
body .t22-showcase-wrapper .t22-label-fixed { white-space: nowrap; text-align: center; }
body .t22-showcase-wrapper .t22-label-fixed br { display: none; }

/* 4) Vidéo 16:9 : 93 % de large, hauteur ≤ écran − 230 px (libellé + noms + marges + en-tête) */
body .t22-showcase-wrapper .t22-center-area {
  order: 2;
  max-width: none;
  aspect-ratio: 16 / 9;
  width: min(93%, calc((100vh - 230px) * 16 / 9));
  width: min(93%, calc((100svh - 230px) * 16 / 9));
}

/* 5) Noms des projets : une ligne, centrés, espacés régulièrement */
body .t22-showcase-wrapper .t22-right-zone { order: 3; flex-grow: 0; width: auto; height: auto; }
body .t22-showcase-wrapper .t22-project-list {
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 4.5vw, 56px);
}
body .t22-showcase-wrapper .t22-nav-item { white-space: nowrap; }

/* Mobile : en-tête collant de 80 px toujours visible → le bloc (bien plus bas que haut) est centré
   par le script dans l'écran ; marges réduites et texte un peu plus petit pour tenir sur une ligne. */
@media (max-width: 768px) {
  body .t22-showcase-wrapper .t22-sticky-content { gap: 16px; padding: 24px 0; }
  body .t22-showcase-wrapper .t22-center-area {
    width: min(93%, calc((100vh - 300px) * 16 / 9));
    width: min(93%, calc((100svh - 300px) * 16 / 9));
  }
  body .t22-showcase-wrapper .t22-nav-text { font-size: 11px; letter-spacing: 1.5px; }
  body .t22-showcase-wrapper .t22-capsule { border-radius: 8px; }
}
/* le bloc d'origine passe à 10 px dès 480 px : on garde 11 px tant que ça tient (≥ 360 px) */
@media (max-width: 480px) {
  body .t22-showcase-wrapper .t22-nav-text { font-size: 11px; letter-spacing: 1.5px; }
  body .t22-showcase-wrapper .t22-project-list { gap: clamp(12px, 4.5vw, 20px); }
}
@media (max-width: 359px) {
  body .t22-showcase-wrapper .t22-nav-text { font-size: 10px; letter-spacing: 1px; }
}
@media (max-width: 300px) {
  body .t22-showcase-wrapper .t22-nav-text { font-size: 9px; letter-spacing: 0.5px; }
  body .t22-showcase-wrapper .t22-project-list { gap: 10px; }
}

/* ===== T22 - 24/10/2026 - Responsive audit fixes ===== */
/* Append at the END of Additional CSS. Layout only: no text is changed or hidden.
   The page blocks' own <style> tags load AFTER this stylesheet, so each selector starts with
   "body" to win on specificity (no !important needed).
   Untouched: home (featured projects, marquee, hero video, who/services cards), loader,
   header, focus rules. */


/* 1) Inner pages, tablet and phone (<= 1024 px): use the full width.
   The theme caps every page block at 80 % (--wp--style--global--content-size). The blocks
   already have their own side padding (.wrap), so on a 390 px phone the text sat in a
   272 px column with 59 px margins (the home page uses 16 px). That narrow column caused
   the word-by-word title breaks and the clipped "d'événements" at 320 px. */
@media (max-width: 1024px) {
  body .entry-content > main.t22a,
  body .entry-content > main.t22ab,
  body .entry-content > main.t22ct,
  body .entry-content > main.t22g,
  body .entry-content > main.t22lp,
  body .entry-content > main.t22s {
    max-width: none;
  }
  /* Blocks that had no side padding of their own (they relied on the 80 % cap) get the
     same side margin as the text. */
  body .t22a .film {
    width: calc(100% - 2 * clamp(20px, 4vw, 56px));
    /* !important only to beat the inline style="margin:0" on <figure class="film"> */
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body .t22g .grid {
    padding-left: clamp(20px, 4vw, 40px);
    padding-right: clamp(20px, 4vw, 40px);
  }
}

/* Service landing pages, all widths: the "Projects" and "FAQ" sections had no side
   padding (their "padding: X 0" cancels the .wrap padding), so their titles and cards
   started further left than every other section of the page. Now aligned. */
body .t22lp .work,
body .t22lp .faq {
  padding-left: clamp(20px, 4vw, 48px);
  padding-right: clamp(20px, 4vw, 48px);
}


/* 2) Titles: balanced line breaks (no single orphan word on the last line). */
body .t22ab h1, body .t22ab h2, body .t22ab h3,
body .t22ct h1, body .t22ct h2,
body .t22g h1, body .t22g .next .q,
body .t22lp h2, body .t22lp h3,
body .t22s h1, body .t22s h2, body .t22s h3,
body .t22a .body h2, body .t22a .photos-head h2 {
  text-wrap: balance;
}


/* FAQ questions (service landing pages): balanced lines, so a question never ends with a
   lone "?" on its own line (French spacing before "?"). */
body .t22lp .faq summary { text-wrap: balance; }

/* 3) "Pillar" titles (Services, About, service landing pages): long words such as
   ÉVÉNEMENTIEL spilled out of their column into the text next to them at 900-1280 px.
   The title now also scales with its own column (cqi = 1 % of the column width), so it
   always fits. Wide screens and phones keep the current size. */
body .t22s .pillar > div:not(.num),
body .t22ab .pillar > div:not(.num),
body .t22lp .pillar > div:not(.num) {
  container-type: inline-size;
}
body .t22s .pillar h2,
body .t22ab .pillar h2,
body .t22lp .pillar h2 {
  font-size: min(clamp(30px, 4vw, 54px), 11.5cqi);
}


/* 4) Big page titles on small phones (<= 400 px): slightly smaller minimum size so long
   words (Événementiel, d'événements, entreprise...) fit on a line. */
@media (max-width: 400px) {
  body .t22lp .hero h1 { font-size: clamp(32px, 10vw, 40px); }
  body .t22ab .hero h1 { font-size: clamp(36px, 11vw, 44px); }
  body .t22s .hero h1  { font-size: clamp(36px, 11vw, 44px); }
  body .t22a .hero h1  { font-size: clamp(34px, 10.5vw, 40px); }
  body .t22a .hero h1.long { font-size: clamp(30px, 9.5vw, 36px); }
  body .t22a .hero h1 .l2 { font-size: max(.34em, 11px); } /* subtitle stays readable */
}

/* Project titles: keep "ZOLDER×" together (the × was falling alone on a line). */
body .t22a .hero h1 .l:has(.x) { white-space: nowrap; }


/* 5) Project pages: "Pictures / 10 frames" header. On phones the counter was glued to the
   title (and broke on 2 lines). Keep it on one line, with a gap; it goes under the title
   if there is not enough room. */
body .t22a .photos-head {
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: 8px;
}
body .t22a .photos-head .eyebrow { white-space: nowrap; }


/* 6) Project pages: "Other projects" cards.
   - The underline (and arrow) of the 3 cards now lines up even when one name takes
     2 lines and the others 1.
   - Names break in a balanced way.
   - Phones: names were 10.5 px and touched each other at 320 px ("BRASSERIES" + "SOCIETY"). */
body .t22a .others-grid li { display: flex; }
body .t22a .others-grid .card {
  display: flex;
  flex-direction: column;
  width: 100%;
}
body .t22a .others-grid .card .meta { flex: 1 0 auto; }
body .t22a .others-grid .card .name { text-wrap: balance; }
@media (max-width: 860px) {
  body .t22a .others-grid { column-gap: 14px; }
  body .t22a .card .name { font-size: 11px; letter-spacing: .03em; }
}


/* 7) Projects page grid.
   - Captions: the line under each tile is aligned across the row even when a name or a
     category takes 2 lines ("Six Invitational 2026", "RLCS Paris Major 26").
   - Tablets 600-768 px: 2 columns instead of 1 (the tiles were 560-700 px squares);
     the "What if it were yours?" tile spans the full last row. */
body .t22g .grid > li { display: flex; }
body .t22g .grid > li > a {
  width: 100%;
  display: flex;
  flex-direction: column;
}
body .t22g .grid > li > a .cap { flex: 1 0 auto; }
body .t22g .cap .nm { text-wrap: balance; }
@media (min-width: 600px) and (max-width: 768px) {
  body .t22g .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  body .t22g .next { grid-column: span 2; }
}


/* 8) "Four steps" timelines (About, service landing pages), 4 columns (>= 861 px):
   when one step title takes 2 lines, the texts below started at different heights.
   The 3 parts of each step (number, title, text) now share the same rows. */
@media (min-width: 861px) {
  body .t22lp .steps,
  body .t22ab .steps { grid-template-rows: auto auto auto; }
  body .t22lp .step,
  body .t22ab .step {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-content: start;
  }
}


/* 9) Bottom call-to-action buttons (About, Services, landing pages): when the 2 buttons
   wrap on 2 lines (phones/tablets) they touched each other. Same look, constant 10 px gap. */
body .t22ab .cta-in > div:has(> .btn),
body .t22s .cta-in > div:has(> .btn),
body .t22lp .cta-in > div:has(> .btn) {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
body .t22ab .cta-in .btn.ghost,
body .t22s .cta-in .btn.ghost,
body .t22lp .cta-in .btn.ghost { margin: 0; }


/* 10) FR home only, service cards (901-1079 px): with 4 cards on one row, "Production &
   support événementiel", "Stratégie de contenu & campagnes" and "Photo & contenus réseaux"
   broke on 3 lines (the other titles on 2), so the little bars and lists no longer lined up.
   In that range the cards use the 2 x 2 layout already used below 900 px, so every
   title stays on exactly 2 lines. !important only because the existing card rules use it. */
@media (min-width: 901px) and (max-width: 1079px) {
  body.page-id-1876 .t22-skills-section .t22-skill-card {
    flex: 0 1 calc(50% - 7.5px) !important;
  }
}


/* 11) Burger button: bigger invisible touch area (the drawn icon stays 30 x 22 px). */
.main-header .burger-menu { position: relative; }
.main-header .burger-menu::before {
  content: "";
  position: absolute;
  inset: -11px -9px;
}

/* ===== T22 - 24/10/2026 - Bigger tap areas (step 2) ===== */
/* Append at the END of Additional CSS, after the "Responsive audit fixes" block.
   Invisible hit areas only: nothing moves and nothing changes on screen.
   Each target gets a transparent ::before (no background, no border, no text)
   that catches taps around it, like the burger fix (30 x 22 icon -> 48 x 44 tap area). */

/* 1a) Header FR / EN switch: 28-30 x 39 -> 44-46 x 45.
   8 px of extra width on each side. The 18 px gap to the burger is shared: the switch
   area stops at 8 px and the burger area (inset -9 px) starts at 9 px, so they never overlap. */
.main-header .t22-lang { position: relative; }
.main-header .t22-lang::before {
  content: "";
  position: absolute;
  inset: -3px -8px;
}

/* 1b) Footer Instagram / YouTube icons: 24 x 24 -> 44 x 44 each, on touch screens only.
   The two icons touch, so each area grows outwards only (Instagram to the left,
   YouTube to the right) and 10 px up and down. The two areas never overlap.
   Why the media query: with a mouse, the theme zooms the icon (scale 1.1) on hover, and any
   extra positioning inside that zoomed circle makes Chrome redraw the zoomed icon a little
   differently (anti-aliasing only). Phones and tablets have no hover, so they get the bigger
   area and mouse users see exactly the same pixels as before.
   position: relative goes on the round <li>, not on the link, so the keyboard focus ring keeps
   its original paint order. */
@media (hover: none), (pointer: coarse) {
  .wp-block-social-links .wp-block-social-link { position: relative; }
  .wp-block-social-links .wp-block-social-link-anchor::before {
    content: "";
    position: absolute;
    inset: -10px;                      /* a single icon: 44 x 44 around it */
  }
  .wp-block-social-links .wp-block-social-link:first-child:not(:last-child) .wp-block-social-link-anchor::before {
    inset: -10px 0 -10px -20px;        /* Instagram: grows up, down and to the left */
  }
  .wp-block-social-links .wp-block-social-link:last-child:not(:first-child) .wp-block-social-link-anchor::before {
    inset: -10px -20px -10px 0;        /* YouTube: grows up, down and to the right */
  }
}

/* 2) Service landing pages, bottom "Let's talk" block: phone and email links
   19 px tall -> 45 px tall. They are separated by " · ", so the area grows 4 px sideways
   (the dot stays outside both areas) and 13 px up and down. The line above is plain
   text (no link) and the buttons are far enough below. */
body .t22lp .cta address a { position: relative; }
body .t22lp .cta address a::before {
  content: "";
  position: absolute;
  inset: -13px -4px;
}


/* ===== T22 – 26/10/2026 : CTA accueil empilés + espace vidéo / « Discover our work » + haut des pages internes =====
   À coller À LA FIN du CSS additionnel (Customizer). Ajout seul, rien à supprimer.
   Préfixe « body » / page-id : le CSS additionnel est chargé AVANT les <style> inline des pages. */

/* (1) Accueil EN + FR : « See our work » / « Voir nos réalisations » TOUJOURS sous le bouton principal,
   centré, à toutes les largeurs (mobile → navigateur Tesla / écrans larges). */
body .t22home .t22home-ctas {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 34px 0 0 !important;
}

/* (4) Accueil EN + FR, « Featured projects » : même espace SOUS la vidéo (jusqu'au titre « Discover our work » /
   « Découvrez nos réalisations ») qu'AU-DESSUS (depuis « Explore all services → »).
   Mesuré avant : au-dessus 136 px / dessous 77 px (> 768 px) ; 82 / 74 px (≤ 768 px).
   Le panneau garde la vidéo seule au centre ; on agrandit seulement sa marge basse (aucun texte sur la vidéo). */
body .t22-showcase-wrapper .t22-sticky-content { padding-bottom: 83px !important; }
@media (max-width: 768px) {
  body .t22-showcase-wrapper .t22-sticky-content { padding-bottom: 32px !important; }
}

/* (5) Services / Projects / Contact / About (EN + FR) : moins de vide entre l'en-tête et le début de la page.
   Avant (≥ 1280 px) : 253 px (Services, About), 240 px (Contact), 190 px (Projects) entre le bas de l'en-tête
   et le premier texte = marge du <main> du modèle (70) + padding du groupe (70) + padding du hero (120–170).
   Pages : EN 1734 services, 1317 projects, 1706 contact, 1826 about / FR 1885, 1890, 1896, 1893.
   L'accueil (1823 / 1876) et les pages projets ne sont pas touchés. */
body.page-id-1734 .wp-site-blocks > main.wp-block-group,
body.page-id-1317 .wp-site-blocks > main.wp-block-group,
body.page-id-1706 .wp-site-blocks > main.wp-block-group,
body.page-id-1826 .wp-site-blocks > main.wp-block-group,
body.page-id-1885 .wp-site-blocks > main.wp-block-group,
body.page-id-1890 .wp-site-blocks > main.wp-block-group,
body.page-id-1896 .wp-site-blocks > main.wp-block-group,
body.page-id-1893 .wp-site-blocks > main.wp-block-group { margin-top: 0 !important; }
body.page-id-1734 .wp-site-blocks > main.wp-block-group > .wp-block-group.alignfull,
body.page-id-1317 .wp-site-blocks > main.wp-block-group > .wp-block-group.alignfull,
body.page-id-1706 .wp-site-blocks > main.wp-block-group > .wp-block-group.alignfull,
body.page-id-1826 .wp-site-blocks > main.wp-block-group > .wp-block-group.alignfull,
body.page-id-1885 .wp-site-blocks > main.wp-block-group > .wp-block-group.alignfull,
body.page-id-1890 .wp-site-blocks > main.wp-block-group > .wp-block-group.alignfull,
body.page-id-1896 .wp-site-blocks > main.wp-block-group > .wp-block-group.alignfull,
body.page-id-1893 .wp-site-blocks > main.wp-block-group > .wp-block-group.alignfull { padding-top: 0 !important; }
body.page-id-1734 .t22s .hero, body.page-id-1885 .t22s .hero,
body.page-id-1826 .t22ab .hero, body.page-id-1893 .t22ab .hero,
body.page-id-1706 .t22ct .hero, body.page-id-1896 .t22ct .hero,
body.page-id-1317 .t22g .hero, body.page-id-1890 .t22g .hero { padding-top: clamp(40px, 5vw, 80px) !important; }
/* ===== fin 26/10/2026 ===== */