/* =========================================================
   L'Adresse Marrakchie — feuille de style du site
   Palette relevée sur le logo du graphiste, 22 août 2026.
   ========================================================= */

:root{
  --brique:#6C301E;   --brique-fonce:#4A2016;  --cuivre:#B5765A;
  --vert:#1B6560;     --vert-fonce:#17544F;    --vert-pale:#E4F0EE;
  --or:#B98745;       --or-clair:#E2BE8A;      --or-pale:#F5E9D6;
  --creme:#F5EEE2;    --sable:#EADFD0;         --sombre:#3F332B;
  --blanc:#FFFFFF;    --fond:#FCFAF6;
  --texte:#3A2118;    --doux:#7A6154;          --ligne:#E4D6C5;
  --ombre:0 1px 2px rgba(58,33,24,.05), 0 8px 24px -12px rgba(58,33,24,.18);
  --ombre-h:0 2px 4px rgba(58,33,24,.07), 0 18px 40px -16px rgba(58,33,24,.28);
  --r:3px;
  --large:1180px;
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0; background:var(--fond); color:var(--texte);
  font-family:Poppins,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:300; font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--vert)}
:where(a,button):focus-visible{outline:2px solid var(--vert); outline-offset:3px; border-radius:2px}

h1,h2,h3,h4{font-family:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif; text-wrap:balance; margin:0}
h1{font-weight:800; font-size:clamp(28px,4.4vw,44px); line-height:1.08; letter-spacing:-.02em}
h2{font-weight:700; font-size:clamp(22px,3vw,30px); line-height:1.15; letter-spacing:-.015em; color:var(--brique)}
h3{font-weight:700; font-size:19px; line-height:1.25}
h4{font-weight:700; font-size:15px; color:var(--brique)}

.centre{max-width:var(--large); margin:0 auto; padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------- en-tête */
.entete{background:var(--blanc); border-bottom:1px solid var(--ligne); position:relative; z-index:10}
.entete .centre{display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:78px}
.entete .logo img{height:44px; width:auto}
.nav-site{display:flex; gap:26px; align-items:center; list-style:none; margin:0; padding:0}
.nav-site a{
  font-family:Archivo,sans-serif; font-weight:600; font-size:13.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--texte); text-decoration:none; padding:6px 0;
  border-bottom:2px solid transparent;
}
.nav-site a:hover,.nav-site .current-menu-item > a{color:var(--brique); border-bottom-color:var(--or)}

/* ------------------------------------- sous-menus du menu principal (10/09) */
.nav-site > li{position:relative}
.nav-site .sans-lien{
  font-family:Archivo,sans-serif; font-weight:600; font-size:13.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--texte); padding:6px 0; cursor:default;
  border-bottom:2px solid transparent; display:inline-block;
}
.nav-site .a-sous-menu > a::after,
.nav-site .a-sous-menu > .sans-lien::after{content:"\2009\25BE"; font-size:.85em; opacity:.55}

/* Le bouton de dépliage ne sert qu'au tactile : sur grand écran, le survol
   suffit et le chevron du parent fait déjà l'indication. */
.nav-site .sm-bouton{display:none}
.nav-bouton{display:none}

