/* === Inter Variable (self-host) — à mettre tout en haut === */
@font-face{
  font-family: "InterVariable";
  src:
    url("/fonts/Inter-VariableFont_opsz,wght.woff2") format("woff2-variations"),
    url("/fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "InterVariable";
  src:
    url("/fonts/Inter-Italic-VariableFont_opsz,wght.woff2") format("woff2-variations"),
    url("/fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root{
  
  /* Couleurs (inchangé si tu veux) */
  --black:#0D0D0D;
  --gray:#7C7C7C;
  --copper:#C8A86B;
  --copper-600:#A88D53;
  --copper-400:#D6C08A;
  --offwhite:#F5F5F5;

  --container: 1180px;
  --radius-xl: 20px;
  --radius-2xl: 28px;

  --shadow-soft: 0 10px 30px rgba(0,0,0,.35);
  --shadow-xs: 0 2px 10px rgba(0,0,0,.2);

  --color-bg: #000000;
  --color-text: #F5F5F5;
  --color-muted: rgba(245,245,245,0.72);
  --color-gold: var(--copper);

  /* 🌟 Typo globale - INTER PARTOUT */
--font-heading: "InterVariable", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
--font-body: "InterVariable", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}


/* Reset / base */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scroll-behavior:smooth; overflow-x: hidden !important; }
body{
  margin:0;
  color:var(--offwhite);
  background: var(--black);
  font-family: var(--font-body) !important;
  line-height:1.6;
  text-rendering:optimizeLegibility;
  overflow-x: hidden !important;
  width: 100vw !important;
  max-width: 100vw !important;
}

/* Empêcher TOUT débordement horizontal sur mobile */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
  }

  /* Toutes les sections: pas de débordement */
  section,
  main,
  #hero,
  #about,
  #services,
  #testimonials,
  #team,
  #contact,
  .elite-footer-section {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* 🎯 SPACING UNIFORME - TOUTES LES SECTIONS (sauf hero) - IDENTIQUE SUR TOUS MOBILES */
  /* 🔥 DÉSACTIVÉ - Causait des conflits, géré maintenant par inline CSS dans index.html */
  /*
  html body section#about,
  html body #about,
  html body .section-about-aesop,
  body section#about,
  body #about,
  section#about,
  #about,
  .section-about-aesop {
    padding-top: 180px !important;
  }

  html body section#services,
  html body #services,
  body section#services,
  body #services,
  section#services,
  #services {
    padding-top: 180px !important;
  }

  html body section#team,
  html body #team,
  html body .team,
  html body .section-offset,
  body section#team,
  body #team,
  section#team,
  #team,
  .team,
  }

  html body section#testimonials,
  html body #testimonials,
  html body .testimonials,
  body section#testimonials,
  body #testimonials,
  section#testimonials,
  #testimonials,
  .testimonials {
    padding-top: 180px !important;
  }

  html body section#contact,
  html body #contact,
  html body .elite-footer-section,
  body section#contact,
  body #contact,
  section#contact,
  #contact,
  .elite-footer-section {
    padding-top: 180px !important;
  }
  */

  /* Hero reste à 0 - CRITIQUE */
  html body #hero,
  html body .hero,
  body #hero,
  #hero,
  .hero {
    padding-top: 0 !important;
  }
}

/* 🎯 EXTRA SMALL SCREENS - encore plus d'espace si besoin */
/* 🔥 DÉSACTIVÉ - Géré par inline CSS dans index.html */
/*
@media (max-width: 640px) {
  html body section#about,
  html body #about,
  html body .section-about-aesop,
  body section#about,
  body #about,
  section#about,
  #about,
  .section-about-aesop,
  html body section#services,
  html body #services,
  body section#services,
  body #services,
  section#services,
  #services,
  html body section#team,
  html body #team,
  html body .team,
  html body .section-offset,
  body section#team,
  body #team,
  section#team,
  #team,
  .team,
  .section-offset,
  html body section#testimonials,
  html body #testimonials,
  html body .testimonials,
  body section#testimonials,
  body #testimonials,
  section#testimonials,
  #testimonials,
  .testimonials,
  html body section#contact,
  html body #contact,
  html body .elite-footer-section,
  body section#contact,
  body #contact,
  section#contact,
  #contact,
  .elite-footer-section {
    padding-top: 180px !important;
  }

  Hero TOUJOURS à 0
  html body #hero,
  html body .hero,
  body #hero,
  #hero,
  .hero {
    padding-top: 0 !important;
  }
}
*/

