:root {
  --marine: #1F2D4D;
  --marine-2: #2C3E66;
  --marine-clair: #E7EBF3;
  --corail: #FF6B5B;
  --corail-fonce: #E5503F;
  --fond: #F3F5F9;
  --carte: #FFFFFF;
  --texte: #1B2333;
  --texte-2: #5C667A;
  --bord: #DDE2EB;
  --vert: #2E9E5B;
  --vert-clair: #E3F4EA;
  --orange: #D97F12;
  --orange-clair: #FDF0DD;
  --rouge: #D64545;
  --rouge-clair: #FBE6E6;
  --gris: #8A93A6;
  --rayon: 12px;
  --ombre: 0 1px 3px rgba(20, 30, 55, .08), 0 4px 14px rgba(20, 30, 55, .05);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}
a { color: var(--marine-2); }
h1, h2, h3 { color: var(--marine); line-height: 1.2; }
h1 { font-size: 1.45rem; margin: 0 0 14px; }
h2 { font-size: 1.15rem; margin: 0 0 10px; }
h3 { font-size: 1rem; margin: 0 0 8px; }
.muted { color: var(--texte-2); }
.petit { font-size: .85rem; }
.cache { display: none !important; }

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 30; background: var(--marine); color: #fff;
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  padding-top: calc(10px + env(safe-area-inset-top)); border-bottom: 3px solid var(--corail);
}
.entete .logo { font-weight: 800; letter-spacing: .5px; font-size: 1.05rem; color: #fff; text-decoration: none; }
.entete .logo span { color: var(--corail); }
.entete .espace { flex: 1; }
.pastille-reseau { font-size: .78rem; padding: 3px 9px; border-radius: 99px; background: rgba(255,255,255,.14); white-space: nowrap; }
.pastille-reseau.hors { background: var(--orange); }
.pastille-reseau.attente { background: var(--corail); cursor: pointer; }
.btn-menu { background: none; border: 0; color: #fff; font-size: 1.5rem; padding: 2px 6px; cursor: pointer; line-height: 1; }

.nav { display: none; }
.nav a {
  display: block; padding: 12px 18px; color: var(--texte); text-decoration: none; border-left: 4px solid transparent; font-weight: 500;
}
.nav a.actif { border-left-color: var(--corail); background: var(--marine-clair); color: var(--marine); }
.nav .separateur { border-top: 1px solid var(--bord); margin: 6px 0; }
.nav .qui { padding: 14px 18px 8px; color: var(--texte-2); font-size: .85rem; }
.nav-ouverte .nav {
  display: block; position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; width: 280px; background: #fff;
  box-shadow: 4px 0 20px rgba(0,0,0,.2); overflow-y: auto; padding-top: env(safe-area-inset-top);
}
.voile { display: none; }
.nav-ouverte .voile { display: block; position: fixed; inset: 0; background: rgba(15,22,40,.4); z-index: 35; }

.page { max-width: 980px; margin: 0 auto; padding: 16px 14px 120px; }

@media (min-width: 1000px) {
  .btn-menu { display: none; }
  .nav { display: block; position: fixed; top: 58px; bottom: 0; left: 0; width: 230px; background: #fff; border-right: 1px solid var(--bord); overflow-y: auto; }
  .page { margin-left: 230px; margin-right: auto; padding: 22px 28px 120px; max-width: 1020px; }
  .nav-ouverte .voile { display: none; }
}

/* ---------- Cartes, formulaires ---------- */
.carte { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 16px; margin-bottom: 14px; }
.carte.plate { box-shadow: none; border: 1px solid var(--bord); }
.grille2 { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .grille2 { grid-template-columns: 1fr 1fr; } }
.champ { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.champ > span { font-size: .85rem; color: var(--texte-2); font-weight: 600; }
input[type=text], input[type=password], input[type=date], input[type=time], input[type=number], input[type=search], select, textarea {
  width: 100%; font: inherit; padding: 11px 12px; border: 1px solid var(--bord); border-radius: 10px; background: #fff; color: var(--texte);
  min-height: 46px;
}
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--marine-2); outline-offset: 0; border-color: var(--marine-2); }
.case { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; }
.case input { width: 22px; height: 22px; accent-color: var(--marine); flex: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 600; cursor: pointer;
  border: 0; border-radius: 10px; padding: 11px 18px; min-height: 46px; background: var(--marine); color: #fff; text-decoration: none;
}
.btn:hover { background: var(--marine-2); }
.btn.corail { background: var(--corail); }
.btn.corail:hover { background: var(--corail-fonce); }
.btn.clair { background: var(--marine-clair); color: var(--marine); }
.btn.clair:hover { background: #d9dfeb; }
.btn.danger { background: var(--rouge-clair); color: var(--rouge); }
.btn.lien { background: none; color: var(--marine-2); padding: 6px 8px; min-height: 0; }
.btn.petit { padding: 7px 12px; min-height: 36px; font-size: .9rem; }
.btn.large { width: 100%; }
.btn.grand { font-size: 1.1rem; min-height: 58px; }
.btn:disabled { opacity: .5; cursor: default; }
.barre-btn { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.alerte { padding: 12px 14px; border-radius: 10px; margin-bottom: 12px; background: var(--marine-clair); color: var(--marine); }
.alerte.erreur { background: var(--rouge-clair); color: #9B2C2C; }
.alerte.attention { background: var(--orange-clair); color: #8A4E05; }
.alerte.ok { background: var(--vert-clair); color: #1D6B3D; }

/* ---------- Pastilles couleur ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: .85rem; padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
.badge.vert { background: var(--vert-clair); color: #1D6B3D; }
.badge.orange { background: var(--orange-clair); color: #8A4E05; }
.badge.rouge { background: var(--rouge-clair); color: #9B2C2C; }
.badge.gris { background: #ECEEF2; color: var(--texte-2); }
.badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.badge.sans-point::before { display: none; }

/* ---------- Listes ---------- */
.liste { list-style: none; margin: 0; padding: 0; }
.ligne {
  display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--bord); text-decoration: none; color: inherit;
}
.ligne:last-child { border-bottom: 0; }
a.ligne:hover { background: #FAFBFD; }
.ligne .corps { flex: 1; min-width: 0; }
.ligne .titre { font-weight: 600; color: var(--marine); }
.ligne .sous { font-size: .85rem; color: var(--texte-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-ronde {
  width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; flex: none; font-size: 1.05rem;
}
.note-ronde.vert { background: var(--vert-clair); color: #1D6B3D; }
.note-ronde.orange { background: var(--orange-clair); color: #8A4E05; }
.note-ronde.rouge { background: var(--rouge-clair); color: #9B2C2C; }
.note-ronde.gris { background: #ECEEF2; color: var(--texte-2); font-size: .75rem; }

/* ---------- Saisie de l'audit ---------- */
.section-audit { padding: 0; overflow: hidden; }
.section-audit > header {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--marine); color: #fff; cursor: pointer;
}
.section-audit > header h2 { color: #fff; margin: 0; font-size: 1rem; flex: 1; }
.section-audit > header .compte { font-size: .8rem; background: rgba(255,255,255,.16); padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.section-audit > header .compte.fini { background: var(--vert); }
.section-audit.ferme .points { display: none; }
.section-audit .tout-c { padding: 8px 14px; border-bottom: 1px solid var(--bord); background: #FAFBFD; text-align: right; }
.point { padding: 12px 14px; border-bottom: 1px solid var(--bord); }
.point:last-child { border-bottom: 0; }
.point.nc { background: #FFF7F6; }
.point .libelle { font-weight: 600; }
.point .libelle .bloq { color: var(--rouge); font-size: .75rem; font-weight: 700; margin-left: 6px; text-transform: uppercase; }
.point .aide { font-size: .83rem; color: var(--texte-2); margin-top: 2px; }
.choix { display: grid; grid-template-columns: 1fr 1fr 1fr 46px 46px; gap: 6px; margin-top: 10px; }
.point.cible { animation: clignote 1.6s ease 2; }
@keyframes clignote { 50% { background: var(--orange-clair); } }
.choix button {
  font: inherit; font-weight: 700; border: 2px solid var(--bord); background: #fff; border-radius: 10px; min-height: 46px; cursor: pointer; color: var(--texte-2);
  font-size: .9rem; padding: 4px;
}
.choix button.C.on { background: var(--vert); border-color: var(--vert); color: #fff; }
.choix button.NC.on { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.choix button.SO.on { background: var(--gris); border-color: var(--gris); color: #fff; }
.choix .outil { font-size: 1.1rem; padding: 0; }
.choix .outil.plein { border-color: var(--marine-2); color: var(--marine); }
.photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.vignette { position: relative; width: 78px; height: 78px; border-radius: 8px; overflow: hidden; background: #E8EBF1; }
.vignette img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.vignette button {
  position: absolute; top: 2px; right: 2px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-size: .9rem; line-height: 1;
}
.manque-photo { color: var(--rouge); font-size: .83rem; font-weight: 600; margin-top: 6px; }
.commentaire-point { margin-top: 8px; }
.commentaire-point textarea { min-height: 60px; }

.barre-note {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: #fff; border-top: 1px solid var(--bord);
  box-shadow: 0 -4px 16px rgba(20,30,55,.08); padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px;
}
@media (min-width: 1000px) { .barre-note { left: 230px; } }
.barre-note .note-ronde { width: 46px; height: 46px; }
.barre-note .infos { flex: 1; min-width: 0; font-size: .85rem; color: var(--texte-2); line-height: 1.3; }
.barre-note .infos strong { color: var(--texte); font-size: .95rem; }

/* ---------- Signature ---------- */
.signature { border: 2px dashed var(--bord); border-radius: 10px; background: #fff; position: relative; touch-action: none; }
.signature canvas { display: block; width: 100%; height: 190px; touch-action: none; cursor: crosshair; }
.signature .indic { position: absolute; left: 12px; bottom: 8px; font-size: .8rem; color: var(--gris); pointer-events: none; }
.signature.desactive { opacity: .4; pointer-events: none; }

/* ---------- Vue d'un audit ---------- */
.resume-note { display: flex; align-items: center; gap: 16px; }
.resume-note .grosse { font-size: 2.6rem; font-weight: 800; line-height: 1; }
.resume-note .grosse small { font-size: 1rem; color: var(--texte-2); font-weight: 600; }
.vert-t { color: var(--vert); } .orange-t { color: var(--orange); } .rouge-t { color: var(--rouge); } .gris-t { color: var(--gris); }
.infos-audit { display: grid; grid-template-columns: 1fr; gap: 6px 18px; margin-top: 10px; }
@media (min-width: 640px) { .infos-audit { grid-template-columns: 1fr 1fr; } }
.infos-audit div span { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .4px; color: var(--texte-2); }
.barre-theme { display: grid; grid-template-columns: minmax(120px, 1.3fr) 2fr 56px; gap: 10px; align-items: center; padding: 6px 0; font-size: .92rem; }
.jauge { height: 10px; background: #ECEEF2; border-radius: 99px; overflow: hidden; }
.jauge > i { display: block; height: 100%; border-radius: 99px; }
.jauge > i.vert { background: var(--vert); } .jauge > i.orange { background: var(--orange); } .jauge > i.rouge { background: var(--rouge); }
.etat-point { font-weight: 700; font-size: .85rem; white-space: nowrap; }
.sig-img { max-width: 100%; height: 110px; object-fit: contain; border: 1px solid var(--bord); border-radius: 8px; background: #fff; display: block; }

/* ---------- Tableau de bord ---------- */
.tuiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
@media (min-width: 640px) { .tuiles { grid-template-columns: repeat(4, 1fr); } }
.tuile { background: #fff; border-radius: var(--rayon); box-shadow: var(--ombre); padding: 14px; }
.tuile .valeur { font-size: 1.8rem; font-weight: 800; color: var(--marine); line-height: 1.1; }
.tuile .lib { font-size: .82rem; color: var(--texte-2); }
.repartition { display: flex; height: 12px; border-radius: 99px; overflow: hidden; gap: 2px; background: #fff; margin-top: 8px; }
.repartition i { display: block; height: 100%; }
.tableau { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tableau th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .4px; color: var(--texte-2); font-weight: 600; padding: 8px 6px; border-bottom: 1px solid var(--bord); }
.tableau td { padding: 9px 6px; border-bottom: 1px solid var(--bord); vertical-align: middle; }
.tableau tr:last-child td { border-bottom: 0; }
.defile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tendance.monte { color: var(--vert); font-weight: 700; } .tendance.baisse { color: var(--rouge); font-weight: 700; }
.spark { display: block; }
.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filtres > * { flex: 1 1 150px; }

/* ---------- Éditeur de grille ---------- */
.ed-section { border: 1px solid var(--bord); border-radius: var(--rayon); margin-bottom: 14px; background: #fff; overflow: hidden; }
.ed-section > .tete { background: var(--marine-clair); padding: 12px; display: grid; gap: 8px; grid-template-columns: 1fr 90px auto; align-items: end; }
.ed-section .types { padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 4px 14px; border-bottom: 1px solid var(--bord); font-size: .9rem; }
.ed-section .types .case { padding: 2px 0; }
.ed-point { padding: 10px 12px; border-bottom: 1px solid var(--bord); display: grid; gap: 6px; }
.ed-point .rang { display: flex; gap: 6px; align-items: center; }
.ed-point .rang input { flex: 1; }
.ed-point .options { display: flex; flex-wrap: wrap; gap: 0 16px; font-size: .9rem; }
.ed-point .options .case { padding: 2px 0; }
.ico { border: 1px solid var(--bord); background: #fff; border-radius: 8px; width: 38px; height: 38px; cursor: pointer; font-size: 1rem; flex: none; color: var(--marine); }
.ico:hover { background: var(--marine-clair); }
.ico.rouge { color: var(--rouge); }
.ico:disabled { opacity: .3; cursor: default; }
.barre-enreg { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: #fff; border-top: 1px solid var(--bord); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); display: flex; gap: 10px; align-items: center; box-shadow: 0 -4px 16px rgba(20,30,55,.08); }
@media (min-width: 1000px) { .barre-enreg { left: 230px; } }
.barre-enreg input { flex: 1; }
.modif { color: var(--corail-fonce); font-weight: 600; font-size: .85rem; white-space: nowrap; }

/* ---------- Modale, message ---------- */
.fond-modale { position: fixed; inset: 0; z-index: 60; background: rgba(15,22,40,.5); display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 640px) { .fond-modale { align-items: center; } }
.modale { background: #fff; width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; border-radius: 16px 16px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); }
@media (min-width: 640px) { .modale { border-radius: 16px; } }
.modale .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 90px; z-index: 70; background: var(--marine); color: #fff; padding: 12px 18px;
  border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.25); max-width: 92vw; font-weight: 500;
}
.toast.erreur { background: var(--rouge); }
.zoom { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; }
.zoom img { max-width: 100%; max-height: 100%; }

/* ---------- Connexion ---------- */
.ecran-connexion { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--marine); }
.ecran-connexion .carte { width: 100%; max-width: 400px; }
.ecran-connexion .marque { text-align: center; color: #fff; margin-bottom: 18px; }
.ecran-connexion .marque b { font-size: 1.6rem; letter-spacing: 1px; } .ecran-connexion .marque b span { color: var(--corail); }

.chargement { text-align: center; color: var(--texte-2); padding: 40px 0; }
.vide { text-align: center; color: var(--texte-2); padding: 18px 8px; }

@media print {
  .entete, .nav, .barre-note, .barre-enreg, .btn { display: none !important; }
  .page { margin: 0; padding: 0; }
}