/* OrluBoard — style BD sombre teinté (même charte qu'OrluHub / OrluRoad / OrluCore 3.6) */
:root {
  color-scheme: dark;
  --encre: #0a0c12; --fond: #161b2b; --fenetre: #1d2438; --case: #29314f; --case-2: #333c60; --rail: #10141f;
  --creme: #f5eddb; --creme-2: #b9b3a5; --creme-3: #8a8578;
  --accent: #ffb85c; --ok: #8fe0a6; --bug: #ff7b6b; --bleu: #9ec2ff; --violet: #c9a7ff; --jaune: #ffe08a;
  --f-titre: "Roboto Condensed", "Arial Narrow", sans-serif; --f-texte: "Roboto", "Segoe UI", system-ui, sans-serif;
  --f-mono: "Roboto Mono", Consolas, monospace; --f-marker: "Permanent Marker", "Comic Sans MS", cursive;
  --ombre: 4px 4px 0 var(--encre); --ombre-p: 2px 2px 0 var(--encre); --barre-h: 56px; --rail-l: 252px;
  --trame: radial-gradient(rgba(245,237,219,.05) 1px, transparent 1.4px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fond); color: var(--creme); font: 14px/1.45 var(--f-texte); overflow: hidden; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
::selection { background: var(--accent); color: var(--encre); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--case-2); border: 3px solid transparent; background-clip: padding-box; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background-color: #47517a; }
::-webkit-scrollbar-track { background: transparent; }
kbd { font: 500 11px var(--f-mono); background: var(--case); border: 1px solid var(--encre); border-bottom-width: 2px; border-radius: 3px; padding: 1px 5px; color: var(--creme-2); }
code { font: 13px var(--f-mono); background: var(--rail); border: 1px solid var(--encre); padding: 1px 5px; border-radius: 3px; }
.ico { flex: none; display: block; }
.ico-vide { width: 15px; flex: none; }
.tronque { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.emoji { font-size: 16px; line-height: 1; }
.emoji.grand { font-size: 26px; }
.emoji.titre { font-size: .9em; }
.chargement { padding: 40px; color: var(--creme-3); }

/* ---------- Barre du haut ---------- */
.barre { position: fixed; inset: 0 0 auto 0; height: var(--barre-h); z-index: 30; display: flex; align-items: center; gap: 16px; padding: 0 16px; background: var(--rail); border-bottom: 3px solid var(--encre); }
.marque { display: flex; align-items: center; gap: 9px; font: 700 20px var(--f-titre); color: var(--creme); text-decoration: none; flex: none; }
.marque img { width: 32px; height: 32px; }
.marque b { font-family: var(--f-marker); font-weight: 400; color: var(--accent); transform: rotate(-4deg); display: inline-block; margin-left: 1px; }
.recherche { flex: 1; max-width: 520px; display: flex; align-items: center; gap: 8px; background: var(--fenetre); border: 2px solid var(--encre); border-radius: 3px; padding: 0 10px; height: 36px; color: var(--creme-3); }
.recherche:focus-within { border-color: var(--accent); color: var(--creme); }
.recherche-champ { flex: 1; min-width: 0; background: none; border: 0; outline: 0; height: 100%; }
.recherche-champ::placeholder { color: var(--creme-3); }
.barre-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.btn-barre { display: flex; align-items: center; gap: 7px; color: var(--creme-2); text-decoration: none; font: 700 13px var(--f-titre); text-transform: uppercase; letter-spacing: .05em; padding: 7px 10px; border-radius: 3px; border: 2px solid transparent; }
.btn-barre:hover { color: var(--creme); background: var(--fenetre); border-color: var(--encre); }
.barre-btn { position: relative; width: 38px; height: 38px; border-radius: 3px; display: grid; place-items: center; color: var(--creme-2); border: 2px solid transparent; background: none; }
.barre-btn:hover { color: var(--creme); background: var(--fenetre); border-color: var(--encre); }
.barre .menu-mobile { display: none; }
.pastille-compte { position: absolute; top: -3px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--bug); color: var(--encre); font: 700 11px/14px var(--f-mono); border: 2px solid var(--encre); text-align: center; }
.pastille-compte.statique { position: static; display: inline-block; background: var(--accent); }
.point-direct { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); border: 2px solid var(--encre); box-shadow: 0 0 0 3px rgba(143,224,166,.15); flex: none; }
.point-direct.coupe { background: var(--bug); box-shadow: 0 0 0 3px rgba(255,123,107,.18); animation: clignote 1.2s infinite; }
@keyframes clignote { 50% { opacity: .35; } }
.moi-bouton { border-radius: 50%; display: grid; }
.moi-bouton:hover .avatar { border-color: var(--accent); }

/* ---------- Mise en page ---------- */
.mise { position: fixed; inset: var(--barre-h) 0 0 0; display: grid; grid-template-columns: var(--rail-l) minmax(0, 1fr); }
.rail { background: var(--rail); border-right: 3px solid var(--encre); overflow-y: auto; padding: 12px 10px 28px; display: flex; flex-direction: column; gap: 14px; }
.scene { overflow: auto; position: relative; background-image: var(--trame); background-size: 9px 9px; }
.scene[data-page="t"] { overflow: hidden; background: none; }
.rail-groupe { display: grid; gap: 2px; }
.rail-titre { display: flex; align-items: center; gap: 6px; font: 500 10.5px var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--creme-3); padding: 4px 8px; }
.rail-lien { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 3px; color: var(--creme-2); text-decoration: none; border: 2px solid transparent; min-width: 0; }
.rail-lien:hover { color: var(--creme); background: var(--fenetre); }
.rail-lien.actif { color: var(--creme); background: var(--case); border-color: var(--encre); box-shadow: var(--ombre-p); }
.rail-lien .compte, .compte { margin-left: auto; font: 500 11px var(--f-mono); background: var(--case); color: var(--creme-2); padding: 0 6px; border-radius: 3px; border: 1px solid var(--encre); flex: none; }
.compte.retard { background: var(--bug); color: var(--encre); }
.rail-fond { width: 12px; height: 12px; border-radius: 3px; background: var(--c); border: 2px solid var(--encre); flex: none; }
.rail-extra { margin-left: auto; display: flex; align-items: center; gap: 5px; color: var(--creme-3); }
.rail-extra .compte { margin: 0; }
.rail-espace { display: flex; align-items: center; gap: 2px; padding-right: 2px; }
.rail-espace-nom { flex: 1; display: flex; align-items: center; gap: 8px; padding: 6px 8px; font: 700 13px var(--f-titre); text-transform: uppercase; letter-spacing: .06em; color: var(--creme); text-decoration: none; border-radius: 3px; min-width: 0; }
.rail-espace-nom:hover, .rail-espace-nom.actif { background: var(--fenetre); }
.rail-espace-nom.actif { color: var(--accent); }
.rail-groupe.espace .rail-lien { padding-left: 14px; }
.rail-vide { margin: 2px 0 0 16px; font-size: 12.5px; color: var(--creme-3); }
.rail-ajout { display: flex; align-items: center; gap: 8px; padding: 8px; border: 2px dashed var(--case-2); border-radius: 3px; color: var(--creme-3); font: 700 12px var(--f-titre); text-transform: uppercase; letter-spacing: .06em; }
.rail-ajout:hover { color: var(--accent); border-color: var(--accent); }
.rail-groupe.admin { margin-top: auto; padding-top: 10px; border-top: 2px solid var(--fenetre); }

