/* ASNAY — application des tenants. Mobile d'abord : navigation en bas sur
 * téléphone, latérale à partir de 900 px. Cibles tactiles de 44 px minimum. */

.app { min-height: 100vh; display: flex; flex-direction: column; }

.barre {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: .75rem;
  padding: .55rem 1rem; background: var(--prune); color: #fff;
  border-bottom: 3px solid var(--rouge);
}
.barre__logo { height: 26px; width: auto; background: #fff; border-radius: 6px; padding: 3px 5px; }
.barre__espace { font-family: var(--titre); font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre__droite { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.barre__nom { font-size: .88rem; opacity: .9; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) { .barre__nom { display: none; } }

.corps { flex: 1; display: flex; }
.nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  display: flex; background: var(--surface); border-top: 1px solid var(--bord);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 56px; color: var(--texte-doux); text-decoration: none; font-size: .78rem; font-weight: 600;
}
.nav a svg { width: 22px; height: 22px; }
.nav a[aria-current="page"] { color: var(--prune); box-shadow: inset 0 3px 0 var(--rouge); }
.contenu { flex: 1; min-width: 0; padding: 1rem 1rem 6rem; max-width: 1100px; margin: 0 auto; width: 100%; }

@media (min-width: 900px) {
  .nav {
    position: sticky; top: 52px; align-self: flex-start; flex-direction: column;
    width: 220px; height: calc(100vh - 52px); border-top: 0; border-right: 1px solid var(--bord); padding: 1rem .6rem;
  }
  .nav a { flex: 0; flex-direction: row; justify-content: flex-start; gap: .7rem; padding: 0 .9rem; border-radius: 8px; font-size: .95rem; min-height: 46px; }
  .nav a[aria-current="page"] { background: var(--prune-100); box-shadow: inset 3px 0 0 var(--rouge); }
  .contenu { padding: 1.5rem 2rem 3rem; }
}

.titre { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.titre h1 { margin: 0; font-size: 1.45rem; }
.titre .bouton { margin-left: auto; }

.carte { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); }
.carte + .carte { margin-top: 1rem; }
.carte__corps { padding: 1rem 1.1rem; }
.carte h2 { font-size: 1.05rem; }

/* ---------- Fil d'Ariane ---------- */
.ariane { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin-bottom: .75rem; font-size: .9rem; }
.ariane a, .ariane span { color: var(--texte-doux); text-decoration: none; padding: .2rem .1rem; }
.ariane a:hover { color: var(--prune); text-decoration: underline; }
.ariane .sep { color: var(--bord-fort); }
.ariane [aria-current] { color: var(--prune); font-weight: 600; }

/* ---------- Listes ---------- */
.liste { list-style: none; margin: 0; padding: 0; }
.liste > li { border-bottom: 1px solid var(--bord); }
.liste > li:last-child { border-bottom: 0; }
.ligne {
  display: flex; align-items: center; gap: .8rem; width: 100%;
  padding: .8rem 1rem; min-height: 60px; background: none; border: 0; font: inherit; color: inherit;
  text-align: left; cursor: pointer; text-decoration: none;
}
.ligne:hover { background: var(--prune-100); }
.ligne__texte { flex: 1; min-width: 0; }
.ligne__titre { display: block; font-weight: 600; color: var(--prune); overflow-wrap: anywhere; }
.ligne__sous { display: block; font-size: .84rem; color: var(--texte-doux); overflow-wrap: anywhere; }
.ligne__fin { display: flex; align-items: center; gap: .5rem; color: var(--texte-doux); font-size: .84rem; white-space: nowrap; }
.chevron { width: 18px; height: 18px; color: var(--bord-fort); flex: none; }
.vide { padding: 2rem 1rem; text-align: center; color: var(--texte-doux); }

.outils { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; align-items: center; }
.outils input[type="search"] { flex: 1 1 240px; }
.bascule { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; color: var(--texte-doux); min-height: 44px; }
.bascule input { width: 18px; height: 18px; min-height: 0; }

.puces { display: flex; flex-wrap: wrap; gap: .3rem; }

/* ---------- Fiche de lieu ---------- */
.definitions { display: grid; grid-template-columns: 140px 1fr; gap: .5rem 1rem; margin: 0; }
.definitions dt { color: var(--texte-doux); font-size: .9rem; }
.definitions dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .definitions { grid-template-columns: 1fr; gap: .1rem; } .definitions dd { margin-bottom: .55rem; } }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 600px) { .grille-2 { grid-template-columns: 1fr; } }

