/* SocialB5 terrain — saisie sur téléphone / tablette, clair et sombre. */

:root {
  --bleu: #1d4ed8; --bleu-clair: #3b82f6; --bleu-pale: #eff6ff;
  --vert: #16a34a; --ambre: #f59e0b; --rouge: #dc2626; --cyan: #0891b2;
  --fond: #f1f5f9; --surface: #ffffff; --surface-2: #f8fafc;
  --bordure: #e2e8f0; --texte: #0f172a; --texte-2: #475569; --texte-3: #94a3b8;
  --rayon: 12px; --ombre: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0b1220; --surface: #131c2e; --surface-2: #1a2438; --bordure: #253248;
    --texte: #e2e8f0; --texte-2: #94a3b8; --texte-3: #64748b; --bleu-pale: #172554;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fond); color: var(--texte); }
body { font: 16px/1.5 "Segoe UI", Roboto, -apple-system, "Helvetica Neue", Arial, sans-serif; -webkit-tap-highlight-color: transparent; }
body.sans-defilement { overflow: hidden; }
h1, h2, h3 { line-height: 1.25; margin: .2rem 0 .6rem; }
a { color: var(--bleu-clair); }

/* Barre du haut */
.barre {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: .5rem;
  padding: calc(.5rem + env(safe-area-inset-top)) .75rem .5rem; background: linear-gradient(120deg, #1e3a8a, #1d4ed8 60%, #7c3aed); color: #fff;
  box-shadow: 0 2px 8px rgba(15,23,42,.25);
}
.barre-titre { flex: 1; min-width: 0; }
.barre-titre span { display: block; font-weight: 700; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre-titre small { color: #bfdbfe; font-size: .72rem; }
.btn-barre { background: rgba(255,255,255,.14); color: #fff; border: 0; border-radius: 10px; width: 44px; height: 44px; font-size: 1.4rem; cursor: pointer; }
.reseau { width: 10px; height: 10px; border-radius: 50%; }
.reseau.en-ligne { background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.25); }
.reseau.hors-ligne { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,.25); }

main { max-width: 860px; margin: 0 auto; padding: .9rem .9rem calc(6rem + env(safe-area-inset-bottom)); }

/* Cartes */
.carte { display: block; background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 1rem; margin-bottom: .8rem; color: inherit; text-decoration: none; }
a.carte:active { transform: scale(.995); }
.fiche-tete { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.fiche-titre { font-weight: 650; font-size: 1.05rem; margin-top: .3rem; }
.numero { font-family: Consolas, monospace; font-size: .82rem; color: var(--bleu); background: var(--bleu-pale); padding: .1rem .45rem; border-radius: 6px; }
.badge { font-size: .72rem; font-weight: 650; padding: .2rem .55rem; border-radius: 1rem; white-space: nowrap; }
.badge.brouillon { background: #fef3c7; color: #92400e; }
.badge.modifiee { background: #ffedd5; color: #9a3412; }
.badge.envoyee { background: #dcfce7; color: #166534; }
.badge.conflit { background: #fee2e2; color: #991b1b; }
.badge.media { background: #e0f2fe; color: #075985; }
.badge.bloquee { background: #fee2e2; color: #991b1b; white-space: normal; }
.a-envoyer h2 { font-size: 1rem; margin: 0 0 .2rem; }
.ligne-envoi { display: block; padding: .55rem 0; border-top: 1px solid #e5e7eb; color: inherit; text-decoration: none; }
.ligne-envoi-titre { font-weight: 600; }
.ligne-envoi-details { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; }
.progression { height: 6px; background: var(--surface-2); border: 1px solid var(--bordure); border-radius: 1rem; overflow: hidden; margin: .5rem 0 .2rem; }
.progression span { display: block; height: 100%; background: linear-gradient(90deg, var(--bleu-clair), var(--vert)); }
.progression.fine { height: 4px; margin: .25rem 0 0; }
.aide { color: var(--texte-2); font-size: .82rem; }
.centre { text-align: center; }
.vide { text-align: center; color: var(--texte-2); padding: 3rem 1rem; }
.vide-icone { font-size: 2.6rem; margin-bottom: .5rem; }

.bandeau { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .9rem; }

/* Logements du plan de masse : avancement et choix du logement d'une nouvelle fiche */
.avancement .progression { margin: .5rem 0 .3rem; }
.recherche-logement { width: 100%; min-height: 44px; font: inherit; padding: .55rem .8rem; border: 1px solid var(--bordure); border-radius: 10px;
  background: var(--surface); color: var(--texte); margin-bottom: .7rem; }
.logements { padding: .3rem .6rem; }
.logement { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; width: 100%; text-align: left; font: inherit; color: inherit;
  background: none; border: 0; border-bottom: 1px solid var(--bordure); padding: .7rem .3rem; cursor: pointer; }
.logement:last-child { border-bottom: 0; }
.logement-nom { font-weight: 650; }
.logement-etat { font-size: .82rem; color: var(--texte-2); }
.logement.libre .logement-etat { color: var(--vert); }
.logement.local .logement-etat { color: var(--bleu-clair); }
.logement.pris { cursor: default; opacity: .55; }
.logement.universite .logement-nom { font-size: 1.05rem; }
.titre-logements { margin: 1rem 0 .2rem; font-size: 1rem; }

/* Boutons */
.btn { appearance: none; border: 1px solid var(--bleu); background: var(--bleu); color: #fff; font: inherit; font-weight: 600; font-size: .92rem;
  border-radius: 10px; padding: .65rem 1rem; min-height: 44px; cursor: pointer; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.secondaire { background: var(--surface); color: var(--bleu); border-color: var(--bordure); }
.btn.plein { width: 100%; }
.btn-lien { background: none; border: 0; color: var(--bleu-clair); font: inherit; padding: .5rem; cursor: pointer; }
.btn-lien.danger, .btn-icone.danger { color: var(--rouge); }
.btn-icone { background: var(--surface-2); border: 1px solid var(--bordure); border-radius: 8px; width: 36px; height: 36px; cursor: pointer; font-size: 1rem; }
.fab { position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 40; border: 0; border-radius: 2rem; padding: .95rem 1.4rem;
  background: var(--bleu); color: #fff; font: inherit; font-weight: 700; box-shadow: 0 8px 20px rgba(29,78,216,.4); cursor: pointer; }
.actions-ligne { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; align-items: center; }
.actions-pied { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }

/* Connexion */
.connexion { max-width: 420px; margin: 2rem auto; padding: 1.6rem; }
.connexion h1 { font-size: 1.4rem; margin-bottom: .2rem; }
.logo { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; font-weight: 800; color: #fff; font-size: 1.3rem;
  background: linear-gradient(135deg, #1d4ed8, #7c3aed); margin-bottom: 1rem; }
.connexion label, .carte > label { display: block; margin: .8rem 0; font-weight: 600; font-size: .9rem; }
.connexion details { margin: .6rem 0 1rem; font-size: .88rem; }
.message { margin: .6rem 0; font-size: .9rem; }
.message.erreur { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: .55rem .7rem; }
.message.conflit { color: #9a3412; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; padding: .55rem .7rem; }
.carte.conflits { border-left: 4px solid #dc2626; }

/* Champs */
input, select, textarea { width: 100%; font: inherit; color: var(--texte); background: var(--surface); border: 1px solid var(--bordure);
  border-radius: 10px; padding: .6rem .7rem; min-height: 44px; margin-top: .3rem; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--bleu-clair); outline-offset: 0; border-color: transparent; }
input[readonly] { background: var(--surface-2); color: var(--texte-2); }
textarea { resize: vertical; min-height: 84px; overflow: hidden; }

/* Saisie par section */
.etapes { display: flex; gap: .35rem; overflow-x: auto; padding-bottom: .4rem; margin-bottom: .6rem; }
.etape { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; text-decoration: none;
  color: var(--texte-2); background: var(--surface); border: 1px solid var(--bordure); }
.etape.active { background: var(--bleu); color: #fff; border-color: var(--bleu); }
.section-titre { display: flex; align-items: center; gap: .55rem; font-size: 1.15rem; }
.section-num { display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--bleu); color: #fff; font-size: .9rem; font-weight: 700; }
.sections { padding: .3rem; }
.section-lien { display: flex; align-items: center; gap: .7rem; padding: .7rem; border-radius: 10px; color: inherit; text-decoration: none; }
.section-lien + .section-lien { border-top: 1px solid var(--bordure); }
.section-nom { flex: 1; font-weight: 600; }
.section-etat { font-size: .8rem; color: var(--texte-2); }
.section-etat.ok { color: var(--vert); font-weight: 700; }
.section-etat.alerte { color: #fff; background: var(--rouge); border-radius: 50%; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; font-weight: 800; }

.formulaire { padding: .4rem 1rem; }
.question { padding: .85rem 0; border-bottom: 1px dashed var(--bordure); }
.question:last-child { border-bottom: 0; }
.question[hidden] { display: none; }
.question-libelle { display: block; font-weight: 600; font-size: .95rem; }
.lettre { color: var(--bleu); font-weight: 800; margin-right: .25rem; }
.requis { color: var(--rouge); }

.puces { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .45rem; }
.puce { border: 1px solid var(--bordure); background: var(--surface); color: var(--texte); border-radius: 2rem; padding: .5rem .9rem; font: inherit; font-size: .9rem; min-height: 40px; cursor: pointer; }
.puce.active { background: var(--bleu); border-color: var(--bleu); color: #fff; }

.table-lignes { display: grid; gap: .6rem; margin-top: .5rem; }
.ligne-carte { border: 1px solid var(--bordure); border-left: 4px solid var(--bleu-clair); border-radius: 10px; padding: .6rem .7rem; background: var(--surface-2); }
.ligne-titre { font-weight: 650; font-size: .9rem; }
.grille-colonnes { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; margin-top: .3rem; }
.cellule { font-size: .78rem; color: var(--texte-2); font-weight: 600; }
.cellule.large { grid-column: 1 / -1; }
.cellule input, .cellule select, .cellule textarea { color: var(--texte); font-weight: 400; font-size: .95rem; }
.calcul { display: block; margin-top: .3rem; padding: .6rem .7rem; min-height: 44px; border-radius: 10px; background: var(--bleu-pale); color: var(--bleu); font-weight: 700; font-size: .95rem; }

.liste-elements { display: grid; gap: .6rem; margin: .5rem 0; }
.element-carte { border: 1px solid var(--bordure); border-left: 4px solid var(--cyan); border-radius: 10px; background: var(--surface-2); }
.element-tete { display: flex; justify-content: space-between; align-items: center; padding: .45rem .6rem .1rem .8rem; }
.element-corps { padding: 0 .8rem .3rem; }
.element-corps.compact { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); column-gap: .7rem; }
.element-corps .question { padding: .5rem 0; border-bottom: 0; }
.element-corps .question-libelle { font-size: .82rem; color: var(--texte-2); }
.ajouter { width: 100%; border-style: dashed; }

.photos-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .5rem; margin-top: .5rem; }
.photo { position: relative; background: var(--surface-2); border: 1px solid var(--bordure); border-radius: 10px; padding: .3rem; }
.photo img, .vignette-pdf { width: 100%; height: 100px; object-fit: cover; border-radius: 8px; display: block; }
.vignette-pdf { display: grid; place-items: center; background: #fee2e2; color: #b91c1c; font-weight: 800; }
.photo input { min-height: 36px; padding: .35rem .5rem; font-size: .82rem; }
.photo .btn-icone { position: absolute; top: .45rem; right: .45rem; background: rgba(255,255,255,.92); }

.gps-valeur { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; font-family: Consolas, monospace; font-size: .86rem; }
.gps-pastille { width: 12px; height: 12px; border-radius: 50%; background: var(--texte-3); flex: none; }
.gps-pastille.excellent { background: var(--vert); }
.gps-pastille.bon { background: var(--ambre); }
.gps-pastille.faible { background: var(--rouge); }
.signature-apercu { max-width: 280px; width: 100%; background: #fff; border: 1px solid var(--bordure); border-radius: 10px; margin-top: .4rem; }

.navigation { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr; gap: .5rem;
  padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--bordure); box-shadow: 0 -4px 12px rgba(15,23,42,.08); }

/* Modales */
.modale-voile { position: fixed; inset: 0; z-index: 1000; background: rgba(15,23,42,.6); display: grid; place-items: center; padding: .8rem; }
.modale { background: var(--surface); color: var(--texte); border-radius: 16px; padding: 1rem; width: 100%; max-width: 680px; max-height: 96vh; overflow: auto; }
.modale-titre { font-weight: 700; font-size: 1.05rem; margin-bottom: .6rem; }
.modale-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: .8rem; }
.pave-signature { width: 100%; aspect-ratio: 2 / 1; background: #fff; border: 2px dashed var(--bordure); border-radius: 10px; touch-action: none; }
.gps-etat { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.gps-carte { height: 320px; border-radius: 10px; margin-top: .6rem; border: 1px solid var(--bordure); }
.gps-carte.sans-carte { height: auto; padding: .7rem; }
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .6rem; }
.grille-2 label { font-size: .85rem; font-weight: 600; }

.toast { position: fixed; left: 50%; bottom: 5.5rem; transform: translate(-50%, 20px); opacity: 0; transition: .25s; z-index: 2000;
  background: #0f172a; color: #fff; padding: .7rem 1rem; border-radius: 10px; max-width: 92vw; font-size: .9rem; box-shadow: 0 8px 20px rgba(0,0,0,.3); }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.toast.erreur { background: #b91c1c; }
.toast.succes { background: #166534; }

@media (min-width: 700px) {
  .actions-pied { flex-direction: row; flex-wrap: wrap; }
  .navigation { left: 50%; transform: translateX(-50%); max-width: 860px; border-radius: 14px 14px 0 0; }
}