/*
Theme Name: Voltaix Child
Theme URI: https://voltaix.fr/
Template: hello-elementor
Author: Voltaix
Description: Thème enfant Hello Elementor pour le projet Voltaix.
Version: 1.0.8
License: GNU General Public License v2 or later
Text Domain: voltaix-child
*/

/* ═══════════════════════════════════════════════════════
   OVERRIDE Hello Elementor — Full-width .site-main
   Hello Elementor plafonne .site-main à 1140px sur desktop.
   On force full-width pour laisser respirer les conteneurs Voltaïx.
   ═══════════════════════════════════════════════════════ */
body:not([class*=elementor-page-]) .site-main,
body .site-main,
.site-main,
#primary {
  max-width: 100% !important;
  width: 100% !important;
  padding-inline-start: 0 !important;
  padding-inline-end: 0 !important;
}

@media (min-width: 576px) {
  body:not([class*=elementor-page-]) .site-main {
    max-width: 100% !important;
  }
}
@media (min-width: 768px) {
  body:not([class*=elementor-page-]) .site-main {
    max-width: 100% !important;
  }
}
@media (min-width: 992px) {
  body:not([class*=elementor-page-]) .site-main {
    max-width: 100% !important;
  }
}
@media (min-width: 1200px) {
  body:not([class*=elementor-page-]) .site-main {
    max-width: 100% !important;
  }
}



/* ─── Safety SVG : empêche les SVG sans width/height de s'afficher en taille naturelle ─── */
.b04-hero-eyebrow svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
}

.b04-hero-bullets li svg {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0;
}

.b04-trust-icons svg {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0;
}

.b05-trust-icon svg {
    width: 26px !important;
    height: 26px !important;
}

.b04-cta-arrow {
    width: 18px !important;
    height: 18px !important;
}