/* ---------- Cases à cocher (rôles, permissions) ---------- */
.cases { display: grid; gap: .35rem; margin-bottom: 1rem; }
.cases label { display: flex; align-items: flex-start; gap: .6rem; padding: .55rem .7rem; border: 1px solid var(--bord); border-radius: 8px; cursor: pointer; }
.cases label:has(input:checked) { border-color: var(--prune-700); background: var(--prune-100); }
.cases input { width: 20px; height: 20px; min-height: 0; margin-top: .1rem; flex: none; }
.cases b { display: block; font-weight: 600; }
.cases small { display: block; color: var(--texte-doux); font-size: .82rem; }
fieldset { border: 0; padding: 0; margin: 0 0 .5rem; }
legend { font-weight: 600; font-size: .9rem; margin-bottom: .4rem; }

/* ---------- Lien d'invitation à transmettre ---------- */
.lien-copie { display: flex; gap: .5rem; margin-top: .5rem; }
.lien-copie input { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; }

/* ---------- Dialogues ---------- */
dialog { border: 0; border-radius: 14px; padding: 0; width: min(560px, calc(100vw - 1.5rem)); max-height: calc(100vh - 2rem); box-shadow: 0 20px 60px rgba(46, 6, 30, .3); }
dialog::backdrop { background: rgba(46, 6, 30, .45); }
.dialogue__corps { padding: 1.25rem; overflow-y: auto; max-height: calc(100vh - 9rem); }
.dialogue__pied { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; padding: .9rem 1.25rem; background: #fbf9fa; border-top: 1px solid var(--bord); }
@media (max-width: 520px) {
  dialog { width: 100vw; max-width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; margin: 0; }
  .dialogue__corps { max-height: calc(100vh - 5rem); }
  .dialogue__pied .bouton { flex: 1; }
}

.lien-discret { background: none; border: 0; padding: .4rem 0; color: var(--prune-700); font: inherit; text-decoration: underline; cursor: pointer; min-height: 44px; }
.centre { text-align: center; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.titre-section { margin: 1.5rem 0 .6rem; }
@media (max-width: 899px) { .toast { bottom: calc(68px + env(safe-area-inset-bottom)); } }
@media (max-width: 520px) {
  dialog[open] { display: flex; flex-direction: column; }
  dialog > form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .dialogue__corps { flex: 1; }
}

/* ---------- Modèles : éditeur ---------- */
.barre-edition {
  position: sticky; top: 52px; z-index: 15; align-items: center;
  background: var(--fond); padding: .6rem 0; margin-bottom: .75rem; border-bottom: 1px solid var(--bord);
}
.barre-edition .statut { margin-right: auto; }
.panneau-problemes:empty { display: none; }
.panneau-problemes { border-left: 4px solid var(--ko); margin-bottom: 1rem; }
.panneau-problemes ul { margin: .25rem 0 .75rem; padding-left: 1.2rem; font-size: .9rem; }
.panneau-problemes h2 { color: var(--ko); }
.bloc-edition { margin-bottom: 1rem; }
.bloc-edition__entete { display: flex; align-items: center; gap: .5rem; padding: .7rem 1.1rem; border-bottom: 1px solid var(--bord); background: #fbf9fa; border-radius: var(--rayon) var(--rayon) 0 0; }
.bloc-edition__entete h2 { margin: 0; font-size: 1rem; }
.ordre { margin-left: auto; display: flex; gap: .15rem; flex-wrap: wrap; }
.ordre .bouton { min-height: 36px; padding: .2rem .55rem; }
.grille-bloc { display: grid; grid-template-columns: 1fr 140px; gap: 0 1rem; }
.grille-question { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 1rem; }
@media (max-width: 520px) { .grille-bloc { grid-template-columns: 1fr; } }
.questions { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .8rem; }
.question-edition { border: 1px solid var(--bord); border-left: 4px solid var(--bleu); border-radius: 8px; padding: .8rem .9rem .2rem; background: #fff; }
.question-edition__entete { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.question-edition__numero { font-family: var(--titre); font-weight: 700; color: var(--prune); }
.question-edition__resume { font-size: .82rem; color: var(--texte-doux); }
.cases-ligne { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-bottom: .6rem; }
.options-edition { margin-bottom: .8rem; }
.options-edition h3 { font-size: .9rem; margin-bottom: .3rem; }
.options-table { display: grid; gap: .4rem; margin-bottom: .5rem; }
.option-ligne { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.option-ligne > input:first-child { flex: 1 1 200px; }
.option-ligne--inactive > input:first-child { color: var(--texte-doux); text-decoration: line-through; }
.option-points { width: 90px !important; flex: none; }
.questions--lecture { list-style: decimal; padding-left: 1.3rem; gap: .5rem; }
.questions--lecture small { display: block; color: var(--texte-doux); font-size: .84rem; }

/* ---------- Modèles : simulateur ---------- */
.simulateur-mise-en-page { display: grid; gap: 1rem; }
@media (min-width: 1100px) {
  .simulateur-mise-en-page { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
  .resultat-score { position: sticky; top: 70px; }
}
.simulateur .carte + .carte { margin-top: 1rem; }
.reponse { border-top: 1px solid var(--bord); padding: .9rem 0 .4rem; margin: 0; }
.reponse legend { font-weight: 600; padding: 0; margin-bottom: .45rem; }
.obligatoire { color: var(--ko); }
.choix { display: grid; gap: .35rem; margin-bottom: .4rem; }
.choix__option { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .45rem .7rem; border: 1px solid var(--bord); border-radius: 8px; cursor: pointer; }
.choix__option:has(input:checked) { border-color: var(--prune-700); background: var(--prune-100); }
.choix__option input { width: 20px; height: 20px; min-height: 0; }
.score-global { font-family: var(--titre); font-size: 2.4rem; font-weight: 700; color: var(--prune); margin: 0; }
.detail-score { list-style: none; margin: 0 0 .9rem; padding: 0; font-size: .88rem; }
.detail-score li { padding: .35rem 0; border-bottom: 1px dashed var(--bord); }
.detail-score small { display: block; color: var(--texte-doux); }

/* ---------- Contrôles : tableau de bord ---------- */
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; margin-bottom: .5rem; }
.tuile { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: .7rem .9rem; border-top: 3px solid var(--bleu); }
.tuile b { display: block; font-family: var(--titre); font-size: 1.6rem; color: var(--prune); line-height: 1.1; }
.tuile span { font-size: .84rem; color: var(--texte-doux); }
.tuile--in_progress { border-top-color: var(--att); }
.tuile--submitted { border-top-color: var(--prune-700); }
.tuile--validated { border-top-color: var(--ok); }
.tuile--expired { border-top-color: var(--ko); }

/* ---------- Planification ---------- */
.choix-lieux { max-height: 320px; overflow-y: auto; margin: .5rem 0; }
.choix-lieux .ligne { min-height: 52px; }
.choix-lieux input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; flex: none; }
.puces--lieux { margin: .3rem 0 .4rem; }
.puce-lieu { display: inline-flex; align-items: center; gap: .2rem; padding: .1rem .2rem .1rem .7rem; border-radius: 999px; background: var(--prune-100); color: var(--prune); font-size: .86rem; font-weight: 600; }
.puce-lieu .bouton { min-height: 30px; padding: 0 .5rem; }

/* ---------- Fiche et formulaire terrain ---------- */
.score-resume { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; }
.score-global--petit { font-size: 1.8rem; }
.formulaire-terrain .carte + .carte { margin-top: 1rem; }
.formulaire-terrain { margin-top: 1rem; }
.reponse__saisie--na { opacity: .45; pointer-events: none; }
.reponse--manquante { border-left: 4px solid var(--ko); padding-left: .7rem; }
.etat-reponse { display: block; min-height: 1.2em; font-size: .8rem; margin-top: .25rem; }
.etat-reponse--ok { color: var(--ok); }
.etat-reponse--ok::before { content: '✓ '; }
.etat-reponse--cours { color: var(--att); }
.etat-reponse--ko { color: var(--ko); font-weight: 600; }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; margin-bottom: .6rem; }
.vignette { margin: 0; border: 1px solid var(--bord); border-radius: 8px; overflow: hidden; background: #fff; }
.vignette img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--fond); }
.vignette figcaption { padding: .35rem .5rem; font-size: .74rem; color: var(--texte-doux); display: grid; gap: 1px; }
.vignette .bouton { width: 100%; min-height: 36px; border-top: 1px solid var(--bord); border-radius: 0; }
.bouton--prise { position: relative; overflow: hidden; }
.entree-fichier { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.bouton--prise:has(.entree-fichier:disabled) { opacity: .55; cursor: not-allowed; }
.galerie-audio { display: grid; gap: .5rem; margin-bottom: .5rem; }
.audio-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.audio-ligne audio { max-width: 100%; }
.reponse--lecture { border-top: 1px solid var(--bord); padding: .7rem 0; }
.reponse--lecture p { margin: .25rem 0 .4rem; }
.barre-soumission { margin-top: 1rem; border-top: 3px solid var(--prune); }
.journal-controle { margin-top: 1rem; }
.journal-controle summary { padding: .9rem 1.1rem; cursor: pointer; font-weight: 600; color: var(--prune); min-height: 44px; }
.journal-evenements { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.journal-evenements li { padding: .45rem 0; border-bottom: 1px dashed var(--bord); }
.journal-evenements small { display: block; color: var(--texte-doux); }

/* ---------- Hors connexion ---------- */
.indicateur-sync {
  min-height: 32px; padding: .2rem .7rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.45);
  background: transparent; color: #fff; font: 600 .78rem var(--corps); cursor: pointer; white-space: nowrap;
}
.indicateur-sync--ok::before { content: '● '; color: #7ee2a8; }
.indicateur-sync--cours::before { content: '● '; color: #ffd166; }
.indicateur-sync--horsligne { background: #fff; color: var(--prune); }
.indicateur-sync--horsligne::before { content: '○ '; }
.indicateur-sync--ko { background: var(--rouge); border-color: var(--rouge); }
.etat-reponse--local { color: var(--bleu-700); }
.etat-reponse--local::before { content: '⬇ '; }
.vignette--locale { border-style: dashed; border-color: var(--bleu-700); }
.bandeaux-locaux .message { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.dispo-hors-ligne { margin-top: .5rem; color: var(--ok); }

/* ---------- Compléments : commentaire et photos justificatives ---------- */
.complements { margin-top: .5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.complements > textarea, .complements > .galerie { flex: 1 1 100%; order: 2; }
.complements .bouton--discret { min-height: 36px; padding: .25rem .5rem; color: var(--prune-700); }
.complement-commentaire { min-height: 70px; width: 100%; }
.galerie--justificatifs { width: 100%; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.complement-lu { margin: .2rem 0 .4rem; padding: .45rem .6rem; background: var(--fond); border-left: 3px solid var(--bleu); border-radius: 4px; }

/* ---------- Rapports PDF ---------- */
.carte--rapports { margin-top: 1rem; }
.titre--carte { margin-bottom: .5rem; }
.titre--carte h2 { margin: 0; }
.liste--rapports .ligne { cursor: default; padding-left: 0; padding-right: 0; }
.liste--rapports .ligne:hover { background: none; }
.liste--rapports .bouton { min-height: 38px; }

/* ---------- Sélection de contrôles (rapport consolidé) ---------- */
.ligne--choix { cursor: pointer; gap: .75rem; }
.ligne--choix input[type="checkbox"] { width: 20px; height: 20px; flex: none; accent-color: var(--prune, #480A2F); }
.ligne--choisie { background: #F6EEF2; }
.ligne--inactive { opacity: .55; cursor: not-allowed; }
.barre-selection {
  position: sticky; bottom: 0; z-index: 15; margin-top: 1rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .85rem 1rem; background: #fff; border: 1px solid #E4DCE1; border-radius: 12px;
  box-shadow: 0 -6px 18px rgba(72, 10, 47, .10);
}
.barre-selection__texte { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.barre-selection__texte span { color: #6B5A64; font-size: .9rem; }
.barre-selection__actions { display: flex; gap: .5rem; }
.outils select { flex: 1 1 180px; width: auto; min-width: 0; }
.outils input[type="date"] { width: auto; min-width: 9.5rem; }
.barre-selection__texte { flex: 1 1 280px; }
@media (max-width: 899px) {
  /* Au-dessus du menu du bas */
  .barre-selection { bottom: calc(64px + env(safe-area-inset-bottom)); padding: .7rem .8rem; }
  .barre-selection__actions { width: 100%; }
  .barre-selection__actions .bouton { flex: 1; }
}
.outils input[type="date"] { min-height: 44px; }