/* Identite reprise du guide papier : encre, bordeaux, or, papier creme. */
:root{
  --encre:#16202E; --encre-2:#3E4654; --ardoise:#5A6472; --bleug:#6E7684;
  --papier:#FBFAF7; --surface:#FFFFFF; --panneau:#F4F1EA;
  --bordeaux:#7B2D26; --bordeaux-c:#5C211C;
  --or:#C89A4A; --or-pale:#FAF3E4;
  --vert:#2F5347; --rouge:#A6323F;
  --filet:#DCD7CB; --filet-l:#E8E4DA; --gris:#8A8478;
  --serif:'Spectral',Georgia,'Times New Roman',serif;
  --sans:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --gouttiere:26px; --rayon:2px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--encre);font:16px/1.5 var(--sans);
     -webkit-font-smoothing:antialiased}
a{color:var(--bordeaux);text-decoration:none}
a:hover{color:var(--bordeaux-c);text-decoration:underline}
h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0}
.maison h3 a{color:inherit}
.maison h3 a:hover{color:var(--bordeaux)}
.conteneur{max-width:1280px;margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------------------------------------------------------------- en-tete */
.tete{background:var(--encre);color:var(--papier);position:sticky;top:0;z-index:40}
.tete-h{display:flex;align-items:center;gap:20px;height:60px}
.marque{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--papier);
        letter-spacing:-.01em;white-space:nowrap}
.marque:hover{color:var(--or);text-decoration:none}
.marque .pt{color:var(--or)}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav a{color:rgba(251,250,247,.82);font-size:13px;letter-spacing:.04em;padding:8px 11px;
       border-radius:var(--rayon);text-transform:uppercase;font-weight:500}
.nav a:hover,.nav a[aria-current=page]{color:var(--or);background:rgba(255,255,255,.06);text-decoration:none}
.langue{display:flex;border:1px solid rgba(255,255,255,.22);border-radius:var(--rayon);overflow:hidden;margin-left:8px}
.langue button{background:none;border:0;color:rgba(251,250,247,.7);font:600 11px var(--sans);
               letter-spacing:.1em;padding:6px 10px;cursor:pointer}
.langue button[aria-pressed=true]{background:var(--or);color:var(--encre)}
.burger{display:none;background:none;border:0;color:var(--papier);font-size:22px;cursor:pointer;margin-left:auto}

/* ---------------------------------------------------------------- bandeau marches */
.marches{background:#111A26;border-top:1px solid rgba(255,255,255,.08);overflow:hidden}
.marches-p{display:flex;gap:0;overflow-x:auto;scrollbar-width:none}
.marches-p::-webkit-scrollbar{display:none}
.cote{flex:0 0 auto;padding:9px 18px;border-right:1px solid rgba(255,255,255,.07);
      display:flex;align-items:baseline;gap:9px;white-space:nowrap}
.cote .n{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:rgba(251,250,247,.55)}
.cote .p{font-family:var(--serif);font-size:15px;font-weight:600;color:var(--papier);
         font-variant-numeric:tabular-nums}
.cote .v{font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums}
.v.up{color:#7FB88F}.v.down{color:#E08E96}.v.flat{color:rgba(251,250,247,.5)}
.marches-etat{font-size:10.5px;color:rgba(251,250,247,.45);padding:5px 24px;
              border-top:1px solid rgba(255,255,255,.06);letter-spacing:.04em}
.marches-etat b{color:var(--or);font-weight:600}

/* ---------------------------------------------------------------- grille */
.page{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--gouttiere);
      padding:28px 0 60px;align-items:start}
.colonne{min-width:0}
.bloc{background:var(--surface);border:1px solid var(--filet-l);margin-bottom:var(--gouttiere)}
.bloc-t{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
        padding:13px 18px;border-bottom:1px solid var(--filet)}
.bloc-t h1,.bloc-t h2{font-size:15px;font-family:var(--serif);font-weight:600;margin:0}
.bloc-t .compl{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--gris)}
.bloc-c{padding:4px 18px 14px}

