/*
Theme Name: Bordereau
Author: Bruno Cazenave
Description: Habillage de chantier pour un site sur les travaux a Paris : entete a bande jaune, postes de depense en lignes, articles en fiche technique.
Version: 1.0.9
Text Domain: bordereau
*/

:root{
  --beton:#3c3c3a; --jaune:#e8b400; --clair:#f4f3f0; --blanc:#fff;
  --texte:#22221f; --doux:#6c6c67; --trait:#dcdad4; --bleu:#33566e;
  --f:"Barlow","Segoe UI",system-ui,sans-serif;
  --c:"Barlow Condensed","Arial Narrow",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--clair);color:var(--texte);font:400 16.5px/1.7 var(--f)}
a{color:var(--bleu)}
img{max-width:100%;height:auto}
.chantier{max-width:1060px;margin:0 auto;padding:0 24px}

.hachures{height:12px;background:repeating-linear-gradient(45deg,var(--jaune) 0 14px,var(--beton) 14px 28px)}
.entete{background:var(--beton);color:#fff}
.entete .chantier{padding:22px 24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.raison{text-decoration:none;color:#fff;font:700 27px/1.1 var(--c);text-transform:uppercase;letter-spacing:.04em}
.raison span{color:var(--jaune)}
.objet{font:400 13.5px/1.5;color:#b6b6b0;max-width:36ch}
.postes{margin-left:auto;display:flex;gap:20px;font:600 14px/1 var(--c);text-transform:uppercase;letter-spacing:.06em;flex-wrap:wrap}
.postes a{color:#e6e6e2;text-decoration:none}
.postes a:hover{color:var(--jaune)}

.devis{padding:36px 0 20px}
.devis h1{margin:0 0 14px;font:700 34px/1.2 var(--c);text-transform:uppercase;letter-spacing:.01em;max-width:20ch}
.devis p{margin:0;color:#4d4d48;max-width:62ch;font-size:17.5px}

.lignes{background:var(--blanc);border:1px solid var(--trait);margin:24px 0 30px}
.lignes .ligne{display:grid;grid-template-columns:34px 1fr;gap:16px;padding:16px 20px;border-bottom:1px solid var(--trait)}
.lignes .ligne:last-child{border-bottom:0}
.lignes .n{background:var(--jaune);color:var(--beton);font:700 14px/34px var(--c);text-align:center;height:34px}
.lignes b{display:block;font:600 16px/1.4}
.lignes span{font-size:15px;color:var(--doux)}

.releve{list-style:none;margin:0;padding:0 0 54px}
.releve li{background:var(--blanc);border-left:5px solid var(--jaune);border-top:1px solid var(--trait);
  border-right:1px solid var(--trait);border-bottom:1px solid var(--trait);padding:20px 24px;margin-bottom:12px}
.releve .lot{font:700 12px/1 var(--c);text-transform:uppercase;letter-spacing:.12em;color:var(--bleu)}
.releve h2{margin:8px 0 7px;font:600 21px/1.36}
.releve h2 a{color:var(--texte);text-decoration:none}
.releve h2 a:hover{color:var(--bleu)}
.releve p{margin:0;color:var(--doux);font-size:15.5px}
.releve .date{display:block;margin-top:10px;font:600 12px/1 var(--c);text-transform:uppercase;letter-spacing:.08em;color:#9c9c96}

.reserve{background:#fdf6dd;border:1px solid #eddfa8;padding:20px 24px;margin:24px 0;font-size:15.5px;color:#6f5c14}
.reserve b{display:block;margin-bottom:6px}

.fiche-tech{background:var(--blanc);border:1px solid var(--trait);max-width:72ch;margin:28px auto 56px;padding:36px 40px}
.fiche-tech h1{margin:0 0 10px;font:700 32px/1.22 var(--c);text-transform:uppercase}
.fiche-tech .cartouche{font:600 13px/1.5 var(--c);text-transform:uppercase;letter-spacing:.08em;color:var(--doux);
  border-top:3px solid var(--jaune);border-bottom:1px solid var(--trait);padding:12px 0;margin-bottom:26px}
.fiche-tech h2{font:700 24px/1.3 var(--c);text-transform:uppercase;margin:32px 0 10px;color:var(--beton)}
.fiche-tech h3{font:600 19px/1.45;margin:22px 0 8px}
.fiche-tech table{width:100%;border-collapse:collapse;font-size:15px;margin:18px 0}
.fiche-tech th,.fiche-tech td{border:1px solid var(--trait);padding:9px 11px;text-align:left}
.fiche-tech th{background:#f0efeb;font:600 13px/1 var(--c);text-transform:uppercase;letter-spacing:.05em}

.pied{background:var(--beton);color:#aeaea8;margin-top:30px}
.pied .chantier{padding:28px 24px;font-size:14px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.pied a{color:#fff}
.pied p{margin:0;max-width:58ch}

@media(max-width:820px){
  .postes{margin-left:0}
  .devis h1{font-size:27px}
  .fiche-tech{padding:26px 22px}
}