/* ---------- Boutons et champs ---------- */
.btn { border: 2px solid var(--encre); border-radius: 3px; padding: 8px 13px; font: 700 13px var(--f-titre); text-transform: uppercase; letter-spacing: .05em; box-shadow: 3px 3px 0 var(--encre); background: var(--case); color: var(--creme); display: inline-flex; gap: 7px; align-items: center; justify-content: center; text-decoration: none; transition: transform .08s, box-shadow .08s, background .12s; white-space: nowrap; }
.btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--encre); background: var(--case-2); }
.btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--encre); }
.btn:disabled { opacity: .45; box-shadow: none; }
.btn.principal { background: var(--accent); color: var(--encre); }
.btn.principal:hover:not(:disabled) { background: #ffc677; }
.btn.danger { background: var(--bug); color: var(--encre); }
.btn.danger:hover:not(:disabled) { background: #ff9184; }
.btn.fantome { background: transparent; box-shadow: none; border-color: transparent; color: var(--creme-2); }
.btn.fantome:hover:not(:disabled) { background: var(--case); border-color: var(--encre); box-shadow: none; transform: none; color: var(--creme); }
.btn.petit { padding: 5px 9px; font-size: 12px; box-shadow: var(--ombre-p); }
.btn.gros { padding: 12px 22px; font-size: 16px; }
.btn.plein { width: 100%; }
.btn.actif { border-color: var(--accent); color: var(--accent); }
.btn.discord { background: #5865f2; color: #fff; }
.btn.discord:hover { background: #6d78f5; }
.discord-ico { width: 18px; height: 14px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath d='M20.3 1.5A19.6 19.6 0 0 0 15.4 0l-.6 1.3a18 18 0 0 0-5.6 0L8.6 0a19.6 19.6 0 0 0-4.9 1.5C.6 6.2-.3 10.7.1 15.2A19.8 19.8 0 0 0 6.1 18l1.3-2a12.7 12.7 0 0 1-2-1l.5-.4a14 14 0 0 0 12.2 0l.5.4-2 1 1.3 2a19.7 19.7 0 0 0 6-2.8c.5-5.2-.8-9.7-3.6-13.7zM8 12.4c-1.2 0-2.2-1.1-2.2-2.4S6.8 7.6 8 7.6s2.2 1.1 2.2 2.4-1 2.4-2.2 2.4zm8 0c-1.2 0-2.2-1.1-2.2-2.4s1-2.4 2.2-2.4 2.2 1.1 2.2 2.4-1 2.4-2.2 2.4z'/%3E%3C/svg%3E") center/contain no-repeat; }
.btn-icone { width: 32px; height: 32px; display: inline-grid; place-items: center; border: 2px solid var(--encre); background: var(--case); border-radius: 3px; color: var(--creme-2); flex: none; text-decoration: none; }
.btn-icone:hover:not(:disabled) { color: var(--creme); background: var(--case-2); }
.btn-icone:disabled { opacity: .35; }
.btn-icone.fantome { background: transparent; border-color: transparent; }
.btn-icone.fantome:hover:not(:disabled) { background: rgba(245,237,219,.08); border-color: transparent; }
.btn-icone.mini { width: 24px; height: 24px; border-width: 0; }
.btn-icone.actif { color: var(--accent); }
.btn-rond { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--case); border: 2px dashed var(--case-2); color: var(--creme-2); }
.btn-rond:hover { border-color: var(--accent); color: var(--accent); }
.lien-discret { color: var(--creme-3); font-size: 12.5px; text-decoration: underline; text-underline-offset: 2px; display: inline-flex; align-items: center; gap: 5px; }
.lien-discret:hover:not(:disabled) { color: var(--creme); }
.lien-discret:disabled { opacity: .45; text-decoration: none; }
.lien-discret.danger:hover { color: var(--bug); }
.lien-nu { text-align: left; color: inherit; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.lien-nu:disabled { cursor: default; }
.lien-retour { display: inline-flex; align-items: center; gap: 4px; color: var(--creme-2); font-size: 12.5px; margin-bottom: 6px; }
.champ { width: 100%; background: var(--rail); border: 2px solid var(--encre); border-radius: 3px; padding: 8px 10px; color: var(--creme); min-width: 0; }
.champ:focus { outline: 0; border-color: var(--accent); }
.champ::placeholder { color: var(--creme-3); }
.champ:disabled { opacity: .5; }
.champ.petit { padding: 4px 7px; font-size: 13px; }
.champ.court { width: 76px; }
.champ.grand { font-size: 18px; padding: 11px 14px; }
select.champ { cursor: pointer; }
textarea.champ { resize: vertical; line-height: 1.5; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 16px; height: 16px; flex: none; margin: 0; }
.bloc-champ { display: grid; gap: 6px; min-width: 0; }
.bloc-champ > span:first-child { font: 500 11px var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--creme-2); }
.bloc-champ.inline { display: flex; align-items: center; gap: 10px; }
.pile-champs { display: grid; gap: 14px; }
.deux-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.case, .radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; color: var(--creme-2); }
.radio { align-items: flex-start; padding: 8px; border-radius: 3px; border: 2px solid transparent; }
.radio:has(input:checked) { border-color: var(--encre); background: var(--case); color: var(--creme); }
.radio small { display: block; color: var(--creme-3); font-size: 12px; margin-top: 2px; }
.cases { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.interrupteur { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.interrupteur input { appearance: none; width: 38px; height: 22px; border-radius: 11px; background: var(--case-2); border: 2px solid var(--encre); position: relative; transition: background .15s; cursor: pointer; }
.interrupteur input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--creme-2); transition: transform .15s, background .15s; }
.interrupteur input:checked { background: var(--accent); }
.interrupteur input:checked::after { transform: translateX(16px); background: var(--encre); }
.rangee-boutons { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.rangee-boutons.gauche { justify-content: flex-start; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.actions.gauche { justify-content: flex-start; }
.actions.centre { justify-content: center; }
.aide { color: var(--creme-3); font-size: 12.5px; margin: 0; line-height: 1.5; }
.vide { color: var(--creme-3); font-size: 13px; margin: 4px 0; }
.vide-joli { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 56px 20px; color: var(--creme-2); }
.vide-joli .ico { color: var(--case-2); }
.vide-joli h2 { margin: 0; font: 700 24px var(--f-titre); text-transform: uppercase; color: var(--creme); }
.vide-joli p { margin: 0; max-width: 46ch; }
.vide-joli.petit { padding: 26px 12px; }
.ligne-saisie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ligne-saisie > .champ { flex: 1; }
.puce-info { display: inline-flex; align-items: center; gap: 4px; font: 500 11px var(--f-mono); color: var(--creme-2); background: var(--case); border: 1px solid var(--encre); padding: 1px 6px; border-radius: 3px; white-space: nowrap; }
.puce-role { display: inline-flex; align-items: center; gap: 4px; font: 700 11.5px var(--f-titre); text-transform: uppercase; letter-spacing: .05em; color: var(--encre); background: var(--c, var(--creme-3)); border: 2px solid var(--encre); padding: 1px 7px; border-radius: 3px; white-space: nowrap; }
.pastille { width: 26px; height: 26px; border-radius: 50%; background: var(--c); border: 2px solid var(--encre); flex: none; display: inline-block; }
.pastille.petite { width: 11px; height: 11px; border-width: 1.5px; }
.pastille.choisie { box-shadow: 0 0 0 2px var(--fenetre), 0 0 0 4px var(--creme); }
button.pastille:hover { transform: scale(1.1); }
.nuancier { display: flex; flex-wrap: wrap; gap: 8px; }
.nuancier.grand .pastille { width: 30px; height: 30px; }
.segments { display: inline-flex; border: 2px solid var(--encre); border-radius: 3px; overflow: hidden; background: var(--rail); flex-wrap: wrap; }
.segments button { padding: 5px 11px; font: 700 12px var(--f-titre); text-transform: uppercase; letter-spacing: .04em; color: var(--creme-2); border-right: 2px solid var(--encre); }
.segments button:last-child { border-right: 0; }
.segments button:hover { color: var(--creme); background: var(--case); }
.segments button.actif { background: var(--accent); color: var(--encre); }
.puces { display: flex; flex-wrap: wrap; gap: 6px; }
.puce-filtre { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 2px solid var(--encre); border-radius: 14px; background: var(--case); font-size: 12.5px; color: var(--creme-2); max-width: 100%; }
.puce-filtre:hover { color: var(--creme); }
.puce-filtre.active { background: var(--accent); color: var(--encre); }
.puce-filtre.enregistre { padding: 2px 4px 2px 10px; }
.puce-rapide { font-size: 12px; padding: 4px 9px; border-radius: 3px; background: var(--case); border: 1px solid var(--encre); color: var(--creme-2); }
.puce-rapide:hover { color: var(--encre); background: var(--accent); }
.rapides { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; }
.ligne-date { display: grid; grid-template-columns: auto 70px 1fr; align-items: center; gap: 8px; font-size: 13px; color: var(--creme-2); }
.surtitre { font: 500 11px var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--accent); display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.surtitre.lien:hover { text-decoration: underline; }

/* ---------- Pages ---------- */
.page { max-width: 1240px; margin: 0 auto; padding: 28px 24px 80px; display: grid; gap: 22px; align-content: start; }
.page.etroite { max-width: 860px; }
.titre-page { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.titre-page h1 { margin: 4px 0 0; font: 700 clamp(28px, 4vw, 44px)/1.05 var(--f-titre); text-transform: uppercase; text-wrap: balance; }
.titre-page h1 em, .accueil-tete h1 em { font-family: var(--f-marker); font-weight: 400; font-style: normal; text-transform: none; color: var(--accent); display: inline-block; transform: rotate(-2deg); }
.titre-page p { margin: 8px 0 0; color: var(--creme-2); max-width: 70ch; }
.boite { background: var(--fenetre); border: 3px solid var(--encre); border-radius: 4px; box-shadow: 5px 5px 0 var(--encre); min-width: 0; }
.boite > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px; background: var(--case); border-bottom: 3px solid var(--encre); flex-wrap: wrap; }
.boite > header h2, .boite > header h3 { margin: 0; font: 700 16px var(--f-titre); text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: 6px; }
.boite > header span { font: 12px var(--f-mono); color: var(--creme-2); }
.boite .corps { padding: 16px; display: grid; gap: 12px; }
.bloc-page { display: grid; gap: 12px; }
.bloc-page > h2 { margin: 0; display: flex; align-items: center; gap: 8px; font: 700 18px var(--f-titre); text-transform: uppercase; letter-spacing: .04em; }
.chiffres { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.chiffre { background: var(--case); border: 2px solid var(--encre); padding: 12px; display: grid; gap: 4px; border-radius: 3px; }
.chiffre strong { font: 500 26px/1 var(--f-mono); }
.chiffre span { font-size: 12px; color: var(--creme-2); }

/* Accueil */
.accueil-tete h1 { margin: 6px 0 0; font: 700 clamp(34px, 5vw, 56px)/1 var(--f-titre); text-transform: uppercase; }
.accueil-tete p { margin: 10px 0 0; color: var(--creme-2); font-size: 15px; }
.compteurs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.compteur { background: var(--fenetre); border: 3px solid var(--encre); border-radius: 4px; box-shadow: var(--ombre); padding: 14px 16px; display: grid; gap: 4px; text-decoration: none; color: var(--creme); transition: transform .1s; }
.compteur:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--encre); }
.compteur strong { font: 500 34px/1 var(--f-mono); }
.compteur span { color: var(--creme-2); font-size: 13px; }
.compteur.alerte { background: var(--bug); color: var(--encre); }
.compteur.alerte span { color: var(--encre); }
.vide-accueil { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 40px 20px; background: var(--fenetre); border: 3px dashed var(--case-2); border-radius: 6px; }
.vide-accueil h2 { margin: 0; font: 700 26px var(--f-titre); text-transform: uppercase; }
.vide-accueil p { margin: 0; color: var(--creme-2); max-width: 58ch; }
.vide-accueil-illu { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 6px; }
.vide-accueil-illu span { width: 54px; border: 3px dashed var(--case-2); border-radius: 4px; height: 70px; }
.vide-accueil-illu span:nth-child(2) { height: 46px; border-color: var(--accent); }
.vide-accueil-illu span:nth-child(3) { height: 58px; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.tuile-tableau { position: relative; min-height: 112px; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 3px solid var(--encre); border-radius: 5px; box-shadow: var(--ombre); background: var(--fond); color: var(--creme); text-decoration: none; overflow: hidden; isolation: isolate; transition: transform .1s, box-shadow .1s; }
.tuile-tableau::before { content: ""; position: absolute; inset: 0; background: var(--trame), var(--fond-t, var(--fond)); background-size: 9px 9px, auto; z-index: -1; }
.tuile-tableau::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--c); border-bottom: 2px solid var(--encre); }
.tuile-tableau:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--encre); }
.tuile-tableau strong { font: 700 20px/1.1 var(--f-titre); text-transform: uppercase; margin-top: 2px; padding-right: 26px; }
.tuile-espace { font: 500 10.5px var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--creme-2); margin-top: 4px; }
.tuile-chiffres { margin-top: auto; display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--creme-2); }
.tuile-chiffres b { color: var(--encre); background: var(--bug); padding: 0 6px; border-radius: 3px; font-weight: 500; }
.tuile-favori { position: absolute; top: 14px; right: 12px; color: var(--creme-3); }
.tuile-favori:hover, .tuile-favori.actif { color: var(--accent); }
.tuile-ajout { min-height: 112px; border: 3px dashed var(--case-2); border-radius: 5px; display: grid; place-content: center; justify-items: center; gap: 6px; color: var(--creme-3); font: 700 14px var(--f-titre); text-transform: uppercase; letter-spacing: .05em; }
.tuile-ajout:hover { color: var(--accent); border-color: var(--accent); }
.accueil-deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 24px; align-items: start; }
.espaces-liste { display: grid; gap: 10px; }
.espace-ligne { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--fenetre); border: 3px solid var(--encre); border-radius: 4px; box-shadow: var(--ombre-p); text-decoration: none; color: var(--creme); }
.espace-ligne:hover { border-color: var(--accent); }
.espace-ligne strong { display: block; font: 700 16px var(--f-titre); text-transform: uppercase; }
.espace-ligne small { color: var(--creme-3); font-size: 12px; }
.espace-ligne .compte { margin-left: auto; }
.journal-court { display: grid; gap: 2px; }
.histo { display: flex; gap: 10px; align-items: flex-start; padding: 7px 8px; border-radius: 3px; }
.histo.cliquable { cursor: pointer; }
.histo.cliquable:hover { background: var(--case); }
.histo p { margin: 2px 0 0; font-size: 13px; color: var(--creme-2); line-height: 1.45; }
.histo p strong { color: var(--creme); font-weight: 500; }
.histo small { display: block; color: var(--creme-3); font-size: 11.5px; margin-top: 1px; }
.histo-carte { color: var(--creme-3); }
.acces-resume { margin: -10px 0 0; display: flex; align-items: center; gap: 7px; color: var(--creme-3); font-size: 13px; }
.liste-archives { display: grid; gap: 8px; margin-top: 10px; }
.archive-ligne { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--fenetre); border: 2px solid var(--encre); border-radius: 3px; }
.archive-ligne small { color: var(--creme-3); margin-right: auto; }
.grille-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; align-items: start; }
.groupe-cartes.alerte > h2 { color: var(--bug); }
.items-confies { display: grid; gap: 6px; }
.tache { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--case); border: 2px solid var(--encre); border-radius: 3px; text-align: left; width: 100%; color: var(--creme); }
.tache:hover { border-color: var(--accent); }
.tache small { color: var(--creme-3); margin-left: auto; white-space: nowrap; }
.barre-recherche { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.barre-recherche .champ.grand { flex: 1 1 320px; }
.barre-recherche select.champ { width: auto; }
.extrait-com { margin: 6px 0 0; display: flex; gap: 5px; align-items: flex-start; font-size: 12px; color: var(--creme-3); }
.profil-ident { grid-template-columns: auto 1fr; gap: 24px !important; align-items: start; }
.profil-avatar { display: grid; justify-items: center; gap: 10px; }

/* ---------- Avatars, étiquettes, puces ---------- */
.avatar { border-radius: 50%; border: 2px solid var(--encre); background: var(--av, var(--case)); object-fit: cover; flex: none; display: inline-grid; place-items: center; color: var(--encre); font-family: var(--f-titre); font-weight: 700; line-height: 1; overflow: hidden; }
.avatar.plus { background: var(--case-2); color: var(--creme); font: 500 10px var(--f-mono); }
.pile { display: inline-flex; align-items: center; }
.pile > .avatar:not(:first-child) { margin-left: -7px; }
.etiq { display: inline-flex; align-items: center; max-width: 100%; padding: 1px 8px; min-height: 18px; border-radius: 3px; background: var(--c); color: var(--encre); border: 2px solid var(--encre); font: 700 11.5px/1.2 var(--f-titre); letter-spacing: .03em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etiq.compacte { width: 34px; min-height: 9px; height: 9px; padding: 0; border-width: 1.5px; }
.etiq.grande { padding: 4px 10px; font-size: 12.5px; }
.echeance { display: inline-flex; align-items: center; gap: 4px; font: 500 11.5px var(--f-mono); padding: 1px 6px; border-radius: 3px; border: 1px solid transparent; color: var(--creme-2); white-space: nowrap; }
.echeance.retard { background: var(--bug); color: var(--encre); border-color: var(--encre); }
.echeance.bientot { background: var(--accent); color: var(--encre); border-color: var(--encre); }
.echeance.fait { background: var(--ok); color: var(--encre); border-color: var(--encre); }
.echeance.ok { background: rgba(245,237,219,.07); }
.echeance.mini { font-size: 10.5px; padding: 0 5px; }
.prio-puce { display: inline-flex; align-items: center; gap: 4px; font: 700 11.5px var(--f-titre); text-transform: uppercase; letter-spacing: .04em; color: var(--c); white-space: nowrap; }
.prio-puce .ico { stroke: var(--c); }
.fc-bloc .prio-puce { padding: 4px 10px; background: var(--c); color: var(--encre); border: 2px solid var(--encre); border-radius: 3px; }
.fc-bloc .prio-puce .ico { stroke: var(--encre); }

/* ---------- Tuile de carte ---------- */
.carte { position: relative; display: grid; gap: 6px; padding: 9px 10px; background: var(--case); border: 2px solid var(--encre); border-radius: 4px; box-shadow: var(--ombre-p); cursor: pointer; text-align: left; color: var(--creme); user-select: none; -webkit-user-select: none; touch-action: manipulation; overflow: hidden; }
.carte:hover { border-color: var(--accent); }
.carte:focus-visible { outline-offset: 1px; }
.carte.terminee .carte-titre > span:last-child { color: var(--creme-2); text-decoration: line-through; text-decoration-color: rgba(245,237,219,.35); }
.carte.bloquee { background: repeating-linear-gradient(135deg, var(--case) 0 10px, #2c3352 10px 20px); }
.carte.est-modele { border-style: dashed; }
.carte.trou { opacity: .35; border-style: dashed; box-shadow: none; }
.carte.trou > * { visibility: hidden; }
.couv { margin: -9px -10px 0; height: 30px; border-bottom: 2px solid var(--encre); }
.couv.image { height: auto; max-height: 160px; background: var(--rail); display: grid; place-items: center; overflow: hidden; }
.couv.image img { width: 100%; max-height: 160px; object-fit: cover; display: block; }
.carte-lieu { font: 500 10.5px var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--creme-3); }
.etiqs { display: flex; flex-wrap: wrap; gap: 4px; }
.carte-titre { display: flex; gap: 7px; align-items: flex-start; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.coche-rapide { width: 18px; height: 18px; margin-top: 0; border-radius: 50%; border: 2px solid var(--creme-3); display: grid; place-items: center; color: transparent; flex: none; width: 0; opacity: 0; transition: width .12s, opacity .12s, margin .12s; margin-right: -7px; overflow: hidden; }
.carte:hover .coche-rapide, .coche-rapide.faite, .carte:focus-within .coche-rapide { width: 18px; opacity: 1; margin-right: 0; }
.coche-rapide:hover { border-color: var(--ok); color: var(--ok); }
.coche-rapide.faite { background: var(--ok); border-color: var(--encre); color: var(--encre); }
.carte-pied { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; }
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.badge { display: inline-flex; align-items: center; gap: 3px; font: 500 11.5px var(--f-mono); color: var(--creme-2); white-space: nowrap; }
.badge.complet { background: var(--ok); color: var(--encre); padding: 0 5px; border-radius: 3px; border: 1px solid var(--encre); }
.badge.bloque { color: var(--bug); }
.badge.a-vote { color: var(--accent); }
.badge.modele { color: var(--violet); text-transform: uppercase; font-size: 10.5px; }
.badge.chrono-actif { color: var(--ok); animation: clignote 1.6s infinite; }
.badge.champ { font-family: var(--f-texte); max-width: 100%; overflow: hidden; text-overflow: ellipsis; background: rgba(245,237,219,.06); padding: 0 5px; border-radius: 3px; }
.badge.champ b { font-weight: 500; color: var(--creme-3); }
.carte-gens { display: flex; align-items: center; gap: 5px; margin-left: auto; flex: none; }
.regarde { color: var(--bleu); display: grid; }
.carte.compacte .badges { display: none; }
.fantome-glisse { position: fixed !important; left: 0; top: 0; z-index: 100; pointer-events: none; box-shadow: 8px 10px 0 rgba(10,12,18,.8) !important; border-color: var(--accent) !important; opacity: .96; }
body.en-glisse, body.en-glisse * { cursor: grabbing !important; }

/* ---------- Page tableau ---------- */
.page-tableau { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--fond); isolation: isolate; }
.page-tableau::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--trame), var(--fond-t, var(--fond)); background-size: 9px 9px, auto; }
.tab-tete { display: flex; align-items: center; gap: 10px 18px; padding: 10px 18px; background: rgba(10,12,18,.45); border-bottom: 3px solid var(--encre); flex-wrap: wrap; backdrop-filter: blur(6px); }
.tab-tete-g { display: grid; gap: 1px; min-width: 0; }
.tab-espace { display: inline-flex; align-items: center; gap: 6px; font: 500 10.5px var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--creme-2); text-decoration: none; }
.tab-espace:hover { color: var(--accent); }
.tab-titre { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.titre-edit { font: 700 24px/1.15 var(--f-titre); text-transform: uppercase; letter-spacing: .02em; background: transparent; border: 2px solid transparent; border-radius: 3px; padding: 1px 6px; margin-left: -8px; color: var(--creme); max-width: 100%; }
.titre-edit:hover { border-color: rgba(245,237,219,.15); }
.titre-edit:focus { outline: 0; background: var(--rail); border-color: var(--accent); }
.titre-edit.statique { margin: 0 0 0 -2px; padding: 0; }
.favori { color: var(--creme-3); }
.favori.actif { color: var(--accent); }
.vues { display: flex; gap: 3px; background: var(--rail); border: 2px solid var(--encre); border-radius: 4px; padding: 3px; }
.vue-onglet { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 2px; color: var(--creme-2); text-decoration: none; font: 700 12.5px var(--f-titre); text-transform: uppercase; letter-spacing: .04em; }
.vue-onglet:hover { color: var(--creme); background: var(--case); }
.vue-onglet.actif { background: var(--accent-t, var(--accent)); color: var(--encre); }
.tab-tete-outils { margin-left: auto; display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; justify-content: flex-end; }
.tab-tete-d { display: flex; align-items: center; gap: 8px; }
.presents { display: flex; padding-right: 4px; }
.btn-filtre.actif { border-color: var(--accent); }
.filtre-groupe { display: grid; gap: 7px; padding-top: 10px; border-top: 2px solid var(--case); }
.filtre-groupe h4, .pop-sous { margin: 0; font: 500 10.5px var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--creme-3); }

