/* ══════════════════════════════════════════════════════════════
   PRADET ÉLECTRICITÉ — Direction artistique « Le schéma »
   ──────────────────────────────────────────────────────────────
   Tirée du motif du logo : une ligne, un nœud, du courant qui
   circule. Quatre règles appliquées partout :

     1. Le trait et le nœud   le motif du logo ponctue le site
     2. L'angle net           rayon 14 px → 2 px
     3. La lumière, pas l'ombre   bordures 1 px, orange = courant
     4. La preuve d'abord     les photos de chantier portent la page

   Cette feuille est chargée APRÈS styles.css et après les styles
   en ligne de chaque page : elle redirige sans rien supprimer.
   Retirer la balise <link> suffit à revenir au thème d'origine.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* ── Angles ── */
  --radius:     2px;
  --radius-lg:  3px;

  /* ── Ombres : supprimées, sauf là où la profondeur est fonctionnelle ── */
  --shadow-sm:  none;
  --shadow:     none;
  --shadow-lg:  0 12px 44px rgba(10,24,51,.14);   /* menus déroulants */
  --shadow-xl:  0 24px 70px rgba(10,24,51,.20);   /* lightbox */

  /* ── Typographie ── */
  --sans: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;

  /* ── Trame ── */
  --rule:  #E3E9F3;
  --ink:   #0A1833;
}

/* ══ 1. TYPOGRAPHIE ════════════════════════════════════════════
   IBM Plex Sans : dessiné pour une entreprise d'ingénierie.
   Il lit « technique », pas « application ».
   ══════════════════════════════════════════════════════════════ */

body, button, input, textarea, select { font-family: var(--sans); }

h1, h2, h3, h4,
.btn, .dropdown a, .mobile-menu a, .mobile-menu details summary,
.nav-links > li > a, .nav-links > li > button, .nav-links > li > .nav-services,
.nav-phone, .footer-col-title, .form-group label, .form-submit, .form-success,
.fq-btn, .perk-title, .proc-title, .sc-title, .sa-card-title, .sh-title,
.sim-label, .sim-opt-label, .sim-step-title, .sim-btn-back, .sim-btn-next,
.br-card-title, .br-card-num, .cf-title, .error-code, .error-title,
.legal-card h2, .legal-card h3, .legal-hero h1, .pq-name, .pq-name-sub,
.rc-name, .rc-avatar, .gs-num, .sb-num, .hv-glass-name, .hv-year-num,
.res-hero-val, .res-detail-val, .res-aide-val, .sim-range-val, .hero-h1,
.section-title, #back-top {
  font-family: var(--sans);
}

h1, h2, h3, h4, .section-title, .hero-h1, .sh-title, .error-code {
  font-weight: 600;
  letter-spacing: -.025em;
}
.section-title { font-weight: 600; }
.hero-h1 { font-weight: 600; letter-spacing: -.035em; }

/* ── Le monospace : registre « documentation technique ».
      Réservé aux étiquettes, références et mesures. ── */
.section-label, .page-header-label, .zones-label, .hero-since,
.ci-label, .breadcrumb, .sb-lab, .gs-label, .proc-num,
.sim-step-tab, .rm-tag, .sd-tag, .sh-tag, .zone-tag, .zp,
.trust-badge, .eh-badge, .sh-badge, .open-badge, .hv-glass-tag,
.filter-btn, .gi-cat, .res-detail-label {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: .14em;
}

/* ══ 2. LE TRAIT ET LE NŒUD ════════════════════════════════════
   Le motif du logo devient le système de ponctuation du site.
   ══════════════════════════════════════════════════════════════ */

/* NB : .step-label (fil de progression du simulateur) est volontairement exclu —
   le motif nœud+trait ponctue les titres de section, pas les étapes d'un parcours. */
.section-label, .page-header-label, .zones-label, .hero-since,
.sd-label, .s-label, .res-hero-label {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family: var(--mono);
  font-weight: 500;
  font-size: .71rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-lt);
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
}

