/*
Theme Name: Tableau Treize Semaines
Author: Yannick Peyrat
Description: Presentation en tableau de bord pour un site sur la tresorerie des PME : bandeau de reperes, dossiers en deux colonnes, chronique en bas de page.
Version: 1.1.0
Text Domain: treize-semaines
*/

:root{
  --creme:#faf7f0; --encre:#22201c; --nuit:#232f3a; --cuivre:#b5651d;
  --vert:#2f6b4f; --gris:#767066; --ligne:#e4ded1; --blanc:#fff;
  --t:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --s:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--creme);color:var(--encre);font:400 17px/1.68 var(--s)}
a{color:var(--vert)}
img{max-width:100%;height:auto}
.zone{max-width:1080px;margin:0 auto;padding:0 22px}

.chapeau{background:var(--nuit);color:#eef2f5}
.chapeau .zone{padding-top:20px;padding-bottom:20px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.titre-site{font:700 24px/1.15 var(--t);color:#fff;text-decoration:none;letter-spacing:.01em}
.titre-site small{display:block;font:400 13px/1.5 var(--s);color:#9fb3c4;margin-top:4px}
.menu{margin-left:auto;display:flex;gap:22px;font:500 14px/1 var(--s)}
.menu a{color:#cddae4;text-decoration:none}
.menu a:hover{color:#fff;text-decoration:underline}

.jauges{background:var(--blanc);border-bottom:1px solid var(--ligne)}
.jauges .zone{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;padding:0;background:var(--ligne)}
.jauge{background:var(--blanc);padding:22px 24px}
.jauge b{display:block;font:700 27px/1.1 var(--t);color:var(--cuivre)}
.jauge span{display:block;margin-top:6px;font:400 13.5px/1.5 var(--s);color:var(--gris)}

.mot{padding:38px 0 30px}
.mot h1{margin:0 0 14px;font:700 32px/1.28 var(--t);max-width:20ch}
.mot p{margin:0;max-width:60ch;color:#4a463f;font-size:18px}

.dossiers{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-bottom:34px}
.dossier{background:var(--blanc);border:1px solid var(--ligne);padding:22px 24px}
.dossier .etiq{font:600 11.5px/1 var(--s);text-transform:uppercase;letter-spacing:.1em;color:var(--cuivre)}
.dossier h2{margin:10px 0 8px;font:600 21px/1.34 var(--t)}
.dossier h2 a{color:var(--encre);text-decoration:none}
.dossier h2 a:hover{color:var(--vert)}
.dossier p{margin:0;font-size:15.5px;color:var(--gris)}

.chronique{border-top:2px solid var(--nuit);padding:26px 0 60px}
.chronique h2{margin:0 0 16px;font:600 14px/1 var(--s);text-transform:uppercase;letter-spacing:.11em;color:var(--gris)}
.chronique ol{list-style:none;margin:0;padding:0}
.chronique li{display:flex;gap:18px;padding:12px 0;border-bottom:1px dotted var(--ligne);align-items:baseline}
.chronique time{font:600 13px/1 var(--s);color:var(--cuivre);flex:none;width:88px}
.chronique a{color:var(--encre);text-decoration:none;font-size:16.5px}
.chronique a:hover{color:var(--vert);text-decoration:underline}

.papier{background:var(--blanc);border:1px solid var(--ligne);max-width:74ch;margin:34px auto 60px;padding:36px 40px}
.papier h1{margin:0 0 10px;font:700 31px/1.3 var(--t)}
.papier .credits{font:400 13.5px/1.6 var(--s);color:var(--gris);border-bottom:1px solid var(--ligne);padding-bottom:16px;margin-bottom:26px}
.papier h2{font:600 24px/1.36 var(--t);margin:34px 0 10px;padding-left:12px;border-left:3px solid var(--cuivre)}
.papier h3{font:600 19px/1.4 var(--s);margin:24px 0 8px}
.papier table{width:100%;border-collapse:collapse;margin:20px 0;font-size:15px}
.papier th,.papier td{border-bottom:1px solid var(--ligne);padding:9px 8px;text-align:left}
.papier th{color:var(--gris);font:600 12px/1 var(--s);text-transform:uppercase;letter-spacing:.06em}

.socle{background:var(--nuit);color:#a8bccb}
.socle .zone{padding:26px 22px;font-size:14px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.socle a{color:#e2ecf3}
.socle p{margin:0;max-width:56ch}

@media(max-width:860px){
  .jauges .zone{grid-template-columns:1fr}
  .dossiers{grid-template-columns:1fr}
  .menu{margin-left:0;flex-wrap:wrap;gap:14px}
  .mot h1{font-size:26px}
  .papier{padding:26px 22px}
}