/* 🔥 INTER OVERRIDE GLOBAL - FORCE PARTOUT */
*, *::before, *::after,
html, body, div, span, p, a, h1, h2, h3, h4, h5, h6,
ul, li, section, article, nav, header, footer,
button, input, textarea, select, label{
  font-family: "InterVariable", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* Image / liens / listes / titres */
img{ max-width:100%; display:block; height:auto; }
a{ color:var(--offwhite); text-decoration:none; }
a:hover{ text-decoration:underline; }
ul{ list-style:none; padding:0; margin:0; }
h1,h2,h3,h4,h5,h6,
.title, .tst-title, .services-head .title{
  font-family: "InterVariable", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 700;
  letter-spacing: .005em;
  line-height: 1.15;
  color: var(--offwhite);
  margin: 0 0 .5rem;
}
h1{ font-size: clamp(2rem, 2.8vw + 1rem, 4rem); }
h2{ font-size: clamp(1.6rem, 1.5vw + 1rem, 2.4rem); }
h3{ font-size: 1.125rem; }

/* Conteneur commun */
.container{
  width:min(100% - 2rem, var(--container));
  margin-inline:auto;
}

/* Accessibilité */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:1rem; top:-100px; background:#000;
  padding:.5rem .75rem; border-radius:8px; z-index:10000;
}
.skip-link:focus{ top:1rem; }

/* Boutons génériques (utilisables partout) - INTER */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.65rem 1rem; border-radius:999px; border:1px solid transparent;
  font-family: "InterVariable", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight:600;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  text-decoration:none;
}
.btn--lg{ padding:.9rem 1.3rem; }
.btn--copper{ background:var(--copper); color:#1a1a1a; box-shadow:var(--shadow-xs); }
.btn--copper:hover{ transform:translateY(-2px); box-shadow:var(--shadow-soft); text-decoration:none; }
.btn--outline{ border-color:#444; color:var(--offwhite); background:transparent; }
.btn--outline:hover{ border-color:var(--copper); color:var(--copper); text-decoration:none; }

/* Utilitaires */
.text-center{ text-align:center; }
.mt-0{ margin-top:0 !important; }
.mt-1{ margin-top:.5rem !important; }
.mt-2{ margin-top:1rem !important; }
.mt-3{ margin-top:1.5rem !important; }
.mb-0{ margin-bottom:0 !important; }
.mb-1{ margin-bottom:.5rem !important; }
.mb-2{ margin-bottom:1rem !important; }
.mb-3{ margin-bottom:1.5rem !important; }

/* Focus visible */
:focus-visible{ outline:2px solid var(--copper); outline-offset:2px; }

/* Animations de base réutilisables */
@keyframes fadeUp{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform:none; } }
.fade-up{ opacity:0; animation: fadeUp .7s ease forwards; }
.delay-1{ animation-delay:.15s; }
.delay-2{ animation-delay:.3s; }

/* Pré-règles pour sections (ancre propre sous header fixe) */
section[id]{ scroll-margin-top: 110px; }

/* 🎯 PADDING GÉNÉREUX POUR TOUTES LES SECTIONS - Desktop */
/* Services garde déjà son padding donc on le laisse */
#team {
  padding-top: 180px !important;
}

/* Testimonials - BEAUCOUP d'espace */
#testimonials {
  padding-top: 180px !important;
}

/* About et Contact - espace généreux */
#about, #contact {
  padding-top: 180px !important;
}

/* Assurer un minimum de padding pour les sections qui n'en ont pas encore */
section[id]:not(#services):not(#hero):not(.hero) {
  padding-top: max(180px, var(--section-padding-top, 180px)) !important;
}

/* 🎯 PADDING GÉNÉREUX POUR MOBILE - même spacing uniforme */
@media (max-width: 768px) {
  #team {
    padding-top: 180px !important;
  }
  
  #testimonials {
    padding-top: 180px !important;
  }
  
  #about, #contact {
    padding-top: 180px !important;
  }
  
  section[id]:not(#services):not(#hero):not(.hero) {
    padding-top: max(180px, var(--section-padding-top, 180px)) !important;
  }
}

/* Exception pour le hero - pas de padding top nécessaire */
#hero,
.hero {
  padding-top: 0 !important;
}

/* 🎯 TITRES DE SECTIONS - Margin-top à 0 pour uniformiser l'espacement
   Le padding-top de 180px de la section suffit */
#team .section-head,
.section-head h2 {
  margin-top: 0 !important;
  margin-bottom: 30px;
}

/* Testimonials - margin-top à 0, seul le padding de la section compte */
#testimonials .tst-title {
  margin-top: 0 !important;
  margin-bottom: 50px;
}

/* About et Contact - margin-top à 0 */
#about h2,
#contact .footer-title {
  margin-top: 0 !important;
  margin-bottom: 40px;
}

/* Services title - margin-top à 0 aussi */
#services .title,
#services .services-head .title {
  margin-top: 0 !important;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  #team .section-head,
  .section-head h2 {
    margin-top: 0 !important;
    margin-bottom: 24px;
  }
  
  /* Testimonials - beaucoup d'espace sur mobile aussi */
  #testimonials .tst-title {
    margin-top: 60px !important;
    margin-bottom: 40px;
  }
  
  /* About et Contact - plus d'espace sur mobile aussi */
  #about h2,
  #contact .footer-title {
    margin-top: 40px;
    margin-bottom: 30px;
  }
}

/* REMOVED: Background image Wix - only video should be visible */