/* le nœud */
.section-label::before, .page-header-label::before,
.zones-label::before, .hero-since::before,
.sd-label::before, .s-label::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
  margin-right: 11px;
  flex-shrink: 0;
}

/* le segment qui file */
.section-label::after, .page-header-label::after,
.zones-label::after, .hero-since::after,
.sd-label::after, .s-label::after {
  content: '';
  width: 36px; height: 1px;
  background: currentColor;
  opacity: .4;
  margin-left: 13px;
  flex-shrink: 0;
}

/* sur fond sombre, l'étiquette s'éclaircit */
.hero-since, .page-header-label { color: rgba(255,255,255,.55); }

/* Le mot accentué : orange plein, plus de dégradé */
.section-title span, .hero-h1 .line-accent, .sh-title span, .eh-title span {
  color: var(--orange);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: var(--orange);
}
.hero-h1 .line-thin { font-style: normal; font-weight: 300; opacity: .62; }

/* ══ 3. L'ANGLE NET ════════════════════════════════════════════ */

.btn, .service-card, .sol-card, .sa-card, .sh-card, .br-card, .perk,
.review-card, .gallery-item, .ci-card, .ci-icon, .fq, .fq-ico, .aide-card,
.aide-box, .legal-card, .contact-form-wrap, .sim-wrapper, .map-box,
.faq-mini-item, .faq-mini-icon, .sim-opt, .sim-input, .filter-btn,
.form-group input, .form-group select, .form-group textarea, .form-submit,
.google-score, .res-aides, .sol-icon, .proc-num, .social-btn, .dropdown,
.dropdown a, .sim-btn-back, .sim-btn-next, .sim-input-suffix, .lb-close,
.trust-badge, .zone-tag, .zp, .sh-tag, .sd-tag, .eh-badge, .sh-badge,
.open-badge, .rm-tag, .skip-link, #back-top, .float-phone {
  border-radius: var(--radius);
}
.float-phone, #back-top { border-radius: 2px; }

/* ══ 4. LA LUMIÈRE, PAS L'OMBRE ════════════════════════════════
   Les quatre ombres bleutées disparaissent. L'orange cesse d'être
   une couleur de remplissage : il devient du courant, réservé à
   ce qui s'active.
   ══════════════════════════════════════════════════════════════ */

.service-card, .sol-card, .sa-card, .sh-card, .br-card, .perk,
.review-card, .ci-card, .fq, .aide-card, .legal-card, .contact-form-wrap,
.sim-wrapper, .google-score, .res-aides, .map-box, .faq-mini-item {
  box-shadow: none;
  border: 1px solid var(--rule);
  position: relative;
  transition: border-color .25s ease;
}

/* La barre de courant qui monte au survol */
.service-card::before, .sol-card::before, .sa-card::before,
.sh-card::before, .br-card::before, .perk::before,
.review-card::before, .ci-card::before, .fq::before, .aide-card::before {
  content: '';
  position: absolute;
  left: -1px; top: 0;
  width: 2px; height: 0;
  background: var(--orange);
  transition: height .32s cubic-bezier(.4,0,.2,1);
  z-index: 2;
}
.service-card:hover::before, .sol-card:hover::before, .sa-card:hover::before,
.sh-card:hover::before, .br-card:hover::before, .perk:hover::before,
.review-card:hover::before, .ci-card:hover::before, .fq:hover::before,
.aide-card:hover::before { height: 100%; }

.service-card:hover, .sol-card:hover, .sa-card:hover, .sh-card:hover,
.br-card:hover, .perk:hover, .review-card:hover, .ci-card:hover,
.fq:hover, .aide-card:hover {
  border-color: var(--navy);
  background: #fff;
  transform: none;          /* plus de lévitation */
}

/* ══ 5. BOUTONS ════════════════════════════════════════════════
   Plus d'ombre colorée, plus de translation verticale.
   ══════════════════════════════════════════════════════════════ */

