/* La charte du site DJVC : papier, encre, JetBrains Mono. Svarog prend sa
   couleur, l'orange ; la connexion, celle du logo. */
@font-face{font-family:JBMono;font-style:normal;font-weight:400 700;font-display:swap;src:url(/statique/polices/jbmono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:JBMono;font-style:normal;font-weight:400 700;font-display:swap;src:url(/statique/polices/jbmono-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --paper:#EDF1F3; --ink:#101A20; --dim:#5A6B75; --rule:#CED8DD; --card:#F6F8F9;
  --svarog:#C2521C; --sur-svarog:#FFFFFF; --ok:#2F7A4A; --danger:#B3261E;
  --mono:JBMono,ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:clamp(16px,4vw,48px);
}
@media(prefers-color-scheme:dark){
  :root{
    --paper:#0C1317; --ink:#E4EDF1; --dim:#8095A0; --rule:#22323A; --card:#111B20;
    --svarog:#E87A45; --sur-svarog:#0C1317; --ok:#6CC28C; --danger:#F2867C;
  }
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:14px;line-height:1.5}
a{color:inherit}
:focus-visible{outline:2px solid var(--svarog);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad) 64px}

.top{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:18px 0;border-bottom:1px solid var(--rule);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.top b{color:var(--ink)}
.onglets{display:flex;gap:18px}
.onglets a{text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.onglets a:hover{color:var(--ink)}
.onglets a[aria-current]{color:var(--ink);font-weight:700;border-color:var(--svarog)}
.top form{margin-left:auto}

main{padding-top:28px;display:flex;flex-direction:column;gap:32px}
h2{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:400;margin-bottom:12px}
.carte h2{margin:0}

/* La connexion reste sombre quel que soit le thème : le logo argent
   disparaîtrait sur du papier clair. */
.scene{--paper:#07090A; --ink:#E6EBEE; --dim:#8A979E; --rule:rgba(255,255,255,.14); --card:rgba(10,13,15,.72);
  --svarog:#E0242B; --sur-svarog:#FFFFFF; --danger:#FF8A80; color-scheme:dark}
#fond{position:fixed;inset:0;width:100%;height:100%;display:block}
.scene .wrap{min-height:100vh;min-height:100dvh;display:flex;align-items:center;padding-bottom:0}
.scene main{width:100%;padding:32px 0}
/* Positionnée pour passer devant la toile, elle-même positionnée. */
.connexion{position:relative;max-width:380px;margin:0 auto;width:100%}
.marque img{display:block;width:min(260px,72%);height:auto;margin:0 auto 32px}
.connexion form{background:var(--card);border:1px solid var(--rule);padding:24px;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.connexion button.primaire{align-self:stretch}

.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.carte{background:var(--card);border:1px solid var(--rule);padding:20px}
.pile{display:flex;flex-direction:column;gap:14px}
.ligne{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.discret{opacity:.75}

label{display:flex;flex-direction:column;gap:6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
label.case,label.choix{flex-direction:row;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:13px;color:var(--ink)}
input,select,textarea,button,.bouton{font:inherit;font-size:13px;color:var(--ink);background:var(--paper);
  border:1px solid var(--rule);border-radius:0;padding:9px 12px;text-transform:none;letter-spacing:0}
textarea{resize:vertical;width:100%}
input[type=checkbox]{width:16px;height:16px;padding:0;accent-color:var(--svarog)}
button,.bouton{cursor:pointer;text-decoration:none;display:inline-block;white-space:nowrap}
button:hover,.bouton:hover{border-color:var(--ink)}
button.primaire{background:var(--svarog);border-color:var(--svarog);color:var(--sur-svarog);font-weight:700;align-self:flex-start}
button.danger{color:var(--danger)}
button.lien{border:0;background:none;padding:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
button.lien:hover{color:var(--ink)}
button:disabled{opacity:.5;cursor:wait}

fieldset{border:0;display:flex;flex-direction:column;gap:8px}
legend{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.liste{display:flex;flex-direction:column;gap:6px;max-height:280px;overflow:auto;border:1px solid var(--rule);padding:10px}
.choix{border:1px solid var(--rule);padding:8px 10px;background:var(--paper)}
.liste .choix{border:0;padding:2px 0;background:none}
.choix img{border-radius:50%;flex:none}
.choix span{overflow-wrap:anywhere}
.choix small,td small{color:var(--dim);font-size:11px;margin-left:auto}
td small{display:block;margin:2px 0 0}
.eteint{opacity:.5}

table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-weight:400;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  padding:6px 10px 6px 0;border-bottom:1px solid var(--rule)}
td{padding:8px 10px 8px 0;border-bottom:1px solid var(--rule);vertical-align:top}
td.nom,td.texte{overflow-wrap:anywhere;max-width:420px}
td.texte{white-space:pre-line;max-height:4.5em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
td.actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
td.actions .bouton,td.actions button{padding:5px 10px;font-size:12px}

.erreur{color:var(--danger);border-left:3px solid var(--danger);padding:8px 12px;background:var(--card)}
.ok{color:var(--ok);border-left:3px solid var(--ok);padding:8px 12px;background:var(--card)}
.vide{color:var(--dim)}

@media(max-width:640px){
  table,thead,tbody,tr,td{display:block}
  thead{display:none}
  tr{border-bottom:1px solid var(--rule);padding:8px 0}
  td{border:0;padding:2px 0;max-width:none}
  td.actions{justify-content:flex-start;padding-top:6px}
}