/* ============================================
   VG NUISIBLES — Feuille de style principale
   vg-nuisibles.css
   
   À placer dans : /wp-content/themes/Divi/vg-nuisibles.css
   Ou à charger via Divi > Options > Intégration > Head
   ============================================ */

/* ============================================
   1. VARIABLES & TOKENS DESIGN
   ============================================ */
:root {
  /* Couleurs principales */
  --vg-primary: #07182E;
  --vg-primary-container: #1D2D44;
  --vg-secondary: #3E6A00;
  --vg-secondary-container: #B9F474;
  --vg-on-primary-fixed: #0B1C32;
  
  /* Surfaces */
  --vg-surface: #FBF9F8;
  --vg-surface-low: #F6F3F2;
  --vg-surface-container: #F0EDED;
  
  /* Textes */
  --vg-on-surface: #1B1C1C;
  --vg-on-surface-variant: #44474D;
  
  /* Typographie */
  --vg-font-headline: 'Plus Jakarta Sans', sans-serif;
  --vg-font-body: 'Inter', sans-serif;
  
  /* Espacement */
  --vg-section-padding: 80px;
  --vg-container-max: 1280px;
  
  /* Ombres */
  --vg-shadow-ambient: 0px 24px 48px rgba(7, 24, 46, 0.06);
  --vg-shadow-elevated: 0px 12px 40px rgba(7, 24, 46, 0.12);
}

/* ============================================
   2. BASE & RESET
   ============================================ */

/* Taille minimum texte corps — RGAA 10.2 */
body {
  font-size: 16px;
  font-family: var(--vg-font-body);
}

/* Titres */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--vg-font-headline);
}

/* ============================================
   3. MATERIAL ICONS
   ============================================ */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Icônes remplies (filled) */
.material-symbols-outlined.icon-filled,
.icon-filled .material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ============================================
   4. COMPOSANTS DESIGN SYSTEM
   ============================================ */

/* Gradient signature */
.signature-gradient,
.bg-gradient-signature,
.bg-clinical-gradient {
  background: linear-gradient(135deg, var(--vg-primary) 0%, var(--vg-primary-container) 100%);
}

/* Glassmorphism navigation */
.glass-nav {
  backdrop-filter: blur(12px);
  background-color: rgba(29, 45, 68, 0.9);
}

/* Ombres éditoriales */
.clinical-shadow,
.editorial-shadow {
  box-shadow: var(--vg-shadow-ambient);
}

/* ============================================
   5. HEADER / NAVIGATION
   ============================================ */

/* Menu items en majuscules */
[role="banner"] nav a,
[role="banner"] button,
#mobile-menu a {
  text-transform: uppercase;
}

/* ============================================
   6. RGAA — ACCESSIBILITÉ
   ============================================ */

/* 10.7 Focus visible pour navigation clavier */
*:focus-visible {
  outline: 3px solid #8BC34A;
  outline-offset: 2px;
}

/* 10.6 Liens cliquables identifiables
   Les liens doivent être distinguables du texte 
   autrement que par la couleur seule */