.btn, .form-submit, .sim-btn-next, .sim-btn-back {
  border-width: 1px;
  font-weight: 600;
  letter-spacing: .005em;
  box-shadow: none;
  transition: background .2s, color .2s, border-color .2s;
}
.btn:hover, .form-submit:hover, .sim-btn-next:hover, .sim-btn-back:hover {
  transform: none;
  box-shadow: none;
}
.btn-primary, .form-submit { background: var(--orange); border-color: var(--orange); }
.btn-primary:hover, .form-submit:hover { background: #C43F10; border-color: #C43F10; }
.btn-outline-white:hover { background: rgba(255,255,255,.10); }

/* ══ 6. ÉTIQUETTES TECHNIQUES ══════════════════════════════════
   Les 64 pastilles arrondies deviennent des étiquettes lisibles.
   ══════════════════════════════════════════════════════════════ */

.trust-badge, .zone-tag, .zp, .sh-tag, .sd-tag, .eh-badge, .sh-badge,
.open-badge, .rm-tag, .filter-btn, .gi-cat {
  font-size: .68rem;
  text-transform: uppercase;
  box-shadow: none;
}
.zone-tag, .zp {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--text-mid);
  transition: border-color .2s, color .2s;
}
.zone-tag:hover, .zp:hover { border-color: var(--orange); color: var(--orange); }
.trust-badge {
  background: transparent;
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.8);
}
.filter-btn { border: 1px solid var(--rule); background: transparent; }
.filter-btn.active { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Les carrés d'icône : fond retiré, trait conservé */
.ci-icon, .sol-icon, .fq-ico, .sh-icon {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--navy);
  box-shadow: none;
}
.service-card:hover .sh-icon { border-color: var(--orange); }

/* Le badge « depuis 1977 » : étiquette, plus pastille */
.since-tag, .bi-left .since-tag {
  border-radius: var(--radius);
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--text-mid);
  font-family: var(--mono);
  font-weight: 500;
  font-size: .67rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  box-shadow: none;
}

/* Les numéros d'étape : carrés, sans halo orange */
.proc-num {
  border-radius: var(--radius);
  box-shadow: none;
  font-family: var(--mono);
  font-weight: 500;
}

/* Plus de halos lumineux sur les pastilles de couleur */
.tb-dot { box-shadow: none !important; }

/* La flèche des cartes : carrée comme le reste */
.sh-arrow {
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  transition: border-color .2s, background .2s, color .2s;
}
.service-card:hover .sh-arrow { border-color: var(--orange); background: var(--orange); color: #fff; }

/* ══ 7. LE HÉROS ═══════════════════════════════════════════════
   Le dégradé et la composition abstraite cèdent la place à une
   photo de chantier : atelier éclairé par Pradet, camionnette de
   l'entreprise. Aucun autre site ne possède cette image.
   ══════════════════════════════════════════════════════════════ */

#hero {
  position: relative;
  background: var(--ink);
  isolation: isolate;
}
/* décors génériques désactivés */
#hero .hero-pattern,
#hero .hero-aurora-extra,
#hero .hero-grid-bg,
#hero .hero-visual { display: none !important; }

#hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('photos/elec-eclairage-industriel-1.jpeg');
  background-size: cover;
  background-position: 50% 62%;
  z-index: -2;
}
#hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(10,24,51,.96)   0%,
    rgba(10,24,51,.90)  34%,
    rgba(10,24,51,.62)  66%,
    rgba(10,24,51,.34) 100%);
  z-index: -1;
}
#hero .hero-grid { grid-template-columns: 1fr; }
#hero .hero-content { max-width: 660px; }
.hero-desc { color: rgba(255,255,255,.72); }
.hero-desc strong { color: #fff; font-weight: 600; }

/* Le rail de nœuds du logo, en bas du héros */
#hero .hero-body::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: rgba(255,255,255,.16);
}

/* Les deux boutons se rejoignent : un seul organe de commande */
.hero-btns { gap: 0 !important; align-items: stretch; }
.hero-btns .btn { border-radius: 0; }
.hero-btns .btn:first-child { border-right: none; }
.hero-btns .btn-outline-white { border-color: rgba(255,255,255,.28); }

