/* ============================================================
   Repertoire des dossiers de permis de construire
   Identite : carnet de chantier / plan technique
   ============================================================ */

:root{
    --navy: #1F3A54;
    --navy-deep: #142838;
    --slate: #56697A;
    --paper: #F5F6F3;
    --paper-line: #E3E7E1;
    --ink: #1C2530;
    --amber: #C97A2B;
    --amber-soft: #F1DDBE;
    --ok: #4F8A5B;
    --danger: #B5473D;
    --white: #FFFFFF;
    --radius: 4px;
    --font-display: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'Courier New', ui-monospace, SFMono-Regular, Consolas, monospace;
}

*{ box-sizing: border-box; }

body{
    margin:0;
    font-family: var(--font-body);
    color: var(--ink);
    background:
        linear-gradient(var(--paper-line) 1px, transparent 1px) 0 0/100% 32px,
        var(--paper);
    background-attachment: fixed;
}

a{ color: var(--navy); text-decoration:none; }
a:hover{ text-decoration: underline; }

/* ---------- Topbar ---------- */
.topbar{
    display:flex; align-items:center; justify-content:space-between;
    background: var(--navy-deep);
    padding: 0 28px;
    height: 64px;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.brand{ display:flex; align-items:center; gap:10px; color:#fff; }
.brand:hover{ text-decoration:none; }
.brand-mark{
    font-family: var(--font-mono);
    font-weight:700;
    background: var(--amber);
    color: var(--navy-deep);
    border-radius: 3px;
    padding: 4px 8px;
    letter-spacing: 1px;
    font-size: 13px;
}
.brand-text{ font-family: var(--font-display); font-size: 19px; letter-spacing:.3px; }
.topnav{ display:flex; gap: 22px; }
.topnav a{ color:#CFE0EE; font-size: 14px; padding: 6px 2px; border-bottom: 2px solid transparent; }
.topnav a:hover{ text-decoration:none; color:#fff; }
.topnav a.active{ color:#fff; border-bottom-color: var(--amber); }

/* ---------- Layout ---------- */
.container{ max-width: 1180px; margin: 0 auto; padding: 32px 24px 64px; }
h1{ font-family: var(--font-display); font-size: 28px; margin: 0 0 6px; color: var(--navy-deep); }
h2{ font-family: var(--font-display); font-size: 20px; margin: 0 0 14px; color: var(--navy-deep); }
.subtitle{ color: var(--slate); margin: 0 0 24px; font-size: 14.5px; }
.footer{ text-align:center; color: var(--slate); font-size: 12.5px; padding: 24px 0 40px; }

/* ---------- Toolbar / filters ---------- */
.toolbar{
    display:flex; flex-wrap:wrap; gap: 10px; align-items:flex-end;
    background: var(--white); border: 1px solid var(--paper-line);
    border-radius: var(--radius); padding: 16px; margin-bottom: 22px;
}
.toolbar .field{ display:flex; flex-direction:column; gap:4px; }
.toolbar label{ font-size: 12px; color: var(--slate); font-weight:600; text-transform: uppercase; letter-spacing:.4px; }
.toolbar select, .toolbar input[type=text]{
    padding: 8px 10px; border: 1px solid #C9D0D6; border-radius: var(--radius); font-size: 14px; min-width: 170px;
    font-family: var(--font-body);
}

/* ---------- Buttons ---------- */
.btn{
    display:inline-block; padding: 9px 16px; border-radius: var(--radius);
    border: 1px solid var(--navy); background: var(--navy); color: #fff;
    font-size: 14px; cursor:pointer; font-family: var(--font-body);
}
.btn:hover{ background: var(--navy-deep); text-decoration:none; }
.btn-outline{ background: transparent; color: var(--navy); }
.btn-outline:hover{ background: var(--navy); color:#fff; }
.btn-amber{ background: var(--amber); border-color: var(--amber); color:#fff; }
.btn-amber:hover{ background:#a9631d; }
.btn-danger{ background: var(--danger); border-color: var(--danger); }
.btn-sm{ padding: 5px 10px; font-size: 12.5px; }

/* ---------- Dossier cards (dashboard + recherche) ---------- */
.grid-dossiers{ display:grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; }
.card-dossier{
    background: var(--white); border: 1px solid var(--paper-line); border-radius: var(--radius);
    overflow:hidden; display:flex; flex-direction:column; transition: box-shadow .15s;
}
.card-dossier:hover{ box-shadow: 0 4px 14px rgba(20,40,56,.12); }
.card-thumb{
    height: 150px; background: var(--paper-line) center/cover no-repeat;
    display:flex; align-items:center; justify-content:center; color: var(--slate); font-size: 12px;
    position: relative;
}
.card-body{ padding: 14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.card-num{ font-family: var(--font-mono); font-size: 12px; color: var(--slate); }
.card-title{ font-family: var(--font-display); font-size: 17px; color: var(--navy-deep); margin: 0; }
.card-meta{ font-size: 13px; color: var(--slate); }
.card-footer{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; padding-top: 8px; }

/* ---------- Badges de stade ---------- */
.badge{
    display:inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight:600;
    color: var(--navy-deep); border: 1px solid rgba(0,0,0,.08);
}

/* ---------- Table ---------- */
table.tbl{ width:100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--paper-line); }
table.tbl th, table.tbl td{ padding: 10px 12px; border-bottom: 1px solid var(--paper-line); text-align:left; font-size: 13.5px; }
table.tbl th{ background: #EEF1EE; color: var(--slate); text-transform: uppercase; font-size: 11.5px; letter-spacing:.3px; }
table.tbl tr:hover td{ background:#FAFBF9; }

/* ---------- Forms ---------- */
.form-section{ background: var(--white); border: 1px solid var(--paper-line); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 18px; }
.form-section h2{ border-bottom: 2px solid var(--amber-soft); padding-bottom: 8px; }
.form-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 18px; }
.form-grid.cols-3{ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.field label{ display:block; font-size: 12.5px; font-weight:600; color: var(--slate); margin-bottom: 4px; }
.field input[type=text], .field input[type=number], .field input[type=date],
.field input[type=email], .field input[type=url], .field select, .field textarea{
    width:100%; padding: 8px 10px; border:1px solid #C9D0D6; border-radius: var(--radius);
    font-size: 14px; font-family: var(--font-body); background:#fff;
}
.field textarea{ resize: vertical; min-height: 70px; }
.field.checkbox{ display:flex; align-items:center; gap:8px; }
.field.checkbox label{ margin:0; }
.field.full{ grid-column: 1 / -1; }
.checkbox-row{ display:flex; flex-wrap:wrap; gap: 14px; margin-top:4px; }
.checkbox-row label{ display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:400; color: var(--ink); }
.hint{ font-size: 12px; color: var(--slate); margin-top:3px; }
.owner-block{ border: 1px dashed #C9D0D6; border-radius: var(--radius); padding: 14px; margin-top: 10px; }

.actions-row{ display:flex; gap:10px; justify-content:flex-end; margin-top: 8px; }

/* ---------- Gallery (dossier_view) ---------- */
.gallery{ display:grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }
.gallery figure{ margin:0; background:var(--white); border:1px solid var(--paper-line); border-radius: var(--radius); overflow:hidden; }
.gallery img{ width:100%; height:140px; object-fit:cover; display:block; }
.gallery .doc-icon{ width:100%; height:140px; display:flex; align-items:center; justify-content:center; background:#EEF1EE; color:var(--slate); font-size:12px; text-align:center; padding:10px;}
.gallery figcaption{ padding: 8px 10px; font-size:12px; color: var(--slate); display:flex; justify-content:space-between; gap:6px; align-items:center;}

/* ---------- Detail dossier ---------- */
.detail-header{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:12px; margin-bottom: 18px;}
.detail-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 10px 24px; }
.detail-item dt{ font-size: 11.5px; text-transform:uppercase; color: var(--slate); letter-spacing:.3px; margin-bottom:2px; }
.detail-item dd{ margin:0; font-size: 14.5px; }

/* ---------- Checklist ---------- */
.checklist{ display:flex; flex-direction:column; gap:6px; }
.checklist label{ display:flex; align-items:center; gap:8px; font-size:13.5px; }

/* ---------- Misc ---------- */
.empty-state{ text-align:center; padding: 60px 20px; color: var(--slate); }
.flash{ padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; font-size: 14px; }
.flash-ok{ background:#E4F1E5; color: var(--ok); border:1px solid #BFE0C4; }
.flash-err{ background:#FBE6E3; color: var(--danger); border:1px solid #F2BEB7; }

@media (max-width: 640px){
    .topbar{ flex-direction: column; height: auto; padding: 12px 16px; gap: 8px; }
    .topnav{ gap: 14px; flex-wrap: wrap; justify-content:center; }
}