/* ================================================================
   GRID LIGHT — Papier millimétré sur fond gris clair
   v2.3 : Petits carreaux 14px @ 0.75%, grands carreaux 70px @ 2%
   Appliqué à : Contact, Blog accueil, Articles de blog
   ================================================================ */

/* ===== FOND GRILLE LIGHT ===== */
/* Appliqué uniquement aux sections à fond blanc/clair.
   Le body reste dark (nav + footer dark), donc on cible les sections. */

/* Variable pour réutiliser le fond grille light */
.contact-section,
.article,
.article-carousel,
.article-cta-form,
.article-gallery,
.blog-main,
.legal-page,
.contact-section ~ .cta-section,
.blog-main ~ .cta-section {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 13px, rgba(0,0,0,0.0075) 13px, rgba(0,0,0,0.0075) 14px),
    repeating-linear-gradient(90deg, transparent, transparent 13px, rgba(0,0,0,0.0075) 13px, rgba(0,0,0,0.0075) 14px),
    repeating-linear-gradient(0deg, transparent, transparent 69px, rgba(0,0,0,0.02) 69px, rgba(0,0,0,0.02) 70px),
    repeating-linear-gradient(90deg, transparent, transparent 69px, rgba(0,0,0,0.02) 69px, rgba(0,0,0,0.02) 70px),
    #f3f3f3 !important;
  background-attachment: fixed !important;
  color: #1a1a1a;
}

/* ===== TUILES CONTACT : contraste renforcé ===== */
.contact-detail {
  background: #fff !important;
  border: 2px solid #d8d8d8 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.contact-detail:hover {
  border-color: rgba(255,128,62,0.5) !important;
  box-shadow: 0 8px 30px rgba(255,128,62,0.12);
}
.contact-detail-icon {
  background: rgba(255,128,62,0.14) !important;
  box-shadow: 0 2px 8px rgba(255,128,62,0.08);
}
.contact-detail h4 { color: #111 !important; }
.contact-detail p { color: #555 !important; }

/* ===== FORM WRAP (style défini dans contact.css — blanc + liseré) ===== */
.contact-form-wrap h3 { color: #111 !important; }

.form-group input,
.form-group textarea,
.form-group select {
  background: #fafafa !important;
  border: 2px solid #d0d0d0 !important;
  color: #1a1a1a !important;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px rgba(255,128,62,0.12) !important;
  background: #fff !important;
}
.form-group label { color: #777 !important; }

/* ===== CTA BOX sur pages light : clair au repos → coloré au hover (inversé) ===== */
.contact-section ~ .cta-section .cta-box,
.blog-main ~ .cta-section .cta-box {
  background: #fff !important;
  border: 2px solid #d8d8d8 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  color: #1a1a1a;
  transition: border-color 0.4s, box-shadow 0.4s, background 0.4s;
}
/* CTA light version — INVERSÉE : clair/pâle au repos → couleurs vives au hover */
/* Override l'image de fond héritée de components.css (pas d'image sur light), on garde juste l'overlay blanc */
.contact-section ~ .cta-section .cta-box,
.blog-main ~ .cta-section .cta-box {
  background: url('../assets/images/shared/cta-gradient.jpg') center/140% no-repeat, #fff !important;
  background-clip: padding-box !important;
}
/* Overlay BLANC au repos (couvre presque tout) → transparent au hover pour révéler les couleurs */
.contact-section ~ .cta-section .cta-box::before,
.blog-main ~ .cta-section .cta-box::before {
  background: rgba(255,255,255,1) !important;
  opacity: 0.88 !important;
  filter: none !important;
  animation: none !important;
}
.contact-section ~ .cta-section .cta-box:hover::before,
.blog-main ~ .cta-section .cta-box:hover::before {
  opacity: 0.28 !important;
}
/* Hover : liseré orange + halo */
.contact-section ~ .cta-section .cta-box:hover,
.blog-main ~ .cta-section .cta-box:hover {
  border-color: rgba(255,128,62,0.5) !important;
  box-shadow: 0 0 40px rgba(255,128,62,0.15), 0 8px 30px rgba(0,0,0,0.08) !important;
}
/* Texte : noir au repos, noir profond/bold au hover (mieux lisible sur couleurs) */
.contact-section ~ .cta-section .cta-box h2,
.blog-main ~ .cta-section .cta-box h2 {
  color: #111 !important;
  text-shadow: 0 1px 2px rgba(255,255,255,0.5) !important;
  transition: text-shadow 0.5s ease, color 0.5s ease;
}
.contact-section ~ .cta-section .cta-box:hover h2,
.blog-main ~ .cta-section .cta-box:hover h2 {
  color: #000 !important;
  text-shadow: 0 1px 3px rgba(255,255,255,0.85), 0 0 8px rgba(255,255,255,0.6) !important;
}
.contact-section ~ .cta-section .cta-box p,
.blog-main ~ .cta-section .cta-box p {
  color: #555 !important;
  text-shadow: 0 1px 2px rgba(255,255,255,0.4) !important;
  transition: text-shadow 0.5s ease, color 0.5s ease;
}
.contact-section ~ .cta-section .cta-box:hover p,
.blog-main ~ .cta-section .cta-box:hover p {
  color: #000 !important;
  text-shadow: 0 1px 6px rgba(255,255,255,0.85), 0 0 8px rgba(255,255,255,0.6) !important;
}
.contact-section ~ .cta-section .cta-box .cta-hand,
.blog-main ~ .cta-section .cta-box .cta-hand {
  color: var(--orange) !important;
  text-shadow: 0 1px 2px rgba(255,255,255,0.5) !important;
  transition: text-shadow 0.5s ease, color 0.5s ease;
}
.contact-section ~ .cta-section .cta-box:hover .cta-hand,
.blog-main ~ .cta-section .cta-box:hover .cta-hand {
  color: #000 !important;
  text-shadow: 0 1px 6px rgba(255,255,255,0.85), 0 0 8px rgba(255,255,255,0.6) !important;
}
/* Boutons outline sur fond clair */
.contact-section ~ .cta-section .btn-outline,
.blog-main ~ .cta-section .btn-outline {
  border-color: #ccc !important; color: #333 !important;
  transition: border-color 0.5s ease, color 0.5s ease, background 0.4s, transform 0.4s, box-shadow 0.4s !important;
}
/* Quand la CTA box est survolée, le bouton outline devient noir pour rester lisible sur les couleurs vives */
.contact-section ~ .cta-section .cta-box:hover .btn-outline,
.blog-main ~ .cta-section .cta-box:hover .btn-outline {
  border-color: rgba(0,0,0,0.85) !important;
  color: #000 !important;
}
/* Le bouton lui-même survolé garde la priorité orange */
.contact-section ~ .cta-section .cta-box:hover .btn-outline:hover,
.blog-main ~ .cta-section .cta-box:hover .btn-outline:hover,
.contact-section ~ .cta-section .btn-outline:hover,
.blog-main ~ .cta-section .btn-outline:hover {
  border-color: var(--orange) !important; color: var(--orange) !important;
}
.contact-section ~ .cta-section .sketch-underline::after,
.blog-main ~ .cta-section .sketch-underline::after { opacity: 0.7; }

/* ===== BLOG OVERRIDES : article body sur grille light ===== */
.article .blog-stats {
  background: var(--black); color: var(--white);
}
.article .blog-cta {
  background: #fff; border: 2px solid #d8d8d8;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.article .blog-phase {
  background: #fff; border-left: 3px solid;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.article blockquote {
  background: #fff;
}