/* ---------------------------------------------------------------- actualite */
.filtres{display:flex;flex-wrap:wrap;gap:6px;padding:12px 18px;border-bottom:1px solid var(--filet-l);
         background:var(--panneau)}
.filtre{background:var(--surface);border:1px solid var(--filet);color:var(--ardoise);
        font:500 11.5px var(--sans);letter-spacing:.05em;padding:5px 11px;border-radius:var(--rayon);
        cursor:pointer;text-transform:uppercase}
.filtre:hover{border-color:var(--bordeaux);color:var(--bordeaux)}
.filtre[aria-pressed=true]{background:var(--bordeaux);border-color:var(--bordeaux);color:#fff}
.fil{list-style:none;margin:0;padding:0}
.fil li{border-bottom:1px solid var(--filet-l)}
.fil li:last-child{border-bottom:0}
.art{display:block;padding:13px 18px}
.art:hover{background:var(--or-pale);text-decoration:none}
.art-m{display:flex;align-items:center;gap:9px;margin-bottom:4px;flex-wrap:wrap}
.art-src{font:600 10px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--bordeaux)}
.art-h{font-size:11px;color:var(--gris);font-variant-numeric:tabular-nums}
.art-lg{font:600 9px var(--sans);letter-spacing:.1em;border:1px solid var(--filet);
        color:var(--gris);padding:1px 5px;border-radius:var(--rayon);text-transform:uppercase}
.art-t{font-family:var(--serif);font-size:16.5px;line-height:1.32;color:var(--encre);margin:0}
.art:hover .art-t{color:var(--bordeaux-c)}
.art-t::after{content:'\2197';font-family:var(--sans);font-size:11px;color:var(--gris);
              margin-left:6px;vertical-align:2px}

/* ---------------------------------------------------------------- annuaire */
.recherche{display:flex;flex-wrap:wrap;gap:10px;padding:16px 18px;background:var(--panneau);
           border-bottom:1px solid var(--filet)}
.recherche input[type=search]{flex:1 1 260px;min-width:0;font:15px var(--sans);padding:9px 12px;
  border:1px solid var(--filet);background:var(--surface);color:var(--encre);border-radius:var(--rayon)}
.recherche select{font:13px var(--sans);padding:9px 10px;border:1px solid var(--filet);
  background:var(--surface);color:var(--encre);border-radius:var(--rayon)}
.recherche input:focus,.recherche select:focus{outline:2px solid var(--or);outline-offset:-1px}
.compte{padding:10px 18px;font-size:12.5px;color:var(--ardoise);border-bottom:1px solid var(--filet-l)}
.compte b{color:var(--encre);font-variant-numeric:tabular-nums}
.maisons{list-style:none;margin:0;padding:0}
.maison{border-bottom:1px solid var(--filet-l);padding:14px 18px;cursor:pointer;
        display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:start}
.maison:hover{background:var(--or-pale)}
.maison.annonceur{border-left:3px solid var(--or);padding-left:15px}
.maison h3{font-size:16px;line-height:1.25}
.maison .sous{font:600 10px var(--sans);letter-spacing:.11em;text-transform:uppercase;
              color:var(--bleug);margin-top:3px}
.maison .sous .qg{color:var(--bordeaux)}.maison .sous .qt{color:var(--vert)}
.maison .adr{font-size:13px;color:var(--ardoise);margin-top:5px}
.maison .cont{font-size:12.5px;color:var(--ardoise);margin-top:3px;display:flex;gap:14px;flex-wrap:wrap}
.pastille{font:600 9.5px var(--sans);letter-spacing:.09em;text-transform:uppercase;
          border:1px solid var(--filet);color:var(--gris);padding:2px 7px;border-radius:var(--rayon);
          white-space:nowrap;align-self:start}
.reserve{font-size:11px;color:var(--gris);margin-top:5px;font-style:italic}

/* fiche detaillee */
.fiche-fond{position:fixed;inset:0;background:rgba(15,12,8,.42);z-index:60;display:none}
.fiche-fond.on{display:block}
.fiche{position:fixed;top:0;right:0;bottom:0;width:min(520px,100%);background:var(--surface);
       z-index:61;transform:translateX(100%);transition:transform .22s ease;overflow-y:auto;
       box-shadow:-10px 0 40px rgba(15,12,8,.14)}
