/* GLOBAL */
* {
    box-sizing: border-box;
    font-family: "Segoe UI", sans-serif;
}

html{
  min-height: 100%;
  background: radial-gradient(circle at top, #111, #000);
  background-attachment: fixed;
}

body{
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  background: transparent; /* IMPORTANT: évite la séparation */
  color: #fff;
}

/* Le main prend toute la hauteur, sans fond parasite */
main{
  flex: 1;
  background: transparent !important;
  position: relative;   /* pour z-index contenu */
  z-index: 1;
}


.md-center{
  text-align: center;
}











/* ================================
   RÈGLEMENT — Thème 4 maisons HP
   Cible : .rules-md (ton wrapper)
   ================================ */

.rules-md{
  /* Couleurs maisons */
  --gryff: #7F0909;
  --slyth: #0D6217;
  --raven: #222F5B;
  --huff:  #ECB939;

  position: relative;
  overflow: hidden;

  padding: 26px 26px 28px;
  border-radius: 18px;

  /* Fond “magique” : halos + coins plus visibles + vignette douce */
  background:
    /* Coins (plus “présents”) */
    radial-gradient(520px 360px at 0% 0%,     rgba(236,185,57,.22), transparent 62%), /* Poufsouffle */
    radial-gradient(520px 360px at 100% 0%,   rgba(34,47,91,.22),  transparent 62%), /* Serdaigle */
    radial-gradient(520px 360px at 0% 100%,   rgba(13,98,23,.20),  transparent 62%), /* Serpentard */
    radial-gradient(520px 360px at 100% 100%, rgba(127,9,9,.20),   transparent 62%), /* Gryffondor */

    /* Halos doux (ambiance) */
    radial-gradient(900px 380px at 10% 0%,    rgba(236,185,57,.12), transparent 60%),
    radial-gradient(900px 380px at 90% 0%,    rgba(34,47,91,.20),  transparent 60%),
    radial-gradient(900px 520px at 10% 100%,  rgba(13,98,23,.11),  transparent 62%),
    radial-gradient(1000px 520px at 90% 100%, rgba(127,9,9,.11),   transparent 62%),

    /* Vignette */
    radial-gradient(1200px 700px at 50% 50%, rgba(0,0,0,0), rgba(0,0,0,.40)),
    rgba(10,10,14,.92);


  box-shadow:
    0 24px 70px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.06) inset;

  color: rgba(255,255,255,.90);
  line-height: 1.75;
  font-size: 15.5px;
}

/* =========================================
   ÉTOILES : “pseudo-aléatoire” (réduit encore de moitié)
   - 3 couches au lieu de 6
   - FIXES (pas de déplacement), seulement scintillement
   ========================================= */
.rules-md::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background-image:
    radial-gradient(1px 1px at 12px 22px, rgba(255,255,255,.38) 0 1px, transparent 2px),
    radial-gradient(1px 1px at 68px 54px, rgba(255,255,255,.22) 0 1px, transparent 2px),
    radial-gradient(2px 2px at 28px 78px, rgba(255,255,255,.14) 0 2px, transparent 3px);

  background-size:
    163px 149px,
    211px 193px,
    337px 289px;

  background-repeat: repeat;

  background-position:
    13px 17px,
    71px 23px,
    17px 29px;

  opacity: .70;

  filter:
    drop-shadow(0 0 10px rgba(255,255,255,.14))
    drop-shadow(0 0 26px rgba(236,185,57,.08));
  mix-blend-mode: screen;

  /* FIXE : pas de drift */
  animation: hpStarsTwinkle 2.8s ease-in-out infinite alternate;
}

/* Texte au-dessus des étoiles */
.rules-md > *{
  position: relative;
  z-index: 1;
}


/* Première ligne (ton <center>…</center>) */
.rules-md center{
  display: block;
  margin-top: 0px;
  margin-bottom: -20px;
  padding: 10px 12px;

  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);

  text-shadow: 0 10px 26px rgba(0,0,0,.55);
  letter-spacing: .2px;
}

/* Tous les <b> : style “dorure / maisons” */
.rules-md b{
  font-weight: 900;

  background: linear-gradient(90deg,
    rgba(236,185,57,.95),
    rgba(255,255,255,.88),
    rgba(236,185,57,.95)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  text-shadow:
    0 0 18px rgba(236,185,57,.10),
    0 12px 24px rgba(0,0,0,.55);

  position: relative;
}

/* Petit trait discret sous les gras (encre magique) */
.rules-md b::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(127,9,9,.0),
    rgba(236,185,57,.35),
    rgba(34,47,91,.0)
  );
  opacity: .9;
}

