/* Tracker Villas Hammamet — reprise du style de la maquette Syrina,
   étendu pour le suivi : badges de statut, note /5, commentaires, filtres. */

:root{
  --bg:#f6f4ef; --card:#ffffff; --ink:#2b2b28; --muted:#726f68;
  --line:#e6e2d8; --accent:#1f7a63; --accent-soft:#e7f2ee;
  --warn:#b5741f; --warn-soft:#f6ecdc; --grey:#8a8781; --grey-soft:#efece5;
  --star:#c9a227; --star-soft:#faf3d9;
  --danger:#a4443a; --danger-soft:#f7e7e4;
  --info:#2f6f9f; --info-soft:#e6eff6;
  --love:#b03a5b; --love-soft:#f9e8ee;
  --shadow:0 1px 3px rgba(0,0,0,.06),0 6px 18px rgba(0,0,0,.05);
}

*{box-sizing:border-box}

body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55;-webkit-font-smoothing:antialiased;
}

.wrap{max-width:960px;margin:0 auto;padding:28px 18px 60px}

/* ---------- En-tête ---------- */
header.top{text-align:center;padding:14px 0 6px}
header.top h1{font-size:1.6rem;margin:0 0 6px;letter-spacing:-.2px}
header.top p{color:var(--muted);margin:4px 0;font-size:.95rem}
.budget{display:inline-block;margin-top:10px;background:var(--accent-soft);
  color:var(--accent);font-weight:600;padding:7px 14px;border-radius:999px;font-size:.9rem}
.legend{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:16px 0 0;font-size:.82rem;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:50%;display:inline-block}

.insight{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:12px;padding:16px 18px;margin:24px 0 6px;box-shadow:var(--shadow);font-size:.92rem}
.insight b{color:var(--ink)}
.insight .k{color:var(--accent);font-weight:600}
.criteria{color:var(--muted);font-size:.86rem;margin:14px 2px 0;text-align:center}

/* ---------- Filtres & tri ---------- */
.toolbar{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:12px 14px;margin:26px 0 4px;box-shadow:var(--shadow);
}
.toolbar .champ{display:flex;flex-direction:column;gap:3px;flex:1 1 140px;min-width:0}
.toolbar label{font-size:.72rem;font-weight:600;color:var(--muted);letter-spacing:.3px;text-transform:uppercase}
.toolbar select{
  font:inherit;font-size:.88rem;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:9px;padding:8px 10px;width:100%;
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23726f68' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;
}
.toolbar select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.reset{
  font:inherit;font-size:.82rem;font-weight:600;color:var(--muted);cursor:pointer;
  background:var(--grey-soft);border:1px solid var(--line);border-radius:9px;padding:8px 12px;
}
.reset:hover{color:var(--ink)}
.compteur{flex:1 1 100%;font-size:.8rem;color:var(--muted);text-align:right}

/* ---------- États ---------- */
.etat{
  text-align:center;color:var(--muted);font-size:.92rem;
  padding:34px 18px;margin-top:22px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
}
.etat.erreur{border-left:4px solid var(--danger);color:var(--danger);text-align:left}
.etat.erreur code{
  display:block;margin-top:8px;font-size:.8rem;color:var(--muted);
  word-break:break-all;
}
.etat[hidden]{display:none}

/* ---------- Sections ---------- */
.sec-title{display:flex;align-items:center;gap:10px;margin:36px 0 4px;font-size:1.15rem;font-weight:700}
.sec-title .dot{width:11px;height:11px;border-radius:50%;flex:none}
.dot.ok{background:var(--accent)} .dot.warn{background:var(--warn)} .dot.grey{background:var(--grey)}
.sec-sub{color:var(--muted);font-size:.88rem;margin:0 0 14px}

.grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
@media(max-width:880px){.grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.grid{grid-template-columns:1fr}}