/* Liens dans le corps de texte : toujours soulignés */
.vg-page a:not([class*="btn"]):not([class*="button"]):not([class*="bg-"]):not([class*="rounded"]):not([role="button"]) {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.vg-page a:not([class*="btn"]):not([class*="button"]):not([class*="bg-"]):not([class*="rounded"]):not([role="button"]):hover {
  text-decoration-thickness: 2px;
}

/* Liens navigation : soulignés au hover/focus */
footer a,
[role="banner"] nav a {
  text-decoration: none;
}
footer a:hover, footer a:focus,
[role="banner"] nav a:hover, [role="banner"] nav a:focus {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* "En savoir plus" et liens texte accent */
a[href*="savoir"], a.text-secondary {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: currentColor;
}

/* Boutons CTA : pas de soulignement (identifiables par forme/fond) */
a[class*="bg-secondary-container"],
a[class*="rounded-lg"][class*="font-bold"],
button, [role="button"],
a[class*="rounded-full"],
a.no-underline,
.no-underline {
  text-decoration: none !important;
}

/* Footer : liens services */
footer ul a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s;
}
footer ul a:hover, footer ul a:focus {
  text-decoration-color: currentColor;
}

/* Liens téléphone et email : toujours soulignés */
a[href^="tel:"], a[href^="mailto:"] {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================
   7. DIVI — Override padding parasite
   ============================================ */
.et_pb_code_inner {
  padding: 0 !important;
}
.vg-page .et_pb_row {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}
.vg-page .et_pb_section {
  padding: 0 !important;
}
.vg-page .et_pb_column {
  padding: 0 !important;
}

/* ============================================
   8. RESPONSIVE DESIGN
   ============================================ */

/* Tablette */
@media (max-width: 768px) {
  .vg-page h1 {
    font-size: 2rem !important;
  }
  .vg-page h2 {
    font-size: 1.5rem !important;
  }
  .vg-page section {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  /* Grilles → 1 colonne */
  .vg-page .grid-cols-2,
  .vg-page .grid-cols-4 {
    grid-template-columns: 1fr !important;
  }
  /* Images adaptatives */
  .vg-page img {
    max-width: 100% !important;
    height: auto !important;
  }
  /* Boutons CTA pleine largeur */
  .vg-page a[role="button"],
  .vg-page button {
    width: 100% !important;
    text-align: center !important;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .vg-page h1 {
    font-size: 1.75rem !important;
  }
}

/* ============================================
   9. DIVI THEME OVERRIDES — Couleurs texte
   
   Divi applique ses propres couleurs sur h1-h6, p, a
   qui écrasent les classes Tailwind.
   
   STRATÉGIE: cibler uniquement les éléments DIRECTS
   des sections sombres, PAS ceux dans des sous-containers
   clairs (cards, badges, boutons).
   ============================================ */

/* --- Classe text-white : toujours prioritaire --- */
.text-white { color: #FFFFFF !important; }
.text-slate-200 { color: #E2E8F0 !important; }
.text-slate-300 { color: #CBD5E1 !important; }
.text-slate-400 { color: #94A3B8 !important; }
.text-slate-500 { color: #64748B !important; }
.text-primary { color: #07182E !important; }
.text-secondary { color: #3E6A00 !important; }
.text-secondary-fixed { color: #B9F474 !important; }
.text-on-primary-container { color: #C8D0E0 !important; }
.text-on-surface-variant { color: #44474D !important; }
.text-on-primary-fixed { color: #0B1C32 !important; }

/* --- Sections sombres: H1 et H2 en blanc --- */
.signature-gradient > div > div > h1,
.signature-gradient > div > div > h2,
[class*="from-primary"] > div > div > h1,
[class*="from-primary"] > div > div > h2,
.bg-primary-container > div > div > h1,
.bg-primary-container > div > h1,
header[class*="bg-gradient"] h1 {
  color: #FFFFFF !important;
}

/* --- Sections claires: titres en bleu marine --- */
.bg-surface h2,
.bg-surface h3,
.bg-surface-container-low h2,
.bg-surface-container-low h3 {
  color: #07182E !important;
}

.bg-surface p,
.bg-surface-container-low p {
  color: #44474D !important;
}

/* --- Boutons verts: texte TOUJOURS sombre --- */
.bg-secondary-container {
  color: #0B1C32 !important;
}
.bg-secondary-container span,
.bg-secondary-container p,
a.bg-secondary-container,
button.bg-secondary-container {
  color: #0B1C32 !important;
}

/* --- Cards/badges blancs DANS sections sombres: texte sombre --- */
.bg-surface-container-lowest p,
.bg-surface-container-lowest span,
.bg-surface-container-lowest h3,
.bg-surface-container-lowest h4 {
  color: inherit;
}

/* ============================================
   11. DARK SECTION PRICING CARDS OVERRIDES
   Force visibility for pricing text in dark cards
   ============================================ */

/* Text inside dark cards (bg-primary) */
.bg-primary p,
.bg-primary span,
.bg-primary div,
.bg-primary h3,
.bg-primary li,
.bg-primary-container p,
.bg-primary-container span {
  color: #FFFFFF !important;
}

/* But NOT for light sub-elements inside dark cards */
.bg-primary .bg-surface-container-lowest p,
.bg-primary .bg-white p,
.bg-primary .bg-secondary-container span {
  color: #0B1C32 !important;
}

/* Icon materials in dark sections */
.bg-primary .material-symbols-outlined,
.bg-primary-container .material-symbols-outlined,
[class*="from-primary"] .material-symbols-outlined {
  color: #B9F474 !important;
}

/* But not in light sub-containers */
.bg-surface-container-lowest .material-symbols-outlined,
.bg-surface .material-symbols-outlined {
  color: inherit;
}

/* ============================================
   12. CONTACT FORM 7 — Styling
   ============================================ */

/* Champs de saisie CF7 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100% !important;
  padding: 16px 20px !important;
  background: #F6F3F2 !important;
  border: 1px solid #E4E2E1 !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  color: #1B1C1C !important;
  font-family: 'Inter', sans-serif !important;
  transition: border-color 0.2s !important;
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  border-color: #3E6A00 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(62, 106, 0, 0.1) !important;
}

.wpcf7 textarea {
  min-height: 140px !important;
  resize: vertical !important;
}

/* Labels CF7 */
.wpcf7 label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #44474D !important;
  margin-bottom: 6px !important;
}

/* Bouton submit CF7 */
.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit {
  width: 100% !important;
  padding: 18px 20px !important;
  background: #3E6A00 !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  cursor: pointer !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  box-shadow: 0 4px 12px rgba(62, 106, 0, 0.3) !important;
}

.wpcf7 input[type="submit"]:hover {
  transform: scale(1.02) !important;
  box-shadow: 0 6px 20px rgba(62, 106, 0, 0.4) !important;
}

/* Checkbox RGPD */
.wpcf7 .wpcf7-acceptance {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

.wpcf7 .wpcf7-acceptance input[type="checkbox"] {
  width: auto !important;
  margin-top: 4px !important;
}

/* Espacement entre les champs */
.wpcf7 p,
.wpcf7 .wpcf7-form-control-wrap {
  margin-bottom: 16px !important;
}

/* Message de confirmation */
.wpcf7-response-output {
  border: none !important;
  background: #B9F474 !important;
  color: #0B1C32 !important;
  padding: 16px 20px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  margin-top: 16px !important;
}

/* Message d'erreur */
.wpcf7-not-valid-tip {
  color: #ba1a1a !important;
  font-size: 13px !important;
  margin-top: 4px !important;
}

/* Select dropdown */
.wpcf7 select {
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2344474D' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
}

/* ============================================
   10. MOBILE — Centrage & lisibilité
   
   Sur smartphone (<768px), l'image de droite du 
   hero passe en dessous ou disparaît. Le texte 
   seul à gauche paraît mal équilibré.
   On le centre pour un rendu plus harmonieux.
   ============================================ */

@media (max-width: 768px) {
  
  /* Hero des pages services : centrer H1 + paragraphe + badges */
  .vg-page header h1,
  .vg-page header p,
  .vg-page section:first-of-type h1,
  .vg-page section:first-of-type p:not(.text-xs):not(.text-\[10px\]) {
    text-align: center !important;
  }
  
  /* Badges "Désinsectisation Spécialisée", "Expertise Certifiée", etc. 
     au-dessus des H1 : centrés */
  .vg-page header > div > div > span.inline-block,
  .vg-page header > div > div > span.inline-flex,
  .vg-page section:first-of-type span.inline-flex[class*="rounded-full"] {
    margin-left: auto !important;
    margin-right: auto !important;
    display: inline-flex !important;
  }
  
  /* Conteneurs de CTA (boutons) dans le hero : centrer */
  .vg-page header .flex.flex-col,
  .vg-page header .flex.flex-wrap,
  .vg-page section:first-of-type .flex.flex-col.sm\:flex-row,
  .vg-page section:first-of-type .flex.flex-wrap {
    justify-content: center !important;
    align-items: center !important;
  }
  
  /* Paragraphes avec max-w : centrer sur mobile */
  .vg-page p[class*="max-w-"],
  .vg-page h2[class*="max-w-"] {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* Sections "Faites appel à un professionnel" etc. :
     quand il y a une image à droite qui passe en dessous,
     centrer le bloc texte */
  .vg-page .grid.lg\:grid-cols-12 > div:first-child > div > h2,
  .vg-page .grid.lg\:grid-cols-12 > div:first-child > div > p {
    text-align: center !important;
  }
  
  /* Divider (ligne décorative sous les H2) : centrer */
  .vg-page .inline-block.w-10.h-1 {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }
  
  /* Cartes de la section "Autres services" : padding réduit mobile */
  .vg-page a.group.bg-surface-container-lowest {
    text-align: center !important;
  }
  .vg-page a.group.bg-surface-container-lowest > div:first-child {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .vg-page a.group.bg-surface-container-lowest > span.inline-flex {
    justify-content: center !important;
  }
  
  /* Encart Certibiocide en hero (accueil, frelons) : recentré */
  .vg-page .absolute.-bottom-8.-left-8,
  .vg-page .absolute.-bottom-6.-left-6 {
    position: static !important;
    margin-top: 1rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 300px !important;
  }
  
  /* Réduire les paddings excessifs en mobile pour mieux centrer */
  .vg-page section.py-24,
  .vg-page section.py-32 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

/* ============================================
   11. MOBILE — Très petits écrans (<480px)
   ============================================ */

@media (max-width: 480px) {
  
  /* Boutons CTA : empilés verticalement et pleine largeur */
  .vg-page header .flex.flex-col.sm\:flex-row > a,
  .vg-page .flex.flex-col.sm\:flex-row > a[role="button"] {
    width: 100% !important;
    justify-content: center !important;
  }
  
  /* Réduire padding horizontal interne sur petits écrans */
  .vg-page section {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Cartes et encarts : padding réduit pour éviter débordements */
  .vg-page [class*="p-8"],
  .vg-page [class*="p-10"],
  .vg-page [class*="p-12"] {
    padding: 1.5rem !important;
  }
}