/* Scintillement étoiles (sans déplacement) */
@keyframes hpStarsTwinkle{
  0%{
    opacity: .45;
    filter:
      drop-shadow(0 0 8px rgba(255,255,255,.10))
      drop-shadow(0 0 18px rgba(236,185,57,.06));
  }
  100%{
    opacity: .95;
    filter:
      drop-shadow(0 0 16px rgba(255,255,255,.18))
      drop-shadow(0 0 34px rgba(236,185,57,.10));
  }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce){
  .rules-md::before{ animation: none; }
}

















/* =========================
   PARTICULES (EMBERS)
   - z-index propre
   - pas de pseudo-elements inutiles
   ========================= */

/* (SUPPRIMÉ) body::before/body::after : doublon + inutile ici */
/* body::before,
body::after { ... } */

/* Braises / particules "feu" */
#embers{
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* Option: fade plus naturel vers le haut de l’écran */
#embers{
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to top, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%);
}

.ember{
  position: absolute;
  left: 0;
  bottom: -20px;

  width: var(--size);
  height: var(--size);
  border-radius: 999px;

  /* look braise */
  background: radial-gradient(circle at 35% 35%,
    rgba(255,245,220,0.95) 0%,
    rgba(255,200,70,0.70) 28%,
    rgba(255,90,0,0.35) 60%,
    rgba(255,90,0,0.00) 72%
  );

  opacity: 0;
  filter: blur(0.5px);
  transform: translate3d(0,0,0);

  animation: emberRise var(--dur) linear forwards;
}

@keyframes emberRise{
  0%{
    transform: translate3d(0, 0, 0) scale(0.9);
    opacity: 0;
  }
  10%{ opacity: 0.75; }

  /* sway gauche/droite en montant */
  25%{ transform: translate3d(calc(var(--dx1) * 1px), -25vh, 0) scale(1.0); }
  50%{ transform: translate3d(calc(var(--dx2) * 1px), -55vh, 0) scale(0.95); opacity: 0.7; }
  75%{ transform: translate3d(calc(var(--dx3) * 1px), -85vh, 0) scale(0.85); opacity: 0.25; }

  100%{
    transform: translate3d(calc(var(--dx4) * 1px), -115vh, 0) scale(0.7);
    opacity: 0;
  }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce){
  .ember{ animation: none; opacity: 0; }
}





/*TITRE*/
.home-hero{
  text-align: center;
  margin: 10px 0 22px;
}

.home-title{
  margin: 0;
  font-size: clamp(54px, 7vw, 110px);
  letter-spacing: 10px;
  text-transform: uppercase;
  font-family: "Bree Serif", serif;
  line-height: 1;
}

.home-title .t-gold,
.home-title .t-white{
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.home-title .t-gold{
  background-image: linear-gradient(180deg, #fff2b0, #f5c400, #b8860b);
}

.home-title .t-white{
  background-image: linear-gradient(180deg, #ffffff, #dfe6ff);
}

.home-underline{
  width: min(520px, 70%);
  height: 1px;
  margin: 14px auto 18px;
  background: linear-gradient(to right, transparent, rgba(245,196,0,.85), transparent);
}

.home-subtitle{
  font-size: 18pxright;
  color: rgba(255,255,255,.75);
  margin-bottom: 18px;
}

/* TOP BAR */
.top-bar {
    display: flex;
    justify-content: flex-end;
    padding: 15px 25px;
}

.profile {
    display: flex;
    align-items: center;
    gap: 15px;
}

.username {
    color: #f5c400;
    font-weight: bold;
}

.profile-btn {
    background: #c62828;
    border: none;
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    cursor: pointer;
}

/* TITRE GÉNÉRIQUE */
.title {
    text-align: center;
    color: #f5c400;
    letter-spacing: 8px;
    font-size: 48px;
    margin-bottom: 30px;
}

/* HOME */
.home-container {
    text-align: center;
    margin-top: 60px;
}

.search-bar {
    width: 50%;
    padding: 12px;
    border-radius: 25px;
    border: none;
    background: #1c1c1c;
    color: white;
    margin-bottom: 50px;
}

/* Quand la search-bar est dans la toolbar (Potions, Grenier, Creatures) -> pas de marge verticale */
.potions-toolbar .search-bar {
    margin-bottom: 0;
}

/* CARTES CATEGORIES */
.categories {
    display: grid;
    grid-template-columns: repeat(3, 260px);
    justify-content: center;
    gap: 30px;
    margin-top: 40px;     /* remplace l'espace qu'apportait la search bar */
    margin-bottom: 40px;  /* remplace l'espace qu'apportait la search bar */
}

.card-link {
    text-decoration: none;
    color: inherit;
}

.card {
    background: #141414;
    border-radius: 18px;
    padding: 40px 20px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    text-align: center;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.5);
}

.emoji {
    font-size: 48px;
    margin-bottom: 15px;
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.1));
}