/* ---------- Carte villa ---------- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:15px;box-shadow:var(--shadow);display:flex;flex-direction:column;position:relative;
}
.card.star{border:1.5px solid var(--star);box-shadow:0 0 0 3px var(--star-soft),var(--shadow)}
.card.rejete{opacity:.62}
.ribbon{
  position:absolute;top:-11px;left:14px;background:var(--star);color:#fff;font-size:.7rem;
  font-weight:700;padding:3px 10px;border-radius:999px;letter-spacing:.2px;
}

.row1{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.ref{font-size:.72rem;font-weight:700;color:var(--muted);letter-spacing:.5px}
.price{font-size:1.25rem;font-weight:700;letter-spacing:-.3px;margin-top:2px}
.price .eur{display:block;font-size:.78rem;font-weight:500;color:var(--muted);margin-top:1px}

.tag{font-size:.7rem;font-weight:600;padding:4px 8px;border-radius:999px;white-space:nowrap}
.tag.ok{background:var(--accent-soft);color:var(--accent)}
.tag.warn{background:var(--warn-soft);color:var(--warn)}
.tag.grey{background:var(--grey-soft);color:var(--grey)}

/* Badge de statut + note */
.suivi{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:10px 0 0}
.statut{font-size:.72rem;font-weight:700;padding:4px 9px;border-radius:8px;letter-spacing:.2px}
.statut.a_visiter{background:var(--grey-soft);color:var(--grey)}
.statut.visite_prevue{background:var(--info-soft);color:var(--info)}
.statut.visite{background:var(--warn-soft);color:var(--warn)}
.statut.retenu{background:var(--accent-soft);color:var(--accent)}
.statut.coup_de_coeur{background:var(--love-soft);color:var(--love)}
.statut.rejete{background:var(--danger-soft);color:var(--danger)}

.etoiles{font-size:.86rem;letter-spacing:1px;color:var(--star);white-space:nowrap}
.etoiles .vide{color:var(--line)}
.etoiles.non-note{color:var(--muted);font-size:.75rem;letter-spacing:0}

.loc{margin:9px 0 10px;font-weight:600;font-size:.92rem}
.loc span{font-weight:400;color:var(--muted)}

.specs{border-top:1px solid var(--line);padding-top:10px;margin-bottom:10px;font-size:.86rem}
.specs .sp{display:flex;justify-content:space-between;gap:8px;padding:3px 0;color:var(--muted)}
.specs .sp b{color:var(--ink);font-weight:600;text-align:right}

.feat{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 12px}
.chip{font-size:.74rem;font-weight:600;padding:4px 9px;border-radius:8px;display:inline-flex;gap:5px;align-items:center}
.chip.yes{background:var(--accent-soft);color:var(--accent)}
.chip.no{background:var(--grey-soft);color:var(--grey)}
.chip.q{background:var(--warn-soft);color:var(--warn)}

.remarque{font-size:.82rem;color:var(--muted);margin:0 0 11px}

/* Commentaires */
.avis{border-top:1px solid var(--line);padding-top:10px;margin-bottom:12px;display:flex;flex-direction:column;gap:7px}
.avis-titre{font-size:.72rem;font-weight:700;color:var(--muted);letter-spacing:.3px;text-transform:uppercase}
.avis-item{font-size:.83rem;padding:6px 9px;border-radius:8px;border-left:3px solid var(--line);background:var(--bg)}
.avis-item.positif{border-left-color:var(--accent);background:var(--accent-soft)}
.avis-item.negatif{border-left-color:var(--danger);background:var(--danger-soft)}
.avis-item .meta{display:block;font-size:.72rem;color:var(--muted);margin-top:3px}
.avis-item .meta b{color:var(--ink);font-weight:600;text-transform:capitalize}

.btn{
  margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;background:var(--ink);color:#fff;font-weight:600;font-size:.84rem;
  padding:9px 12px;border-radius:10px;transition:opacity .15s;
}
.btn:hover{opacity:.85}

/* ---------- Checklist & pied ---------- */
.checklist{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:20px 22px;margin-top:36px;box-shadow:var(--shadow);
}
.checklist h2{margin:0 0 4px;font-size:1.1rem}
.checklist p.intro{color:var(--muted);font-size:.9rem;margin:0 0 14px}
.checklist ul{margin:0;padding:0;list-style:none;columns:2;column-gap:26px}
@media(max-width:600px){.checklist ul{columns:1}}
.checklist li{padding:6px 0 6px 26px;position:relative;font-size:.9rem;break-inside:avoid}
.checklist li:before{
  content:"";position:absolute;left:0;top:8px;width:14px;height:14px;
  border:1.5px solid var(--accent);border-radius:4px;
}