/* Kanban */
.kanban { flex: 1; display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px 18px; overflow-x: auto; overflow-y: hidden; min-height: 0; }
.liste { flex: 0 0 284px; max-height: 100%; display: flex; flex-direction: column; background: var(--fenetre); border: 3px solid var(--encre); border-radius: 5px; box-shadow: var(--ombre); }
.liste::before { content: ""; height: 5px; flex: none; background: var(--lc); border-radius: 2px 2px 0 0; }
.liste.depasse { border-color: var(--bug); box-shadow: 4px 4px 0 var(--bug); }
.liste.trou { opacity: .35; border-style: dashed; box-shadow: none; }
.liste.trou > * { visibility: hidden; }
.liste-tete { display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; cursor: grab; }
.liste-nom { flex: 1; min-width: 0; font: 700 15px var(--f-titre) !important; letter-spacing: .03em; margin-left: -6px !important; padding: 2px 5px !important; text-transform: uppercase; }
h2.liste-nom { margin: 0; }
.liste-fin { color: var(--ok); display: grid; }
.liste-compte { font: 500 11.5px var(--f-mono); color: var(--creme-2); background: var(--case); border: 1px solid var(--encre); padding: 0 6px; border-radius: 3px; }
.liste-compte.depasse { background: var(--bug); color: var(--encre); }
.cartes { display: flex; flex-direction: column; gap: 8px; padding: 2px 10px 10px; overflow-y: auto; min-height: 10px; flex: 1 1 auto; }
.liste-masquees { margin: 0 12px 8px; font-size: 11.5px; color: var(--creme-3); }
.ajout-carte { display: flex; align-items: center; gap: 7px; margin: 0 8px 8px; padding: 8px; border-radius: 3px; color: var(--creme-3); font-size: 13.5px; text-align: left; }
.ajout-carte:hover { background: var(--case); color: var(--creme); }
.composeur { display: grid; gap: 8px; padding: 0 10px 10px; }
.cartes .composeur { padding: 0 0 4px; }
.composeur-saisie { resize: none; min-height: 58px; background: var(--case); }
.liste-repliee { flex: 0 0 46px; align-items: center; padding: 10px 0; gap: 10px; cursor: pointer; min-height: 160px; }
.liste-repliee::before { width: 100%; margin-top: -10px; }
.liste-repliee:hover { border-color: var(--accent); }
.repli-compte { font: 500 11px var(--f-mono); background: var(--case); border: 1px solid var(--encre); padding: 0 5px; border-radius: 3px; }
.repli-nom { writing-mode: vertical-rl; font: 700 14px var(--f-titre); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.ajout-liste { flex: 0 0 284px; display: grid; gap: 8px; padding: 10px; background: rgba(29,36,56,.7); border: 3px dashed var(--case-2); border-radius: 5px; }
.ajout-liste:has(.ajout-liste-bouton) { padding: 0; }
.ajout-liste-bouton { display: flex; align-items: center; gap: 8px; padding: 12px 14px; color: var(--creme-2); font: 700 14px var(--f-titre); text-transform: uppercase; letter-spacing: .05em; width: 100%; }
.ajout-liste-bouton:hover { color: var(--accent); }

/* Vues */
.vue-defil { flex: 1; overflow: auto; padding: 16px 18px 40px; min-height: 0; display: grid; gap: 14px; align-content: start; }
.vue-outils { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.nav-periode { display: flex; align-items: center; gap: 8px; }
.nav-periode h2 { margin: 0 6px; font: 700 20px var(--f-titre); text-transform: uppercase; min-width: 180px; text-align: center; }
.grille-cartes { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--fenetre); border: 3px solid var(--encre); border-radius: 4px; box-shadow: var(--ombre); font-size: 13px; }
.grille-cartes th { position: sticky; top: 0; z-index: 1; background: var(--case); text-align: left; padding: 0; border-bottom: 3px solid var(--encre); font: 500 10.5px var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--creme-2); white-space: nowrap; }
.grille-cartes th button { display: flex; align-items: center; gap: 4px; padding: 10px; width: 100%; text-transform: inherit; letter-spacing: inherit; font: inherit; color: inherit; }
.grille-cartes th:not(:has(button)) { padding: 10px; }
.grille-cartes td .etiqs { flex-wrap: nowrap; }
.grille-cartes th.trie { color: var(--accent); }
.grille-cartes td { padding: 8px 10px; border-bottom: 1px solid rgba(10,12,18,.6); vertical-align: middle; }
.grille-cartes tbody tr:not(.groupe) { cursor: pointer; }
.grille-cartes tbody tr:not(.groupe):hover td { background: rgba(245,237,219,.04); }
.grille-cartes tr.terminee .titre-ligne { color: var(--creme-3); text-decoration: line-through; }
.grille-cartes tr.groupe td { background: var(--rail); padding: 8px 10px; }
.grille-cartes tr.groupe small { margin-left: 8px; color: var(--creme-3); }
.grille-cartes .num { text-align: right; font-family: var(--f-mono); color: var(--creme-2); }
.col-coche { width: 38px; }
.col-titre { min-width: 220px; }
.titre-ligne { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.titre-ligne .ico { color: var(--bug); }
.puce-liste { display: inline-flex; align-items: center; gap: 6px; font: 700 12px var(--f-titre); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.puce-liste::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--lc); border: 2px solid var(--encre); }
.tiret { color: var(--creme-3); }
.case-choix { width: 18px; height: 18px; border-radius: 4px; border: 2px solid var(--creme-3); display: inline-grid; place-items: center; flex: none; background: var(--rail); color: var(--encre); }
.case-choix:hover:not(:disabled) { border-color: var(--ok); }
.case-choix.cochee { background: var(--ok); border-color: var(--encre); }

