/*
Theme Name: BETOTECH Électricien
Theme URI: https://betotech.be
Author: Berry Toussaint
Description: Site BETOTECH Technologies de l'Informatique — deux sections : /informatique et /elec. Région Arlon et Luxembourg.
Version: 5.4
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: betotech-electricien
*/

:root{
  --vert-fonce: #3C4F48;
  --vert-fonce-2: #2F3E39;
  --menthe: #8CD3A5;
  --menthe-fonce: #6FBB8A;
  --gris-clair: #F2F4F3;
  --blanc: #FFFFFF;
  --texte: #2B3330;
  --texte-doux: #5A6663;
  --ligne: #DDE3E1;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  font-family:'Lato','Helvetica Neue',Arial,sans-serif;
  color:var(--texte);
  background:var(--blanc);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ font-weight:600; line-height:1.25; color:var(--texte); }
a{ color:var(--menthe-fonce); }
img,svg{ display:block; max-width:100%; }

.wrap{ max-width:1080px; margin:0 auto; padding:0 24px; }

:focus-visible{ outline:2px solid var(--menthe-fonce); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:40;
  background:var(--gris-clair);
  border-bottom:1px solid var(--ligne);
}
.header-row{
  max-width:1080px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; gap:16px;
}
.logo-box{
  background:var(--vert-fonce);
  padding:8px 14px;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
}
.logo-box img{ width:auto; height:52px; }
@media (max-width:700px){ .logo-box img{ height:44px; } }

/* Logo téléversé via Personnaliser > Identité du site */
.custom-logo-link{ display:block; }
.custom-logo{ height:52px; width:auto; }
.logo-box .lg-name{
  color:var(--blanc); font-size:.95rem; font-weight:600; letter-spacing:.28em;
  line-height:1.1;
}
.logo-box .lg-sub{
  color:var(--menthe); font-size:.42rem; letter-spacing:.14em; margin-top:4px;
  text-transform:uppercase;
}
nav.main-nav{ display:flex; gap:26px; font-size:.95rem; }
nav.main-nav a{ color:var(--texte-doux); text-decoration:none; }
nav.main-nav a:hover{ color:var(--vert-fonce); }

.burger{
  display:none; background:none; border:none; cursor:pointer;
  padding:8px; flex-direction:column; gap:5px;
}
.burger span{ display:block; width:26px; height:2px; background:var(--texte); }

@media (max-width:860px){
  nav.main-nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--gris-clair); border-bottom:1px solid var(--ligne);
    flex-direction:column; gap:0; padding:8px 24px 18px;
  }
  nav.main-nav.open{ display:flex; }
  nav.main-nav a{ padding:12px 0; border-bottom:1px solid var(--ligne); }
  .burger{ display:flex; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:420px;
  display:flex; align-items:center; justify-content:flex-end;
  text-align:right;
  padding:70px 0;
  background:linear-gradient(rgba(35,45,41,.62),rgba(35,45,41,.62)), var(--vert-fonce-2);
  background-size:cover; background-position:center;
}
.hero-inner{ max-width:1080px; margin:0 auto; padding:0 24px; width:100%; }
.hero h1{
  color:var(--blanc);
  font-size:clamp(2rem,6vw,2.9rem);
  font-weight:700;
  margin-left:auto;
  max-width:16ch;
}
.hero h1 .l2{ display:block; font-weight:600; }
.hero p.sub{
  color:#E4EBE8; margin-top:18px; font-size:1.02rem;
  margin-left:auto; max-width:40ch;
}

/* Bandeau titre des pages intérieures */
.page-banner{
  background:linear-gradient(rgba(35,45,41,.55),rgba(35,45,41,.55)), var(--vert-fonce-2);
  padding:60px 0;
}
.page-banner h1{ color:var(--blanc); font-size:clamp(2rem,7vw,3rem); font-weight:400; }

/* ---------- Boutons ---------- */
.btn{
  display:inline-block;
  background:var(--menthe);
  color:var(--vert-fonce-2);
  text-decoration:none;
  padding:13px 26px;
  font-size:.95rem;
  font-weight:600;
  border:none; cursor:pointer;
  transition:background .15s ease;
}
.btn:hover{ background:var(--menthe-fonce); color:var(--blanc); }
.btn-hero{ margin-top:28px; }