.card span {
    display: block;
    font-weight: bold;
}

/* Bordure basse colorée card sur home */
.emeraude { border-bottom: 4px solid #2ECC71; } /* grenier */
.violet  { border-bottom: 4px solid #8E44AD; } /* potions */
.ambre{ border-bottom: 4px solid #E67E22; } /* Chaudron */
.turquoise{ border-bottom: 4px solid #16A085; } /* Créatures */
.marron{ border-bottom: 4px solid #4F3A1B; } /* Cours et notes */
.rose{ border-bottom: 4px solid #E91E63; } /* Annuaire */
.orvif  { border-bottom: 4px solid #F1C40F; } /* Points */



/* PAGE HEADER INTERNE */
.page-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px 40px 0;
    font-size: 14px;
}

.back-link {
    margin-right: auto;
    color: #aaaaaa;
    text-decoration: none;
}

.back-link:hover {
    text-decoration: underline;
}

.page-username {
    color: #f5c400;
    font-weight: bold;
}

/* TITRES PAR PAGE */
.potions-title {
    color: #8E44AD;
    margin-top: 20px;
}

.grenier-title {
    color: #2ecc71;
    margin-top: 20px;
}

.creatures-title,creatures_title {
    color: #16A085;
    margin-top: 20px;
}

/* BARRE D'OUTILS LISTES */
.potions-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 20px auto 10px;
    width: 80%;
}

.btn {
    border-radius: 20px;
    border: none;
    padding: 8px 18px;
    font-size: 12px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 600;
}

.btn.danger {
    background: #c62828;
    color: #fff;
}

.btn.outline {
    background: transparent;
    border: 1px solid #3498db;
    color: #3498db;
}

.btn.primary {
    background: #3498db;
    color: #fff;
}

.btn.full {
    width: 100%;
}

.btn.active-edit {
    box-shadow: 0 0 8px #3498db;
}

.btn.active-delete {
    box-shadow: 0 0 8px #c62828;
}

.hidden {
    display: none !important;
}

.potions-search {
    flex: 1;
}

/* GRILLES COMMUNES (potions + grenier + creatures) */
.potions-grid,
.grenier-grid,
.creatures-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(220px, 260px));
    justify-content: center;
    gap: 30px 30px;
    padding-bottom: 60px;
}

/* CARTES COMMUNES */
.potion-card,
.grenier-card,
.creatures-card {
    background: #141414;
    border-radius: 18px;
    padding: 18px 18px 12px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    position: relative;
}

.potion-card:hover,
.grenier-card:hover,
.creatures-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.5);
}

/* Couleur de bordure par type */
.potion-card  { border-bottom: 4px solid #8E44AD; }
.grenier-card { border-bottom: 4px solid #2ECC71; }
.chaudron-card { border-bottom: 4px solid #E67E22; }
.creatures-card { border-bottom: 4px solid #16A085; }
.cours-card { border-bottom: 4px solid #4F3A1B; }

.potion-card.delete-mode,
.grenier-card.delete-mode,
.creatures-card.delete-mode {
    box-shadow: none;
}

.potion-card.selected,
.grenier-card.selected,
.creatures-card.selected {
    border-color: #c62828;
}
/* IMPORTANT : le wrapper doit avoir une hauteur, sinon l'enfant absolute ne s'affiche pas */
#grenier-map-wrapper,
#grenier-view-map-wrapper{
  flex: 1 1 auto;        /* prend la place restante dans la colonne */
  min-height: 260px;     /* sécurité */
  border: 1px solid #1e2933;
  background: #050505;
}
#creatures-map-wrapper,
#creatures-view-map-wrapper{
  flex: 1 1 auto;        /* prend la place restante dans la colonne */
  min-height: 260px;     /* sécurité */
  border: 1px solid #1e2933;
  background: #050505;
}


/* IMAGE 80x80 SUR CARTES */
.potion-image-wrapper {
    background: #0d0d0d;
    border-radius: 12px;
    padding: 10px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.potion-image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
}

.potion-image-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    background: radial-gradient(circle at top, #1f2933, #0b0c10);
}

.potion-card-body {
    padding: 10px 4px 2px;
    text-align: center;
}

.potion-name {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}

.potion-level {
    font-size: 11px;
    font-weight: 500;
    margin-left: 4px;
    color: #7fb3ff;
}

.potion-steps-count {
    font-size: 12px;
    color: #aaaaaa;
}

/* indicateur de sélection (mode suppression potions) */
.card-select-indicator {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 2px solid #555;
    background: transparent;
    display: none;
}

.potion-card.delete-mode .card-select-indicator,
.grenier-card.delete-mode .card-select-indicator,
.creatures-card.delete-mode .card-select-indicator {
    display: block;
}

.potion-card.selected .card-select-indicator,
.grenier-card.selected .card-select-indicator,
.creatures-card.selected .card-select-indicator {
    background: #c62828;
    border-color: #c62828;
}

/* MODALES GÉNÉRIQUES */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000; /* (au lieu de 20) : évite les superpositions bizarres */
}

.modal {
    background: #18191d;
    border-radius: 18px;
    width: 60%;
    max-width: 900px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Modale large */
.modal-large {
    width: 90%;
    max-width: 1400px;
    height: 90vh;
    max-height: 90vh;
}

.modal-header {
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #222;
}

.modal-title {
    font-size: 20px;
    font-weight: 700;
}

.modal-close {
    background: transparent;
    border: none;
    font-size: 22px;
    color: #999;
    cursor: pointer;
}

.modal-body {
    padding: 18px 24px 24px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* VUE POTION */
.potion-view-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 18px;
}

.potion-view-text {
    flex: 1;
}

.potion-view-effect {
    font-size: 13px;
    color: #ddd;
    margin-top: 4px;
}

.potion-view-image {
    width: 100px;
    display: flex;
    justify-content: flex-end;
}

/* ÉTAPES AFFICHÉES */
.potion-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 55vh;
    overflow-y: auto;
}

.step-display {
    background: #050505;
    border-radius: 10px;
    padding: 10px 16px;
    border: 1px solid #222;
    font-size: 13px;
}

/* Liens jaunes cliquables */
.inline-link {
    color: #f1c40f;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

/* FORMULAIRE POTION */
.form-row {
    margin-bottom: 14px;
}

.form-row-top {
    display: flex;
    gap: 16px;
}

.form-col {
    flex: 1;
}

.input {
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    border: none;
    background: #111;
    color: #eee;
    font-size: 12px;
}

.input.full {
    width: 100%;
}

.label {
    display: block;
    font-size: 12px;
    margin-bottom: 4px;
    color: #ccc;
}

/* LAYOUT DES ÉTAPES (potions) */
.steps-layout {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.steps-toolbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.step-type-btn {
    padding: 8px 12px;
    border-radius: 14px;
    border: 1px solid #444;
    background: transparent;
    color: #eee;
    font-size: 11px;
    cursor: pointer;
}

.step-type-btn:hover {
    border-color: #3498db;
}

.steps-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 45vh;
    overflow-y: auto;
}

.step-row {
    background: #050505;
    border-radius: 12px;
    border: 1px solid #1e2933;
    padding: 10px 12px 10px 34px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.step-row-header {
    font-size: 11px;
    font-weight: 700;
}

.step-row-body {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.step-row-body input,
.step-row-body select,
.step-row-body textarea {
    background: #111;
    border-radius: 8px;
    border: none;
    padding: 6px 8px;
    font-size: 11px;
    color: #eee;
}

.step-row-body textarea {
    resize: vertical;
    min-height: 34px;
}

.step-row-body textarea[name*="[spell]"] {
    flex: 1;
}

.step-delete {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: #c62828;
    color: #fff;
    font-size: 10px;
    cursor: pointer;
}

/* ---------- GRENIER/CREATURES ---------- */

.grenier-view-body,
.grenier-edit-body,
.creatures-view-body,
.creatures-edit-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
}

.grenier-layout,
.creatures-layout {
    flex: 1;
    display: flex;
    gap: 20px;
    min-height: 0;
}

.grenier-left,
.grenier-right,
.creatures-left,
.creatures-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.editor-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.editor-toolbar {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    align-items: center;
    background: #111;
    padding: 6px 8px;
    border-radius: 10px 10px 0 0;
    flex-shrink: 0;
}

.editor-toolbar button {
    border: none;
    background: #222;
    color: #eee;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
}

.editor-toolbar button:hover {
    background: #333;
}

.toolbar-sep {
    width: 1px;
    height: 16px;
    background: #444;
}

.editor-area {
    background: #050505;
    border-radius: 0 0 10px 10px;
    border: 1px solid #1e2933;
    padding: 10px 12px;
    font-size: 16px;
    height: 55vh;
    max-height: 55vh;
    overflow-y: auto;
	font-family: "Bree Serif", serif;
}
.editor-area, .editor-area * { font-family: "Bree Serif" !important; }


.grenier-view-body,
.creatures-view-body {
    flex-direction: row;
    gap: 20px;
}

.grenier-view-left,
.creatures-view-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
}

.grenier-view-image,
.creatures-view-image {
    margin-bottom: 6px;
    flex-shrink: 0;
}

.grenier-view-content,
.creatures-view-content {
    background: #050505;
    border-radius: 10px;
    border: 1px solid #1e2933;
    padding: 10px;
    font-size: 16px;
}

.grenier-view-right,
.creatures-view-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* NOTE: tout le bloc map est gardé tel quel, mais doublon supprimé */
#grenier-map-wrapper, #grenier-view-map-wrapper{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(0,0,0,0.35);
}
#creatures-map-wrapper, #creatures-view-map-wrapper{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(0,0,0,0.35);
}

#grenier-map-inner, #grenier-view-map-inner{
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  cursor: grab;
}
#creatures-map-inner, #creatures-view-map-inner{
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  cursor: grab;
}

