/* ============================================================
   YUI · Back-office
   Mêmes codes que maisonyui.com : albâtre, anthracite, sauge.
   Angles de 2 px. Playfair sur les titres, Inter sur le reste.
   Le rail vertical et son nœud hexagonal structurent chaque vue.
   ============================================================ */
:root{
  color-scheme:only light;
  --albatre:#F9F8F6;
  --lin:#F1EEE9;
  --anthracite:#2C2C2C;
  --gris:#6B6B67;
  --gris-clair:#9A9A94;
  --encre:#1B1F1C;
  --sauge:#899985;
  --sauge-profond:#5F6E5C;
  --sauge-voile:rgba(137,153,133,.10);
  --terre:#A8623E;
  --terre-voile:rgba(168,98,62,.09);
  --or:#A98546;
  --or-voile:rgba(169,133,70,.11);
  --hairline:rgba(44,44,44,.13);
  --hairline-clair:rgba(249,248,246,.18);

  --serif:"Playfair Display",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --rail:64px;
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px;
  --r:2px;
  --tr:.35s ease;
}
html{color-scheme:only light;background:#F9F8F6}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--albatre);color:var(--anthracite);
  font-family:var(--sans);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit;background:none;border:0;padding:0}
svg{display:block}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-.015em;line-height:1.14}
p{margin:0}
[hidden]{display:none!important}
::selection{background:var(--sauge);color:#fff}

.t-h1{font-size:clamp(1.9rem,3.2vw,2.6rem)}
.t-h2{font-size:clamp(1.4rem,2.1vw,1.8rem)}
.t-h3{font-size:1.15rem}
.eyebrow{font-family:var(--sans);font-size:.66rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--sauge-profond);display:block}
.lede{font-size:1.02rem;line-height:1.62;color:var(--gris);max-width:56ch}
.gris{color:var(--gris)}
.micro{font-size:.74rem;letter-spacing:.03em;color:var(--gris-clair)}
.num{font-variant-numeric:tabular-nums}
.chiffre{font-family:var(--serif);letter-spacing:-.025em;line-height:1}

.ic{width:17px;height:17px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.ic--l{width:22px;height:22px}
.ar{transition:transform var(--tr)}
a:hover .ar,button:hover .ar{transform:translateX(4px)}

/* ---------- rail vertical, signature du site ---------- */
.rail{position:relative}
.rail::before{content:"";position:absolute;left:0;top:-40px;bottom:-40px;width:1px;
  background:var(--hairline)}
.noeud{position:absolute;left:-4.5px;top:10px;width:10px;height:11px;background:var(--sauge);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}

/* ============================================================
   CONNEXION
   ============================================================ */
#vueConnexion{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:var(--s3)}
.connexion{width:100%;max-width:380px}
.connexion__marque{text-align:center;margin-bottom:var(--s5)}
.connexion__marque .mot{font-family:var(--serif);font-size:1.7rem;letter-spacing:.36em;
  padding-left:.36em;display:block}
.connexion__marque .sous{font-family:var(--serif);font-style:italic;font-size:.86rem;
  color:var(--gris-clair);margin-top:var(--s1);display:block}
.connexion #formConnexion{border-top:1px solid var(--hairline);padding-top:var(--s4)}

/* ============================================================
   CHAMPS
   ============================================================ */
.champ{margin-bottom:var(--s3)}
.champ > label{display:block;font-size:.66rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gris);margin-bottom:var(--s1)}
.champ .aide{display:block;font-size:.76rem;color:var(--gris-clair);margin-top:6px;line-height:1.5}
.champ input,.champ select,.champ textarea{width:100%;min-height:48px;padding:0 var(--s2);
  font:inherit;font-size:.95rem;color:var(--anthracite);background:transparent;
  border:0;border-bottom:1px solid var(--hairline);border-radius:0;appearance:none;
  transition:border-color var(--tr)}
.champ textarea{min-height:96px;padding:var(--s2) 0;resize:vertical;line-height:1.62}
.champ textarea.haut{min-height:190px}
.champ input,.champ select{padding-left:0}
.champ input::placeholder,.champ textarea::placeholder{color:var(--gris-clair)}
.champ input:hover,.champ select:hover,.champ textarea:hover{border-color:rgba(44,44,44,.3)}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;
  border-color:var(--sauge-profond);border-bottom-width:1px}
