/* =====================================================================================
   site-chrome.css — CSS COMMUN du "chrome" du site ajsolar.fr
   = topbar (bandeau noir du haut) + barre de menu + menu hamburger mobile + footer.
   -------------------------------------------------------------------------------------
   Créé le 08/09/2026 (centralisation header/footer).
   - Le HTML correspondant vit dans includes/header.php et includes/footer.php.
   - Chargé par TOUTES les pages via <link> placé juste avant </head>, donc APRÈS le
     <style> propre à chaque page : à spécificité égale la DERNIÈRE règle gagne, ce fichier
     fait donc référence. Ne pas recopier ces règles dans une page.
   - nginx met les .css en cache 30 jours → après toute modif, incrémenter le ?v=AAAAMMJJ
     dans les pages (sinon les visiteurs gardent l'ancienne version).
   - Les variables (--yellow, --dark...) sont définies dans le :root de chaque page ; on les
     redéclare ici en secours au cas où une page ne les aurait pas.
   ===================================================================================== */

:root{--yellow:#FDB913;--dark:#1a1a1a;--blue:#4A90D9;--blue2:#5BA0E0;--light:#f5f5f5;--white:#fff;--gray:#666;--radius:12px}

/* Liens accentués (jaune) utilisés dans la topbar, le footer et certains contenus */
.link-accent{color:var(--yellow)}
.link-accent-bold{color:var(--yellow);font-weight:600}

/* ---------- TOPBAR : logo + zone d'intervention + téléphone + boutons Connexion / Ambassadeur ---------- */
.topbar{background:var(--dark);color:var(--white);font-size:.85rem;padding:8px 0}
.topbar .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.topbar .nav-logo{flex-shrink:0;margin-right:12px}
.topbar .nav-logo img{height:36px;width:auto}
.topbar-left{display:flex;align-items:center;gap:6px}
.topbar-left svg{width:16px;height:16px;fill:var(--yellow)}
.topbar-phone-icon{margin-left:12px}
.topbar-right{display:flex;align-items:center;gap:12px}
.topbar-right a{color:var(--white);transition:color .3s}
.topbar-right a:hover{color:var(--yellow)}
.topbar-right svg{width:20px;height:20px;fill:currentColor}
.topbar-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 14px;border-radius:20px;font-size:.78rem;font-weight:600;border:1px solid rgba(255,255,255,.3);white-space:nowrap;transition:all .3s}
.topbar-btn:hover{border-color:var(--yellow);color:var(--yellow)}
.topbar-btn svg{width:14px;height:14px}
.topbar-btn-ambassador{background:var(--yellow);color:var(--dark);border-color:var(--yellow)}
.topbar-btn-ambassador:hover{background:#e5a711;color:var(--dark);border-color:#e5a711}

/* ---------- NAVBAR : barre de menu collante (sticky) ---------- */
.navbar{background:var(--dark);position:sticky;top:0;z-index:100;padding:6px 0;box-shadow:0 2px 12px rgba(0,0,0,.3)}
.navbar .container{display:flex;justify-content:space-between;align-items:center}
.nav-links{display:flex;align-items:center;gap:14px}
.nav-links a{color:var(--white);font-weight:500;font-size:.88rem;transition:color .3s;position:relative;white-space:nowrap}
.nav-links a:hover,.nav-links a.active{color:var(--yellow)}
/* Bouton téléphone jaune à droite du menu (masqué en mobile, la topbar garde le numéro) */
.nav-cta{background:var(--yellow);color:var(--dark);padding:10px 24px;border-radius:30px;font-weight:700;display:flex;align-items:center;gap:8px;transition:transform .3s,box-shadow .3s;white-space:nowrap}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(253,185,19,.4)}
.nav-cta svg{width:18px;height:18px;fill:var(--dark)}
/* Bouton hamburger : caché sur desktop, affiché en mobile */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:none;border:none}
.hamburger span{width:26px;height:3px;background:var(--white);border-radius:2px;transition:transform .3s,opacity .3s}