.map-wrapper.dragging #grenier-map-inner,
.map-wrapper.dragging #grenier-view-map-inner
.map-wrapper.dragging #creatures-map-inner,
.map-wrapper.dragging #creatures-view-map-inner{
  cursor: grabbing;
}

.map-image{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  pointer-events: none;
}

.map-markers{
  position: absolute;
  inset: 0;
  --marker-scale: 1;
  pointer-events: none;
}

.map-marker{
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffd600;
  border: 2px solid rgba(0,0,0,0.65);
  box-shadow: 0 0 8px rgba(255,214,0,0.4);
  transform: translate(-50%,-50%) scale(var(--marker-scale));
  pointer-events: auto;
}

/* petit espace au-dessus du champ Image (80x80) */
.grenier-edit-body .form-row.image-row,
.creatures-edit-body .form-row.image-row {
    margin-top: 8px;
}

/* petit espace au-dessus du bouton ENREGISTRER */
.grenier-edit-body form .form-row:last-child,
.creatures-edit-body form .form-row:last-child {
    margin-top: 15px;
}


/* ===================== COURS & NOTES ===================== */

.cours-title {
    color: #4F3A1B;
}

/* Bandeau années façon onglets parchemins */
.cours-years-bar {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 10px auto 5px;
    max-width: 900px;
}