.fiche.on{transform:none}
.fiche-t{position:sticky;top:0;background:var(--surface);border-bottom:1px solid var(--filet);
         padding:18px 22px;display:flex;justify-content:space-between;gap:16px;align-items:start}
.fiche-t h2{font-size:21px;line-height:1.2}
.fermer{background:none;border:0;font-size:24px;line-height:1;color:var(--gris);cursor:pointer;padding:0 2px}
.fermer:hover{color:var(--bordeaux)}
.fiche-c{padding:18px 22px 40px}
.champ{margin-bottom:15px}
.champ dt{font:600 9.5px var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--gris);
          margin-bottom:3px}
.champ dd{margin:0;font-size:14.5px;line-height:1.5}
.but{font-family:var(--serif);font-size:13.5px;line-height:1.55;color:var(--encre-2)}
.fiche .annonce{background:var(--or-pale);border-left:2px solid var(--bordeaux);padding:12px 14px;
                margin:18px 0 0}
.fiche .annonce span{font:600 9px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--bordeaux)}

/* ---------------------------------------------------------------- lateral */
.aside .bloc-c{padding:14px 18px}
.x-liste{min-height:200px}
.x-vide{font-size:13px;color:var(--ardoise);line-height:1.55}
.x-vide code{background:var(--panneau);padding:1px 5px;font-size:12px}
.encart{background:var(--or-pale);border:1px solid var(--or);padding:18px}
.encart .et{font:600 9px var(--sans);letter-spacing:.17em;text-transform:uppercase;color:var(--bordeaux)}
.encart h3{font-size:17px;margin:7px 0 7px}
.encart p{font-size:13.5px;color:var(--encre-2);margin:0 0 12px;line-height:1.5}
.bouton{display:inline-block;background:var(--bordeaux);color:#fff;font:600 12px var(--sans);
        letter-spacing:.06em;text-transform:uppercase;padding:9px 16px;border-radius:var(--rayon)}
.bouton:hover{background:var(--bordeaux-c);color:#fff;text-decoration:none}
.chiffres{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--filet-l)}
.chiffre{background:var(--surface);padding:14px 16px}
.chiffre b{display:block;font-family:var(--serif);font-size:25px;color:var(--bordeaux);
           font-variant-numeric:tabular-nums;line-height:1}
.chiffre span{font-size:11.5px;color:var(--ardoise);display:block;margin-top:4px;line-height:1.35}

/* ---------------------------------------------------------------- pied */
.pied{background:var(--encre);color:rgba(251,250,247,.72);padding:36px 0 44px;margin-top:20px}
.pied-g{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}
.pied h4{font:600 10px var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--or);margin:0 0 10px}
.pied p,.pied li{font-size:12.5px;line-height:1.6;margin:0 0 7px}
.pied ul{list-style:none;padding:0;margin:0}
.pied a{color:rgba(251,250,247,.82)}
.pied a:hover{color:var(--or)}
.mentions{border-top:1px solid rgba(255,255,255,.12);margin-top:26px;padding-top:16px;
          font-size:11.5px;color:rgba(251,250,247,.5)}

.etat{padding:26px 18px;text-align:center;color:var(--gris);font-size:13.5px}
.erreur{color:var(--bordeaux)}

/* ---------------------------------------------------------------- mobile */
@media(max-width:1000px){
  .page{grid-template-columns:minmax(0,1fr)}
  .aside{order:2}
  .pied-g{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .conteneur{padding:0 16px}
  .burger{display:block}
  .nav{position:absolute;top:60px;left:0;right:0;background:var(--encre);flex-direction:column;
       align-items:stretch;padding:8px 16px 14px;display:none;border-top:1px solid rgba(255,255,255,.1)}
  .nav.on{display:flex}
  .nav a{padding:11px 4px}
  .langue{margin:8px 0 0;align-self:flex-start}
  .pied-g{grid-template-columns:1fr}
  .maison{grid-template-columns:minmax(0,1fr)}
  .art-t{font-size:15.5px}
}