/* Calendrier */
.cal-mise { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 14px; align-items: start; }
.cal-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--encre); gap: 2px; border: 3px solid var(--encre); border-radius: 4px; box-shadow: var(--ombre); overflow: hidden; }
.cal-entete { background: var(--case); padding: 7px; font: 500 10.5px var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--creme-2); text-align: center; }
.cal-jour { background: var(--fenetre); min-height: 112px; padding: 5px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-jour.weekend { background: #1a2033; }
.cal-jour.hors { background: #171c2c; }
.cal-jour.hors .cal-num span { color: var(--creme-3); }
.cal-jour.aujourdhui .cal-num span { background: var(--accent); color: var(--encre); border-radius: 3px; padding: 0 5px; }
.cal-jour.survolee, .cal-sans.survolee { outline: 3px solid var(--accent); outline-offset: -3px; }
.cal-num { display: flex; align-items: center; justify-content: space-between; font: 500 12px var(--f-mono); color: var(--creme-2); }
.cal-ajout { opacity: 0; }
.cal-jour:hover .cal-ajout { opacity: 1; }
.cal-cartes { display: grid; gap: 3px; }
.cal-carte { display: flex; align-items: center; gap: 5px; width: 100%; min-width: 0; overflow: hidden; padding: 2px 5px; border-radius: 3px; background: var(--case); border: 1px solid var(--encre); border-left: 4px solid var(--c); font-size: 12px; text-align: left; color: var(--creme); touch-action: none; }
.cal-carte:hover { background: var(--case-2); }
.cal-carte.terminee { opacity: .55; text-decoration: line-through; }
.cal-carte.trou { opacity: .3; }
.cal-heure { font: 500 10.5px var(--f-mono); color: var(--creme-3); flex: none; }
.cal-plus { font-size: 11.5px; color: var(--creme-3); text-align: left; padding: 0 4px; }
.cal-plus:hover { color: var(--accent); }
.cal-sans { background: var(--fenetre); border: 3px solid var(--encre); border-radius: 4px; box-shadow: var(--ombre); padding: 10px; display: grid; gap: 4px; max-height: 70vh; overflow-y: auto; }
.cal-sans h3 { margin: 0 0 4px; display: flex; justify-content: space-between; font: 700 14px var(--f-titre); text-transform: uppercase; }
.cal-sans h3 small { font: 500 11px var(--f-mono); color: var(--creme-3); }

/* Chronologie */
.gantt { background: var(--fenetre); border: 3px solid var(--encre); border-radius: 4px; box-shadow: var(--ombre); overflow-x: auto; position: relative; }
.gantt-ligne { display: grid; grid-template-columns: 220px max-content; min-height: 34px; border-bottom: 1px solid rgba(10,12,18,.55); }
.gantt-ligne.entete { position: sticky; top: 0; z-index: 3; background: var(--case); border-bottom: 3px solid var(--encre); min-height: 46px; }
.gantt-libelle { position: sticky; left: 0; z-index: 2; background: var(--fenetre); border-right: 2px solid var(--encre); display: flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 12.5px; text-align: left; color: var(--creme); min-width: 0; }
.gantt-ligne.entete .gantt-libelle { background: var(--case); font: 500 10.5px var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--creme-2); }
button.gantt-libelle:hover { color: var(--accent); }
.gantt-libelle .pile { margin-left: auto; }
.gantt-groupe { display: grid; grid-template-columns: 220px 1fr; background: var(--rail); border-bottom: 1px solid var(--encre); }
.gantt-groupe .gantt-libelle { background: var(--rail); gap: 8px; }
.gantt-groupe small { color: var(--creme-3); font-family: var(--f-mono); }
.gantt-piste { position: relative; }
.gantt-tete { position: relative; height: 100%; }
.gantt-mois { position: absolute; top: 4px; font: 700 11.5px var(--f-titre); text-transform: uppercase; letter-spacing: .05em; color: var(--creme); white-space: nowrap; padding-left: 4px; border-left: 2px solid var(--encre); }
.gantt-jour { position: absolute; bottom: 4px; font: 500 10.5px var(--f-mono); color: var(--creme-3); text-align: center; white-space: nowrap; }
.gantt-jour.weekend { color: var(--creme-3); opacity: .6; }
.gantt-corps { position: relative; }
.gantt-fond-place { position: absolute; top: 0; bottom: 0; left: 220px; pointer-events: none; }
.gantt-fond { position: absolute; inset: 0; }
.gantt-fond i { position: absolute; top: 0; bottom: 0; background: rgba(10,12,18,.28); }
.gantt-auj { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); box-shadow: 0 0 0 1px var(--encre); }
.gantt-lignes { position: relative; }
.gantt-barre { position: absolute; top: 5px; height: 24px; background: var(--c); border: 2px solid var(--encre); border-radius: 4px; box-shadow: var(--ombre-p); display: flex; align-items: center; color: var(--encre); font: 700 12px var(--f-titre); cursor: grab; overflow: hidden; touch-action: none; user-select: none; }
.gantt-barre.terminee { opacity: .5; }
.gantt-barre.retard { outline: 2px dashed var(--bug); outline-offset: 1px; }
.gantt-texte { padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; text-transform: uppercase; letter-spacing: .02em; }
.poignee { width: 8px; align-self: stretch; cursor: ew-resize; flex: none; background: rgba(10,12,18,.18); }
.gantt-hors { position: absolute; top: 8px; left: 6px; color: var(--creme-3); font: 12px var(--f-mono); }
.gantt-sans h3 { margin: 0 0 8px; font: 700 14px var(--f-titre); text-transform: uppercase; }

/* Statistiques */
.stat-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.stat-tuile { background: var(--fenetre); border: 3px solid var(--encre); border-radius: 4px; box-shadow: var(--ombre); padding: 14px 16px; display: grid; gap: 3px; }
.stat-tuile strong { font: 500 32px/1 var(--f-mono); }
.stat-tuile span { font-size: 13px; color: var(--creme); }
.stat-tuile small { font-size: 12px; color: var(--creme-3); }
.stat-tuile.alerte { border-color: var(--bug); }
.stat-tuile.alerte strong { color: var(--bug); }
.stat-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.colonnes { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 2px; height: 170px; align-items: end; padding-top: 6px; border-bottom: 2px solid var(--case-2); }
.colonne { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 4px; cursor: default; }
.colonne-piste { display: flex; align-items: flex-end; height: 100%; padding: 0 2px; }
.colonne-piste i { display: block; width: 100%; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 0; }
.colonne:hover .colonne-piste { background: rgba(245,237,219,.04); }
.colonne-lib { font: 10px var(--f-mono); color: var(--creme-3); text-align: center; height: 13px; white-space: nowrap; }
.barres { display: grid; gap: 7px; }
.barre-ligne { display: grid; grid-template-columns: minmax(80px, 34%) 1fr 44px; align-items: center; gap: 10px; font-size: 13px; padding: 2px 0; }
.barre-nom { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--creme); }
.barre-piste { height: 12px; display: block; }
.barre-piste i { display: block; height: 100%; background: var(--c); border-radius: 0 4px 4px 0; }
.barre-ligne:hover .barre-piste { background: rgba(245,237,219,.05); }
.barre-val { font: 500 12.5px var(--f-mono); color: var(--creme-2); text-align: right; }
.a-venir { display: grid; gap: 6px; }