.foot{text-align:center;color:var(--grey);font-size:.78rem;margin-top:30px;line-height:1.6}

/* ===========================================================================
   Écran de connexion — seule chose servie tant qu'on n'est pas identifié
   =========================================================================== */

.connexion{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 18px;
}
.connexion-carte{
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow);padding:32px 28px;width:100%;max-width:380px;text-align:center;
}
.connexion-emoji{font-size:2.4rem;line-height:1;margin-bottom:10px}
.connexion-carte h1{font-size:1.35rem;margin:0 0 4px;letter-spacing:-.2px}
.connexion-intro{color:var(--muted);font-size:.88rem;margin:0 0 22px}
.connexion-carte .champ-modale{text-align:left;margin-bottom:16px}
.connexion-carte .principal{
  font:inherit;font-size:.92rem;font-weight:600;cursor:pointer;width:100%;
  background:var(--ink);color:#fff;border:0;border-radius:10px;padding:11px;
  transition:opacity .15s;
}
.connexion-carte .principal:hover{opacity:.85}
.connexion-erreur{
  background:var(--danger-soft);color:var(--danger);border-left:3px solid var(--danger);
  border-radius:8px;padding:9px 11px;margin:0 0 16px;font-size:.84rem;text-align:left;
}

/* ===========================================================================
   Édition des fiches — disponible dès qu'on est connecté
   =========================================================================== */

.barre-bas{flex:1 1 100%;display:flex;align-items:center;justify-content:space-between;gap:10px}
.barre-bas .compteur{flex:0 1 auto;text-align:right}

.deconnexion{
  font-size:.78rem;font-weight:600;color:var(--muted);text-decoration:none;
  border-bottom:1px solid var(--line);padding-bottom:1px;
}
.deconnexion:hover{color:var(--danger);border-color:var(--danger)}

.ajout-villa{
  font:inherit;font-size:.88rem;font-weight:600;color:var(--accent);cursor:pointer;
  background:var(--card);border:1.5px dashed var(--accent);border-radius:12px;
  padding:12px 16px;margin:26px 0 0;width:100%;transition:background .15s;
}
.ajout-villa:hover{background:var(--accent-soft)}

/* --- Contrôles en pied de carte --- */
.edit-zone{
  margin-top:12px;padding-top:11px;border-top:1px dashed var(--line);
  display:flex;flex-direction:column;gap:9px;
}
.edit-statut{display:flex;align-items:center;gap:8px}
.edit-statut span{font-size:.72rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.edit-statut select{
  font:inherit;font-size:.82rem;color:var(--ink);background:var(--bg);flex:1;
  border:1px solid var(--line);border-radius:8px;padding:5px 8px;
}

.edit-note{display:flex;align-items:center;gap:2px}
.etoile-btn{
  font-size:1.15rem;line-height:1;color:var(--line);cursor:pointer;
  background:none;border:0;padding:1px 2px;transition:color .12s,transform .12s;
}
.etoile-btn.pleine{color:var(--star)}
.edit-note:hover .etoile-btn{color:var(--star-soft)}
.edit-note .etoile-btn:hover,
.edit-note .etoile-btn:hover ~ .etoile-btn.pleine{color:var(--star)}
.edit-note .etoile-btn:hover{transform:scale(1.15)}
.etoile-raz{
  font-size:.85rem;color:var(--muted);cursor:pointer;background:none;border:0;
  padding:2px 4px;margin-left:5px;
}
.etoile-raz:hover{color:var(--danger)}

.edit-actions{display:flex;gap:6px}
.edit-actions button{
  font:inherit;font-size:.76rem;font-weight:600;color:var(--muted);cursor:pointer;
  background:var(--grey-soft);border:1px solid var(--line);border-radius:8px;
  padding:6px 9px;flex:1;transition:background .15s,color .15s;
}
.edit-actions button:hover{background:var(--bg);color:var(--ink)}
.edit-actions button.danger{flex:0 0 auto}
.edit-actions button.danger:hover{background:var(--danger-soft);color:var(--danger);border-color:var(--danger)}

/* --- Commentaires en mode édition --- */
.avis-item{position:relative}
.avis-suppr{
  position:absolute;top:3px;right:4px;font-size:.9rem;line-height:1;color:var(--muted);
  cursor:pointer;background:none;border:0;padding:2px 4px;opacity:.55;
}
.avis-suppr:hover{opacity:1;color:var(--danger)}
.avis-item{padding-right:24px}
.avis-vide{font-size:.8rem;color:var(--muted);margin:0;font-style:italic}

/* --- Modale --- */
#modale{
  border:0;border-radius:16px;padding:0;background:var(--card);color:var(--ink);
  width:min(560px,calc(100vw - 28px));box-shadow:0 12px 40px rgba(0,0,0,.22);
  /* Le formulaire villa est long : sur mobile il doit défiler dans la modale,
     pas déborder hors de l'écran. */
  max-height:min(86vh,860px);overflow-y:auto;overscroll-behavior:contain;
}
#modale::backdrop{background:rgba(43,43,40,.45);backdrop-filter:blur(2px)}