.nav-site .sous-menu{
  position:absolute; top:100%; left:-16px; z-index:20;
  min-width:230px; margin:0; padding:8px 0; list-style:none;
  background:var(--blanc); border:1px solid var(--ligne); border-radius:2px;
  box-shadow:0 14px 34px rgba(60,40,25,.16);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav-site .a-sous-menu:hover > .sous-menu,
.nav-site .a-sous-menu:focus-within > .sous-menu{opacity:1; visibility:visible; transform:none}

.nav-site .sous-menu li{margin:0}
.nav-site .sous-menu a{
  display:block; padding:8px 18px; font-size:12.5px; letter-spacing:.04em;
  border-bottom:0; text-transform:none; font-weight:500;
}
.nav-site .sous-menu a:hover{background:var(--creme); color:var(--brique); border-bottom:0}

/* Les deux rubriques de riads, et les sous-quartiers : rattachés visuellement
   à la ligne du dessus plutôt que posés au même niveau. */
.nav-site .sous-menu .fille a{padding-left:34px; color:var(--doux); font-size:12px}
.nav-site .sous-menu .fille a::before{content:"\2014\2009"; opacity:.4}

/* ------------------------------------------- le menu sur petit écran (11/09)
   Il n'y a pas de survol sur un téléphone. Avant cette date, les sous-menus
   étaient donc affichés dépliés : onze liens occupaient le premier écran.
   Ici, le menu se replie derrière un bouton, et chaque sous-menu s'ouvre à la
   demande. Tout est conditionné à .nav-js, posée par assets/nav.js : sans le
   script, on retombe sur un menu déplié — moins élégant, jamais bloquant. */
@media (max-width:960px){

  .entete .centre{flex-wrap:wrap; gap:12px; padding-top:12px; padding-bottom:12px; min-height:0}
  .entete .logo{flex:1 1 auto}
  .entete .logo img{height:38px}

  /* Le bouton à trois barres. */
  .nav-js .nav-bouton{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    order:2; width:44px; height:44px; padding:0 10px;
    background:none; border:1px solid var(--ligne); border-radius:3px; cursor:pointer;
  }
  .nav-js .nav-bouton span{display:block; height:2px; background:var(--texte); border-radius:2px; transition:transform .2s ease, opacity .2s ease}
  .nav-js .nav-bouton.actif span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-js .nav-bouton.actif span:nth-child(2){opacity:0}
  .nav-js .nav-bouton.actif span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-js .nav-bouton:focus-visible{outline:3px solid var(--or); outline-offset:2px}

  .entete nav{order:4; width:100%}

  /* La liste : repliée par défaut DÈS LORS QUE le script tourne. */
  .nav-js .nav-site{display:none}
  .nav-js .nav-site.ouvert{display:block}

  .nav-site{width:100%; flex-direction:column; align-items:stretch; gap:0;
            border-top:1px solid var(--ligne); margin-top:4px; padding-top:4px}
  .nav-site > li{width:100%; position:relative; border-bottom:1px solid var(--ligne)}
  .nav-site > li:last-child{border-bottom:0}
  .nav-site > li > a,
  .nav-site > li > .sans-lien{display:block; padding:13px 46px 13px 2px; font-size:13px; border-bottom:0}
  .nav-site .a-sous-menu > a::after,
  .nav-site .a-sous-menu > .sans-lien::after{content:""}

  /* Le bouton de dépliage, à droite de la ligne du parent. Le lien du parent
     reste cliquable : on ne perd pas l'accès au catalogue pour avoir voulu
     voir ses rubriques. */
  .nav-js .nav-site .sm-bouton{
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:0; right:0; width:46px; height:48px;
    background:none; border:0; border-left:1px solid var(--ligne);
    color:var(--doux); font-size:15px; cursor:pointer;
  }
  .nav-js .nav-site .sm-bouton span{display:block; transition:transform .2s ease}
  .nav-js .nav-site .a-sous-menu.ouvert > .sm-bouton span{transform:rotate(180deg)}
  .nav-js .nav-site .sm-bouton:focus-visible{outline:3px solid var(--or); outline-offset:-3px}

  /* Les sous-menus : à plat, sans ombre ni survol. */
  .nav-site .sous-menu{
    position:static; opacity:1; visibility:visible; transform:none;
    border:0; box-shadow:none; background:var(--creme); padding:4px 0 8px; min-width:0;
  }
  .nav-site .sous-menu::before{display:none}
  .nav-site .sous-menu a{padding:9px 2px 9px 16px}
  .nav-site .sous-menu a:hover{background:none}
  .nav-site .sous-menu .fille a{padding-left:34px}

  .nav-js .nav-site .sous-menu{display:none}
  .nav-js .nav-site .a-sous-menu.ouvert > .sous-menu{display:block}

  .wa-entete{order:3}
}

/* ---------------------------------------------------- bandeau de page */
.bandeau{background:var(--creme); border-bottom:1px solid var(--ligne); padding:38px 0 34px}
.bandeau h1{color:var(--brique)}
.bandeau .intro{max-width:62ch; margin:14px 0 0; color:var(--doux); font-size:17px}
.fil{font-size:13px; color:var(--doux); margin:0 0 12px; display:flex; flex-wrap:wrap; gap:7px; align-items:center}
.fil a{color:var(--doux); text-decoration:none}
.fil a:hover{color:var(--vert); text-decoration:underline}
.fil .sep{opacity:.45}

/* ---------------------------------------------------- grille du catalogue */
.grille{display:grid; gap:24px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); margin:34px 0}

.bien{
  position:relative; background:var(--blanc); border:1px solid var(--ligne);
  border-radius:var(--r); box-shadow:var(--ombre);
  transition:box-shadow .22s ease, transform .22s ease;
  display:flex; flex-direction:column;
}
.bien:hover{box-shadow:var(--ombre-h); transform:translateY(-2px)}