.cours-year-tab {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid #5c4a2a;
    background: radial-gradient(circle at top, #4b3820, #2b1b10);
    color: #f5e6c8;
    font-size: 13px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.4);
}

.cours-year-tab.active {
    border-color: #f5c400;
    box-shadow: 0 0 10px rgba(245,196,0,0.6);
}

/* Bandeau types */
.cours-types-bar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 5px auto 15px;
    max-width: 1000px;
}

.cours-type-pill {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid #555;
    background: #14110f;
    color: #f0e3c5;
    font-size: 12px;
    cursor: pointer;
}

.cours-type-pill.active {
    border-color: #f5c400;
    background: #3a2c17;
}

/* Grille de cours */
.cours-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(220px, 260px));
    justify-content: center;
    gap: 30px 30px;
    padding-bottom: 60px;
}

.cours-card {
    background: #141111;
    border-radius: 18px;
    padding: 0;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    border-bottom: 4px solid #4F3A1B;
    position: relative;
}

.cours-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.5);
}

.cours-card-inner {
    padding: 12px 12px 14px;
}

.cours-card-header {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #d8c8a5;
    margin-bottom: 8px;
}

.cours-card-year {
    font-weight: 700;
}

.cours-card-type {
    font-style: italic;
}

.cours-card-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.cours-card-image-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    background: radial-gradient(circle at top, #2a1a10, #120b06);
    display: flex;
    justify-content: center;
    align-items: center;
}

.cours-card-image {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    object-fit: cover;
}

.cours-card-image-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    border: 1px dashed #7a5a2a;
}

.cours-card-title {
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #f4e7c7;
}

/* Sélection suppression / édition (réutilise card-select-indicator existant) */
.cours-card.delete-mode {
    box-shadow: none;
}

.cours-card.selected {
    border-color: #c62828;
}

.cours-card.delete-mode .card-select-indicator {
    display: block;
}

.cours-card.selected .card-select-indicator {
    background: #c62828;
    border-color: #c62828;
}

/* Vue cours */
.cours-view-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 80vh;
    overflow-y: auto;
}