.champ select{background-image:
  linear-gradient(45deg,transparent 50%,var(--gris) 50%),
  linear-gradient(135deg,var(--gris) 50%,transparent 50%);
  background-position:calc(100% - 10px) 22px,calc(100% - 6px) 22px;background-size:4px 4px;
  background-repeat:no-repeat;padding-right:var(--s4)}
select option{background:#fff;color:#2C2C2C}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s4)}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--s4)}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 var(--s4)}

.bascule{display:flex;align-items:flex-start;gap:var(--s2);cursor:pointer;
  padding:var(--s3) 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.bascule input{width:17px;height:17px;accent-color:var(--sauge-profond);margin:3px 0 0}
.bascule b{font-weight:500;font-size:.95rem;display:block}
.bascule span{font-size:.82rem;color:var(--gris);display:block;margin-top:2px}

/* ============================================================
   BOUTONS
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:15px 30px;border:1px solid transparent;border-radius:var(--r);
  font-size:.8rem;font-weight:500;letter-spacing:.06em;
  transition:background var(--tr),color var(--tr),border-color var(--tr)}
.btn--plein{background:var(--sauge-profond);color:#fff}
.btn--plein:hover{background:var(--encre)}
.btn--ligne{border-color:var(--anthracite);color:var(--anthracite)}
.btn--ligne:hover{background:var(--anthracite);color:var(--albatre)}
.btn--fin{border-color:var(--hairline);color:var(--gris);padding:11px 20px;font-size:.76rem}
.btn--fin:hover{border-color:var(--anthracite);color:var(--anthracite)}
.btn--large{width:100%}
.btn--danger:hover{border-color:var(--terre);color:var(--terre);background:transparent}
.lien{display:inline-flex;align-items:center;gap:.5em;font-size:.8rem;font-weight:500;
  letter-spacing:.06em;color:var(--sauge-profond);border-bottom:1px solid transparent;
  padding-bottom:2px;transition:border-color var(--tr)}
.lien:hover{border-color:var(--sauge-profond)}
.actions{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4);
  padding-top:var(--s4);border-top:1px solid var(--hairline)}

/* ============================================================
   STRUCTURE
   ============================================================ */
#vueApp{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.flanc{background:var(--encre);color:var(--albatre);display:flex;flex-direction:column;
  padding:var(--s4) 0;position:sticky;top:0;height:100vh}
.flanc__marque{padding:0 var(--s3) var(--s4);margin-bottom:var(--s2)}
.flanc__marque .mot{font-family:var(--serif);font-size:1.05rem;letter-spacing:.32em;
  padding-left:.32em}
.nav{display:flex;flex-direction:column;flex:1;overflow-y:auto;padding:0 var(--s3)}
.nav a{display:flex;align-items:center;gap:var(--s2);padding:13px 0;font-size:.86rem;
  color:rgba(249,248,246,.55);border-bottom:1px solid rgba(249,248,246,.07);
  position:relative;transition:color var(--tr)}
.nav a:last-child{border-bottom:0}
.nav a:hover{color:var(--albatre)}
.nav a[aria-current]{color:var(--albatre)}
.nav a[aria-current]::before{content:"";position:absolute;left:-24px;top:50%;
  transform:translateY(-50%);width:9px;height:10px;background:var(--sauge);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.pastille{margin-left:auto;font-family:var(--serif);font-size:.9rem;color:var(--sauge);display:none}
.pastille.on{display:inline}
.flanc__bas{padding:var(--s3) var(--s3) 0;border-top:1px solid rgba(249,248,246,.12);
  display:grid;gap:10px}
.flanc__bas .qui{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(249,248,246,.4)}
.flanc__bas a{display:flex;align-items:center;gap:10px;font-size:.8rem;
  color:rgba(249,248,246,.5);transition:color var(--tr)}
.flanc__bas a:hover{color:var(--albatre)}

.zone{min-width:0;padding:var(--s5) var(--s4) var(--s6);max-width:1180px}
.entete{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);margin-bottom:var(--s5)}
.entete__c{display:flex;align-items:flex-end;gap:var(--s3);flex-wrap:wrap}
.entete__c h1{margin-right:auto}
.corps{display:grid;grid-template-columns:var(--rail) minmax(0,1fr)}
.pile{display:grid;gap:var(--s5)}

/* ============================================================
   BLOCS
   ============================================================ */
.bloc{border-top:1px solid var(--hairline);padding-top:var(--s3)}
.bloc__tete{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s3);flex-wrap:wrap}
.bloc__tete h2{margin-right:auto}

