/* GarantiePlus — styles */
:root {
  --bg: #f1f5f9;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --primary: #133965;
  --primary-soft: #e7edf5;
  --accent: #fda72f;
  --mint: #63d29f;
  --green: #16a34a; --green-soft: #f0fdf4;
  --orange: #ea580c; --orange-soft: #fff7ed;
  --red: #dc2626; --red-soft: #fef2f2;
  --shadow: 0 1px 4px rgba(15, 23, 42, .08);
  --radius: 14px;
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070d18;
  --card: #111c2e;
  --card-2: #16243a;
  --text: #eaf2fb;
  --muted: #9db2ca;
  --border: #22334d;
  --primary: #63d29f;
  --primary-soft: #10312a;
  --accent: #fda72f;
  --mint: #63d29f;
  --green: #4ade80; --green-soft: #0e2a1e;
  --orange: #fbbf5c; --orange-soft: #2e2110;
  --red: #f87171; --red-soft: #2e1518;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 26px rgba(0, 0, 0, .38);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Logos adaptatifs : version couleur en mode clair, version blanche en mode sombre */
.logo-dark { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark { display: inline-block; }
/* Typographies de marque :
   — Titres : Avenir Next Demi Bold (native sur Apple), sinon Nunito Sans 600 (substitut web)
   — Textes : Ubuntu Bold */
:root {
  --font-titre: 'Avenir Next', 'AvenirNext-DemiBold', Avenir, 'Nunito Sans', system-ui, sans-serif;
  --font-texte: 'Ubuntu', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
body {
  font-family: var(--font-texte);
  /* Ubuntu regular en corps de texte : la graisse est réservée aux accents.
     Le Bold sur tout le texte alourdissait beaucoup l'affichage sur grand écran. */
  font-weight: 400;
  background: var(--bg); color: var(--text);
  font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
b, strong { font-weight: 600; }
a { color: var(--primary); text-decoration: none; }
h1, h2, h3, .stat .k, .authbox h1 {
  font-family: var(--font-titre);
  font-weight: 600; /* Demi Bold */
  letter-spacing: 0;
}
/* Mentions et textes secondaires */
.hint, small, .docrow .m, .stat .d, .dropdown .it small { font-weight: 400; }
.sub { font-weight: 400; }
h1 { font-size: 1.6rem; margin: 0 0 .2rem; }
h2 { font-size: 1.15rem; margin: 0 0 .8rem; }
.sub { color: var(--muted); margin: 0 0 1.2rem; }

/* ---------- Topbar ---------- */
/* La barre du haut se voyait à peine : un liseré d'un pixel sur un fond de
   même clarté que la page. Elle porte maintenant sa propre hauteur, une ombre
   basse qui la détache du contenu, et un liseré plus franc. */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--card); border-bottom: 2px solid var(--border);
  box-shadow: 0 2px 10px rgba(15, 23, 42, .06);
  display: flex; align-items: center; gap: .5rem;
  padding: .95rem 1.2rem;
  min-height: 68px;
}
.brand { display: flex; align-items: center; gap: .5rem; cursor: pointer; white-space: nowrap; }
.brand .brandlogo { height: 42px; width: auto; }
.brand .sr-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav { display: flex; gap: .15rem; margin-left: 1rem; flex: 1; overflow-x: auto; }
.nav button {
  background: none; border: 0; padding: .5rem .8rem; border-radius: 9px;
  color: var(--muted); font-size: .92rem; cursor: pointer; white-space: nowrap; font-weight: 500;
}
.nav button:hover { background: var(--bg); color: var(--text); }
.nav button.on { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.topbar .right { display: flex; align-items: center; gap: .3rem; margin-left: auto; }
.iconbtn {
  background: none; border: 0; font-size: 1.15rem; cursor: pointer; color: var(--muted);
  width: 38px; height: 38px; border-radius: 50%; position: relative;
}
.iconbtn:hover { background: var(--bg); }
.iconbtn .dot {
  position: absolute; top: 4px; right: 4px; background: var(--red); color: #fff;
  font-size: .62rem; min-width: 15px; height: 15px; line-height: 15px; border-radius: 99px; font-weight: 700;
}

/* ---------- Layout ---------- */
.wrap { max-width: 1080px; margin: 0 auto; padding: 1.8rem 1rem 4rem; }
.page { display: none; }
.page.on { display: block; }
.card {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.35rem 1.4rem; margin-bottom: 1.6rem;
  border: 1px solid transparent;
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; margin-bottom: 1.6rem; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-bottom: 1.6rem; }
.rowflex { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }

/* ---------- Stat cards ---------- */
.stat {
  border-radius: var(--radius); padding: 1.1rem 1.2rem; cursor: pointer;
  box-shadow: var(--shadow); border: 1px solid transparent; background: var(--card);
  transition: transform .12s;
}
.stat:hover { transform: translateY(-2px); }
.stat .k { font-size: 1.9rem; font-weight: 600; margin: .15rem 0; }
.stat .t { font-weight: 600; display: flex; align-items: center; gap: .45rem; }
.stat .d { color: var(--muted); font-size: .84rem; }
.stat .ic { float: right; font-size: 1.25rem; width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.stat.green { background: var(--green-soft); } .stat.green .ic { background: rgba(22,163,74,.12); }
.stat.orange { background: var(--orange-soft); } .stat.orange .ic { background: rgba(234,88,12,.12); }
.stat.red { background: var(--red-soft); } .stat.red .ic { background: rgba(220,38,38,.12); }
.stat.indigo { background: var(--primary-soft); } .stat.indigo .ic { background: rgba(79,70,229,.12); }

/* ---------- Forms ---------- */
label { display: block; font-weight: 500; font-size: .88rem; margin: .8rem 0 .3rem; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], select, textarea {
  width: 100%; padding: .58rem .75rem; border: 1px solid var(--border); border-radius: 10px;
  background: var(--card); color: var(--text); font: inherit; font-size: .95rem;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: -1px; border-color: transparent; }
textarea { min-height: 90px; resize: vertical; }
.hint { color: var(--muted); font-size: .8rem; margin-top: .25rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .45rem; justify-content: center;
  background: var(--primary); color: #fff; border: 0; border-radius: 10px;
  padding: .6rem 1.1rem; font-weight: 600; font-size: .92rem; cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.ghost { background: var(--card); color: var(--text); border: 1px solid var(--border); }
.btn.ghost:hover { background: var(--bg); }
.btn.danger { background: var(--red); }
.btn.sm { padding: .35rem .7rem; font-size: .84rem; border-radius: 8px; }

/* ---------- Badges & chips ---------- */
.badge { display: inline-block; padding: .18rem .6rem; border-radius: 99px; font-size: .78rem; font-weight: 600; }
.badge.actif { background: var(--green-soft); color: var(--green); }
.badge.surveiller { background: var(--orange-soft); color: var(--orange); }
.badge.expire { background: var(--red-soft); color: var(--red); }
.chip {
  display: inline-block; padding: .12rem .55rem; border-radius: 99px; font-size: .76rem;
  border: 1px solid var(--border); color: var(--muted);
}
.chip.cat { border-width: 1.5px; font-weight: 600; }

/* ---------- Doc list ---------- */
.doclist { display: flex; flex-direction: column; gap: .75rem; }
.docrow {
  background: var(--card); border-radius: 12px; box-shadow: var(--shadow);
  padding: .85rem 1.05rem; display: flex; align-items: center; gap: .9rem; cursor: pointer;
}
.docrow:hover { outline: 2px solid var(--primary-soft); }
.docrow .ic { font-size: 1.25rem; width: 42px; height: 42px; flex: none; border-radius: 11px; background: var(--primary-soft); display: flex; align-items: center; justify-content: center; }
.docrow .mid { flex: 1; min-width: 0; }
.docrow .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docrow .m { color: var(--muted); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docrow .end { text-align: right; flex: none; }
.docrow .price { font-weight: 600; font-size: .95rem; }
.docrow .exp { color: var(--muted); font-size: .78rem; }

/* ---------- Fiche ---------- */
.field { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--border); }
.field b { color: var(--muted); font-weight: 500; flex: none; }
.field span { text-align: right; overflow-wrap: anywhere; }
.preview-file { max-width: 100%; border-radius: 10px; border: 1px solid var(--border); }
iframe.preview-file { width: 100%; height: 420px; }

/* ---------- Dropzone ---------- */
.dropzone {
  border: 2px dashed var(--border); border-radius: var(--radius);
  padding: 2.2rem 1rem; text-align: center; color: var(--muted); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.drag { border-color: var(--primary); background: var(--primary-soft); }
.dropzone .big { font-size: 2.2rem; }
.ocrbox { background: var(--primary-soft); border-radius: 10px; padding: .7rem 1rem; margin-top: .8rem; font-size: .9rem; }
.ocrbox progress { width: 100%; }

/* ---------- Tables ---------- */
table.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tbl th, .tbl td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--border); }
.tbl th { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.tblwrap { overflow-x: auto; }

/* ---------- Modal ---------- */
.modal-back {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .5); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.modal {
  background: var(--card); border-radius: var(--radius); padding: 1.4rem;
  max-width: 520px; width: 100%; max-height: 88vh; overflow: auto;
}
.modal h3 { margin: 0 0 .8rem; }

/* ---------- Toast ---------- */
#toasts { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: .5rem; align-items: center; }
.toast {
  background: #0f172a; color: #fff; padding: .65rem 1.2rem; border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25); font-size: .92rem; animation: pop .18s;
}
.toast.err { background: var(--red); }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Bell dropdown ---------- */
.dropdown {
  position: absolute; right: 0; top: 46px; width: 330px; max-width: 92vw;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .18); z-index: 90; overflow: hidden;
}
.dropdown .hd { padding: .7rem 1rem; font-weight: 600; display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid var(--border); }
.dropdown .it { padding: .6rem 1rem; border-bottom: 1px solid var(--border); font-size: .87rem; }
.dropdown .it small { color: var(--muted); }
.dropdown .empty { padding: 1.1rem; color: var(--muted); text-align: center; font-size: .88rem; }

/* ---------- Auth ---------- */
#auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.authbox { width: 100%; max-width: 400px; }
.authbox .logo { text-align: center; margin-bottom: .3rem; }
.authbox .logo img { max-width: 250px; width: 78%; height: auto; }
.authbox h1 { text-align: center; }
.authbox .sub { text-align: center; }

/* ---------- Categories ---------- */
.catrow { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--border); }
.catdot { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.catrow .n { flex: 1; font-weight: 600; }
input[type=color] { width: 42px; height: 36px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); }

/* ---------- Tabs (admin) ---------- */
.tabs { display: flex; gap: .3rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tabs button {
  background: var(--card); border: 1px solid var(--border); border-radius: 99px;
  padding: .42rem .95rem; cursor: pointer; color: var(--muted); font-weight: 600; font-size: .88rem;
}
.tabs button.on { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .grid4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .grid2 { grid-template-columns: 1fr; }
  .nav { display: none; }
  .topbar { padding: .7rem .7rem; gap: .3rem; min-height: 60px; }
  .brand { gap: .4rem; }
  .brand .brandlogo { height: 34px; }
  .iconbtn { width: 34px; height: 34px; font-size: 1.05rem; }
  h1 { font-size: 1.35rem; }
  .spread { gap: .6rem; }
  .spread .rowflex { width: 100%; }
  .wrap { padding-bottom: 5.2rem; }
  .mobilenav {
    display: flex !important; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    background: var(--card); border-top: 1px solid var(--border);
    justify-content: space-around; padding: .35rem 0 calc(.35rem + env(safe-area-inset-bottom));
  }
  .mobilenav button {
    background: none; border: 0; color: var(--muted); font-size: .68rem; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .25rem .5rem; border-radius: 8px;
  }
  .mobilenav button .i { font-size: 1.25rem; }
  .mobilenav button.on { color: var(--primary); }
  .docrow .end .exp { display: none; }
  .field { flex-direction: column; gap: .1rem; }
  .field span { text-align: left; }
}
.mobilenav { display: none; }
@media (max-width: 640px) {
  /* sur mobile, le sélecteur de langue n'affiche que le drapeau */
  #lang-toggle .langtxt { display: none; }
}
@media (max-width: 380px) {
  .brand .brandlogo { height: 30px; }
}

/* ---------- Print ---------- */
@media print {
  body * { visibility: hidden; }
  #printzone, #printzone * { visibility: visible; }
  #printzone { position: absolute; inset: 0; padding: 1rem; }
  .noprint { display: none !important; }
}


/* ---------- Icônes vectorielles ---------- */
.ico { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: -.2em; }
.btn .ico { width: 17px; height: 17px; }
.iconbtn { display: inline-grid; place-items: center; }
.iconbtn .ico { width: 20px; height: 20px; }
.stat .ic .ico, .docrow .ic .ico { width: 22px; height: 22px; }
.stat.green .ic { color: var(--green); }
.stat.orange .ic { color: var(--orange); }
.stat.red .ic { color: var(--red); }
.stat.indigo .ic { color: var(--primary); }
.docrow .ic { color: var(--primary); }
.mobilenav .i .ico { width: 21px; height: 21px; }
.flag { width: 20px; height: 14px; border-radius: 3px; display: inline-block; vertical-align: -.15em; }
#lang-toggle, #applang { display: inline-flex; align-items: center; gap: .35rem; }
.dropdown .hd .ico { color: var(--primary); }

/* Sur grand écran, on aère un peu la lecture */
@media (min-width: 900px) {
  body { font-size: 15.5px; }
}

/* ---------- Icônes de navigation (Aide, Paramètres, Admin) ---------- */
.navicons { display: flex; align-items: center; gap: .15rem; padding-right: .35rem; margin-right: .25rem; border-right: 1px solid var(--border); }
.navicons .iconbtn.on { background: var(--primary-soft); color: var(--primary); }
.iconbtn.on { color: var(--primary); }

/* Marge entre l'icône et le texte, y compris hors conteneur flex */
[data-ico] > .ico:first-child,
[data-ico-fixed] > .ico:first-child { margin-right: 2px; }
h1 > .ico:first-child, h2 > .ico:first-child, .hd > .ico:first-child { margin-right: 4px; }
h1, h2 { display: flex; align-items: center; gap: 2px; }
.spread h1 { display: flex; }
.btn > .ico:first-child { margin-right: 2px; }
/* Boutons composés uniquement d'une icône : pas de marge inutile */
.btn.sm > .ico:only-child, .iconbtn > .ico:only-child { margin: 0; }

/* =====================================================================
   Mode sombre — finitions
   Fond profond, cartes légèrement remontées, accents verts et orange
   pour éviter l'effet délavé.
   ===================================================================== */
[data-theme="dark"] body {
  background:
    radial-gradient(70% 55% at 12% -5%, rgba(99, 210, 159, .10), transparent 60%),
    radial-gradient(60% 50% at 92% 0%, rgba(45, 120, 200, .12), transparent 62%),
    var(--bg);
  background-attachment: fixed;
}
[data-theme="dark"] .topbar {
  background: rgba(9, 17, 30, .88);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom-color: var(--border);
}
[data-theme="dark"] .card,
[data-theme="dark"] .docrow,
[data-theme="dark"] .modal,
[data-theme="dark"] .dropdown {
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--border);
}
[data-theme="dark"] .card:hover { border-color: rgba(99, 210, 159, .30); }
[data-theme="dark"] .docrow:hover { outline: 2px solid rgba(99, 210, 159, .35); }
[data-theme="dark"] .docrow .ic { background: rgba(99, 210, 159, .12); color: var(--primary); }

/* Cartes de statistiques : teintes franches plutôt que des gris */
[data-theme="dark"] .stat { border: 1px solid var(--border); }
[data-theme="dark"] .stat.green  { background: linear-gradient(150deg, rgba(74, 222, 128, .16), rgba(17, 28, 46, .9)); border-color: rgba(74, 222, 128, .3); }
[data-theme="dark"] .stat.orange { background: linear-gradient(150deg, rgba(251, 191, 92, .16), rgba(17, 28, 46, .9)); border-color: rgba(251, 191, 92, .3); }
[data-theme="dark"] .stat.red    { background: linear-gradient(150deg, rgba(248, 113, 113, .16), rgba(17, 28, 46, .9)); border-color: rgba(248, 113, 113, .3); }
[data-theme="dark"] .stat.indigo { background: linear-gradient(150deg, rgba(99, 210, 159, .16), rgba(17, 28, 46, .9)); border-color: rgba(99, 210, 159, .3); }
[data-theme="dark"] .stat .k { color: #fff; }
[data-theme="dark"] .stat.green .ic  { background: rgba(74, 222, 128, .18);  color: var(--green); }
[data-theme="dark"] .stat.orange .ic { background: rgba(251, 191, 92, .18); color: var(--orange); }
[data-theme="dark"] .stat.red .ic    { background: rgba(248, 113, 113, .18); color: var(--red); }
[data-theme="dark"] .stat.indigo .ic { background: rgba(99, 210, 159, .18);  color: var(--primary); }

/* Boutons et champs */
[data-theme="dark"] .btn {
  background: linear-gradient(135deg, #63d29f, #1e9c6b);
  color: #04231a;
  box-shadow: 0 8px 22px rgba(30, 156, 107, .28);
}
[data-theme="dark"] .btn:hover { filter: brightness(1.06); }
[data-theme="dark"] .btn.ghost {
  background: rgba(255, 255, 255, .04); color: var(--text);
  border: 1px solid var(--border); box-shadow: none;
}
[data-theme="dark"] .btn.ghost:hover { background: rgba(99, 210, 159, .12); border-color: rgba(99, 210, 159, .4); color: var(--primary); }
[data-theme="dark"] .btn.danger { background: linear-gradient(135deg, #f87171, #b91c1c); color: #fff; box-shadow: none; }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea {
  background: rgba(255, 255, 255, .04); border-color: var(--border); color: var(--text);
}
[data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #6f849c; }
[data-theme="dark"] .badge.actif { background: rgba(74, 222, 128, .16); color: #86efac; }
[data-theme="dark"] .badge.surveiller { background: rgba(251, 191, 92, .16); color: #fcd34d; }
[data-theme="dark"] .badge.expire { background: rgba(248, 113, 113, .16); color: #fca5a5; }
[data-theme="dark"] .chip { border-color: var(--border); }
[data-theme="dark"] .tabs button { background: rgba(255, 255, 255, .04); }
[data-theme="dark"] .tabs button.on { background: var(--primary); color: #04231a; border-color: var(--primary); }
[data-theme="dark"] .modal-back { background: rgba(3, 8, 16, .72); backdrop-filter: blur(3px); }
[data-theme="dark"] .toast { background: #16243a; border: 1px solid var(--border); }
[data-theme="dark"] a { color: var(--primary); }
[data-theme="dark"] .iconbtn:hover { background: rgba(255, 255, 255, .06); }
[data-theme="dark"] .navicons { border-right-color: var(--border); }
[data-theme="dark"] .topbar { box-shadow: 0 2px 12px rgba(0, 0, 0, .38); }
[data-theme="dark"] .nav button.on { background: rgba(99, 210, 159, .14); color: var(--primary); }
[data-theme="dark"] .mobilenav { background: rgba(9, 17, 30, .96); border-top-color: var(--border); }

/* =====================================================================
   Respiration entre les blocs
   ===================================================================== */
.page > h1:first-child { margin-bottom: 1rem; }
.page .card + .card { margin-top: 0; }
.page > .grid2 + .card, .page > .grid4 + .card { margin-top: .3rem; }
.card > h2 { margin-bottom: 1rem; }
.card > .sub { margin-bottom: 1.1rem; }
.rowflex { row-gap: .6rem; }
.tabs { margin-bottom: 1.4rem; }
h2 { margin-top: 0; }
.card h2 + .hint { margin-top: -.5rem; margin-bottom: 1rem; }

/* =====================================================================
   Prise de photo — plein écran sur mobile
   Objectif : voir la caméra et déclencher sans avoir à faire défiler.
   ===================================================================== */
.modal-cam { display: flex; flex-direction: column; gap: .6rem; }
.modal-cam .camhead { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.modal-cam .camhead h3 { margin: 0; }
.modal-cam .camstage {
  flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .6rem;
  overflow: auto; -webkit-overflow-scrolling: touch;
}
.modal-cam video { width: 100%; border-radius: 12px; background: #000; }
.modal-cam .cambar {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  padding-top: .2rem;
}
.modal-cam .cambar .btn { flex: 1 1 auto; }
.modal-cam .cambar .btn.ghost.sm { flex: 0 0 auto; }
.modal-cam .btn-shot { font-size: 1.02rem; padding: .85rem 1.2rem; }

@media (max-width: 720px) {
  .modal-cam {
    position: fixed; inset: 0; max-width: none; width: 100%;
    max-height: none; height: 100dvh; border-radius: 0;
    padding: .8rem .8rem calc(.8rem + env(safe-area-inset-bottom));
  }
  .modal-cam .camhint { display: none; }
  .modal-cam video { max-height: 58dvh; object-fit: cover; }
  /* La barre d'action reste sous le pouce, jamais renvoyée hors écran. */
  .modal-cam .cambar {
    position: sticky; bottom: 0; margin-top: auto;
    background: var(--card); border-top: 1px solid var(--border);
    padding: .6rem 0 0; flex-wrap: nowrap;
  }
  .modal-cam .cambar .btn { min-height: 46px; }
}

/* Mise en évidence de la section atteinte par une ancre */
.flash { animation: flashcard 1.6s ease; }
@keyframes flashcard {
  0%, 100% { box-shadow: var(--shadow); }
  25%, 60% { box-shadow: 0 0 0 3px var(--primary), var(--shadow); }
}

/* ---------- Parcours d'inscription ---------- */
.modal-welcome .stepper { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .55rem; }
.modal-welcome .stepper li { display: flex; align-items: center; gap: .6rem; color: var(--muted); font-size: .93rem; }
.modal-welcome .stepper .n {
  display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none;
  border-radius: 50%; border: 1.5px solid var(--border); font-size: .82rem; font-weight: 600;
}
.modal-welcome .stepper .n .ico { width: 15px; height: 15px; }
.modal-welcome .stepper li.done { color: var(--text); }
.modal-welcome .stepper li.done .n { background: var(--primary); border-color: var(--primary); color: #fff; }
[data-theme="dark"] .modal-welcome .stepper li.done .n { color: #04231a; }
.modal-welcome .stepper li.now { color: var(--text); font-weight: 600; }
.modal-welcome .stepper li.now .n { border-color: var(--primary); color: var(--primary); }

/* ---------- Verrou biométrique ---------- */
.biolock {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; padding: 1.5rem;
  background: var(--bg);
}
.biobox { text-align: center; max-width: 320px; display: grid; gap: .7rem; justify-items: center; }
.biobox .ico-xl { width: 46px; height: 46px; color: var(--primary); }
.biobox h2 { margin: 0; }
.biobox .btn { width: 100%; }

/* ---------- Encadré d'avertissement « Ma maison » ---------- */
.alertbox {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.1rem 1.3rem; margin-bottom: 1.6rem;
  border-radius: var(--radius); position: relative; overflow: hidden;
  background: linear-gradient(135deg, #fff6e8, #fffdf9);
  border: 1px solid rgba(253, 167, 47, .38);
  box-shadow: var(--shadow);
}
.alertbox::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--accent), #e0620c);
}
.alertbox .ab-ico {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: 13px; background: rgba(253, 167, 47, .18); color: #c2660a;
}
.alertbox .ab-ico .ico { width: 24px; height: 24px; }
.alertbox b { display: block; font-family: var(--font-titre); font-weight: 600; font-size: 1.02rem; margin-bottom: .2rem; }
.alertbox p { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.55; }

/* En mode sombre : braises chaudes sur fond profond plutôt qu'un aplat terne */
[data-theme="dark"] .alertbox {
  background:
    radial-gradient(80% 130% at 0% 0%, rgba(253, 167, 47, .20), transparent 62%),
    linear-gradient(180deg, #241a12, #16243a);
  border-color: rgba(253, 167, 47, .34);
}
[data-theme="dark"] .alertbox::before { background: linear-gradient(180deg, #ffc776, #e0620c); }
[data-theme="dark"] .alertbox .ab-ico { background: rgba(253, 167, 47, .16); color: #ffc776; }
[data-theme="dark"] .alertbox b { color: #ffd8a1; }
[data-theme="dark"] .alertbox p { color: #d5c4ae; }

@media (max-width: 560px) {
  .alertbox { padding: 1rem; gap: .8rem; }
  .alertbox .ab-ico { width: 38px; height: 38px; border-radius: 11px; }
}

/* ---------- Barre du haut sur mobile ----------
   Aide, Réglages et Admin vivent ici, y compris sur mobile.
   Auparavant cette règle les masquait sous 640 px, en supposant qu'on les
   retrouvait dans la barre du bas. C'était vrai pour Réglages et Admin, faux
   pour l'Aide : elle n'était dans aucune des deux barres, donc inatteignable
   au téléphone. La barre du bas est désormais réservée aux cinq univers, et
   ces trois destinations occasionnelles restent en haut, en icône seule. */
@media (max-width: 640px) {
  .navicons { padding-right: .2rem; margin-right: .15rem; gap: .05rem; }
  .mobilenav button { padding: .25rem .3rem; font-size: .62rem; }
  .mobilenav button .i .ico { width: 20px; height: 20px; }
}

/* Sous 400 px, chaque pixel de la barre du haut compte : on resserre les
   icônes plutôt que d'en sacrifier une. */
@media (max-width: 400px) {
  .topbar { padding: .6rem .45rem; gap: .15rem; min-height: 56px; }
  .topbar .iconbtn { width: 30px; height: 30px; }
  .brand .brandlogo { height: 28px; }
  .mobilenav button { padding: .25rem .18rem; font-size: .58rem; }
}

/* =====================================================================
   Pages plein écran (remplacent les fenêtres surgissantes dans Ma maison)
   ===================================================================== */
.sheet-back {
  position: fixed; inset: 0; z-index: 120;
  background: var(--bg); display: block; padding: 0;
}
.sheet {
  display: flex; flex-direction: column;
  height: 100%; width: 100%; max-width: 860px; margin: 0 auto;
  background: var(--bg);
}
.sheet-head {
  display: flex; align-items: center; gap: .7rem; flex: none;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-top));
  background: var(--card); border-bottom: 1px solid var(--border);
}
.sheet-head h2 { margin: 0; font-size: 1.15rem; }
.sheet-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 1.1rem 1rem 1.4rem; }
.sheet-body > :first-child { margin-top: 0; }
.sheet-foot {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom));
  background: var(--card); border-top: 1px solid var(--border);
  box-shadow: 0 -6px 18px rgba(8, 26, 48, .07);
}
[data-theme="dark"] .sheet-foot { box-shadow: 0 -6px 18px rgba(0, 0, 0, .4); }
.sheet-foot .rowflex { gap: .5rem; }
.sheet-foot .btn { white-space: nowrap; }
@media (max-width: 560px) {
  .sheet-foot { flex-wrap: nowrap; }
  .sheet-foot .btn { flex: 1 1 auto; justify-content: center; }
  .sheet-foot .btn.danger.sm { flex: 0 0 auto; }
}

/* Les listes de biens ne débordent plus horizontalement */
.maison-items { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .maison-items { grid-template-columns: 1fr 1fr; } }
.maison-items .docrow { min-width: 0; }
.maison-items .docrow .mid { min-width: 0; overflow: hidden; }
.roomhead { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 1.6rem 0 .6rem; }
.roomhead h2 { margin: 0; font-size: 1.15rem; }
.roomhead .iconbtn { width: 32px; height: 32px; }
.roomhead .iconbtn .ico { width: 17px; height: 17px; }
.roomhead .grow { flex: 1; }
.roomphotos { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .7rem; }

/* Verrouillage de l'affichage en portrait sur mobile */
@media (max-width: 900px) and (orientation: landscape) {
  body.lock-portrait #app > *:not(.rotate-hint) { display: none !important; }
  .rotate-hint {
    position: fixed; inset: 0; z-index: 400; display: grid; place-items: center;
    background: var(--bg); text-align: center; padding: 2rem;
  }
  .rotate-hint .ico { width: 46px; height: 46px; color: var(--primary); margin: 0 auto .8rem; }
}
.rotate-hint { display: none; }

/* ---------- Scan IA : aperçu, attente, objets détectés ---------- */
.scan-apercu {
  width: 100%; max-height: 46vh; object-fit: contain;
  border-radius: 12px; background: #000; border: 1px solid var(--border);
}
.scan-attente { display: flex; align-items: center; gap: .7rem; }
.spin {
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  border: 2.5px solid var(--border); border-top-color: var(--primary);
  animation: tourne .8s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2.4s; } }

.scan-liste { display: grid; gap: .6rem; }
.scan-obj {
  display: flex; align-items: center; gap: .7rem; margin: 0;
  padding: .6rem .7rem; border: 1px solid var(--border); border-radius: 12px;
  background: var(--card); font-weight: 400;
}
.scan-obj img, .scan-obj .scan-novign {
  width: 62px; height: 62px; flex: none; border-radius: 10px;
  object-fit: cover; border: 1px solid var(--border);
  display: grid; place-items: center; background: var(--bg); color: var(--muted);
}
.scan-obj .scan-champs { flex: 1; min-width: 0; display: grid; gap: .35rem; }
.scan-obj input[type=text] { width: 100%; }
.scan-obj input[type=number] { width: 108px; }
.scan-obj .rowflex { align-items: center; gap: .35rem; }

/* ---------- Visite guidée ---------- */
.modal-visite { max-width: 430px; text-align: center; }
.visite .visite-ico {
  display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto .8rem;
  border-radius: 18px; background: var(--primary-soft); color: var(--primary);
}
.visite .visite-ico .ico { width: 28px; height: 28px; }
.visite h3 { margin: 0 0 .5rem; }
.visite p { color: var(--muted); font-weight: 400; margin: 0; }
.visite-points { display: flex; gap: .35rem; justify-content: center; margin-top: 1.1rem; }
.visite-point { width: 7px; height: 7px; border-radius: 50%; background: var(--border); transition: width .2s, background .2s; }
.visite-point.on { width: 20px; border-radius: 99px; background: var(--primary); }
.rotate-hint { gap: 1rem; }
.rotate-hint b { display: block; margin-bottom: .2rem; }

/* Choix du moyen de paiement */
#pm-moyen { gap: .4rem; align-items: center; }
#pm-moyen .moyen.on { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }

/* =====================================================================
   Visite guidée : la carte accompagne l'écran, elle ne le cache pas
   ===================================================================== */
.visite-back {
  position: fixed; inset: auto 0 0 0; z-index: 130;
  display: flex; justify-content: center;
  background: none;                    /* l'application reste visible derrière */
  padding: 0 1rem calc(1rem + env(safe-area-inset-bottom));
  pointer-events: none;                /* seuls les boutons de la carte réagissent */
}
.visite-back .modal-visite {
  pointer-events: auto;
  width: 100%; max-width: 430px;
  box-shadow: 0 -6px 40px rgba(8, 26, 48, .22), 0 0 0 1px var(--border);
  animation: visite-entre .28s cubic-bezier(.16, 1, .3, 1);
}
[data-theme="dark"] .visite-back .modal-visite { box-shadow: 0 -6px 40px rgba(0, 0, 0, .55), 0 0 0 1px var(--border); }
@keyframes visite-entre { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .visite-back .modal-visite { animation: none; } }
@media (max-width: 640px) {
  /* au-dessus de la barre de navigation du bas */
  .visite-back { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
}

/* Bouton d'aide flottant (scan IA) */
.aide-flottante {
  position: absolute; right: 1rem; bottom: 1rem; z-index: 3;
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer;
  background: var(--card); color: var(--primary);
  border: 1px solid var(--border); box-shadow: var(--shadow);
}
.aide-flottante:hover { background: var(--primary-soft); }
.aide-flottante .ico { width: 22px; height: 22px; }
.sheet-body { position: relative; }
.modal-aide { max-width: 460px; }
.modal-aide h3 { display: flex; align-items: center; gap: .5rem; }
.modal-aide p { color: var(--muted); font-weight: 400; }

/* =====================================================================
   Plus aucun défilement horizontal
   Par défaut, un élément de grille ou de flex ne descend pas sous la largeur
   de son contenu (min-width: auto) : un long titre de document élargissait
   donc la carte, la grille, puis la page entière. On autorise partout la
   réduction, et on coupe les mots trop longs.
   ===================================================================== */
html, body { overflow-x: clip; max-width: 100%; }
.wrap { overflow-x: clip; }

.grid2 > *, .grid4 > *, .rowflex > *, .spread > *, .maison-items > *,
.doclist > *, .sheet-body > *, .stat, .card { min-width: 0; }

/* On ne coupe un mot que s'il ne tient vraiment pas ; la coupure « anywhere »
   est réservée aux contenus qui contiennent des chaînes insécables
   (adresses email, liens, références). */
.card, .docrow, .stat, .qa { overflow-wrap: break-word; }
.field span, .prose, td, .docrow .m, .dropdown .it { overflow-wrap: anywhere; }
.docrow { min-width: 0; }
.docrow .mid, .docrow .mid .t, .docrow .mid .m { min-width: 0; }
.docrow .end { min-width: 0; }

/* Les tableaux (administration, comparatifs) défilent dans leur propre cadre */
table { max-width: 100%; }
.card > table, .tablewrap { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Les barres d'onglets et de boutons défilent sans pousser la page */
.tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.rowflex { flex-wrap: wrap; }

/* Images et champs ne dépassent jamais leur conteneur */
img, video, canvas, svg { max-width: 100%; }
input, select, textarea { max-width: 100%; }

/* Cartes de statistiques lisibles même sur les écrans étroits */
.stat .t { padding-right: 50px; }              /* laisse la place à l'icône */
.stat .k {
  white-space: nowrap;
  font-size: clamp(1.2rem, 6.5vw, 1.9rem);
}
.stat .d { overflow-wrap: break-word; }
@media (max-width: 430px) {
  .grid4 { grid-template-columns: 1fr; }        /* une carte par ligne sur petit mobile */
  .stat .t { padding-right: 46px; }
}

/* ===== Sélection multiple des biens (appui long) ===== */
/* Une boîte de dialogue ouverte par-dessus une page plein écran doit passer devant. */
.modal-back:not(.sheet-back):not(.visite-back) { z-index: 160; }

.docrow.selectable { cursor: pointer; -webkit-user-select: none; user-select: none; position: relative; }
body.mode-selection .docrow.selectable { -webkit-touch-callout: none; }
.docrow.selectable .coche {
  display: none; flex: none; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--border); align-items: center; justify-content: center;
  color: transparent; transition: background .15s, border-color .15s, color .15s;
}
.docrow.selectable .coche svg { width: 14px; height: 14px; }
body.mode-selection .docrow.selectable .coche { display: inline-flex; }
.docrow.selectable.choisi { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.docrow.selectable.choisi .coche { background: var(--accent); border-color: var(--accent); color: #fff; }

.selbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
  z-index: 190; display: flex; align-items: center; gap: .6rem;
  padding: .55rem .7rem; border-radius: 999px;
  background: var(--card); border: 1px solid var(--border);
  box-shadow: 0 12px 34px rgba(15, 23, 42, .25);
  max-width: calc(100vw - 1.6rem);
}
.selbar .cnt { font-size: .9rem; white-space: nowrap; }
.selbar .btn { border-radius: 999px; }
@media (max-width: 720px) { .selbar { bottom: calc(env(safe-area-inset-bottom, 0px) + 4.9rem); } }

/* ===== Choix de la formule à l'inscription ===== */
.planpicks { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .2rem 0 .5rem; }
.planpick {
  position: relative; display: flex; flex-direction: column; gap: .12rem;
  padding: .6rem .5rem; text-align: left; cursor: pointer;
  background: var(--card); color: var(--text);
  border: 1.5px solid var(--border); border-radius: 12px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.planpick:hover { border-color: var(--accent); }
.planpick.actif { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--card)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.planpick .pp-check {
  position: absolute; bottom: .45rem; right: .4rem; width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: transparent;
}
.planpick .pp-check svg { width: 11px; height: 11px; }
.planpick.actif .pp-check { background: var(--accent); border-color: var(--accent); color: #fff; }
.planpick .pp-t { font-weight: 600; font-size: .82rem; line-height: 1.2; }
.planpick .pp-p { font-size: .95rem; font-weight: 700; color: var(--accent); }
.planpick .pp-d { font-size: .72rem; color: var(--muted); line-height: 1.25; padding-right: 20px; }
/* Sous 400 px les trois colonnes deviennent trois lignes : nom et prix restent
   sur une seule ligne, seul le descriptif se laisse tronquer. */
@media (max-width: 400px) {
  .planpicks { grid-template-columns: 1fr; gap: .4rem; }
  .planpick { flex-direction: row; align-items: baseline; gap: .5rem; padding: .5rem .6rem; }
  .planpick .pp-t, .planpick .pp-p { white-space: nowrap; }
  .planpick .pp-d { margin-left: auto; padding-right: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .planpick .pp-check { top: 50%; bottom: auto; transform: translateY(-50%); }
}

/* ===== Connexion Google ===== */
#google-login, #google-register { margin-bottom: .2rem; }
#google-login .gbtn, #google-register .gbtn { display: flex; justify-content: center; }
.sep-ou { display: flex; align-items: center; gap: .7rem; margin: .9rem 0 .3rem; color: var(--muted); font-size: .8rem; }
.sep-ou::before, .sep-ou::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ===== Bascule mensuel / annuel à l'inscription ===== */
.periodpick {
  display: inline-flex; gap: .15rem; margin: 0 0 .55rem;
  padding: .18rem; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--border);
}
.periodpick button {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  padding: .3rem .75rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: .35rem;
  transition: background .15s, color .15s;
}
.periodpick button:hover { color: var(--text); }
.periodpick button.on { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
/* La remise reste lisible sur le bouton actif comme sur l'inactif. */
.periodpick .eco {
  font-size: .68rem; font-weight: 700; padding: .05rem .3rem; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent-fort, var(--accent));
}

/* =====================================================================
   Deux univers : les garanties et l'inventaire de la maison
   =====================================================================
   L'application mêle deux sujets que l'utilisateur confondait — ses
   contrats et ses biens. Une couleur les sépare partout : ORANGE pour
   les garanties, VERT pour la maison. La couleur ne porte jamais seule
   l'information : elle double toujours un mot ou une icône, pour rester
   lisible en cas de daltonisme ou d'impression en noir et blanc. */
:root {
  --u-garanties: var(--orange);
  --u-garanties-doux: var(--orange-soft);
  --u-maison: var(--green);
  --u-maison-doux: var(--green-soft);
}

/* Bandeau de couleur en tête de page, qui annonce l'univers */
.univers { border-left: 4px solid transparent; padding-left: .8rem; }
.univers-garanties { border-left-color: var(--u-garanties); }
.univers-maison    { border-left-color: var(--u-maison); }

/* Pastille d'univers : couleur + mot, jamais la couleur seule */
.tag-univers {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  padding: .15rem .5rem; border-radius: 999px; vertical-align: middle;
}
.tag-univers svg { width: 12px; height: 12px; }
.tag-garanties { background: var(--u-garanties-doux); color: var(--u-garanties); }
.tag-maison    { background: var(--u-maison-doux);    color: var(--u-maison); }

/* Cartes et lignes rattachées à un univers */
.card.u-garanties { border-top: 3px solid var(--u-garanties); }
.card.u-maison    { border-top: 3px solid var(--u-maison); }

/* Navigation : l'onglet actif prend la couleur de son univers */
.nav button[data-page="documents"].on,
.mobilenav button[data-page="documents"].on { color: var(--u-garanties); }
.nav button[data-page="documents"].on { background: var(--u-garanties-doux); }
.mobilenav button[data-page="documents"].on .i svg { stroke: var(--u-garanties); }
.nav button[data-page="maison"].on,
.mobilenav button[data-page="maison"].on { color: var(--u-maison); }
.nav button[data-page="maison"].on { background: var(--u-maison-doux); }
.mobilenav button[data-page="maison"].on .i svg { stroke: var(--u-maison); }

/* Boutons d'action propres à chaque univers */
.btn.u-garanties { background: var(--u-garanties); border-color: var(--u-garanties); color: #fff; }
.btn.u-maison    { background: var(--u-maison);    border-color: var(--u-maison);    color: #fff; }
.btn.ghost.u-garanties { background: transparent; color: var(--u-garanties); border-color: var(--u-garanties); }
.btn.ghost.u-maison    { background: transparent; color: var(--u-maison);    border-color: var(--u-maison); }

/* Description sous un bouton du tableau de bord */
.action-bloc { display: flex; flex-direction: column; gap: .15rem; }
.action-bloc .desc {
  font-size: .73rem; color: var(--muted); line-height: 1.3;
  /* Une seule ligne : au pire elle se termine par « … », le texte entier
     restant accessible en infobulle. Deux lignes cassaient le rythme
     vertical de la colonne d'actions. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* Liseré d'univers sur les lignes de liste : la couleur double l'icône,
   elle ne la remplace pas — un daltonien garde l'icône et le libellé. */
.docrow.ligne-garanties { border-left: 3px solid var(--u-garanties); }
.docrow.ligne-maison    { border-left: 3px solid var(--u-maison); }

/* Fiches (feuilles latérales) : bandeau de tête coloré selon l'univers */
.sheet.u-garanties > header, .sheet-head.u-garanties { border-top: 3px solid var(--u-garanties); }
.sheet.u-maison > header,    .sheet-head.u-maison    { border-top: 3px solid var(--u-maison); }

/* Le titre d'univers reste lisible même quand le bloc est dans une ligne */
.univers h1 { margin-top: .1rem; }

/* Mode sombre : les couleurs d'univers s'éclaircissent, du texte blanc dessus
   deviendrait illisible. On repasse donc sur un texte sombre. */
[data-theme="dark"] .btn.u-garanties,
[data-theme="dark"] .btn.u-maison { color: #10151f; }
[data-theme="dark"] .btn.ghost.u-garanties { color: var(--u-garanties); }
[data-theme="dark"] .btn.ghost.u-maison    { color: var(--u-maison); }

/* Bloc « Vos droits » de la fiche document.
   Le cas mis en avant est celui où la garantie commerciale est finie mais la
   garantie légale court encore : c'est une bonne nouvelle que le client
   n'attend pas, elle mérite d'être vue. */
.card.droits { margin-bottom: 1rem; }
.card.droits .droits-titre { font-weight: 700; margin: .2rem 0 .35rem; }
.card.droits .droits-corps { margin: 0 0 .5rem; line-height: 1.55; }
.card.droits h2 svg { width: 18px; height: 18px; vertical-align: -3px; }
.card.droits-fort {
  border-top-width: 3px;
  background: var(--u-garanties-doux);
}
.card.droits-fort .droits-titre { color: var(--u-garanties); }

/* ============================================================
   Troisième univers : les contrats, en bleu.
   Orange = garanties, vert = maison, bleu = contrats. La couleur
   ne porte jamais l'information seule : elle double toujours une
   icône et un mot.
   ============================================================ */
:root {
  --u-contrats: #2563eb;
  --u-contrats-doux: #eff6ff;
}
[data-theme="dark"] {
  --u-contrats: #7aa7ff;
  --u-contrats-doux: #16203a;
}
.univers-contrats { border-left-color: var(--u-contrats); }
.tag-contrats { background: var(--u-contrats-doux); color: var(--u-contrats); }
.card.u-contrats { border-top: 3px solid var(--u-contrats); }
.nav button[data-page="contrats"].on,
.mobilenav button[data-page="contrats"].on { color: var(--u-contrats); }
.nav button[data-page="contrats"].on { background: var(--u-contrats-doux); }
.mobilenav button[data-page="contrats"].on .i svg { stroke: var(--u-contrats); }
.btn.u-contrats { background: var(--u-contrats); border-color: var(--u-contrats); color: #fff; }
.btn.ghost.u-contrats { background: transparent; color: var(--u-contrats); border-color: var(--u-contrats); }
[data-theme="dark"] .btn.u-contrats { color: #10151f; }
[data-theme="dark"] .btn.ghost.u-contrats { color: var(--u-contrats); }
.docrow.ligne-contrats { border-left: 3px solid var(--u-contrats); }

/* Pastille d'état d'un contrat : le mot d'abord, la couleur ensuite. */
.etat-contrat {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  padding: .16rem .5rem; border-radius: 999px; white-space: nowrap;
}
.etat-en_cours     { background: var(--u-contrats-doux); color: var(--u-contrats); }
.etat-a_decider    { background: var(--orange-soft); color: var(--orange); }
.etat-dernier_jour { background: #fee2e2; color: #b91c1c; }
[data-theme="dark"] .etat-dernier_jour { background: #3a1717; color: #fca5a5; }
.etat-resiliation_engagee { background: var(--u-contrats-doux); color: var(--u-contrats); }
.etat-sans_echeance { background: var(--bg); color: var(--muted); }
.etat-clos { background: var(--bg); color: var(--muted); }

/* Repère réglementaire affiché sous un contrat : c'est une information, pas un
   conseil, et la mise en forme doit le dire. */
.repere-legal {
  border-left: 3px solid var(--border);
  padding: .5rem .7rem; margin: .6rem 0;
  background: var(--bg); border-radius: 0 8px 8px 0;
  font-size: .84rem; line-height: 1.5; color: var(--text);
}
.repere-legal .src { display: block; margin-top: .3rem; font-size: .74rem; color: var(--muted); }

/* Valeur d'usage : sous la valeur à neuf, plus discrète — c'est une estimation,
   pas le chiffre principal. */
.docrow .usage { font-size: .74rem; color: var(--muted); line-height: 1.3; margin-top: .1rem; }
.docrow .usage .hint { font-size: .72rem; }

/* ============================================================
   Tableau de bord : trois sections, trois blocs distincts.
   Sur grand écran la couleur suffisait à séparer les univers ;
   sur téléphone, où tout s'empile en une colonne, il fallait
   une frontière visible.
   ============================================================ */
.tdb-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  padding: .9rem 1rem 1rem;
  margin-bottom: 1.1rem;
  border-top: 3px solid var(--border);
}
.tdb-garanties { border-top-color: var(--u-garanties); }
.tdb-maison    { border-top-color: var(--u-maison); }
.tdb-contrats  { border-top-color: var(--u-contrats); }

.tdb-head {
  display: flex; align-items: center; gap: .6rem;
  margin: 0 0 .8rem; flex-wrap: wrap;
}
.tdb-head h2 {
  margin: 0; font-size: 1.02rem; display: flex; align-items: center; gap: .45rem;
  flex: 1; min-width: 0;
}
.tdb-head h2 span { white-space: nowrap; }
.tdb-head .btn { flex: none; }
.tdb-section .grid4 { margin-bottom: 0; }

@media (max-width: 720px) {
  /* Deux compteurs par ligne. Empilés un par un, une seule section occupait
     tout l'écran et l'on ne voyait jamais deux univers à la fois — ce qui est
     précisément ce qu'il fallait corriger.
     Le seuil de repli est à 330 px et non 380 : un téléphone courant fait 360
     à 390 px de large, et couper à 380 aurait annulé les deux colonnes sur la
     quasi-totalité des appareils. */
  .tdb-section { padding: .75rem .7rem .8rem; margin-bottom: .9rem; }
  .tdb-section .grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .tdb-section .stat { padding: .6rem .65rem; min-height: 0; }
  .tdb-section .stat .ic { width: 26px; height: 26px; border-radius: 8px; }
  .tdb-section .stat .ic svg { width: 15px; height: 15px; }
  .tdb-section .stat .k { font-size: 1.25rem; line-height: 1.15; }
  .tdb-section .stat .t { font-size: .72rem; line-height: 1.25; }
  .tdb-section .stat .d, .tdb-section .stat .s { font-size: .66rem; line-height: 1.25; }
  .tdb-head { margin-bottom: .6rem; }
  .tdb-head h2 { font-size: .95rem; }
  .tdb-head .btn.sm { padding: .3rem .6rem; font-size: .76rem; }
}
@media (max-width: 330px) {
  .tdb-section .grid4 { grid-template-columns: 1fr; }
}

/* Compteurs-filtres en tête de « Mes garanties ».
   Plus compacts que ceux du tableau de bord : ici ils servent à filtrer, pas à
   raconter. Le filtre actif est encadré pour qu'on sache toujours pourquoi la
   liste est courte. */
.minitdb { margin-bottom: 1rem; }
.minitdb .stat { padding: .6rem .75rem; cursor: pointer; border: 2px solid transparent; }
.minitdb .stat .k { font-size: 1.3rem; }
.minitdb .stat .t { font-size: .74rem; }
.minitdb .stat.on { border-color: currentColor; }
.minitdb .stat.green.on  { border-color: var(--green); }
.minitdb .stat.orange.on { border-color: var(--orange); }
.minitdb .stat.red.on    { border-color: var(--red); }
@media (max-width: 720px) {
  .minitdb { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .minitdb .stat { padding: .55rem .6rem; }
  .minitdb .stat .k { font-size: 1.2rem; }
}

/* Zone de dépôt compacte, pour joindre un contrat depuis une fenêtre. */
.dropzone.sm { padding: 1rem .8rem; font-size: .88rem; }
.dropzone.sm svg { width: 20px; height: 20px; vertical-align: -4px; }

/* ============================================================
   Lecture d'un contrat par l'IA.
   La citation n'est pas un ornement : c'est ce qui rend le point
   vérifiable. Elle est donc toujours visible, jamais repliée.
   ============================================================ */
.lect-lu {
  display: flex; align-items: flex-start; gap: .5rem; flex-wrap: wrap;
  padding: .6rem .8rem; border-radius: 10px; margin-bottom: 1rem;
  font-size: .88rem; line-height: 1.5;
  background: var(--bg); border: 1px solid var(--border);
}
.lect-lu svg { width: 18px; height: 18px; flex: none; margin-top: .1rem; }
.lect-lu.ok      { background: var(--green-soft); border-color: var(--green); }
.lect-lu.partiel { background: var(--orange-soft); border-color: var(--orange); }
.lect-lu.ko      { background: var(--red-soft); border-color: var(--red); }

.lect-titre {
  font-size: .95rem; margin: 1.2rem 0 .5rem; padding-bottom: .3rem;
  border-bottom: 2px solid var(--border);
}
.lect-cles      { border-color: var(--u-contrats); }
.lect-vigilance { border-color: var(--orange); }
.lect-droits    { border-color: var(--green); }
.lect-absent    { border-color: var(--muted); }

.lect-point { margin: 0 0 .9rem; padding-left: .8rem; border-left: 3px solid var(--border); }
.lect-point.grav-eleve  { border-left-color: var(--red); }
.lect-point.grav-moyen  { border-left-color: var(--orange); }
.lect-point.grav-faible { border-left-color: var(--border); }
.lect-point b { display: block; margin-bottom: .15rem; }
.lect-point p { margin: 0 0 .35rem; line-height: 1.55; }
.lect-point blockquote {
  margin: 0; padding: .45rem .7rem;
  background: var(--bg); border-radius: 8px;
  font-size: .82rem; font-style: italic; color: var(--muted); line-height: 1.5;
}
.lect-point blockquote cite {
  display: block; margin-top: .25rem;
  font-style: normal; font-size: .74rem; opacity: .8;
}
.lect-absent-liste { margin: .3rem 0 0; padding-left: 1.2rem; color: var(--muted); font-size: .86rem; line-height: 1.7; }

/* =====================================================================
   Mes entretiens
   ---------------------------------------------------------------------
   Ces lignes ne réutilisent pas .docrow : sa colonne de droite est
   dimensionnée pour un prix et une date, pas pour un badge suivi d'un
   bouton d'action. Sur 375 px, le texte se retrouvait dans une colonne de
   six caractères de large.
   ===================================================================== */
.entrow {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: .8rem 0; border-top: 1px solid var(--border);
}
.entrow:first-child { border-top: 0; padding-top: .2rem; }
.entrow .main { flex: 1; min-width: 0; }
.entrow .main b { display: block; }
.entrow .hint { font-size: .82rem; }
.entrow .end {
  flex: none; display: flex; align-items: center; gap: .4rem; padding-top: .1rem;
}

/* Sous 640 px, la ligne s'empile : le libellé et son conseil occupent
   toute la largeur, les actions passent dessous, alignées à droite. */
@media (max-width: 640px) {
  .entrow { flex-direction: column; gap: .5rem; }
  .entrow .end { width: 100%; justify-content: flex-end; }
}

/* Un objet en pause reste lisible : on l'atténue sans le rendre gris sur gris. */
.card.en-pause { opacity: .68; }

/* Bandeau « adresse non confirmée » : présent sans être agressif — il annonce
   une limitation, pas une erreur. */
.bandeau-verif {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  background: var(--orange-soft, #fff4e5); border: 1px solid var(--orange, #f59e0b);
  border-radius: 12px; padding: .8rem 1rem; margin-bottom: 1rem; font-size: .9rem;
}
.bandeau-verif > div { flex: 1; min-width: 12rem; }
[data-theme="dark"] .bandeau-verif { background: rgba(245, 158, 11, .12); }

/* Avertissement d'expiration : visible sans bloquer l'écran — on doit pouvoir
   finir de taper une phrase avant de répondre. */
.inact-box {
  position: fixed; z-index: 200; left: 50%; transform: translateX(-50%);
  bottom: calc(1rem + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: .8rem;
  background: var(--card); border: 2px solid var(--orange, #f59e0b);
  border-radius: 14px; padding: .8rem 1rem; font-size: .9rem;
  box-shadow: 0 8px 28px rgba(15, 23, 42, .18);
  max-width: min(94vw, 30rem);
}
@media (max-width: 640px) { .inact-box { bottom: calc(5.4rem + env(safe-area-inset-bottom)); } }
[data-theme="dark"] .inact-box { box-shadow: 0 8px 28px rgba(0, 0, 0, .5); }