/* ══ 8. BANDEAUX DE PAGE ═══════════════════════════════════════
   Même règle que le héros : une photo de chantier, jamais un
   dégradé. Chaque page reçoit l'image de son propre métier.
   ══════════════════════════════════════════════════════════════ */

.page-header, .legal-hero, .energie-hero, .sim-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.page-header  { background: var(--ink) !important; }
.legal-hero   { background: var(--ink) !important; }
.energie-hero { background: #0C2A18 !important; }   /* le métier garde sa couleur */
.sim-hero     { background: #0C2A18 !important; }

/* Photo + voile dans un seul calque : l'ordre des couches suffit,
   pas besoin de !important (qui empêcherait la photo de s'afficher). */
.page-header::before, .energie-hero::before, .sim-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  z-index: -1;
  opacity: 1;
}
.energie-hero::before {
  background-image:
    linear-gradient(102deg, rgba(12,42,24,.96) 0%, rgba(12,42,24,.88) 42%, rgba(12,42,24,.52) 100%),
    url('photos/solaire-toiture-2.jpeg');
  background-position: center, 50% 62%;
}
.sim-hero::before {
  background-image:
    linear-gradient(102deg, rgba(12,42,24,.96) 0%, rgba(12,42,24,.88) 42%, rgba(12,42,24,.55) 100%),
    url('photos/solaire-toiture-1.jpeg');
  background-position: center, 50% 58%;
}
.page-header::before {
  background-image:
    linear-gradient(102deg, rgba(10,24,51,.96) 0%, rgba(10,24,51,.88) 42%, rgba(10,24,51,.50) 100%),
    url('photos/elec-tableau-electrique-1.jpeg');
  background-position: center, 58% 40%;
}

/* Pages légales : même traitement que les autres bandeaux */
.legal-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-image:
    linear-gradient(102deg, rgba(10,24,51,.97) 0%, rgba(10,24,51,.92) 46%, rgba(10,24,51,.62) 100%),
    url('photos/elec-coffret-electrique-1.jpeg');
  background-position: center, 55% 45%;
  z-index: -1;
}
.lh-crumb {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.legal-hero h1 { font-weight: 600; letter-spacing: -.03em; }
.lh-sub { color: rgba(255,255,255,.72); }
.legal-card h2, .legal-card h3 { font-weight: 600; letter-spacing: -.02em; }
.legal-table th {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.legal-meta { font-family: var(--mono); font-size: .72rem; letter-spacing: .05em; }
.todo { border-radius: 0 var(--radius) var(--radius) 0; }

/* Filet de clôture, comme sous le héros */
.page-header::after, .legal-hero::after,
.energie-hero::after, .sim-hero::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: rgba(255,255,255,.16);
  z-index: 3;
}
.page-header .container, .energie-hero .container,
.sim-hero .container, .legal-hero .container { position: relative; z-index: 2; }

/* L'étiquette « transition énergétique » redevient une étiquette */
.eh-badge, .sh-badge {
  background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.82);
  border-radius: var(--radius);
  box-shadow: none;
  backdrop-filter: none;
}

/* ══ 9. NAVIGATION ═════════════════════════════════════════════ */

#navbar {
  box-shadow: none;
  border-bottom: 1px solid var(--rule);
  background: rgba(255,255,255,.98);
}
.nav-links > li > a, .nav-links > li > button, .nav-links > li > .nav-services {
  font-weight: 500;
  font-size: .84rem;
  letter-spacing: .01em;
  border-bottom-width: 2px;
}
.dropdown { border: 1px solid var(--rule); }

/* ══ 10. BANDE DE CHIFFRES ═════════════════════════════════════
   Séparée par des filets, pas par des blocs colorés.
   ══════════════════════════════════════════════════════════════ */

.sb-num { font-weight: 600; letter-spacing: -.02em; }
.sb-lab { font-size: .66rem; text-transform: uppercase; }

/* ══ 11. SECTIONS ══════════════════════════════════════════════
   Les fonds alternés cèdent la place à des filets : la page
   redevient un document continu.
   ══════════════════════════════════════════════════════════════ */

