/* Darek : le design « Alger la blanche ». Jetons, arches, étoile, fiche, carte.
   Le monde : la baie d'Alger au matin. Le geste : l'arcade du front de mer.
   Les pages de travail sont habillées dans darek-pages.css. */

:root {
  --chaux: #F2F5F4;          /* fond : blanc de chaux tiré vers la lumière de mer */
  --ecume: #FBFCFB;          /* surfaces */
  --baie: #0E2F44;           /* texte, traits forts */
  --volet: #1B6A96;          /* liens, repères : le bleu des volets d'Alger */
  --brume: #567082;          /* texte secondaire (5,1:1 sur chaux) */
  --ligne: #CFDAD9;          /* filets */
  --ligne-forte: #8FA5AE;    /* bordures de champs (3:1) */
  --bougainvillier: #B8245F; /* l'accent, à petites doses */
  --bougainvillier-fonce: #971A4C;
  --neuf: #1D7A5F;

  --f-titre: "Reem Kufi", "Trebuchet MS", sans-serif;
  --f-texte: "Instrument Sans", system-ui, sans-serif;
  --f-chiffre: "Spline Sans Mono", ui-monospace, Consolas, monospace;

  --doux: cubic-bezier(.2, .7, .2, 1);
  --r: 14px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0; overflow-x: hidden; overflow-x: clip;
  background: var(--chaux); color: var(--baie);
  font: 400 16px/1.55 var(--f-texte); -webkit-font-smoothing: antialiased;
}
/* une seule lumière derrière toute la page : le matin qui vient de la mer, en haut à droite */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 88% -8%, rgba(255, 244, 222, .85), transparent 70%),
    radial-gradient(70vw 60vh at 0% 100%, rgba(27, 106, 150, .07), transparent 70%);
}
a { color: var(--volet); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--bougainvillier); outline-offset: 3px; border-radius: 4px; }
.cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saut { position: absolute; left: 16px; top: -60px; background: var(--baie); color: #fff; padding: 10px 14px; border-radius: 8px; z-index: 50; }
.saut:focus { top: 12px; }

/* ---------- barre du haut ---------- */
.haut { display: flex; align-items: center; gap: 28px; padding: 18px clamp(16px, 4vw, 48px); flex-wrap: wrap; }
.marque { display: flex; align-items: baseline; gap: 10px; color: var(--baie); text-decoration: none; }
.marque-nom { font: 700 22px/1 var(--f-titre); letter-spacing: .01em; }
.marque-ar { font: 500 18px/1 var(--f-titre); color: var(--volet); }
.onglets { display: flex; gap: 4px; flex-wrap: wrap; }
.onglet { padding: 8px 14px; border-radius: 999px; color: var(--baie); text-decoration: none; font-weight: 500; font-size: 15px; transition: background .25s var(--doux); }
.onglet:hover { background: rgba(14, 47, 68, .07); }
.onglet[aria-current="page"] { background: var(--baie); color: #fff; }
.taux { margin-left: auto; font: 400 12.5px/1.3 var(--f-chiffre); color: var(--brume); text-align: right; }
.taux strong { color: var(--baie); font-weight: 500; }

.page { max-width: 1320px; margin: 0 auto; padding: 8px clamp(16px, 4vw, 48px) 96px; }

/* ---------- en-tête de page ---------- */
.entete { position: relative; padding: 36px 0 28px; }
.surtitre { font: 500 12.5px/1 var(--f-chiffre); letter-spacing: .1em; text-transform: uppercase; color: var(--brume); margin: 0 0 14px; }
.titre { font: 700 clamp(44px, 7vw, 88px)/.95 var(--f-titre); margin: 0; letter-spacing: -.01em; }
.titre-ar { position: absolute; right: 0; top: 12px; font: 700 clamp(70px, 13vw, 170px)/1 var(--f-titre); color: rgba(27, 106, 150, .09); pointer-events: none; user-select: none; }
.chapo { max-width: 56ch; color: var(--brume); margin: 16px 0 0; font-size: 17px; }

/* ---------- wilayas ---------- */
.wilayas { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 14px; scrollbar-width: thin; }
.wilaya {
  flex: none; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "nom code" "ar n"; gap: 3px 18px; align-items: baseline;
  min-width: 132px; padding: 11px 16px 10px; border: 1px solid var(--ligne); border-radius: var(--r); background: var(--ecume);
  color: var(--baie); cursor: pointer; font: inherit; text-align: left; transition: border-color .25s var(--doux), transform .25s var(--doux);
}
.wilaya:hover { border-color: var(--volet); transform: translateY(-2px); }
.wilaya-nom { grid-area: nom; font: 600 16px/1.1 var(--f-titre); white-space: nowrap; }
.wilaya-code { grid-area: code; justify-self: end; font: 500 12px var(--f-chiffre); color: var(--brume); }
.wilaya-ar { grid-area: ar; font: 500 15px/1.2 var(--f-titre); color: var(--volet); text-align: left; }
.wilaya-n { grid-area: n; justify-self: end; font: 400 12px var(--f-chiffre); color: var(--brume); white-space: nowrap; }
.wilaya[aria-pressed="true"] { background: var(--baie); border-color: var(--baie); color: #fff; }
.wilaya[aria-pressed="true"] .wilaya-code, .wilaya[aria-pressed="true"] .wilaya-n { color: #B9CCD6; }
.wilaya[aria-pressed="true"] .wilaya-ar { color: #9CCDE6; }

/* ---------- comptoir de filtres ---------- */
.comptoir { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: end; padding: 16px 0 26px; border-bottom: 1px solid var(--ligne); }
.choix { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(14, 47, 68, .07); }
.choix button { border: 0; background: none; font: 500 14px var(--f-texte); color: var(--baie); padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: background .25s var(--doux); }
.choix button[aria-pressed="true"] { background: var(--ecume); box-shadow: 0 1px 3px rgba(14, 47, 68, .18); }
.champ { display: grid; gap: 4px; font: 500 12px var(--f-chiffre); letter-spacing: .06em; text-transform: uppercase; color: var(--brume); }
.champ select { font: 400 15px var(--f-texte); text-transform: none; letter-spacing: 0; color: var(--baie); background: var(--ecume); border: 1px solid var(--ligne-forte); border-radius: 10px; padding: 9px 12px; }
.compte { margin-left: auto; font: 400 14px var(--f-chiffre); color: var(--brume); }
.compte strong { font: 700 26px/1 var(--f-titre); color: var(--baie); margin-right: 6px; }

/* ---------- la rue d'arcades ---------- */
.rue { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 44px 0; padding-top: 40px; }
.bien { display: grid; grid-template-rows: auto 1fr; padding: 0 18px; color: inherit; text-decoration: none; min-width: 0; }
.arche-zone { position: relative; border-bottom: 3px solid var(--baie); margin: 0 -18px; padding: 0 18px; } /* le trottoir, continu d'une arche à l'autre */
.arche { display: block; width: 100%; aspect-ratio: 4 / 4.6; border-radius: 999px 999px 0 0; overflow: hidden; background: linear-gradient(180deg, #DCE8EC, #B9D0DA); }
.arche img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--doux); }
.bien:hover .arche img { transform: scale(1.045); }
.arche-vide { display: grid; place-items: center; height: 100%; font: 600 30px var(--f-titre); color: rgba(14, 47, 68, .35); }

/* la note : un carreau en étoile à huit branches */
.etoile { position: absolute; left: 30px; bottom: -23px; width: 46px; height: 46px; display: grid; place-items: center; z-index: 1; }
.etoile::before, .etoile::after { content: ""; position: absolute; inset: 5px; background: var(--bougainvillier); border-radius: 3px; }
.etoile::after { transform: rotate(45deg); }
.etoile span { position: relative; z-index: 1; font: 500 15px var(--f-chiffre); color: #fff; }
.etoile.moyen::before, .etoile.moyen::after { background: var(--volet); }
.etoile.bas::before, .etoile.bas::after { background: var(--brume); }

.bien-texte { padding: 34px 0 0; display: grid; gap: 6px; align-content: start; }
.bien-sur { font: 500 12px var(--f-chiffre); letter-spacing: .06em; text-transform: uppercase; color: var(--brume); }
.bien-sur .neuf { color: var(--neuf); }
.bien-titre { font: 600 19px/1.22 var(--f-titre); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bien:hover .bien-titre { color: var(--volet); }
.bien-vendeur { font-size: 14.5px; color: var(--brume); }
.prix { font: 700 25px/1.1 var(--f-titre); margin-top: 6px; }
.prix.demande { font-size: 18px; font-weight: 500; color: var(--brume); }
.euros { font: 400 13px/1.45 var(--f-chiffre); color: var(--brume); }
.euros b { font-weight: 500; color: var(--baie); }
.faits { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fait { font: 400 12.5px var(--f-chiffre); padding: 4px 9px; border-radius: 999px; background: rgba(14, 47, 68, .06); }
.vide { grid-column: 1 / -1; text-align: center; padding: 80px 0; color: var(--brume); }

/* ---------- boutons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1 var(--f-texte); padding: 14px 20px; border-radius: 999px; border: 1.5px solid var(--baie); color: var(--baie); background: transparent; text-decoration: none; cursor: pointer; transition: background .25s var(--doux), color .25s var(--doux), transform .25s var(--doux); }
.btn:hover { background: var(--baie); color: #fff; transform: translateY(-1px); }
.btn-action { background: var(--bougainvillier); border-color: var(--bougainvillier); color: #fff; }
.btn-action:hover { background: var(--bougainvillier-fonce); border-color: var(--bougainvillier-fonce); }

/* ---------- fiche ---------- */
.retour { display: inline-block; margin: 18px 0 6px; font-weight: 500; }
.fiche { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: start; padding-top: 12px; }
.fiche-photo { position: sticky; top: 20px; }
.fiche-photo .arche { aspect-ratio: 4 / 4.9; }
.fiche-photo .etoile { left: 44px; bottom: -30px; width: 62px; height: 62px; }
.fiche-photo .etoile span { font-size: 20px; }
.fiche h1 { font: 700 clamp(26px, 2.7vw, 36px)/1.12 var(--f-titre); margin: 10px 0 12px; text-wrap: balance; }
.bloc-prix { display: grid; gap: 4px; padding: 22px 0; margin: 22px 0; border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); }
.bloc-prix .prix { font-size: clamp(32px, 4vw, 46px); margin: 0; }
.conversions { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-top: 12px; }
.conversion { display: grid; gap: 2px; }
.conversion span { font: 500 11.5px var(--f-chiffre); letter-spacing: .06em; text-transform: uppercase; color: var(--brume); }
.conversion b { font: 600 20px var(--f-titre); }
.etude { background: var(--ecume); border: 1px solid var(--ligne); border-radius: 22px; padding: clamp(20px, 3vw, 34px); margin: 26px 0; }
.etude h2, .section-titre { font: 700 24px/1.1 var(--f-titre); margin: 0 0 4px; }
.etude-lieu { font: 500 12.5px var(--f-chiffre); letter-spacing: .06em; text-transform: uppercase; color: var(--volet); margin: 0 0 16px; }
.etude p { margin: 0 0 12px; max-width: 62ch; }
.etude .mention { font-size: 13.5px; color: var(--brume); margin: 16px 0 0; }
.mini-carte { height: 240px; border-radius: 16px; overflow: hidden; margin-top: 18px; border: 1px solid var(--ligne); z-index: 0; }
.fiche-faits { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px 24px; margin: 8px 0 0; }
.fiche-faits dt { font: 500 11.5px var(--f-chiffre); letter-spacing: .06em; text-transform: uppercase; color: var(--brume); }
.fiche-faits dd { margin: 3px 0 0; font-weight: 500; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.resume { max-width: 62ch; }

/* ---------- carte ---------- */
.carte-page { display: grid; grid-template-columns: 400px minmax(0, 1fr); height: calc(100vh - 84px); min-height: 520px; border-top: 1px solid var(--ligne); }
.carte-liste { overflow-y: auto; padding: 18px 18px 40px; background: var(--ecume); border-right: 1px solid var(--ligne); }
.carte-liste h1 { font: 700 30px/1 var(--f-titre); margin: 6px 0 14px; }
.ligne { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 12px; border-radius: var(--r); color: inherit; text-decoration: none; transition: background .25s var(--doux); }
.ligne:hover, .ligne.survol { background: rgba(27, 106, 150, .09); }
.ligne .arche { aspect-ratio: 4 / 4.8; }
.ligne-titre { font: 600 15.5px/1.25 var(--f-titre); margin: 0; }
.ligne-sous { font-size: 13.5px; color: var(--brume); }
.ligne-prix { font: 500 13.5px var(--f-chiffre); margin-top: 3px; }
#carte { height: 100%; background: #DDE8EA; z-index: 0; }
.leaflet-tile { filter: saturate(.32) hue-rotate(-6deg) brightness(1.05) contrast(.96); } /* les tuiles prennent la lumière de la page */
.pin { position: relative; width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer; transition: transform .25s var(--doux); }
.pin::before, .pin::after { content: ""; position: absolute; inset: 5px; background: var(--volet); border-radius: 3px; box-shadow: 0 2px 8px rgba(14, 47, 68, .4); }
.pin::after { transform: rotate(45deg); box-shadow: none; }
.pin.programme::before, .pin.programme::after { background: var(--bougainvillier); }
.pin.approx { opacity: .78; }
.pin span { position: relative; z-index: 1; font: 500 12.5px var(--f-chiffre); color: #fff; }
.pin.survol, .pin:hover { transform: scale(1.25); z-index: 999; }
.bulle.leaflet-tooltip { padding: 0; border: 0; border-radius: 18px; background: var(--ecume); color: var(--baie); box-shadow: 0 14px 40px rgba(14, 47, 68, .28); white-space: normal; }
.bulle.leaflet-tooltip::before { display: none; }
.bulle-corps { width: 270px; padding: 0 0 14px; font: 400 13.5px/1.4 var(--f-texte); }
.bulle-corps .arche { aspect-ratio: 4 / 2.6; border-radius: 18px 18px 0 0; }
.bulle-corps > *:not(.arche) { padding: 0 16px; }
.bulle-titre { font: 600 16px/1.2 var(--f-titre); margin: 12px 0 2px; }
.bulle-prix { font: 700 18px var(--f-titre); margin-top: 6px; }
.bulle-geste { color: var(--bougainvillier); font-weight: 600; margin-top: 8px; }
.legende { position: absolute; right: 16px; bottom: 26px; z-index: 500; background: var(--ecume); border-radius: var(--r); padding: 12px 14px; font-size: 13.5px; box-shadow: 0 6px 20px rgba(14, 47, 68, .18); display: grid; gap: 6px; }
.legende i { display: inline-block; width: 11px; height: 11px; margin-right: 8px; border-radius: 2px; background: var(--volet); transform: rotate(45deg); }
.legende i.prg { background: var(--bougainvillier); }

/* ---------- page d'entrée de la maquette ---------- */
.ecrans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; padding-top: 34px; }
.ecran { display: grid; gap: 8px; padding: 26px; border-radius: 22px; background: var(--ecume); border: 1px solid var(--ligne); color: inherit; text-decoration: none; transition: transform .3s var(--doux), border-color .3s var(--doux); }
.ecran:hover { transform: translateY(-4px); border-color: var(--volet); }
.ecran h2 { font: 700 26px/1.1 var(--f-titre); margin: 0; }
.ecran p { margin: 0; color: var(--brume); }
.ecran .surtitre { margin: 0; }
.note-maquette { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--ligne); color: var(--brume); max-width: 70ch; font-size: 15px; }
.nuancier { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.nuancier li { display: grid; gap: 6px; font: 400 12px var(--f-chiffre); color: var(--brume); }
.nuancier i { display: block; width: 84px; height: 56px; border-radius: 12px; border: 1px solid var(--ligne); }

/* ---------- entrées : les arches se lèvent une à une ---------- */
.rue .bien { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--doux), transform .7s var(--doux); }
.rue .bien.la { opacity: 1; transform: none; }

@media (max-width: 960px) {
  .fiche { grid-template-columns: 1fr; }
  .fiche-photo { position: static; max-width: 420px; }
  .carte-page { grid-template-columns: 1fr; grid-template-rows: 56vh auto; height: auto; }
  .carte-liste { order: 2; border-right: 0; border-top: 1px solid var(--ligne); }
  .titre-ar { display: none; }
  .taux { margin-left: 0; text-align: left; width: 100%; }
}
@media (pointer: coarse) { .onglet, .choix button, .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rue .bien { opacity: 1; transform: none; }
}

.ligne .arche-vide, .bulle-corps .arche-vide { font-size: 11px; text-align: center; padding: 0 4px; line-height: 1.1; }