/* ---------- Sections ---------- */
section{ padding:64px 0; }
.sec-titre{
  font-size:clamp(1.5rem,4vw,1.9rem);
  font-weight:600;
  border-bottom:2px solid var(--texte);
  display:block;
  padding-bottom:10px;
  margin-bottom:30px;
}
.sec-texte{ color:var(--texte); font-size:1rem; }
.sec-texte p{ margin-bottom:16px; }
.sec-texte ul{ margin:16px 0 16px 20px; }
.sec-texte li{ margin-bottom:12px; }
.sec-texte strong{ font-weight:700; }

/* ---------- Cartes services ---------- */
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:48px 32px;
  margin-top:8px;
}
.service-card{ text-align:center; }
.service-ico{
  width:96px; height:96px; margin:0 auto 20px;
  background:var(--menthe);
  display:flex; align-items:center; justify-content:center;
}
.service-ico.dark{ background:var(--vert-fonce); }
.service-ico svg{ width:46px; height:46px; }
.service-card h3{ font-size:1.25rem; margin-bottom:14px; }
.service-card p{ color:var(--texte); font-size:.95rem; margin-bottom:14px; }
.service-card .btn{ margin-top:6px; }

/* ---------- Phases ---------- */
.phases{
  background:linear-gradient(rgba(35,45,41,.72),rgba(35,45,41,.72)), var(--vert-fonce-2);
  padding:54px 0;
  text-align:center;
}
.phase{ padding:22px 0; }
.phase h3{
  color:#CBD6D1; font-size:1.5rem; font-weight:400; margin-bottom:6px;
}
.phase p{ color:var(--blanc); font-weight:700; max-width:34ch; margin:0 auto; }

/* ---------- Liste détaillée (page services) ---------- */
.detail-card{
  background:var(--gris-clair);
  margin-bottom:28px;
}
.detail-card .ph{
  height:190px;
  background:var(--vert-fonce-2);
  display:flex; align-items:center; justify-content:center;
}
.detail-card .ph svg{ width:80px; height:80px; opacity:.75; }
.detail-card .txt{ padding:24px 26px 30px; }
.detail-card h3{ font-size:1.2rem; margin-bottom:16px; }
.detail-card ul{ margin-left:20px; }
.detail-card li{ margin-bottom:10px; font-size:.95rem; }

/* ---------- Contact ---------- */
.contact-lignes{ margin-top:30px; }
.contact-lignes .l{
  display:flex; align-items:center; gap:12px;
  padding:9px 0; font-size:1rem;
}
.contact-lignes .l a{ color:var(--menthe-fonce); text-decoration:none; }
.contact-lignes .l a:hover{ text-decoration:underline; }
.contact-lignes svg{ width:18px; height:18px; flex:none; fill:var(--vert-fonce); }

.form-champ{ margin-bottom:18px; }
.form-champ label{ display:block; margin-bottom:6px; font-size:.95rem; }
.form-champ input, .form-champ textarea{
  width:100%; padding:11px 12px;
  border:1px solid var(--ligne);
  font-family:inherit; font-size:1rem; background:var(--blanc);
}
.form-champ textarea{ min-height:120px; resize:vertical; }
.note-rgpd{ margin-top:26px; font-size:.92rem; color:var(--texte-doux); }

/* ---------- Footer ---------- */
footer{
  background:var(--gris-clair);
  padding:40px 0 28px;
  text-align:center;
  font-size:.93rem;
  color:var(--texte);
  border-top:1px solid var(--ligne);
}
.f-social{ display:flex; justify-content:center; gap:14px; margin-bottom:26px; }
.f-social a{
  width:40px; height:40px; border-radius:50%;
  background:var(--blanc);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
}
.f-social svg{ width:17px; height:17px; fill:var(--vert-fonce); }
.f-ligne{
  display:flex; justify-content:center; align-items:center; gap:10px;
  flex-wrap:wrap; margin-bottom:8px;
}
.f-ligne a{ color:var(--menthe-fonce); text-decoration:none; }
.f-ligne svg{ width:15px; height:15px; fill:var(--texte); }
.f-logo{
  background:var(--vert-fonce);
  padding:24px 22px; margin:28px auto 22px; max-width:420px;
  display:flex; align-items:center; justify-content:center;
}
.f-logo img{ width:auto; max-height:110px; }
.f-logo .n{ font-size:1.3rem; letter-spacing:.3em; font-weight:600; }
.f-logo .s{ font-size:.55rem; letter-spacing:.18em; color:var(--menthe); margin-top:6px; text-transform:uppercase; }
.f-copy{ color:var(--texte-doux); font-size:.9rem; }