.cours-view-top {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.cours-view-meta {
    font-size: 13px;
    color: #d0c2a4;
    font-style: italic;
}

.cours-view-image-wrapper {
    flex-shrink: 0;
}

.cours-view-content {
    background: #050505;
    border-radius: 10px;
    border: 1px solid #1e2933;
    padding: 12px;
    font-size: 15px;
}


/* Éditeur cours */
.cours-editor-container {
    margin-top: 10px;
}

.cours-editor-toolbar {
    margin-top: 10px;
}

.editor-toolbar select {
    background: #111;
    color: #fff;
    border-radius: 999px;
    border: 1px solid #555;
    padding: 2px 10px;
    margin-left: 6px;
    font-family: "Bree Serif", serif;
    font-size: 0.8rem;
    outline: none;
}

.editor-toolbar select:focus {
    border-color: #ffd54a;
}

.cours-editor-area {
    height: 60vh;
}

.label-inline {
    margin-bottom: 0;
    margin-left: 8px;
}

.font-size-select {
    width: auto;
    padding: 4px 8px;
    font-size: 11px;
}

/* Colonnes du haut */
.form-col-small {
    max-width: 90px;
}

.form-col-medium {
    max-width: 180px;
}


/* ===================== ANNUAIRE ===================== */

.annuaire-title {
    color: #ff80bf;
}

.annuaire-toolbar {
    margin-top: 15px;
}

.annuaire-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(220px, 260px));
    justify-content: center;
    gap: 30px 30px;
    padding-bottom: 60px;
}

.annuaire-card {
    background: #151019;
    border-radius: 18px;
    padding: 10px 10px 14px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    border-bottom: 4px solid #E91E63;
    position: relative;
}

.annuaire-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.5);
}

.annuaire-photo-wrapper {
    background: #050308;
    border-radius: 14px;
    padding: 8px;
    margin-bottom: 8px;
    text-align: center;
}

.annuaire-photo {
    max-width: 100%;
    height: auto;
    max-height: 260px;
    border-radius: 10px;
    object-fit: cover;
}

.annuaire-photo-placeholder {
    width: 100%;
    height: 160px;
    border-radius: 10px;
    background: repeating-linear-gradient(
        135deg,
        #2a1e2b,
        #2a1e2b 6px,
        #1a0f1a 6px,
        #1a0f1a 12px
    );
}

.annuaire-name {
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 4px;
    color: #ffe3f1;
}

.annuaire-bio-snippet {
    font-size: 12px;
    color: #d9c7d9;
    max-height: 60px;
    overflow: hidden;
}

/* Vue fiche */

.annuaire-view-body {
    display: flex;
    gap: 20px;
    max-height: 80vh;
    overflow-y: auto;
}

.annuaire-view-left {
    flex: 0 0 260px;
}

.annuaire-view-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.annuaire-view-photo-wrapper {
    background: #050308;
    border-radius: 14px;
    padding: 10px;
    text-align: center;
}

.annuaire-view-name {
    font-size: 20px;
    font-weight: 700;
    color: #ffe3f1;
}

.annuaire-view-bio {
    background: #050505;
    border-radius: 10px;
    border: 1px solid #1e2933;
    padding: 12px;
    font-size: 14px;
    color: #f5f2ff;
}

/* Éditeur annuaire */
.annuaire-editor-toolbar {
    margin-top: 10px;
}

.annuaire-editor-area {
    height: 55vh;
}

/* potion-meta + potion-card-body (doublons supprimés : gardés une seule fois) */
.potion-meta {
	font-size: 0.75rem;
    color: #bbb;
    margin-top: 4px;
    text-align: center;
    width: 100%;
    display: block;
}

.potion-card-body div:not(.potion-name):not(.potion-meta) {
    font-size: 0.70rem !important;
    line-height: 1.2 !important;
    text-align: center;
    color: #ddd;
    max-width: 95%;
    margin: 0 auto 6px auto;
}

