/* ============================================================
   THÈME v5.3.1 — Palette logo Neuville (marine / turquoise) (fin du doré-beige)
   Surcharge chargée APRÈS la feuille principale.
   Limitée à l'écran : l'impression reste inchangée.
   ============================================================ */
@media screen {

/* ---------- 1. Palette ---------- */
:root{
  /* fondations froides */
  --bg:#eef5f6;
  --paper:#ffffff;
  --ink:#1d2735;
  --muted:#64748b;
  --line:#e2e8f0;
  --shadow:0 1px 2px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.07);
  /* ⚠ détournement volontaire des variables historiques :
     tout ce qui était doré devient bleu, l'anthracite devient marine */
  --gold:#2a8f88;          /* accent principal : bleu */
  --anthracite:#16314f;    /* titres / fonds sombres : bleu marine */
  --accent-yellow:#57c4bc; /* accent secondaire : jaune */
  --radius-s:10px;
  --radius-m:14px;
  --radius-l:18px;
}
body{
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* ---------- 2. Barre du haut : bleu marine, liseré jaune ---------- */
.topbar{
  background:linear-gradient(120deg,#16314f 0%,#1f5f6e 100%);
  border-bottom:3px solid var(--accent-yellow);
  padding:12px 22px;
  box-shadow:0 4px 18px rgba(10,25,47,.18);
}

/* ---------- 3. Menu latéral ---------- */
.sidebar{border-right:1px solid var(--line);box-shadow:none;padding:14px 10px}
.nav-item{border-left:none;border-radius:var(--radius-s);margin:2px 0;padding:11px 14px}
.nav-item:hover{background:#2a8f8812}
.nav-item.active{
  background:#2a8f881a;
  color:#16314f;
  box-shadow:inset 3px 0 0 var(--accent-yellow);
  border-left:none;
}

/* ---------- 4. Espace & titres ---------- */
.main{padding:30px 34px}
.page-header{margin-bottom:24px}
.page-title{font-size:24px;letter-spacing:-.015em;color:#16314f}
.page-subtitle{font-size:13.5px;margin-top:4px}

/* ---------- 5. Cartes ---------- */
.card{border-radius:var(--radius-m);padding:22px;border:1px solid var(--line);box-shadow:var(--shadow)}

/* ---------- 6. Boutons ---------- */
.btn{border-radius:var(--radius-s);padding:10px 18px;transition:transform .12s,box-shadow .12s,background .12s}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(15,23,42,.12)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn:focus-visible{outline:2px solid var(--accent-yellow);outline-offset:2px}

/* ---------- 7. Formulaires ---------- */
input[type=text],input[type=email],input[type=tel],input[type=number],
input[type=date],input[type=datetime-local],input[type=time],
input[type=password],input[type=search],select,textarea{
  border:1px solid #cbd5e1;border-radius:var(--radius-s);
  padding:10px 12px;background:#fff;
  transition:border-color .12s,box-shadow .12s;
}
input:focus,select:focus,textarea:focus{
  border-color:#2a8f88;box-shadow:0 0 0 3px rgba(37,99,235,.16);outline:none;
}
/* Flèche de déroulement visible sur tous les menus déroulants (iPhone compris) */
select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232a8f88' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:14px;
  padding-right:36px;cursor:pointer;
}
label{color:#475569}

/* ---------- 8. Tableaux ---------- */
table{border-collapse:separate;border-spacing:0}
th{
  background:#eef2f8 !important;color:#64748b;
  font-size:11.5px;letter-spacing:.06em;padding:11px 12px;
  border-bottom:1px solid var(--line) !important;
}
td{padding:11px 12px;border-bottom:1px solid #eef1f6}
tbody tr{transition:background .1s}
tbody tr:hover{background:#f3f7ff}

/* ---------- 9. Modales ---------- */
.modal-bg{background:rgba(10,18,32,.45);backdrop-filter:blur(3px)}
.modal{border-radius:var(--radius-l);box-shadow:0 24px 70px rgba(10,18,32,.30)}
.modal-header{padding:18px 22px}
.modal-title{font-size:18px;letter-spacing:-.01em;color:#16314f}

/* ---------- 10. Badges ---------- */
.badge,.pill,.tag{border-radius:999px}

/* ---------- 11. Vestiges beiges/dorés codés en dur ---------- */
.nav-item:hover{background:#2a8f8812 !important}
.nav-item.active{background:#2a8f881a !important}

/* ---------- 12. Barres de défilement ---------- */
*{scrollbar-width:thin;scrollbar-color:#c3cede transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:#c8d2e0;border-radius:8px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

/* ---------- 13. Tablette ---------- */
@media (max-width:1024px){
  .main{padding:22px 20px}
  .card{padding:18px}
}

/* ---------- 14. Mobile ---------- */
@media (max-width:640px){
  .main{padding:16px 14px}
  .card{padding:16px;border-radius:var(--radius-s)}
  .page-title{font-size:20px}
  .modal{border-radius:var(--radius-m)}
  th,td{padding:9px 8px}
}

} /* fin @media screen */

/* ============================================================
   v5.9.1 — Fiches (aperçu + PDF + impression) : mise en page.
   Règles NON préfixées @media (s'appliquent écran + impression + html2canvas).
   PAS de @page ici (l'app injecte déjà le sien — un doublon = page blanche).
   ============================================================ */
.preview-page{ font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; color:#213040; line-height:1.5; }
.preview-header{ text-align:left; padding:0 0 3mm; margin-bottom:4mm; border-bottom:3px solid #57c4bc; }
.preview-header-commune{ font-size:8.5pt; letter-spacing:.16em; color:#16314f; font-weight:700; text-transform:uppercase; }
.preview-header-title{ font-size:18pt; font-weight:800; color:#16314f; margin-top:1mm; line-height:1.15; }
.preview-header-subtitle{ font-size:10pt; color:#5b6b7f; font-style:normal; margin-top:1mm; }
.preview-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:2.5mm; margin:3mm 0; }
.preview-grid-item{ padding:1.6mm 3mm; background:#f3f7fc; border-left:3px solid #2a8f88; border-radius:0 4px 4px 0; page-break-inside:avoid; break-inside:avoid; }
.preview-grid-label{ font-size:7.8pt; letter-spacing:.05em; color:#5b6b7f; text-transform:uppercase; margin-bottom:.3mm; }
.preview-grid-value{ font-size:10.5pt; font-weight:600; color:#16314f; }
.preview-page h2{ font-size:11.5pt; color:#16314f; font-weight:700; border-left:4px solid #57c4bc; padding-left:8px; margin:5mm 0 2mm; page-break-after:avoid; break-after:avoid; }
.preview-page p{ margin:2mm 0; }
.preview-page table{ width:100%; border-collapse:collapse; font-size:9.5pt; margin:2mm 0; }
.preview-page th{ background:#16314f; color:#fff; padding:5px 8px; text-align:left; font-size:8.5pt; text-transform:uppercase; }
.preview-page td{ border-bottom:1px solid #e2e8f0; padding:5px 8px; }
.preview-page tbody tr:nth-child(even) td{ background:#f6f9fd; }
.preview-photos{ display:grid; grid-template-columns:repeat(3,1fr); gap:2mm; margin:3mm 0; }
.preview-photos img{ width:100%; border-radius:4px; border:1px solid #e2e8f0; }
.preview-footer{ margin-top:5mm; padding-top:2.5mm; border-top:1px solid #cdd7e3; font-size:8.5pt; color:#5b6b7f; text-align:center; font-style:normal; }

@media print{
  .preview-grid-item, .preview-page table, .preview-page tr, .preview-photos{ page-break-inside:avoid; break-inside:avoid; }
  .preview-grid-item, .preview-page th{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}
/* v5.11.0 — Masquer le fil d'Ariane */
.breadcrumb-bar{display:none !important;}

/* v5.11.0 — Étiquettes QR : photo à gauche du QR + rendu Dymo */
.qr-label-row{ display:flex; align-items:center; justify-content:center; gap:6px; }
.qr-label .qr-photo{ width:38px; height:38px; object-fit:cover; border-radius:4px; flex-shrink:0; border:1px solid #ddd; }
.qr-label-row canvas{ flex-shrink:0; }
@media print{
  .qr-label .qr-photo{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* v5.13.1 — Étiquettes QR : contenu adaptatif (jamais tronqué en fin de ligne) */
.qr-label{ box-sizing:border-box; overflow:hidden; }
.qr-label-row{ display:flex; align-items:center; justify-content:center; gap:5px; max-width:100%; box-sizing:border-box; flex-wrap:nowrap; }
.qr-label-row canvas{ max-width:60%; height:auto !important; }
.qr-label .qr-photo{ height:auto !important; width:auto !important; max-width:34% !important; max-height:100%; object-fit:contain; }
.qr-label .name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.qr-label .code{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }

/* v5.13.2 — Étiquettes QR : planches paginées + en-tête masqué à l'impression */
.qr-page{ page-break-inside:auto; }
@media print{
  .page-header{ display:none !important; }
  .no-print{ display:none !important; }
  .qr-sheet{ margin-top:0 !important; padding:0 !important; border:none !important; }
  .qr-page{ page-break-after:always; break-after:page; }
  .qr-page:last-child{ page-break-after:auto; break-after:auto; }
  .qr-label{ page-break-inside:avoid; break-inside:avoid; }
}

/* v5.16.2 — Scanner QR : zone caméra carrée */
#qr-reader-container{ width:min(86vw,380px) !important; max-width:380px; aspect-ratio:1 !important; margin:0 auto !important; border-radius:12px; overflow:hidden; }
#qr-reader-container video{ width:100% !important; height:100% !important; object-fit:cover !important; }
#qr-reader-container > div{ width:100% !important; height:100% !important; }

/* v5.59 — Badge logo du tableau de bord : agrandi, responsive mobile (évite le chevauchement) */
@media (max-width: 700px){
  .dash-logo-badge{ top:10px !important; right:10px !important; transform:none !important; padding:7px 10px !important; border-radius:12px !important; box-shadow:0 4px 14px rgba(0,0,0,.22) !important; }
  .dash-logo-img{ height:44px !important; }
}
@media (max-width: 420px){
  .dash-logo-img{ height:36px !important; }
}