/* ---------- Contenu WP générique ---------- */
.entry-content h2{ margin:28px 0 12px; }
.entry-content p{ margin-bottom:16px; }
.entry-content ul{ margin:0 0 16px 22px; }

/* ---------- Bascule entre sections ---------- */
.switch-bar{
  background:var(--vert-fonce);
  padding:0;
}
.switch-bar .wrap{
  display:flex; gap:0; padding:0 24px;
}
.switch-bar a{
  flex:1; text-align:center;
  padding:12px 8px;
  color:#BFD4C8; text-decoration:none;
  font-size:.92rem; font-weight:600;
  border-bottom:3px solid transparent;
}
.switch-bar a.actif{ color:var(--blanc); border-bottom-color:var(--menthe); }
.switch-bar a:hover{ color:var(--blanc); }

/* ---------- Page d'entrée (choix des deux univers) ---------- */
.portail{
  min-height:70vh;
  display:flex; align-items:center;
  background:var(--vert-fonce-2);
  padding:60px 0;
}
.portail-inner{ max-width:1000px; margin:0 auto; padding:0 24px; width:100%; text-align:center; }
.portail h1{ color:var(--blanc); font-size:clamp(1.8rem,5vw,2.6rem); font-weight:700; }
.portail .intro{ color:#CBD6D1; margin:16px auto 44px; max-width:52ch; }
.portail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:700px){ .portail-grid{ grid-template-columns:1fr; } }
.portail-carte{
  background:var(--gris-clair);
  padding:36px 28px;
  text-decoration:none;
  display:block;
  color:var(--texte);
  transition:transform .15s ease;
}
.portail-carte:hover{ transform:translateY(-3px); }
.portail-carte .ic{
  width:76px; height:76px; margin:0 auto 20px;
  background:var(--menthe);
  display:flex; align-items:center; justify-content:center;
}
.portail-carte .ic svg{ width:38px; height:38px; }
.portail-carte h2{ font-size:1.3rem; margin-bottom:10px; }
.portail-carte p{ font-size:.94rem; color:var(--texte-doux); margin-bottom:18px; }
.portail-carte .zone{
  display:inline-block; font-size:.82rem; color:var(--vert-fonce);
  border:1px solid var(--vert-fonce); padding:4px 10px;
}