/* Responsive basique (layout générique) */
@media (max-width:980px){
  .btn--lg{ padding:.85rem 1.1rem; }
}
/* === Typo unifiée INTER (force override) === */
:root{
  --font-heading: "InterVariable", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  --font-body: "InterVariable", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* texte par défaut */
html, body{
  font-family: "InterVariable", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* titres */
h1,h2,h3,h4,h5,h6,
.title,
.section-head h2,
.service-title,
.tst-title {
  font-family: var(--font-heading) !important;
  font-weight: 700;
}

/* force le body sur les éléments qui surchargent dans leurs fichiers */
#siteHeader .header-btn,
.side-link,
.hero,
.service-item,
.testimonials,
.team--wood .person,
.footer-box,
.elite-footer-section,
.about-text,
body {
  font-family: var(--font-body) !important;
}
/* === TYPO GLOBAL — DM Serif Text (titres) + Inter (texte) === */
:root{
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-heading: "DM Serif Text", ui-serif, Georgia, serif;
}

/* base */
html, body{ font-family: var(--font-body) !important; }
*{ font-family: inherit !important; }

/* titres partout (utilisent DM Serif Text) */
h1,h2,h3,h4,h5,h6,
.title, .tst-title, .services-head .title{
  font-family: var(--font-heading) !important;
  /* DM Serif Text n'a pas de bold → garder 400 et jouer sur taille/track */
  font-weight: 400 !important;
  letter-spacing: .005em;
  line-height: 1.12;
}

/* header + drawer = même look que les headings */
.hero-min-header .header-btn,
#sideNav .side-link,
#sideNav .side-nav__close{
  font-family: var(--font-heading) !important;
  font-weight: 400 !important;
  letter-spacing: .01em !important;
}

/* texte courant confortable */
p, li, .lead, .service-desc, .footer-subtext{
  font-family: var(--font-body) !important;
  font-weight: 400;
  letter-spacing: .003em;
  line-height: 1.6;
}

/* échelles (optionnel) */
h1{ font-size: clamp(2.4rem, 3.6vw + 1rem, 4.2rem); }
h2{ font-size: clamp(1.9rem, 2.4vw + .8rem, 2.8rem); }
h3{ font-size: clamp(1.25rem, 1.2vw + .6rem, 1.6rem); }
/* === HERO FULLSCREEN (colle en bas de hero.css) === */
:root{
  /* fallback si le JS ne s’exécute pas */
  --vh: 1vh;
}

.hero,
#hero{
  /* occupe 100% de la hauteur d’écran de façon fiable (iOS/Android/desktop) */
  height: calc(var(--vh, 1vh) * 100);
  min-height: 100svh;   /* nouveaux units “small viewport” */
  min-height: 100dvh;   /* fallback moderne (Chrome/Firefox/Safari récents) */
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* La vidéo couvre toute la zone */
.hero__video,
#hero video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* recadre, ne déforme pas */
  object-position: center;
}

/* (Si tu as un contenu texte dans le hero) centre-le proprement */
.hero__content{
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: inherit;
  padding: max(20px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}
/* Force Inter partout, sauf icônes & code */
*:not(i):not([class*="icon"]):not([class*="fa-"]):not(code):not(kbd):not(pre){
  font-family: var(--font-body) !important;
}

/* Si tu avais des variables de titres, on les aligne aussi */
h1,h2,h3,h4,h5,h6{ font-family: var(--font-body) !important; }
/* === TYPO UNIFIÉE — Inter partout (patch final) ===================== */

/* 1) Variables → on pointe les titres sur le body */
:root{
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-heading: var(--font-body);   /* <— titres = Inter aussi */
}

/* 2) Base : tout hérite de body */
html, body{ font-family: var(--font-body) !important; }
*{ font-family: inherit !important; }

/* 3) Exceptions : ne pas casser les bibliothèques d’icônes / code */
i,
[class*="icon"],
[class*="fa-"],
code,kbd,pre{ font-family: inherit !important; } /* si tu utilises une police d’icônes dédiée, enlève “inherit” ici */

/* 4) Composants qui forçaient une autre police → on uniformise */
h1,h2,h3,h4,h5,h6,
.title,
.services-head .title,
.tst-title,
.hero-min-header .header-btn,
.side-link,
#siteHeader .header-btn,
.team--wood .person,
.footer-box,
.elite-footer-section,
.service-title,
#services .lead,
#services .kicker,
#services .service-desc,
#testimonials,
#team,
#contact{
  font-family: var(--font-body) !important;
  font-weight: 400; /* ajuste localement à 500/600/700 si tu veux plus de présence */
}

/* 5) Quelques graisses par défaut pour garder le “punch” visuel */
h1,h2,.tst-title,.services-head .title{ font-weight: 700 !important; }
.hero-min-header .header-btn,
.side-link,
.person h3{ font-weight: 600 !important; }
/* === INTER GLOBAL HARD-LOCK === */
:root{
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* tout hérite d’Inter par défaut */
html, body { font-family: var(--font-body) !important; }

/* nuke global (sauf icônes/fa/code) */
:where(html, body) :not(svg):not(i):not([class*="icon"]):not([class*="fa-"]):not(code):not(kbd):not(pre){
  font-family: var(--font-body) !important;
}