.modale-form{padding:22px}

/* Les boutons restent atteignables sans dérouler jusqu'en bas du formulaire. */
.modale-pied{
  position:sticky;bottom:0;z-index:1;
  background:var(--card);border-top:1px solid var(--line);
  padding:12px 0 2px;margin-bottom:-2px;
}
.modale-form h2{margin:0 0 12px;font-size:1.1rem}
.modale-intro{color:var(--muted);font-size:.86rem;margin:0 0 14px}

.grille-form{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@media(max-width:520px){.grille-form{grid-template-columns:1fr}}

.champ-modale{display:flex;flex-direction:column;gap:4px}
.champ-modale.large{grid-column:1 / -1}
.champ-modale > span{font-size:.72rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.champ-modale input,
.champ-modale select,
.champ-modale textarea{
  font:inherit;font-size:.88rem;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:9px;padding:8px 10px;width:100%;
}
.champ-modale textarea{resize:vertical;line-height:1.5}
.champ-modale input:focus-visible,
.champ-modale select:focus-visible,
.champ-modale textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px;background:var(--card)}

.sentiments{display:flex;gap:7px;flex-wrap:wrap}
.radio-sentiment{
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  font-size:.8rem;font-weight:600;color:var(--muted);
  background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:6px 11px;
}
.radio-sentiment input{position:absolute;opacity:0;pointer-events:none}
.radio-sentiment:has(input:checked){border-color:currentColor}
.radio-sentiment.positif:has(input:checked){background:var(--accent-soft);color:var(--accent)}
.radio-sentiment.negatif:has(input:checked){background:var(--danger-soft);color:var(--danger)}
.radio-sentiment.neutre:has(input:checked){background:var(--grey-soft);color:var(--ink)}
.radio-sentiment:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:1px}

.modale-erreur{
  background:var(--danger-soft);color:var(--danger);border-left:3px solid var(--danger);
  border-radius:8px;padding:9px 11px;margin:14px 0 0;font-size:.83rem;white-space:pre-line;
}
.modale-erreur[hidden]{display:none}

.modale-pied{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;flex-wrap:wrap}
.modale-pied button{
  font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;
  border-radius:9px;padding:9px 15px;border:1px solid transparent;transition:opacity .15s;
}
.modale-pied button:hover{opacity:.85}
.modale-pied button:disabled{opacity:.5;cursor:progress}
.modale-pied .principal{background:var(--ink);color:#fff}
.modale-pied .secondaire{background:transparent;color:var(--muted);border-color:var(--line)}
.modale-pied .danger{background:var(--danger-soft);color:var(--danger);border-color:var(--danger)}

.confirmation h2{font-size:1.02rem;line-height:1.45}

/* --- Toast --- */
.toast{
  position:fixed;left:50%;bottom:22px;transform:translate(-50%,14px);
  background:var(--ink);color:#fff;font-size:.85rem;font-weight:600;
  padding:11px 18px;border-radius:999px;box-shadow:0 6px 22px rgba(0,0,0,.25);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
  max-width:calc(100vw - 32px);text-align:center;z-index:10;
}
.toast.visible{opacity:1;transform:translate(-50%,0)}
.toast.erreur{background:var(--danger);white-space:pre-line;border-radius:12px}

@media (prefers-reduced-motion:reduce){
  .toast,.etoile-btn,.bascule,.ajout-villa{transition:none}
}