/* ---------- Calques : popovers, menus, dialogues, toasts ---------- */
#calques { position: relative; z-index: 60; }
.pop { position: fixed; z-index: 80; background: var(--fenetre); border: 3px solid var(--encre); border-radius: 5px; box-shadow: 6px 6px 0 var(--encre); display: flex; flex-direction: column; overflow: hidden; animation: apparait .12s ease-out; }
@keyframes apparait { from { opacity: 0; transform: translateY(-4px); } }
.pop-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 14px; background: var(--case); border-bottom: 3px solid var(--encre); font: 700 13px var(--f-titre); text-transform: uppercase; letter-spacing: .05em; }
.pop-corps { padding: 12px; display: grid; gap: 10px; overflow-y: auto; min-height: 0; }
.pop-corps.menu { padding: 6px; gap: 1px; }
.pop-corps.notifs { padding: 0; gap: 0; }
.menu-titre { font: 500 10.5px var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--creme-3); padding: 6px 8px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 3px; text-align: left; color: var(--creme); font-size: 13.5px; width: 100%; }
.menu-item:hover:not(:disabled) { background: var(--case); }
.menu-item:disabled { opacity: .4; }
.menu-item.actif { color: var(--accent); }
.menu-item.danger { color: var(--bug); }
.menu-item.danger:hover { background: var(--bug); color: var(--encre); }
.menu-item kbd { margin-left: auto; }
.menu-item > span:nth-child(2) { flex: 1; min-width: 0; }
.sep { border: 0; border-top: 2px solid var(--case); margin: 4px 0; }
.dialogue-voile { position: fixed; inset: 0; z-index: 70; background: rgba(8,10,16,.68); display: grid; place-items: center; padding: 16px; animation: fondu .15s; overflow-y: auto; }
@keyframes fondu { from { opacity: 0; } }
.dialogue { width: 100%; background: var(--fenetre); border: 3px solid var(--encre); border-radius: 6px; box-shadow: 8px 8px 0 var(--encre); display: flex; flex-direction: column; max-height: calc(100vh - 32px); animation: monte .15s ease-out; }
@keyframes monte { from { transform: translateY(10px); opacity: 0; } }
.dialogue.etroit { max-width: 400px; }
.dialogue-tete { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 10px 18px; background: var(--case); border-bottom: 3px solid var(--encre); }
.dialogue-tete h2 { margin: 0; font: 700 18px var(--f-titre); text-transform: uppercase; letter-spacing: .03em; }
.dialogue-corps { padding: 18px; overflow-y: auto; display: grid; gap: 14px; }
.dialogue-pied { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 18px; border-top: 3px solid var(--encre); background: var(--rail); }
.confirmation { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 26px 22px 18px; }
.confirmation h2 { margin: 0; font: 700 22px/1.15 var(--f-titre); text-transform: uppercase; text-wrap: balance; }
.confirmation p { margin: 0; color: var(--creme-2); max-width: 36ch; }
.confirmation .btn.gros { min-width: 220px; margin-top: 6px; }
.confirmation-ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--case); border: 3px solid var(--encre); color: var(--accent); }
.confirmation-ico.danger { background: var(--bug); color: var(--encre); }
.toasts { position: fixed; bottom: 18px; right: 18px; z-index: 90; display: grid; gap: 8px; justify-items: end; max-width: min(420px, calc(100vw - 32px)); }
.toast { display: flex; align-items: center; gap: 10px; padding: 9px 8px 9px 14px; background: var(--creme); color: var(--encre); border: 3px solid var(--encre); border-radius: 4px; box-shadow: var(--ombre); font-weight: 500; animation: monte .15s ease-out; transition: opacity .3s, transform .3s; }
.toast .btn-icone { color: var(--encre); }
.toast.erreur { background: var(--bug); }
.toast.sort { opacity: 0; transform: translateX(20px); }
.toast-action { font: 700 12px var(--f-titre); text-transform: uppercase; letter-spacing: .05em; background: var(--encre); color: var(--accent); padding: 4px 9px; border-radius: 3px; }
.bulle { position: fixed; z-index: 95; pointer-events: none; background: var(--creme); color: var(--encre); border: 2px solid var(--encre); border-radius: 3px; padding: 4px 8px; font-size: 12.5px; font-weight: 500; box-shadow: var(--ombre-p); max-width: 280px; }

