/* ============================================================
   Le Nexus | Hub Civ FR — style.css
   ============================================================ */
:root {
    --v1: #400080; --v2: #6040A0; --v3: #A080C0;
    --or: #FFC54A; --or2:#D4A030;
    --fond: #0D0B14; --c1: #17132A; --c2: #211C38; --c3: #2A2245;
    --txt: #E8E8E8; --att: #9080B0;
    --bord: rgba(255,197,74,.45);
    --rouge: #D25555; --vert: #4CB783;
    --ombre: 0 4px 24px rgba(0,0,0,.6);
    --glow: 0 0 18px rgba(192,120,255,.18);
}
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:Verdana,Geneva,sans-serif; background:var(--fond); color:var(--txt); font-size:.9rem; line-height:1.75; min-height:100vh; }
.conteneur { max-width:1000px; margin:0 auto; padding:0 24px 80px; }
a { color:var(--or); transition:color .15s; }
a:hover { color:#ffd97a; text-decoration:underline; }
h1 { font-size:1.7rem; color:var(--or); margin:28px 0 16px; padding-bottom:12px; border-bottom:2px solid rgba(255,197,74,.4); letter-spacing:.3px; }
h2 { font-size:1.1rem; color:var(--v3); margin:20px 0 10px; }
h3 { font-size:.95rem; color:var(--txt); margin:14px 0 6px; }
p  { margin-bottom:.8rem; text-align:justify; text-align-last:left; }
hr { border:none; border-top:1px solid rgba(255,197,74,.35); margin:22px 0; }

/* ---- Header (cadre unique, sans traits entre les lignes) ---- */
.site-header {
    background:linear-gradient(135deg,#0D0B14 0%,#17132A 100%);
    border:1px solid rgba(255,197,74,.35);
    border-radius:14px;
    position:sticky; top:12px; z-index:100;
    box-shadow:0 6px 28px rgba(0,0,0,.55);
    max-width:1000px;
    margin:12px auto 24px;
}
.entete-haut { max-width:1000px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 24px; flex-wrap:wrap; }
.barre-haut { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.logo { font-weight:bold; color:var(--or); text-decoration:none; display:flex; align-items:center; gap:8px; }
.logo img { height:34px; filter:drop-shadow(0 0 6px rgba(255,197,74,.4)); }
.logo:hover { text-decoration:none; color:var(--or); }
nav { display:flex; gap:4px; flex-wrap:wrap; }
nav > a { color:var(--att); font-size:.9rem; font-weight:bold; text-decoration:none; padding:7px 14px; border-radius:6px; transition:all .15s; display:inline-block; }
nav > a:hover { color:var(--or); text-decoration:none; }
nav > a.actif { color:var(--or); text-decoration:none; box-shadow:inset 0 -2px 0 var(--or); }
/* Les liens Modération/Admin (ligne 3) sont dans un <div>, pas un <nav> :
   sélecteur sans "nav >" sinon il ne matche jamais. */
a.nav-admin, a.nav-admin.actif { color:var(--rouge) !important; font-weight:bold; text-decoration:none; padding:7px 14px; border-radius:6px; box-shadow:none !important; }
a.nav-admin:hover, a.nav-admin.actif:hover { color:#e88080 !important; text-decoration:none; }
.compte-utilisateur { display:flex; align-items:center; gap:10px; font-size:.85rem; color:var(--att); border:1px solid rgba(255,197,74,.3); border-radius:8px; padding:6px 12px; }
.avatar-discord { width:30px; height:30px; border-radius:50%; border:2px solid rgba(255,197,74,.5); object-fit:cover; flex-shrink:0; }
.nav-user { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.nav-user-identite { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; color:var(--att); font-size:.85rem; }
.nav-user-identite strong { color:var(--txt); }
.nav-user-actions { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }
.compte-utilisateur strong { color:var(--txt); }
.bouton-connexion { background:linear-gradient(135deg,var(--or),var(--or2)); color:#0D0B14; padding:7px 16px; border-radius:6px; font-weight:bold; font-size:.85rem; text-decoration:none; transition:all .15s; box-shadow:0 2px 10px rgba(255,197,74,.25); display:inline-block; }
.bouton-connexion:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(255,197,74,.4); text-decoration:none; color:#0D0B14; }
.bouton-deco { color:var(--att); font-size:.82rem; text-decoration:none; padding:4px 8px; border-radius:4px; transition:all .12s; }
.bouton-deco:hover { color:var(--rouge); background:rgba(210,85,85,.1); text-decoration:none; }
.bouton-profil { color:var(--txt); font-weight:bold; font-size:.83rem; border:1px solid rgba(255,197,74,.4); padding:6px 14px; border-radius:6px; }
.bouton-profil:hover { color:var(--or); border-color:var(--or); background:rgba(255,197,74,.1); text-decoration:none; }
.bouton-logout { color:var(--att); border:1px solid rgba(255,197,74,.25); padding:6px 14px; border-radius:6px; }
.bouton-logout:hover { color:var(--txt); border-color:rgba(255,197,74,.5); background:var(--c2); }

/* ---- Dropdown nav ---- */
.nav-dropdown-wrap { position:relative; display:inline-block; }
.nav-dd-trigger { color:var(--att); font-size:.9rem; font-weight:bold; padding:7px 14px; border-radius:6px; cursor:pointer; display:inline-block; transition:all .15s; user-select:none; }
.nav-dd-trigger.actif { color:var(--or); box-shadow:inset 0 -2px 0 var(--or); }
.nav-dropdown-wrap:hover .nav-dd-trigger { color:var(--or); }
.nav-dd-menu { display:none; position:absolute; top:100%; left:0; background:var(--c2); border:1px solid rgba(255,197,74,.5); border-top:2px solid var(--or); border-radius:0 8px 8px 8px; padding:6px; min-width:210px; z-index:200; box-shadow:var(--ombre); }
.nav-dropdown-wrap:hover .nav-dd-menu { display:block; }
.nav-dd-menu a { display:block; padding:8px 12px; color:var(--txt); font-size:.85rem; border-radius:5px; text-decoration:none; transition:all .12s; }
.nav-dd-menu a:hover { background:var(--c3); color:var(--or); }

/* ---- Nav 3 lignes (un seul cadre, pas de traits entre les lignes) ---- */
.nav-ligne-1 { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 24px 6px; margin:0 auto; max-height:120px; overflow:hidden; opacity:1; transition:max-height .25s ease, padding .25s ease, opacity .2s ease; }
.nav-ligne-2 { display:flex; align-items:center; flex-wrap:wrap; padding:6px 24px; gap:4px; margin:0 auto; transition:padding .2s ease; }
.nav-ligne-3 { max-height:80px; overflow:hidden; opacity:1; transition:max-height .25s ease, opacity .2s ease; }
.nav-ligne-3-inner { display:flex; align-items:center; flex-wrap:wrap; padding:0 24px 14px; gap:4px; margin:0 auto; }
.nav-pseudo { color:var(--txt); font-size:.88rem; font-weight:bold; }

/* ---- Nav compact (repliée au scroll : ne reste que la ligne 2) ---- */
.site-header.nav-compact .nav-ligne-1 { max-height:0; padding-top:0; padding-bottom:0; opacity:0; pointer-events:none; }
.site-header.nav-compact .nav-ligne-3 { max-height:0; opacity:0; pointer-events:none; }
.site-header.nav-compact .nav-ligne-2 { padding:10px 24px; }

/* ---- Cartes ---- */
.carte { background:var(--c1); border:1px solid rgba(255,197,74,.45); border-left:3px solid var(--or); border-radius:10px; padding:18px 22px; margin-bottom:14px; box-shadow:var(--ombre); transition:border-color .2s, box-shadow .2s; }
.carte:hover { border-color:rgba(255,197,74,.7); box-shadow:0 4px 24px rgba(0,0,0,.5); }
.carte.or     { border-left:3px solid var(--or); }

/* ---- Messages ---- */
.msg-succes { border-left:3px solid var(--vert)  !important; background:rgba(76,183,131,.08); color:var(--vert);  padding:12px 16px; border-radius:0 6px 6px 0; margin-bottom:14px; font-size:.88rem; }
.msg-erreur { border-left:3px solid var(--rouge) !important; background:rgba(210,85,85,.08);  color:var(--rouge); padding:12px 16px; border-radius:0 6px 6px 0; margin-bottom:14px; font-size:.88rem; }
.msg-info   { border-left:3px solid var(--or)    !important; background:rgba(255,197,74,.05); color:var(--att);  padding:12px 16px; border-radius:0 6px 6px 0; margin-bottom:14px; font-size:.88rem; }

/* ---- Formulaires ---- */
label { display:block; margin:12px 0 4px; font-size:.83rem; color:var(--v3); font-weight:bold; letter-spacing:.2px; }
input[type="text"], input[type="url"], input[type="date"], input[type="number"], input[type="password"], input[type="time"],
select, textarea { background:var(--c2); color:var(--txt); border:1px solid rgba(255,197,74,.35); border-radius:6px; padding:9px 12px; font-family:Verdana,sans-serif; font-size:.88rem; width:100%; max-width:520px; outline:none; transition:border-color .15s, box-shadow .15s; }
input, select, textarea { outline: none !important; }
input:focus, select:focus, textarea:focus { outline: none !important; border-color: var(--or) !important; box-shadow: 0 0 0 2px rgba(255,197,74,.15) !important; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none !important; }
textarea { resize:vertical; max-width:100%; }

/* Radio / Checkbox custom */
.choix-role { display:flex; gap:12px; margin:12px 0; flex-wrap:wrap; }
.choix-role label { display:flex; align-items:center; gap:8px; cursor:pointer; margin:0; background:var(--c2); border:2px solid rgba(255,197,74,.4); border-radius:8px; padding:10px 18px; font-size:.9rem; font-weight:bold; color:var(--att); transition:all .15s; flex:1; min-width:180px; }
.choix-role input[type="radio"] { display:none; }
.choix-role label:has(input:checked) { border-color:var(--or); background:rgba(255,197,74,.1); color:var(--txt); }
.choix-role label:hover { border-color:rgba(255,197,74,.6); color:var(--txt); }

/* ---- Boutons ---- */
button, input[type="submit"] { display:inline-flex; align-items:center; gap:6px; padding:9px 20px; border-radius:6px; border:none; cursor:pointer; font-family:Verdana,sans-serif; font-size:.875rem; font-weight:bold; transition:all .15s; background:linear-gradient(135deg,var(--or),var(--or2)); color:#0D0B14; box-shadow:0 2px 10px rgba(255,197,74,.2); margin-top:12px; }
button:hover, input[type="submit"]:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(255,197,74,.35); }
.secondaire { background:linear-gradient(135deg,var(--v2),var(--v1)); color:#fff; box-shadow:0 2px 10px rgba(96,64,160,.25); }
.secondaire:hover { box-shadow:0 4px 16px rgba(96,64,160,.4); color:#fff; text-decoration:none; }
.danger { background:linear-gradient(135deg,#D25555,#A03333); color:#fff; }
.danger:hover { color:#fff; text-decoration:none; }
.petit  { padding:5px 12px; font-size:.8rem; margin-top:0; }
.transparent { background:transparent; color:var(--att); box-shadow:none; border:1px solid rgba(255,197,74,.35); }
.transparent:hover { background:var(--c2); color:var(--txt); transform:none; box-shadow:none; text-decoration:none; }
.btn { display:inline-flex; align-items:center; gap:6px; padding:9px 20px; border-radius:6px; border:none; cursor:pointer; text-decoration:none; font-weight:bold; font-size:.875rem; transition:all .15s; background:linear-gradient(135deg,var(--or),var(--or2)); color:#0D0B14; box-shadow:0 2px 10px rgba(255,197,74,.2); }
.btn:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(255,197,74,.35); text-decoration:none; color:#0D0B14; }
/* Compound selectors (spécificité plus élevée que .secondaire/.danger/.petit/.transparent
   seuls) pour garantir que ces variantes s'appliquent bien par-dessus le style .btn de base,
   quel que soit l'ordre des classes ou du CSS. */
.btn.secondaire { background:linear-gradient(135deg,var(--v2),var(--v1)); color:#fff; box-shadow:0 2px 10px rgba(96,64,160,.25); }
.btn.danger { background:linear-gradient(135deg,#D25555,#A03333); color:#fff; }
.btn.petit { padding:5px 12px; font-size:.8rem; }
.btn.transparent { background:transparent; color:var(--att); box-shadow:none; border:1px solid rgba(255,197,74,.35); }
.btn.transparent:hover { background:var(--c2); color:var(--txt); transform:none; box-shadow:none; }
.btn.secondaire:hover, .btn.danger:hover { color:#fff; }

/* ---- Tags ---- */
.tag { display:inline-block; padding:3px 10px; border-radius:20px; font-size:.74rem; font-weight:bold; }
.tag-vert   { background:rgba(76,183,131,.15);  color:var(--vert);  border:1px solid rgba(76,183,131,.4); }
.tag-or     { background:rgba(255,197,74,.12);   color:var(--or);   border:1px solid rgba(212,160,48,.5); }
.tag-att    { background:var(--c2); color:var(--att); border:1px solid rgba(255,197,74,.25); }
.tag-violet { background:rgba(96,64,160,.2);     color:var(--v3);   border:1px solid rgba(96,64,160,.4); }
.tag-rouge  { background:rgba(210,85,85,.12);    color:var(--rouge); border:1px solid rgba(210,85,85,.4); }

/* ---- Filtres ---- */
.filtres { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; align-items:center; }
.btn-filtre { background:var(--c2); color:var(--att); border:1px solid rgba(255,197,74,.35); border-radius:6px; padding:6px 14px; font-size:.84rem; cursor:pointer; text-decoration:none; display:inline-block; transition:all .12s; }
.btn-filtre:hover, .btn-filtre.actif { background:rgba(255,197,74,.1); color:var(--or); border-color:var(--or); text-decoration:none; }

/* ---- Grille civilisations ---- */
.grille { display:grid; align-items:stretch; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:16px; margin-bottom:24px; align-items:start; }
.carte-civ { background:var(--c1); border:1px solid rgba(255,197,74,.4); border-radius:10px; overflow:hidden; cursor:pointer; text-decoration:none; color:inherit; display:flex; flex-direction:column; height:100%; transition:all .2s; box-shadow:var(--ombre); }
.carte-civ:hover { border-color:rgba(255,197,74,.7); transform:translateY(-3px); box-shadow:0 8px 30px rgba(0,0,0,.7); text-decoration:none; }
.carte-civ-img { width:100%; height:155px; object-fit:cover; display:block; flex-shrink:0; }
.carte-civ-corps { flex:1; padding:14px 16px; }
.carte-civ-titre { font-weight:bold; color:var(--or); font-size:.95rem; margin-bottom:4px; }
.carte-civ-date  { font-size:.78rem; color:var(--att); margin-bottom:7px; }
.carte-civ-desc  { font-size:.84rem; margin-bottom:10px; color:var(--txt); opacity:.85; }
.carte-civ-note  { font-size:.8rem; color:var(--or); margin-top:6px; }
.nom-global { font-size:.8rem; color:var(--att); margin-bottom:4px; }
.version    { font-size:.75rem; color:var(--v3); background:rgba(96,64,160,.2); padding:1px 7px; border-radius:10px; display:inline-block; margin-left:4px; }

/* ---- Tableaux ---- */
table { width:100%; border-collapse:collapse; font-size:.87rem; margin-bottom:20px; }
th { background:var(--c2); color:var(--v3); padding:10px 14px; text-align:left; border-bottom:1px solid rgba(255,197,74,.3); border-left:3px solid var(--or); font-size:.78rem; text-transform:uppercase; letter-spacing:.5px; }
td { padding:10px 14px; border-bottom:1px solid rgba(255,197,74,.2); vertical-align:top; color:var(--txt); }
tr:last-child td { border-bottom:none; }
tr:hover td { background:rgba(255,255,255,.02); }

/* ---- Blocs éditeur ---- */
.bloc-contenu { margin-bottom:10px; }
.preview-md { background:var(--c3); border:1px solid rgba(255,197,74,.25); border-radius:6px; padding:10px 14px; margin-top:6px; font-size:.87rem; min-height:38px; color:var(--txt); line-height:1.6; }
.sauvegarde-info { font-size:.77rem; color:var(--att); margin-left:10px; }

/* ---- Fondateurs ---- */
.fondateur-ligne { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.fondateur-ligne input { max-width:240px; margin-top:0; }
.verif-result { font-size:.82rem; }

/* ---- Bloc civ passée ---- */
.bloc-civ-passee { background:var(--c2); border:1px solid rgba(255,197,74,.4); border-left:3px solid var(--or); border-radius:8px; padding:16px 20px; margin-bottom:12px; position:relative; }
.bloc-civ-passee .num-civ { position:absolute; top:12px; right:16px; font-size:.75rem; color:var(--att); background:var(--c3); padding:2px 8px; border-radius:10px; }

/* ---- Popup ---- */
.popup-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.75); z-index:1000; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.popup-overlay.actif { display:flex; }
.popup-boite { background:var(--c1); border:1px solid rgba(255,197,74,.5); border-top:3px solid var(--or); border-radius:12px; padding:28px 32px; max-width:420px; width:90%; box-shadow:0 20px 60px rgba(0,0,0,.8); animation:popupIn .2s ease; }
@keyframes popupIn { from { transform:scale(.92); opacity:0; } to { transform:scale(1); opacity:1; } }
.popup-boite p { color:var(--txt); font-size:.95rem; margin-bottom:20px; }
.popup-boite .popup-titre { font-weight:bold; color:var(--or); margin-bottom:10px; }
.popup-actions { display:flex; gap:10px; justify-content:flex-end; }

/* ---- Candidature admin ---- */
.candidature-detail { background:var(--c2); border:1px solid rgba(255,197,74,.4); border-left:3px solid var(--or); border-radius:8px; padding:16px 20px; margin-top:12px; display:none; }
.candidature-detail.ouverte { display:block; }
.candidature-detail h3 { color:var(--or); margin-bottom:12px; font-size:1rem; }
.detail-champ { margin-bottom:10px; background:var(--c2); border:1px solid rgba(255,197,74,.25); border-left:2px solid rgba(255,197,74,.6); border-radius:6px; padding:8px 12px; }
.detail-champ .label { font-size:.78rem; color:var(--att); text-transform:uppercase; letter-spacing:.4px; margin-bottom:3px; }
.detail-champ .valeur { color:var(--txt); font-size:.9rem; }
.badge-nb { display:inline-flex; align-items:center; justify-content:center; background:var(--v2); color:#fff; width:22px; height:22px; border-radius:50%; font-size:.75rem; font-weight:bold; margin-left:8px; }

/* ---- Inscriptions ---- */
.inscriptions-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:20px; font-size:.8rem; font-weight:bold; }
.inscriptions-ouvert  { background:rgba(76,183,131,.15);  color:var(--vert);  border:1px solid rgba(76,183,131,.4); }
.inscriptions-ferme   { background:rgba(210,85,85,.1);    color:var(--rouge); border:1px solid rgba(210,85,85,.3); }
.inscriptions-termine { background:var(--c2); color:var(--att); border:1px solid rgba(255,197,74,.25); }

/* ---- Étoiles ---- */
.etoiles { font-size:1.1rem; letter-spacing:1px; display:inline-flex; }
.e-pleine { color:var(--or); }
.e-vide   { color:var(--c3); }
.e-demi   { position:relative; display:inline-block; color:var(--c3); }
.e-demi::after { content:'★'; position:absolute; top:0; left:0; color:var(--or); clip-path:inset(0 50% 0 0); }

/* ---- Avis ---- */
.avis-liste { margin-top:16px; }
.avis-item  { background:var(--c2); border:1px solid rgba(255,197,74,.35); border-left:3px solid var(--or); border-radius:8px; padding:14px 16px; margin-bottom:10px; }
.avis-meta  { display:flex; align-items:center; gap:12px; margin-bottom:6px; font-size:.82rem; color:var(--att); }
.avis-texte { font-size:.88rem; color:var(--txt); }

/* ---- Aperçu carte ---- */
.apercu-carte-civ { background:var(--c1); border:1px solid rgba(255,197,74,.45); border-left:3px solid var(--or); border-radius:10px; overflow:hidden; max-width:320px; }
.apercu-carte-civ .corps { padding:14px 16px; }
.apercu-carte-civ .titre { font-weight:bold; color:var(--or); font-size:.95rem; margin-bottom:4px; }
.apercu-carte-civ .desc  { font-size:.84rem; color:var(--txt); opacity:.85; margin-bottom:10px; }

/* ---- Calendrier ---- */
.cal-mois-grid   { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:20px; }
.cal-mois-header { text-align:center; font-size:.75rem; color:var(--att); padding:6px 0; font-weight:bold; text-transform:uppercase; }
.cal-jour { background:var(--c1); border:1px solid rgba(255,197,74,.3); border-radius:4px; min-height:70px; padding:4px 6px; min-width:0; overflow:hidden; }
.cal-jour.autre-mois { opacity:.25; }
.cal-jour.aujourd-hui { border-color:var(--or); }
.cal-num-jour { font-size:.75rem; color:var(--att); margin-bottom:3px; }
.cal-jour.aujourd-hui .cal-num-jour { color:var(--or); font-weight:bold; }
.cal-event { font-size:.68rem; font-weight:bold; color:#fff; border-radius:3px; padding:1px 5px; margin-bottom:2px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-decoration:none; display:block; max-width:100%; }
.cal-semaine-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:20px; }
.cal-semaine-col  { background:var(--c1); border:1px solid rgba(255,197,74,.35); border-top:2px solid var(--or); border-radius:6px; padding:8px 6px; min-height:120px; min-width:0; overflow:hidden; }
.cal-semaine-col.aujourd-hui { border-color:var(--or); }
.cal-semaine-header { font-size:.78rem; font-weight:bold; text-align:center; margin-bottom:8px; color:var(--att); }
.cal-semaine-col.aujourd-hui .cal-semaine-header { color:var(--or); }
.cal-event-semaine { font-size:.72rem; font-weight:bold; color:#fff; border-radius:4px; padding:3px 6px; margin-bottom:4px; text-decoration:none; display:block; line-height:1.3; overflow:hidden; text-overflow:ellipsis; }
.legende { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.legende-item { display:flex; align-items:center; gap:7px; font-size:.82rem; }
.legende-couleur { width:14px; height:14px; border-radius:3px; flex-shrink:0; }

/* ---- Jours actifs ---- */
.jours-semaine { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.jour-label { display:flex; align-items:center; gap:6px; background:var(--c2); border:2px solid rgba(255,197,74,.35); border-radius:6px; padding:7px 14px; font-size:.87rem; color:var(--att); cursor:pointer; transition:all .15s; user-select:none; }
.jour-label input { display:none; }
.jour-label.actif { border-color:var(--or); background:rgba(255,197,74,.1); color:var(--txt); }
.jour-label:hover { border-color:rgba(255,197,74,.6); color:var(--txt); }

/* ---- Note selector (avis) ---- */
.note-selector { display:flex; gap:8px; margin:8px 0 16px; flex-wrap:wrap; }
.note-label { display:flex; align-items:center; gap:4px; cursor:pointer; background:var(--c2); border:2px solid rgba(255,197,74,.35); border-radius:6px; padding:7px 14px; font-size:.9rem; font-weight:bold; color:var(--att); transition:all .15s; }
.note-label input { display:none; }
.note-label:has(input:checked) { border-color:var(--or); background:rgba(255,197,74,.1); color:var(--or); }

/* ---- Footer ---- */
.pied-de-page { margin-top:50px; padding:14px 0; border-top:2px solid rgba(255,197,74,.35); text-align:center; font-size:.78rem; color:var(--att); }
.pied-de-page a { color:var(--att); }
.pied-de-page a:hover { color:var(--or); }

/* ---- Barre de chargement ---- */
#barre-chargement { position:fixed; top:0; left:0; height:3px; width:0%; background:linear-gradient(90deg,var(--v2),var(--or),var(--v3)); z-index:9999; transition:width .3s ease; box-shadow:0 0 10px var(--or); }

/* ---- Transitions de page ----
   Fondu + léger glissement à l'arrivée (CSS pur, fonctionne même
   sans JS). Fondu de sortie avant de quitter la page, uniquement
   pour les clics sur des liens internes (JS ajoute .page-sortie
   au body, attend la fin du fondu, puis navigue). Voir le script
   en bas de footer.php. */
body { animation:entree-page .3s cubic-bezier(.4,0,.2,1); }
@keyframes entree-page { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
body.page-sortie { opacity:0; transition:opacity .2s ease-in-out; }

/* ---- Compteurs ---- */
.compteur-chars { display:block; text-align:right; font-size:.72rem; color:var(--att); margin-top:3px; margin-bottom:4px; opacity:.7; transition:color .15s, opacity .15s; }
.compteur-chars.proche { color:var(--or); opacity:1; }
.compteur-chars.limite { color:var(--rouge); opacity:1; font-weight:bold; }

/* ---- Section preview ---- */
.section-preview { border-left:3px solid var(--or); padding-left:16px; margin:20px 0; }
.section-preview h3 { color:var(--v3); font-size:.85rem; text-transform:uppercase; letter-spacing:.4px; margin-bottom:10px; }
.grille-publi { display:grid; grid-template-columns:1fr 310px; gap:24px; align-items:start; }
.apercu-lateral { position:sticky; top:80px; }
@media (max-width:800px) { .grille-publi { grid-template-columns:1fr; } .apercu-lateral { position:static; } }

/* ---- Responsive ---- */
@media (max-width:680px) { .entete-haut { flex-direction:column; align-items:flex-start; } .grille { grid-template-columns:1fr; } h1 { font-size:1.3rem; } }
:focus-visible { outline:2px solid var(--or); outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { * { transition:none !important; animation:none !important; } }

/* ---- Anti-débordement horizontal global ---- */
html { overflow-x:hidden; }
.cal-wrap { max-width:100%; }

/* ---- Chat de groupe ---- */
.zone-chat { max-height:380px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding:12px; background:var(--fond); border-radius:8px; border:1px solid rgba(255,197,74,.25); }
.bulle-chat { max-width:75%; background:var(--c2); border-radius:10px; padding:8px 12px; align-self:flex-start; display:flex; flex-direction:column; gap:2px; }
.bulle-chat.bulle-mine { align-self:flex-end; background:var(--v2); }
.bulle-auteur { font-size:.76rem; font-weight:bold; color:var(--or); }
.bulle-mine .bulle-auteur { color:#f0e6ff; }
.bulle-texte { font-size:.88rem; color:var(--txt); word-break:break-word; white-space:pre-wrap; }
.bulle-heure { font-size:.68rem; color:var(--att); align-self:flex-end; }
.bulle-mine .bulle-heure { color:rgba(255,255,255,.65); }
.zone-chat:empty::after { content:'Aucun message pour le moment. Sois le premier à écrire !'; color:var(--att); font-size:.83rem; text-align:center; margin:auto; }