/* ─── Fix B02 mobile v5 (final) ─── */
@media (max-width: 860px){
  .b02-nav-container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  /* Burger override Hello Elementor */
  .b02-mobile-toggle {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    color: var(--b02-navy, #1E2D3F) !important;
    padding: 6px !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
  }
  .b02-mobile-toggle:hover,
  .b02-mobile-toggle:focus,
  .b02-mobile-toggle:active {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--b02-orange, #F5A623) !important;
    outline: none !important;
  }
  /* Le right NE doit PAS avoir flex-shrink:0 sinon il déborde */
  .b02-nav-right {
    gap: 6px !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
    overflow: visible;
  }
}

/* En-dessous de 600px : on cache complètement le CTA "Demander un devis" */
@media (max-width: 600px){
  .b02-btn-primary {
    display: none !important;
  }
  .b02-nav-tel {
    flex-shrink: 0 !important;
  }
}

@media (max-width: 430px){
  .b02-logo svg {
    max-width: 130px !important;
    width: auto !important;
    height: auto !important;
  }
  .b02-nav-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}


/* ─── HARMONISATION DESKTOP V2 — Containers plus larges ─── */

.b02-nav-container,
  .b05-trust-container,
  .b07-container,
  .b18-footer-container {
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100%;
}

/* Très grand écran (>1600px) : padding très généreux */
@media (min-width: 1601px){
  .b02-nav-container,
  .b05-trust-container,
  .b07-container,
  .b18-footer-container {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
}

/* Grand écran standard (1281-1600px) */
@media (min-width: 1281px) and (max-width: 1600px){
  .b02-nav-container,
  .b05-trust-container,
  .b07-container,
  .b18-footer-container {
    padding-left: 56px !important;
    padding-right: 56px !important;
  }
}

/* Laptop (861-1280px) */
@media (min-width: 861px) and (max-width: 1280px){
  .b02-nav-container,
  .b05-trust-container,
  .b07-container,
  .b18-footer-container {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

/* Espacement vertical harmonisé entre blocs (desktop) */
@media (min-width: 861px){
  .b04-hero {
    padding-top: 44px !important;
    padding-bottom: 56px !important;
  }
  .b05-trust {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .b07-how {
    padding-top: 104px !important;
    padding-bottom: 120px !important;
  }
}

/* ─── Hero B04 : 100% de l'écran avec padding intérieur généreux ─── */
.b04-hero-container {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}

@media (min-width: 1601px){
  .b04-hero-container {
    padding-left: 120px !important;
    padding-right: 120px !important;
  }
}
@media (min-width: 1281px) and (max-width: 1600px){
  .b04-hero-container {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
}
@media (min-width: 861px) and (max-width: 1280px){
  .b04-hero-container {
    padding-left: 56px !important;
    padding-right: 56px !important;
  }
}

/* ─── Fix B04 photos mobile DÉFINITIF ─── */
.b04-hero-visuals {
  width: 100%;
  display: block;
}

@media (max-width: 1000px){
  .b04-hero-grid {
    grid-template-columns: 1fr !important;
  }
  .b04-hero-visuals {
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    height: 480px !important;
    position: relative !important;
    display: block !important;
    aspect-ratio: auto !important;
  }
  .b04-bubble-main,
  .b04-bubble-sec {
    aspect-ratio: auto !important;
  }
}

@media (max-width: 640px){
  .b04-hero-visuals {
    height: 420px !important;
  }
  .b04-bubble-main {
    width: 78% !important;
    height: 320px !important;
    top: 20px !important;
    right: 0 !important;
  }
  .b04-bubble-sec {
    width: 48% !important;
    height: 200px !important;
    bottom: 0 !important;
    left: 0 !important;
  }
}

@media (max-width: 430px){
  .b04-hero-visuals {
    height: 360px !important;
  }
  .b04-bubble-main {
    height: 280px !important;
  }
  .b04-bubble-sec {
    height: 170px !important;
  }
}

/* ═══════════════════════════════════════════════════════
   FORCE FULL-WIDTH desktop — Voltaix B04 → B11
   Écrase tous les wrappers plafonnés (Hello Elementor, grids internes, etc.)
   ═══════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
  /* Conteneurs principaux : full-width sans limite */
  .b02-nav-container,
  .b04-hero-container,
  .b05-trust-container,
  .b06-container,
  .b07-container,
  .b08-container,
  .b11-container,
  .b18-footer-container {
    max-width: none !important;
    width: 100% !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  /* B04 Hero — étirer les 2 colonnes internes */
  .b04-hero-grid {
    grid-template-columns: 1.05fr 1fr !important;
    gap: 80px !important;
    align-items: center !important;
  }
  .b04-hero-content {
    max-width: 760px !important;  /* limite lisibilité texte */
  }
  .b04-hero-visuals {
    max-width: none !important;
    width: 100% !important;
  }

  /* B09 FAQ : on garde une largeur lisible mais alignée */
  .b09-container {
    max-width: 1100px !important;
  }
}

/* Très grands écrans 1600px+ : un poil de respiration */
@media (min-width: 1600px) {
  .b02-nav-container,
  .b04-hero-container,
  .b05-trust-container,
  .b06-container,
  .b07-container,
  .b08-container,
  .b11-container,
  .b18-footer-container {
    padding-left: 64px !important;
    padding-right: 64px !important;
  }
}

/* ===== FULLWIDTH-V1 — Système de largeurs unifié ===== */
/* Conteneurs LARGES (grilles, photo+texte) : 1600px */
.b05-trust-container,
.b06-container,
.b07-container,
.b08-container,
.b09-container,
.b10-container,
.b11-container,
.b12-container,
.b18-footer-container,
.b02-nav-container {
  max-width: 1600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* Zones de TEXTE PUR : restent lisibles (centrées, étroites) */
.b06-content,
.b08-header,
.b09-header,
.b10-header,
.b11-header,
.b12-header {
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Padding latéral responsive unifié sur tous les conteneurs larges */
@media (min-width: 1601px){
  .b05-trust-container,.b06-container,.b07-container,.b08-container,
  .b09-container,.b10-container,.b11-container,.b12-container,
  .b18-footer-container,.b02-nav-container {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
}
@media (min-width: 1025px) and (max-width: 1600px){
  .b05-trust-container,.b06-container,.b07-container,.b08-container,
  .b09-container,.b10-container,.b11-container,.b12-container,
  .b18-footer-container,.b02-nav-container {
    padding-left: 56px !important;
    padding-right: 56px !important;
  }
}
@media (min-width: 641px) and (max-width: 1024px){
  .b05-trust-container,.b06-container,.b07-container,.b08-container,
  .b09-container,.b10-container,.b11-container,.b12-container,
  .b18-footer-container,.b02-nav-container {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}
@media (max-width: 640px){
  .b05-trust-container,.b06-container,.b07-container,.b08-container,
  .b09-container,.b10-container,.b11-container,.b12-container,
  .b18-footer-container,.b02-nav-container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}
/* ===== /FULLWIDTH-V1 ===== */

/* ===== SITE-MAIN FULLWIDTH FIX V2 (bat Hello Elementor theme.css) ===== */
body .site-main,
body:not([class*="elementor-page-"]) .site-main,
html body main.site-main {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* ===== /SITE-MAIN FULLWIDTH FIX V2 ===== */

/* ============================================================
   FIX GLOBAL — neutralisation pollution Hello Elementor
   (reset parent : background #c36 + white-space:nowrap sur
   button, ecrasement padding/border des inputs). Une fois
   pour toutes — ne plus patcher bloc par bloc.
   ============================================================ */
button,
input[type="button"],
input[type="submit"]{
	background-color:transparent;
	color:inherit;
	border:none;
	white-space:normal;
}
button:hover,button:focus,
input[type="button"]:hover,input[type="button"]:focus,
input[type="submit"]:hover,input[type="submit"]:focus{
	background-color:transparent;
	color:inherit;
}

/* FIX GLOBAL v2 — Hello Elementor charge apres le theme enfant,
   le !important est requis (meme raison que les patchs par bloc) */
button,
input[type="button"],
input[type="submit"]{
	background-color:transparent !important;
	color:inherit !important;
	border:none !important;
	white-space:normal !important;
}
button:hover,button:focus,
input[type="button"]:hover,input[type="button"]:focus,
input[type="submit"]:hover,input[type="submit"]:focus{
	background-color:transparent !important;
	color:inherit !important;
}