.bien-visuel{position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:var(--r) var(--r) 0 0; background:var(--sable)}
.bien-visuel img{width:100%; height:100%; object-fit:cover}
.bien-visuel .vide{
  width:100%; height:100%; display:grid; place-items:center;
  background:linear-gradient(150deg,#EFE4D4 0%,#DCC9AF 100%);
}
.bien-visuel .vide img{width:42%; height:auto; opacity:.28}

.rubans{position:absolute; top:10px; left:10px; z-index:3; display:flex; flex-direction:column; gap:6px; align-items:flex-start}
.ruban{
  font-family:Archivo,sans-serif; font-weight:700; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; padding:4px 9px; border-radius:2px; color:#fff;
}
.ruban.excl{background:#54230F}
.ruban.coup{background:#C79A5B; color:#33200F}
.ruban.rare{background:#1B6560}
.ruban.expl{background:#1F6F6B}
.ruban.conclu{background:#4E4A45}

.compteur{
  position:absolute; left:10px; bottom:10px; z-index:3;
  font-family:Archivo,sans-serif; font-weight:600; font-size:10.5px; letter-spacing:.06em;
  color:#fff; background:rgba(40,24,16,.62); padding:3px 8px; border-radius:2px;
  font-variant-numeric:tabular-nums;
}

.bien-corps{padding:15px 16px 17px; display:flex; flex-direction:column; flex:1}
.eyebrow{
  font-family:Archivo,sans-serif; font-weight:600; font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--vert); margin:0 0 7px;
}
.bien h3{margin:0 0 11px; font-size:17px; color:var(--texte); line-height:1.28}
.bien h3 a{color:inherit; text-decoration:none}
.bien h3 a:hover{color:var(--brique)}

.prix{
  font-family:Archivo,sans-serif; font-weight:800; font-size:20.5px; color:var(--brique);
  letter-spacing:-.012em; font-variant-numeric:tabular-nums; line-height:1.1; margin:0;
}
.prix .dev{font-size:13px; font-weight:600; letter-spacing:.02em; margin-left:3px}
.prix .par{font-family:Poppins,sans-serif; font-weight:300; font-size:12.5px; color:var(--doux)}
.prix.demande{font-size:16px; letter-spacing:0}
/* Équivalent euro indicatif, sous le prix en dirhams. */
.prix .prix-eur{
  display:block; margin-top:3px;
  font-family:Poppins,sans-serif; font-weight:400; font-size:13px;
  letter-spacing:0; color:var(--doux);
}
.prix .prix-eur-date{font-size:11.5px; font-weight:300}
/* Sur une vignette, la mention du taux surcharge la carte : elle ne figure
   que sur la fiche du bien, où le visiteur regarde le prix de près. */
.bien .prix .prix-eur-date{display:none}
.bien.conclu .prix .prix-eur{text-decoration:line-through; text-decoration-thickness:1px}
.bien.conclu .bien-visuel img{filter:saturate(.35)}
.bien.conclu .prix .mt{text-decoration:line-through; text-decoration-thickness:1.5px; color:var(--doux)}

.carac{
  display:flex; flex-wrap:wrap; gap:0 14px; margin-top:12px; padding-top:12px;
  border-top:1px solid var(--ligne); font-size:13px; color:var(--doux);
}
.carac span{display:inline-flex; align-items:center; gap:5px; font-variant-numeric:tabular-nums}
.carac svg{width:14px; height:14px; flex:none; stroke:var(--cuivre); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.ref{
  margin:11px 0 0; font-family:Archivo,sans-serif; font-weight:500; font-size:10.5px;
  letter-spacing:.09em; color:var(--doux); text-transform:uppercase;
}

/* ---------------------------------------------------- fiche du bien */
.fiche{background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); overflow:hidden; box-shadow:var(--ombre); margin:26px 0 40px}

.galerie{display:grid; grid-template-columns:2fr 1fr; gap:5px; position:relative}
.galerie .g-p{position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--sable)}
.galerie .g-col{display:grid; grid-template-rows:1fr 1fr; gap:5px}
.galerie .g-s{position:relative; overflow:hidden; background:var(--sable)}
.galerie img{width:100%; height:100%; object-fit:cover}
.galerie .vide{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(150deg,#EFE4D4 0%,#DCC9AF 100%)}
.galerie .vide img{width:34%; opacity:.28}
.galerie.seule{grid-template-columns:1fr}
.galerie .g-s:only-child{grid-row:1 / -1}
.g-plus{
  position:absolute; right:9px; bottom:9px; z-index:2;
  font-family:Archivo,sans-serif; font-weight:700; font-size:11px; letter-spacing:.06em;
  color:#fff; background:rgba(28,26,24,.72); padding:5px 10px; border-radius:2px;
}

.f-tete{padding:26px 26px 0; display:flex; flex-wrap:wrap; gap:24px; align-items:flex-start; justify-content:space-between}
.f-tete-g{flex:1 1 340px; min-width:0}
.f-tete h1{font-size:clamp(21px,2.6vw,27px); font-weight:700; color:var(--texte); letter-spacing:-.015em; margin:8px 0 10px; line-height:1.2}
.f-meta{font-size:13.5px; color:var(--doux); display:flex; flex-wrap:wrap; gap:6px 14px; margin:0}
.f-meta .r{font-family:Archivo,sans-serif; font-weight:500; letter-spacing:.07em; text-transform:uppercase; font-size:11px}
.f-prix{flex:0 1 auto; min-width:0; max-width:100%; text-align:right}
.f-prix .v{font-family:Archivo,sans-serif; font-weight:800; font-size:clamp(26px,3.4vw,34px); color:var(--brique); letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1; margin:0}
.f-prix .v .dev{font-size:16px; font-weight:600; margin-left:4px; letter-spacing:.02em}
/* L'équivalent euro sur la fiche d'un bien. Le gabarit de la fiche renomme
   « prix » en « v » : sans ces règles, l'euro héritait du gros chiffre,
   restait sur la même ligne et débordait de la carte (constaté le 3 octobre
   2026 sur LAM-0003). */
.f-prix .v .prix-eur{
  display:block; margin-top:6px;
  font-family:Poppins,sans-serif; font-weight:400; font-size:14px;
  letter-spacing:0; line-height:1.4; color:var(--doux);
}
.f-prix .v .prix-eur-date{font-size:12px; font-weight:300}
.fiche.conclu .f-prix .v .prix-eur{text-decoration:line-through; text-decoration-thickness:1px}
.f-prix .m2{font-size:12.5px; color:var(--doux); margin:6px 0 0; font-variant-numeric:tabular-nums}

.chiffres{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  gap:1px; background:var(--ligne); border-top:1px solid var(--ligne); border-bottom:1px solid var(--ligne);
  margin:24px 0 0;
}
.chiffre{background:var(--blanc); padding:16px 14px; text-align:center}
.chiffre .n{font-family:Archivo,sans-serif; font-weight:700; font-size:20px; color:var(--texte); font-variant-numeric:tabular-nums; line-height:1.15; margin:0}
.chiffre .n small{font-size:12px; font-weight:600; color:var(--doux); margin-left:2px}
.chiffre .l{font-family:Archivo,sans-serif; font-weight:600; font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--doux); margin:6px 0 0}

.f-corps{display:grid; grid-template-columns:1fr 316px; gap:34px; padding:28px 26px 30px; align-items:start}
.f-texte h2{color:var(--brique); font-size:15px; font-weight:700; letter-spacing:.01em; margin:0 0 12px}
.f-texte p{font-size:15px; line-height:1.72; margin:0 0 14px; max-width:62ch}
.f-texte section + section{margin-top:26px}

.presta{list-style:none; margin:0; padding:0; display:grid; gap:9px 20px; grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.presta li{display:flex; gap:9px; align-items:flex-start; font-size:14.5px}
.presta li::before{content:""; flex:none; width:6px; height:6px; margin-top:8px; border-radius:50%; background:var(--vert)}

.tableau{width:100%; border-collapse:collapse; font-size:14.5px}
.tableau th,.tableau td{text-align:left; padding:9px 0; border-bottom:1px solid var(--ligne); vertical-align:top}
.tableau th{font-weight:400; color:var(--doux); width:48%}
.tableau td{font-weight:400; font-variant-numeric:tabular-nums}

.aside{position:sticky; top:20px; display:grid; gap:14px}
.carte-contact{background:var(--creme); border:1px solid var(--ligne); border-radius:var(--r); padding:20px}
.conseiller{display:flex; gap:13px; align-items:center; margin-bottom:16px}
.pastille{flex:none; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:var(--brique); color:var(--creme); font-family:Archivo,sans-serif; font-weight:700; font-size:16px}
.conseiller .nom{font-family:Archivo,sans-serif; font-weight:700; font-size:15.5px; line-height:1.25; margin:0}
.conseiller .role{font-size:12.5px; color:var(--doux); margin:0}
.btn{display:block; width:100%; text-align:center; border:0; border-radius:2px; cursor:pointer;
  font-family:Archivo,sans-serif; font-weight:700; font-size:13.5px; letter-spacing:.03em; padding:13px 16px; text-decoration:none}
.btn.plein{background:var(--vert); color:#fff}
.btn.plein:hover{background:var(--brique)}
.btn.vide{background:transparent; color:var(--brique); border:1.5px solid var(--ligne); margin-top:9px}
.btn.vide:hover{border-color:var(--brique)}
.tel{display:block; text-align:center; margin-top:13px; font-size:13.5px; color:var(--doux); text-decoration:none}
.tel strong{font-family:Archivo,sans-serif; font-weight:700; color:var(--texte); font-variant-numeric:tabular-nums}
.tel:hover strong{color:var(--vert)}
.rassure{margin:14px 0 0; padding:0; list-style:none; display:grid; gap:7px; font-size:12.5px; color:var(--doux); line-height:1.5}
.rassure li{display:flex; gap:8px}
.rassure li::before{content:"—"; color:var(--or); flex:none}

.avis-conclu{
  background:var(--sable); border-left:3px solid var(--brique); padding:14px 18px;
  margin:0; font-size:14.5px; color:var(--texte);
}
.avis-conclu strong{font-family:Archivo,sans-serif}

/* ---------------------------------------------------- filtres */
.filtres{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:26px 0 0; padding:16px 18px;
  background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r)}
.filtres label{font-family:Archivo,sans-serif; font-weight:600; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--doux)}
.filtres select{
  font-family:inherit; font-size:14px; padding:8px 10px; border:1px solid var(--ligne);
  border-radius:2px; background:var(--blanc); color:var(--texte); min-width:150px;
}
.filtres .btn{width:auto; padding:9px 18px}
.compte-resultats{margin:22px 0 0; font-size:14px; color:var(--doux)}

/* ---------------------------------------------------- pagination */
.pagination{display:flex; gap:6px; justify-content:center; margin:34px 0 10px; flex-wrap:wrap}
.pagination .page-numbers{
  font-family:Archivo,sans-serif; font-weight:600; font-size:14px; padding:8px 13px;
  border:1px solid var(--ligne); border-radius:2px; text-decoration:none; color:var(--texte); background:var(--blanc);
}
.pagination .page-numbers.current{background:var(--brique); color:#fff; border-color:var(--brique)}
.pagination .page-numbers:hover:not(.current){border-color:var(--brique); color:var(--brique)}

/* ---------------------------------------------------- pied de page */
.pied{background:var(--sombre); color:#E4D8C9; margin-top:56px; padding:44px 0 26px}
.pied a{color:#E4D8C9; text-decoration:none}
.pied a:hover{color:var(--or-clair)}
.pied-haut{display:grid; gap:32px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.pied img.logo{height:52px; width:auto; margin-bottom:14px}
.pied h4{color:var(--or-clair); font-size:12px; letter-spacing:.12em; text-transform:uppercase; margin:0 0 12px}
.pied ul{list-style:none; margin:0; padding:0; display:grid; gap:7px; font-size:14.5px}
.pied p{font-size:14.5px; margin:0 0 8px; line-height:1.6}
.pied-bas{margin-top:34px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); font-size:12.5px; color:#A7947F; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between}
.pied-bas .pied-legal{display:flex; flex-wrap:wrap; gap:18px}
.pied-bas .pied-legal a{color:#A7947F}
.pied-bas .pied-legal a:hover{color:var(--or-clair)}
.pied-bas .pied-taux{color:#8C7A68}
.prix-eur-date a{color:inherit}

/* ---------------------------------------------------- vide */
.rien{background:var(--blanc); border:1px dashed var(--ligne); border-radius:var(--r); padding:44px 26px; text-align:center; margin:34px 0}
.rien h2{margin:0 0 10px}
.rien p{color:var(--doux); margin:0 auto; max-width:52ch}

/* ---------------------------------------------------- adaptatif */
@media (max-width:900px){
  .f-corps{grid-template-columns:1fr; gap:26px}
  .aside{position:static}
  .galerie{grid-template-columns:1fr}
  .galerie .g-col{grid-template-rows:none; grid-template-columns:1fr 1fr}
  .galerie .g-s{aspect-ratio:3/2}
  .f-tete,.f-corps{padding-left:18px; padding-right:18px}
  .f-prix{text-align:left}
}
@media (max-width:720px){
  .entete .centre{flex-wrap:wrap; padding-top:14px; padding-bottom:14px; min-height:0}
  .nav-site{gap:16px; flex-wrap:wrap; width:100%}
  .nav-site a{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }

/* ---------------------------------------------------- Ouverture des photos */
.g-ouvrir{
  display:block; width:100%; height:100%; padding:0; border:0; background:none;
  cursor:zoom-in; position:relative; overflow:hidden;
}
.g-ouvrir img{transition:transform .5s ease}
.g-ouvrir:hover img{transform:scale(1.035)}
.g-ouvrir:focus-visible{outline:3px solid var(--or); outline-offset:-3px}

.g-barre{margin:10px 26px 0; text-align:right}
.btn-photos{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family:Archivo,sans-serif; font-weight:600; font-size:12.5px; letter-spacing:.04em;
  color:var(--texte); background:#fff; border:1.5px solid var(--ligne);
  border-radius:2px; padding:9px 15px; transition:border-color .18s, color .18s;
}
.btn-photos:hover{border-color:var(--brique); color:var(--brique)}
.btn-photos svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6}

/* ---------------------------------------------------- Visionneuse */
html.v-ouverte{overflow:hidden}
.visionneuse{position:fixed; inset:0; z-index:9000}
.visionneuse[hidden]{display:none}
.v-fond{position:absolute; inset:0; background:rgba(20,18,16,.94)}
.v-boite{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}
.v-scene{
  position:relative; width:min(92vw,1200px); height:min(84vh,860px);
  display:flex; align-items:center; justify-content:center;
}
.v-vue{display:none; margin:0; width:100%; height:100%; flex-direction:column; align-items:center; justify-content:center}
.v-vue.active{display:flex}
.v-vue img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block}
.v-vue figcaption{margin-top:12px; color:#d9d2c8; font-size:13px; text-align:center}

.v-compteur{
  position:absolute; top:20px; left:24px; margin:0; z-index:2;
  font-family:Archivo,sans-serif; font-weight:600; font-size:12.5px; letter-spacing:.09em;
  color:#e8e2d8; font-variant-numeric:tabular-nums;
}
.visionneuse button{
  position:absolute; z-index:2; cursor:pointer; border:0; color:#fff;
  background:rgba(255,255,255,.1); border-radius:50%; line-height:1;
  transition:background .18s;
}
.visionneuse button:hover{background:var(--brique)}
.visionneuse button:focus-visible{outline:2px solid var(--or); outline-offset:3px}
.v-fermer{top:14px; right:18px; width:44px; height:44px; font-size:27px}
.v-prec,.v-suiv{top:50%; transform:translateY(-50%); width:52px; height:52px; font-size:34px; padding-bottom:5px}
.v-prec{left:18px}
.v-suiv{right:18px}

@media (max-width:720px){
  .g-barre{margin:10px 18px 0; text-align:center}
  .btn-photos{width:100%; justify-content:center}
  .v-scene{width:100vw; height:76vh}
  .v-prec,.v-suiv{width:42px; height:42px; font-size:27px}
  .v-prec{left:6px}
  .v-suiv{right:6px}
}

/* =========================================================
   Page d'accueil
   ========================================================= */
.bloc{padding:52px 24px}
.bloc-tete{display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:8px}
.bloc-chapo{max-width:62ch; color:var(--doux); margin:0 0 26px; font-size:16.5px}
.lien-suite{
  font-family:Archivo,sans-serif; font-weight:600; font-size:13px; letter-spacing:.04em;
  color:var(--vert); text-decoration:none; white-space:nowrap;
}
.lien-suite:hover{color:var(--brique)}

/* ---------------------------------------------------- ouverture */
.accueil-une{background:var(--creme); border-bottom:1px solid var(--ligne)}
.au-grille{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; padding-top:56px; padding-bottom:56px}
.au-texte h1{color:var(--brique); font-size:clamp(30px,4vw,46px); margin:10px 0 20px}
.au-chapo{max-width:52ch; font-size:17.5px; color:var(--texte); margin:0}
.au-boutons{display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 0}
.au-boutons .btn{display:inline-block; width:auto; padding:13px 26px; margin:0}
.au-visuel{
  position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:var(--r);
  box-shadow:var(--ombre-h); background:var(--sable);
}
.au-visuel img{width:100%; height:100%; object-fit:cover}
.au-visuel .vide{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(150deg,#EFE4D4 0%,#DCC9AF 100%)}
.au-visuel .vide img{width:38%; height:auto; opacity:.3}

/* ---------------------------------------------------- engagements */
.engagements{background:var(--blanc); border-bottom:1px solid var(--ligne)}
.engagements .chiffres{border:0; padding:0}
.engagements .chiffre{padding:26px 16px}

/* ---------------------------------------------------- quartiers */
.quartiers-fond{background:var(--creme); border-top:1px solid var(--ligne); border-bottom:1px solid var(--ligne)}
.cartes-quartiers{list-style:none; margin:0; padding:0; display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.cartes-quartiers a{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r);
  padding:15px 17px; text-decoration:none; transition:border-color .18s, box-shadow .18s, transform .18s;
}
.cartes-quartiers a:hover{border-color:var(--or); box-shadow:var(--ombre); transform:translateY(-2px)}
.q-nom{font-family:Archivo,sans-serif; font-weight:700; font-size:16px; color:var(--texte)}
.q-nb{font-size:12.5px; color:var(--doux); white-space:nowrap; font-variant-numeric:tabular-nums}

/* ---------------------------------------------------- services */
.services{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin-top:22px}
.service{
  background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r);
  padding:24px 22px; border-top:3px solid var(--or);
}
.service h3{color:var(--brique); margin:0 0 10px}
.service p{margin:0; font-size:15px; color:var(--doux); line-height:1.62}

/* Cartes des guides (accueil) : toute la carte est un lien. Colonnes de 300 px
   au moins, sans étirement : un guide seul ne s'étale pas sur toute la largeur. */
.guides-accueil .services{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.guide-carte{display:flex; flex-direction:column; text-decoration:none; color:inherit; transition:border-color .18s, box-shadow .18s, transform .18s}
.guide-carte:hover{border-color:var(--or); box-shadow:var(--ombre); transform:translateY(-2px)}
.guide-carte p{margin-bottom:14px}
.guide-lire{margin-top:auto; font-family:Archivo,sans-serif; font-weight:600; font-size:13px; letter-spacing:.04em; color:var(--vert)}
.guide-carte:hover .guide-lire{color:var(--brique)}

/* ---------------------------------------------------- pourquoi nous */
.pourquoi{background:var(--vert-fonce); color:#F1EFEA}
.pq-grille{display:grid; grid-template-columns:1fr 1.2fr; gap:44px; padding-top:58px; padding-bottom:58px}
.pourquoi h2{color:#fff; font-size:clamp(23px,2.9vw,32px)}
.pq-texte p{margin:0 0 15px; color:#DCE7E4; font-size:16.5px; line-height:1.72}
.pq-texte p:last-child{margin-bottom:0}

/* ---------------------------------------------------- bande contact */
.contact-bande{background:var(--sable); border-top:1px solid var(--ligne)}
.cb-grille{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding-top:46px; padding-bottom:46px}
.contact-bande h2{margin:8px 0 10px; font-size:clamp(21px,2.5vw,28px)}
.cb-detail{margin:0; color:var(--doux); font-size:15.5px}
.cb-action p{margin:0 0 18px; font-size:16px}
.cb-action .btn{display:inline-block; width:auto; padding:13px 26px; margin:0}

@media (max-width:860px){
  .au-grille,.pq-grille,.cb-grille{grid-template-columns:1fr; gap:30px}
  .au-grille{padding-top:38px; padding-bottom:38px}
  .bloc{padding:40px 18px}
  .engagements .chiffre{padding:20px 10px}
}

/* ---------------------------------------------------- WhatsApp */
.btn.wa{
  display:flex; align-items:center; justify-content:center; gap:9px;
  background:#1F7A45; color:#fff; border:1.5px solid #1F7A45;
}
.btn.wa:hover{background:#186236; border-color:#186236}
.btn.wa.clair{background:transparent; color:#1F7A45; border-color:#9ECBAF}
.btn.wa.clair:hover{background:#1F7A45; color:#fff; border-color:#1F7A45}
.au-boutons .btn.wa{display:inline-flex; width:auto; padding:13px 24px; margin:0}
.i-wa{width:17px; height:17px; flex:none; fill:currentColor}

.wa-entete{
  display:inline-flex; align-items:center; gap:8px; flex:none;
  font-family:Archivo,sans-serif; font-weight:600; font-size:12.5px; letter-spacing:.05em;
  text-transform:uppercase; text-decoration:none; color:#1F7A45;
  border:1.5px solid #9ECBAF; border-radius:2px; padding:9px 15px;
  transition:background .18s, color .18s, border-color .18s;
}
.wa-entete:hover{background:#1F7A45; color:#fff; border-color:#1F7A45}

.num{
  margin:13px 0 0; text-align:center; font-size:12.5px; color:var(--doux);
  display:flex; flex-direction:column; gap:1px;
}
.num strong{
  font-family:Archivo,sans-serif; font-weight:700; font-size:16px; color:var(--texte);
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
}
.cb-action .num{text-align:left; align-items:flex-start; margin-top:14px}

.pied-wa{margin-top:10px}
.pied-wa a{color:var(--or-clair); text-decoration:none; font-size:14.5px}
.pied-wa a:hover{text-decoration:underline}

@media (max-width:720px){
  .wa-entete{order:3; width:100%; justify-content:center}
}

/* ---------------------------------------------------- formulaire de contact */
.lam-contact{padding:34px 26px 38px; border-top:1px solid var(--ligne); background:var(--fond)}
.lam-contact h2{margin-bottom:8px}
.lam-contact-chapo{max-width:62ch; color:var(--doux); margin:0 0 22px}

.lam-piege{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.lam-champs{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.lam-champ{margin:0; display:flex; flex-direction:column; gap:6px}
.lam-champ.large{grid-column:1 / -1}
.lam-champ label{
  font-family:Archivo,sans-serif; font-weight:600; font-size:12.5px; letter-spacing:.03em;
  color:var(--texte);
}
.lam-champ .req{color:var(--brique)}
.lam-champ .opt{font-weight:400; color:var(--doux); letter-spacing:0}
.lam-champ input,.lam-champ textarea{
  font-family:inherit; font-size:15.5px; color:var(--texte); background:var(--blanc);
  border:1.5px solid var(--ligne); border-radius:var(--r); padding:11px 13px; width:100%;
  transition:border-color .16s;
}
.lam-champ input:focus,.lam-champ textarea:focus{outline:none; border-color:var(--vert)}
.lam-champ textarea{resize:vertical; min-height:130px; line-height:1.6}

.lam-consentement{margin:18px 0 0; font-size:13.5px; color:var(--doux); line-height:1.55}
.lam-consentement label{display:flex; gap:10px; align-items:flex-start; cursor:pointer}
.lam-consentement input{margin-top:3px; flex:none; width:16px; height:16px; accent-color:var(--vert)}

.lam-envoi{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:22px 0 0}
.lam-envoi .btn{display:inline-flex; width:auto; padding:13px 26px; margin:0}
.lam-ou{color:var(--doux); font-size:13.5px}

.lam-avis{border-radius:var(--r); padding:20px 22px; border:1.5px solid}
.lam-avis h3{margin:0 0 6px}
.lam-avis p{margin:0; line-height:1.6}
.lam-avis.ok{background:var(--vert-pale); border-color:#9ECBAF; color:#12463F}
.lam-avis.ok h3{color:#12463F}
.lam-avis.erreur{background:#FBEDE9; border-color:#E2B4A6; color:#7A2B18; margin-bottom:20px}

.contact-grille{display:grid; grid-template-columns:1fr 340px; gap:36px; margin:30px 0 46px; align-items:start}
.contact-grille .lam-contact{padding:0; border:0; background:none}

@media (max-width:860px){
  .contact-grille{grid-template-columns:1fr}
  .lam-contact{padding:28px 18px 32px}
  .lam-envoi .btn{width:100%; justify-content:center}
  .lam-ou{display:none}
}

/* Sortie vers le catalogue complet, en bas d'une page de type ou de quartier. */
.elargir{padding-bottom:52px; text-align:center}

/* ------------------------------------ carte de la fiche (0.9.8.6, 26/09) */
.carte{position:relative; width:100%; aspect-ratio:16/10; max-height:420px; background:var(--creme);
  border:1px solid var(--ligne); border-radius:2px; overflow:hidden}
.carte.active{background:#e8e4dc}
.carte-attente{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:24px; text-align:center}
.carte-attente p{font-size:12.5px !important; line-height:1.55 !important; color:var(--doux); max-width:46ch !important; margin:0 !important}
.btn-carte{display:inline-flex; align-items:center; gap:9px; padding:11px 20px; border:1.5px solid var(--brique);
  border-radius:2px; background:var(--blanc); color:var(--brique); cursor:pointer;
  font-family:Archivo,sans-serif; font-weight:600; font-size:13px; letter-spacing:.04em; text-transform:uppercase}
.btn-carte:hover{background:var(--brique); color:#fff}
.btn-carte:disabled{opacity:.7; cursor:wait}
.btn-carte svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6}
.carte .leaflet-control-attribution{font-size:10.5px}
@media (max-width:600px){ .carte{aspect-ratio:4/3} }

/* Texte de présentation d'un quartier (0.9.8.11) : lecture confortable, titres
   alignés sur ceux des fiches. Posé entre le bandeau et la grille des biens. */
.texte-quartier{padding-top:30px; padding-bottom:6px}
.texte-quartier > *{max-width:62ch}
.texte-quartier h2{color:var(--brique); font-size:19px; font-weight:700; letter-spacing:.01em; margin:26px 0 10px}
.texte-quartier h2:first-child{margin-top:0}
.texte-quartier h3{color:var(--texte); font-size:16px; font-weight:600; margin:18px 0 6px}
.texte-quartier p{font-size:16px; line-height:1.72; margin:0 0 14px}
.texte-quartier ul{margin:0 0 14px; padding-left:20px}
.texte-quartier li{font-size:16px; line-height:1.65; margin:0 0 8px}
.texte-quartier a{color:var(--vert-fonce); text-decoration:underline; text-underline-offset:2px}