:root{
  --pif2-dark:#123b22;
  --pif2-green:#1e7a34;
  --pif2-mid:#3fa246;
  --pif2-lime:#8ec63f;
  --pif2-accent:#f2c230;
  --pif2-text:#194d27;
  --bg:#eef3ec;
  --card:#ffffff;
  --border:#dbe6da;
  --muted:#6b7d6d;
  --field-bg:#f7faf6;
  --danger:#b3261e;
  --shadow:0 18px 40px -18px rgba(18,59,34,.35);
}
*{box-sizing:border-box;}
body{
  margin:0;font-family:"Segoe UI","Inter",Arial,sans-serif;color:#1c281e;
  background:
    radial-gradient(1100px 500px at 15% -10%, rgba(142,198,63,.18), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(30,122,52,.12), transparent 55%),
    var(--bg);
  min-height:100vh;
}
a{color:var(--pif2-green);text-decoration:none;}
a:hover{text-decoration:underline;}

header.app{
  background:var(--pif2-dark);color:#eafbe7;padding:0 24px;
  display:flex;align-items:center;gap:22px;min-height:56px;box-shadow:var(--shadow);
  flex-wrap:wrap;position:relative;
}
header.app .brand{font-weight:700;letter-spacing:.3px;color:#fff;}
header.app .menu-corps{display:flex;align-items:center;gap:22px;flex:1;min-width:0;}
header.app nav{display:flex;gap:4px;flex:1;flex-wrap:wrap;}
header.app nav a{
  color:#d4ecd0;padding:8px 12px;border-radius:8px;font-size:13.5px;
}
header.app nav a:hover{background:rgba(255,255,255,.1);text-decoration:none;}
header.app nav a.actif{background:var(--pif2-green);color:#fff;}

/* Sous-menu « Référentiel » (<details>/<summary> natifs — pas de JS). */
header.app nav details.nav-dropdown{position:relative;}
header.app nav details.nav-dropdown summary{
  color:#d4ecd0;padding:8px 12px;border-radius:8px;font-size:13.5px;
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:4px;
}
header.app nav details.nav-dropdown summary::-webkit-details-marker{display:none;}
header.app nav details.nav-dropdown summary::after{content:"▾";font-size:9px;opacity:.85;}
header.app nav details.nav-dropdown summary:hover{background:rgba(255,255,255,.1);}
header.app nav details.nav-dropdown summary.actif{background:var(--pif2-green);color:#fff;}
header.app nav details.nav-dropdown[open] summary::after{content:"▴";}
header.app nav .nav-dropdown-menu{
  position:absolute;top:calc(100% + 4px);left:0;z-index:30;min-width:210px;
  background:#fff;border:1px solid var(--border);border-radius:10px;
  box-shadow:var(--shadow);padding:6px;display:flex;flex-direction:column;gap:1px;
}
header.app nav .nav-dropdown-menu a{
  color:var(--pif2-text);padding:8px 10px;border-radius:7px;font-size:13px;white-space:nowrap;
}
header.app nav .nav-dropdown-menu a:hover{background:#f0f6ef;text-decoration:none;}
header.app nav .nav-dropdown-menu a.actif{background:var(--pif2-green);color:#fff;}

header.app .user{font-size:12.5px;color:#bfe0ba;display:flex;gap:10px;align-items:center;flex-shrink:0;}
header.app .user form{margin:0;}
header.app .user button{
  background:transparent;border:1px solid rgba(255,255,255,.35);color:#eafbe7;
  border-radius:7px;padding:5px 10px;cursor:pointer;font-size:12px;
}

/* Menu mobile : case à cocher cachée + étiquette « burger », sans JS. */
.menu-toggle{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
.menu-burger{display:none;}

@media (max-width: 860px){
  header.app{padding:10px 16px;}
  header.app .brand{flex:1;}
  .menu-burger{
    display:flex;align-items:center;justify-content:center;
    width:38px;height:38px;border-radius:8px;font-size:19px;line-height:1;
    background:rgba(255,255,255,.14);color:#fff;cursor:pointer;flex-shrink:0;
    -webkit-tap-highlight-color:transparent;
  }
  header.app .menu-corps{
    display:none;flex:1 0 100%;width:100%;order:3;
    flex-direction:column;align-items:stretch;gap:4px;
    padding:12px 0 14px;
  }
  .menu-toggle:checked ~ .menu-corps{display:flex;}
  header.app nav{flex-direction:column;gap:2px;}
  header.app nav a{padding:13px 14px;font-size:14.5px;}
  header.app nav details.nav-dropdown{position:static;}
  header.app nav details.nav-dropdown summary{padding:13px 14px;font-size:14.5px;}
  header.app nav .nav-dropdown-menu{
    position:static;box-shadow:none;border:none;background:transparent;
    padding:0 0 0 16px;margin-top:2px;
  }
  header.app nav .nav-dropdown-menu a{color:#d4ecd0;padding:11px 14px;font-size:14px;}
  header.app nav .nav-dropdown-menu a:hover{background:rgba(255,255,255,.1);}
  header.app .user{
    flex-direction:column;align-items:stretch;gap:10px;
    margin-top:8px;padding-top:12px;border-top:1px solid rgba(255,255,255,.15);
  }
  header.app .user button{width:100%;padding:11px;font-size:13px;}
}

@media (max-width: 640px){
  main{padding:0 14px;}
  .card{padding:16px;}
  /* Les grilles à 2 colonnes fixes (tableau de bord) passent en 1 colonne ;
     celles en auto-fill(minmax(230px,1fr)) s'y ramènent déjà naturellement. */
  .grid{grid-template-columns:1fr !important;}
  /* !important : ces règles précèdent les déclarations de base (plus bas
     dans le fichier), qui l'emporteraient sinon à spécificité égale. */
  .signatures-2col,.signatures-3col{grid-template-columns:1fr !important;}
  .fiche-imprimable{padding:16px;}
  .fiche-entete{flex-direction:column;}
  .fiche-ref{text-align:left;}
  table.liste{min-width:520px;}   /* défile dans .card plutôt que de tasser les colonnes */
}

body{overflow-x:hidden;}
main{max-width:1180px;margin:26px auto 80px;padding:0 24px;width:100%;}
h1{font-size:21px;color:var(--pif2-dark);margin:0 0 4px;}
.sub{color:var(--muted);font-size:13px;margin:0 0 22px;}

.card{
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:22px;box-shadow:var(--shadow);margin-bottom:20px;
  max-width:100%;overflow-x:auto;    /* tables larges : défilement dans la carte, pas la page */
}
.card h2{margin:0 0 14px;font-size:15px;color:var(--pif2-text);}

.grid{display:grid;gap:14px 20px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;}
.field label{font-size:12.5px;font-weight:600;color:var(--pif2-text);}
.field .aide,.helptext{font-size:11.5px;color:var(--muted);}
.champ,input[type=text],input[type=password],input[type=date],input[type=number],select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:9px;
  background:var(--field-bg);font:inherit;color:inherit;
}
.champ:focus,input:focus,select:focus,textarea:focus{
  outline:2px solid rgba(30,122,52,.35);border-color:var(--pif2-green);
}
.field.obligatoire label::after{content:" *";color:var(--danger);}
.errorlist{margin:4px 0 0;padding:0;list-style:none;color:var(--danger);font-size:12px;}

.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;}
.btn{
  border:0;border-radius:10px;padding:10px 18px;font:inherit;font-weight:600;
  cursor:pointer;background:var(--pif2-green);color:#fff;
}
.btn:hover{background:var(--pif2-dark);text-decoration:none;}
.btn.secondaire{background:#fff;color:var(--pif2-text);border:1px solid var(--border);}
.btn.accent{background:var(--pif2-accent);color:#3a2c00;}

.messages{list-style:none;padding:0;margin:0 0 18px;}
.messages li{
  padding:11px 14px;border-radius:10px;margin-bottom:8px;font-size:13.5px;
  border:1px solid var(--border);background:#fff;
}
.messages li.success{border-color:#bfe3c2;background:#eef8ee;color:#1c5b28;}
.messages li.error{border-color:#e9c6c3;background:#fbeeed;color:var(--danger);}
.messages li.warning{border-color:#efe0b6;background:#fdf6e3;color:#7a5b00;}

table.liste{width:100%;border-collapse:collapse;font-size:13px;}
table.liste th,table.liste td{
  text-align:left;padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:top;
}
table.liste th{color:var(--muted);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;}
table.liste tr:hover td{background:#f4f9f3;}
.chg{color:var(--pif2-green);font-weight:600;}
.chg .fleche{color:var(--muted);}

.kpis{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));margin-bottom:8px;}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:var(--shadow);}
.kpi .n{font-size:24px;font-weight:700;color:var(--pif2-dark);}
.kpi .l{font-size:12px;color:var(--muted);margin-top:2px;}

.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;}
.badge.EN_SERVICE{background:#e7f6e7;color:#1c5b28;}
.badge.SORTI{background:#fdf1dc;color:#7a5b00;}
.badge.REFORME{background:#fbe7e5;color:var(--danger);}

.apercu-code{
  font-family:"Consolas","SF Mono",monospace;font-size:15px;color:var(--pif2-dark);
  background:#f0f6ef;border:1px dashed var(--pif2-mid);border-radius:10px;padding:12px 14px;
}
.pagination{margin-top:16px;font-size:13px;display:flex;gap:12px;align-items:center;}

/* Écran de connexion */
.login-wrap{min-height:calc(100vh - 0px);display:flex;align-items:center;justify-content:center;padding:40px 20px;}
.login-card{max-width:380px;width:100%;}
.login-card .logo{text-align:center;font-weight:800;color:var(--pif2-dark);font-size:20px;margin-bottom:2px;}
.login-card .logo span{color:var(--pif2-mid);}

/* Étiquette 50 x 25 mm */
.etiquette{
  width:50mm;height:25mm;padding:1.5mm;display:flex;gap:2mm;
  align-items:center;background:#fff;
  box-shadow:0 0 0 1px var(--border);   /* repère visuel à l'écran seulement, ne s'imprime pas */
}
.etiquette img{width:21mm;height:21mm;}
.etiquette .txt{font-size:6.4pt;line-height:1.25;overflow:hidden;}
.etiquette .txt .code{font-weight:700;font-size:6.8pt;word-break:break-all;}
/* Logo de la structure (Paramètres › Structure & logo) : 5 mm de haut max,
   au-dessus du code, sans déformer l'image. */
.etiquette .txt img.logo{width:auto;height:auto;max-height:5mm;max-width:22mm;display:block;margin-bottom:.5mm;object-fit:contain;}

/* Impression en lot : à l'écran, aperçu en grille ; à l'impression, une
   étiquette = une page (le rouleau avance après chaque étiquette). */
.etiquettes-lot{display:flex;flex-wrap:wrap;gap:14px;}
.checkbox-immo{width:16px;height:16px;}
@media print{
  .etiquettes-lot{display:block;}
  .etiquette-page{margin:0;}
  .etiquette-saut{page-break-after:always;break-after:page;}
}
.imprimante-note{
  max-width:640px;font-size:12.5px;line-height:1.6;color:var(--pif2-text);
  background:#eef6ec;border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;margin-bottom:18px;
}
.imprimante-aide{max-width:640px;margin-top:18px;font-size:13px;}
.imprimante-aide summary{cursor:pointer;color:var(--pif2-green);font-weight:600;}
.imprimante-aide ol{margin:10px 0 0;padding-left:20px;line-height:1.7;color:#1c281e;}
/* ---- Zone de signature manuscrite ---- */
.btn.petit{padding:5px 10px;font-size:12px;}
.signature-bloc{border:1px solid var(--border);border-radius:10px;padding:12px;background:#fff;}
.signature-titre{font-size:12.5px;color:var(--pif2-text);margin-bottom:8px;}
.sig-pad{border:1px dashed var(--pif2-mid);border-radius:8px;background:var(--field-bg);padding:6px;}
.sig-pad canvas{display:block;width:100%;height:180px;background:#fff;border-radius:6px;touch-action:none;cursor:crosshair;}
.sig-outils{display:flex;gap:10px;align-items:center;margin-top:6px;flex-wrap:wrap;}
.signature-rendu{margin-top:10px;}
.signature-img{max-height:90px;border-bottom:1px solid #333;}
.signature-ligne-vide{height:64px;border-bottom:1px solid #333;}
.signature-legende{font-size:11px;color:var(--muted);margin-top:3px;}
.signatures-2col{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.signatures-3col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;}
.signatures-3col .signature-bloc{height:100%;}
.logo-apercu{max-height:90px;max-width:260px;border:1px solid var(--border);border-radius:8px;padding:6px;background:#fff;}

/* ---- Fiche imprimable (inventaire, transfert, état) ---- */
.fiche-imprimable{background:#fff;border:1px solid var(--border);border-radius:12px;padding:24px;max-width:900px;margin:0 auto 20px;color:#111;overflow-x:auto;}
.fiche-entete{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid var(--pif2-dark);padding-bottom:10px;margin-bottom:14px;gap:16px;}
.fiche-entete-gauche{display:flex;align-items:center;gap:14px;}
.fiche-logo{max-height:52px;max-width:140px;object-fit:contain;}
.fiche-titre{font-size:16px;font-weight:800;color:var(--pif2-dark);letter-spacing:.5px;}
.fiche-soustitre{font-size:12px;color:var(--muted);}
.fiche-ref{font-size:12px;text-align:right;line-height:1.6;}
.fiche-section{background:var(--pif2-dark);color:#fff;font-size:12px;font-weight:700;padding:5px 10px;border-radius:6px;margin:16px 0 8px;letter-spacing:.4px;}
table.fiche-tab{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:6px;}
table.fiche-tab th,table.fiche-tab td{border:1px solid #c8d3c6;padding:6px 9px;text-align:left;vertical-align:top;}
table.fiche-tab th{background:#eef4ec;color:var(--pif2-text);font-weight:600;width:150px;white-space:nowrap;}
table.fiche-tab.liste th{width:auto;}
table.fiche-tab .total td{background:#f3f8f2;}
.fiche-engagement{font-size:12px;line-height:1.6;border:1px solid #c8d3c6;border-radius:8px;padding:10px 12px;background:#fbfdfa;margin:12px 0;}
.fiche-pied{margin-top:20px;font-size:10.5px;color:var(--muted);text-align:center;border-top:1px solid var(--border);padding-top:8px;}
.print-only{display:none;}

@media print{
  header.app,main .noprint,.actions,.sig-pad,.sig-outils{display:none!important;}
  body{background:#fff;}
  main{margin:0;padding:0;max-width:none;}
  .card{box-shadow:none;border:none;padding:0;}
  .fiche-imprimable{border:none;border-radius:0;padding:0;max-width:none;}
  .etiquette{box-shadow:none;}
  .print-only{display:block;}
  .signatures-2col,.signatures-3col{page-break-inside:avoid;}
  .signatures-3col{gap:10px;}
  a[href]{color:#000;text-decoration:none;}
}

/* ---- Manuel utilisateur ---- */
.manuel-toc ol{columns:2;column-gap:28px;margin:0;padding-left:20px;}
.manuel-toc li{break-inside:avoid;margin-bottom:4px;}
#s1,#s2,#s3,#s4,#s5,#s6,#s7,#s8,#s9,#s10,#s11,#s12,#s13{scroll-margin-top:16px;}
.manuel-code{
  background:var(--field-bg);border:1px solid var(--border);border-radius:8px;
  padding:12px 14px;font-size:12.5px;line-height:1.6;overflow-x:auto;
}
code{background:var(--field-bg);border-radius:4px;padding:1px 5px;font-size:.93em;}
.manuel-code code{background:none;padding:0;}

@media (max-width: 640px){
  .manuel-toc ol{columns:1;}
}