/*
Theme Name: Compteur Ouvert
Author: Olivier Tanguy
Description: Habillage a bandes horizontales pour un site sur l'energie des entreprises : bandeau de decomposition, articles en larges bandes alternees.
Version: 1.0.6
Text Domain: compteur-ouvert
*/

:root{
  --sombre:#101820; --bande:#18232e; --clair:#f5f7f6; --blanc:#fff;
  --ambre:#e8a33d; --turquoise:#1f7a6c; --texte:#1b2229; --gris:#6f7a84; --trait:#e0e5e3;
  --f:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --m:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--clair);color:var(--texte);font:400 16.5px/1.7 var(--f)}
a{color:var(--turquoise)}
img{max-width:100%;height:auto}
.lg{max-width:1100px;margin:0 auto;padding:0 24px}

.entete{background:var(--sombre);color:#fff;position:relative}
.entete::after{content:"";display:block;height:4px;background:linear-gradient(90deg,var(--ambre) 0 33%,var(--turquoise) 33% 66%,#3d4b57 66%)}
.entete .lg{padding:24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.logo{text-decoration:none;color:#fff;font:600 22px/1.2 var(--f);display:flex;align-items:center;gap:11px}
.logo i{width:11px;height:26px;background:var(--ambre);display:block;border-radius:2px}
.slogan{font:400 13px/1.5 var(--m);color:#8b98a3;text-transform:uppercase;letter-spacing:.06em}
.nav{margin-left:auto;display:flex;gap:24px;font:500 14.5px/1}
.nav a{color:#c5cfd7;text-decoration:none}
.nav a:hover{color:var(--ambre)}

.decompo{background:var(--bande);color:#dbe3e9}
.decompo .lg{padding:26px 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.part{border-left:3px solid var(--ambre);padding-left:15px}
.part b{display:block;font:600 15px/1.3 var(--f);color:#fff}
.part span{display:block;font:400 13.5px/1.55 var(--f);color:#93a2ae;margin-top:5px}

.accroche{padding:44px 0 12px}
.accroche h1{margin:0 0 14px;font:600 33px/1.25 var(--f);letter-spacing:-.02em;max-width:20ch}
.accroche p{margin:0;max-width:62ch;color:#41505c;font-size:18px}

.bandes{padding:26px 0 56px;display:flex;flex-direction:column;gap:0}
.bande{background:var(--blanc);border-top:1px solid var(--trait);padding:26px 0;display:grid;grid-template-columns:120px 1fr auto;gap:26px;align-items:start}
.bande:last-child{border-bottom:1px solid var(--trait)}
.bande:nth-child(even){background:#fbfcfc}
.bande .tag{font:600 11.5px/1 var(--m);text-transform:uppercase;letter-spacing:.09em;color:var(--turquoise);padding-top:6px}
.bande h2{margin:0 0 7px;font:600 21px/1.35 var(--f)}
.bande h2 a{color:var(--texte);text-decoration:none}
.bande h2 a:hover{color:var(--turquoise)}
.bande p{margin:0;color:var(--gris);font-size:15.5px;max-width:72ch}
.bande .jour{font:500 12.5px/1 var(--m);color:#9aa5ae;white-space:nowrap;padding-top:7px}

.avis{background:#fdf6e9;border:1px solid #f0dcb6;padding:22px 26px;margin:30px 0}
.avis h3{margin:0 0 8px;font:600 15px/1.3 var(--f);color:#8a5f16}
.avis p{margin:0;font-size:15.5px;color:#6f5220}

.lecture{background:var(--blanc);max-width:74ch;margin:34px auto 60px;padding:38px 42px;border:1px solid var(--trait)}
.lecture h1{margin:0 0 10px;font:600 31px/1.3 var(--f);letter-spacing:-.02em}
.lecture .sign{font:500 13px/1.5 var(--m);color:var(--gris);text-transform:uppercase;letter-spacing:.05em;padding-bottom:18px;margin-bottom:26px;border-bottom:2px solid var(--ambre)}
.lecture h2{font:600 23px/1.4 var(--f);margin:34px 0 10px}
.lecture h3{font:600 19px/1.45 var(--f);margin:24px 0 8px}
.lecture table{width:100%;border-collapse:collapse;font-size:15px;margin:20px 0}
.lecture th,.lecture td{border-bottom:1px solid var(--trait);padding:9px;text-align:left}
.lecture th{font:600 12px/1 var(--m);text-transform:uppercase;letter-spacing:.05em;color:var(--gris)}

.pied{background:var(--sombre);color:#8d9aa5}
.pied .lg{padding:30px 24px;font-size:14px;display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap}
.pied a{color:#e6ecf1}
.pied p{margin:0;max-width:56ch}

@media(max-width:860px){
  .decompo .lg{grid-template-columns:1fr}
  .bande{grid-template-columns:1fr;gap:8px}
  .bande .jour{padding-top:0}
  .nav{margin-left:0;flex-wrap:wrap;gap:14px}
  .accroche h1{font-size:26px}
  .lecture{padding:26px 22px}
}