:root {
  --texte: #1c1c1e;
  --texte-2: #5f5f66;
  --bord: rgba(20, 16, 40, 0.10);
  --rayon: 14px;
  --voile: rgba(25, 20, 35, 0.18);
  --verre: rgba(255, 255, 255, 0.48);
  --verre-plein: rgba(255, 255, 255, 0.90);
  --champ: rgba(255, 255, 255, 0.55);
  --aurore: linear-gradient(135deg, #e8d5f2 0%, #f9d9c8 50%, #cfe3f7 100%);
  --ombre: 0 8px 24px rgba(30, 24, 60, 0.16);
}
@media (prefers-color-scheme: dark) {
  :root {
    --texte: #ececf0;
    --texte-2: #a8a8b2;
    --bord: rgba(255, 255, 255, 0.10);
    --voile: rgba(8, 6, 16, 0.55);
    --verre: rgba(24, 22, 32, 0.42);
    --verre-plein: rgba(24, 22, 32, 0.93);
    --champ: rgba(0, 0, 0, 0.28);
    --aurore: linear-gradient(135deg, #2b2342 0%, #3b2334 50%, #1e2a3e 100%);
    --ombre: 0 8px 24px rgba(0, 0, 0, 0.45);
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--aurore) center / cover no-repeat fixed;
  color: var(--texte);
}
a { color: inherit; }

/* Verre dépoli : cartes, boutons et formulaires laissent transparaître le fond. */
.carte, .formulaire, .bouton {
  background: var(--verre);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--bord);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .carte, .formulaire, .bouton { background: var(--verre-plein); }
}

header.barre {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
}
header.barre nav { display: flex; gap: 8px; margin-left: auto; }
.bouton {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: var(--rayon);
  text-decoration: none;
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(30, 24, 60, 0.10);
}
.bouton:hover { border-color: var(--texte-2); }

.colonnes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  padding: 0 18px 24px;
}
@media (max-width: 1400px) {
  .colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .colonnes { grid-template-columns: 1fr; }
}

.carte {
  border-radius: var(--rayon);
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: var(--ombre);
}
.bandeau {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  font-weight: 600;
  font-size: 13px;
}
.bandeau.clair { color: #ffffff; }
.bandeau.sombre { color: #1c1c1e; }
.bandeau .actions { margin-left: auto; display: flex; gap: 8px; opacity: 0; transition: opacity 0.15s; }
.carte:hover .bandeau .actions { opacity: 1; }
.bandeau .actions a { color: inherit; text-decoration: none; }
.bandeau[draggable="true"] { cursor: grab; }
/* Pendant un glisser : chaque colonne devient une zone de dépôt visible,
   y compris les vides (hauteur nulle sinon, impossibles à viser). */
.glisse-en-cours .colonne {
  min-height: 160px;
  border-radius: var(--rayon);
  outline: 2px dashed color-mix(in srgb, var(--texte-2) 50%, transparent);
  outline-offset: -2px;
}
.carte.en-vol { opacity: 0.4; }
.fantome {
  height: 44px;
  border: 2px dashed var(--texte-2);
  border-radius: var(--rayon);
  margin-bottom: 12px;
  opacity: 0.6;
}

ul.liens { list-style: none; margin: 0; padding: 4px 0; }
ul.liens li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px;
  min-height: 28px;
  font-size: 13px;
}
ul.liens li:hover { background: color-mix(in srgb, var(--texte) 8%, transparent); }
ul.liens .ti { font-size: 15px; color: var(--texte-2); width: 17px; text-align: center; flex: none; }
img.icone { width: 15px; height: 15px; object-fit: contain; flex: none; }
a.lien {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}
a.lien:hover { text-decoration: underline; }
a.crayon { opacity: 0; color: var(--texte-2); text-decoration: none; transition: opacity 0.15s; }
ul.liens li:hover a.crayon { opacity: 1; }

.connexion {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.formulaire {
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 22px;
  width: min(440px, calc(100vw - 36px));
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 18px auto;
}
.formulaire h1 { font-size: 18px; margin: 0 0 6px; }
.formulaire label { font-size: 13px; color: var(--texte-2); }
.formulaire input, .formulaire select {
  padding: 8px 10px;
  border: 1px solid var(--bord);
  border-radius: 6px;
  background: var(--champ);
  color: var(--texte);
  font-size: 14px;
}
.formulaire input[type="color"] { padding: 2px; height: 38px; }
.formulaire button {
  margin-top: 8px;
  padding: 9px;
  border: none;
  border-radius: 6px;
  background: #3a79df;
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
}
.formulaire button:hover { filter: brightness(1.08); }
.formulaire button.danger { background: #da2f2f; }
.formulaire button.secondaire {
  background: var(--champ);
  color: var(--texte);
  border: 1px solid var(--bord);
}
.formulaire .aide { font-size: 12px; color: var(--texte-2); margin: 0; }
.erreur { color: #da2f2f; font-size: 13px; margin: 0; }
.lien-discret { font-size: 13px; color: var(--texte-2); text-align: center; }
img.apercu { width: 20px; height: 20px; object-fit: contain; }