/* ============================================================
   LOKALI — Prototype V1
   Charte : bleu marine #011227 · vert #80b030 · blanc
   Le vert est réservé aux actions qui engagent et aux états validés.
   ============================================================ */


:root{
  --navy:#011227;
  --navy-900:#04182f;
  --navy-800:#0a2340;
  --navy-700:#12304f;
  --navy-500:#2c4a68;
  --green:#80b030;
  --green-hi:#93c440;
  --green-dk:#6a9426;
  --green-ink:#4c6f18;
  --green-soft:#f1f7e6;
  --green-line:#cfe3a8;
  /* Etoiles de notation (screens-and-specs#35) : jaune = utilisateur deja note
     (note globale > 0) ; jamais note = ni etoile ni note. Reserve aux etoiles,
     a rien d'autre ; BO et page avis restent en marine. */
  --star:#F2B01E;

  --ink:#0d1a27;
  --ink-2:#3c4a58;
  --muted:#66757f;
  --line:#e2e7ec;
  --line-2:#eef1f4;
  --bg:#f4f6f8;
  --white:#fff;

  --att:#12304f;
  --att-soft:#eef3f8;
  --att-line:#c6d6e5;
  --red:#c2352b;
  --red-soft:#fdeceb;
  --red-line:#f3c7c4;

  --r-sm:6px; --r:9px; --r-lg:14px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(1,18,39,.06);
  --sh-2:0 2px 6px rgba(1,18,39,.07), 0 8px 24px rgba(1,18,39,.06);
  --sh-3:0 16px 48px rgba(1,18,39,.18);
  --hd:76px;
  --font:'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease:cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font); background:var(--bg); color:var(--ink);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4,p,figure{margin:0}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:3px solid var(--green); outline-offset:2px; border-radius:4px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hidden{display:none!important}

/* ---------- Typo ---------- */
h1{font-size:26px; line-height:1.18; font-weight:800; letter-spacing:-.02em}
h2{font-size:19px; line-height:1.25; font-weight:700; letter-spacing:-.01em}
h3{font-size:16px; line-height:1.3; font-weight:700}
.lede{font-size:16px; color:var(--ink-2)}
.small{font-size:13px}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
.strong{font-weight:700}
@media(min-width:900px){ h1{font-size:34px} h2{font-size:22px} }

/* ---------- Layout ---------- */
.wrap{max-width:1220px; margin:0 auto; padding:0 16px}
.wrap-sm{max-width:660px; margin:0 auto; padding:0 16px}
.page{padding-top:20px; padding-bottom:96px}
@media(min-width:900px){ .wrap,.wrap-sm{padding:0 24px} .page{padding-top:28px; padding-bottom:64px} }
.row{display:flex; gap:12px; align-items:center}
.row-between{display:flex; gap:12px; align-items:center; justify-content:space-between}
.wrapflex{flex-wrap:wrap}
.stack{display:flex; flex-direction:column; gap:14px}
.grow{flex:1; min-width:0}
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}

