/*
Theme Name: Ordre Du Jour
Author: Damien Rouault
Description: Habillage administratif pour un site sur la copropriete et la gestion locative : accueil en ordre du jour, postes de charges, articles en proces-verbal.
Version: 1.5.0
Text Domain: ordre-du-jour
*/

:root{
  --gris:#eceef0; --blanc:#fff; --encre:#232830; --acier:#41566b;
  --rouille:#9e5b30; --doux:#69727d; --trait:#d8dce0;
  --f:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --n:"Roboto Slab",Georgia,serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--gris);color:var(--encre);font:400 16.5px/1.7 var(--f)}
a{color:var(--acier)}
img{max-width:100%;height:auto}
.immeuble{max-width:980px;margin:0 auto;padding:0 22px}

.entete{background:var(--encre);color:#fff}
.entete .immeuble{padding:20px 22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cartouche{text-decoration:none;color:#fff;display:flex;align-items:center;gap:12px}
.numero{width:40px;height:40px;background:var(--rouille);display:grid;place-items:center;
  font:700 17px/1 var(--n);color:#fff}
.cartouche b{font:600 21px/1.2 var(--n);letter-spacing:-.01em}
.mention{font:400 13px/1.5;color:#9aa4af;max-width:32ch}
.ordres{margin-left:auto;display:flex;gap:20px;font:600 13.5px/1;flex-wrap:wrap}
.ordres a{color:#c8d2dc;text-decoration:none}
.ordres a:hover{color:var(--rouille)}

.convocation{background:var(--blanc);border:1px solid var(--trait);padding:30px 34px;margin:24px 0 20px}
.convocation .type{font:700 11.5px/1;text-transform:uppercase;letter-spacing:.14em;color:var(--rouille)}
.convocation h1{margin:12px 0 14px;font:600 29px/1.3 var(--n)}
.convocation p{margin:0 0 12px;color:#454c56;max-width:64ch}
.convocation p:last-child{margin:0}

.points{background:var(--blanc);border:1px solid var(--trait);margin-bottom:26px}
.points .point{display:grid;grid-template-columns:56px 1fr;border-bottom:1px solid var(--trait)}
.points .point:last-child{border-bottom:0}
.points .num{background:#f3f5f6;display:grid;place-items:center;font:600 14px/1 var(--n);color:var(--acier);border-right:1px solid var(--trait)}
.points .txt{padding:16px 20px}
.points b{display:block;font:600 16px/1.4;margin-bottom:3px}
.points span{font-size:15px;color:var(--doux)}

.pv{list-style:none;margin:0;padding:0 0 54px}
.pv li{background:var(--blanc);border:1px solid var(--trait);padding:20px 24px;margin-bottom:11px;
  display:grid;grid-template-columns:1fr 118px;gap:22px;align-items:start}
.pv h2{margin:0 0 7px;font:600 20px/1.4 var(--n)}
.pv h2 a{color:var(--encre);text-decoration:none}
.pv h2 a:hover{color:var(--rouille)}
.pv p{margin:0;font-size:15.5px;color:var(--doux)}
.pv .poste{text-align:right;font:700 11px/1.5;text-transform:uppercase;letter-spacing:.11em;color:var(--rouille)}
.pv .poste span{display:block;color:#9aa2ab;font-weight:400;letter-spacing:.05em;margin-top:5px}

.resolution{background:#f4f0eb;border-left:4px solid var(--rouille);padding:20px 24px;margin:24px 0;font-size:15.5px;color:#5d5347}
.resolution b{display:block;margin-bottom:6px;color:var(--encre)}

.acte{background:var(--blanc);border:1px solid var(--trait);max-width:71ch;margin:26px auto 56px;padding:38px 42px}
.acte h1{margin:0 0 10px;font:600 30px/1.3 var(--n)}
.acte .depot{font:600 12.5px/1.6;color:var(--doux);text-transform:uppercase;letter-spacing:.09em;
  border-bottom:2px solid var(--rouille);padding-bottom:14px;margin-bottom:26px}
.acte h2{font:600 23px/1.4 var(--n);margin:32px 0 10px;color:var(--acier)}
.acte h3{font:600 18.5px/1.45;margin:22px 0 8px}
.acte table{width:100%;border-collapse:collapse;font-size:15px;margin:18px 0}
.acte th,.acte td{border:1px solid var(--trait);padding:9px 11px;text-align:left}
.acte th{background:#f3f5f6;font:600 12.5px/1;text-transform:uppercase;letter-spacing:.05em;color:var(--doux)}
.acte ul,.acte ol{padding-left:22px}

.pied{background:var(--encre);color:#98a2ad;margin-top:30px}
.pied .immeuble{padding:28px 22px;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:780px){
  .pv li{grid-template-columns:1fr;gap:8px}
  .pv .poste{text-align:left}
  .ordres{margin-left:0}
  .convocation,.acte{padding:26px 22px}
  .convocation h1{font-size:24px}
}