/* Sélecteurs */
.choix-liste { display: grid; gap: 2px; max-height: 300px; overflow-y: auto; }
.choix-liste.court { max-height: 180px; }
.choix { display: flex; align-items: center; gap: 9px; padding: 6px 7px; border-radius: 3px; text-align: left; width: 100%; color: var(--creme); }
.choix:hover { background: var(--case); }
.choix.choisi { background: var(--case); }
.choix .ico { color: var(--ok); }
.choix-nom { flex: 1; min-width: 0; display: grid; font-size: 13.5px; }
.choix-nom small { color: var(--creme-3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.choix-etiq { display: flex; align-items: center; gap: 7px; }
.etiq-bouton { flex: 1; text-align: left; padding: 6px 10px; border-radius: 3px; background: var(--c); color: var(--encre); border: 2px solid var(--encre); font: 700 12.5px var(--f-titre); text-transform: uppercase; letter-spacing: .03em; min-height: 32px; }
.etiq-bouton:hover { filter: brightness(1.08); }
.etiq-apercu { display: grid; place-items: center; padding: 14px; background: var(--rail); border-radius: 3px; border: 2px solid var(--encre); }
.couv-images { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.couv-image { border: 2px solid var(--encre); border-radius: 3px; overflow: hidden; aspect-ratio: 4/3; }
.couv-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.couv-image.choisie { outline: 3px solid var(--accent); }
.emojis { display: flex; flex-wrap: wrap; gap: 4px; }
.emojis button { font-size: 20px; width: 40px; height: 40px; border-radius: 3px; }
.emojis button:hover { background: var(--case); }

/* Notifications */
.notifs-actions { display: flex; justify-content: space-between; padding: 8px 14px; border-bottom: 2px solid var(--case); }
.notifs-liste { display: grid; max-height: 440px; overflow-y: auto; }
.notif { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; text-align: left; border-bottom: 1px solid rgba(10,12,18,.5); width: 100%; color: var(--creme-2); }
.notif:hover { background: var(--case); }
.notif.non-lue { background: rgba(255,184,92,.07); color: var(--creme); }
.notif.non-lue::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-left: auto; flex: none; margin-top: 6px; }
.notif-ico { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--case); border: 2px solid var(--encre); color: var(--creme); flex: none; }
.notif-ico.mention, .notif-ico.assigne, .notif-ico.item { background: var(--accent); color: var(--encre); }
.notif-ico.retard { background: var(--bug); color: var(--encre); }
.notif-ico.terminee { background: var(--ok); color: var(--encre); }
.notif-texte { font-size: 13px; line-height: 1.4; min-width: 0; }
.notif-texte q { display: block; color: var(--creme-3); font-style: italic; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-texte small { display: block; color: var(--creme-3); font-size: 11.5px; margin-top: 2px; }
.notifs-page { overflow: hidden; }

/* Création de tableau / espace */
.form-tableau { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-col { display: grid; gap: 14px; align-content: start; }
.apercu-tableau { height: 92px; border: 3px solid var(--encre); border-radius: 5px; box-shadow: var(--ombre-p); display: flex; align-items: flex-end; padding: 10px 12px; position: relative; overflow: hidden; }
.apercu-tableau::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--c); border-bottom: 2px solid var(--encre); }
.apercu-tableau span { font: 700 19px var(--f-titre); text-transform: uppercase; }
.fonds { display: flex; flex-wrap: wrap; gap: 7px; }
.fond-choix { width: 46px; height: 32px; border-radius: 4px; border: 2px solid var(--encre); }
.fond-choix.choisi { outline: 3px solid var(--accent); outline-offset: 1px; }
.departs { display: grid; gap: 6px; }
.depart { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: 3px; border: 2px solid var(--case); cursor: pointer; }
.depart:has(input:checked) { border-color: var(--accent); background: var(--case); }
.depart input { margin-top: 2px; }
.depart strong { display: flex; align-items: center; gap: 6px; font: 700 14px var(--f-titre); text-transform: uppercase; letter-spacing: .03em; }
.depart small { display: block; color: var(--creme-3); font-size: 12px; margin-top: 2px; }
.emojis-choix { display: flex; flex-wrap: wrap; gap: 4px; }
.emojis-choix button { font-size: 19px; width: 38px; height: 38px; border-radius: 3px; border: 2px solid transparent; }
.emojis-choix button:hover { background: var(--case); }
.emojis-choix button.choisi { border-color: var(--accent); background: var(--case); }
.ligne-acces { display: grid; grid-template-columns: 1fr 170px; align-items: center; gap: 10px; }
.raccourcis { display: grid; gap: 6px; }
.raccourcis h3 { margin: 8px 0 2px; font: 700 13px var(--f-titre); text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.raccourci { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--creme-2); }
.raccourci span:first-child { display: flex; gap: 4px; }

/* ---------- Fenêtre de carte ---------- */
.voile-carte { position: fixed; inset: 0; z-index: 65; background: rgba(8,10,16,.72); overflow-y: auto; overflow-x: hidden; padding: 40px 16px; display: flex; justify-content: center; align-items: flex-start; animation: fondu .12s; }
body.modale-ouverte .scene { overflow: hidden; }
.fenetre-carte { width: 100%; max-width: 960px; background: var(--fenetre); border: 3px solid var(--encre); border-radius: 6px; box-shadow: 10px 10px 0 var(--encre); position: relative; outline: 0; animation: monte .14s ease-out; }
.fenetre-carte.depot { outline: 3px dashed var(--accent); outline-offset: 4px; }
.fenetre-carte.depot::after { content: "Dépose tes fichiers ici"; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(22,27,43,.9); font: 700 24px var(--f-titre); text-transform: uppercase; color: var(--accent); z-index: 5; border-radius: 4px; }
.fc-couv { height: 64px; border-bottom: 3px solid var(--encre); border-radius: 3px 3px 0 0; }
.fc-couv.image { height: 200px; background: var(--rail); display: grid; place-items: center; overflow: hidden; }
.fc-couv.image img { max-width: 100%; max-height: 200px; object-fit: contain; }
.fc-barre { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px 0 20px; flex-wrap: wrap; }
.fc-fil { display: flex; align-items: center; gap: 6px; font: 500 11px var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--creme-2); min-width: 0; flex-wrap: wrap; }
.fc-fil a { color: var(--creme-2); text-decoration: none; }
.fc-fil a:hover { color: var(--accent); }
.fc-liste { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: 2px solid var(--encre); border-radius: 3px; background: var(--case); color: var(--creme); font: inherit; text-transform: inherit; letter-spacing: inherit; }
.fc-liste:hover { border-color: var(--accent); }
.fc-outils { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.fc-lecteurs { display: flex; align-items: center; gap: 4px; color: var(--bleu); margin-right: 6px; }
.bandeau { display: flex; align-items: center; gap: 10px; margin: 12px 20px 0; padding: 9px 12px; border: 2px solid var(--encre); border-radius: 3px; font-size: 13.5px; flex-wrap: wrap; }
.bandeau span { flex: 1; min-width: 200px; }
.bandeau.archive { background: var(--jaune); color: var(--encre); }
.bandeau.modele { background: var(--violet); color: var(--encre); }
.bandeau.bloque { background: var(--bug); color: var(--encre); }
.fc-corps { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 24px; padding: 14px 20px 24px; }
.fc-principal { display: grid; gap: 22px; align-content: start; min-width: 0; }
.fc-titre { display: flex; gap: 12px; align-items: flex-start; }
.fc-coche { width: 30px; height: 30px; margin-top: 4px; border-radius: 50%; border: 3px solid var(--creme-3); display: grid; place-items: center; color: transparent; flex: none; }
.fc-coche:hover:not(:disabled) { border-color: var(--ok); color: var(--ok); }
.fc-coche.faite { background: var(--ok); border-color: var(--encre); color: var(--encre); }
.fc-titre-champ { flex: 1; margin: 0; font: 700 26px/1.2 var(--f-titre); text-transform: none; background: transparent; border: 2px solid transparent; border-radius: 3px; padding: 2px 6px; resize: none; overflow: hidden; color: var(--creme); min-width: 0; overflow-wrap: anywhere; }
textarea.fc-titre-champ:hover { border-color: rgba(245,237,219,.12); }
textarea.fc-titre-champ:focus { outline: 0; background: var(--rail); border-color: var(--accent); }
.fc-termine { margin: -14px 0 0 42px; display: flex; align-items: center; gap: 6px; color: var(--ok); font-size: 13px; }
.fc-meta { display: flex; flex-wrap: wrap; gap: 16px 26px; padding-left: 42px; }
.fc-meta:empty { display: none; }
.fc-bloc { display: grid; gap: 6px; }
.fc-bloc h4 { margin: 0; font: 500 10.5px var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--creme-3); }
.fc-bloc-val { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.fc-dates { flex-direction: column; align-items: flex-start; gap: 2px; }
.fc-dates .echeance { font-size: 13px; padding: 3px 8px; }
.fc-dates small, .fc-temps small { color: var(--creme-3); font-size: 11.5px; }
.btn-vote { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 2px solid var(--encre); border-radius: 3px; background: var(--case); font: 500 13px var(--f-mono); }
.btn-vote:hover:not(:disabled) { border-color: var(--accent); }
.btn-vote.a-vote { background: var(--accent); color: var(--encre); }
.fc-temps { font: 500 13px var(--f-mono); }
.chrono-puce { display: inline-flex; align-items: center; gap: 5px; font: 500 12px var(--f-mono); color: var(--ok); background: rgba(143,224,166,.1); padding: 2px 7px 2px 2px; border-radius: 12px; }
.fc-section { display: grid; gap: 10px; min-width: 0; }
.fc-section-tete { display: flex; align-items: center; gap: 6px 10px; min-height: 30px; flex-wrap: wrap; min-width: 0; }
.fc-section-tete > .ico { color: var(--creme-2); }
.fc-section-tete h3 { margin: 0; font: 700 16px var(--f-titre); text-transform: uppercase; letter-spacing: .04em; }
.fc-section-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.fc-section > :not(header) { margin-left: 27px; }
.desc-vide { width: 100%; min-height: 64px; padding: 10px 12px; background: var(--case); border: 2px solid var(--encre); border-radius: 3px; text-align: left; color: var(--creme-3); }
.desc-vide:hover { background: var(--case-2); color: var(--creme-2); }
.desc-champ { min-height: 140px; resize: none; overflow: hidden; }
.desc-outils { display: flex; gap: 2px; background: var(--rail); border: 2px solid var(--encre); border-bottom: 0; border-radius: 3px 3px 0 0; padding: 3px; }
.desc-outils + .desc-champ { border-radius: 0 0 3px 3px; }
.fc-desc { display: grid; gap: 8px; }
.md { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 .7em; }
.md h3, .md h4, .md h5 { font-family: var(--f-titre); text-transform: uppercase; margin: 1em 0 .4em; }
.md ul, .md ol { margin: 0 0 .7em; padding-left: 1.4em; }
.md blockquote { margin: 0 0 .7em; padding: 4px 12px; border-left: 4px solid var(--accent); background: var(--rail); color: var(--creme-2); }
.md pre { background: var(--rail); border: 2px solid var(--encre); padding: 10px; border-radius: 3px; overflow-x: auto; }
.md pre code { border: 0; padding: 0; background: none; }
.md hr { border: 0; border-top: 2px solid var(--case); }
.md .mention { background: rgba(255,184,92,.16); color: var(--accent); padding: 0 3px; border-radius: 3px; font-weight: 500; }
.md .tache-md { list-style: none; margin-left: -1.3em; display: flex; gap: 8px; align-items: baseline; }
.md .case-md { width: 13px; height: 13px; border: 2px solid var(--creme-3); border-radius: 3px; flex: none; position: relative; top: 2px; }
.md .tache-md.faite .case-md { background: var(--ok); border-color: var(--encre); }
.md .tache-md.faite { color: var(--creme-3); text-decoration: line-through; }
.champs-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.champ-perso { display: grid; gap: 5px; }
.champ-perso > span:first-child { font: 500 10.5px var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--creme-3); }
.champ-perso-val { display: flex; align-items: center; gap: 4px; }
.champ-perso.colore select { border-color: var(--c); }
.champ-lecture { font-size: 13.5px; }
.titre-checklist { flex: 1; min-width: 0; font: 700 16px var(--f-titre); text-transform: uppercase; letter-spacing: .03em; background: transparent; border: 2px solid transparent; border-radius: 3px; padding: 2px 5px; color: var(--creme); }
.titre-checklist:focus { outline: 0; background: var(--rail); border-color: var(--accent); }
.progres-ligne { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 8px; font: 500 12px var(--f-mono); color: var(--creme-2); }
.progres { height: 10px; background: var(--rail); border: 2px solid var(--encre); border-radius: 6px; overflow: hidden; }
.progres i { display: block; height: 100%; background: var(--accent); transition: width .2s; }
.progres.complet i { background: var(--ok); }
.progres.depasse i { background: var(--bug); }
.items { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.item { display: flex; align-items: center; gap: 9px; padding: 4px 6px; border-radius: 3px; }
.item:hover { background: var(--case); }
.item-texte { flex: 1; min-width: 0; background: transparent; border: 2px solid transparent; border-radius: 3px; padding: 3px 5px; font-size: 14px; color: var(--creme); }
.item-texte:focus { outline: 0; background: var(--rail); border-color: var(--accent); }
.item.fait .item-texte { color: var(--creme-3); text-decoration: line-through; }
.item-actions { display: flex; opacity: 0; }
.item:hover .item-actions, .item:focus-within .item-actions { opacity: 1; }
.pieces { display: grid; gap: 8px; }
.piece { display: flex; gap: 12px; align-items: center; padding: 6px; border-radius: 3px; }
.piece:hover { background: var(--case); }
.piece-apercu { width: 92px; height: 64px; border: 2px solid var(--encre); border-radius: 3px; background: var(--rail); display: grid; place-items: center; overflow: hidden; flex: none; text-decoration: none; font: 700 15px var(--f-mono); color: var(--creme-3); }
.piece-apercu img { width: 100%; height: 100%; object-fit: cover; }
.piece-info { display: grid; gap: 2px; min-width: 0; }
.piece-info a { font-weight: 500; color: var(--creme); text-decoration: none; }
.piece-info a:hover { color: var(--accent); }
.piece-info small { color: var(--creme-3); font-size: 12px; }
.piece-actions { display: flex; gap: 12px; }
.deps { display: grid; gap: 4px; }
.deps h4 { margin: 0; font: 500 10.5px var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--creme-3); }
.dep { display: flex; align-items: center; gap: 8px; padding: 5px 8px; background: var(--case); border: 2px solid var(--encre); border-radius: 3px; }
.dep a { color: var(--creme); text-decoration: none; flex: 1; }
.dep a:hover { color: var(--accent); }
.dep small { color: var(--creme-3); }
.dep-etat { color: var(--bug); display: grid; }
.dep-etat.fait { color: var(--ok); }
.onglets-act { display: flex; gap: 2px; background: var(--rail); border: 2px solid var(--encre); border-radius: 3px; padding: 2px; }
.onglets-act button { padding: 4px 10px; border-radius: 2px; font: 700 12px var(--f-titre); text-transform: uppercase; letter-spacing: .04em; color: var(--creme-2); }
.onglets-act button.actif { background: var(--case); color: var(--creme); }
.activite { display: grid; gap: 14px; }
.composeur-com { display: flex; gap: 10px; align-items: flex-start; }
.composeur-com-zone { flex: 1; display: grid; gap: 8px; position: relative; min-width: 0; }
.composeur-com-zone textarea { resize: none; overflow: hidden; min-height: 44px; }
.mentions { position: absolute; top: calc(100% - 38px); left: 0; z-index: 5; width: 260px; background: var(--fenetre); border: 3px solid var(--encre); border-radius: 4px; box-shadow: var(--ombre); padding: 4px; display: grid; gap: 1px; }
.com { display: flex; gap: 10px; align-items: flex-start; }
.com-contenu { flex: 1; min-width: 0; display: grid; gap: 5px; }
.com-contenu header { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.com-contenu header strong { font-weight: 500; }
.com-contenu header small { color: var(--creme-3); font-size: 11.5px; }
.com-corps { background: var(--case); border: 2px solid var(--encre); border-radius: 0 6px 6px 6px; padding: 8px 11px; display: grid; gap: 8px; }
.com-pied { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.reaction { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 12px; border: 2px solid var(--encre); background: var(--rail); font-size: 13px; }
.reaction span { font: 500 11.5px var(--f-mono); color: var(--creme-2); }
.reaction.mienne { border-color: var(--accent); background: rgba(255,184,92,.15); }
.reaction.ajout { opacity: .6; font-size: 12px; }
.reaction.ajout:hover { opacity: 1; }
.fc-cote { display: grid; gap: 5px; align-content: start; }
.fc-cote h4 { margin: 10px 0 2px; font: 500 10.5px var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--creme-3); }
.fc-cote h4:first-child { margin-top: 0; }
.btn-cote { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--case); border: 2px solid var(--encre); border-radius: 3px; text-align: left; font-size: 13.5px; color: var(--creme); width: 100%; }
.btn-cote:hover:not(:disabled) { background: var(--case-2); }
.btn-cote.actif { border-color: var(--accent); color: var(--accent); }
.btn-cote.danger:hover { background: var(--bug); color: var(--encre); }
.btn-cote.chrono { background: var(--ok); color: var(--encre); border-color: var(--encre); }
.btn-cote.chrono b { font: 500 12.5px var(--f-mono); margin-left: auto; }
.fc-infos { margin: 12px 0 0; font-size: 11.5px; color: var(--creme-3); line-height: 1.6; }
.fc-infos strong { color: var(--creme-2); font-weight: 500; }
.temps-total { display: flex; align-items: baseline; gap: 8px; }
.temps-total strong { font: 500 22px var(--f-mono); }
.temps-total span, .temps-total small { color: var(--creme-3); font-size: 12px; }
.temps-liste { display: grid; gap: 3px; max-height: 200px; overflow-y: auto; }
.temps-ligne { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 8px; align-items: center; font-size: 12.5px; }
.temps-ligne strong { font: 500 12.5px var(--f-mono); }
.temps-ligne small { color: var(--creme-3); }