/* ---------- Bandeau prototype ---------- */
.protobar{
  background:var(--navy-800); color:#b9c6d4; font-size:11.5px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; text-align:center; padding:6px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.protobar b{color:#fff; font-weight:700}

/* ---------- Header ---------- */
.hd{background:var(--navy); position:sticky; top:0; z-index:60}
.hd-in{display:flex; align-items:center; gap:14px; height:var(--hd)}
.brand{display:flex; align-items:center; gap:9px; flex-shrink:0}
.brand img{width:52px; height:52px; border-radius:11px}
.brand-tx{line-height:1}
.brand-tx b{display:block; color:#fff; font-size:25px; font-weight:800; letter-spacing:.05em}
.brand-tx span{display:block; color:var(--green-hi); font-size:11px; font-weight:700; letter-spacing:.2em; margin-top:3px}
.hd-nav{display:none; margin-left:auto; align-items:center; gap:4px}
.hd-nav a{color:#c7d3df; padding:9px 12px; border-radius:var(--r-sm); font-size:14px; font-weight:600}
.hd-nav a:hover{background:rgba(255,255,255,.08); color:#fff}
.hd-nav a.on{color:#fff; background:rgba(255,255,255,.1)}
.hd-cta{margin-left:auto}
.hd-cta .btn{display:none}
.hd-hide-sm{display:none}
@media(min-width:900px){
  .hd-nav{display:flex} .hd-cta{margin-left:8px}
  .hd-cta .btn{display:inline-flex} .hd-hide-sm{display:inline}
}

.avatar{width:32px;height:32px;border-radius:50%;background:var(--navy-700);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:13px;flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.avatar.lg{width:60px;height:60px;font-size:23px}
.avatar.sm{width:26px;height:26px;font-size:11px}

/* ---------- Barre de recherche ---------- */
.searchbar{background:var(--navy); padding:0 0 14px}
.sb{display:flex; gap:8px; background:#fff; border-radius:var(--r); padding:6px; box-shadow:var(--sh-1)}
.sb input,.sb select{border:0; padding:10px 12px; font-size:15px; background:transparent; min-width:0; width:100%}
.sb .f{flex:1; min-width:0; display:flex; align-items:center; gap:8px}
.sb .f + .f{border-left:1px solid var(--line)}
.sb .f i{color:var(--muted); padding-left:8px}
.sb button{flex-shrink:0}
@media(max-width:620px){
  .sb{flex-wrap:wrap}
  .sb .f{flex:1 1 100%} .sb .f + .f{border-left:0; border-top:1px solid var(--line-2)}
  .sb button{flex:1 1 100%}
}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px; border:1.5px solid transparent; border-radius:var(--r-sm);
  font-size:14.5px; font-weight:700; cursor:pointer; background:none;
  transition:background .14s var(--ease), transform .08s var(--ease), border-color .14s;
  text-align:center; line-height:1.2;
}
.btn:active{transform:translateY(1px)}
/* Vert = engagement. Nulle part ailleurs. */
.btn-go{background:var(--green); color:var(--navy)}
.btn-go:hover{background:var(--green-hi)}
.btn-navy{background:var(--navy); color:#fff}
.btn-navy:hover{background:var(--navy-800)}
.btn-out{background:#fff; color:var(--navy); border-color:var(--line)}
.btn-out:hover{border-color:var(--navy-500)}
.btn-ghost{color:var(--ink-2)}
.btn-ghost:hover{background:var(--line-2)}
.btn-danger{background:#fff; color:var(--red); border-color:var(--red-line)}
.btn-danger:hover{background:var(--red-soft)}
.btn-sm{padding:7px 13px; font-size:13px}
.btn-lg{padding:14px 24px; font-size:16px}
.btn-block{display:flex; width:100%}
.btn[disabled],.btn.off{opacity:.45; pointer-events:none}

/* ---------- Badges / états ---------- */
.tag{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--r-pill);
  font-size:11.5px; font-weight:700; letter-spacing:.02em; border:1px solid transparent; white-space:nowrap}
.t-wait{background:#fff; color:var(--att); border-style:dashed; border-color:var(--navy-500)}
.t-ok{background:var(--green-soft); color:var(--green-ink); border-color:var(--green-line)}
.t-live{background:#e9f0f8; color:var(--navy-700); border-color:#cddbe9}
.t-off{background:#eef1f4; color:var(--muted); border-color:var(--line)}
.t-bad{background:var(--red-soft); color:var(--red); border-color:var(--red-line)}
.tag i{font-size:10px}

/* ---------- Cartes ---------- */
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-1)}
.card-p{padding:16px}
.card-hd{padding:14px 16px; border-bottom:1px solid var(--line-2); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.card-bd{padding:16px}
.card-ft{padding:14px 16px; border-top:1px solid var(--line-2); display:flex; gap:10px; flex-wrap:wrap}

/* ---------- Grille d'annonces ---------- */
.grid{display:grid; gap:14px; grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){ .grid{grid-template-columns:repeat(3,1fr); gap:18px} }
@media(min-width:1050px){ .grid{grid-template-columns:repeat(4,1fr)} }

.ad{background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--sh-1); transition:box-shadow .16s var(--ease), transform .16s var(--ease)}
.ad:hover{box-shadow:var(--sh-2); transform:translateY(-2px)}
.ad-ph{position:relative; aspect-ratio:4/3; background:var(--line-2); overflow:hidden}
.ad-ph img{width:100%; height:100%; object-fit:cover}
.ad-ph .ph-tag{position:absolute; left:8px; top:8px; background:rgba(1,18,39,.86); color:#fff;
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 8px; border-radius:4px}
.ad-ph .ph-off{position:absolute; inset:0; background:rgba(1,18,39,.62); display:grid; place-items:center;
  color:#fff; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
.ad-bd{padding:11px 12px 13px; display:flex; flex-direction:column; gap:6px; flex:1}
.ad-ti{font-size:14.5px; font-weight:600; line-height:1.3; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ad-pr{font-size:18px; font-weight:800; color:var(--navy); letter-spacing:-.01em}
.ad-pr small{font-size:12px; font-weight:600; color:var(--muted)}
.ad-mt{margin-top:auto; display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted)}
.ad-mt i{font-size:11px}
.ad-mt .star-on{color:var(--star)}

/* ---------- Catégories ---------- */
.cats{display:grid; gap:10px; grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){ .cats{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1050px){ .cats{grid-template-columns:repeat(6,1fr)} }
.cat{position:relative; aspect-ratio:5/4; border-radius:var(--r); overflow:hidden; display:block; background:var(--navy)}
.cat img{width:100%; height:100%; object-fit:cover; opacity:.5; transition:transform .3s var(--ease), opacity .2s}
.cat:hover img{transform:scale(1.06); opacity:.62}
.cat span{position:absolute; left:10px; right:10px; bottom:10px; color:#fff; font-weight:700; font-size:13.5px; line-height:1.2;
  text-shadow:0 1px 8px rgba(1,18,39,.8)}
.cat b{position:absolute; left:10px; top:10px; background:#fff; color:var(--navy); font-size:11px;
  font-weight:800; padding:2px 7px; border-radius:4px}

/* ---------- Formulaires ---------- */
.field{display:block; margin-bottom:14px}
.field > label,.lbl{display:block; font-size:12.5px; font-weight:700; color:var(--ink-2); margin-bottom:6px}
.field .hint{font-size:12px; color:var(--muted); margin-top:5px; line-height:1.4}
.inp,select.inp,textarea.inp{
  width:100%; padding:11px 12px; border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:#fff; font-size:15px; transition:border-color .14s;
}
.inp:hover{border-color:#cbd3db}
.inp:focus{border-color:var(--navy-500); outline:none; box-shadow:0 0 0 3px rgba(1,18,39,.07)}
textarea.inp{min-height:110px; resize:vertical; line-height:1.5}
select.inp{appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%2366757f' d='M1 1.5 6 6.5l5-5'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; background-size:11px; padding-right:34px}
.inp-grp{display:flex; align-items:center; border:1.5px solid var(--line); border-radius:var(--r-sm); background:#fff; overflow:hidden}
.inp-grp .inp{border:0; box-shadow:none}
.inp-grp .unit{padding:0 12px; font-size:13px; font-weight:700; color:var(--muted); background:var(--line-2); align-self:stretch; display:grid; place-items:center}
.grid-2{display:grid; gap:14px; grid-template-columns:1fr}
@media(min-width:620px){ .grid-2{grid-template-columns:1fr 1fr} }
.grid-3{display:grid; gap:14px; grid-template-columns:1fr}
@media(min-width:760px){ .grid-3{grid-template-columns:repeat(3,1fr)} }

.check{display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.45; cursor:pointer}
.check input{width:19px; height:19px; margin:1px 0 0; accent-color:var(--green); flex-shrink:0}
.radio-cards{display:grid; gap:10px}
.radio-card{display:flex; gap:11px; align-items:flex-start; padding:13px 14px; border:1.5px solid var(--line);
  border-radius:var(--r-sm); background:#fff; cursor:pointer}
.radio-card:hover{border-color:#c3ccd6}
.radio-card input{margin:2px 0 0; accent-color:var(--green); width:18px; height:18px; flex-shrink:0}
.radio-card:has(input:checked){border-color:var(--green); background:var(--green-soft)}
.radio-card b{display:block; font-size:14.5px}
.radio-card span{display:block; font-size:12.5px; color:var(--muted); margin-top:2px; line-height:1.4}

/* code SMS */
.otp{display:flex; gap:9px; justify-content:center}
.otp input{width:46px; height:56px; text-align:center; font-size:24px; font-weight:800;
  border:1.5px solid var(--line); border-radius:var(--r-sm); background:#fff}
.otp input:focus{border-color:var(--green); outline:none; box-shadow:0 0 0 3px rgba(128,176,48,.2)}
/* Huit cases au lieu de six : cases plus etroites pour tenir sur un telephone,
   et texte en majuscules puisque le code est alphanumerique. */
.otp-8{gap:6px}
.otp-8 input{width:38px; height:52px; font-size:20px; text-transform:uppercase}
@media(max-width:400px){ .otp-8{gap:4px} .otp-8 input{width:32px; height:46px; font-size:17px} }

/* ---------- Encarts ---------- */
.note{display:flex; gap:11px; padding:13px 14px; border-radius:var(--r-sm); font-size:13.5px; line-height:1.5; border:1px solid}
.note i{margin-top:2px; flex-shrink:0}
.note b{display:block; margin-bottom:2px}
.n-info{background:#eff4f9; border-color:#d7e2ee; color:var(--navy-700)}
.n-ok{background:var(--green-soft); border-color:var(--green-line); color:var(--green-ink)}
.n-warn{background:var(--att-soft); border-color:var(--att-line); color:var(--att); border-style:dashed}
.n-bad{background:var(--red-soft); border-color:var(--red-line); color:var(--red)}

/* ---------- Récap de prix ---------- */
.recap{border:1px solid var(--line); border-radius:var(--r); background:#fff; overflow:hidden}
.recap .li{display:flex; justify-content:space-between; gap:14px; padding:10px 14px; font-size:14px}
.recap .li + .li{border-top:1px solid var(--line-2)}
.recap .li .k{color:var(--ink-2)}
.recap .li .v{font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
.recap .li.disc .v{color:var(--ink)}
/* Libelle de remise du simulateur de gains. Rouge demande par le client le 20/08 :
   c'est la convention du commerce pour une reduction. Seul endroit de l'interface ou
   le rouge ne signale pas une erreur, d'ou une classe dediee et non un token partage. */
.rem{color:var(--red); font-weight:700; font-size:12.5px; white-space:nowrap; margin-right:12px}
.recap .tot{background:var(--navy); color:#fff; padding:14px}
.recap .tot .li{padding:0; border:0; font-size:17px; font-weight:800}
.recap .tot .k{color:#fff}
.recap .cau{padding:10px 14px; background:var(--line-2); font-size:12.5px; color:var(--ink-2); display:flex; justify-content:space-between; gap:12px}
.recap .cau b{font-variant-numeric:tabular-nums}

/* ---------- Étapes du flux ---------- */
.flow{display:flex; flex-direction:column; gap:0; margin:0}
.step{display:flex; gap:13px; position:relative; padding-bottom:18px}
.step:last-child{padding-bottom:0}
.step::before{content:''; position:absolute; left:13px; top:28px; bottom:0; width:2px; background:var(--line)}
.step:last-child::before{display:none}
.step .dot{width:28px; height:28px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  font-size:12px; font-weight:800; background:#fff; border:2px solid var(--line); color:var(--muted); z-index:1}
.step.done .dot{background:var(--green); border-color:var(--green); color:var(--navy)}
.step.now .dot{background:var(--navy); border-color:var(--navy); color:#fff}
.step.bad .dot{background:var(--red); border-color:var(--red); color:#fff}
.step.done::before{background:var(--green-line)}
.step .tx b{display:block; font-size:14.5px; font-weight:700; line-height:1.3}
.step .tx span{display:block; font-size:13px; color:var(--muted); margin-top:2px; line-height:1.45}
.step.todo .tx b{color:var(--muted); font-weight:600}

/* ---------- Listes de réservations ---------- */
.rez{display:flex; gap:13px; padding:14px; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-1)}
.rez > img{width:78px; height:78px; border-radius:var(--r-sm); object-fit:cover; flex-shrink:0; background:var(--line-2)}
.rez .bd{flex:1; min-width:0; display:flex; flex-direction:column; gap:5px}
.rez .bd h3{font-size:15px}
.rez .meta{font-size:13px; color:var(--muted); display:flex; gap:12px; flex-wrap:wrap}
.rez .act{display:flex; gap:8px; flex-wrap:wrap; margin-top:4px}
.rez .side{text-align:right; display:flex; flex-direction:column; gap:6px; align-items:flex-end; flex-shrink:0}
.rez .side .amt{font-size:16px; font-weight:800; font-variant-numeric:tabular-nums}
@media(max-width:600px){
  .rez{flex-wrap:wrap; min-width:0}
  .rez .side{width:100%; flex-direction:row; align-items:center; justify-content:space-between;
    text-align:left; flex-shrink:1; min-width:0; flex-wrap:wrap; gap:8px}
  /* Sur les tres petits ecrans un libelle long comme « credites sur votre cagnotte »
     ne peut pas rester sur une seule ligne sans elargir toute la carte. */
  .rez .side .tag, .rez .act .tag{white-space:normal; text-align:left}
  .rez .act{width:100%; min-width:0}
  .rez .act .btn{flex:1 1 auto}
  /* La ligne d'identite (avatar, nom, etoiles, nombre de locations) ne tient pas
     sur une seule ligne sous 600 px : sans retour a la ligne elle elargit la carte. */
  .rez .bd .row{flex-wrap:wrap; row-gap:4px; min-width:0}
}

/* ---------- Onglets ---------- */
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{padding:11px 14px; font-size:14px; font-weight:600; color:var(--muted); border-bottom:3px solid transparent;
  white-space:nowrap; margin-bottom:-1px}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--navy); border-bottom-color:var(--navy); font-weight:700}
/* Sous 600 px les quatre onglets ne tiennent pas en entier et le dernier se retrouve
   coupe au bord de l'ecran. On bascule sur les libelles courts, tout reste visible
   sans defilement horizontal. */
.tabs .t-ct,.ft .t-ct{display:none}
@media(max-width:600px){
  .tabs{gap:0; justify-content:space-between}
  .tabs a{padding:11px 6px; font-size:13.5px; flex:1 1 0; text-align:center}
  .tabs .t-lg,.ft .t-lg{display:none}
  .tabs .t-ct,.ft .t-ct{display:inline}
}
@media(max-width:360px){ .tabs a{padding:11px 2px; font-size:12.5px} }

/* ---------- Étoiles ---------- */
.stars{display:inline-flex; gap:2px; color:var(--star); font-size:13px}
.stars .off{color:#d6dce2}
.rate{display:inline-flex; align-items:center; gap:6px; font-size:13px}
.rate b{font-weight:700}

/* ---------- Empty ---------- */
.empty{text-align:center; padding:44px 20px; color:var(--muted)}
.empty i{font-size:34px; opacity:.3; display:block; margin-bottom:12px}
.empty b{display:block; color:var(--ink); font-size:15px; margin-bottom:4px}

/* ---------- Nav mobile ---------- */
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:70; background:#fff; border-top:1px solid var(--line);
  display:flex; padding:6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow:0 -2px 14px rgba(1,18,39,.06)}
.tabbar a{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 2px;
  font-size:10.5px; font-weight:600; color:var(--muted)}
.tabbar a i{font-size:17px}
.tabbar a.on{color:var(--navy)}
.tabbar a.on i{color:var(--navy)}
.tabbar a.pub i{width:34px; height:26px; border-radius:6px; background:var(--green); color:var(--navy); display:grid; place-items:center; font-size:14px}
@media(min-width:900px){ .tabbar{display:none} }

/* ---------- Footer ---------- */
.ft{background:var(--navy); color:#96a6b6; padding:32px 0 calc(26px + 72px); margin-top:44px; font-size:13.5px}
@media(min-width:900px){ .ft{padding-bottom:26px} }
.ft a{color:#c7d3df} .ft a:hover{color:#fff}
.ft h4{color:#fff; font-size:12px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:10px; font-weight:700}
.ft-cols{display:grid; gap:24px; grid-template-columns:1fr}
@media(min-width:700px){ .ft-cols{grid-template-columns:1.4fr 1fr 1fr 1fr} }
.ft li{margin-bottom:7px}
.ft-bar{border-top:1px solid rgba(255,255,255,.1); margin-top:26px; padding-top:16px; font-size:12px}

/* ---------- Toast ---------- */
.toast{position:fixed; left:50%; bottom:88px; transform:translate(-50%,20px); z-index:200;
  background:var(--navy); color:#fff; padding:12px 18px; border-radius:var(--r-sm); font-size:14px; font-weight:600;
  box-shadow:var(--sh-3); opacity:0; pointer-events:none; transition:opacity .18s, transform .18s var(--ease); max-width:calc(100vw - 32px)}
.toast.on{opacity:1; transform:translate(-50%,0)}
.toast i{color:var(--green-hi); margin-right:7px}
@media(min-width:900px){ .toast{bottom:26px} }

/* ---------- Bandeau cookies (screens-and-specs#33, pas de maquette) ----------
   Barre marine au-dessus de la tabbar mobile, non bloquante. Deux boutons de
   meme taille : accepter en vert, refuser en secondaire. */
.consent{position:fixed; left:0; right:0; bottom:calc(68px + env(safe-area-inset-bottom)); z-index:65;
  background:var(--navy); color:#fff; box-shadow:var(--sh-3)}
.consent[hidden]{display:none}
@media(min-width:900px){ .consent{bottom:0} }
.consent-in{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 18px; padding-top:12px; padding-bottom:12px}
.consent p{flex:1 1 320px; margin:0; font-size:13.5px; line-height:1.5}
.consent a{color:#c7d3df; text-decoration:underline}
.consent a:hover{color:#fff}
.consent-act{display:flex; gap:8px; flex-wrap:wrap}
.consent-act .btn{min-width:132px; justify-content:center}

/* ---------- Modale ---------- */
.ov{position:fixed; inset:0; background:rgba(1,18,39,.55); z-index:150; display:none; align-items:center; justify-content:center; padding:16px}
.ov.on{display:flex}
.md{background:#fff; border-radius:var(--r-lg); max-width:520px; width:100%; max-height:88vh; overflow:auto; box-shadow:var(--sh-3)}
.md-hd{padding:16px 18px; border-bottom:1px solid var(--line-2); display:flex; justify-content:space-between; align-items:center; gap:12px}
.md-bd{padding:18px}
.md-ft{padding:14px 18px; border-top:1px solid var(--line-2); display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap}
.md-x{background:none; border:0; font-size:19px; color:var(--muted); cursor:pointer; padding:4px 6px; border-radius:4px}
.md-x:hover{background:var(--line-2)}

/* ============================================================
   BACK-OFFICE
   ============================================================ */
body.bo{background:var(--bg)}
.bo-shell{display:flex; min-height:100vh}
.sb-nav{width:246px; background:var(--navy); color:#c7d3df; flex-shrink:0; position:fixed; inset:0 auto 0 0; z-index:80;
  display:flex; flex-direction:column; transform:translateX(-100%); transition:transform .22s var(--ease); overflow-y:auto}
.sb-nav.open{transform:none}
@media(min-width:1000px){ .sb-nav{transform:none; position:sticky; top:0; height:100vh} }
.sb-hd{padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.09); display:flex; align-items:center; gap:10px}
.sb-hd img{width:32px; height:32px; border-radius:7px}
.sb-hd b{color:#fff; font-size:15px; font-weight:800; letter-spacing:.06em; display:block; line-height:1}
.sb-hd span{color:var(--green-hi); font-size:9px; letter-spacing:.2em; font-weight:700}
.sb-sec{padding:16px 18px 6px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#6b8098; font-weight:700}
.sb-nav a.it{display:flex; align-items:center; gap:11px; padding:9px 18px; font-size:14px; font-weight:600; color:#c7d3df}
.sb-nav a.it i{width:17px; text-align:center; font-size:14px; color:#8ea3b8}
.sb-nav a.it:hover{background:rgba(255,255,255,.07); color:#fff}
.sb-nav a.it.on{background:rgba(128,176,48,.16); color:#fff; font-weight:700}
.sb-nav a.it.on i{color:#fff}
.sb-nav .cnt{margin-left:auto; background:#fff; color:var(--navy); font-size:10.5px; font-weight:800; padding:1px 7px; border-radius:var(--r-pill)}
.sb-ft{margin-top:auto; padding:14px 18px; border-top:1px solid rgba(255,255,255,.09); font-size:13px}
.sb-mask{position:fixed; inset:0; background:rgba(1,18,39,.5); z-index:75; display:none}
.sb-mask.on{display:block}
@media(min-width:1000px){ .sb-mask{display:none!important} }

.bo-main{flex:1; min-width:0; display:flex; flex-direction:column}
.bo-top{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:12px; padding:0 18px; height:58px}
.bo-burger{background:none; border:0; font-size:19px; cursor:pointer; padding:6px; color:var(--navy)}
@media(min-width:1000px){ .bo-burger{display:none} }
.bo-top h1{font-size:17px; font-weight:700; letter-spacing:0}
.bo-body{padding:18px; flex:1}
@media(min-width:900px){ .bo-body{padding:24px} }

.kpis{display:grid; gap:12px; grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){ .kpis{grid-template-columns:repeat(4,1fr)} }
.kpi{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:15px; display:flex; gap:12px; align-items:flex-start; box-shadow:var(--sh-1)}
.kpi .ic{width:38px; height:38px; border-radius:9px; display:grid; place-items:center; font-size:15px; flex-shrink:0}
.kpi .ic.g{background:#e9f0f8; color:var(--navy-700)}
.kpi .ic.n{background:#e9f0f8; color:var(--navy-700)}
.kpi .ic.a{background:var(--att-soft); color:var(--att); box-shadow:inset 0 0 0 1px var(--att-line)}
.kpi .ic.r{background:var(--red-soft); color:var(--red)}
.kpi .v{font-size:23px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1}
.kpi .l{font-size:12.5px; color:var(--muted); margin-top:2px}
.kpi .d{font-size:11.5px; font-weight:700; margin-top:5px; color:var(--ink-2)}

.tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; position:relative}
table.tbl{width:100%; border-collapse:collapse; font-size:13.5px; min-width:660px}
.tbl th{text-align:left; padding:10px 14px; font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); font-weight:700; background:#fafbfc; border-bottom:1px solid var(--line); white-space:nowrap}
.tbl td{padding:12px 14px; border-bottom:1px solid var(--line-2); vertical-align:middle}
.tbl tbody tr:hover{background:#fafbfc}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .num{font-variant-numeric:tabular-nums; white-space:nowrap}
.tbl .ref{font-size:12.5px; font-weight:700; color:var(--navy-700); white-space:nowrap}
.tbl .nw{white-space:nowrap}
.tbl .who{display:flex; align-items:center; gap:9px; min-width:0}
.tbl .who b{font-weight:600; white-space:nowrap}
.tbl .thumb{width:40px; height:40px; border-radius:6px; object-fit:cover; background:var(--line-2); flex-shrink:0}
.tbl .acts{display:flex; gap:6px; justify-content:flex-end}
.ico-btn{width:30px; height:30px; border-radius:6px; border:1px solid var(--line); background:#fff; color:var(--ink-2);
  cursor:pointer; display:grid; place-items:center; font-size:12px}
.ico-btn:hover{background:var(--line-2); color:var(--navy)}
.ico-btn.dg:hover{background:var(--red-soft); color:var(--red); border-color:var(--red-line)}

.tools{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.tools .inp{width:auto; min-width:150px; padding:8px 11px; font-size:13.5px}
.tools select.inp{min-width:150px}

.bars{display:flex; align-items:flex-end; gap:9px; height:172px; padding:8px 2px 0}
.bars .b{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:7px; height:100%}
.bars .b i{width:100%; background:var(--navy-700); border-radius:4px 4px 0 0; display:block}
.bars .b:last-child i{background:var(--navy-500)}
.bars .b span{font-size:11px; color:var(--muted); font-weight:600}
.bars .b em{font-size:11.5px; font-weight:800; font-style:normal; font-variant-numeric:tabular-nums}

.donut{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.donut .g{width:132px; height:132px; border-radius:50%; flex-shrink:0}
.donut ul{flex:1; min-width:150px; display:flex; flex-direction:column; gap:8px}
.donut li{display:flex; align-items:center; gap:9px; font-size:13px}
.donut li i{width:11px; height:11px; border-radius:3px; flex-shrink:0; box-shadow:inset 0 0 0 1px rgba(1,18,39,.12)}
.donut li b{margin-left:auto; font-variant-numeric:tabular-nums}

.dl{display:grid; gap:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#fff}
.dl > div{display:flex; justify-content:space-between; gap:14px; padding:11px 14px; font-size:14px}
.dl > div + div{border-top:1px solid var(--line-2)}
.dl .k{color:var(--muted); font-size:13px}
.dl .v{font-weight:600; text-align:right}

/* Sans min-width:0 une piste 1fr prend la largeur mini de son contenu et deborde
   l'ecran sur telephone. Vaut pour toutes les grilles de la maquette. */
.grid > *, .grid-2 > *, .grid-3 > *, .split > *, .split-even > *, .kpis > *{min-width:0}
.split{display:grid; gap:18px; grid-template-columns:1fr}
@media(min-width:1000px){ .split{grid-template-columns:1.7fr 1fr; align-items:start} }
.split-even{display:grid; gap:18px; grid-template-columns:1fr}
@media(min-width:900px){ .split-even{grid-template-columns:1fr 1fr} }

@media print{ .hd,.tabbar,.ft,.protobar,.sb-nav,.bo-top{display:none!important} }
@media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important; transition-duration:.001ms!important} }


/* ---------- Tableaux denses : empilés en fiches sur petit écran ---------- */
@media(max-width:759px){
  table.tbl{min-width:0; display:block}
  .tbl thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .tbl tbody,.tbl tr,.tbl td{display:block; width:100%}
  .tbl tr{border:1px solid var(--line); border-radius:var(--r); margin-bottom:10px; background:#fff; padding:4px 0}
  .tbl tbody tr:hover{background:#fff}
  .tbl td{border-bottom:1px solid var(--line-2); padding:9px 13px; display:flex; gap:14px;
    align-items:center; justify-content:space-between; text-align:right}
  .tbl tr td:last-child{border-bottom:0}
  .tbl td::before{content:attr(data-l); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
    color:var(--muted); font-weight:700; text-align:left; flex-shrink:0}
  .tbl td:empty{display:none}
  .tbl td[data-l=""]::before{display:none}
  .tbl .who,.tbl .acts{justify-content:flex-end}
  .tbl-wrap{overflow-x:visible}
}

/* ---------- Recherche : rail de filtres ---------- */
.find{display:grid; gap:22px; grid-template-columns:1fr}
.facets{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:16px; box-shadow:var(--sh-1)}
.facet{padding:14px 0; border-bottom:1px solid var(--line-2)}
.facet:first-of-type{padding-top:0}
.facet h3{font-size:13px; letter-spacing:.03em; margin-bottom:10px}
.facet .inp-grp{flex:1}
.facet .inp-grp .inp{min-width:0}
.facets-btn{display:inline-flex}
@media(max-width:899px){
  .facets{display:none}
  .facets.open{display:block; margin-bottom:18px}
}
@media(min-width:900px){
  .find{grid-template-columns:250px 1fr; align-items:start}
  .facets{position:sticky; top:84px}
  .facets-btn{display:none}
}
@media(min-width:900px){ .find .grid{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1200px){ .find .grid{grid-template-columns:repeat(4,1fr)} }

/* ---------- Autocomplétion d'adresse ---------- */
.ac{position:relative}
.ac-box{position:relative; display:flex; align-items:center}
.ac-box .inp{padding-left:38px; padding-right:38px}
.ac-ico{position:absolute; left:13px; color:var(--muted); font-size:14px; pointer-events:none}
.ac-clear{position:absolute; right:6px; width:26px; height:26px; border:0; border-radius:50%;
  background:none; color:var(--muted); cursor:pointer; display:grid; place-items:center; font-size:13px}
.ac-clear:hover{background:var(--line-2); color:var(--ink)}
.ac-list{position:absolute; left:0; right:0; top:calc(100% - 18px); z-index:40; display:none;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--sh-2); overflow:hidden}
.ac-list.on{display:block}
.ac-list li[role="option"]{display:flex; gap:11px; align-items:flex-start; padding:10px 13px; cursor:pointer;
  border-bottom:1px solid var(--line-2)}
.ac-list li[role="option"] > i{color:var(--muted); font-size:13px; margin-top:3px; flex-shrink:0}
.ac-list li[role="option"]:hover,.ac-list li[role="option"].on{background:#eff4f9}
.ac-voie{display:block; font-size:14.5px; font-weight:500; color:var(--ink); line-height:1.3}
.ac-voie b{font-weight:800}
.ac-sec{display:block; font-size:12.5px; color:var(--muted); margin-top:1px}
.ac-sec b{font-weight:700; color:var(--ink-2)}
.ac-vide{padding:12px 13px; font-size:13.5px; color:var(--muted); border-bottom:1px solid var(--line-2)}
.ac-att{padding:7px 13px; font-size:11px; color:var(--muted); background:#fafbfc; text-align:right}

/* ---------- Mot de passe : bouton œil et jauge de force ---------- */
.inp-grp .oeil{border:0; cursor:pointer; color:var(--muted); font-size:13px; padding:0 12px}
.inp-grp .oeil:hover{color:var(--ink); background:var(--line)}
.jauge{display:flex; gap:5px}
.jauge i{flex:1; height:4px; border-radius:2px; background:var(--line); transition:background .18s var(--ease)}
.jauge i.on{background:var(--navy-500)}
.jauge i.on.n1{background:var(--red)}
.jauge i.on.n4{background:var(--green)}

/* ---------- Autocomplétion de commune dans la barre de recherche ---------- */
.sb .f{position:relative}
.sb .ac-list{top:calc(100% + 6px); max-height:280px; overflow-y:auto}
.ac-list li[role="option"] .ac-voie{font-weight:500}

/* ---------- Téléphone avec indicatif ---------- */
.tel-grp{display:flex; gap:8px}
.tel-grp select.inp{flex:0 0 auto; width:auto; min-width:0; max-width:190px; padding-right:30px; background-position:right 9px center}
.tel-grp input.inp{flex:1; min-width:0}
@media(max-width:480px){ .tel-grp select.inp{max-width:132px; font-size:13.5px} }

/* ---------- Pied du rail back-office ---------- */
.sb-ft{display:flex; flex-direction:column; gap:2px}
.sb-ft a.it{padding:8px 0; font-size:13.5px; display:flex; align-items:center; gap:11px; color:#c7d3df; border-radius:var(--r-sm)}
.sb-ft a.it i{width:17px; text-align:center; color:#8ea3b8}
.sb-ft a.it:hover{color:#fff}
.sb-ft a.it:hover i{color:var(--green-hi)}
.sb-moi{display:flex; align-items:center; gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.09)}
.sb-moi b{display:block; color:#fff; font-size:13px; font-weight:600; line-height:1.2}
.sb-moi span{display:block; color:#8ea3b8; font-size:11.5px}

/* ---------- Connexion back-office ---------- */
.bo-login{min-height:calc(100vh - 28px); display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:32px 16px; background:var(--navy)}
.bo-login-card{width:100%; max-width:410px; background:#fff; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-3)}
.bo-login-hd{display:flex; align-items:center; gap:11px; padding:18px 22px; background:var(--navy-800)}
.bo-login-hd img{width:34px; height:34px; border-radius:8px}
.bo-login-hd b{display:block; color:#fff; font-size:16px; font-weight:800; letter-spacing:.06em; line-height:1}
.bo-login-hd span{display:block; color:var(--green-hi); font-size:9px; letter-spacing:.2em; font-weight:700; margin-top:3px}
.bo-login-bd{padding:26px 22px}
.bo-login-ft{margin-top:22px; font-size:13.5px}
.bo-login-ft a{color:#96a6b6}
.bo-login-ft a:hover{color:#fff}

/* ---------- Galerie photo ---------- */
.gal-vue{position:relative; aspect-ratio:3/2; background:var(--navy-900); overflow:hidden}
.gal-vue img{width:100%; height:100%; object-fit:cover; display:block}
.gal-fl{position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%;
  border:0; background:rgba(255,255,255,.92); color:var(--navy); cursor:pointer; display:grid; place-items:center;
  font-size:14px; box-shadow:var(--sh-1); opacity:0; transition:opacity .16s var(--ease)}
.gal-vue:hover .gal-fl,.gal-fl:focus-visible{opacity:1}
.gal-prec{left:12px} .gal-suiv{right:12px}
.gal-fl:hover{background:#fff}
.gal-cpt{position:absolute; left:12px; bottom:12px; background:rgba(1,18,39,.82); color:#fff;
  font-size:12px; font-weight:700; padding:4px 10px; border-radius:var(--r-pill); font-variant-numeric:tabular-nums}
.gal-zoom{position:absolute; right:12px; bottom:12px; width:32px; height:32px; border-radius:var(--r-sm);
  border:0; background:rgba(1,18,39,.82); color:#fff; cursor:pointer; font-size:12px; display:grid; place-items:center}
.gal-zoom:hover{background:var(--navy)}
.gal-vign{display:flex; gap:8px; padding:10px; overflow-x:auto; scrollbar-width:thin; background:#fafbfc;
  border-bottom:1px solid var(--line-2)}
.gal-v{flex:0 0 auto; width:78px; height:58px; padding:0; border:2px solid transparent; border-radius:var(--r-sm);
  overflow:hidden; cursor:pointer; background:none; opacity:.62; transition:opacity .14s, border-color .14s}
.gal-v img{width:100%; height:100%; object-fit:cover}
.gal-v:hover{opacity:.85}
.gal-v.on{opacity:1; border-color:var(--navy)}
@media(max-width:600px){ .gal-fl{opacity:1; width:34px; height:34px} .gal-v{width:64px; height:48px} }

/* compteur de photos sur la carte d'annonce */
.ph-nb{position:absolute; right:8px; bottom:8px; background:rgba(1,18,39,.82); color:#fff;
  font-size:11px; font-weight:700; padding:3px 8px; border-radius:var(--r-pill); display:flex; align-items:center; gap:5px}
.ph-nb i{font-size:10px}

/* visionneuse plein écran */
.ov-zoom{background:rgba(1,18,39,.94); padding:0}
.ov-zoom img{max-width:92vw; max-height:88vh; object-fit:contain; border-radius:var(--r-sm)}
.zoom-x{position:absolute; top:16px; right:18px; width:40px; height:40px; border-radius:50%; border:0;
  background:rgba(255,255,255,.14); color:#fff; font-size:17px; cursor:pointer; display:grid; place-items:center}
.zoom-x:hover{background:rgba(255,255,255,.26)}
.zoom-fl{position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%;
  border:0; background:rgba(255,255,255,.14); color:#fff; font-size:16px; cursor:pointer; display:grid; place-items:center}
.zoom-fl:hover{background:rgba(255,255,255,.26)}
.zoom-prec{left:18px} .zoom-suiv{right:18px}
.zoom-cpt{position:absolute; bottom:20px; left:50%; transform:translateX(-50%); color:#fff;
  font-size:13px; font-weight:700; font-variant-numeric:tabular-nums}
@media(max-width:600px){ .zoom-fl{width:38px; height:38px} .zoom-prec{left:8px} .zoom-suiv{right:8px} }

/* ---------- Sélecteur de photos ---------- */
.dz{border:1.5px dashed var(--line); border-radius:var(--r); background:#fafbfc; padding:22px 16px;
  text-align:center; cursor:pointer; transition:border-color .14s, background .14s}
.dz:hover,.dz:focus-visible{border-color:var(--navy-500); background:#f5f8fb}
.dz.survol{border-color:var(--green); background:var(--green-soft)}
.dz.plein{opacity:.5; pointer-events:none}
.dz > i{font-size:24px; color:var(--muted)}
.dz > b{display:block; margin-top:8px; font-size:15px}
.dz .hint{margin-top:4px}

.ph-grid{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.ph-item{position:relative; margin:0; border:1px solid var(--line); border-radius:var(--r-sm);
  overflow:hidden; background:#fff}
.ph-item.principale{border-color:var(--navy); box-shadow:0 0 0 1px var(--navy)}
.ph-item img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--line-2)}
.ph-badge{position:absolute; left:6px; top:6px; background:var(--navy); color:#fff; font-size:10px;
  font-weight:700; letter-spacing:.04em; padding:3px 7px; border-radius:4px}
.ph-act{position:absolute; right:6px; top:6px; display:flex; gap:5px; opacity:0; transition:opacity .14s}
.ph-item:hover .ph-act,.ph-item:focus-within .ph-act{opacity:1}
.ph-b{width:27px; height:27px; border-radius:6px; border:0; background:rgba(1,18,39,.86); color:#fff;
  cursor:pointer; font-size:11px; display:grid; place-items:center}
.ph-b:hover{background:var(--navy)}
.ph-b.sup:hover{background:var(--red)}
.ph-item figcaption{padding:7px 9px; font-size:11.5px; color:var(--ink-2); line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-top:1px solid var(--line-2)}
.ph-item figcaption span{display:block; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums}
@media(max-width:600px){ .ph-act{opacity:1} }

/* ---------- Infobulle ---------- */
.info{display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px;
  border-radius:50%; border:1px solid var(--muted); color:var(--muted); font-size:9px; font-weight:800;
  cursor:help; position:relative; vertical-align:middle; margin-left:5px; background:#fff; font-style:normal}
.info:hover,.info:focus-visible{border-color:var(--navy); color:var(--navy)}
.info::after{content:attr(data-info); position:absolute; left:50%; bottom:calc(100% + 9px);
  transform:translateX(-50%); width:260px; max-width:70vw; background:var(--navy); color:#fff;
  font-size:12.5px; font-weight:500; line-height:1.45; letter-spacing:0; padding:9px 11px;
  border-radius:var(--r-sm); box-shadow:var(--sh-2); opacity:0; visibility:hidden;
  transition:opacity .14s var(--ease); z-index:90; text-align:left; pointer-events:none}
.info::before{content:''; position:absolute; left:50%; bottom:calc(100% + 4px); transform:translateX(-50%);
  border:5px solid transparent; border-top-color:var(--navy); opacity:0; visibility:hidden;
  transition:opacity .14s var(--ease); z-index:91}
.info:hover::after,.info:hover::before,.info:focus-visible::after,.info:focus-visible::before{opacity:1; visibility:visible}
@media(max-width:520px){ .info::after{left:auto; right:-8px; transform:none} .info::before{left:auto; right:0} }

/* ---------- Calendrier de disponibilité ---------- */
.cal{border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; padding:10px 12px 12px}
.cal-nav{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.cal-fl{width:28px; height:28px; border-radius:var(--r-sm); border:1px solid var(--line); background:#fff;
  color:var(--ink-2); cursor:pointer; font-size:11px; display:grid; place-items:center}
.cal-fl:hover{background:var(--line-2); color:var(--navy)}
.cal-leg{font-size:11.5px; color:var(--muted); display:inline-flex; align-items:center; gap:6px}
.cal-pt{width:11px; height:11px; border-radius:3px; display:inline-block; background:var(--line-2);
  position:relative; overflow:hidden}
.cal-pt.pris::after{content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg, transparent 0 2px, var(--muted) 2px 3px)}
.cal-2{display:grid; gap:16px; grid-template-columns:1fr}
@media(min-width:520px){ .cal-2{grid-template-columns:1fr 1fr} }
.cal-hd{text-align:center; font-size:13px; font-weight:700; text-transform:capitalize; margin-bottom:6px}
.cal-j,.cal-g{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.cal-j span{text-align:center; font-size:10.5px; font-weight:700; color:var(--muted); padding-bottom:3px}
.cal-d{aspect-ratio:1; border:0; background:none; border-radius:var(--r-sm); cursor:pointer;
  font-size:12.5px; font-variant-numeric:tabular-nums; color:var(--ink); padding:0;
  display:grid; place-items:center; position:relative}
/* Le survol doit ceder devant la selection : sans les :not, la specificite de
   :hover l'emportait sur .bout et le jour clique restait gris sous le curseur,
   ce qui donnait l'impression que le clic n'avait pas ete pris en compte. */
.cal-d:hover:not(:disabled):not(.bout):not(.dans){background:var(--line-2)}
.cal-d.off{color:#c9d1d9; cursor:default}
.cal-d.pris{color:var(--muted); cursor:not-allowed; text-decoration:line-through; background:var(--line-2)}
.cal-d.pris::after{content:''; position:absolute; inset:2px; border-radius:4px;
  background:repeating-linear-gradient(45deg, transparent 0 3px, rgba(102,117,127,.28) 3px 4px)}
.cal-d.dans{background:var(--green-soft)}
.cal-d.bout{background:var(--green); color:var(--navy); font-weight:800}
.cal-v{aspect-ratio:1}

/* ---------- Barres classées (répartition) ---------- */
.rank{display:flex; flex-direction:column; gap:11px}
.rank .l{display:flex; justify-content:space-between; align-items:baseline; font-size:13px; margin-bottom:4px}
.rank .l b{font-variant-numeric:tabular-nums; font-weight:700}
.rank .t{height:10px; background:var(--line-2); border-radius:5px; overflow:hidden}
.rank .t i{display:block; height:100%; background:var(--navy-700); border-radius:5px}

/* ---------- Photo de profil ---------- */
.avatar img{width:100%; height:100%; object-fit:cover; border-radius:50%; display:block}
.pp{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.pp-vue{width:88px; height:88px; border-radius:50%; overflow:hidden; background:var(--navy-700);
  display:grid; place-items:center; color:#fff; font-size:30px; font-weight:700; flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.pp-vue img{width:100%; height:100%; object-fit:cover}

/* ---------- Ajouts d'integration (hors maquette, ne pas styler ici le reste) ---------- */
/* Lien d'evitement clavier (RGAA) : invisible hors focus. */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;
  padding:10px 16px;z-index:200;border-radius:0 0 var(--r) 0}
.skip-link:focus{left:0}
/* Indicateurs htmx : includeIndicatorStyles est desactive (CSP), on les pose ici. */
.htmx-indicator{display:none}
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{display:inline-block}
/* Notation par etoiles (avis.html) : radios sr-only + labels etoiles.
   Sans JS, :has() peint les etoiles jusqu'a la note cochee. */
.rate-input{display:flex;gap:6px;font-size:30px;color:#d6dce2}
.rate-input label{cursor:pointer;color:inherit;line-height:1}
.rate-input label.on{color:var(--navy-700)}
.rate-input:has(input[value="1"]:checked) label:nth-of-type(-n+1),
.rate-input:has(input[value="2"]:checked) label:nth-of-type(-n+2),
.rate-input:has(input[value="3"]:checked) label:nth-of-type(-n+3),
.rate-input:has(input[value="4"]:checked) label:nth-of-type(-n+4),
.rate-input:has(input[value="5"]:checked) label:nth-of-type(-n+5){color:var(--navy-700)}
.rate input:focus-visible + label{outline:2px solid var(--navy-700);outline-offset:2px;border-radius:4px}
/* Autocompletion commune : les options filtrees doivent etre reellement
   masquees — la regle display:flex des options bat le [hidden] UA — et
   l'option active au clavier reprend le style du survol. */
.ac-list li[role="option"][hidden]{display:none}
.ac-list li[role="option"].kb{background:#eff4f9}
/* Footer colle en bas des pages courtes : body en colonne pleine hauteur,
   main absorbe l'espace restant (aucun effet sur les pages longues). */
body:not(.bo){display:flex; flex-direction:column; min-height:100vh; min-height:100dvh}
body:not(.bo) main#contenu{display:block; flex:1 0 auto}
/* Autocompletion : code postal en bout de ligne, discret. */
.ac-list .ac-cp{margin-left:auto;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;flex-shrink:0}
/* Documents juridiques de /cgu (style inline du head de cgu.html, maquette). */
.legal h2{font-size:17px;margin:22px 0 6px}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:15px;margin:16px 0 4px;color:var(--navy)}
.legal p{font-size:14px;line-height:1.65;margin:0 0 10px}
.legal ul{margin:0 0 12px 18px}
.legal li{font-size:14px;line-height:1.6;margin-bottom:4px}
.legal a{text-decoration:underline}