@font-face {
    font-family: "MaSuperPolice";
    src: url("../fonts/MaSuperPolice.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

/* ===================== CHAUDRON ===================== */
.chaudron-title { color: #E67E22; }

.chaudron-tabs{
  display:flex;
  justify-content:center;
  gap:12px;
  margin: 14px 0 10px;
}

.chaudron-tab{
  padding:10px 16px;
  border-radius: 999px;
  border: zK1_B7V7fiyJsC8nf9K-hGG4
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.35);
  color: #fff;
  cursor:pointer;
}
.chaudron-tab.active{
  border-color:#ffd600;
  box-shadow: 0 0 0 2px rgba(255,214,0,0.25);
}

.potion-card-body{ padding: 10px 12px 12px; }
.chaudron-sub{ font-size: 0.85rem; opacity:0.9; margin-top:4px; }

.chaudron-view-top{
  display:flex;
  align-items:flex-start;
  gap:16px;
  margin-bottom:12px;
}
.chaudron-view-image{
  width:90px; height:90px;
  flex:0 0 auto;
  border-radius: 14px;
  overflow:hidden;
  background: rgba(255,255,255,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
}

.chaudron-view-meta{
  font-size: 0.95rem;
  opacity: 0.95;
  line-height: 1.4;
}

.chaudron-view-ingredients{
  margin: 10px 0 14px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
}

.chaudron-line{ padding: 4px 0; }

.chaudron-ingredients-builder{
  display:flex;
  gap:10px;
  align-items:center;
  margin: 6px 0 10px;
}

.chaudron-ingredients-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.chaudron-line-row{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
}
.chaudron-line-label{ font-size: 0.95rem; }

/* CHAUDRON – centrage grille */
.chaudron-wrap {
  width: min(1200px, calc(100% - 80px));
  margin: 0 auto;
}

.chaudron-toolbar {
  width: min(1200px, calc(100% - 80px));
  margin: 0 auto;
}

.chaudron-grid {
  width: min(1200px, calc(100% - 80px));
  margin: 24px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
  padding-bottom: 32px;
}

.chaudron-card {
  width: 100%;
  max-width: 280px;
  justify-self: center;
}

.home-logo-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  margin: 10px 0 20px;
}

.home-logo{
  max-width: 600px;
  width: 20%;
  height: auto;
  display:block;
}

/* Police “écriture magique” */
@font-face{
  font-family: "Kingthings_Calligraphica_2";
  src: url("../fonts/Kingthings_Calligraphica_2.ttf") format("truetype");
  font-display: swap;
}

/* Bouton flottant */
.magic-note-fab{
  position: fixed;
  right: 26px;
  bottom: 26px;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  z-index: 9999;
  font-size: 26px;
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
  background: #ffd600;
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
}
.magic-note-fab:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
}

/* Overlay / Modale */
.magic-note-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 18px;
}
.magic-note-overlay.open{
  display: flex;
}

.magic-note-modal{
  width: min(980px, 96vw);
  height: min(720px, 88vh);
  background: rgba(18,18,18,.92);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0,0,0,.7);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* =========================
   BLOC-NOTES (styles manquants)
   ========================= */

/* Permet l’ouverture même si le JS ne met pas la classe .open mais change aria-hidden */
.magic-note-overlay.open,
.magic-note-overlay[aria-hidden="false"]{
  display: flex;
}

.magic-note-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.magic-note-title{
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffd600;
  font-family: "Bree Serif", serif;
}

.magic-note-close{
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  color: #fff;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}
.magic-note-close:hover{ background: rgba(0,0,0,.45); }

/* CRUCIAL: sans position:relative, tes calques absolus se placent mal */
.magic-note-parchment{
  position: relative;
  flex: 1 1 auto;
  margin: 0;
  padding: 18px;
  overflow: auto;

  background:
    radial-gradient(1200px 800px at 50% 10%, rgba(255,230,170,.22), transparent 55%),
    radial-gradient(800px 600px at 10% 80%, rgba(255,230,170,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,234,190,.10), rgba(255,234,190,.04));
}

.magic-note-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.magic-note-hint{
  color: rgba(255,255,255,.7);
  font-size: 13px;
  font-family: "Bree Serif", serif;
}

/* Superposition rendu + textarea */
.magic-note-modal .magic-note-render,
.magic-note-modal .magic-note-input{
  position: absolute;
  inset: 18px;
  border: none;
  outline: none;
  background: transparent;
  margin: 0;
  padding: 0;

  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.55;
  letter-spacing: 0.2px;
  font-size: 22px;
  font-family: "Kingthings_Calligraphica_2", "Bree Serif", serif;
}

.magic-note-modal .magic-note-render{
  pointer-events: none;
  color: #1a1a1a;
  text-shadow: 0 1px 0 rgba(255,255,255,.12);
}

.magic-note-modal .magic-note-input{
  resize: none;
  color: transparent;     /* “invisible” mais curseur visible */
  caret-color: #111;
  z-index: 2;
}
.magic-note-modal .magic-note-input::placeholder{
  color: rgba(0,0,0,.35);
}

/* Force la police sur le rendu (spans générés) */
#magic-note-render,
#magic-note-render *{
  font-family: "Kingthings_Calligraphica_2", "Bree Serif", serif !important;
}



