/*
Theme Name: Etage Noble
Author: Gaelle Tremaux
Description: Habillage elegant pour un site de transaction immobiliere parisienne : accroche pleine largeur, biens en lignes detaillees, texte serif.
Version: 2.1.5
Text Domain: etage-noble
*/

:root{
  --creme:#faf8f4; --blanc:#fff; --marine:#1f3346; --laiton:#b08d3f;
  --texte:#20242a; --doux:#6b7480; --trait:#e5e0d7;
  --t:"Playfair Display","Georgia",serif;
  --f:"Lato","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--creme);color:var(--texte);font:400 16.5px/1.75 var(--f)}
a{color:var(--marine)}
img{max-width:100%;height:auto}
.quartier{max-width:1000px;margin:0 auto;padding:0 24px}

.porte{background:var(--blanc);border-bottom:1px solid var(--trait)}
.porte .quartier{padding:30px 24px;text-align:center}
.porte a.titre{text-decoration:none;color:var(--marine);font:500 33px/1.2 var(--t);letter-spacing:.01em}
.porte .devise{margin:9px 0 0;font:400 12.5px/1.6 var(--f);color:var(--doux);text-transform:uppercase;letter-spacing:.2em}
.trait-or{width:60px;height:2px;background:var(--laiton);margin:16px auto 0}
.arrondissements{margin-top:18px;display:flex;justify-content:center;gap:26px;flex-wrap:wrap;font:400 13.5px/1;letter-spacing:.04em}
.arrondissements a{color:var(--doux);text-decoration:none}
.arrondissements a:hover{color:var(--laiton)}

.vitrine{padding:44px 0 20px;text-align:center}
.vitrine h1{margin:0 auto 16px;font:500 36px/1.24 var(--t);max-width:22ch}
.vitrine p{margin:0 auto;max-width:60ch;color:#4d545c;font-size:17.5px}

.annonces{list-style:none;margin:26px 0 56px;padding:0;border-top:1px solid var(--trait)}
.annonces li{border-bottom:1px solid var(--trait);padding:24px 0;display:grid;grid-template-columns:1fr 160px;gap:30px;align-items:start}
.annonces h2{margin:0 0 8px;font:500 25px/1.32 var(--t)}
.annonces h2 a{color:var(--texte);text-decoration:none}
.annonces h2 a:hover{color:var(--laiton)}
.annonces p{margin:0;color:var(--doux);font-size:15.5px;max-width:66ch}
.annonces .secteur{text-align:right;font:400 12px/1.6;text-transform:uppercase;letter-spacing:.14em;color:var(--laiton)}
.annonces .secteur span{display:block;color:#a1a8b1;letter-spacing:.06em;margin-top:6px}

.avis{background:var(--blanc);border:1px solid var(--trait);border-top:2px solid var(--laiton);padding:24px 28px;margin:26px 0}
.avis b{display:block;margin-bottom:8px;font:500 19px/1.35 var(--t)}
.avis p{margin:0;font-size:15.5px;color:#59616a}

.chronique{max-width:70ch;margin:34px auto 60px;background:var(--blanc);border:1px solid var(--trait);padding:44px 48px}
.chronique h1{margin:0 0 12px;font:500 34px/1.26 var(--t)}
.chronique .plume{font:400 12.5px/1.6;color:var(--doux);text-transform:uppercase;letter-spacing:.16em;
  padding-bottom:20px;margin-bottom:28px;border-bottom:1px solid var(--trait)}
.chronique h2{font:500 26px/1.34 var(--t);margin:36px 0 10px;color:var(--marine)}
.chronique h3{font:600 18.5px/1.45 var(--f);margin:24px 0 8px}
.chronique blockquote{margin:26px 0;padding:0 0 0 24px;border-left:2px solid var(--laiton);font:400 18px/1.75 var(--t);color:#4d545c}
.chronique table{width:100%;border-collapse:collapse;font-size:15px;margin:20px 0}
.chronique th,.chronique td{border-bottom:1px solid var(--trait);padding:10px 8px;text-align:left}
.chronique th{font:400 12px/1 var(--f);text-transform:uppercase;letter-spacing:.1em;color:var(--doux)}

.pied{background:var(--marine);color:#a8b5c2;margin-top:34px}
.pied .quartier{padding:32px 24px;font-size:14px;text-align:center}
.pied a{color:#fff}
.pied p{margin:0 auto 12px;max-width:62ch}

@media(max-width:800px){
  .annonces li{grid-template-columns:1fr;gap:8px}
  .annonces .secteur{text-align:left}
  .vitrine h1{font-size:28px}
  .chronique{padding:28px 24px}
  .porte a.titre{font-size:27px}
}