/* -------------------------------------------------
     Mise en forme générale
     ------------------------------------------------- */
	 
	 /* 1️⃣ Police */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Rajdhani:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&display=swap');
@font-face{
  font-family:'OpenDyslexic';
  src:url('https://cdn.jsdelivr.net/gh/antijingoist/open-dyslexic@20160623-Stable/otf/OpenDyslexic-Regular.otf') format('opentype');
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}
body{
    /* Anciennes polices essayees precedemment : conservees ici pour pouvoir revenir en arriere facilement.
       Il suffit de decommenter l'une des lignes suivantes et de recommenter celle utilisee actuellement.
    font-family: 'Orbitron', Arial, Helvetica, sans-serif;      // police d'origine, sci-fi mais peu lisible
    font-family: 'Rajdhani', Arial, Helvetica, sans-serif;      // 1er remplacement, juge trop particulier */
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    background:#0a0a13;
    color: #e0e0e0;
    margin:0;
    padding:60px 20px 20px 20px;   /* padding-top agrandi pour laisser la place au bouton menu (trois points) fixe en haut a gauche */
  }
  /* -------------------------------------------------
     Menu parametres (bouton trois points en haut a gauche)
     ------------------------------------------------- */
  .settings-menu{
    position:fixed;
    top:12px;
    left:12px;
    z-index:1000;
  }
  .settings-menu-btn{
    position:relative;
    z-index:1002;   /* reste au-dessus de la sidebar pour pouvoir la refermer (icone croix) */
    width:36px;
    height:36px;
    border:1px solid #2f8fc4;
    border-radius:50%;
    background:linear-gradient(160deg, #0d1b2a, #16324d);
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:0;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .settings-menu-btn:hover{
    border-color:#6fd4ff;
    box-shadow:0 0 8px rgba(111,212,255,0.5);
  }
  .hamburger-bar{
    width:16px;
    height:2px;
    border-radius:2px;
    background:#e0e0e0;
    transition:transform .22s ease, opacity .22s ease, background-color .2s ease;
  }
  .settings-menu-btn:hover .hamburger-bar{
    background:#6fd4ff;
  }
  .settings-menu-btn[aria-expanded="true"]{
    border-color:#6fd4ff;
  }
  .settings-menu-btn[aria-expanded="true"] .hamburger-bar:nth-child(1){
    transform:translateY(7px) rotate(45deg);
  }
  .settings-menu-btn[aria-expanded="true"] .hamburger-bar:nth-child(2){
    opacity:0;
    transform:scaleX(0);
  }
  .settings-menu-btn[aria-expanded="true"] .hamburger-bar:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
  }
  .settings-menu-dropdown{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    z-index:1001;
    width:300px;
    max-width:85vw;
    border:1px solid #2f8fc4;
    border-left:none;
    border-radius:0 14px 14px 0;
    background:linear-gradient(160deg, #0d1b2a, #16324d);
    box-shadow:6px 0 28px rgba(0,0,0,0.55);
    transform:translateX(-100%);
    transition:transform .28s ease;
    overflow:visible;   /* le sous-menu "Gestion de personnages" ne doit jamais etre coupe */
  }
  .settings-menu-dropdown[hidden]{
    display:none;
  }
  .settings-menu-dropdown.open{
    transform:translateX(0);
  }
  .settings-menu-dropdown-inner{
    position:absolute;
    inset:0;   /* hauteur fixee sur la boite du parent (plus fiable que height:100% ici, le parent n'a pas de hauteur "definite" au sens CSS) */
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:76px 20px 20px 20px;
    overflow-y:auto;
    box-sizing:border-box;
  }
  .settings-menu-dropdown label{
    font-weight:bold;
    color:#00c8ff;
  }
  .settings-menu-dropdown select{
    padding:6px;
  }
  .settings-menu-section{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:4px;
    padding-bottom:6px;
    border-bottom:1px solid rgba(47,143,196,0.4);
  }
  .settings-menu-section:last-child{
    padding-bottom:0;
    border-bottom:none;
  }
  .settings-menu-category{
    padding-top:14px;
    border-top:1px solid rgba(47,143,196,0.4);
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .settings-menu-category:first-child{
    padding-top:0;
    border-top:none;
  }
  .settings-menu-category:last-child{
    margin-top:auto;   /* pousse la derniere categorie (Personnalisation) tout en bas de la sidebar */
  }
  .settings-menu-category-title{
    margin:0 0 4px 0;
    font-size:0.78rem;
    font-weight:bold;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:#d4af37;   /* texte dore pour les titres de categorie */
  }
  .menu-highlight-btn{
    width:100%;
    margin:0;
    padding:10px 8px;
    border:none;
    border-top:1px solid #6fd4ff;
    border-bottom:1px solid #6fd4ff;
    background:transparent;
    color:#e0e0e0;
    font-family:inherit;
    font-size:0.95rem;
    font-weight:bold;
    cursor:pointer;
    transition:background-color .18s ease, color .18s ease;
  }
  .menu-highlight-btn:hover{
    background:rgba(111,212,255,0.18);
    color:#6fd4ff;
  }
  /* Evite le double trait quand deux boutons "highlight" se suivent
     (Partage -> Gestion de personnages) : le bord inferieur du premier
     sert deja de separateur, le second n'a pas besoin de son bord superieur. */
  .menu-flyout + .menu-flyout > .menu-highlight-btn{
    border-top:none;
  }

  /* -------------------------------------------------
     Sous-menus "Partage" et "Gestion de personnages"
     ------------------------------------------------- */
  .menu-flyout{
    position:relative;
  }
  .menu-flyout-panel{
    position:absolute;
    left:100%;
    top:0;
    margin-left:8px;
    width:260px;
    max-height:70vh;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:8px;
    border:1px solid #2f8fc4;
    border-radius:12px;
    background:linear-gradient(160deg, #0d1b2a, #16324d);
    padding:14px;
    box-shadow:6px 0 24px rgba(0,0,0,0.55);
    z-index:1003;
  }
  .menu-flyout-panel[hidden]{
    display:none;
  }
  .menu-flyout-panel .menu-highlight-btn{
    border:1px solid #6fd4ff;
    border-radius:6px;
  }
  .flyout-label{
    color:#00c8ff;
    font-weight:bold;
    margin-bottom:0;
  }
  .share-textarea{
    width:100%;
    height:8rem;
    resize:none;
    background:#0a0a13;
    color:#e0e0e0;
    border:1px solid #00c8ff;
    border-radius:6px;
    padding:0.4rem;
    font-family:monospace;
    box-sizing:border-box;
  }
  #manual-save-panel{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .flyout-separator{
    height:1px;
    background:rgba(111,212,255,0.4);
    margin:4px 0;
  }
  .character-name-input{
    width:100%;
    padding:8px;
    border:1px solid #2f8fc4;
    border-radius:6px;
    background:#0d1b2a;
    color:#e0e0e0;
    font-family:inherit;
    box-sizing:border-box;
    transition:border-color .18s ease, box-shadow .18s ease;
  }
  .character-name-input:hover{
    border-color:#6fd4ff;
  }
  .character-name-input:focus{
    outline:none;
    border-color:#6fd4ff;
    box-shadow:0 0 6px rgba(111,212,255,0.5);
  }
  .character-name-input::placeholder{
    color:#7ec8e3;
    opacity:0.6;
  }
  .character-list{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .character-row{
    display:flex;
    align-items:stretch;
    gap:4px;
  }
  .character-load-btn{
    flex:1 1 auto;
    min-width:0;
    text-align:left;
    padding:8px 10px;
    border:1px solid #2f8fc4;
    border-radius:6px;
    background:#0d1b2a;
    color:#e0e0e0;
    font-family:inherit;
    cursor:pointer;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    transition:border-color .18s ease, background-color .18s ease;
  }
  .character-load-btn:hover{
    border-color:#6fd4ff;
    background:rgba(111,212,255,0.14);
  }
  .character-save-btn,
  .character-delete-btn{
    flex:0 0 auto;
    width:32px;
    border:1px solid #2f8fc4;
    border-radius:6px;
    background:#0d1b2a;
    color:#e0e0e0;
    cursor:pointer;
    font-size:0.9rem;
    line-height:1;
    transition:border-color .18s ease, background-color .18s ease, color .18s ease;
  }
  .character-save-btn:hover{
    border-color:#6fd4ff;
    background:rgba(111,212,255,0.14);
  }
  .character-delete-btn:hover{
    border-color:#ff6b6b;
    background:rgba(255,107,107,0.14);
    color:#ff6b6b;
  }
  .version-tag{
    font-size:0.75rem;
    color:#7ec8e3;
    opacity:0.8;
    margin-bottom:8px;
  }
  .site-footer{
    max-width:1920px;
    margin:30px auto 10px auto;
    padding:14px 20px 0 20px;
    border-top:1px solid rgba(47,143,196,0.4);
    text-align:center;
  }
  .site-footer p{
    margin:0;
    font-size:0.72rem;
    line-height:1.5;
    color:#7ec8e3;
    opacity:0.7;
  }

  .wrapper{
    max-width:1920px;
	margin:auto;
  }

  /* -------------------------------------------------
     Layout principal – Grid
     ------------------------------------------------- */
  .layout{
  display:grid;
  /* 4 colonnes maintenant : cat1, cat2, cat4 (Datacron), cat6 (Buff) */
  grid-template-columns: 1fr 1fr 320px 260px;   /* largeurs fixes pour Datacron (plus large, evite le retour a la ligne) et Buff */
  grid-template-rows: auto;   /* une seule ligne : Bilan equipement est maintenant dans la grille imbriquee .cat4-cat6-wrapper */
  gap:30px;
  align-items:start;
}

  /* -------------------------------------------------
     Placement des catégories dans la grille
     ------------------------------------------------- */
  .cat1-reglage,.cat1-equipement,.cat2,.cat4,.cat6,.cat-bilan,.cat-buff-adaptables,.cat-passifs{
    border:1px solid #2f8fc4;
    border-radius:10px;
    background:linear-gradient(160deg, #0d1b2a, #16324d);
    padding:15px;
    box-sizing:border-box;
  }
  .cat1-wrapper{        /* colonne de gauche : Zone reglage + Equipement, deux zones distinctes */
    grid-column:1 / 2;
    grid-row:1 / 2;
    display:flex;
    flex-direction:column;
    gap:30px;
  }
  .cat1-reglage{        /* zone reglage (langue/faction/classe/role/niveau) */
    position:relative;
  }
  .cat1-reglage h2{
    text-align:center;   /* centre le titre "Zone reglage" dans sa carte */
  }
  .cat1-equipement{     /* zone equipement – agrandie par JS pour s'aligner sur le bas du Bilan equipement */
    box-sizing:border-box;
  }
  .cat1-equipement h3,
  .settings-title,
  .cat2 > h3,
  .cat-buff-adaptables h3,
  .cat-passifs h3,
  .cat4 h2,
  .cat6 h2,
  .cat-bilan h3{
    text-align:center;   /* centre les titres des zones Equipement, Reglage equipement, Details de la piece selectionnee, Buff de classe, Datacron, Buff et Bilan equipement */
  }
  .cat2-wrapper{        /* colonne centrale : reglage equipement + blocs stats */
    grid-column:2 / 3;
    grid-row:1 / 2;
    align-self:stretch;   /* prend toute la hauteur de la ligne (fixee par la zone Equipement) */
    display:flex;
    flex-direction:column;
    gap:30px;
  }
  .cat2{               /* catégorie 2 – réglage équipement */
  }
  .cat-stats{           /* blocs de statistiques – pousse en bas de .cat2-wrapper (donc au niveau du Bilan equipement) */
    margin-top:auto;
  }
  .cat-buff-adaptables,.cat-passifs{   /* Buff de classe (activable) et Passifs (lecture seule) – se partagent l'espace libre entre Reglage equipement et Index ; meme largeur qu'eux car meme colonne (.cat2-wrapper) */
    display:flex;           /* affichees en permanence, meme reduites au seul titre (comme Datacron/Buff/Bilan equipement) */
    flex-direction:column;
    flex:1 1 auto;           /* se partagent l'espace vertical restant entre .cat2 et .cat-stats */
    min-height:0;
    overflow-y:auto;         /* si le contenu depasse l'espace disponible, defile au lieu de deborder */
  }
  .buff-adaptable-option{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
  }
  .buff-adaptable-passive{
    margin-top:8px;
    color:#6fd4ff;
    font-size:0.9rem;
  }
  #buff-class-block:not(:empty) + #buff-discipline-block:not(:empty){
    margin-top:8px;
  }

  .cat4-cat6-wrapper{   /* grille imbriquee (Datacron + Buff + Bilan equipement), independante
                           de cat1-wrapper/cat2-wrapper : Bilan equipement reste ainsi toujours
                           colle sous Datacron/Buff, quelle que soit la hauteur des colonnes de gauche */
    grid-column:3 / 5;
    grid-row:1 / 2;
    display:grid;
    grid-template-columns:320px 260px;
    grid-template-rows:auto auto;
    gap:30px;
    align-items:start;
  }
  .cat4{               /* catégorie 4 – Datacron */
    grid-column:1;
    grid-row:1;
    overflow-y:auto;
    max-width:320px;        /* largeur fixe (modifiable), assez large pour eviter le retour a la ligne du texte */
    max-height:700px;       /* valeur de secours, ecrasee par le JS de synchronisation */
  }
  .cat6{
  grid-column:2;
  grid-row:1;
  overflow-y:auto;
  max-height:700px;    /* valeur de secours, ecrasee par le JS de synchronisation */
}
  .cat-bilan{           /* Bilan equipement – colle sous Datacron/Buff dans la meme grille imbriquee */
    grid-column:1 / 3;
    grid-row:2;
    min-width:0;   /* empeche son contenu de forcer la colonne Datacron a s'elargir */
  }

  h2{
    margin:0 0 5px 0;
    font-size:1.2rem;
    color: #00c8ff;
	margin-top: 0;
  }
   h3{
    margin:0 0 5px 0;
    font-size:1.2rem;
    color: #00c8ff;
	margin-top: 0;
  }
  
  /*langue*/
  label{ 
    font-weight:bold;
    margin-bottom:8px;
    display:block;
	
  }
  select{
    width:100%;
    padding:5px 8px;
    border:1px solid #2f8fc4;
    border-radius:6px;
    background:#0d1b2a;
    color:#e0e0e0;
    font-family:inherit;
    cursor:pointer;
    transition:border-color .18s ease, box-shadow .18s ease;
  }
  select:hover{
    border-color:#6fd4ff;
  }
  select:focus{
    outline:none;
    border-color:#6fd4ff;
    box-shadow:0 0 6px rgba(111,212,255,0.5);
  }
  select:disabled{
    opacity:0.5;
    cursor:not-allowed;
  }
  select option{
    background:#0d1b2a;
    color:#e0e0e0;
  }

  /* Langue / Faction / Classe / Specialisation – grille 2x2 compacte */
  .controls-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px 10px;
    margin-bottom:8px;
  }
  .controls-grid label{
    font-size:0.75rem;
    margin-bottom:3px;
  }
  .controls-grid select{
    padding:3px 5px;
    font-size:0.75rem;
  }
.actions button{
    background: linear-gradient(135deg, #8b0000, #b22222);
    color: #fff;
    border: 1px solid #4a0000;
    border-radius: 4px;
    padding: 6px 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    transition: background .2s, box-shadow .2s, transform .1s;
	display:block;
	margin-left:auto;
	margin-right:auto;
  }

  /* Boutons « Équipements » */
  .equipments{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
    margin-top:auto;
  }
  .equip-row{
    display:flex;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
  }
  .equip-tile{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    width:74px;
  }
  .equip-label{
    font-size:0.7rem;
    letter-spacing:0.02em;
    color:#7ec8e3;
    text-align:center;
    line-height:1.1;
  }


  /* Réglage équipement (colonne centrale) */
  .settings{
    display:grid;
    grid-template-columns:repeat(2, 1fr);   /* deux colonnes identiques */
    gap:20px;
}
  .settings-title{
    grid-column:1 / -1;   /* s'etend sur les deux colonnes pour etre centre sur toute la largeur de la carte */
  }
  .settings .group{
    background:#15171f;
    border:1px solid #90caf9;
    border-radius:6px;
    padding:8px;
    display:flex;
    flex-direction:column;
    gap:6px;
    min-height:120px;
    justify-content:center;
  }
  .settings button{
    background: linear-gradient(135deg, #001f3f, #003366);
  color: #fff;
  border: 1px solid #004080;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  transition: background .2s, box-shadow .2s, transform .1s;
  width:100%;
    padding:6px;
   }


  /* Statistiques (catégorie 3) */
  .stats{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    margin-top:16px;
	  }
  .stats .column{
    background:linear-gradient(160deg, #0d1b2a, #16324d);
    border:1px solid #2f8fc4;
    border-radius:10px;
    padding:15px;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    gap:30px;
    min-height:150px;
  }
  .stats h3{
    margin:0 0 5px 0;
    font-size:1rem;
    color:#00c8ff;
    text-align:center;
  }
  .bilan-table{
    width:100%;
    table-layout:fixed;
    border-collapse:collapse;
    font-size:0.85rem;
  }
  .bilan-table th,
  .bilan-table td{
    border:none;
    border-bottom:1px solid #2f6f9e;
    padding:4px 6px;
    text-align:center;
  }
  .bilan-table tbody tr:last-child th,
  .bilan-table tbody tr:last-child td{
    border-bottom:none;
  }
  .bilan-table thead th{
    color:#6fd4ff;
  }
  .bilan-table thead th.bilan-col-pieces{
    color:#fb8c00;
  }
  .bilan-table thead th.bilan-col-implants{
    color:#7e57c2;
  }
  .bilan-table thead th.bilan-col-amelioration{
    color:#d4af37;
  }
  .bilan-table tbody th{
    color:#7ec8e3;
    text-align:left;
  }
  .bilan-table tbody td{
    color:#cfefff;
  }
  .stats button{
    width:100%;
    padding:5px;
    border:none;
    border-radius:4px;
    background:#fb8c00;
    color:#fff;
    cursor:pointer;
    font-size:0.78rem;
    transition:background .2s;
  }

  /* Datacron (catégorie 4) – petite mise en forme */
  #datacron-list label
  {
    display:block;
    margin-bottom:4px;
	background:#15171f;
  }

  /* -------------------------------------------------
     Responsive – tout passe en colonne sous 900 px
     ------------------------------------------------- */
  @media (max-width:900px){
    .layout{
      display:flex;   /* abandonne la grille : les blocs s'empilent, aucun chevauchement possible */
      flex-direction:column;
    }
    /* ordre mobile : Reglage/Equipement, Reglage equipement+stats, Buff, Bilan equipement, Datacron */
    .cat1-wrapper{ order:1; }
    .cat2-wrapper{ order:2; }
    .cat4-cat6-wrapper{ order:3; }
    .cat1-wrapper,.cat2-wrapper,.cat4-cat6-wrapper{
      grid-column:auto;
      grid-row:auto;
      width:auto;
      max-width:none;
      margin-bottom:30px;
    }
    .cat4-cat6-wrapper{
      display:flex;
      flex-direction:column;
    }
    .cat4-cat6-wrapper .cat6{ order:1; }
    .cat4-cat6-wrapper .cat-bilan{ order:2; }
    .cat4-cat6-wrapper .cat4{ order:3; }
    .cat4,.cat6,.cat-bilan{
      grid-column:auto;
      grid-row:auto;
      width:auto;
      max-width:none;
      margin-bottom:30px;
    }
    .cat1-equipement{
      min-height:0 !important;   /* neutralise l'agrandissement calcule par JS pour l'alignement desktop */
    }
    .cat2-wrapper{
      align-self:auto;
    }
    .cat-stats{
      margin-top:0;
    }
    .cat4,.cat6{
      max-height:none !important;   /* neutralise la hauteur calculee par JS pour l'alignement desktop */
      overflow-y:visible;
    }
    .cat-bilan{
      overflow-x:auto;   /* si le tableau Bilan equipement est plus large que l'ecran, il defile au lieu de deborder */
    }
  }
  
  .select-piece {
    min-width: 180px;      /* largeur minimale souhaitée */
    max-width: 180px;      /* empêche qu’elle s’étende davantage */
    width: 180px;          /* largeur exacte */
    box-sizing: border-box;/* inclut le padding/border dans la largeur */
}

 
    /* Mise en forme simple – deux colonnes, espacement agréable */
    .ameliorations-grid {
      display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 0.8rem;
  margin-top: 1rem;
    }
    .amelioration-slot label {
      display: block;
      font-size: 0.85rem;
      margin-bottom: 0.2rem;
    }
    .select-amelioration {
      width: 100%;
      padding: 0.3rem;
      font-size: 0.85rem;
    }
	.cat2 .settings{
    flex:1 1 0;            /* grow = 1, shrink = 1, base = 0 */
    min-width:0;           /* autorise le rétrécissement sous la taille du contenu */
    display:grid;
    grid-template-columns:1fr 1fr;   /* deux colonnes */
    gap:20px;
}

  .cat2 .equipment-column{
  display:flex;
  flex-direction:column;            /* empile les <div class="equip-slot"> */
  gap:12px;                         /* espacement vertical agréable */
}
.cat2 .ameliorations-column{
  display:flex;
  flex-direction:column;            /* empile les <div class="equip-slot"> */
  gap:12px;                         /* espacement vertical agréable */
}

@media (max-width:900px){
    .cat2 .settings{
        grid-template-columns:1fr;   /* une seule colonne sur petit écran */
    }
}

/* 3 sélecteurs + label = une « row » */
.slot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 0.8rem;
}



/* Un peu de style (facultatif) */
.slot-row label {font-weight:bold;min-width:80px;flex-basis:100%;text-align:center;color:#00c8ff;}   /* force le retour a la ligne avant le 1er selecteur (flex-wrap sur .slot-row) ; centre dans la colonne ; couleur alignee sur les autres textes (headers) au lieu du gris herite du body */
.slot-row select{
  padding:.35rem .5rem;
  border-radius:4px;
  width:9rem;
}
.hidden { display:none !important; }
/* -------------------------------------------------
   Lignes d’améliorations (2 sélecteurs / ligne)
   ------------------------------------------------- */
.amelioration-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 0.8rem;
}

/* Masquage – doit venir **après** la définition ci‑dessus */
.amelioration-row.hidden {
  display: none !important;   /* on force le masquage même si d’autres règles s’ajoutent */
}

/* Libellé + sélecteurs (identiques à votre version précédente) */
.amelioration-row label {
  font-weight: bold;
  min-width: 80px;
  flex-basis: 100%;   /* force le retour a la ligne avant le 1er selecteur, comme .slot-row label */
  text-align: center; /* centre dans la colonne */
  color: #00c8ff;     /* couleur alignee sur les autres textes (headers) au lieu du gris herite du body */
}
.amelioration-row select {
  padding: .35rem .5rem;
  border-radius: 4px;
  width: 9rem;
}

/* -------------------------------------------------
   Couleurs des options d’index (conservées)
   -------------------------------------------------
#improve-selectors option[value="300"],
#improve-selectors option[value="318"]{
  color:#ffd700;               
}
#improve-selectors option[value="310"],
#improve-selectors option[value="286"]{
  color:#800080;               
}
#improve-selectors option{
  color:#00c8ff;               
} */

/* Masqué au départ */
.slot-row.hidden {display:none;}

/* -------------------------------------------------
   1️⃣  Reset the default button look – we’ll draw it ourselves
   ------------------------------------------------- */
/* -----------------------------------------------------------------
   1️⃣  Bouton d’équipement – état normal (définit l’icône)
   ----------------------------------------------------------------- */
.equipments .equip-btn {
    /* Taille fixe – ne change jamais */
    width: 70px;
    height: 70px;
    padding: 0;
    margin: 0;
    box-sizing: border-box;

    /* Fond propre – aucune couleur ni gradient */
    background: none;                     /* efface toute pile de fonds */
    background-image: var(--icon-url);    /* icône définie plus bas */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    /* Pas de chrome natif du bouton */
    border: none;
    outline: none;
    cursor: pointer;
    position: relative;   /* ancre pour le cadre dore (::before/::after) */

    /* (optionnel) petite animation de pression, mais sans changer la taille */
    transition: transform 0.08s ease;
}
.equipments .equip-btn:active { transform: scale(0.96); }

/* -----------------------------------------------------------------
   1️⃣‑bis  Marqueur de selection – icone actuellement selectionnee
            dans la zone Equipement. Forme et couleur configurables
            via l'option d'accessibilite "Marqueur" (voir #marker-select),
            qui pose l'attribut data-marker-style sur <body>.
            Style par defaut (aucun attribut / "carre-dore") : carre
            complet dore autour de l'icone.
   ----------------------------------------------------------------- */
.equipments .equip-btn.selected::before{
    content:"";
    position:absolute;
    inset:-6px;
    border:2px solid #d9a53d;
    box-shadow:
        0 0 8px 2px rgba(255,224,150,0.6),
        inset 0 0 6px 1px rgba(255,224,150,0.4);
    pointer-events:none;
}

/* -----------------------------------------------------------------
   Lignes horizontales (dorees / rouges / vertes) : fine barre collee
   contre l'icone. Degrade gauche-droite (transparent -> couleur pleine
   au centre -> transparent) qui se fond dans le fond bleu de la zone.
   On utilise filter:drop-shadow (et non box-shadow) car drop-shadow
   suit la transparence reelle du degrade : le halo s'estompe donc lui
   aussi aux extremites au lieu de dessiner un rectangle de lueur uniforme.
   ----------------------------------------------------------------- */
/* ----- Lignes dorees ----- */
body[data-marker-style="lignes-dorees"] .equipments .equip-btn.selected::before{
    inset:auto -6px auto -6px;
    top:-6px;
    height:3px;
    border:none;
    box-shadow:none;
    background:linear-gradient(to right, rgba(217,165,61,0) 0%, rgba(217,165,61,0.95) 30%, rgba(217,165,61,0.95) 70%, rgba(217,165,61,0) 100%);
    filter:drop-shadow(0 0 4px rgba(255,224,150,0.7));
}
body[data-marker-style="lignes-dorees"] .equipments .equip-btn.selected::after{
    content:"";
    position:absolute;
    left:-6px;
    right:-6px;
    bottom:-6px;
    height:3px;
    background:linear-gradient(to right, rgba(217,165,61,0) 0%, rgba(217,165,61,0.95) 30%, rgba(217,165,61,0.95) 70%, rgba(217,165,61,0) 100%);
    filter:drop-shadow(0 0 4px rgba(255,224,150,0.7));
    pointer-events:none;
}

/* ----- Ligne rouge ----- */
body[data-marker-style="ligne-rouge"] .equipments .equip-btn.selected::before{
    inset:auto -6px auto -6px;
    top:-6px;
    height:3px;
    border:none;
    box-shadow:none;
    background:linear-gradient(to right, rgba(238,51,51,0) 0%, rgba(238,51,51,0.95) 30%, rgba(238,51,51,0.95) 70%, rgba(238,51,51,0) 100%);
    filter:drop-shadow(0 0 4px rgba(255,120,120,0.7));
}
body[data-marker-style="ligne-rouge"] .equipments .equip-btn.selected::after{
    content:"";
    position:absolute;
    left:-6px;
    right:-6px;
    bottom:-6px;
    height:3px;
    background:linear-gradient(to right, rgba(238,51,51,0) 0%, rgba(238,51,51,0.95) 30%, rgba(238,51,51,0.95) 70%, rgba(238,51,51,0) 100%);
    filter:drop-shadow(0 0 4px rgba(255,120,120,0.7));
    pointer-events:none;
}

/* ----- Ligne verte ----- */
body[data-marker-style="ligne-verte"] .equipments .equip-btn.selected::before{
    inset:auto -6px auto -6px;
    top:-6px;
    height:3px;
    border:none;
    box-shadow:none;
    background:linear-gradient(to right, rgba(51,204,51,0) 0%, rgba(51,204,51,0.95) 30%, rgba(51,204,51,0.95) 70%, rgba(51,204,51,0) 100%);
    filter:drop-shadow(0 0 4px rgba(140,255,140,0.7));
}
body[data-marker-style="ligne-verte"] .equipments .equip-btn.selected::after{
    content:"";
    position:absolute;
    left:-6px;
    right:-6px;
    bottom:-6px;
    height:3px;
    background:linear-gradient(to right, rgba(51,204,51,0) 0%, rgba(51,204,51,0.95) 30%, rgba(51,204,51,0.95) 70%, rgba(51,204,51,0) 100%);
    filter:drop-shadow(0 0 4px rgba(140,255,140,0.7));
    pointer-events:none;
}

/* ----- Carre rouge : meme carre complet que le carre dore, en rouge ----- */
body[data-marker-style="carre-rouge"] .equipments .equip-btn.selected::before{
    inset:-6px;
    border:2px solid #e33;
    box-shadow:
        0 0 8px 2px rgba(255,120,120,0.6),
        inset 0 0 6px 1px rgba(255,120,120,0.4);
}

/* ----- Carre vert : meme carre complet que le carre dore, en vert ----- */
body[data-marker-style="carre-vert"] .equipments .equip-btn.selected::before{
    inset:-6px;
    border:2px solid #3c3;
    box-shadow:
        0 0 8px 2px rgba(140,255,140,0.6),
        inset 0 0 6px 1px rgba(140,255,140,0.4);
}

/* ----- Aucun marqueur ----- */
body[data-marker-style="aucun"] .equipments .equip-btn.selected::before,
body[data-marker-style="aucun"] .equipments .equip-btn.selected::after{
    content:none;
}

/* -----------------------------------------------------------------
   2️⃣  Icônes – on utilise une variable CSS pour garder le code DRY
   ----------------------------------------------------------------- */
.equipments .equip-btn[data-slot="tete"]      { --icon-url: url("./icons/tete.png"); }
.equipments .equip-btn[data-slot="torse"]    { --icon-url: url("./icons/torse.png"); }
.equipments .equip-btn[data-slot="gant"]     { --icon-url: url("./icons/gant.png"); }
.equipments .equip-btn[data-slot="poignet"]  { --icon-url: url("./icons/poignet.png"); }
.equipments .equip-btn[data-slot="ceinture"] { --icon-url: url("./icons/ceinture.png"); }
.equipments .equip-btn[data-slot="pantalon"] { --icon-url: url("./icons/pantalon.png"); }
.equipments .equip-btn[data-slot="botte"]    { --icon-url: url("./icons/botte.png"); }
.equipments .equip-btn[data-slot="oreillette"]{ --icon-url: url("./icons/oreillette.png"); }
.equipments .equip-btn[data-slot="arme1"]    { --icon-url: url("./icons/arme1.png"); }
.equipments .equip-btn[data-slot="arme2"]    { --icon-url: url("./icons/arme2.png"); }
.equipments .equip-btn[data-slot="implant1"] { --icon-url: url("./icons/implant1.png"); }
.equipments .equip-btn[data-slot="implant2"] { --icon-url: url("./icons/implant2.png"); }
.equipments .equip-btn[data-slot="relique1"] { --icon-url: url("./icons/relique1.png"); }
.equipments .equip-btn[data-slot="relique2"] { --icon-url: url("./icons/relique2.png"); }

/* -----------------------------------------------------------------
   3️⃣  Neutraliser le hover (et le focus) – aucune modification du fond
   ----------------------------------------------------------------- */

/* -----------------------------------------------------------------
   Tableau « Details de la piece selectionnee »
   ----------------------------------------------------------------- */
#piece-stats{
  min-height:250px;   /* reserve la place du plus grand tableau reellement observe (6 lignes, piece + amelioration cumulees), mesure sur un cas reel a 6 lignes, pour que la zone Reglage equipement n'agrandisse pas brutalement quand une piece est selectionnee, sans laisser un vide excessif */
}
.piece-stats-header{
  margin-bottom:6px;
  color:#00c8ff;
}
.piece-stats-slot{
  font-weight:bold;
}
table.piece-stats-table{
  width:100%;
  border-collapse:collapse;
  background:#0b1622;
  font-size:0.85rem;
}
table.piece-stats-table th,
table.piece-stats-table td{
  border:1px solid #2f6f9e;
  padding:4px 8px;
  text-align:left;
}
table.piece-stats-table thead th{
  background:#132a3d;
  color:#6fd4ff;
  font-weight:bold;
}
table.piece-stats-table tbody td{
  color:#cfefff;
}
table.piece-stats-table tbody td:first-child{
  color:#7ec8e3;
  font-weight:bold;
}