/* ---------- Réglages ---------- */
.reglages-mise { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.reglages-nav { display: grid; gap: 2px; position: sticky; top: 0; }
.reglages-nav a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 3px; color: var(--creme-2); text-decoration: none; border: 2px solid transparent; }
.reglages-nav a:hover { color: var(--creme); background: var(--fenetre); }
.reglages-nav a.actif { background: var(--case); color: var(--creme); border-color: var(--encre); box-shadow: var(--ombre-p); }
.reglages-contenu { display: grid; gap: 20px; min-width: 0; }
.liste-simple { display: grid; gap: 6px; }
.ligne-simple { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: var(--case); border: 2px solid var(--encre); border-radius: 3px; min-width: 0; flex-wrap: wrap; }
.ligne-simple > small { color: var(--creme-3); font-size: 12px; margin-right: auto; }
.ligne-simple > a.tronque, .ligne-simple > span.tronque { flex: 1; color: var(--creme); }
.ordre { display: flex; }
.champs-reglages { display: grid; gap: 8px; }
.champ-reglage { padding: 10px; background: var(--case); border: 2px solid var(--encre); border-radius: 3px; display: grid; gap: 10px; }
.champ-reglage-ligne { display: grid; grid-template-columns: minmax(120px, 1fr) 180px auto auto auto; gap: 10px; align-items: center; }
.options-champ { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.option-champ { display: flex; align-items: center; gap: 5px; background: var(--rail); border: 2px solid var(--encre); border-radius: 3px; padding: 3px 4px 3px 5px; }
.option-champ .pastille { width: 18px; height: 18px; }
.option-champ .champ { width: 130px; }
.regles { display: grid; gap: 8px; }
.regle { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--case); border: 2px solid var(--encre); border-radius: 3px; }
.regle.inactive { opacity: .55; }
.regle-texte { flex: 1; min-width: 0; }
.regle-texte p { margin: 2px 0 0; font-size: 13px; color: var(--creme-2); }
.regle-edit { display: grid; gap: 12px; }
.regle-bloc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px; background: var(--rail); border: 2px solid var(--encre); border-radius: 3px; }
.regle-bloc.colonne { flex-direction: column; align-items: stretch; }
.regle-bloc > .champ, .regle-action > .champ { width: auto; flex: 1 1 180px; }
.regle-mot { font: 700 13px var(--f-mono); letter-spacing: .1em; color: var(--encre); background: var(--accent); padding: 3px 8px; border-radius: 3px; border: 2px solid var(--encre); align-self: flex-start; }
.regle-action { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.regle-action textarea.champ { flex-basis: 100%; }
.exemples { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.exemple { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: var(--case); border: 2px dashed var(--case-2); border-radius: 3px; text-align: left; color: var(--creme); }
.exemple:hover { border-color: var(--accent); }
.exemple .ico { color: var(--accent); margin-top: 2px; }
.exemple strong { display: block; font-weight: 500; }
.exemple small { color: var(--creme-3); font-size: 12px; }
.liste-acces { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--creme-2); }

/* ---------- Administration ---------- */
.tableau-admin { overflow-x: auto; }
.tableau-admin .grille-cartes { border: 0; box-shadow: none; }
.tableau-admin tbody tr { cursor: default !important; }
.membre-cellule { display: flex; align-items: center; gap: 10px; }
.membre-cellule strong { display: block; font-weight: 500; }
.membre-cellule small { color: var(--creme-3); font-size: 12px; }
.role-select { margin-top: 5px; max-width: 170px; }
.etat { font: 500 11px var(--f-mono); padding: 1px 7px; border-radius: 3px; border: 1px solid var(--encre); }
.etat.actif { background: var(--ok); color: var(--encre); }
.etat.inactif { background: var(--case-2); color: var(--creme-2); }
tr.inactif td { opacity: .6; }
.droite { text-align: right; }
.lien-copie { display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--rail); border: 2px solid var(--encre); border-radius: 3px; }
.lien-copie code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; background: none; }
.lien-copie.succes { border-color: var(--ok); }
.roles-mise { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }
.roles-liste { display: grid; gap: 4px; }
.role-item { display: flex; align-items: center; gap: 9px; padding: 9px 11px; background: var(--fenetre); border: 2px solid var(--encre); border-radius: 3px; text-align: left; color: var(--creme); }
.role-item:hover { border-color: var(--case-2); }
.role-item.actif { border-color: var(--accent); box-shadow: var(--ombre-p); }
.role-item small { margin-left: auto; font: 500 11px var(--f-mono); color: var(--creme-3); }
.perms { display: grid; gap: 6px; }
.perm { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; background: var(--case); border: 2px solid var(--encre); border-radius: 3px; cursor: pointer; }
.perm input { margin-top: 2px; }
.perm strong { display: block; font-weight: 500; }
.perm small { color: var(--creme-3); font-size: 12px; }
.matrice-defil { overflow-x: auto; }
.matrice { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
.matrice th, .matrice td { padding: 8px 10px; border-bottom: 1px solid rgba(10,12,18,.6); text-align: left; white-space: nowrap; }
.matrice th { font: 500 10.5px var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--creme-2); }
.matrice tr.fige td { background: rgba(255,184,92,.06); }
.niveau { font: 700 11.5px var(--f-titre); text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 3px; border: 2px solid var(--encre); display: inline-block; }
.niveau.aucun { background: var(--case-2); color: var(--creme-3); }
.niveau.lecture { background: var(--bleu); color: var(--encre); }
.niveau.commenter { background: var(--violet); color: var(--encre); }
.niveau.editer { background: var(--ok); color: var(--encre); }
.niveau.gerer { background: var(--accent); color: var(--encre); }
.niveau-select { width: 140px; }
.niveau-select.lecture { border-color: var(--bleu); }
.niveau-select.commenter { border-color: var(--violet); }
.niveau-select.editer { border-color: var(--ok); }
.niveau-select.gerer { border-color: var(--accent); }
.legende-niveaux { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 12.5px; color: var(--creme-3); }
.acces-roles { display: grid; gap: 10px; }
.acces-role { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 10px; background: var(--case); border: 2px solid var(--encre); border-radius: 3px; }

