/* ============================================================
   GABONIMMO.COM — Design system
   La vitrine de l'immobilier au Gabon
   ============================================================ */

:root {
  --brand: #B4532A;
  --brand-dark: #8A3B1C;
  --brand-soft: #FAEAE1;
  --brand-tint: #FDF6F1;
  --accent: #C9A227;
  --accent-soft: #FBF3DC;
  --blue: #1C5A8A;
  --ink: #24150F;
  --ink-2: #4B392F;
  --muted: #7D6B5F;
  --muted-2: #AA9C90;
  --line: #ECE1D8;
  --bg: #FAF6F2;
  --surface: #FFFFFF;
  --danger: #B3261E;
  --danger-soft: #FCEDEC;
  --warn: #9A6700;
  --warn-soft: #FFF8E5;
  --ok: #B4532A;
  --ok-soft: #FAEAE1;

  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  --shadow: 0 4px 16px rgba(60,30,15, .07);
  --shadow-sm: 0 2px 8px rgba(60,30,15, .05);
  --shadow-lg: 0 12px 34px rgba(60,30,15, .12);

  /* UNE SEULE famille de caractères sur toute la plateforme : Inter.
     --serif reste déclaré comme alias de --sans : les feuilles qui l'utilisent
     encore (titres, nom de la marque, fiches de service) affichent donc la même
     police que les textes courants, sans avoir à les réécrire une par une. */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: var(--sans);

  --pad: 16px;
  --maxw: 1180px;
  --nav-h: 62px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 12px);
}

body.no-bottomnav { padding-bottom: 0; }

img { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.22; font-weight: 700; letter-spacing: -.01em; }
h1 { font-family: var(--sans); font-size: 1.9rem; font-weight: 800; }
h2 { font-size: 1.28rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .8em; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.wrap-narrow { max-width: 760px; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.tiny { font-size: .74rem; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mt0 { margin-top: 0; } .mt1 { margin-top: 8px; } .mt2 { margin-top: 16px; } .mt3 { margin-top: 24px; }
.mb0 { margin-bottom: 0; } .mb1 { margin-bottom: 8px; } .mb2 { margin-bottom: 16px; } .mb3 { margin-bottom: 24px; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------------- Splash (app installée) ----------------
   Le fond reprend exactement la teinte crème du logo : l'emblème se
   fond dedans au lieu de flotter sur une pastille d'une autre couleur. */
#app-splash {
  display: none; position: fixed; inset: 0; z-index: 99999; pointer-events: none;
  flex-direction: column; align-items: center; justify-content: center;
  background: #F2E1CB; gap: 14px;
}
#app-splash.show { display: flex; animation: splashOut .4s ease 1.2s forwards; }
#app-splash img { width: 168px; height: auto; }
#app-splash span { color: var(--ink); font-weight: 700; letter-spacing: .04em; font-size: .95rem; }

/* ---------------- Header ---------------- */
.app-header {
  position: sticky; top: 0; z-index: 900;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top, 0px);
}
.app-header .bar {
  display: flex; align-items: center; gap: 10px;
  max-width: var(--maxw); margin: 0 auto; padding: 10px var(--pad);
  min-height: 56px;
}
/* Le bloc du logo peut se réduire : sinon il pousse les boutons de droite
   hors de l'écran sur téléphone (bouton coupé). */
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; flex: 0 1 auto; min-width: 0; overflow: hidden; }
.brand:hover { text-decoration: none; }
.brand-logo { height: 36px; width: 36px; flex: 0 0 auto; object-fit: contain; }
/* Logo d'en-tête public : emblème + nom de la marque sur une seule image. */
.brand-logo-wide { height: 40px; width: auto; max-width: 100%; flex: 0 0 auto; object-fit: contain; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
  background: linear-gradient(140deg, var(--brand), #C2653A);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .82rem; letter-spacing: -.03em;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.brand-text b { font-size: .93rem; color: var(--ink); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-text i { font-style: normal; font-size: .63rem; color: var(--muted); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.top-links { display: none; gap: 4px; margin-left: auto; align-items: center; }
.top-links a {
  padding: 8px 11px; border-radius: var(--radius-pill);
  color: var(--ink-2); font-size: .87rem; font-weight: 500;
  white-space: nowrap; flex: 0 0 auto;
}
.top-links a:hover { background: var(--brand-soft); color: var(--brand-dark); text-decoration: none; }
.top-links a.active { background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; }
/* Les boutons de droite restent toujours entiers : ils ne se compriment pas. */
.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }

.hamburger {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex: 0 0 auto;
}
.hamburger svg { width: 20px; height: 20px; }

.mobile-menu {
  border-top: 1px solid var(--line); background: var(--surface);
  max-height: 0; overflow: hidden; transition: max-height .25s ease;
}
.mobile-menu.open { max-height: 520px; }
.mobile-menu nav { padding: 8px var(--pad) 16px; max-width: var(--maxw); margin: 0 auto; display: grid; gap: 2px; }
.mobile-menu a {
  padding: 11px 12px; border-radius: var(--radius-sm); color: var(--ink-2);
  font-weight: 500; font-size: .92rem;
}
.mobile-menu a:hover { background: var(--brand-tint); text-decoration: none; }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 18px; border-radius: var(--radius-pill);
  border: 1px solid transparent; background: var(--brand); color: #fff;
  font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
  text-decoration: none; line-height: 1.2;
}
.btn:hover { background: var(--brand-dark); text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
.btn-outline { background: transparent; border-color: var(--line); color: var(--ink-2); }
.btn-outline:hover { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-dark); }
.btn-ghost { background: transparent; color: var(--brand-dark); }
.btn-ghost:hover { background: var(--brand-soft); }
.btn-accent { background: var(--accent); color: #3A2C00; }
.btn-accent:hover { background: #B4911F; }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #8F1D17; }
.btn-sm { padding: 7px 13px; font-size: .81rem; }
.btn-lg { padding: 14px 24px; font-size: .97rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn.disabled { opacity: .55; pointer-events: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------------- Cards ---------------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--pad);
  box-shadow: var(--shadow-sm); margin-bottom: 14px;
}
/* Une carte posée sur un <a> (toute la carte est cliquable) doit être un
   bloc : laissée en ligne, l'ancre se fragmente en plusieurs morceaux autour
   de ses enfants, et le fond blanc comme le padding débordent de travers. */
a.card { display: block; }
.card.tight { padding: 13px; }
.card.flat { box-shadow: none; }
.card-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.card-title h2, .card-title h3 { margin: 0; }

.section { padding: 26px 0 6px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 15px; flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.section-head p { margin: 3px 0 0; color: var(--muted); font-size: .87rem; }

/* Sur téléphone, le titre occupe toute la largeur et le bouton d'action
   passe SOUS lui. Côte à côte, le bouton comprimait le titre et sa
   description au point de les faire se chevaucher. */
@media (max-width: 700px) {
  .section-head { align-items: flex-start; gap: 9px; }
  .section-head > .section-head-illus { flex: 1 1 100%; }
  .section-head > .btn { flex: 0 0 auto; }
  .section-head h2 { font-size: 1.08rem; line-height: 1.3; }
  .section-head p { font-size: .82rem; line-height: 1.45; }
}

/* ---------------- Hero ----------------
   La photo d'ouverture est le premier contact avec le site : elle est
   affichée en grand, pleinement visible, avec un voile léger posé
   uniquement là où passe le texte pour rester parfaitement lisible. */
.hero {
  position: relative; color: #fff; overflow: hidden;
  background: #2E1A12;
  min-height: 74vh; display: flex; align-items: center;
}
.hero-bg { position: absolute; inset: 0; }
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  opacity: 1; transform: scale(1.02);
  animation: heroZoom 24s ease-in-out infinite alternate;
}
@keyframes heroZoom { from { transform: scale(1.02); } to { transform: scale(1.11); } }
/* Voile dégradé : dense en bas et à gauche (sous le texte), quasi absent à droite. */
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(28,15,8,.72) 0%, rgba(28,15,8,.42) 46%, rgba(28,15,8,.12) 100%),
    linear-gradient(180deg, rgba(28,15,8,.30) 0%, rgba(28,15,8,.24) 46%, rgba(28,15,8,.62) 100%);
}
.hero-inner { position: relative; z-index: 2; width: 100%; padding: 62px 0 54px; }
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 6px 13px; border-radius: var(--radius-pill);
  font-size: .73rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  margin-bottom: 15px; text-shadow: 0 1px 6px rgba(0,0,0,.45);
}
.hero h1 {
  color: #fff; font-size: 2.2rem; margin-bottom: 12px; max-width: 17em;
  text-shadow: 0 3px 22px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.5);
}
.hero p.lead {
  color: rgba(255,255,255,.94); font-size: 1rem; max-width: 38em; margin-bottom: 20px;
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
}
.hero .chips .chip { text-shadow: none; }