.mesures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
.mesure{border-top:1px solid var(--hairline);padding-top:var(--s2)}
.mesure .lbl{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);
  display:block;margin-bottom:var(--s2)}
.mesure .val{font-family:var(--serif);font-size:2.6rem;line-height:1;letter-spacing:-.03em;display:block}
.mesure .val.tint{color:var(--terre)}
.mesure .sous{font-size:.8rem;color:var(--gris-clair);display:block;margin-top:var(--s1)}

.segments{display:inline-flex;gap:var(--s3);flex-wrap:wrap}
.segments button{font-size:.78rem;letter-spacing:.06em;color:var(--gris);padding-bottom:5px;
  border-bottom:1px solid transparent;transition:color var(--tr),border-color var(--tr)}
.segments button:hover{color:var(--anthracite)}
.segments button[aria-selected="true"]{color:var(--anthracite);border-color:var(--sauge)}
.segments b{font-family:var(--serif);font-size:.9rem;margin-left:4px}

.recherche{min-height:40px;padding:0 0 6px;font:inherit;font-size:.9rem;background:transparent;
  border:0;border-bottom:1px solid var(--hairline);min-width:200px}
.recherche:focus{outline:none;border-color:var(--sauge-profond)}

/* ============================================================
   LISTES
   ============================================================ */
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:var(--s2) var(--s2) var(--s2) 0;font-size:.9rem;
  border-bottom:1px solid var(--hairline);vertical-align:middle}
th{font-size:.64rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gris-clair);white-space:nowrap;padding-bottom:var(--s1)}
td.n,th.n{text-align:right;padding-right:0}
tbody tr.cliq{cursor:pointer;transition:background var(--tr)}
tbody tr.cliq:hover{background:var(--lin)}
tbody tr:last-child td{border-bottom:0}
tr.neuf td:first-child{box-shadow:inset 2px 0 0 var(--terre);padding-left:var(--s2)}
tr.neuf td{font-weight:500}

.etat{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris);white-space:nowrap}
.etat::before{content:"";width:7px;height:8px;background:currentColor;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.e-nouveau{color:var(--terre)}
.e-en_cours{color:var(--or)}
.e-traite,.e-publie{color:var(--sauge-profond)}
.e-sous_offre{color:var(--or)}
.e-brouillon,.e-vendu{color:var(--gris-clair)}

.tag{display:inline-block;font-size:.72rem;letter-spacing:.06em;color:var(--sauge-profond);
  border:1px solid var(--hairline);border-radius:var(--r);padding:3px 11px;margin:0 6px 6px 0}

.vide{padding:var(--s5) 0;max-width:46ch}
.vide b{font-family:var(--serif);font-weight:400;font-size:1.4rem;display:block;
  margin-bottom:var(--s1)}
.vide p{font-size:.92rem;color:var(--gris);line-height:1.62}

/* ============================================================
   BIENS
   ============================================================ */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s4)}
.carte{text-align:left;display:flex;flex-direction:column;gap:var(--s2);cursor:pointer}
.carte__img{aspect-ratio:4/3;background:var(--lin);position:relative;overflow:hidden;
  display:grid;place-items:center;color:var(--gris-clair)}
.carte__img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.carte:hover .carte__img img{transform:scale(1.04)}
.carte__img .etat{position:absolute;top:var(--s2);left:var(--s2);background:var(--albatre);
  padding:5px 11px}
.carte h3{font-size:1.05rem;line-height:1.3}
.carte__prix{font-family:var(--serif);font-size:1.35rem;letter-spacing:-.02em}
.carte__meta{font-size:.78rem;color:var(--gris);display:flex;gap:var(--s2);flex-wrap:wrap;
  padding-top:var(--s1);border-top:1px solid var(--hairline);margin-top:auto}

/* ============================================================
   PHOTOS
   ============================================================ */
.depot{display:flex;flex-direction:column;align-items:center;gap:10px;padding:var(--s4);
  text-align:center;font-size:.86rem;color:var(--gris);border:1px dashed var(--hairline);
  border-radius:var(--r);cursor:pointer;transition:border-color var(--tr),background var(--tr)}
.depot:hover,.depot.survol{border-color:var(--sauge);background:var(--sauge-voile)}
.depot b{color:var(--anthracite);font-weight:500;font-size:.95rem}
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--s2);
  margin-top:var(--s3)}