/* ---------- Barre du haut ---------- */
.topbar{
  background:var(--vert-fonce);
  color:#CBD6D1;
  font-size:.82rem;
  padding:8px 0;
}
.topbar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
}
.topbar-infos{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.topbar a{ color:#CBD6D1; text-decoration:none; }
.topbar a:hover{ color:var(--blanc); }
.topbar .devis{
  background:var(--menthe); color:var(--vert-fonce-2);
  padding:6px 14px; font-weight:600; font-size:.82rem;
}
.topbar .devis:hover{ background:var(--menthe-fonce); color:var(--blanc); }
@media (max-width:700px){
  .topbar .wrap{ justify-content:center; text-align:center; }
  .topbar-infos{ justify-content:center; gap:10px; font-size:.76rem; }
}

/* ---------- Pages légales ---------- */
.legal{ max-width:780px; }
.legal h2{ font-size:1.25rem; margin:34px 0 12px; }
.legal h3{ font-size:1.05rem; margin:24px 0 8px; }
.legal p{ margin-bottom:14px; }
.legal ul{ margin:0 0 16px 22px; }
.legal li{ margin-bottom:10px; }
.legal .preambule{
  background:var(--gris-clair); padding:18px 20px; margin-bottom:24px;
  font-size:.95rem;
}

/* ---------- Accessibilité ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--vert-fonce); color:var(--blanc);
  padding:12px 18px; text-decoration:none;
}
.skip-link:focus{ left:0; }

/* ---------- Astuces ---------- */
.astuces-liste{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:28px;
}
.astuce-carte{
  background:var(--gris-clair);
  display:flex; flex-direction:column;
}
.astuce-img{
  display:block; height:170px;
  background-size:cover; background-position:center;
  background-color:var(--vert-fonce-2);
}
.astuce-txt{ padding:22px 24px 26px; }
.astuce-txt h2{ font-size:1.12rem; margin-bottom:6px; }
.astuce-txt h2 a{ color:var(--texte); text-decoration:none; }
.astuce-txt h2 a:hover{ color:var(--menthe-fonce); }
.astuce-date{ font-size:.85rem; color:var(--texte-doux); margin-bottom:12px; }
.astuce-txt p{ font-size:.95rem; color:var(--texte); }
.astuce-lien{
  display:inline-block; margin-top:14px;
  color:var(--menthe-fonce); text-decoration:none; font-weight:600; font-size:.95rem;
  border-bottom:2px solid var(--menthe);
}
.astuce-lien:hover{ color:var(--vert-fonce); }

.astuces-pagination{ margin-top:36px; display:flex; justify-content:center; }
.astuces-pagination .page-numbers{
  display:inline-block; padding:9px 14px; margin:0 3px;
  border:1px solid var(--ligne); text-decoration:none; color:var(--texte);
}
.astuces-pagination .page-numbers.current{
  background:var(--vert-fonce); color:var(--blanc); border-color:var(--vert-fonce);
}

/* Avertissement — bandeau permanent */
.avert-bandeau{
  border-left:4px solid var(--copper, #B2723B);
  background:#FBF3E6;
  padding:18px 22px;
  margin:0 0 34px;
}
.avert-bandeau strong{ display:block; margin-bottom:8px; font-size:1rem; }
.avert-bandeau .avert-corps p{ font-size:.93rem; margin-bottom:10px; color:var(--texte); }
.avert-bandeau .avert-corps p:last-child{ margin-bottom:0; }

/* Avertissement — fenêtre à la première visite */
.avert-fond{
  position:fixed; inset:0; z-index:200;
  background:rgba(22,35,30,.78);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.avert-fond[hidden]{ display:none; }
.avert-boite{
  background:var(--blanc);
  max-width:600px; width:100%;
  max-height:86vh; overflow-y:auto;
  padding:32px 34px;
  border-top:5px solid var(--menthe);
}
.avert-boite h2{ font-size:1.25rem; margin-bottom:16px; }
.avert-boite .avert-corps p{ font-size:.96rem; margin-bottom:14px; }
@media (max-width:600px){
  .avert-boite{ padding:26px 22px; }
}

/* Acceptation obligatoire : le contenu reste masqué tant qu'on n'a pas accepté */
html.avert-bloque body > *:not(.avert-fond){ visibility:hidden; }
html.avert-bloque{ overflow:hidden; }
html.avert-bloque .avert-fond{ visibility:visible; }

.avert-engagement{
  margin:18px 0 22px;
  padding:14px 16px;
  background:var(--gris-clair);
  font-size:.95rem;
}
.avert-boutons{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
}
.avert-refus{
  background:none; border:none; cursor:pointer;
  font-family:inherit; font-size:.93rem;
  color:var(--texte-doux); text-decoration:underline;
  padding:6px 2px;
}
.avert-refus:hover{ color:var(--vert-fonce); }

/* ---------- Tableaux dans les articles ---------- */
.entry-content table,
.tableau-comparatif{
  width:100%;
  border-collapse:collapse;
  margin:26px 0;
  font-size:.93rem;
}
.entry-content table th,
.tableau-comparatif th{
  background:var(--vert-fonce);
  color:var(--blanc);
  text-align:left;
  padding:11px 13px;
  font-weight:600;
  vertical-align:bottom;
}
.entry-content table td,
.tableau-comparatif td{
  padding:11px 13px;
  border-bottom:1px solid var(--ligne);
  vertical-align:top;
}
.entry-content table tr:nth-child(even) td,
.tableau-comparatif tr:nth-child(even) td{ background:var(--gris-clair); }
.entry-content table td:first-child,
.tableau-comparatif td:first-child{ font-weight:600; }

/* Sur mobile, le tableau défile plutôt que d'écraser le texte */
.tableau-defilant{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:26px 0; }
.tableau-defilant table{ min-width:560px; margin:0; }

/* Encadré de mise en garde dans un article */
.encadre-reserve{
  border-left:4px solid #B2723B;
  background:#FBF3E6;
  padding:18px 22px;
  margin:26px 0;
}
.encadre-reserve p:last-child{ margin-bottom:0; }