/*
Theme Name: Dossier Prevoyance
Author: Fabien Rouvier
Description: Theme editorial sobre pour un site de reference sur la prevoyance collective. Colonne de lecture etroite, notes de synthese, pas de grille de cartes.
Version: 1.4.2
Text Domain: dossier-prevoyance
*/

:root{
  --encre:#1c2430; --ardoise:#3d4b5c; --ocre:#a8762c; --ocre-clair:#f3ead8;
  --papier:#fbfaf7; --filet:#ddd8cd; --gris:#6b7280;
  --serif:Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--encre);font:400 17px/1.7 var(--serif)}
a{color:var(--ardoise)}
a:hover{color:var(--ocre)}
img{max-width:100%;height:auto}

.bandeau{border-bottom:2px solid var(--encre);background:#fff}
.bandeau-in{max-width:1040px;margin:0 auto;padding:22px 24px;display:flex;align-items:baseline;gap:28px;flex-wrap:wrap}
.enseigne{font:700 25px/1 var(--serif);letter-spacing:-.02em;text-decoration:none;color:var(--encre)}
.enseigne span{color:var(--ocre)}
.baseline{font:400 13px/1.4 var(--sans);color:var(--gris);flex:1 1 220px}
.rubriques{margin-left:auto;display:flex;gap:20px;font:600 13px/1 var(--sans);text-transform:uppercase;letter-spacing:.06em}
.rubriques a{text-decoration:none;color:var(--ardoise);padding-bottom:3px;border-bottom:2px solid transparent}
.rubriques a:hover{border-color:var(--ocre)}

.corps{max-width:1040px;margin:0 auto;padding:0 24px 64px}
.edito{padding:44px 0 34px;border-bottom:1px solid var(--filet)}
.edito h1{margin:0 0 14px;font:700 34px/1.25 var(--serif);letter-spacing:-.015em;max-width:22ch}
.edito p{margin:0;max-width:62ch;color:var(--ardoise);font-size:19px}
.signature{margin-top:20px;font:400 14px/1.5 var(--sans);color:var(--gris)}

.notes{list-style:none;margin:0;padding:34px 0 0}
.note{padding:22px 0;border-bottom:1px solid var(--filet);display:grid;grid-template-columns:92px 1fr;gap:26px}
.note-date{font:600 12px/1.5 var(--sans);text-transform:uppercase;letter-spacing:.07em;color:var(--gris);padding-top:5px}
.note h2{margin:0 0 7px;font:600 22px/1.35 var(--serif)}
.note h2 a{text-decoration:none;color:var(--encre)}
.note h2 a:hover{color:var(--ocre)}
.note p{margin:0;color:var(--ardoise);font-size:16px;max-width:70ch}

.repere{margin:40px 0;padding:24px 26px;background:var(--ocre-clair);border-left:4px solid var(--ocre)}
.repere h2{margin:0 0 10px;font:700 15px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.08em;color:#7d5714}
.repere p{margin:0;font-size:16px;color:#4a3a1c}

.article{max-width:70ch;padding:40px 0}
.article h1{font:700 33px/1.3 var(--serif);margin:0 0 10px}
.article .meta{font:400 14px/1.5 var(--sans);color:var(--gris);margin-bottom:28px;padding-bottom:18px;border-bottom:1px solid var(--filet)}
.article h2{font:600 25px/1.35 var(--serif);margin:38px 0 12px}
.article h3{font:600 20px/1.4 var(--serif);margin:28px 0 8px}
.article ul,.article ol{padding-left:22px}
.article blockquote{margin:26px 0;padding:4px 0 4px 22px;border-left:3px solid var(--ocre);color:var(--ardoise);font-style:italic}

.pied{border-top:2px solid var(--encre);background:#fff;margin-top:50px}
.pied-in{max-width:1040px;margin:0 auto;padding:30px 24px;font:400 14px/1.7 var(--sans);color:var(--gris);display:flex;gap:30px;flex-wrap:wrap;justify-content:space-between}
.pied a{color:var(--ardoise)}
.mentions{max-width:52ch}

@media(max-width:720px){
  body{font-size:16px}
  .note{grid-template-columns:1fr;gap:6px}
  .note-date{padding-top:0}
  .edito h1{font-size:27px}
  .rubriques{margin-left:0;flex-wrap:wrap;gap:14px}
}