.vignette{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--lin)}
.vignette img{width:100%;height:100%;object-fit:cover;display:block}
.vignette__n{position:absolute;left:0;top:0;background:var(--albatre);font-size:.64rem;
  letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;color:var(--gris)}
.vignette__b{position:absolute;top:0;right:0;display:flex;opacity:0;transition:opacity var(--tr)}
.vignette:hover .vignette__b,.vignette:focus-within .vignette__b{opacity:1}
.vignette__b button{width:30px;height:30px;background:var(--albatre);display:grid;
  place-items:center;border-left:1px solid var(--hairline)}
.vignette__b button:hover{background:var(--anthracite);color:var(--albatre)}

/* ============================================================
   TEXTES
   ============================================================ */
.ligne{display:grid;grid-template-columns:minmax(150px,210px) 1fr;gap:var(--s4);
  padding:var(--s3) 0;border-bottom:1px solid var(--hairline);align-items:start}
.ligne:last-child{border-bottom:0}
.ligne__l b{display:block;font-weight:500;font-size:.92rem}
.ligne__v .champ{margin:0}
.apercu{width:100%;max-width:320px;aspect-ratio:16/9;object-fit:cover;display:block;
  margin-bottom:var(--s2);background:var(--lin)}

/* ============================================================
   FICHE
   ============================================================ */
.recap{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  padding:var(--s3) 0;margin-bottom:var(--s4)}
.recap dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px var(--s4);font-size:.92rem}
.recap dt{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris-clair);
  padding-top:3px}
.recap dd{margin:0}
.contacts{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s3)}
.fil{display:grid;gap:var(--s2);margin-top:var(--s3)}
.note{border-left:1px solid var(--sauge);padding:2px 0 2px var(--s2);font-size:.9rem;
  color:var(--gris);line-height:1.6}
.note__t{display:flex;gap:var(--s2);align-items:baseline;margin-bottom:3px}
.note__t b{font-weight:500;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--anthracite)}
.note__t span{font-size:.72rem;color:var(--gris-clair);margin-left:auto}

/* ============================================================
   GRAPHE
   ============================================================ */
.graphe{width:100%;height:120px;overflow:visible}
.graphe rect{fill:var(--sauge);opacity:.35;transition:opacity var(--tr)}
.graphe rect:hover{opacity:1}
.graphe line{stroke:var(--hairline)}

/* ============================================================
   MODALE
   ============================================================ */
.voile{position:fixed;inset:0;z-index:60;background:rgba(27,31,28,.42);display:none;
  justify-content:flex-end;backdrop-filter:blur(3px)}
.voile.on{display:flex}
.panneau{background:var(--albatre);width:min(680px,100%);height:100%;overflow-y:auto;
  padding:var(--s5) var(--s4) var(--s6);animation:glisse .4s cubic-bezier(.22,.61,.36,1) both}
@keyframes glisse{from{transform:translateX(28px);opacity:0}to{transform:none;opacity:1}}
.panneau__tete{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s4);
  padding-bottom:var(--s3);border-bottom:1px solid var(--hairline)}
.panneau__tete h2{margin-right:auto}

/* ============================================================
   NOTIFICATIONS
   ============================================================ */
.toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:var(--s3);z-index:80;
  display:grid;gap:var(--s1);width:min(440px,calc(100vw - var(--s4)))}
.toast{display:flex;align-items:center;gap:var(--s2);padding:14px var(--s3);
  background:var(--encre);color:var(--albatre);border-radius:var(--r);font-size:.88rem;
  animation:monte .3s cubic-bezier(.22,.61,.36,1) both}
@keyframes monte{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.toast .ic{color:var(--sauge)}

.bandeau{background:var(--lin);border-left:2px solid var(--sauge);padding:var(--s2) var(--s3);
  font-size:.86rem;color:var(--gris);line-height:1.6;margin-bottom:var(--s4)}
.bandeau b{color:var(--anthracite);font-weight:500}

/* ============================================================
   MOBILE
   ============================================================ */
.onglets{display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--albatre);
  border-top:1px solid var(--hairline);padding-bottom:env(safe-area-inset-bottom);
  grid-template-columns:repeat(5,1fr)}
.onglets button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  min-height:60px;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-clair)}
.onglets button[aria-current]{color:var(--sauge-profond)}