.section { border-top: 1px solid var(--rule); }
.section + .section { border-top: 1px solid var(--rule); }

/* ══ 12. PIED DE PAGE ══════════════════════════════════════════ */

.footer-col-title {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .68rem;
  letter-spacing: .15em;
}

/* ══ 13. DIVERS ════════════════════════════════════════════════ */

.float-phone { box-shadow: 0 6px 24px rgba(232,82,28,.32); }
#back-top { box-shadow: none; border: 1px solid var(--rule); }
.gi-cat { letter-spacing: .12em; }

/* Le bandeau cookies suit la même règle d'angle */
#ck-banner button { border-radius: 2px !important; }

/* ══ 14. RESPONSIVE ════════════════════════════════════════════ */

@media (max-width: 768px){
  #hero::before { background-position: 62% 58%; }
  #hero::after {
    background: linear-gradient(180deg,
      rgba(10,24,51,.90) 0%, rgba(10,24,51,.94) 55%, rgba(10,24,51,.97) 100%);
  }
  .hero-btns { flex-direction: column; }
  .hero-btns .btn:first-child { border-right: 1px solid var(--orange); border-bottom: none; }
  .section-label::after, .page-header-label::after,
  .zones-label::after, .hero-since::after { width: 20px; margin-left: 9px; }
}

/* Sous 430 px, le segment du motif ferait déborder les étiquettes longues :
   on le retire et on autorise le retour à la ligne. */
@media (max-width: 430px){
  .section-label, .page-header-label, .zones-label, .hero-since,
  .sd-label, .s-label, .res-hero-label {
    flex-wrap: wrap;
    max-width: 100%;
  }
  .section-label::after, .page-header-label::after, .zones-label::after,
  .hero-since::after, .sd-label::after, .s-label::after { display: none; }
}

@media (prefers-reduced-motion: reduce){
  .service-card::before, .sol-card::before, .sa-card::before, .sh-card::before,
  .br-card::before, .perk::before, .review-card::before, .ci-card::before,
  .fq::before, .aide-card::before { transition: none; }
}

/* ══ 15. BOUTON D'APPEL FLOTTANT ═══════════════════════════════
   Il recouvrait le CTA « Nos services » dans le bandeau d'accueil
   sur mobile. Il n'apparaît donc qu'une fois le bandeau dépassé
   (le numéro reste visible dans la barre de navigation).
   Sans JavaScript, il reste affiché : aucune perte de fonction.
   ══════════════════════════════════════════════════════════════ */
.float-phone {
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.float-phone.fp-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
}

/* ══ 16. TITRES SUR FOND SOMBRE ════════════════════════════════
   Les bandeaux de page et la section « zones » utilisaient un
   ambre (#FFB347) qui lit comme du jaune et rompt la cohérence :
   partout ailleurs, le mot accentué est en orange de marque.
   Le #E8521C donne 4,75 sur le fond encre — largement au-dessus
   du seuil de 3,0 exigé pour un grand titre. Aucun compromis
   de lisibilité à faire.
   ══════════════════════════════════════════════════════════════ */
.page-header h1 span,
.zl-left h2 span,
.legal-hero h1 span,
.simu-title span {      /* titre de l'encart simulateur */
  color: var(--orange);
}

/* ── Chiffres du bandeau énergie ─────────────────────────────────
   En blanc, pas en orange : ce sont des données, pas des actions.
   Sur cet écran, le titre et le bouton sont déjà orange — trois
   accents de plus écraseraient la hiérarchie. Le blanc les rend
   factuels et laisse l'orange à ce qui se clique.
   ──────────────────────────────────────────────────────────────── */
.eh-stat .num { color: #fff; }

/* NB : les dorés conservés volontairement —
   .tb-dot.gold (une des 4 pastilles de certification, couleurs
   distinctes pour les différencier) et .sh-icon.gold / .res-*-gold
   (icônes solaires, où l'or évoque le soleil). Ce ne sont pas des
   oublis : l'orange y ferait perdre une distinction utile. */