.search-panel {
  background: var(--surface); border-radius: var(--radius-lg);
  padding: 14px; box-shadow: var(--shadow-lg); color: var(--ink);
}
.search-grid { display: grid; gap: 8px; grid-template-columns: 1fr; }
.field-inline { display: flex; flex-direction: column; gap: 4px; }
.field-inline label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }

/* ---------------- Forms ---------------- */
label { font-size: .84rem; font-weight: 600; color: var(--ink-2); display: block; margin-bottom: 5px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=tel], input[type=date], input[type=time], input[type=search], input[type=url],
select, textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); font: inherit; font-size: .92rem;
  background: var(--surface); color: var(--ink); transition: border .15s, box-shadow .15s;
}
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7B74' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; padding-right: 34px; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(180,83,42,.14);
}
textarea { min-height: 104px; resize: vertical; }
.form-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
.form-grid.two { grid-template-columns: 1fr; }
.check { display: flex; align-items: flex-start; gap: 9px; font-weight: 500; font-size: .87rem; }
.check input { width: auto; margin-top: 3px; flex: 0 0 auto; }
.field-error { color: var(--danger); font-size: .78rem; margin-top: 4px; }

/* ---------------- Badges / chips ---------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  background: var(--brand-soft); color: var(--brand-dark); white-space: nowrap;
}
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.badge.neutral { background: #F2ECE5; color: var(--muted); }
.badge.accent { background: var(--accent-soft); color: #7A5E00; }
.badge.blue { background: #E8F0F7; color: var(--blue); }
.badge.verified { background: var(--brand); color: #fff; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  padding: 7px 13px; border-radius: var(--radius-pill); border: 1px solid var(--line);
  background: var(--surface); font-size: .83rem; color: var(--ink-2); cursor: pointer;
  transition: transform .12s ease;
}
.chip:hover { border-color: var(--brand); background: var(--brand-tint); }
.chip.active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.chip:active { transform: scale(.97); }

/* ---------------- Grilles ---------------- */
/* Un enfant de grille a min-width:auto par défaut : il refuse de se réduire
   sous la largeur de son contenu, et la colonne déborde alors à droite de
   l'écran (texte et badges coupés). On autorise la réduction. */
.grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
.grid > * { min-width: 0; }
.grid-2 { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.stats { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.stats.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.stats.three { grid-template-columns: repeat(2, minmax(0,1fr)); }
.stat .v.num { font-size: 1.02rem; white-space: nowrap; }

/* ---------------- Bien card ---------------- */
.bien-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: transform .14s ease, box-shadow .14s ease;
}
.bien-card:hover { box-shadow: var(--shadow); }
.bien-card:active { transform: scale(.985); }
.bien-media { position: relative; aspect-ratio: 4 / 3; background: #F1E9E1; overflow: hidden; }
.bien-media img { width: 100%; height: 100%; object-fit: cover; }
.bien-media .tag {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: rgba(40,22,14,.82); color: #fff; padding: 4px 10px;
  border-radius: var(--radius-pill); font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
}
.bien-media .tag.vente { background: rgba(180,83,42,.92); }
.bien-media .tag.location { background: rgba(28,90,138,.92); }
.bien-media .tag.terrain { background: rgba(154,103,0,.92); }
.bien-media .tag.coloc { background: rgba(120,60,150,.92); }
.bien-media .tag.coachat { background: rgba(138,59,28,.92); }
.bien-media .tag.offre-particulier {
  top: auto; bottom: 10px; left: 10px;
  background: rgba(255,255,255,.94); color: var(--brand-dark);
  display: inline-flex; align-items: center; gap: 4px;
  text-transform: none; letter-spacing: 0; font-size: .7rem;
}
.bien-media .tag.offre-particulier svg { width: 13px; height: 13px; }
.bien-media .fav {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center;
}
.bien-media .fav svg { width: 17px; height: 17px; stroke: var(--muted); fill: none; }
.bien-media .fav.on svg { stroke: var(--danger); fill: var(--danger); }
.bien-body { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.bien-body h3 { margin: 0; font-size: .98rem; line-height: 1.3; }
.bien-price { font-weight: 800; font-size: 1.02rem; color: var(--brand-dark); }
.bien-price span { font-weight: 500; font-size: .76rem; color: var(--muted); }
.bien-loc { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: .82rem; }
.bien-loc svg { width: 14px; height: 14px; flex: 0 0 auto; }
.bien-meta { display: flex; flex-wrap: wrap; gap: 10px; color: var(--ink-2); font-size: .8rem; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--line); }
.bien-meta span { display: inline-flex; align-items: center; gap: 4px; }
.bien-meta svg { width: 14px; height: 14px; color: var(--muted); }

/* ---------------- Listes ---------------- */
.list { display: flex; flex-direction: column; gap: 10px; }
.list-row {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 13px; display: flex; gap: 12px; align-items: flex-start;
}
.list-row .grow { flex: 1; min-width: 0; }
/* Le titre et son sous-titre s'empilent l'un sous l'autre : sans cela,
   ils s'écrivent sur la même ligne et deviennent illisibles. */
.list-row .grow > .title,
.list-row .grow > .sub { display: block; }
.list-row .title { font-weight: 600; font-size: .92rem; margin: 0 0 2px; }
.list-row .sub { color: var(--muted); font-size: .8rem; }
.list-row .amount { font-weight: 800; white-space: nowrap; }

/* ---------------- Statistiques ---------------- */
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; box-shadow: var(--shadow-sm);
}
.stat .k { color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.stat .v { font-size: 1.24rem; font-weight: 800; margin-top: 3px; letter-spacing: -.02em; }
.stat .d { font-size: .76rem; color: var(--muted); margin-top: 2px; }
.stat.ok .v { color: var(--brand-dark); }
.stat.danger .v { color: var(--danger); }
.stat.accent .v { color: #8A6A00; }

/* ---------------- Tables ---------------- */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: .85rem; min-width: 560px; }
table.data th {
  text-align: left; padding: 10px; background: var(--brand-tint);
  color: var(--ink-2); font-size: .73rem; text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.data td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: #FDF9F6; }

/* ---------------- Barre de navigation basse ---------------- */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
  display: flex; align-items: stretch;
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(236,225,216,.9);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom-nav a {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; height: var(--nav-h); color: var(--muted);
  font-size: .66rem; font-weight: 600; text-decoration: none;
  transition: transform .12s ease;
}
.bottom-nav a:hover { text-decoration: none; }
.bottom-nav a:active { transform: scale(.94); }
.bottom-nav a svg { width: 21px; height: 21px; stroke-width: 1.9; }
.bottom-nav a .pill {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 26px; border-radius: var(--radius-pill);
  transition: background .15s ease;
}
.bottom-nav a.active { color: var(--brand-dark); }
.bottom-nav a.active .pill { background: var(--brand-soft); }
.bottom-nav .nav-badge {
  position: absolute; margin-left: 22px; margin-top: -18px;
  background: var(--danger); color: #fff; font-size: .6rem; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: 8px; display: flex;
  align-items: center; justify-content: center; padding: 0 4px;
}

/* ---------------- Toast ---------------- */
#toast-host {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 16px);
  z-index: 100000; display: flex; flex-direction: column; gap: 8px;
  width: calc(100% - 32px); max-width: 420px; pointer-events: none;
}
.toast {
  background: #24150F; color: #fff; padding: 12px 15px; border-radius: var(--radius-sm);
  font-size: .87rem; box-shadow: var(--shadow-lg); animation: toastIn .2s ease;
  pointer-events: auto;
}
.toast.ok { background: #8A3B1C; }
.toast.err { background: #8F1D17; }
.toast.warn { background: #7A5E00; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }

/* ---------------- Modal ---------------- */
.modal-back {
  position: fixed; inset: 0; background: rgba(28,15,9,.55); z-index: 90000;
  display: none; align-items: flex-end; justify-content: center;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.modal-back.open { display: flex; }
.modal {
  background: var(--surface); width: 100%; max-width: 520px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 18px var(--pad) calc(18px + env(safe-area-inset-bottom, 0px));
  max-height: 88vh; overflow-y: auto; animation: modalUp .22s ease;
}
@keyframes modalUp { from { transform: translateY(24px); opacity: .6; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.modal-head h3 { margin: 0; }
.modal-close {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); cursor: pointer; font-size: 1.05rem; line-height: 1; color: var(--muted);
}

/* ---------------- Onglets ---------------- */
.tabs {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 3px;
  scrollbar-width: none; margin-bottom: 14px;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button, .tabs a {
  flex: 0 0 auto; padding: 8px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer;
  text-decoration: none; transition: transform .12s ease;
}
.tabs button:active, .tabs a:active { transform: scale(.97); }
.tabs button.active, .tabs a.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------------- Espace / sidebar ----------------
   .space-layout      : barre latérale À GAUCHE (espace membre, admin)
   .space-layout.side-last : barre latérale À DROITE (fiche bien, fiche pro) */
.space-layout { display: grid; gap: 14px; grid-template-columns: 1fr; }
.space-layout > * { min-width: 0; }
.space-side {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow-sm);
}
.space-side h4 { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 12px 4px 6px; }
.space-side h4:first-child { margin-top: 0; }
.space-side a {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px;
  border-radius: var(--radius-sm); color: var(--ink-2); font-size: .87rem; font-weight: 500;
}
.space-side a svg { width: 17px; height: 17px; color: var(--muted); flex: 0 0 auto; }
.space-side a:hover { background: var(--brand-tint); text-decoration: none; }
.space-side a.active { background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; }
.space-side a.active svg { color: var(--brand); }

.role-switch { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 3px; margin-bottom: 14px; scrollbar-width: none; }
.role-switch::-webkit-scrollbar { display: none; }
.role-switch button {
  flex: 0 0 auto; padding: 8px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--surface); font: inherit;
  font-size: .82rem; font-weight: 600; color: var(--ink-2); cursor: pointer;
}
.role-switch button.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------------- Dossier de candidature ---------------- */
.dossier-head { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.dossier-pieces { display: flex; flex-direction: column; gap: 10px; }
.piece-row {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 12px; background: var(--surface);
}
.piece-row.ok { border-color: #F3DACA; background: var(--brand-tint); }
.piece-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.piece-head b { font-size: .88rem; }
.piece-row .piece-form { display: grid; gap: 7px; margin-top: 8px; }
.piece-row input[type=file] {
  width: 100%; padding: 8px 10px; border: 1px dashed var(--line);
  border-radius: var(--radius-sm); font-size: .8rem; background: var(--surface);
}
.piece-row input[type=text] { font-size: .85rem; padding: 8px 11px; }
.piece-alert { color: var(--danger); }
.dossier-detail { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--surface); }
.dossier-detail summary {
  cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--brand-dark);
  display: flex; align-items: center; gap: 7px; list-style: none;
}
.dossier-detail summary::-webkit-details-marker { display: none; }
.dossier-detail summary svg { width: 15px; height: 15px; }

/* ---------------- Divers ---------------- */
.progress { height: 8px; border-radius: var(--radius-pill); background: #F1E9E1; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--brand); border-radius: inherit; }

.alert { border-radius: var(--radius-sm); padding: 11px 13px; font-size: .85rem; margin-bottom: 12px; border: 1px solid transparent; }
.alert.info { background: var(--brand-tint); border-color: #F3DACA; color: var(--brand-dark); }
.alert.warn { background: var(--warn-soft); border-color: #F0E0AE; color: var(--warn); }
.alert.err { background: var(--danger-soft); border-color: #F3CFCC; color: var(--danger); }
.alert.ok { background: var(--ok-soft); border-color: #F3DACA; color: var(--ok); }

.empty {
  text-align: center; padding: 30px 16px; color: var(--muted);
  border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface);
}
.empty svg { width: 40px; height: 40px; color: var(--muted-2); margin-bottom: 8px; }
.empty p { margin: 0 0 12px; font-size: .9rem; }

.gallery { margin-top: 4px; }
.gallery-hero a { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #F1E9E1; }
.gallery-hero img { width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform .3s ease; }
.gallery-hero a:hover img { transform: scale(1.02); }
.gallery-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.gallery-strip a { flex: 1 1 150px; min-width: 0; display: block; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); background: #F1E9E1; }
.gallery-strip img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }

.map-box {
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  background: linear-gradient(135deg, #F8EFE7, #F0E1D5); height: 210px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; color: var(--brand-dark); text-align: center; padding: 16px;
}
.map-box svg { width: 34px; height: 34px; }

.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 14px; height: 14px; }
.stars .on { fill: var(--accent); stroke: var(--accent); }
.stars .off { fill: none; stroke: var(--muted-2); }

.avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  background: var(--brand-soft); color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .9rem;
}

/* ---------------- Logo (identité visuelle) ---------------- */
.footer-logo { width: 240px; max-width: 100%; height: auto; margin-bottom: 12px; }
.auth-logo { display: block; width: 300px; max-width: 78%; height: auto; margin: 22px auto 6px; }
.auth-logo + .auth-baseline { text-align: center; color: var(--muted); font-size: .82rem; margin: 0 0 6px; }

/* ---------------- Footer ---------------- */
.site-footer {
  margin-top: 34px; background: #2E1D16; color: rgba(255,255,255,.78);
  padding: 30px 0 24px; font-size: .86rem;
}
.site-footer h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 10px; }
.site-footer a { color: rgba(255,255,255,.78); display: block; padding: 4px 0; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
.footer-bottom {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14);
  font-size: .78rem; color: rgba(255,255,255,.6); display: flex; flex-wrap: wrap; gap: 8px 18px;
  justify-content: space-between;
}

/* ---------------- Hero secondaire ---------------- */
.page-head {
  background: linear-gradient(150deg, #B4532A, #7C3517);
  color: #fff; padding: 26px 0 24px;
}
.page-head h1 { color: #fff; font-size: 1.6rem; margin-bottom: 4px; }
.page-head p { color: rgba(255,255,255,.82); margin: 0; font-size: .9rem; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; font-size: .76rem; color: rgba(255,255,255,.7); margin-bottom: 10px; }
.breadcrumb a { color: rgba(255,255,255,.85); }

/* ---------------- Install app ---------------- */
.install-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  background: var(--brand-tint); border: 1px solid #F3DACA;
  border-radius: var(--radius); padding: 12px 14px; margin: 14px 0;
}
.install-bar .txt { flex: 1 1 200px; font-size: .85rem; color: var(--brand-dark); }
.logos { display: flex; gap: 8px; align-items: center; }
.logos svg { width: 22px; height: 22px; }
.logos .apple { fill: #24150F; }
.logos .android { fill: #3DDC84; }

/* ---------------- Suivi de chantier ---------------- */
.chantier-head { background: linear-gradient(150deg, #B4532A, #7C3517); color: #fff; border: none; }
.chantier-head h2 { color: #fff; }
.chantier-head .muted, .chantier-head .tiny { color: rgba(255,255,255,.75); }
.chantier-head .progress { background: rgba(255,255,255,.22); }
.chantier-head .progress i { background: #fff; }
.chantier-head-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; justify-content: space-between; }
.chantier-kpis { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: 14px; }
.chantier-kpis .stat { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.2); }
.chantier-kpis .stat .k { color: rgba(255,255,255,.75); }
.chantier-kpis .stat .v { color: #fff; }

.timeline { display: flex; flex-direction: column; gap: 12px; position: relative; }
.tl-item { display: flex; gap: 11px; align-items: flex-start; }
.tl-dot {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: #F2ECE5; color: var(--muted);
}
.tl-dot svg { width: 15px; height: 15px; }
.tl-item.ok .tl-dot { background: var(--ok-soft); color: var(--ok); }
.tl-item.blue .tl-dot { background: #E8F0F7; color: var(--blue); }
.tl-item.danger .tl-dot { background: var(--danger-soft); color: var(--danger); }
.tl-body { flex: 1; min-width: 0; }
.tl-head { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; justify-content: space-between; margin-bottom: 3px; }
.tl-head b { font-size: .9rem; }

.jour-bloc { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 12px; margin-bottom: 10px; background: var(--surface); }
.jour-head { display: flex; flex-wrap: wrap; gap: 7px; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.jour-entry { border-top: 1px solid var(--line); padding-top: 9px; margin-top: 9px; }
.jour-entry:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.resume-list { margin: 0; padding-left: 18px; }
.resume-list li { font-size: .82rem; color: var(--ink-2); margin-bottom: 4px; }

.photo-jour { margin-bottom: 14px; }
.photo-grid { display: grid; gap: 9px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.photo-item { margin: 0; }
.photo-item img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
}
.photo-item figcaption { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 5px; }

.live-frame {
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  background: #1F1511; aspect-ratio: 16/9; margin-bottom: 10px;
}
.live-frame iframe, .live-frame video { width: 100%; height: 100%; border: 0; display: block; }
.live-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.live-programme {
  background: var(--brand-tint); border: 1px solid #F3DACA; border-radius: var(--radius-sm);
  padding: 11px 13px;
}
.live-programme p { display: flex; align-items: flex-start; gap: 6px; }
.live-programme svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 3px; color: var(--brand); }

.share-line { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.share-line input { flex: 1 1 190px; min-width: 0; font-size: .82rem; }

/* ---------------- Paiement des services ---------------- */
.pay-choice { display: grid; gap: 10px; margin-top: 12px; }
.pay-option {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 14px; font: inherit; color: var(--ink); cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.pay-option:hover { border-color: var(--brand); background: var(--brand-tint); }
.pay-option:active { transform: scale(.99); }
.pay-option.active { border-color: var(--brand); background: var(--brand-tint); box-shadow: 0 0 0 3px rgba(180,83,42,.12); }
.pay-option .pay-ico {
  width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
  background: var(--brand-soft); color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center;
}
.pay-option .grow { flex: 1; min-width: 0; display: block; }
.pay-option b { display: block; font-size: .93rem; }
.pay-option i { display: block; font-style: normal; font-size: .8rem; color: var(--muted); margin-top: 2px; }
.pay-option > svg { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; }

.mm-numero {
  margin-top: 12px; border-radius: var(--radius-sm); padding: 15px 16px;
  background: linear-gradient(150deg, #B4532A, #7C3517); color: #fff;
  display: flex; flex-direction: column; gap: 3px;
}
.mm-numero b { font-size: 1.45rem; letter-spacing: .01em; }

@media (min-width: 768px) {
  .chantier-kpis { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .photo-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 767px) {
  h1 { font-size: 1.6rem; }
  /* Sur téléphone, la photo d'ouverture garde toute sa présence sans
     écraser le texte : le voile est renforcé sous le bloc de texte. */
  .hero { min-height: 66vh; }
  .hero-bg img { animation: none; transform: none; }
  .hero-bg::after {
    background:
      linear-gradient(180deg, rgba(28,15,8,.46) 0%, rgba(28,15,8,.42) 34%, rgba(28,15,8,.76) 100%);
  }
  .hero h1 { font-size: 1.72rem; }
  .hero p.lead { font-size: .94rem; }
  .hero-inner { padding: 36px 0 32px; }
  .grid-2 { grid-template-columns: 1fr; }
  /* Sur téléphone, le sous-titre du logo est masqué : il allongeait le bloc
     du logo et coupait les boutons de droite. */
  .brand-text i { display: none; }
  .brand-text b { font-size: .87rem; }
  .stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .photo-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (min-width: 768px) {
  body { font-size: 15.5px; padding-bottom: 0; }
  body.has-bottomnav { padding-bottom: 40px; }
  .bottom-nav { display: none; }
  .top-links { display: flex; }
  .hamburger { display: none; }
  .mobile-menu { display: none !important; }
  .search-grid { grid-template-columns: 1.5fr 1fr 1fr auto; align-items: end; }
  .grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .grid.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .stats { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .form-grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .hero h1 { font-size: 2.5rem; }
  .page-head { padding: 34px 0 30px; }
  .page-head h1 { font-size: 2rem; }
  .space-layout { grid-template-columns: 250px minmax(0,1fr); align-items: start; }
  .space-layout.side-last { grid-template-columns: minmax(0,1fr) 330px; }
  .space-side { position: sticky; top: 76px; }
  .gallery-hero img { aspect-ratio: 16/9; }
  h1 { font-size: 2.1rem; }
}

@media (min-width: 1100px) {
  .grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .grid.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* ---------------- Appel à l'action encadré (acheter / louer) ---------------- */
.cta-encadre {
  border: 1px solid var(--brand);
  border-left: 4px solid var(--brand);
  background: linear-gradient(180deg, #FFFFFF 0%, #FEF8F4 100%);
}
.cta-encadre h3 { color: var(--brand-dark); }
.cta-encadre .alert.info { margin: 8px 0 12px; }
.bien-cta {
  margin-top: 8px; font-size: .78rem; padding: 7px 11px;
  background: var(--brand-soft); color: var(--brand-dark);
  border: 1px solid #F3DACA; font-weight: 600;
}
.bien-cta:hover { background: var(--brand); color: #fff; }

/* ---------------- Colocation et co-achat ---------------- */
.placement-info {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  background: var(--brand-tint); border: 1px solid #F3DACA; border-radius: var(--radius-sm);
  padding: 8px 11px; font-size: .82rem; color: var(--brand-dark); margin-top: 10px;
}
.placement-info b { font-weight: 700; }
.placement-grid { display: grid; gap: 10px; grid-template-columns: 1fr; margin-top: 12px; }
.placement-grid .stat { padding: 11px 12px; }
.placement-grid .stat .v { font-size: 1.05rem; }
.placement-parts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.placement-parts .part {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 52px; padding: 7px 9px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface);
  font-size: .7rem; color: var(--muted); text-align: center;
}
.placement-parts .part b { font-size: .86rem; color: var(--ink); }
.placement-parts .part.pris { background: var(--brand-soft); border-color: #F3DACA; }
.placement-parts .part.libre { border-style: dashed; }
.placement-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.placement-note { font-size: .8rem; color: var(--muted); }

/* ---------------- Choix d'acquisition (vente entière / par parts) ---------------- */
.achat-choix { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.achat-opt {
  display: flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 8px 11px;
  font-size: .82rem; color: var(--ink-2);
}
.achat-opt svg { width: 14px; height: 14px; color: var(--brand); flex: 0 0 auto; }

/* ---------------- Performance énergétique ---------------- */
.dpe-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; padding: 2px 8px; border-radius: 6px;
  background: var(--brand); color: #fff; font-weight: 800; font-size: .8rem;
}

/* ---------------- Recherches immobilières ---------------- */
.recherche-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; box-shadow: var(--shadow-sm);
}
.recherche-card h3 { margin-bottom: 4px; font-size: 1rem; }
.recherche-budget { font-weight: 800; color: var(--brand-dark); font-size: 1.02rem; }
.recherche-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ---------------- Séjours, expériences et opportunités ---------------- */
.galerie img { display: block; }
.galerie-mini { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.galerie-mini img { border: 1px solid var(--line); }
.list-plain { margin: 0; padding-left: 18px; }
.list-plain li { color: var(--ink-2); margin-bottom: 3px; }
.accent-text { color: #8A6A00; font-weight: 700; }

/* ---------------- Paiement de la prime d'assurance ---------------- */
.pay-choices { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 12px; }
.pay-card {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px; background: var(--surface);
}
.pay-card h4 { display: flex; align-items: center; gap: 7px; font-size: .95rem; margin-bottom: 8px; }
.pay-card h4 svg { width: 18px; height: 18px; color: var(--brand); }
.pay-form { display: grid; gap: 9px; margin-top: 10px; }

/* ---------------- États des lieux et actes ---------------- */
.edl-piece-row {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 12px; background: var(--surface);
}
.edl-piece-row .etat-badge { font-weight: 700; }

@media (min-width: 768px) {
  .placement-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .pay-choices { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .achat-choix { flex-direction: row; flex-wrap: wrap; }
  .achat-opt { flex: 1 1 200px; }
  .galerie-mini { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* ============================================================
   Parcours de réservation : fiche séjour / expérience
   puis paiement. Le contenu principal reste large, le bloc de
   réservation se pose à côté sur ordinateur et dessous sur téléphone.
   ============================================================ */

/* Fiche : contenu principal à gauche, encart de réservation à droite.
   (Ne pas utiliser .space-layout seul : sa barre latérale est à gauche.) */
.fiche-layout { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; }
.fiche-layout > * { min-width: 0; }

/* Fil d'étapes : on voit tout de suite où l'on en est. */
.etapes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.etape {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--radius-pill); padding: 5px 11px;
  font-size: .74rem; font-weight: 600; color: var(--muted); min-width: 0;
}
.etape i {
  font-style: normal; width: 17px; height: 17px; border-radius: 50%;
  background: #F2ECE5; color: var(--muted); font-size: .66rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.etape.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }
.etape.on i { background: var(--brand); color: #fff; }

/* Encart de réservation collant sur ordinateur. */
.fiche-resa { position: static; }
.prix-recap { display: flex; flex-direction: column; gap: 7px; margin: 10px 0 4px; }
.prix-ligne {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: .85rem; color: var(--ink-2); padding-bottom: 7px; border-bottom: 1px dashed var(--line);
}
.prix-ligne:last-child { border-bottom: none; padding-bottom: 0; }
.prix-ligne b { font-weight: 800; color: var(--brand-dark); white-space: nowrap; }
.prix-ligne span { color: var(--muted); font-size: .78rem; }

/* Récapitulatif de paiement. */
.recap { display: flex; flex-direction: column; gap: 0; }
.recap-ligne {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .86rem;
}
.recap-ligne:last-child { border-bottom: none; }
.recap-ligne .k { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.recap-ligne .v { text-align: right; font-weight: 600; color: var(--ink); word-break: break-word; }
.recap-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding: 13px 14px; border-radius: var(--radius-sm);
  background: linear-gradient(150deg, #B4532A, #7C3517); color: #fff;
}
.recap-total .k { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.8); }
.recap-total .v { font-size: 1.32rem; font-weight: 800; white-space: nowrap; }

/* En-tête d'une fiche : titre + lieu + prix mis en avant. */
.fiche-titre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fiche-lieu { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: .86rem; }
.fiche-lieu svg { width: 15px; height: 15px; }

/* Bandeau de filtres (listes séjours / expériences). */
.filtres-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.filtres-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filtres-resume {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  font-size: .82rem; color: var(--muted); margin-top: 10px;
}
.filtres-resume b { color: var(--ink); }

@media (min-width: 768px) {
  .fiche-layout { grid-template-columns: minmax(0,1fr) 344px; gap: 20px; }
  .fiche-resa { position: sticky; top: 76px; }
  .stats.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stats.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .filtres-chips { margin-bottom: 14px; }
}

@media print {
  .bottom-nav, .app-header, .site-footer, .no-print { display: none !important; }
}

/* ---- Prestations d'événement : menus traiteur et gâteaux ---- */
.presta-bloc { border-top: 1px dashed var(--line); padding-top: 12px; margin-top: 12px; }
.presta-bloc:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.presta-titre {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; color: var(--brand-dark); margin: 0 0 10px;
}
.presta-item {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 12px; margin-bottom: 10px; background: #fff;
}
.presta-item.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-tint); }
.presta-head { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin: 0; }
.presta-head input[type="checkbox"] { margin-top: 3px; flex: none; width: 18px; height: 18px; }
.presta-nom { display: block; font-weight: 700; font-size: .9rem; color: var(--ink); }
.presta-pro { display: block; font-size: .74rem; color: var(--muted); margin-top: 2px; }
.presta-prix { text-align: right; font-weight: 800; color: var(--brand-dark); font-size: .88rem; white-space: nowrap; }
.presta-unite { display: block; font-size: .68rem; font-weight: 500; color: var(--muted); margin-top: 2px; }
.presta-options, .presta-qte { margin-top: 10px; }
.presta-options select, .presta-qte input {
  width: 100%; font-size: 16px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 9px; background: #fff;
}
.presta-options label, .presta-qte label { display: block; margin-bottom: 4px; }
.presta-detail { margin-top: 10px; }
.presta-detail summary {
  cursor: pointer; font-size: .78rem; font-weight: 600;
  color: var(--brand-dark); padding: 6px 0;
}
.presta-detail .list-plain { margin: 2px 0 6px; padding-left: 16px; }
.presta-detail .list-plain li { margin-bottom: 2px; }

@media (max-width: 767px) {
  .presta-head { flex-wrap: wrap; }
  .presta-prix { text-align: left; }
}

/* ---- Visites : tarifs, visites groupées, feuille de route ---- */
.notice {
  display: flex; align-items: flex-start; gap: 8px;
  border-radius: var(--radius-sm); padding: 11px 13px;
  font-size: .85rem; margin-bottom: 12px; border: 1px solid transparent;
}
.notice svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; }
.notice.info { background: var(--brand-tint); border-color: #F3DACA; color: var(--brand-dark); }
.notice.warn { background: var(--warn-soft); border-color: #F0E0AE; color: var(--warn); }
.notice.err  { background: var(--danger-soft); border-color: #F3CFCC; color: var(--danger); }

/* Tarif d'une visite, annoncé avant toute demande. */
.tarif-visite {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  background: var(--brand-tint); border: 1px solid #F3DACA; border-radius: var(--radius-sm);
  padding: 10px 12px; margin-top: 10px;
}
.tarif-visite .montant { font-weight: 800; font-size: 1.1rem; color: var(--brand-dark); }
.tarif-visite .libelle { font-size: .8rem; color: var(--muted); }
.tarif-visite .gratuit { font-weight: 700; color: var(--ok); }

/* Choix « visite individuelle » ou « visite groupée (gratuite) ». */
.mode-visite { display: grid; gap: 8px; grid-template-columns: 1fr; margin-top: 10px; }
.mode-opt {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 12px; background: var(--surface); min-width: 0;
}
.mode-opt.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-tint); }
.mode-opt input { width: auto; margin-top: 3px; flex: 0 0 auto; }
.mode-opt b { display: block; font-size: .88rem; }
.mode-opt span { display: block; font-size: .76rem; color: var(--muted); margin-top: 2px; }

/* Quorum d'une visite groupée. */
.quorum { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.quorum .jauges { display: flex; gap: 5px; }
.quorum .jauge {
  width: 26px; height: 26px; border-radius: 50%; border: 1px dashed var(--muted-2);
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 700; color: var(--muted);
}
.quorum .jauge.prise { background: var(--brand); border-style: solid; border-color: var(--brand); color: #fff; }

/* Feuille de route : suivi du trajet en direct. */
.nav-live {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px 14px; background: linear-gradient(180deg, #FFFFFF 0%, #FDF7F3 100%);
}
.nav-grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
.nav-cell {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 12px; text-align: center;
}
.nav-cell .tiny { display: block; }
.nav-cell strong { display: block; font-size: 1.12rem; font-weight: 800; color: var(--brand-dark); margin-top: 2px; }

.nav-flux {
  display: flex; align-items: center; gap: 12px;
  background: var(--brand-tint); border: 1px solid #F3DACA; border-radius: var(--radius-sm);
  padding: 11px 13px; margin-top: 12px;
}
.nav-arrow {
  width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
  background: var(--surface); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s ease;
}
.nav-needle {
  width: 0; height: 0; display: block;
  border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-bottom: 20px solid var(--brand);
  margin-top: -3px;
}
.nav-bar { height: 8px; border-radius: var(--radius-pill); background: #F1E5DB; overflow: hidden; margin-top: 12px; }
.nav-bar-fill { display: block; height: 100%; width: 0%; background: var(--brand); border-radius: inherit; transition: width .4s ease; }

/* Compte à rebours du rendez-vous. */
.display-time { font-size: 1.5rem; font-weight: 800; color: var(--brand-dark); margin: 4px 0 2px; letter-spacing: -.02em; }

/* Coordonnées de l'accompagnateur : non copiables, non exportables. */
#acc-tel {
  font-weight: 700; color: var(--ink); letter-spacing: .06em;
  -webkit-user-select: none; user-select: none;
}

/* Jeton de suivi : ni copiable ni sélectionnable depuis la page. */
.jeton-suivi {
  -webkit-user-select: none; user-select: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem;
  background: var(--brand-tint); border: 1px dashed #F3DACA; border-radius: var(--radius-sm);
  padding: 7px 10px; word-break: break-all; color: var(--brand-dark);
}

@media (min-width: 768px) {
  .nav-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .mode-visite { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ============================================================
   Illustrations des rubriques
   Une image en tête de chaque rubrique : on comprend le sujet
   d'un seul regard, sans lire. Sur téléphone elle occupe toute
   la largeur et reste courte pour ne pas repousser le texte.
   ============================================================ */
.rub-img {
  margin: -16px -16px 14px;
  border-radius: 17px 17px 0 0;
  overflow: hidden;
  background: #F1E9E1;
}
.rub-img img {
  width: 100%; height: 152px; object-fit: cover; display: block;
}
@media (min-width: 768px) {
  .rub-img img { height: 178px; }
}

/* ============================================================
   Opportunités d'investissement : niveaux et compte à rebours
   Le niveau (Standard, Premium, Exceptionnel) se voit d'un coup
   d'œil sur la photo ; le compte à rebours rappelle qu'un prix
   intéressant est limité dans le temps.
   ============================================================ */
.bien-media .tag.niveau-standard {
  background: rgba(40,22,14,.82); color: #fff;
}
.bien-media .tag.niveau-premium {
  background: rgba(201,162,39,.94); color: #35280A;
}
.bien-media .tag.niveau-exceptionnel {
  background: rgba(138,59,28,.95); color: #fff;
}
.bien-media .tag.niveau-premium,
.bien-media .tag.niveau-exceptionnel {
  top: auto; bottom: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 4px;
  text-transform: none; letter-spacing: 0; font-size: .7rem;
}
.bien-media .tag.niveau-premium svg,
.bien-media .tag.niveau-exceptionnel svg { width: 13px; height: 13px; }

.opp-countdown {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  background: var(--warn-soft); border: 1px solid #F0E0AE;
  border-radius: var(--radius-sm); padding: 8px 11px; margin-top: 8px;
}
.opp-countdown-lbl {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; color: var(--warn);
}
.opp-countdown-lbl svg { width: 14px; height: 14px; }
.opp-countdown-val { font-weight: 800; font-size: 1rem; color: #7A5200; white-space: nowrap; }
.opp-countdown.expire { background: var(--danger-soft); border-color: #F3CFCC; }
.opp-countdown.expire .opp-countdown-lbl,
.opp-countdown.expire .opp-countdown-val { color: var(--danger); }

/* ============================================================
   Tableau de bord de l'espace
   Les chiffres clés passent avant tout : cartes larges avec un
   filet de couleur et une icône, libellé court, valeur en gros.
   Les blocs à deux colonnes se partagent toute la largeur : plus
   de colonne écrasée ni de vide à droite.
   ============================================================ */
@keyframes dashIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.kpi-row { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.kpi {
  position: relative; display: block; overflow: hidden; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 15px 15px; box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
  animation: dashIn .34s ease both;
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none; }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--brand); }
.kpi.ok::before { background: var(--ok); }
.kpi.danger::before { background: var(--danger); }
.kpi.accent::before { background: var(--accent); }
.kpi.blue::before { background: var(--blue); }
.kpi:nth-child(2) { animation-delay: .04s; }
.kpi:nth-child(3) { animation-delay: .08s; }
.kpi:nth-child(4) { animation-delay: .12s; }
.kpi-ico {
  width: 36px; height: 36px; border-radius: 11px; margin-bottom: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand-dark);
}
.kpi-ico svg { width: 18px; height: 18px; }
.kpi.ok .kpi-ico { background: var(--ok-soft); color: var(--ok); }
.kpi.danger .kpi-ico { background: var(--danger-soft); color: var(--danger); }
.kpi.accent .kpi-ico { background: var(--accent-soft); color: #8A6A00; }
.kpi.blue .kpi-ico { background: #E8F0F7; color: var(--blue); }
.kpi .k { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.kpi .v { font-size: 1.42rem; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; line-height: 1.15; }
.kpi.ok .v { color: var(--brand-dark); }
.kpi.danger .v { color: var(--danger); }
.kpi.accent .v { color: #8A6A00; }
.kpi .d { font-size: .77rem; color: var(--muted); margin-top: 3px; }

.quick-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-top: 14px; scrollbar-width: none; }
.quick-row::-webkit-scrollbar { display: none; }
.quick-row .chip { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; flex: 0 0 auto; }
.quick-row .chip svg { width: 15px; height: 15px; }

.dash-2 { display: grid; gap: 14px; grid-template-columns: 1fr; }
.dash-2 > .card { margin: 0; }

.mini-stats { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.mini {
  display: block; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 13px; text-decoration: none; color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.mini:hover { border-color: var(--brand); transform: translateY(-1px); text-decoration: none; }
.mini .k { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.mini .v { font-size: 1.26rem; font-weight: 800; margin-top: 2px; letter-spacing: -.02em; }
.mini .d { font-size: .74rem; color: var(--muted); }
.mini.alert .v { color: var(--danger); }
.mini.info .v { color: var(--blue); }

.tresor { display: grid; gap: 11px; grid-template-columns: 1fr; }
.tresor-item { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 12px; }
.tresor-item .k { font-size: .71rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.tresor-item .v { font-size: 1.14rem; font-weight: 800; margin-top: 2px; }
.tresor-item.ok .v { color: var(--brand-dark); }
.tresor-item.danger .v { color: var(--danger); }
.bar { height: 8px; border-radius: var(--radius-pill); background: #F1E9E1; overflow: hidden; margin-top: 10px; }
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.bar.danger i { background: var(--danger); }

@media (min-width: 560px) {
  .tresor { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 768px) {
  .kpi-row { grid-template-columns: repeat(4, minmax(0,1fr)); }
  /* Sur ordinateur, les quatre compteurs tiennent sur une seule ligne :
     plus de carte à moitié vide avec un grand blanc à droite. */
  .mini-stats { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .dash-2 { grid-template-columns: minmax(0,1.45fr) minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .kpi { animation: none; }
}

/* ---------------- Menu de l'espace ----------------
   Sur ordinateur la barre latérale reste visible et défile seule
   (le menu est long) ; sur téléphone elle se replie derrière un
   bouton pour ne plus repousser le contenu. */
.side-wrap { border: 0; margin: 0; }
.side-wrap > summary { list-style: none; display: none; cursor: pointer; }
.side-wrap > summary::-webkit-details-marker { display: none; }
.side-toggle {
  align-items: center; gap: 9px; width: 100%; box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; font: inherit; font-weight: 700; font-size: .9rem; color: var(--ink-2);
}
.side-toggle svg { width: 18px; height: 18px; color: var(--brand); flex: 0 0 auto; }
.side-toggle .side-toggle-lbl { flex: 1; text-align: left; }
.side-toggle .side-chev { transition: transform .2s ease; }
.side-wrap[open] .side-chev { transform: rotate(180deg); }

@media (max-width: 767px) {
  .side-wrap > summary { display: flex; }
  .side-wrap[open] > summary { margin-bottom: 12px; }
  .side-wrap:not([open]) .space-side { display: none; }
  .dash-2 { grid-template-columns: 1fr; }
}
@media (min-width: 768px) {
  /* Sur ordinateur, le menu est toujours visible : le repli ne sert
     qu'au téléphone, où il libère toute la largeur pour le contenu. */
  .side-wrap > .space-side { display: block !important; }
  .side-wrap > .side-toggle { display: none; }
  .space-side { max-height: calc(100vh - 96px); overflow-y: auto; }
}

/* ============================================================
   Négociation du montant (location ou achat)
   Le fil des offres se lit du haut vers le bas : qui a proposé,
   quand, combien, et l'écart au prix affiché. Le tour de réponse
   est mis en avant pour que le deal avance sans traîner.
   ============================================================ */
.nego-card { border: 1px solid var(--brand); border-left: 4px solid var(--brand); }
.nego-card h3 { display: flex; align-items: center; gap: 7px; color: var(--brand-dark); }
.nego-card h3 svg { width: 17px; height: 17px; }

.nego-head {
  display: flex; flex-wrap: wrap; gap: 7px 12px; align-items: center;
  justify-content: space-between; margin-bottom: 10px;
}

.nego-fil { display: flex; flex-direction: column; gap: 9px; margin: 10px 0; }
.nego-ligne {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 12px; background: var(--surface);
}
.nego-ligne-tete { display: flex; flex-wrap: wrap; gap: 7px 10px; align-items: center; margin-bottom: 3px; }
.nego-ligne-tete b { font-size: .88rem; }
.nego-montant { font-weight: 800; color: var(--brand-dark); font-size: 1rem; margin: 2px 0; }
.nego-montant .tiny { font-weight: 600; }

.nego-actions {
  border-top: 1px dashed var(--line); margin-top: 10px; padding-top: 11px;
}
.nego-actions form { display: grid; gap: 9px; margin-top: 8px; }
.nego-actions textarea { min-height: 74px; }

/* Suivi de la négociation dans l'espace membre. */
.nego-statut { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.nego-tour {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--warn-soft); border: 1px solid #F0E0AE; color: var(--warn);
  border-radius: var(--radius-pill); padding: 3px 10px;
  font-size: .72rem; font-weight: 700;
}
.nego-tour svg { width: 13px; height: 13px; }

/* ============================================================
   Avis, favoris et disponibilité
   ============================================================ */

/* Un favori dont l'élément n'est plus disponible reste visible, mais il est
   marqué : le membre le comprend tout de suite au lieu de relancer une
   demande pour rien. */
.fav-indispo { opacity: .78; border-style: dashed; }
.fav-indispo h3 { color: var(--muted); }

/* Le formulaire d'avis suit les mêmes règles que les autres formulaires du
   site : lisible sur téléphone, sans débordement. */
[data-avis-bloc] form [type="submit"] { margin-top: 4px; }
[data-avis-reponse] input { max-width: 520px; }

/* ------------------------------------------------------------
   Note affichée sur une annonce ou une offre.
   Elle est visible par TOUT LE MONDE, membre comme visiteur :
   c'est l'évaluation publiée d'un bien, d'un séjour, d'une
   expérience, d'une salle, d'un professionnel ou d'un secours.
   Sans avis publié, on le dit clairement au lieu de laisser un
   vide que personne ne comprendrait.
   ------------------------------------------------------------ */
.bien-note {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: .8rem; color: var(--muted); line-height: 1.35;
}
.bien-note .stars { flex: 0 0 auto; }
.bien-note b { color: var(--brand-dark); font-size: .85rem; }
.bien-note.none { font-size: .76rem; }
.bien-note.none svg { width: 13px; height: 13px; stroke: var(--muted-2); fill: none; flex: 0 0 auto; }

/* ------------------------------------------------------------
   Le cœur d'une carte de professionnel.
   La carte entière est un lien : le bouton doit rester au-dessus
   pour être cliquable sans ouvrir la fiche par erreur.
   ------------------------------------------------------------ */
.pro-carte { position: relative; }
.pro-carte .fav {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 1px solid var(--line); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
}
.pro-carte .fav svg { width: 17px; height: 17px; stroke: var(--muted); fill: none; }
.pro-carte .fav.on svg { stroke: var(--danger); fill: var(--danger); }
.pro-carte > .card { padding-right: 46px; }

/* Les blocs d'avis gardent une grille d'une seule colonne sur téléphone :
   chaque avis est lisible sans écrasement. */
@media (max-width: 767px) {
  .fav-indispo { opacity: 1; }
  .bien-note { font-size: .78rem; }
  .pro-carte > .card { padding-right: 44px; }
}

/* ------------------------------------------------------------ */
/* Le vrai coût par mois : loyer + charges + eau + électricité   */
/* ------------------------------------------------------------ */
.cr-bloc h2 { margin-bottom: 2px; }
.cr-tete { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 14px; }
.cr-tete svg { flex: 0 0 auto; color: var(--brand); margin-top: 2px; }
.cr-lignes { display: grid; gap: 8px; }
.cr-ligne {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface);
}
.cr-lib { font-size: .9rem; color: var(--text); display: flex; flex-direction: column; }
.cr-det { font-size: .75rem; color: var(--muted); }
.cr-ligne b { font-size: .95rem; white-space: nowrap; }
.cr-est { color: var(--muted); font-weight: 500; font-size: .82rem; }
.cr-total {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding: 14px 16px; border-radius: 12px;
  background: linear-gradient(150deg,#2E1D16,#42281E); color: #fff;
}
.cr-total span { font-size: .85rem; color: rgba(255,255,255,.82); }
.cr-total b { font-size: 1.35rem; color: #fff; white-space: nowrap; }
.cr-jauge { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: 14px; }
.cr-jauge i { display: block; height: 100%; background: var(--brand); border-radius: 99px; }
.cr-note { font-size: .82rem; line-height: 1.5; margin: 10px 0 0; }
.cr-note.muted { color: var(--muted); }

@media (max-width: 767px) {
  .cr-ligne { flex-wrap: wrap; }
  .cr-total { flex-direction: column; align-items: flex-start; gap: 4px; }
  .cr-total b { font-size: 1.2rem; }
}

/* ---- NOTAIRE 360° : QR de vérification documentaire ---- */
.n360-qr { display: inline-block; background: #fff; padding: 4px; border-radius: 8px; border: 1px solid #E8DED3; }
.n360-qr svg { display: block; width: 88px; height: 88px; }
@media (max-width: 768px) {
  .n360-qr svg { width: 76px; height: 76px; }
}

/* --- Encart du ticket de réservation (après paiement) --- */
.rc-ticket { display:flex; align-items:center; gap:12px; background:#F7F3EC; border:1px solid #E8DED3;
  border-radius:12px; padding:12px 14px; margin:0 0 12px; }
.rc-ticket-ico { width:38px; height:38px; border-radius:50%; background:#1F8A53; color:#fff;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.rc-ticket-txt { display:flex; flex-direction:column; gap:2px; min-width:0; }
.rc-ticket-txt b { font-size:.95rem; color:#1A1A2E; }
.rc-ticket-txt span { font-size:.8rem; color:#6B7280; line-height:1.4; }
@media (max-width:520px) { .rc-ticket { align-items:flex-start; } }

/* ------------------------------------------------------------------
   Pictogrammes de titre : chaque titre de rubrique porte son propre
   logo, pour que la rubrique se comprenne avant même de lire le mot.
   L'image est alignée sur la ligne de base du titre et ne dépasse
   jamais la hauteur du texte.
   ------------------------------------------------------------------ */
.picto-titre {
  display: inline-block;
  vertical-align: -.18em;
  margin-right: .4rem;
  flex: 0 0 auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
h1 > .picto-titre, h2 > .picto-titre, h3 > .picto-titre { margin-right: .45rem; }
.stat .k { display: flex; align-items: center; gap: 0; }
.stat .k > .picto-titre { margin-right: .3rem; }
@media (max-width: 520px) {
  .picto-titre { vertical-align: -.16em; margin-right: .3rem; }
  .stat .k > .picto-titre { height: 16px !important; }
}

/* ------------------------------------------------------------------
   Mon compte façon application
   Les réglages se lisent comme sur un téléphone : une carte d'identité
   en haut, puis des listes groupées où chaque ligne porte un
   pictogramme, un libellé, une valeur et un chevron. On voit d'un coup
   d'œil ce à quoi on a accès, sans chercher dans un menu de 40 liens.
   ------------------------------------------------------------------ */
.idcard {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.idcard .avatar { width: 50px; height: 50px; flex: 0 0 auto; font-size: 1.02rem; }
.idcard-txt { flex: 1; min-width: 0; }
.idcard-nom { font-weight: 800; font-size: 1.02rem; line-height: 1.2; color: var(--ink); }
.idcard-sous { font-size: .82rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.idcard-ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .74rem; color: var(--muted); letter-spacing: .04em; margin-top: 2px;
}

.setlist {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 8px;
  box-shadow: var(--shadow-sm);
}
.setrow {
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 13px 16px; background: transparent; border: 0;
  border-bottom: 1px solid var(--line); color: var(--ink);
  font: inherit; font-size: .92rem; text-align: left;
  text-decoration: none; cursor: pointer; transition: background .15s ease;
}
.setrow:last-child { border-bottom: 0; }
.setrow:hover, .setrow:active { background: var(--brand-tint); text-decoration: none; }
.setrow:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.setrow-ico {
  flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 10px; background: var(--brand-soft); color: var(--brand-dark);
}
.setrow-ico svg { width: 17px; height: 17px; }
.setrow-lab { flex: 1; min-width: 0; font-weight: 600; line-height: 1.3; }
.setrow-lab small {
  display: block; font-weight: 400; font-size: .77rem;
  color: var(--muted); line-height: 1.35; margin-top: 1px;
}
.setrow-val { flex: 0 0 auto; color: var(--muted); font-size: .8rem; }
.setrow .badge { flex: 0 0 auto; }
.setrow-chev { flex: 0 0 auto; color: var(--muted-2); display: grid; place-items: center; }
.setrow-chev svg { width: 16px; height: 16px; }
.setrow.danger .setrow-lab { color: var(--danger); }
.setrow.danger .setrow-ico { background: var(--danger-soft); color: var(--danger); }
.setlist-titre {
  font-size: .74rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
  margin: 20px 0 7px 4px;
}
.setlist-titre:first-of-type { margin-top: 4px; }

/* Bloc repliable : le formulaire détaillé ne s'ouvre qu'au besoin,
   la liste reste courte et lisible. */
.setbox > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 13px;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
  font-weight: 600; font-size: .92rem;
}
.setbox > summary::-webkit-details-marker { display: none; }
.setbox > summary:hover { background: var(--brand-tint); }
.setbox[open] > summary { border-bottom: 1px solid var(--line); }
.setbox > summary .setrow-chev { transition: transform .2s ease; }
.setbox[open] > summary .setrow-chev { transform: rotate(90deg); }
.setbox-body { padding: 14px 16px 16px; }
.setbox-body .card { border: 0; box-shadow: none; padding: 0; margin: 0; background: transparent; }

@media (max-width: 768px) {
  .setrow { padding: 12px 14px; gap: 11px; font-size: .9rem; }
  .setrow-ico { width: 30px; height: 30px; border-radius: 9px; }
  .idcard { padding: 14px; gap: 12px; }
  .idcard .avatar { width: 44px; height: 44px; }
}