@media (max-width:980px){
  #vueApp{grid-template-columns:1fr}
  .flanc{display:none}
  .onglets{display:grid}
  .zone{padding:var(--s4) var(--s3) 96px}
  .entete,.corps{grid-template-columns:1fr}
  .entete .rail,.corps .rail{display:none}
  .mesures{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .ligne{grid-template-columns:1fr;gap:var(--s1)}
  .panneau{padding:var(--s4) var(--s3) var(--s5)}
  .recap dl{grid-template-columns:1fr;gap:2px}
  .recap dd{margin-bottom:var(--s2)}
  .champ input,.champ select,.champ textarea,.recherche{font-size:16px}
  table,thead,tbody,tr,td{display:block;width:100%}
  thead{display:none}
  tbody tr{border-bottom:1px solid var(--hairline);padding:var(--s3) 0}
  tbody tr:last-child{border-bottom:0}
  td{border:0;padding:3px 0;display:flex;gap:var(--s2);align-items:baseline}
  td::before{content:attr(data-l);flex:0 0 38%;font-size:.66rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--gris-clair)}
  tr.neuf td:first-child{box-shadow:none;padding-left:0}
  .vignette__b{opacity:1}
  .voile{justify-content:stretch}
  .panneau{width:100%}
}
@media (max-width:600px){ .mesures{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){*{animation-duration:1ms!important;transition-duration:1ms!important}}


/* ============================================================
   Éléments propres à l'application, habillés aux mêmes codes
   ============================================================ */
.msg{display:flex;gap:var(--s2);align-items:flex-start;padding:var(--s2) var(--s3);
  font-size:.86rem;line-height:1.55;border-left:2px solid var(--sauge);background:var(--lin);
  color:var(--gris)}
.msg .ic{margin-top:2px;flex:0 0 auto;color:var(--sauge-profond)}
.msg--ok{border-color:var(--sauge-profond)}
.msg--alerte{border-color:var(--terre);background:var(--terre-voile);color:var(--terre)}
.msg--alerte .ic{color:var(--terre)}

.btn--mini{padding:11px 20px;font-size:.76rem}
.ic--s{width:15px;height:15px}
.hex{clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.pastille-i{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--sauge-voile);color:var(--sauge-profond)}
.pastille-i--or{background:var(--or-voile);color:var(--or)}
.pastille-i--terre{background:var(--terre-voile);color:var(--terre)}
.ico-btn{background:none;border:0;padding:6px;color:var(--gris-clair);display:grid;
  place-items:center;transition:color var(--tr)}
.ico-btn:hover{color:var(--terre)}

/* mesures du tableau de bord */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
.kpi{border-top:1px solid var(--hairline);padding-top:var(--s2)}
.kpi__tete{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2)}
.kpi .lbl,.kpi__tete .lbl{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gris)}
.kpi .val{font-family:var(--serif);font-size:2.6rem;line-height:1;letter-spacing:-.03em;display:block}
.kpi .sous{font-size:.8rem;color:var(--gris-clair);display:block;margin-top:var(--s1)}
.kpi .pastille-i--terre ~ .lbl{color:var(--terre)}

/* panneau latéral, ex-modale */
.voile{position:fixed;inset:0;z-index:60;background:rgba(27,31,28,.42);display:none;
  justify-content:flex-end;backdrop-filter:blur(3px)}
.voile.on{display:flex}
.modale{background:var(--albatre);width:min(680px,100%);height:100%;overflow-y:auto;
  padding:var(--s5) var(--s4) var(--s6);border-radius:0;
  animation:glisse .4s cubic-bezier(.22,.61,.36,1) both}

/* textes du site */
.ligne-texte{display:grid;grid-template-columns:minmax(150px,210px) 1fr;gap:var(--s4);
  padding:var(--s3) 0;border-bottom:1px solid var(--hairline);align-items:start}
.ligne-texte:last-child{border-bottom:0}
.ligne-texte__l b{display:block;font-weight:500;font-size:.92rem}
.ligne-texte__v .champ{margin:0}
.apercu-img{width:100%;max-width:320px;aspect-ratio:16/9;object-fit:cover;display:block;
  margin-bottom:var(--s2);background:var(--lin)}

/* écran de connexion */
.carte-connexion{width:100%;max-width:380px}
.carte-connexion .marque{text-align:center;padding-bottom:var(--s4);margin-bottom:var(--s4);border-bottom:1px solid var(--hairline)}
.marque .mot{font-family:var(--serif);font-size:1.7rem;letter-spacing:.36em;
  padding-left:.36em;display:block}
.marque .sous{font-family:var(--serif);font-style:italic;font-size:.86rem;
  color:var(--gris-clair);margin-top:var(--s1);display:block}