/* ---------- Connexion ---------- */
body.page-connexion { overflow: auto; background: var(--fond); }
.connexion { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, 1fr); }
.connexion-marque { position: relative; overflow: hidden; background: var(--rail); border-right: 3px solid var(--encre); padding: 48px; display: flex; flex-direction: column; justify-content: center; gap: 22px; isolation: isolate; }
.connexion-marque::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--trame), repeating-conic-gradient(from 0deg at 20% 110%, rgba(255,184,92,.04) 0 5deg, transparent 5deg 10deg); background-size: 9px 9px, auto; }
.connexion-logo { display: flex; align-items: center; gap: 16px; font: 700 clamp(44px, 6vw, 76px)/1 var(--f-titre); text-transform: uppercase; }
.connexion-logo img { width: clamp(60px, 8vw, 96px); height: auto; }
.connexion-logo b { font-family: var(--f-marker); font-weight: 400; color: var(--accent); display: inline-block; transform: rotate(-5deg); margin-left: 4px; text-transform: none; }
.connexion-slogan { margin: 0; font: 400 20px/1.4 var(--f-titre); color: var(--creme-2); text-transform: uppercase; letter-spacing: .05em; }
.connexion-slogan em { font-family: var(--f-marker); font-style: normal; color: var(--creme); text-transform: none; letter-spacing: 0; font-size: 26px; }
.connexion-colonnes { display: flex; gap: 14px; margin-top: 18px; align-items: flex-start; }
.connexion-colonnes span { width: 92px; border: 3px solid var(--encre); border-radius: 5px; background: var(--fenetre); box-shadow: var(--ombre); height: 150px; position: relative; }
.connexion-colonnes span::before, .connexion-colonnes span::after { content: ""; position: absolute; left: 9px; right: 9px; height: 24px; border: 2px solid var(--encre); border-radius: 3px; background: var(--case); }
.connexion-colonnes span::before { top: 12px; }
.connexion-colonnes span::after { top: 44px; background: var(--accent); }
.connexion-colonnes span:nth-child(2) { height: 110px; transform: rotate(3deg); }
.connexion-colonnes span:nth-child(2)::after { background: var(--bleu); }
.connexion-colonnes span:nth-child(3) { height: 130px; transform: rotate(-2deg); }
.connexion-colonnes span:nth-child(3)::after { background: var(--ok); }
.connexion-boite { display: grid; place-items: center; padding: 32px 16px; }
#formulaire { width: 100%; max-width: 400px; background: var(--fenetre); border: 3px solid var(--encre); border-radius: 6px; box-shadow: 8px 8px 0 var(--encre); padding: 28px; display: grid; gap: 14px; }
#formulaire h1 { margin: 0; font: 700 32px var(--f-titre); text-transform: uppercase; }
.connexion-erreur { margin: 0; padding: 9px 12px; background: var(--bug); color: var(--encre); border: 2px solid var(--encre); border-radius: 3px; font-weight: 500; }
.separateur { display: flex; align-items: center; gap: 10px; color: var(--creme-3); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.separateur::before, .separateur::after { content: ""; flex: 1; border-top: 2px solid var(--case); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .accueil-deux { grid-template-columns: 1fr; }
  .fc-corps { grid-template-columns: minmax(0, 1fr) 180px; }
  .cal-mise { grid-template-columns: 1fr; }
  .cal-sans { max-height: none; }
}
@media (max-width: 820px) {
  :root { --barre-h: 54px; }
  .barre .menu-mobile { display: grid; }
  .barre { gap: 8px; padding: 0 10px; }
  .marque span { display: none; }
  .recherche { min-width: 0; padding: 0 8px; }
  .recherche kbd, .btn-barre, .point-direct { display: none; }
  .barre-actions { gap: 4px; }
  .mise { grid-template-columns: minmax(0, 1fr); }
  .rail { position: fixed; top: var(--barre-h); bottom: 0; left: 0; width: min(300px, 86vw); z-index: 40; transform: translateX(-102%); transition: transform .2s ease-out; box-shadow: 6px 0 0 var(--encre); }
  body.rail-ouvert .rail { transform: none; }
  body.rail-ouvert .scene::after { content: ""; position: fixed; inset: var(--barre-h) 0 0 0; background: rgba(8,10,16,.6); z-index: 35; }
  .page { padding: 20px 16px 72px; }
  .compteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tab-tete { padding: 8px 12px; gap: 8px; }
  .titre-edit { font-size: 20px; }
  .tab-tete-outils { width: 100%; margin-left: 0; flex-wrap: nowrap; }
  .vues { flex: 1; overflow-x: auto; }
  .vue-onglet span { display: none; }
  .vue-onglet { flex: 1; justify-content: center; }
  .btn-filtre span:not(.pastille-compte) { display: none; }
  .kanban { padding: 12px; gap: 12px; scroll-snap-type: x mandatory; }
  .liste, .ajout-liste { flex-basis: min(86vw, 320px); scroll-snap-align: center; }
  .liste-repliee { flex-basis: 46px; }
  .voile-carte { padding: 0; }
  .fenetre-carte { min-height: 100%; border-radius: 0; border-width: 0; box-shadow: none; }
  .fc-corps { grid-template-columns: 1fr; padding: 12px 14px 32px; }
  .fc-cote { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fc-cote h4, .fc-infos { grid-column: 1 / -1; }
  .fc-meta, .fc-termine { padding-left: 0; margin-left: 0; }
  .fc-section > :not(header) { margin-left: 0; }
  .fc-titre-champ { font-size: 21px; }
  .fenetre-carte { max-width: 100vw; overflow-x: hidden; }
  .fc-barre { padding: 10px 10px 0 14px; }
  .reglages-mise, .roles-mise { grid-template-columns: 1fr; }
  .reglages-nav { position: static; display: flex; overflow-x: auto; gap: 4px; }
  .reglages-nav a { white-space: nowrap; }
  .form-tableau, .deux-col { grid-template-columns: 1fr; }
  .champ-reglage-ligne { grid-template-columns: 1fr 1fr; }
  .profil-ident { grid-template-columns: 1fr; }
  .connexion { grid-template-columns: 1fr; }
  .connexion-marque { padding: 28px 20px; border-right: 0; border-bottom: 3px solid var(--encre); }
  .connexion-colonnes { display: none; }
  .cal-jour { min-height: 74px; padding: 3px; }
  .cal-carte .cal-heure, .cal-carte .avatar { display: none; }
  .stat-grille { grid-template-columns: 1fr; }
  .gantt-ligne, .gantt-groupe { grid-template-columns: 140px max-content; }
  .gantt-fond-place { left: 140px; }
  .nav-periode h2 { min-width: 0; font-size: 16px; }
  .toasts { left: 16px; right: 16px; bottom: 12px; justify-items: stretch; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- OrluQG (site admin) ---------- */
body.qg { overflow: auto; background-image: var(--trame); background-size: 9px 9px; background-attachment: fixed; }
.qg-scene { display: block; padding-top: var(--barre-h); min-height: 100vh; }
.qg-nav { display: flex; gap: 4px; }
.qg-nav a { display: flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 3px; border: 2px solid transparent; color: var(--creme-2); text-decoration: none; font: 700 13px var(--f-titre); text-transform: uppercase; letter-spacing: .05em; }
.qg-nav a:hover { color: var(--creme); background: var(--fenetre); }
.qg-nav a.actif { background: var(--accent); color: var(--encre); border-color: var(--encre); box-shadow: var(--ombre-p); }
.qg-mise { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.qg-principal { display: grid; gap: 26px; min-width: 0; }
.qg-cote { display: grid; gap: 18px; position: sticky; top: calc(var(--barre-h) + 16px); }
.qg-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.qg-grille-rust { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.qg-tuile { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 12px; background: var(--fenetre); border: 3px solid var(--encre); border-radius: 5px; box-shadow: var(--ombre); color: var(--creme); text-decoration: none; transition: transform .1s, box-shadow .1s; overflow: hidden; }
.qg-tuile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c); border-right: 2px solid var(--encre); }
.qg-tuile:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--encre); }
.qg-tuile > * { margin-left: 4px; }
.qg-tuile p { margin: 0; font-size: 13px; color: var(--creme-2); line-height: 1.45; }
.qg-tuile footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.qg-ico { width: 40px; height: 40px; border-radius: 6px; display: grid; place-items: center; background: var(--case); border: 2px solid var(--encre); font-size: 21px; flex: none; }
.qg-ico.petit { width: 30px; height: 30px; font-size: 16px; }
.qg-tuile .qg-ico { position: absolute; top: 12px; right: 12px; }
.qg-titre { display: grid; gap: 1px; min-width: 0; padding-right: 48px; }
.qg-titre strong { font: 700 18px/1.15 var(--f-titre); text-transform: uppercase; letter-spacing: .02em; display: flex; align-items: center; gap: 6px; }
.qg-titre small { font: 500 11px var(--f-mono); color: var(--creme-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qg-prive { color: var(--creme-3); display: inline-grid; }
.qg-detail { position: absolute; right: 8px; bottom: 34px; opacity: 0; }
.qg-tuile:hover .qg-detail, .qg-tuile:focus-within .qg-detail { opacity: 1; }
.qg-etat { display: inline-flex; align-items: center; gap: 7px; font: 500 12px var(--f-mono); color: var(--creme-2); white-space: nowrap; }
.qg-etat i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--encre); background: var(--creme-3); flex: none; }
.qg-etat.ok i { background: var(--ok); box-shadow: 0 0 0 3px rgba(143,224,166,.16); }
.qg-etat.lent i { background: var(--jaune); }
.qg-etat.alerte i, .qg-etat.panne i { background: var(--bug); animation: clignote 1.2s infinite; }
.qg-etat.panne, .qg-etat.alerte { color: var(--bug); }
.qg-etat.attente i { background: var(--bleu); animation: clignote 1.2s infinite; }
.qg-dispo { font: 500 12px var(--f-mono); color: var(--creme-3); }
.qg-frise { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; height: 14px; }
.qg-frise i { border-radius: 2px; background: var(--ok); }
.qg-frise i.ko { background: var(--bug); }
.qg-frise i.vide { background: var(--case); }
.qg-rust { display: grid; gap: 12px; padding: 16px; background: var(--fenetre); border: 3px solid var(--encre); border-radius: 6px; box-shadow: 5px 5px 0 var(--encre); position: relative; overflow: hidden; }
.qg-rust::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--c); border-bottom: 2px solid var(--encre); }
.qg-rust.panne, .qg-rust.alerte { border-color: var(--bug); }
.qg-rust header { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.qg-rust header .qg-titre { flex: 1; padding: 0; }
.qg-rust-chiffres { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.qg-joueurs-gros { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.qg-joueurs-gros strong { font: 500 46px/1 var(--f-mono); color: var(--creme); }
.qg-joueurs-gros span { color: var(--creme-2); font-size: 14px; }
.qg-joueurs-gros em { font-style: normal; font: 500 12px var(--f-mono); background: var(--accent); color: var(--encre); padding: 1px 6px; border-radius: 3px; border: 1px solid var(--encre); }
.qg-rust dl { display: grid; grid-template-columns: auto auto; gap: 2px 12px; margin: 0; font-size: 12.5px; }
.qg-rust dt { color: var(--creme-3); font: 500 10.5px var(--f-mono); text-transform: uppercase; letter-spacing: .08em; align-self: center; }
.qg-rust dd { margin: 0; font: 500 12.5px var(--f-mono); text-align: right; }
.qg-rust footer { display: flex; gap: 8px; flex-wrap: wrap; }
.qg-courbe { position: relative; background: var(--rail); border: 2px solid var(--encre); border-radius: 4px; padding: 4px 4px 0; }
.qg-courbe.vide { padding: 22px 12px; text-align: center; color: var(--creme-3); font-size: 12.5px; }
.qg-svg { display: block; width: 100%; height: auto; overflow: visible; }
.qg-svg .grille { stroke: rgba(245,237,219,.08); stroke-width: 1; }
.qg-svg .axe { fill: var(--creme-3); font: 10px var(--f-mono); }
.qg-svg .aire { fill: var(--c, var(--accent)); opacity: .14; }
.qg-svg .ligne { fill: none; stroke: var(--c, var(--accent)); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.qg-svg .repere { stroke: var(--creme-3); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.qg-svg .point { fill: var(--c, var(--accent)); stroke: var(--rail); stroke-width: 2; }
.boite .qg-courbe { --c: var(--accent); }
.qg-bulle { position: absolute; top: -30px; pointer-events: none; background: var(--creme); color: var(--encre); border: 2px solid var(--encre); border-radius: 3px; padding: 2px 8px; font: 500 12px var(--f-mono); white-space: nowrap; box-shadow: var(--ombre-p); }
.qg-joueurs { display: grid; gap: 2px; max-height: 360px; overflow-y: auto; }
.qg-joueur { display: flex; justify-content: space-between; gap: 10px; padding: 5px 8px; border-radius: 3px; font-size: 13.5px; }
.qg-joueur:nth-child(odd) { background: var(--case); }
.qg-joueur small { font: 500 11.5px var(--f-mono); color: var(--creme-3); white-space: nowrap; }
.qg-bandeau { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border: 3px solid var(--encre); border-radius: 5px; box-shadow: var(--ombre); }
.qg-bandeau strong { display: block; font: 700 20px var(--f-titre); text-transform: uppercase; letter-spacing: .03em; }
.qg-bandeau span { font-size: 13px; }
.qg-bandeau.ok { background: var(--ok); color: var(--encre); }
.qg-bandeau.panne { background: var(--bug); color: var(--encre); }
.qg-bandeau.attente { background: var(--fenetre); }
.qg-gros-point { width: 18px; height: 18px; border-radius: 50%; background: var(--encre); flex: none; box-shadow: 0 0 0 5px rgba(10,12,18,.18); }
.qg-bandeau.panne .qg-gros-point, .qg-bandeau.attente .qg-gros-point { animation: clignote 1.2s infinite; }
.qg-bandeau.attente .qg-gros-point { background: var(--bleu); }
.qg-annonce { background: var(--fenetre); border: 3px solid var(--encre); border-left: 8px solid var(--accent); border-radius: 5px; box-shadow: var(--ombre); padding: 12px 16px; display: grid; gap: 8px; }
.qg-annonce-tete { display: flex; align-items: center; gap: 8px; color: var(--accent); }
.qg-annonce-tete strong { font: 700 14px var(--f-titre); text-transform: uppercase; letter-spacing: .06em; }
.qg-annonce-tete small { color: var(--creme-3); margin-right: auto; }
.qg-mini-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.qg-mini-chiffres a { display: grid; gap: 2px; padding: 9px; background: var(--case); border: 2px solid var(--encre); border-radius: 3px; text-decoration: none; color: var(--creme); }
.qg-mini-chiffres a:hover { border-color: var(--accent); }
.qg-mini-chiffres strong { font: 500 22px/1 var(--f-mono); }
.qg-mini-chiffres span { font-size: 11.5px; color: var(--creme-3); }
.qg-mini-chiffres a.alerte { background: var(--bug); color: var(--encre); }
.qg-mini-chiffres a.alerte span { color: var(--encre); }
.qg-prochaines { display: grid; gap: 4px; }
.qg-prochaines a { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 3px; color: var(--creme); text-decoration: none; font-size: 13px; min-width: 0; }
.qg-prochaines a:hover { background: var(--case); }
.qg-incidents { display: grid; gap: 6px; }
.qg-incident { display: flex; align-items: center; gap: 10px; padding: 7px 9px; background: var(--case); border: 2px solid var(--encre); border-radius: 3px; text-decoration: none; color: var(--creme); }
.qg-incident:hover { border-color: var(--accent); }
.qg-incident strong { display: block; font-weight: 500; font-size: 13.5px; }
.qg-incident small { color: var(--creme-3); font-size: 11.5px; }
.qg-incident.en-cours { border-color: var(--bug); background: rgba(255,123,107,.12); }
.qg-dispo-barre { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1px; height: 30px; }
.qg-dispo-barre i { border-radius: 2px; background: var(--ok); }
.qg-dispo-barre i.partiel { background: var(--accent); }
.qg-dispo-barre i.ko { background: var(--bug); }
.qg-test { min-height: 20px; }
.qg-reglage-cat { display: grid; gap: 8px; }
.qg-reglage-cat h3 { margin: 6px 0 0; display: flex; align-items: center; gap: 8px; font: 700 14px var(--f-titre); text-transform: uppercase; letter-spacing: .05em; color: var(--creme-2); }
.stat-tuile.ok strong { color: var(--ok); }
@media (max-width: 1100px) { .qg-mise { grid-template-columns: 1fr; } .qg-cote { position: static; } }
@media (max-width: 820px) {
  .qg-nav a span { display: none; }
  .qg-grille-rust { grid-template-columns: 1fr; }
  .qg-joueurs-gros strong { font-size: 38px; }
  body.qg .barre { gap: 6px; }
}