/* Sécurité : bouton ID (doublon supprimé : on garde juste celui-ci si tu l'utilises) */
#magic-note-btn{
  position: fixed;
  right: 26px;
  bottom: 26px;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  z-index: 9999;
  font-size: 26px;
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
  background: #ffd600;
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
}

#magic-note-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
}


/* =========================
   Effet "encre" : rouge -> noir
   (utilisé par magic_note.js via .ink-char / .ink-new)
   ========================= */

.ink-char{
  display: inline-block;
  opacity: 1;
  color: #1a1a1a; /* noir final */
}

/* Les nouveaux caractères commencent rouges, puis deviennent noirs */
.ink-new{
  opacity: 0;
  color: #a31212;
  filter: blur(.6px);
  transform: translateY(1px);
  animation: inkMorph 2200ms ease forwards;
  animation-delay: var(--d, 0ms);
}

@keyframes inkMorph{
  0%   { opacity: 0;   color: #a31212; filter: blur(1px);  transform: translateY(1px); }
  18%  { opacity: 1;   color: #a31212; filter: blur(.4px); }
  48%  { opacity: .10; color: #a31212; filter: blur(1.2px); }
  70%  { opacity: 1;   color: #1a1a1a; filter: blur(0); }
  100% { opacity: 1;   color: #1a1a1a; filter: blur(0); transform: translateY(0); }
}

/* Sécurité: force la police sur tous les spans générés */
#magic-note-render,
#magic-note-render *{
  font-family: "Kingthings_Calligraphica_2", "Bree Serif", serif !important;
}

/* Surlignage dans le bloc-notes (textarea) */
#magic-note-input::selection{
  background: rgba(120, 0, 0, 0.4);  /* rouge sombre */
  color: #fff;
}
#magic-note-input::-moz-selection{
  background: rgba(120, 0, 0, 0.4);
  color: #fff;
}

/* Surlignage dans la zone rendue (si tu sélectionnes le texte affiché) */
#magic-note-render::selection{
  background: rgba(120, 0, 0, 0.4);
  color: #fff;
}
#magic-note-render::-moz-selection{
  background: rgba(120, 0, 0, 0.4);
  color: #fff;
}

/* =========================
   POINTS (nouvelle catégorie)
   ========================= */

.points-years{
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 18px;
}

.points-year-btn{
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.25);
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
}

.points-year-btn.active{
  border-color: #f5c400;
  box-shadow: 0 0 0 2px rgba(245,196,0,0.2);
}

.points-grid{
  width: min(1200px, calc(100% - 60px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  padding-bottom: 60px;
}

.points-card{
  position: relative;
  background: rgba(20,20,20,0.6);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 16px;
  overflow: hidden;
}

.points-subject{
  font-family: "Bree Serif", serif;
  font-size: 18px;
  margin-bottom: 10px;
}

.points-bar{
  height: 10px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 12px;
}

.points-bar-fill{
  height: 100%;
  width: 0%;
  background: hsl(var(--hue, 15) 85% 55%);
  transition: width 120ms linear;
}

.points-numbers{
  font-size: 22px;
  margin-bottom: 10px;
}

.points-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.points-btn{
  border-radius: 8px;
  border: 1px solid rgba(245,196,0,0.35);
  background: rgba(0,0,0,0.25);
  color: #fff;
  padding: 6px 10px;
  cursor: pointer;
}

.points-btn:hover{
  border-color: rgba(245,196,0,0.7);
}

.points-remaining{
  font-size: 12px;
  opacity: 0.9;
}

/* "Année complétée" en diagonal */
.points-complete{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform: rotate(-18deg);

  font-size: clamp(26px, 3vw, 32px);
  font-family: "Bree Serif", serif;
  font-weight: 900;
  letter-spacing: 2px;

  /* 💛 Dégradé doré */
  background: linear-gradient(
    120deg,
    #fff3b0 0%,
    #ffd700 25%,
    #f4c430 50%,
    #ffdd55 75%,
    #fff8c6 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* ✨ Aura dorée */
  text-shadow:
    0 0 6px rgba(255,215,0,0.5),
    0 0 14px rgba(255,200,60,0.4),
    0 8px 30px rgba(0,0,0,0.45);

  z-index: 3;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}


/**/
.points-total-wrap{
  display: flex;
  justify-content: center;
  margin: 18px 0 40px;
}

.points-total-card{
  width: min(900px, calc(100% - 60px));
  background: rgba(20,20,20,0.6);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 16px;
}

/* boutons désactivés proprement */
.points-btn:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}


/* FIX affichage bouton Retour (points) */
.page-header{
  display: flex !important;
}

.back-link{
  display: inline-block !important;
}