/* grille de biens */
.carte__c{padding:0;display:grid;gap:var(--s2);flex:1}
.carte__c h3{font-size:1.05rem;line-height:1.3}
.e-loue{color:var(--gris-clair)}
.dev{font-size:.52em;color:var(--gris-clair);margin-left:.14em;font-family:var(--sans);font-weight:500}
.plein{grid-column:1/-1}
.reglure{stroke:var(--hairline);stroke-width:1}
.barre{fill:var(--sauge);opacity:.35}
.barre:hover{opacity:1}

@media (max-width:980px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
  .ligne-texte{grid-template-columns:1fr;gap:var(--s1)}
  .modale{padding:var(--s4) var(--s3) var(--s5);width:100%}
}
@media (max-width:600px){ .kpis{grid-template-columns:1fr} }

.flanc__marque .signature{display:block;font-size:.5rem;letter-spacing:.32em;
  color:rgba(249,248,246,.38);margin-top:6px;padding-left:.32em}

/* aide sur l'écran de connexion */
.aide-connexion{margin-top:var(--s4);border-top:1px solid var(--hairline);padding-top:var(--s3)}
.aide-connexion summary{font-size:.8rem;color:var(--gris);cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:8px}
.aide-connexion summary::-webkit-details-marker{display:none}
.aide-connexion summary::before{content:"";width:8px;height:9px;background:var(--sauge);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);flex:0 0 auto}
.aide-connexion summary:hover{color:var(--anthracite)}
.aide-connexion p{font-size:.78rem;line-height:1.6;color:var(--gris);margin-top:var(--s2)}
.aide-connexion code{font-family:ui-monospace,monospace;font-size:.9em;background:var(--lin);
  padding:1px 5px}

/* ---------- bandeau des pôles, boîte de réception ---------- */
.poles{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:var(--s2);
  margin-bottom:var(--s4)}
.pole{text-align:left;padding:var(--s2) 0 var(--s2);border-top:1px solid var(--hairline);
  display:grid;gap:2px;transition:border-color var(--tr)}
.pole:hover{border-color:var(--gris-clair)}
.pole.on{border-top:2px solid var(--sauge);padding-top:calc(var(--s2) - 1px)}
.pole__n{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.pole.on .pole__n{color:var(--anthracite)}
.pole__c{font-family:var(--serif);font-size:1.7rem;line-height:1;letter-spacing:-.02em}
.pole__neuf{font-size:.7rem;color:var(--terre);letter-spacing:.04em}

/* ---------- textes du site, repliés par page ---------- */
.page-textes{border-top:1px solid var(--hairline)}
.page-textes:last-of-type{border-bottom:1px solid var(--hairline)}
.page-textes summary{display:flex;align-items:baseline;gap:var(--s2);padding:var(--s3) 0;
  cursor:pointer;list-style:none}
.page-textes summary::-webkit-details-marker{display:none}
.page-textes summary::before{content:"";width:9px;height:10px;background:var(--sauge);flex:0 0 auto;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);align-self:center;
  transition:transform var(--tr)}
.page-textes[open] summary::before{transform:rotate(90deg)}
.page-textes__n{font-family:var(--serif);font-size:1.25rem;margin-right:auto}
.page-textes__c{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris-clair)}
.page-textes__c2{padding-bottom:var(--s3)}

/* ---------- médiathèque ---------- */
.galerie--large{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--s3)}
.deux-boutons{display:flex;gap:var(--s2);flex-wrap:wrap}
.depot b{display:block}

@media (max-width:980px){
  .poles{grid-template-columns:repeat(3,1fr)}
  .galerie--large{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){ .poles{grid-template-columns:repeat(2,1fr)} }

/* ============================================================
   Le back-office reste clair quel que soit le thème du système.
   Certains navigateurs mobiles assombrissent les pages d'office ;
   ces règles annulent l'inversion.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root{ color-scheme:only light }
  html, body{ background:var(--albatre); color:var(--anthracite) }
  .bloc, .carte, .modale, .panneau, .merci{ background:var(--albatre) }
  input, select, textarea{ background:transparent; color:var(--anthracite) }
  select option{ background:#fff; color:#2C2C2C }
  .flanc{ background:var(--encre); color:var(--albatre) }
  table, th, td{ background:transparent; color:inherit }
  th{ color:var(--gris-clair) }
  td{ color:var(--anthracite) }
}