/* ============ Référens — design system (identique à base.html) ============ */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=Newsreader:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root{
  --paper:#F3F0E8; --paper2:#ECE6D8; --card:#FFFFFF;
  --ink:#181F33; --ink2:#2A3145; --slate:#5C6376; --mute:#8A8FA0;
  --line:#E5DFD0; --line2:#EFEADE; --gold:#9A7C36; --green:#2F5D45;
  --accent:#7A2E2E; --accent-soft:#F4E7E4;
  --green-soft:#E8F0EA;
  --radius:12px; --radius-sm:8px;
  --serif:'Newsreader',Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--paper); color:var(--ink); min-height:100vh;
  -webkit-font-smoothing:antialiased; line-height:1.55; font-size:15px;
}
::selection{background:var(--accent);color:#F3F0E8}
a{color:inherit;text-decoration:none}
.serif{font-family:var(--serif)}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.accent{color:var(--accent)}
.muted{color:var(--slate)}
.tiny{font-size:12.5px}

/* Header */
header.site{position:sticky;top:0;z-index:50;background:rgba(243,240,232,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
header.site .bar{height:68px;display:flex;align-items:center;gap:28px}
.logo{display:flex;align-items:center;gap:11px;cursor:pointer}
.logo .mark{width:32px;height:32px;border:1.5px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center}
.logo .mark i{width:13px;height:13px;border:1.5px solid var(--accent);border-radius:50%;display:block}
.logo .name{font-family:var(--serif);font-size:21px;font-weight:600;letter-spacing:-.01em}
nav.main{display:flex;align-items:center;gap:4px;margin-left:8px}
nav.main a{font-size:14px;color:var(--slate);padding:8px 12px;border-radius:6px}
nav.main a:hover,nav.main a.active{background:var(--paper2);color:var(--ink)}
.spacer{flex:1}
.useractions{display:flex;align-items:center;gap:8px}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#F3F0E8;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:500;padding:10px 18px;border-radius:var(--radius-sm);border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;transition:.15s;font-family:inherit;line-height:1.1}
.btn:hover{opacity:.9}
.btn.ghost{background:none;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink);background:none;opacity:1}
.btn.accent{background:var(--accent);border-color:var(--accent)}
.btn.sm{padding:8px 14px;font-size:13px}
.btn.block{width:100%}
.btn.lg{padding:14px 26px;font-size:15px}
button.link{background:none;border:none;color:var(--accent);cursor:pointer;font:inherit;padding:0;text-decoration:underline}

/* Cards & tags */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border:1px solid var(--line);border-radius:100px;background:var(--card);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.dot{width:6px;height:6px;border-radius:50%;display:inline-block}
.tag{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--slate)}
.badge-cert{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--green);background:#E8F0EA;padding:3px 9px;border-radius:100px}
.badge-cert::before{content:"✓"}

/* Report card — couverture colorée par domaine, titre dedans (base.html) */
.grid{display:grid;gap:18px}
.report-card{display:flex;flex-direction:column;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease;cursor:pointer;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.report-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(24,31,51,.1)}
.report-card .cover{position:relative;height:158px;padding:16px;color:#EDE8DB;display:flex;flex-direction:column}
.report-card .cover-type{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.report-card .cover-title{font-family:var(--serif);font-size:15.5px;line-height:1.22;font-weight:500;margin-top:28px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.report-card .cover-cert{position:absolute;top:12px;right:12px;width:24px;height:24px;border-radius:50%;border:1.5px solid rgba(237,232,219,.85);display:flex;align-items:center;justify-content:center;font-size:11px}
.report-card .body{padding:13px 15px 15px;display:flex;flex-direction:column;gap:11px;flex:1}
.report-card .meta{font-size:11.5px;color:var(--slate)}
.report-card .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center}
.price{font-family:var(--serif);font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}

/* Forms */
label.field{display:block;margin-bottom:16px}
label.field > span{display:block;font-size:13px;font-weight:500;margin-bottom:6px;color:var(--ink2)}
input,select,textarea{width:100%;font-family:inherit;font-size:14px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
textarea{resize:vertical;min-height:90px}
.hint{font-size:12.5px;color:var(--mute);margin-top:4px}
.checkbox{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.checkbox input{width:auto;margin-top:3px}

.alert{padding:12px 15px;border-radius:var(--radius-sm);font-size:14px;margin-bottom:18px}
.alert.err{background:#FBEAEA;border:1px solid #E9C5C5;color:#8A2A2A}
.alert.ok{background:#E8F0EA;border:1px solid #C5DCC9;color:#2F5D45}
.alert.info{background:var(--paper2);border:1px solid var(--line);color:var(--ink2)}

/* Sections */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px}
h1.page{font-family:var(--serif);font-weight:500;font-size:38px;letter-spacing:-.02em;margin:0 0 8px;line-height:1.1}
.lede{font-size:16px;color:var(--slate);max-width:620px;line-height:1.55}

/* Footer */
footer.site{border-top:1px solid var(--line);margin-top:70px;padding:44px 0 50px;background:var(--paper2)}
footer.site .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
footer.site h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);margin:0 0 12px}
footer.site a{display:block;font-size:14px;color:var(--slate);padding:4px 0}
footer.site a:hover{color:var(--ink)}
footer.site .brand{font-family:var(--serif);font-size:20px;font-weight:600;margin-bottom:10px}

.kpis{display:flex;gap:36px;flex-wrap:wrap}
.kpi .n{font-family:var(--serif);font-size:30px;font-weight:600;line-height:1}
.kpi .l{font-size:13px;color:var(--slate);margin-top:4px}

table.data{width:100%;border-collapse:collapse;font-size:14px}
table.data th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--mute);padding:10px 12px;border-bottom:1px solid var(--line)}
table.data td{padding:12px;border-bottom:1px solid var(--line2)}
table.data tr:hover td{background:var(--paper2)}

.countdown{font-variant-numeric:tabular-nums;font-weight:600}
.expired{color:var(--accent)}

@media(max-width:860px){
  nav.main{display:none}
  footer.site .cols{grid-template-columns:1fr 1fr}
  .section-head{flex-direction:column;align-items:flex-start;gap:8px}
  h1.page{font-size:30px}
}

/* ============ Admin shell (sidebar gauche) ============ */
.admin-shell{display:flex;min-height:100vh;align-items:stretch}
.admin-sidebar{width:248px;min-width:248px;background:var(--ink);color:#D9DBE2;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.admin-sidebar .as-brand{display:flex;align-items:center;gap:10px;padding:20px 22px 14px;font-family:var(--serif);font-size:18px;font-weight:600;color:#fff}
.admin-sidebar .as-mark{width:26px;height:26px;border:1.5px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center}
.admin-sidebar .as-mark i{width:9px;height:9px;border:1.5px solid var(--accent);border-radius:50%;display:block}
.admin-sidebar .as-admin-tag{font-family:'Hanken Grotesk',sans-serif;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8A8FA0;font-weight:500}
.admin-sidebar .as-nav{flex:1;padding:6px 12px 18px}
.admin-sidebar .as-cat{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#6B7088;padding:16px 10px 6px;font-weight:600}
.admin-sidebar .as-link{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:13.5px;color:#C4C7D2;margin-bottom:1px;transition:.13s}
.admin-sidebar .as-link:hover{background:rgba(255,255,255,.06);color:#fff}
.admin-sidebar .as-link.active{background:var(--accent);color:#fff}
.admin-sidebar .as-ic{width:18px;text-align:center;font-size:13px;opacity:.85}
.admin-sidebar .as-foot{border-top:1px solid rgba(255,255,255,.08);padding:12px}
.admin-main{flex:1;min-width:0;background:var(--paper)}
.admin-content{max-width:1080px;margin:0 auto;padding:0 32px 60px}
.admin-content .section-head{margin-top:0}
@media(max-width:920px){
  .admin-shell{flex-direction:column}
  .admin-sidebar{width:100%;min-width:0;height:auto;position:static;flex-direction:row;flex-wrap:wrap;overflow:visible}
  .admin-sidebar .as-brand{width:100%}
  .admin-sidebar .as-nav{display:flex;flex-wrap:wrap;gap:2px;padding:0 12px 12px}
  .admin-sidebar .as-cat{width:100%;padding:10px 8px 2px}
  .admin-sidebar .as-foot{border:none}
  .admin-content{padding:0 18px 40px}
}