/* --- 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%; }
}