/* =========================================================
   Transfert Child — styles.css (GLOBAL / TRONC COMMUN)
   ✅ Tokens + Reset + Accessibilité + Forms
   ✅ Background global
   ✅ Containers + helpers WP
   ✅ Utilitaires réutilisables
   ✅ Air aux extrémités: padding latéral (gutter) robuste
   ✅ AUCUN hide de .topbar__right ici (uniquement header.css gère le header)
   ========================================================= */

/* -------------------------
   0) TOKENS (SITE-WIDE)
-------------------------- */
:root{
  /* Background global */
  --bg1: #070A12;
  --bg2: #0A1020;

  /* Surfaces */
  --surface: rgba(255,255,255,.06);
  --surface2: rgba(255,255,255,.05);
  --stroke: rgba(255,255,255,.12);
  --stroke2: rgba(255,255,255,.10);

  /* Text */
  --text: rgba(255,255,255,1);
  --muted: rgba(255,255,255,.78);
  --muted2: rgba(255,255,255,.66);

  /* Accents */
  --accent:  #7C5CFF;
  --accent2: #2EE9A6;
  --accent3: #00D1FF;

  /* Shadows */
  --shadow:  0 18px 60px rgba(0,0,0,.45);
  --shadow2: 0 12px 35px rgba(0,0,0,.35);

  /* Radius */
  --r10: 10px;
  --r12: 12px;
  --r14: 14px;
  --r16: 16px;
  --r22: 22px;
  --r26: 26px;
  --r28: 28px;

  /* Layout */
  --container: 1600px;

  /* ✅ Air global sur les côtés */
  --gutter: 48px;

  --lh: 1.5;

  /* Focus */
  --focus: rgba(0,209,255,.45);

  /* Footer edge */
  --edge: clamp(14px, 3vw, 28px);
}

/* Responsive gutter (GLOBAL) */
@media (max-width: 1100px){
  :root{ --gutter: 32px; }
}
@media (max-width: 760px){
  :root{ --gutter: 28px; }
}

/* -------------------------
   1) RESET / BASE
-------------------------- */
*,
*::before,
*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  color: var(--text);
  line-height: var(--lh);
  overflow-x:hidden;
  letter-spacing: .2px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  background:
    radial-gradient(1200px 650px at 20% 10%, rgba(124,92,255,.35), transparent 60%),
    radial-gradient(900px 500px at 85% 15%, rgba(0,209,255,.22), transparent 55%),
    radial-gradient(800px 500px at 70% 85%, rgba(46,233,166,.16), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

/* Media */
img{ max-width:100%; height:auto; display:block; }

/* Links */
a{ color:inherit; text-decoration:none; }

/* Forms */
button{ font: inherit; }
button, input, select, textarea{ color:inherit; font:inherit; }

:where(input, select, textarea){
  border-radius: var(--r14);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  outline:none;
}

:where(a, button, input, select, textarea):focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r10);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
  *{ transition:none !important; animation:none !important; }
}

/* -------------------------
   2) TYPO GLOBAL (H1/H2/H3 COLORS)
-------------------------- */
h1{ color: #bddee7 !important; }
h2{ color: #c45831 !important; }
h3{ color: #23b0ff !important; }

.entry-content h1{ color: #bddee7 !important; }
.entry-content h2{ color: #c45831 !important; }
.entry-content h3{ color: #23b0ff !important; }

.vc_row h1{ color: #bddee7 !important; }
.vc_row h2{ color: #c45831 !important; }
.vc_row h3{ color: #23b0ff !important; }

/* -------------------------
   3) CONTAINERS / WP HELPERS
   ✅ Air aux extrémités via padding latéral (robuste)
-------------------------- */
.tr-container,
.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  box-sizing: border-box;
}

.entry-content,
.wp-site-blocks{ color: var(--text); }

.wp-block-image img{ border-radius: 18px; }

.alignwide{
  width: 100%;
  max-width: var(--container);
  margin-left:auto;
  margin-right:auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.alignfull{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* -------------------------
   4) UTILITAIRES REUTILISABLES
-------------------------- */
.muted{ color: var(--muted); }
.muted2{ color: var(--muted2); }

.grad{
  background: linear-gradient(135deg,
    rgba(46,233,166,1),
    rgba(0,209,255,1),
    rgba(124,92,255,1)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.glass{
  background: var(--surface);
  border: 1px solid var(--stroke2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow2);
}

.card{
  background: var(--surface2);
  border: 1px solid var(--stroke2);
  border-radius: var(--r22);
}

.divider{
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
}

/* -------------------------
   5) (IMPORTANT) Pas de règles header ici
   -> header.css gère tout le header (dont .topbar__right)
-------------------------- */

/* ===================================================================
   Scroll to top button
   =================================================================== */
.scrollToTop{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);
  z-index: 99999;

  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease, background .18s ease;
}

.scrollToTop:hover{ background: rgba(255,255,255,.09); }

.scrollToTop i{
  font-size: 18px;
  line-height: 1;
}

/* certains thèmes ajoutent un padding-top */
body.cspt-sidebar-no #content{ padding-top: 0px !important; }
@media (max-width: 760px){
  body.cspt-sidebar-no #content{ padding-top: 0px !important; }
}

/* =========================================================
   FIX FOOTER — marges/padding
   ========================================================= */
footer.footer2026{ width: 100%; overflow-x: hidden; }

footer.footer2026 > .tr-container,
footer.footer2026 .tr-container{
  padding-left: var(--edge) !important;
  padding-right: var(--edge) !important;
  box-sizing: border-box;
}

footer.footer2026 .tr-container{
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

footer.footer2026 .footerBottom_left,
footer.footer2026 .footerBottom_right{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ✅ Anti-scroll horizontal global (WordPress builders safe) */
html, body { max-width: 100%; overflow-x: hidden; }

#page, .site, #content, .cspt-page-content-wrapper {
  max-width: 100%;
  overflow-x: hidden;
}

.vc_row,
.vc_section,
.vc_row[data-vc-full-width="true"]{
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow: clip){
  .vc_row,
  .vc_section,
  .vc_row[data-vc-full-width="true"]{
    overflow-x: hidden;
  }
}