:root{ --bg:#0d0f12; --card:#151922; --fg:#e9eef5; --muted:#9fb0c3; --acc:#7cc7ff; --ok:#4ade80; }
*{ box-sizing:border-box; }
body{ margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu; color:var(--fg); background:linear-gradient(180deg,#0b0e12,#0f141b 60%); }
header,footer{ max-width:960px; margin:0 auto; padding:16px; }
header{ display:flex; align-items:center; }
.brand{ text-decoration:none; color:var(--fg); font-weight:700; }
main{ max-width:960px; margin:0 auto; padding:16px; }
.card{ background:var(--card); border:1px solid #222836; border-radius:16px; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.25); margin-bottom:16px; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:720px){ .grid2{ grid-template-columns:1fr; } }
label{ display:block; margin:8px 0 4px; color:var(--muted); }
input,textarea,select{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid #2a3142; background:#0f131a; color:var(--fg); }
button,.btn{ background:var(--acc); color:#03131e; padding:10px 14px; border:none; border-radius:12px; font-weight:700; cursor:pointer; text-decoration:none; display:inline-block; }
.btn{ text-align:center; }
.table{ width:100%; border-collapse:separate; border-spacing:0 6px; }
.table th,.table td{ padding:10px 12px; background:#0f131a; }
.table thead th{ background:#0b0e12; color:var(--muted); text-align:left; }
.table tbody tr td{ border-top:1px solid #202636; border-bottom:1px solid #202636; }
.center{ text-align:center; }
.tabs{ display:flex; gap:8px; margin:8px 0 16px; flex-wrap:wrap; }
.tabs a{ background:#0f131a; padding:8px 12px; border-radius:999px; border:1px solid #2a3142; color:var(--fg); text-decoration:none; }
.flash > div{ background:#1d2636; border:1px solid #2a3142; padding:10px 12px; border-radius:12px; margin:8px 0; }
.muted{ color:var(--muted); }
.badge{ background:var(--ok); color:#07210e; border-radius:999px; padding:2px 8px; font-size:12px; margin-left:8px; }
/* Timetable grid */
:root{ --warn:#f59e0b; }
.tt-grid{ display:grid; grid-template-columns: 80px repeat(var(--cols), 1fr); grid-auto-rows: var(--unit); gap:4px; }
.tt-time{ grid-column:1; background:#0b0e12; color:var(--muted); padding:2px 6px; border-radius:8px; font-size:12px; align-self:stretch; display:flex; align-items:flex-start; }
.tt-stage{ grid-column: span 1; background:#0b0e12; color:var(--fg); padding:8px; border-radius:12px; font-weight:700; text-align:center; position:sticky; top:0; z-index:1; }
.tt-tile{ margin:0; padding:0; border-radius:12px; overflow:hidden; border:1px solid #2a3142; background:#0f131a; }
.tt-btn{ width:100%; height:100%; background:transparent; color:var(--fg); padding:8px; cursor:pointer; text-align:left; }
.tt-tile.is-chosen{ outline:2px solid var(--ok); }
.tt-tile.is-conflict{ background:#1f1403; border-color:#3b2a06; box-shadow: inset 0 0 0 2px var(--warn); }
@media (max-width: 900px){ .tt-grid{ grid-template-columns: 56px repeat(var(--cols), 1fr); } .tt-time{ font-size:10px; padding:2px; } }
/* ==== Palette scènes (douce, contrastée) ==== */
:root{
  --chateau:   #6ea8fe;  /* blue */
  --mediator:  #b18fff;  /* lavender */
  --terminal:  #7dd3fc;  /* sky */
  --craft:     #f9b956;  /* amber */
  --decouv:    #fb7185;  /* rose */
}

/* léger fond coloré + bord assorti, adapté au mode sombre */
.tt-stage[data-stage="Scène Château"],
.tt-tile[data-stage="Scène Château"]{
  --c: var(--chateau);
}
.tt-stage[data-stage="Scène Médiator"],
.tt-tile[data-stage="Scène Médiator"]{
  --c: var(--mediator);
}
.tt-stage[data-stage="Scène Terminal"],
.tt-tile[data-stage="Scène Terminal"]{
  --c: var(--terminal);
}
.tt-stage[data-stage="Scène Craft"],
.tt-tile[data-stage="Scène Craft"]{
  --c: var(--craft);
}
.tt-stage[data-stage="Scène Découverte"],
.tt-tile[data-stage="Scène Découverte"]{
  --c: var(--decouv);
}
.tt-tile[data-stage]{ box-shadow: inset 0 0 0 1px var(--c); } /* filet de couleur garanti */

/* en-têtes de scène colorés (subtils) */
.tt-stage{
  background: color-mix(in oklab, var(--c) 18%, transparent);
  border: 1px solid color-mix(in oklab, var(--c) 40%, #2a3142);
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  border-radius: 12px;
}

/* tuiles par scène : fond très léger + bord */
.tt-tile{
  background: color-mix(in oklab, var(--c, #0f131a) 12%, #0f131a);
  border-color: color-mix(in oklab, var(--c, #2a3142) 35%, #2a3142);
}

/* sélection : vert + surlignage de la scène */
.tt-tile.is-chosen{
  outline: 2px solid var(--ok);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--c, #fff) 40%, transparent),
    0 6px 18px rgba(0,0,0,.25);
}

/* conflit : garde le code couleur scène, mais ajoute un liseré warn */
.tt-tile.is-conflict{
  box-shadow: inset 0 0 0 2px var(--warn);
}

/* lisibilité: texte des titres dans les tuiles légèrement plus lumineux */
.tt-btn strong{ filter: brightness(1.15); }

/* Tuile = contexte de positionnement */
.tt-tile{ position: relative; }

/* Badge compteur: petit, coin haut-droit, couleur de la scène assombrie */
.tt-badge{
  position: absolute; top:6px; right:6px;
  min-width: 22px; height: 20px; padding: 0 6px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 20px;
  cursor: pointer;
  color: #f1f5f9;
  border: 1px solid color-mix(in oklab, var(--c, #94a3b8) 45%, #0b0e12);
  background: color-mix(in oklab, var(--c, #64748b) 32%, #0b0e12);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* Popover “qui y va” */
.who{ position: absolute; top: 28px; right: 6px; z-index: 20; }
.who-pop{
  width: 220px; max-height: 220px; overflow: auto;
  background:#0f131a; color:#e9eef5;
  border:1px solid #2a3142; border-radius:12px; padding:10px;
  box-shadow: 0 12px 24px rgba(0,0,0,.45);
}
.who-title{ font-weight:700; margin-bottom:6px; }
.who-list{ margin:0; padding-left:18px; }
.who-empty{ color:var(--muted); }
.who-close{
  margin-top:8px; width:100%; padding:6px 8px;
  border-radius:8px; border:1px solid #2a3142;
  background:#10151d; color:#e9eef5; cursor:pointer;
}

/* (déjà présent) couleurs par scène : --c portée par data-stage sur la tuile */
.tt-tile[data-stage="Scène Château"]    { --c: var(--chateau); }
.tt-tile[data-stage="Scène Médiator"]   { --c: var(--mediator); }
.tt-tile[data-stage="Scène Terminal"]   { --c: var(--terminal); }
.tt-tile[data-stage="Scène Craft"]      { --c: var(--craft); }
.tt-tile[data-stage="Scène Découverte"] { --c: var(--decouv); }

/* Laisse sortir le popover de la tuile */
.tt-tile{ overflow: visible !important; }

/* S'assure que le popover passe au-dessus */
.who{ z-index: 50; }
.who-pop{ z-index: 60; }

.card {
  display: inline-block; /* la card prend juste la largeur de son contenu */
  width: auto;           /* pas de largeur forcée */
}

/* ----- Admin cards: même largeur ----- */
/* On force les cards d'admin à être des blocs pleine largeur (indépendant des cards du schedule) */
.admin-card {
  display: block;
  width: 100%;
  max-width: 920px;  /* ajuste si tu veux un peu plus large/étroit */
  margin-inline: 0;  /* aligne avec ton layout actuel */
}

/* Liste des membres : boutons alignés à droite, sans puces */
.members-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.member-row {
  display: flex;
  align-items: center;
  justify-content: space-between; /* nom à gauche, bouton à droite */
  gap: 12px;
  padding: 6px 0;
}
.member-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* S'assure que le bouton danger a un contraste correct (si besoin) */
/* .btn.danger { color:#fff; }  -> tu l'as déjà dans ton thème */

/* ====== Page Join (sélecteur + nouveau membre) ====== */

/* Même largeur et centrage pour les deux cards */
.join-card {
  display: block;
  width: 100%;
  max-width: 720px;         /* ajuste si tu veux plus/moins large */
  margin-inline: auto;      /* centre les cards */
}

/* Harmoniser <details class="card join-card"> avec une card “fermée/ouvert” */
details.card.join-card {
  padding: 0;               /* on gère l’intérieur via summary + corps */
  overflow: hidden;
}
details.card.join-card > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  border-bottom: 1px solid #2a3142;
}
details.card.join-card > summary::-webkit-details-marker { display: none; }
/* petit caret */
details.card.join-card > summary::after {
  content: "▾";
  transition: transform .2s ease;
  opacity: .8;
}
details.card.join-card[open] > summary::after { transform: rotate(180deg); }

/* Corps du volet (le form qui suit le summary) */
details.card.join-card > form,
details.card.join-card > *:not(summary) {
  padding: 16px 18px;
}

/* Mise en page des deux formulaires */
.join-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}
.join-card select,
.join-card input[type="text"],
.join-card input:not([type]) {
  min-width: 220px;
}

/* Petit gap vertical entre les 2 cards */
.join-gap { height: 12px; }
.btn:hover { filter:brightness(0.97); }
.btn-primary { background:#2563eb; color:#fff; border-color:#2563eb; }
.btn-primary:hover { filter:brightness(0.95); }


/* Cartes covoiturage */
.carpool-card { border-radius: 10px; padding: .75rem; }
.carpool-card .car-header {
  display:flex; align-items:center; justify-content:space-between;
  font-size: 1.05rem; margin-bottom: .35rem;
}
.carpool-card .badge {
  font-size: .8rem; padding: .1rem .4rem; border-radius: 6px;
  background: #fff; border: 1px solid rgba(0,0,0,.08);
}
.carpool-card .car-body > div { margin: .15rem 0; }
.carpool-card .car-actions {
  display:flex; gap:.5rem; margin-top: .5rem; flex-wrap: wrap;
}

/* Boutons */
.btn:disabled { opacity:.55; cursor:not-allowed; }
.btn-primary { background:#2563eb; color:#fff; border-color:#2563eb; }
.btn-primary:hover:not(:disabled) { filter:brightness(0.95); }
.btn-ghost { background:transparent; }
.btn-danger { background:#ef4444; color:#fff; border-color:#ef4444; }
.btn-danger:hover:not(:disabled) { filter:brightness(0.95); }

/* 2 colonnes responsive */
.two-cols { display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 860px) { .two-cols { grid-template-columns: 1fr; } }

/* Liste de tiles (même structure que schedule) */
.tiles { display: grid; gap: .6rem; }

/* Coloration par conducteur (via --ride-hue définie inline) */
.tile.ride {
  border-left: 6px solid hsl(var(--ride-hue, 200), 75%, 45%);
  background: hsl(var(--ride-hue, 200), 90%, 97%);
}
.tile.ride .dot {
  width: .75rem; height: .75rem; border-radius: 50%;
  background: hsl(var(--ride-hue, 200), 75%, 45%);
}

/* Ajustements visuels cohérents avec les artistes */
.tile .tile-title { display:flex; align-items:center; gap:.5rem; }
.tile .badge {
  font-size: .78rem; padding: .1rem .4rem; border-radius: 6px;
  background: #fff; border: 1px solid rgba(0,0,0,.08);
}
.tile .tile-subtitle { opacity: .8; margin-top: .15rem; }
.tile .tile-meta { margin-top: .25rem; font-size: .95rem; }

/* Actions à droite, vertical sur mobile */
.tile .tile-actions {
  display:flex; gap:.4rem; align-items:center; flex-wrap:wrap;
}
@media (max-width: 860px) {
  .tile .tile-actions { margin-top: .35rem; }
}



/* === Covoiturage (scope local) ================================== */
.carpool-scope .two-cols { display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 860px){ .carpool-scope .two-cols { grid-template-columns: 1fr; } }

.carpool-scope .tiles { display:grid; gap:.6rem; }

/* Carte véhicule dédiée (ne touche pas aux .tile/.tt-tile existantes) */
.carpool-scope .carpool-tile{
  display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
  padding:10px;
  background: var(--card, #151922);
  border: 1px solid #222836;
  border-radius:12px;
}

/* Coloration par conducteur (teinte douce, texte lisible) */
.carpool-scope .carpool-tile.ride{
  --c: hsl(var(--ride-hue, 200), 75%, 55%);
  background: color-mix(in oklab, var(--c) 12%, var(--card, #151922));
  border-color: color-mix(in oklab, var(--c) 35%, #222836);
  border-left: 6px solid color-mix(in oklab, var(--c) 45%, #222836);
}
@supports not (background: color-mix(in oklab, red 10%, black)) {
  .carpool-scope .carpool-tile.ride{
    background: rgba(255,255,255,.03);
    border-left: 6px solid var(--c);
  }
}

.carpool-scope .carpool-left { display:flex; align-items:center; justify-content:center; }
.carpool-scope .carpool-dot  { width:.75rem; height:.75rem; border-radius:50%; background: var(--c); }

.carpool-scope .title-row { display:flex; align-items:center; gap:.5rem; }
.carpool-scope .badge     { font-size:.78rem; padding:.1rem .4rem; border-radius:6px;
                             background:#0b1118; border:1px solid #2a3142; opacity:.85; }
.carpool-scope .subtitle  { opacity:.8; margin-top:.15rem; }
.carpool-scope .meta      { margin-top:.25rem; font-size:.95rem; }

/* Actions */
.carpool-scope .actions { display:flex; gap:.4rem; flex-wrap:wrap; justify-self:end; }
.carpool-scope .btn--ghost { background:transparent; border:1px solid #2a3142; color: inherit; }
.carpool-scope .btn--danger{ background:#ef4444; color:#fff; border:1px solid #ef4444; }
.carpool-scope .btn--danger:hover{ filter:brightness(0.95); }

/* Lisibilité du badge "Ma voiture" sur fond sombre (scope carpool) */
.carpool-scope .badge{
  background:#fff;
  color:#0e1117;
  border: none;
  font-weight: 700;
}