/* ---------- FOOTER ---------- */
.footer{background:var(--dark);color:var(--white);padding:60px 0 30px}
.footer-content{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-bottom:40px}
.footer h2{font-size:1.8rem;font-weight:800;margin-bottom:20px}
.footer p{color:rgba(255,255,255,.8);line-height:1.7;margin-bottom:16px}
.footer-info{display:flex;flex-direction:column;gap:12px}
.footer-info-item{display:flex;align-items:center;gap:10px}
.footer-info-item svg{width:20px;height:20px;fill:var(--yellow);flex-shrink:0}
.footer-info-item span{color:rgba(255,255,255,.9)}
/* Logos partenaires */
.partners{border-top:1px solid rgba(255,255,255,.1);padding-top:30px}
.partners-logos{display:flex;justify-content:center;align-items:center;gap:40px;flex-wrap:wrap;opacity:.7}
.partners-logos img{height:40px;width:auto;opacity:.7;transition:opacity .3s}
.partners-logos img:hover{opacity:1}
/* Badges de confiance (QualiPV / RGE / décennale). Nommés footer-certifs pour ne pas entrer en
   conflit avec la section .certifications de la page À propos. */
.footer-certifs{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;margin-top:24px;text-align:center}
.footer-certifs-badges{display:flex;justify-content:center;align-items:center;gap:32px;flex-wrap:wrap}
.cert-badge{display:flex;align-items:center;gap:10px}
.cert-badge svg{flex-shrink:0}
.cert-text{text-align:left;line-height:1.3}
.cert-text strong{color:#fff;font-size:.9rem;display:block}
.cert-text span{color:rgba(255,255,255,.6);font-size:.75rem}
/* Maillage interne : villes par département (SEO) */
.footer-geo{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;margin-top:24px}
.footer-geo h3{color:var(--yellow);font-size:.9rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;text-align:center}
.footer-geo-depts{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:16px}
.footer-geo-dept h4{color:var(--yellow);font-size:.78rem;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;font-weight:700}
.footer-geo-dept a{display:block;color:rgba(255,255,255,.6);font-size:.78rem;text-decoration:none;line-height:1.8;transition:color .3s}
.footer-geo-dept a:hover{color:var(--yellow)}
/* Ligne filiale AJ Power */
.footer-ajpower{border-top:1px solid rgba(255,255,255,.1);padding:24px 0;margin-top:24px;text-align:center}
.footer-ajpower p{color:rgba(255,255,255,.7);font-size:.9rem;margin:0}
.footer-ajpower a{color:var(--yellow);font-weight:700;text-decoration:none}
/* Copyright + liens légaux */
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;margin-top:30px;text-align:center;font-size:.85rem;color:rgba(255,255,255,.5)}
.footer-bottom a{color:var(--yellow)}

/* ---------- TABLETTE (≤ 1024 px) ---------- */
@media(max-width:1024px){
.footer-content{grid-template-columns:1fr}
.footer-geo-depts{grid-template-columns:repeat(3,1fr)}
}

/* ---------- MOBILE (≤ 768 px) ---------- */
@media(max-width:768px){
/* Menu : tiroir qui glisse depuis la droite, ouvert par le hamburger */
.nav-links{position:fixed;top:0;right:-100%;width:280px;height:100vh;background:var(--dark);flex-direction:column;align-items:flex-start;padding:80px 30px 30px;gap:20px;transition:right .3s;box-shadow:-4px 0 20px rgba(0,0,0,.3);z-index:200;overflow-y:auto}
.nav-links.open{right:0}
.nav-links a{font-size:1.1rem}
.hamburger{display:flex;z-index:201}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,6px)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-6px)}
.nav-cta{display:none}
/* Topbar empilée : logo / zone + téléphone / boutons ; réseaux sociaux masqués */
.topbar{font-size:.75rem}
.topbar .container{flex-direction:column;align-items:center;text-align:center;gap:6px}
.topbar .nav-logo{margin-right:0}
.topbar .nav-logo img{height:28px}
.topbar-left{flex-wrap:wrap;justify-content:center}
.topbar-right{justify-content:center;gap:8px}
.topbar-right a[aria-label="Facebook AJ Solar"],.topbar-right a[aria-label="LinkedIn AJ Solar"]{display:none}
.topbar-btn{font-size:.72rem;padding:4px 10px}
/* Footer */
.footer-geo-depts{grid-template-columns:repeat(2,1fr)}
.footer h2{font-size:1.5rem}
}

/* ---------- IMPRESSION ---------- */
@media print{
.navbar,.topbar,.hamburger,.footer-geo,.partners{display:none}
}