/* ============================================================
   THÈME GLORY LIFE
   Toutes les couleurs du site sont définies ICI, une seule fois.
   Ailleurs on écrit var(--nom) au lieu de la couleur.
   Change une valeur ici, elle change partout sur le site.
   ============================================================ */
:root {
  /* --- Fonds --- */
  --fond: #0f1420;
  /* fond bleu très sombre */
  --fond-carte: #161d2b;
  /* fond des cartes et de la barre du haut */
  --fond-verre: rgba(22, 29, 43, 0.72);
  /* même fond mais translucide : laisse voir l'image spatiale derrière */
  --fond-champ: #131a27;

  /* --- Bleu Glory Life --- */
  --bleu: #4da3ff;
  --bleu-clair: #7cc0ff;
  --bleu-fonce: #2b7fd4;

  /* --- Traits et bordures --- */
  --trait: rgba(77, 163, 255, 0.16);
  /* bordure discrète, teintée de bleu */
  --trait-fort: rgba(77, 163, 255, 0.34);

  /* --- Textes --- */
  --texte: #e6e9ef;
  --texte-doux: #a8b0bb;
  /* pour les phrases secondaires */
  --texte-fort: #ffffff;

  /* --- Arrondis et ombres --- */
  --arrondi: 14px;
  --arrondi-petit: 8px;
  --ombre: 0 10px 30px rgba(0, 0, 0, 0.35);
  --ombre-haute: 0 18px 45px rgba(0, 0, 0, 0.45);
}

/* ===== Base : thème sombre Glory Life ===== */
body {
  font-family: 'Outfit', 'Segoe UI', Arial, sans-serif;
  /* la police */
  background-color: var(--fond);
  /* fond bleu très sombre */
  color: var(--texte);
  /* texte gris clair */
  margin: 0;
  /* enlève la marge par défaut */
  padding: 2rem;
  /* de l'air autour du contenu */
  line-height: 1.6;
  /* espace entre les lignes */
  -webkit-font-smoothing: antialiased;
  /* rend le texte plus fin et net */
}

/* Les titres en bleu Glory Life */
h1,
h2,
h3 {
  color: #4da3ff;
}

/* Les liens */
a {
  color: #4da3ff;
  text-decoration: none;
  /* enlève le soulignement */
}

a:hover {
  color: #7cc0ff;
  /* couleur au survol de la souris */
}

/* Les boutons */
button {
  background-color: #4da3ff;
  color: #0f1420;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  /* coins arrondis */
  font-size: 1rem;
  cursor: pointer;
  /* la petite main au survol */
}

button:hover {
  background-color: #7cc0ff;
}

/* ===== Barre de navigation ===== */
body {
  padding: 0;
}

/* on enlève le padding du body, on le remet dans le container */

.navbar {
  display: flex;
  /* aligne les éléments sur une ligne */
  justify-content: space-between;
  /* logo à gauche, liens à droite */
  align-items: center;
  /* la barre reste collée en haut quand on descend dans la page */
  position: sticky;
  top: 0;
  z-index: 50;
  /* fond translucide + flou : on devine l'image spatiale derrière */
  background-color: rgba(18, 24, 38, 0.72);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  padding: 0.9rem 2rem;
  border-bottom: 1px solid var(--trait);
}

.nav-logo {
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  /* le nom du serveur en dégradé bleu */
  background: linear-gradient(100deg, var(--texte-fort), var(--bleu));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.nav-links a {
  margin-left: 0.25rem;
  padding: 0.45rem 0.7rem;
  border-radius: var(--arrondi-petit);
  color: var(--texte-doux);
  transition: color 0.15s, background 0.15s;
}

/* pastille bleutée au survol d'un lien du menu */
.nav-links a:hover {
  color: var(--texte-fort);
  background: rgba(77, 163, 255, 0.12);
}

.nav-user {
  margin-left: 1.2rem;
  color: #9aa4b2;
}

/* Le contenu centré, avec de l'air */
.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem;
}

/* ===== Cartes ===== */
/* Effet "verre" : fond translucide + flou, on voit le fond spatial au travers */
.card {
  background-color: var(--fond-verre);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--trait);
  border-radius: var(--arrondi);
  padding: 1.6rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--ombre);
}

/* ===== Tableaux ===== */
table {
  width: 100%;
  border-collapse: collapse;
  background-color: #161d2b;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

th,
td {
  padding: 0.9rem 1rem;
  text-align: left;
  border-bottom: 1px solid #243044;
}

th {
  background-color: #1e2740;
  color: #9db4d6;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}

tr:hover td {
  background-color: #1b2436;
}

/* ===== Badges de statut (les pastilles colorées) ===== */
.badge {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: bold;
  text-transform: uppercase;
}

.badge-en_attente {
  background: #3a2f00;
  color: #ffcf4d;
}

.badge-accepte {
  background: #0f3320;
  color: #4ade80;
}

.badge-refuse {
  background: #3a1414;
  color: #f87171;
}

.badge-retire {
  background: #2a2f3a;
  color: #9aa4b2;
}

/* ===== Boutons colorés ===== */
.btn {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--trait);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
  text-decoration: none;
  background: rgba(42, 52, 68, 0.75);   /* fond par défaut (bouton secondaire) */
  transition: background 0.15s, transform 0.1s, border-color 0.15s;
}
.btn:hover { background: rgba(53, 66, 84, 0.9); border-color: var(--trait-fort); }
.btn:active { transform: scale(0.98); }

/* Bouton principal : le dégradé bleu Glory Life, pour l'action la plus importante */
.btn-primaire {
  background: linear-gradient(120deg, var(--bleu), var(--bleu-fonce));
  border-color: transparent;
  color: #08111f;
  box-shadow: 0 8px 24px rgba(77, 163, 255, 0.28);
}
.btn-primaire:hover {
  background: linear-gradient(120deg, var(--bleu-clair), var(--bleu));
  box-shadow: 0 10px 30px rgba(77, 163, 255, 0.4);
}

/* Bouton style Discord (blurple) */
.btn-discord { background: #5865f2; }
.btn-discord:hover { background: #4752c4; }

.btn-success {
  background: #22c55e;
}

.btn-success:hover {
  background: #16a34a;
}

.btn-danger {
  background: #ef4444;
}

.btn-danger:hover {
  background: #dc2626;
}

.btn-warning {
  background: #f59e0b;
  color: #0f1420;
}

.btn-warning:hover {
  background: #d97706;
}

/* ===== Champs de formulaire (pour la WL plus tard) ===== */
input,
textarea,
select {
  width: 100%;
  max-width: 550px;
  padding: 0.6rem;
  margin-top: 0.3rem;
  background-color: #0f1420;
  border: 1px solid #243044;
  border-radius: 6px;
  color: #e6e9ef;
  font-size: 1rem;
  font-family: inherit;
}

input[type="radio"],
input[type="checkbox"] {
  width: auto;
  margin-right: 0.5rem;
}

fieldset {
  border: 1px solid #243044;
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  background-color: #161d2b;
}

legend {
  color: #4da3ff;
  font-weight: bold;
  padding: 0 0.5rem;
}

/* ===== Finition des formulaires ===== */

/* Le formulaire ne s'étale pas sur tout l'écran */
form {
  max-width: 750px;
}

/* De l'air avant chaque question */
fieldset p {
  margin: 1.5rem 0 0.5rem;
  font-weight: 500;
  color: #cdd6e4;
}

/* Chaque choix (radio/checkbox) bien aéré */
fieldset label {
  display: inline-block;
  padding: 0.2rem 0;
}

/* Aligner proprement la case avec son texte */
input[type="radio"],
input[type="checkbox"] {
  vertical-align: middle;
  margin-bottom: 3px;
}

/* Les zones de texte un peu plus hautes et redimensionnables */
textarea {
  min-height: 80px;
  resize: vertical;
}

/* ===== Questionnaire étape par étape ===== */
.step {
  display: none;
}

/* toutes les questions cachées par défaut */
.step.active {
  display: block;
}

/* sauf celle qui a la classe "active" */

.step-section {
  display: block;
  text-align: center;
  /* centré */
  color: #4da3ff;
  font-size: 1.5rem;
  /* plus grand */
  font-weight: bold;
  /* en gras, style titre */
  margin-bottom: 1.5rem;
}

.step .question {
  font-size: 1.25rem;
  margin: 0 0 1.2rem;
  color: #e6e9ef;
}

.wl-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  border-top: 1px solid #243044;
  padding-top: 1.5rem;
}

#wl-progress {
  color: #9aa4b2;
  margin-left: auto;
}

/* pousse le compteur à droite */

/* Centrer le questionnaire de whitelist */
.wl-wrapper {
  max-width: 700px;
  margin: 0 auto;
  /* auto à gauche + à droite = centré horizontalement */
}

/* ===== Barre de progression ===== */
.wl-progress-bar {
  width: 100%;
  height: 8px;
  background: #243044;
  /* le rail (partie vide) */
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 2rem;
}

.wl-progress-fill {
  height: 100%;
  width: 0;
  /* vide au départ */
  background: linear-gradient(90deg, #4da3ff, #7cc0ff);
  /* dégradé bleu */
  border-radius: 999px;
  transition: width 0.3s ease;
  /* l'animation fluide quand ça avance */
}

/* ===== Cartes de statistiques (dashboard) ===== */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  /* s'adapte à la largeur */
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}

.stat-card {
  background: #161d2b;
  border: 1px solid #243044;
  border-radius: 10px;
  padding: 1.3rem;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.stat-number {
  font-size: 2.2rem;
  font-weight: bold;
  color: #4da3ff;
  line-height: 1;
}

.stat-label {
  margin-top: 0.4rem;
  color: #9aa4b2;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Couleurs par statut */
.stat-attente .stat-number {
  color: #ffcf4d;
}

.stat-accepte .stat-number {
  color: #4ade80;
}

.stat-refuse .stat-number {
  color: #f87171;
}

/* ===== Pastilles de permissions ===== */
.perm-pill {
  display: inline-block;
  background: #1e2740;
  color: #9db4d6;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: bold;
  margin-left: 0.3rem;
}

/* ===== Onglets de filtre ===== */
.filters {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.filter-tab {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  background: #161d2b;
  border: 1px solid #243044;
  color: #9aa4b2;
}

.filter-tab:hover {
  background: #1b2436;
  color: #e6e9ef;
}

.filter-tab.active {
  background: #4da3ff;
  color: #0f1420;
  border-color: #4da3ff;
  font-weight: bold;
}

/* ===== Mise en page 2 colonnes (page limite) ===== */
.limite-layout {
  display: flex;
  /* les enfants côte à côte */
  gap: 1.5rem;
  align-items: flex-start;
  /* alignés en haut */
  flex-wrap: wrap;
  /* passe en dessous si l'écran est étroit */
}

.limite-side {
  width: 340px;
  /* ← doit être identique à .limite-spacer */
  max-width: 100%;
}

.limite-main {
  flex: 1;
  min-width: 300px;
}

.limite-main .card {
  max-width: 600px;
  margin: 0 auto;
}

.limite-spacer {
  width: 340px;
  /* ← même valeur que .limite-side */
}

.limite-side h3 {
  color: #4da3ff;
  margin-bottom: 1rem;
}

/* ===== Feedback de refus à côté du formulaire ===== */
.wl-feedback-side {
  position: absolute;
  /* plaqué à gauche, sans décaler le formulaire centré */
  left: 2rem;
  top: 9rem;
  width: 320px;
}

.wl-feedback-side h3 {
  color: #4da3ff;
  margin-bottom: 1rem;
}

/* Sur écran étroit : repasse au-dessus du formulaire pour éviter le chevauchement */
@media (max-width: 1300px) {
  .wl-feedback-side {
    position: static;
    width: auto;
    max-width: 700px;
    margin: 0 auto 2rem;
  }
}

/* ===== Cartes du règlement ===== */
.reglement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.2rem;
  margin-top: 1.5rem;
}

.reglement-card {
  display: block;
  background: #161d2b;
  border: 1px solid #243044;
  border-radius: 10px;
  padding: 1.3rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  color: inherit;
  /* garde le texte clair, pas bleu */
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.reglement-card:hover {
  transform: translateY(-3px);
  /* la carte "monte" au survol */
  border-color: #4da3ff;
}

.reglement-card h3 {
  color: #4da3ff;
  margin: 0 0 0.5rem;
}

.reglement-card p {
  color: #9aa4b2;
  margin: 0;
}

/* ===== Règlement (barre latérale + contenu) ===== */
.reglement-layout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.reglement-nav {
  width: 260px;
  flex-shrink: 0;
  position: sticky;
  /* la barre reste visible au scroll */
  top: 2rem;
}

/* Menus déroulants du règlement */
.reglement-groupe>summary {
  list-style: none;
  /* enlève la flèche par défaut du navigateur */
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.reglement-groupe>summary::-webkit-details-marker {
  display: none;
}

.reglement-fleche {
  color: #9aa4b2;
  padding: 0 0.4rem;
  /* zone cliquable plus large */
  transition: transform 0.15s ease;
}

.reglement-groupe[open]>summary .reglement-fleche {
  transform: rotate(90deg);
}

.reglement-enfants {
  margin-left: 0.75rem;
  border-left: 1px solid #243044;
  padding-left: 0.5rem;
}

.reglement-lien {
  display: block;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  color: #cdd6e4;
}

.reglement-lien:hover {
  background: #161d2b;
}

.reglement-lien.actif {
  background: rgba(77, 163, 255, 0.12);
  color: #4da3ff;
  font-weight: bold;
}

.reglement-contenu {
  flex: 1;
  min-width: 0;
  background: #161d2b;
  border: 1px solid #243044;
  border-radius: 10px;
  padding: 2rem;
}

.reglement-contenu h1,
.reglement-contenu h2,
.reglement-contenu h3 {
  color: #4da3ff;
}

.reglement-contenu a {
  color: #4da3ff;
}

@media (max-width: 900px) {
  .reglement-layout {
    flex-direction: column;
  }

  .reglement-nav {
    width: 100%;
    position: static;
  }
}

/* Meilleur rendu du contenu Markdown */
.reglement-contenu {
  line-height: 1.7;
}

.reglement-contenu h1 {
  margin-top: 0;
}

.reglement-contenu h2 {
  margin-top: 2rem;
}

.reglement-contenu ul,
.reglement-contenu ol {
  padding-left: 1.5rem;
}

.reglement-contenu li {
  margin-bottom: 0.5rem;
}

.reglement-contenu strong {
  color: #e6e9ef;
}

.reglement-contenu blockquote {
  border-left: 3px solid #4da3ff;
  margin: 1rem 0;
  padding: 0.5rem 1rem;
  background: #0f1420;
  color: #cdd6e4;
  border-radius: 0 6px 6px 0;
}

.reglement-contenu hr {
  border: none;
  border-top: 1px solid #243044;
  margin: 2rem 0;
}

/* On élargit un peu tout le site (comme GitBook) */
.container {
  max-width: 1250px;
}

/* Contenu du règlement plus grand et lisible */
.reglement-contenu {
  font-size: 1.05rem;
  line-height: 1.75;
}

.reglement-contenu h2 {
  font-size: 1.6rem;
  margin-top: 2.5rem;
}

.reglement-contenu h3 {
  font-size: 1.25rem;
}

/* ===== Encadrés / bulles (façon GitBook) ===== */
/* ===== Encadrés façon GitBook (icône à gauche, fond teinté) ===== */
.callout {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  border-radius: 8px;
  padding: 1rem 1.2rem;
  margin: 1.4rem 0;
}

.callout::before {
  flex-shrink: 0;
  font-size: 1.15rem;
  line-height: 1.6;
}

.callout-body {
  flex: 1;
}

.callout-body> :first-child {
  margin-top: 0;
}

.callout-body> :last-child {
  margin-bottom: 0;
}

/* Le texte de l'encadré reste en taille normale (même si c'est un titre dans le .md) */
.callout-body,
.callout-body * {
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

/* Texte de l'encadré en couleur normale (fini le bleu) */
.callout-body,
.callout-body * {
  color: #e8e6e3 !important;
}

.callout-body mark {
  background: transparent !important;
}

/* Teintes + bordure + icône selon le type */
.callout-info {
  background: #1a2331;
  border-left: 3px solid #4da3ff;
}

.callout-info::before {
  content: 'ℹ️';
}

.callout-success {
  background: #14241b;
  border-left: 3px solid #4ade80;
}

.callout-success::before {
  content: '✅';
}

.callout-warning {
  background: #2a2512;
  border-left: 3px solid #ffcf4d;
}

.callout-warning::before {
  content: '⚠️';
}

.callout-danger {
  background: #2b1719;
  border-left: 3px solid #f87171;
}

.callout-danger::before {
  content: '⚠️';
}

/* Le règlement prend TOUTE la largeur de la page */
.container:has(.reglement-layout) {
  max-width: none;
}

/* Contenu encore plus grand */
.reglement-contenu {
  font-size: 1.1rem;
  line-height: 1.8;
}

.reglement-contenu h2 {
  font-size: 1.8rem;
  margin-top: 2.5rem;
}

.reglement-contenu h3 {
  font-size: 1.35rem;
}

/* Les titres surlignés deviennent des titres colorés (plus de jaune) */
.reglement-contenu mark {
  background: transparent;
  color: #d9b25a;
  /* doré façon GitBook */
  font-weight: bold;
}

.reglement-contenu {
  max-width: 860px;
}

/* Police serif "façon GitBook" pour le règlement */
.reglement-contenu,
.reglement-contenu h1,
.reglement-contenu h2,
.reglement-contenu h3 {
  font-family: Georgia, 'Times New Roman', serif;
}

.reglement-contenu {
  color: #e8e6e3;
}

/* Mise en page façon GitBook : pas de cadre, colonne de texte centrée */
.reglement-contenu {
  background: none;
  /* enlève le fond de la "carte" */
  border: none;
  /* enlève la bordure */
  padding: 0;
  max-width: none;
}

.reglement-contenu>* {
  max-width: 800px;
  /* largeur de lecture confortable */
  margin-left: auto;
  /* + auto des deux côtés */
  margin-right: auto;
  /* = colonne centrée */
}

/* Contenu calé près de la barre latérale (comme GitBook), pas au centre */
.reglement-contenu {
  max-width: 850px;
}

.reglement-contenu>* {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* ============ RÈGLEMENT — habillage façon GitBook ============ */
.reglement-layout {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
}

.reglement-nav {
  width: 270px;
  flex-shrink: 0;
  position: sticky;
  top: 1.5rem;
}

.reglement-recherche {
  width: 100%;
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
  background: #0f1420;
  border: 1px solid #243044;
  border-radius: 8px;
  color: #e6e9ef;
  font-size: 0.9rem;
}

a.reglement-lien::before,
.reglement-parent-titre::before {
  content: '📄';
  margin-right: 0.5rem;
  font-size: 0.8rem;
  opacity: 0.55;
}

a.reglement-sous::before {
  content: '›';
  opacity: 0.7;
}

.reglement-principal {
  flex: 1;
  min-width: 0;
  max-width: 820px;
}

.reglement-fil {
  color: #9aa4b2;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin: 0 0 0.4rem;
}

.reglement-contenu {
  background: none;
  border: none;
  padding: 0;
  max-width: none;
}

.reglement-contenu>* {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.reglement-utile {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #243044;
  color: #9aa4b2;
  font-size: 0.9rem;
}

.reglement-emojis {
  margin-left: 0.5rem;
  font-size: 1.15rem;
  letter-spacing: 0.35rem;
  cursor: pointer;
}

.reglement-navpage {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
}

.reglement-navcard {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
  padding: 1rem 1.2rem;
  background: #161d2b;
  border: 1px solid #243044;
  border-radius: 10px;
  color: inherit;
}

.reglement-navcard:hover {
  border-color: #4da3ff;
}

.reglement-navcard-droite {
  text-align: right;
}

.reglement-navlabel {
  color: #9aa4b2;
  font-size: 0.8rem;
}

.reglement-navtitre {
  color: #4da3ff;
  font-weight: bold;
}

/* Centrer tout le bloc règlement sur la page */
.reglement-layout {
  max-width: 1400px;
  margin: 0 auto;
}

/* Encadrer la barre latérale (comme GitBook) */
.reglement-nav {
  background: #10151f;
  border-color: #1c2534;
  border: 1px solid #243044;
  border-radius: 12px;
  padding: 1rem 0.75rem;
  min-height: 75vh;
}

/* On enlève les icônes (celles de GitBook sont maison, pas récupérables) */
a.reglement-lien::before,
.reglement-parent-titre::before,
a.reglement-sous::before {
  content: none !important;
}

/* Cache les encadrés vides (le fameux trait bleu) */
.callout:has(.callout-body:empty) {
  display: none;
}

/* Couleurs des <mark> (mappées depuis GitBook) */
.reglement-contenu mark {
  background: transparent;
  font-weight: bold;
  color: #d9b25a;
}

.reglement-contenu .mk-or {
  color: #d9b25a;
}

/* doré (yellow) */
.reglement-contenu .mk-vert {
  color: #4ade80;
}

/* vert  (green)  */
.reglement-contenu .mk-rouge {
  color: #f87171;
}

/* rouge (red)    */
.reglement-contenu .mk-bleu {
  color: #7cc0ff;
}

/* bleu  (blue)   */
.reglement-contenu .mk-mauve {
  color: #c084fc;
}

/* mauve (purple) */

/* Titres de section en doré (comme GitBook) */
.reglement-contenu h2,
.reglement-contenu h3,
.reglement-contenu h4,
.reglement-contenu h5,
.reglement-contenu h6 {
  color: #d9b25a;
}

/* ============================================================
   RÈGLEMENT — BLOC FINAL AUTORITAIRE (nettoyage, écrase le reste)
   ============================================================ */
.reglement-contenu {
  background: none;
  border: none;
  padding: 0;
  max-width: 850px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.1rem;
  line-height: 1.8;
  color: #e8e6e3;
}
.reglement-contenu > * {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Titre de page en bleu (identité Glory Life), titres de section en blanc net */
.reglement-contenu h1 {
  color: #4da3ff;
  font-size: 2.2rem;
  margin: 0 0 1.5rem;
}
.reglement-contenu h2,
.reglement-contenu h3,
.reglement-contenu h4,
.reglement-contenu h5,
.reglement-contenu h6 {
  color: #ffffff;
  margin-top: 2.6rem;
  margin-bottom: 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(77, 163, 255, 0.18);
}
.reglement-contenu h2 { font-size: 1.6rem; }
.reglement-contenu h3 { font-size: 1.35rem; }
.reglement-contenu h4 { font-size: 1.2rem; }

/* Emphases NEUTRES : plus aucune couleur de texte, juste blanc lumineux + gras.
   Ça ressort par le contraste, pas par la teinte. */
.reglement-contenu mark,
.reglement-contenu strong,
.reglement-contenu b {
  background: transparent;
  color: #f5f5f5;
  font-weight: 700;
}

/* Le texte des encadrés reste crème + taille normale */
.callout-body,
.callout-body * {
  color: #e8e6e3 !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

/* ============================================================
   PAGE DE CONFIRMATION APRÈS ENVOI WHITELIST
   ============================================================ */
.envoye-card {
  max-width: 560px;
  margin: 3rem auto;
  padding: 2.5rem 2rem;
}
.envoye-icone {
  font-size: 3.5rem;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.envoye-card h1 {
  margin: 0 0 0.5rem;
  color: #4da3ff;
}
.envoye-sous {
  color: #cdd3db;
  margin-bottom: 2rem;
}
.envoye-etapes {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 0 auto 2rem;
  max-width: 420px;
}
.envoye-etape {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: #161c26;
  border: 1px solid rgba(77, 163, 255, 0.15);
  border-radius: 10px;
  padding: 0.8rem 1rem;
}
.envoye-num {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #4da3ff;
  color: #0f1420;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.envoye-note {
  color: #8b94a0;
  font-size: 0.92rem;
  margin-bottom: 1.8rem;
}
.envoye-actions {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   PAGE D'ACCUEIL (landing)
   ============================================================ */
.hero {
  text-align: center;
  padding: 6rem 1.5rem 4.5rem;
  max-width: 860px;
  margin: 0 auto;
}

/* Le petit texte au-dessus du titre, dans une pastille bordée */
.hero-surtitre {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bleu-clair);
  background: rgba(77, 163, 255, 0.1);
  border: 1px solid var(--trait);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  margin: 0 0 1.6rem;
}

/* Le grand titre : un dégradé appliqué au texte lui-même.
   background-clip: text = le fond n'est visible qu'à l'intérieur des lettres,
   à condition que la couleur du texte soit transparente. */
.hero-titre {
  font-size: clamp(3rem, 9vw, 5.4rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.025em;
  margin: 0 0 1.2rem;
  background: linear-gradient(180deg, var(--texte-fort) 0%, var(--bleu) 60%, var(--bleu-fonce) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hero-tagline {
  font-size: 1.18rem;
  color: var(--texte-doux);
  line-height: 1.65;
  margin: 0 auto 2.4rem;
  max-width: 580px;
}
.hero-actions {
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}
.btn-grand {
  padding: 0.85rem 1.6rem;
  font-size: 1.05rem;
}
.hero-discord-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.4rem;
  font-size: 1rem;
}
.discord-logo {
  width: 22px;
  height: 22px;
}

/* ===== Image de fond (tout le site, fixe) ===== */
/* Un voile sombre (dégradé) est posé PAR-DESSUS l'image pour garder le texte lisible */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Les couches se superposent : la 1re est DEVANT, la dernière est DERRIÈRE.
     Deux halos bleus flous, puis un voile sombre, puis l'image spatiale. */
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(77, 163, 255, 0.30), transparent 68%),
    radial-gradient(700px 420px at 88% 12%, rgba(124, 192, 255, 0.14), transparent 70%),
    linear-gradient(rgba(15, 20, 32, 0.68), rgba(15, 20, 32, 0.86)),
    url('/fond_glory_site.png') center center / cover no-repeat;
}

.accueil-section {
  max-width: 1060px;
  margin: 1rem auto 5.5rem;
  padding: 0 1.5rem;
}
.accueil-titre {
  text-align: center;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.6rem;
  color: var(--texte-fort);
}

/* Phrase d'introduction sous un titre de section */
.accueil-intro {
  text-align: center;
  color: var(--texte-doux);
  max-width: 620px;
  margin: 0 auto 2.6rem;
}

.join-etapes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.join-etape {
  background: var(--fond-verre);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--trait);
  border-radius: var(--arrondi);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
/* la carte se soulève légèrement au survol */
.join-etape:hover {
  transform: translateY(-4px);
  border-color: var(--trait-fort);
  box-shadow: var(--ombre-haute);
}
.join-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--bleu), var(--bleu-fonce));
  color: #08111f;
  font-weight: 800;
  font-size: 1.2rem;
  margin-bottom: 1.1rem;
  box-shadow: 0 8px 22px rgba(77, 163, 255, 0.3);
}
.join-etape h3 {
  margin: 0 0 0.5rem;
  color: var(--texte-fort);
  font-size: 1.15rem;
  font-weight: 600;
}
.join-etape p {
  margin: 0;
  color: var(--texte-doux);
  line-height: 1.6;
  font-size: 0.95rem;
}

/* Sur petit écran, les 3 étapes passent en colonne */
@media (max-width: 760px) {
  .join-etapes { grid-template-columns: 1fr; }
  .hero-titre { font-size: 2.6rem; }
}

/* ============================================================
   RECRUTEMENT STAFF
   ============================================================ */
.recrut-code-card {
  max-width: 520px;
  margin: 3rem auto;
  text-align: center;
}
.input-code {
  display: block;
  width: 100%;
  max-width: 280px;
  margin: 1.2rem auto;
  padding: 0.65rem 0.9rem;
  font-size: 1.05rem;
  text-align: center;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: #0f1420;
  border: 1px solid rgba(77, 163, 255, 0.3);
  border-radius: 8px;
  color: #f5f5f5;
}
/* Formulaire de génération de code (ID ticket + bouton) */
.form-generer {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}
.form-generer input,
.form-generer select {
  max-width: 300px;
  margin: 0;
}
.aide-ticket {
  margin-top: 0.7rem;
  color: #8b94a0;
  font-size: 0.88rem;
}

/* Pastilles de code cliquables (copie au clic) */
.code-copiable {
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.code-copiable:hover {
  background: rgba(77, 163, 255, 0.25);
}
.code-copiable:active { transform: scale(0.96); }
.code-copie {
  background: #14241b !important;
  color: #4ade80;
}

/* Bouton d'accès mis en avant vers le panel recrutement */
.recrut-acces {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 480px;
  margin: 1rem 0 1.8rem;
  padding: 1rem 1.3rem;
  border-radius: 12px;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #1b3a5c, #245c8a);
  border: 1px solid rgba(124, 192, 255, 0.4);
  transition: transform 0.15s, box-shadow 0.15s;
}
.recrut-acces:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(36, 92, 138, 0.4);
}
.recrut-acces-icone { font-size: 1.8rem; }
.recrut-acces-texte { display: flex; flex-direction: column; flex: 1; }
.recrut-acces-texte strong { font-size: 1.1rem; }
.recrut-acces-texte small { color: #cfe0f2; font-size: 0.88rem; }
.recrut-acces-fleche { font-size: 1.4rem; color: #cfe0f2; }

.recrut-ticket {
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #a8b0bb;
  font-size: 0.95rem;
}
.recrut-ticket p { margin: 0 0 0.6rem; }
.recrut-section {
  margin: 2.2rem 0 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(77, 163, 255, 0.2);
  color: #4da3ff;
}
.recrut-champ {
  margin-bottom: 1.4rem;
}
.recrut-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #e8e6e3;
}
.recrut-champ textarea,
.recrut-champ input[type="number"] {
  width: 100%;
  padding: 0.7rem 0.9rem;
  background: #0f1420;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #f5f5f5;
  font-family: inherit;
  font-size: 1rem;
}
.recrut-radio {
  display: block;
  margin: 0.35rem 0;
  cursor: pointer;
  color: #cdd3db;
}
.recrut-autre {
  margin-top: 0.4rem;
  width: 100%;
  padding: 0.6rem 0.9rem;
  background: #0f1420;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #f5f5f5;
}
.reponse-bloc {
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.reponse-question {
  font-weight: 600;
  color: #9db4d0;
  margin: 0 0 0.3rem;
}
.reponse-texte {
  margin: 0;
  color: #e8e6e3;
  white-space: pre-wrap;
}

/* Bannière de notification (MP envoyé / bloqué) dans la page détail */
.notif-banniere {
  padding: 0.9rem 1.1rem;
  border-radius: 10px;
  margin-bottom: 1.2rem;
  font-weight: 600;
}
.notif-ok {
  background: #14241b;
  border: 1px solid #4ade80;
  color: #d7f7e3;
}
.notif-fail {
  background: #2a2512;
  border: 1px solid #f59e0b;
  color: #f6e7c8;
}

/* Avatar Discord dans le tableau du panel staff */
.joueur-cell {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.joueur-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: #161c26;
  flex: 0 0 auto;
}
/* ============================================================
   PAGE DOUANE — version compacte (ne touche pas le Règlement)
   ============================================================ */
.douane-contenu {
  font-size: 0.98rem;
  line-height: 1.55;
  max-width: 820px;
}

/* Titres plus discrets */
.douane-contenu h1 { font-size: 1.7rem; margin: 0 0 1rem; }
.douane-contenu h2 {
  font-size: 1.25rem;
  margin-top: 1.8rem;
  margin-bottom: 0.7rem;
  padding-bottom: 0.3rem;
}
.douane-contenu h3 {
  font-size: 1.02rem;
  margin-top: 1.2rem;
  margin-bottom: 0.35rem;
  border-bottom: none;      /* pas de trait sous chaque terme du lexique */
  padding-bottom: 0;
}

/* Listes serrées */
.douane-contenu ul { margin: 0.4rem 0; }
.douane-contenu li { margin-bottom: 0.35rem; }
.douane-contenu p  { margin: 0.4rem 0; }

/* Les notes ">" : fine barre, ligne discrète, plus de gros bloc vide */
.douane-contenu blockquote {
  border-left: 2px solid rgba(77, 163, 255, 0.55);
  margin: 0.6rem 0;
  padding: 0.15rem 0 0.15rem 0.8rem;
  background: transparent;
  border-radius: 0;
  font-size: 0.9rem;
  font-style: italic;
  color: #9fb0c8;
}

/* Encadrés (réponses attendues / rappels) : un peu plus compacts */
.douane-contenu .callout { margin: 0.7rem 0; padding: 0.7rem 0.9rem; }
.douane-contenu .callout-body,
.douane-contenu .callout-body * {
  font-size: 0.92rem !important;
  line-height: 1.5 !important;
}

/* Séparateurs plus légers */
.douane-contenu hr { margin: 1.4rem 0; }

/* ============================================================
   TABLEAUX dans le contenu du règlement (ex: Lexique RP)
   ============================================================ */
.reglement-contenu table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2rem 0;
  font-size: 0.95rem;
  background: #0f1420;
  border-radius: 8px;
  overflow: hidden;
}
.reglement-contenu thead th {
  background: #1a2233;
  color: #4da3ff;
  text-align: left;
  font-weight: 700;
  padding: 0.7rem 1rem;
  border-bottom: 2px solid rgba(77, 163, 255, 0.35);
}
.reglement-contenu tbody td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: top;
  color: #d7dde8;
}
.reglement-contenu tbody tr:last-child td { border-bottom: none; }
.reglement-contenu tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02); }
.reglement-contenu tbody tr:hover td { background: rgba(77, 163, 255, 0.06); }
.reglement-contenu tbody td:first-child { color: #f5f5f5; font-weight: 600; }

/* ============================================================
   RESPONSIVE — téléphone & tablette
   Ajouté en fin de fichier : ces règles passent après tout le reste,
   donc elles l'emportent sans avoir à mettre des !important partout.
   ============================================================ */

/* ----- Icônes de la navigation ----- */
.nav-ico {
  margin-right: 0.4rem;
  font-size: 0.95em;
}

/* ----- Bouton burger (caché sur ordinateur) ----- */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 9px;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid rgba(77, 163, 255, 0.35);
}
.nav-burger span {
  display: block;
  height: 2px;
  background: #4da3ff;
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}

/* Les trois barres se transforment en croix quand le menu est ouvert */
.nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
.nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  /* ----- Navigation ----- */
  .navbar {
    flex-wrap: wrap;
    padding: 0.9rem 1rem;
  }
  .nav-burger { display: flex; }

  .nav-links {
    display: none; /* fermé par défaut */
    width: 100%;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(77, 163, 255, 0.2);
  }
  .nav-toggle:checked ~ .nav-links { display: flex; }

  .nav-links a,
  .nav-user {
    display: block;
    margin-left: 0;
    padding: 0.75rem 0.6rem;
    border-radius: 8px;
  }
  .nav-links a:active { background: rgba(77, 163, 255, 0.12); }
  .nav-user {
    color: #9aa4b2;
    font-size: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    margin-top: 0.4rem;
  }

  /* ----- Contenu ----- */
  .container { padding: 1.2rem 1rem; }
}

@media (max-width: 760px) {
  /* ----- Tableaux : défilement horizontal au lieu de déborder ----- */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .reglement-contenu table { font-size: 0.9rem; }

  /* ----- Titres et textes ----- */
  .hero-titre { font-size: 2rem; }
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.3rem; }

  /* ----- Boutons : pleine largeur, plus faciles à viser au doigt ----- */
  .btn,
  .bouton,
  button[type="submit"] {
    width: 100%;
    text-align: center;
  }

  /* ----- Champs de formulaire : évite le zoom automatique d'iOS ----- */
  input,
  select,
  textarea { font-size: 16px; }

  /* ----- Cartes un peu moins rembourrées ----- */
  .card { padding: 1.1rem; }

  /* ----- Rien ne doit dépasser horizontalement ----- */
  img, pre, code { max-width: 100%; }
  pre { overflow-x: auto; }
}

@media (max-width: 480px) {
  .hero-titre { font-size: 1.7rem; }
  .container { padding: 1rem 0.8rem; }
}

/* ----- Correctifs mobile repérés au test ----- */
@media (max-width: 900px) {
  /* Le sommaire du règlement occupait tout l'écran : on le limite en hauteur
     avec son propre défilement, le contenu redevient accessible tout de suite.
     Le min-height du bureau doit être annulé : en CSS, min-height l'emporte
     TOUJOURS sur max-height, sinon la limite est ignorée. */
  .reglement-nav {
    min-height: 0;
    height: auto;
    max-height: 40vh;
    overflow-y: auto;
    position: static; /* pas de sticky sur mobile, ça collerait en haut de l'écran */
  }
}

@media (max-width: 760px) {
  /* Sans box-sizing, largeur 100% + padding = débordement horizontal.
     C'est ce qui faisait dépasser le bouton « Rejoindre le Discord ». */
  .btn,
  .bouton,
  button,
  input,
  select,
  textarea {
    box-sizing: border-box;
  }

  /* Les boutons du hero passent en pleine largeur, alignés les uns sous les autres */
  .hero-discord-btn,
  .btn-discord {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   MENU PERSONNEL (avatar + pseudo dans la navbar)
   Construit avec <details> : il s'ouvre au clic, sans JavaScript.
   ============================================================ */
.nav-perso {
  position: relative;
  display: inline-block;
  margin-left: 1.2rem;
}

/* La flèche native de <details> est masquée, on met la nôtre */
.nav-perso > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  cursor: pointer;
  color: #d7dde8;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.nav-perso > summary::-webkit-details-marker { display: none; }
.nav-perso > summary:hover {
  background: rgba(77, 163, 255, 0.1);
  border-color: rgba(77, 163, 255, 0.3);
}

.nav-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(77, 163, 255, 0.5);
  object-fit: cover;
}
.nav-perso-nom { font-size: 0.95rem; }
.nav-perso-fleche {
  font-size: 0.75rem;
  color: #9aa4b2;
  transition: transform 0.2s;
}
.nav-perso[open] > summary .nav-perso-fleche { transform: rotate(180deg); }

.nav-perso-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  min-width: 250px;
  display: flex;
  flex-direction: column;
  padding: 0.4rem;
  background: #161d2b;
  border: 1px solid #243044;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  z-index: 50;
}
.nav-perso-menu a {
  margin-left: 0;
  padding: 0.6rem 0.7rem;
  border-radius: 8px;
  font-size: 0.95rem;
  white-space: nowrap;
}
.nav-perso-menu a:hover { background: rgba(77, 163, 255, 0.12); }

/* La déconnexion est détachée du reste et discrètement rouge */
.nav-perso-deco {
  margin-top: 0.35rem;
  padding-top: 0.7rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #f87171 !important;
}
.nav-perso-deco:hover { background: rgba(248, 113, 113, 0.12) !important; }

/* ----- Sur mobile : pas de menu flottant, tout à plat dans le burger ----- */
@media (max-width: 900px) {
  .nav-perso {
    margin-left: 0;
    width: 100%;
    margin-top: 0.4rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .nav-perso > summary { width: 100%; padding: 0.6rem; }
  .nav-perso-menu {
    position: static;
    min-width: 0;
    width: 100%;
    margin-top: 0.3rem;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
  }
  .nav-perso-menu a { padding: 0.75rem 0.6rem; }
}

/* ============================================================
   PAGES « MOI » (espace personnel)
   ============================================================ */
.moi-vide {
  text-align: center;
  color: #9aa4b2;
  padding: 2.5rem 1rem;
}
.moi-demande {
  border-left: 3px solid #243044;
  padding-left: 1rem;
  margin-bottom: 1.4rem;
}
.moi-demande.statut-accepte { border-left-color: #4ade80; }
.moi-demande.statut-en_attente { border-left-color: #facc15; }
.moi-demande.statut-refuse,
.moi-demande.statut-retire { border-left-color: #f87171; }
.moi-date {
  color: #8b94a0;
  font-size: 0.88rem;
}
.moi-raison {
  margin-top: 0.6rem;
  padding: 0.7rem 0.9rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}

/* ============================================================
   PANEL DE GESTION DU BOT
   ============================================================ */
.panel-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1.8rem;
  align-items: start;
}

/* ----- Navigation latérale ----- */
.panel-nav {
  position: sticky;
  top: 1.5rem;
  background: #161d2b;
  border: 1px solid #243044;
  border-radius: 12px;
  padding: 0.8rem;
}
.panel-nav-titre {
  margin: 0.6rem 0 0.4rem 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7688;
}
.panel-nav-titre:first-child { margin-top: 0.2rem; }

.panel-nav-lien {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  border-radius: 8px;
  color: #d7dde8;
  font-size: 0.95rem;
  transition: background 0.15s, color 0.15s;
}
.panel-nav-lien:hover { background: rgba(77, 163, 255, 0.1); }
.panel-nav-lien.actif {
  background: rgba(77, 163, 255, 0.16);
  color: #4da3ff;
  font-weight: 600;
}
.panel-nav-ico { font-size: 1.05rem; }

/* ----- Contenu ----- */
.panel-entete { margin-bottom: 1.4rem; }
.panel-entete h1 { margin-bottom: 0.2rem; }
.panel-sous-titre { color: #9aa4b2; margin: 0; }

.panel-alerte {
  padding: 0.8rem 1rem;
  border-radius: 10px;
  margin-bottom: 1.2rem;
}
.panel-alerte-ok {
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.35);
  color: #4ade80;
}

.panel-form {
  background: #161d2b;
  border: 1px solid #243044;
  border-radius: 12px;
  padding: 1.4rem;
}
.panel-champ { margin-bottom: 1.3rem; }
.panel-champ:last-of-type { margin-bottom: 0.6rem; }
.panel-champ > label {
  display: block;
  margin-bottom: 0.45rem;
  font-weight: 600;
  color: #f5f5f5;
}
.panel-champ input[type="text"],
.panel-champ input[type="number"],
.panel-champ select {
  width: 100%;
  padding: 0.6rem 0.8rem;
  background: #0f1420;
  border: 1px solid rgba(77, 163, 255, 0.25);
  border-radius: 8px;
  color: #f5f5f5;
  font-size: 0.95rem;
}
.panel-champ input:focus,
.panel-champ select:focus {
  outline: none;
  border-color: #4da3ff;
  box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.15);
}
.panel-aide {
  margin: 0.4rem 0 0;
  font-size: 0.86rem;
  color: #8b94a0;
}

/* Sélection multiple de rôles */
.panel-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-height: 230px;
  overflow-y: auto;
  padding: 0.7rem;
  background: #0f1420;
  border: 1px solid rgba(77, 163, 255, 0.2);
  border-radius: 8px;
}
.panel-role-case {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.88rem;
  cursor: pointer;
}
.panel-role-case:hover { border-color: rgba(77, 163, 255, 0.4); }
.panel-role-case input { accent-color: #4da3ff; }
.panel-role-case:has(input:checked) {
  background: rgba(77, 163, 255, 0.16);
  border-color: rgba(77, 163, 255, 0.5);
}

/* Interrupteur oui/non */
.panel-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  cursor: pointer;
}
.panel-switch input { display: none; }
.panel-switch-piste {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: #2a3548;
  transition: background 0.2s;
}
.panel-switch-piste::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #8b94a0;
  transition: transform 0.2s, background 0.2s;
}
.panel-switch input:checked + .panel-switch-piste { background: rgba(74, 222, 128, 0.3); }
.panel-switch input:checked + .panel-switch-piste::after {
  transform: translateX(20px);
  background: #4ade80;
}
.panel-switch-texte { color: #9aa4b2; font-size: 0.9rem; }

.panel-couleur {
  width: 70px;
  height: 42px;
  padding: 4px;
  background: #0f1420;
  border: 1px solid rgba(77, 163, 255, 0.25);
  border-radius: 8px;
  cursor: pointer;
}

.panel-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.panel-meta { color: #6b7688; font-size: 0.86rem; }

/* ----- Journal ----- */
.journal-ligne {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.92rem;
}
.journal-ligne:last-child { border-bottom: none; }
.journal-date { color: #6b7688; font-variant-numeric: tabular-nums; }
.journal-action { color: #9aa4b2; }

/* ----- Mobile : la navigation passe au-dessus, à plat ----- */
@media (max-width: 900px) {
  .panel-layout { grid-template-columns: 1fr; }
  .panel-nav {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
  }
  .panel-nav-titre { width: 100%; }
  .panel-nav-lien { flex: 0 0 auto; }
  .panel-form { padding: 1rem; }
}

/* ============================================================
   ÉDITEUR DE MESSAGE (panel)
   ============================================================ */
.editeur {
  background: #0f1420;
  border: 1px solid rgba(77, 163, 255, 0.2);
  border-radius: 10px;
  padding: 1.1rem;
}
.editeur-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: 0.9rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.editeur-modes { display: flex; gap: 0.4rem; }
.editeur-mode {
  cursor: pointer;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  font-size: 0.88rem;
}
.editeur-mode input { display: none; }
.editeur-mode:has(input:checked) {
  background: rgba(77, 163, 255, 0.18);
  border-color: rgba(77, 163, 255, 0.5);
  color: #4da3ff;
}

.editeur-ligne {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.9rem;
  margin-bottom: 0.9rem;
}
.editeur label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: #c7d0dd;
}
.editeur-opt { font-weight: 400; color: #6b7688; }

.editeur input[type="text"],
.editeur select,
.editeur textarea {
  width: 100%;
  box-sizing: border-box; /* sinon 100 % + padding déborde de la colonne */
  padding: 0.55rem 0.75rem;
  background: #161d2b;
  border: 1px solid rgba(77, 163, 255, 0.2);
  border-radius: 8px;
  color: #f5f5f5;
  font-size: 0.92rem;
  font-family: inherit;
}
.editeur textarea { resize: vertical; line-height: 1.5; }
.editeur input:focus,
.editeur select:focus,
.editeur textarea:focus {
  outline: none;
  border-color: #4da3ff;
  box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.15);
}

.editeur-variables {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.6rem 0 1rem;
  font-size: 0.85rem;
  color: #8b94a0;
}
.editeur-var {
  padding: 0.15rem 0.5rem;
  background: rgba(77, 163, 255, 0.12);
  border-radius: 5px;
  color: #7cc0ff;
  cursor: help;
  font-size: 0.85rem;
}

/* Correctif : les règles de label de l'éditeur ne doivent pas s'appliquer
   à l'interrupteur ni aux boutons de mode, qui sont aussi des <label>. */
.editeur .panel-switch,
.editeur .editeur-mode {
  display: inline-flex;
  margin-bottom: 0;
  font-weight: 400;
}
.editeur .panel-switch { align-items: center; gap: 0.7rem; }
.editeur .panel-switch-piste { flex: 0 0 46px; }


/* ============================================================
   PAGE D'ACCUEIL — SECTIONS DE PRÉSENTATION
   Pourquoi nous · Métiers · Galerie · Staff · FAQ · Appel final
   ============================================================ */

/* Petite phrase grise sous une grille */
.accueil-note {
  text-align: center;
  color: var(--texte-doux);
  font-size: 0.92rem;
  margin-top: 1.6rem;
}

/* --- Grille souple : 3 colonnes sur grand écran, elle s'adapte seule.
   auto-fit + minmax = les colonnes se réorganisent sans media query. --- */
.grille-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
}

/* --- Blocs "Pourquoi nous" --- */
.bloc {
  background: var(--fond-verre);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--trait);
  border-radius: var(--arrondi);
  padding: 1.7rem 1.5rem;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.bloc:hover {
  transform: translateY(-4px);
  border-color: var(--trait-fort);
  box-shadow: var(--ombre-haute);
}
.bloc-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(77, 163, 255, 0.12);
  border: 1px solid var(--trait);
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.bloc h3 {
  margin: 0 0 0.45rem;
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--texte-fort);
}
.bloc p {
  margin: 0;
  color: var(--texte-doux);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* --- Métiers : des cases plus petites et plus nombreuses --- */
.grille-metiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.9rem;
}
.metier {
  background: var(--fond-verre);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--trait);
  border-radius: var(--arrondi-petit);
  padding: 1.3rem 1rem;
  text-align: center;
  transition: transform 0.16s, border-color 0.16s, background 0.16s;
}
.metier:hover {
  transform: translateY(-3px);
  border-color: var(--trait-fort);
  background: rgba(77, 163, 255, 0.08);
}
.metier-ico {
  font-size: 1.8rem;
  display: block;
  margin-bottom: 0.5rem;
}
.metier h3 {
  margin: 0 0 0.2rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--texte-fort);
}
.metier p {
  margin: 0;
  font-size: 0.84rem;
  color: var(--texte-doux);
  line-height: 1.45;
}

/* --- Galerie : cases au format paysage (16/10) --- */
.grille-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.galerie-case {
  aspect-ratio: 16 / 10;
  border-radius: var(--arrondi);
  border: 1px solid var(--trait);
  background: rgba(22, 29, 43, 0.55);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, border-color 0.2s;
}
.galerie-case:hover {
  transform: scale(1.02);
  border-color: var(--trait-fort);
}
/* l'image remplit la case sans se déformer */
.galerie-case img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.galerie-vide {
  color: var(--texte-doux);
  font-size: 0.88rem;
  opacity: 0.55;
}

/* --- Staff --- */
.staff-carte {
  background: var(--fond-verre);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--trait);
  border-radius: var(--arrondi);
  padding: 1.8rem 1.5rem;
  text-align: center;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.staff-carte:hover {
  transform: translateY(-4px);
  border-color: var(--trait-fort);
  box-shadow: var(--ombre-haute);
}
/* Pastille avec l'initiale, en attendant une vraie photo */
.staff-initiale {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--bleu), var(--bleu-fonce));
  color: #08111f;
  font-size: 1.9rem;
  font-weight: 800;
  margin-bottom: 1rem;
  box-shadow: 0 10px 26px rgba(77, 163, 255, 0.3);
}
.staff-photo {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1rem;
  background: var(--fond-carte);
  /* si Discord ne renvoie pas l'image, la case reste ronde et propre */
}
.staff-carte h3 {
  margin: 0 0 0.2rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--texte-fort);
}
.staff-role {
  margin: 0 0 0.7rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bleu-clair);
}
/* NB : on cible la classe et non `p:last-child`, sinon cette règle
   passerait devant .staff-role et écraserait sa couleur bleue. */
.staff-desc {
  margin: 0;
  color: var(--texte-doux);
  font-size: 0.93rem;
  line-height: 1.55;
}
.staff-recrute {
  margin-top: 1.6rem;
  padding: 1.6rem;
  text-align: center;
  border: 1px dashed var(--trait-fort);
  border-radius: var(--arrondi);
  background: rgba(77, 163, 255, 0.05);
}
.staff-recrute p {
  margin: 0 0 1rem;
  color: var(--texte-doux);
}

/* --- FAQ : chaque question est un <details>, aucun JavaScript --- */
.faq {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-width: 820px;
  margin: 0 auto;
}
.faq-item {
  background: var(--fond-verre);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--trait);
  border-radius: var(--arrondi-petit);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  padding: 1.1rem 1.3rem;
  font-weight: 600;
  color: var(--texte-fort);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: color 0.15s;
}
.faq-item summary:hover { color: var(--bleu-clair); }
/* on masque la flèche par défaut du navigateur */
.faq-item summary::-webkit-details-marker { display: none; }
/* et on dessine la nôtre, qui pivote à l'ouverture */
.faq-item summary::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--bleu);
  line-height: 1;
  transition: transform 0.2s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] { border-color: var(--trait-fort); }
.faq-reponse {
  padding: 0 1.3rem 1.2rem;
  color: var(--texte-doux);
  line-height: 1.65;
}
.faq-reponse p { margin: 0; }

/* --- Appel final --- */
.cta-final {
  text-align: center;
  padding: 3.2rem 1.8rem;
  border-radius: var(--arrondi);
  border: 1px solid var(--trait-fort);
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(77, 163, 255, 0.16), transparent 70%),
    var(--fond-verre);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--ombre-haute);
}
.cta-final h2 {
  margin: 0 0 0.7rem;
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--texte-fort);
}
.cta-final p {
  margin: 0 auto 1.8rem;
  max-width: 520px;
  color: var(--texte-doux);
}
.cta-actions {
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Si le visiteur a demandé à son système de réduire les animations,
   on désactive les effets de déplacement. */
@media (prefers-reduced-motion: reduce) {
  .bloc, .metier, .staff-carte, .join-etape, .galerie-case {
    transition: none;
  }
  .bloc:hover, .metier:hover, .staff-carte:hover,
  .join-etape:hover, .galerie-case:hover {
    transform: none;
  }
}


/* ============================================================
   FINITIONS DE LA PAGE D'ACCUEIL
   Défilement doux · pastilles · carrousel · icônes colorées
   ============================================================ */

/* Quand on clique sur un lien du menu (#galerie, #metiers…),
   la page DESCEND en glissant au lieu de sauter d'un coup. */
html {
  scroll-behavior: smooth;
}
/* La barre du haut est fixe : sans cette marge, elle recouvrirait
   le titre de la section sur laquelle on vient d'atterrir. */
[id] {
  scroll-margin-top: 96px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --- Barre du haut : logo en image + bouton de connexion --- */
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.nav-logo-img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--trait-fort);
  flex: none;
}
/* le dégradé s'applique au texte seul, pas à l'image */
.nav-logo-texte {
  background: linear-gradient(100deg, var(--texte-fort), var(--bleu));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.nav-links a.nav-cta {
  background: linear-gradient(120deg, var(--bleu), var(--bleu-fonce));
  color: #08111f;
  font-weight: 700;
  margin-left: 0.6rem;
  box-shadow: 0 6px 18px rgba(77, 163, 255, 0.28);
}
.nav-links a.nav-cta:hover {
  background: linear-gradient(120deg, var(--bleu-clair), var(--bleu));
  color: #08111f;
}

/* --- Hero : la ligne d'accroche entre le titre et le paragraphe --- */
.hero-soustitre {
  font-size: clamp(1.25rem, 3vw, 1.7rem);
  font-weight: 500;
  color: var(--texte);
  margin: 0 0 0.8rem;
}

/* --- Pastille au-dessus d'un titre de section --- */
.pastille {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bleu-clair);
  background: rgba(77, 163, 255, 0.1);
  border: 1px solid var(--trait);
  border-radius: 999px;
  padding: 0.38rem 0.95rem;
  margin: 0 auto 1rem;
}
/* les sections sont centrées : la pastille doit l'être aussi */
.accueil-section { text-align: center; }
.accueil-section .bloc,
.accueil-section .faq-item { text-align: left; }
.accueil-section .encart { text-align: center; }
.accueil-section .metier,
.accueil-section .join-etape,
.accueil-section .staff-carte,
.accueil-section .cta-final { text-align: center; }

/* --- Le deuxième mot du titre, en dégradé bleu --- */
.titre-accent {
  background: linear-gradient(100deg, var(--bleu), var(--bleu-clair));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* --- Section qui déborde jusqu'aux bords de l'écran ---
   100vw compte AUSSI la largeur de la barre de défilement verticale :
   la section dépasse donc l'écran d'une quinzaine de pixels sur la
   droite. On coupe ce dépassement au niveau du <body>.
   On utilise `clip` et non `hidden` : `hidden` sur un parent
   désactiverait le position:sticky de la barre du haut. */
body {
  overflow-x: clip;
}
.pleine-largeur {
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}

/* --- Carrousel : la piste se décale de la moitié de sa largeur.
   Comme les images sont écrites deux fois, la seconde moitié est
   identique à la première : quand l'animation reboucle, l'oeil ne
   voit aucune coupure. --- */
.carrousel {
  overflow: hidden;
  padding: 0.5rem 0 1rem;
  /* les bords s'estompent en fondu au lieu d'être coupés net */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.carrousel-piste {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: defile 46s linear infinite;
}
/* le défilement s'arrête quand la souris passe dessus */
.carrousel:hover .carrousel-piste {
  animation-play-state: paused;
}
@keyframes defile {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 0.5rem)); }
}
.carrousel .galerie-case {
  flex: 0 0 340px;
  aspect-ratio: 16 / 10;
}
@media (max-width: 620px) {
  .carrousel .galerie-case { flex-basis: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  .carrousel-piste { animation: none; }
  .carrousel { overflow-x: auto; }
}

/* --- Pastilles d'icônes colorées ---
   La même forme pour tous, seule la couleur du dégradé change. */
.bloc-ico, .metier-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  border: none;
  color: #fff;
}
.bloc-ico {
  width: 48px;
  height: 48px;
  background: none;
  margin-bottom: 1.1rem;
}
.bloc-ico svg { width: 23px; height: 23px; }
.metier-ico {
  width: 52px;
  height: 52px;
  font-size: 1.5rem;
  margin: 0 auto 0.85rem;
  display: flex;
}

.ico-bleu   { background: linear-gradient(140deg, #4da3ff, #2b6fd4); box-shadow: 0 8px 20px rgba(77, 163, 255, 0.30); }
.ico-rouge  { background: linear-gradient(140deg, #ff6b6b, #d63b3b); box-shadow: 0 8px 20px rgba(255, 107, 107, 0.26); }
.ico-violet { background: linear-gradient(140deg, #a78bfa, #7c50e6); box-shadow: 0 8px 20px rgba(167, 139, 250, 0.26); }
.ico-orange { background: linear-gradient(140deg, #ffb057, #ef8620); box-shadow: 0 8px 20px rgba(255, 176, 87, 0.24); }
.ico-vert   { background: linear-gradient(140deg, #5ed88a, #2fa25c); box-shadow: 0 8px 20px rgba(94, 216, 138, 0.24); }
.ico-cyan   { background: linear-gradient(140deg, #4fd7e0, #1f9fb0); box-shadow: 0 8px 20px rgba(79, 215, 224, 0.24); }
.ico-rose   { background: linear-gradient(140deg, #ff8fc0, #e2528f); box-shadow: 0 8px 20px rgba(255, 143, 192, 0.24); }
.ico-jaune  { background: linear-gradient(140deg, #ffd166, #eaa72c); box-shadow: 0 8px 20px rgba(255, 209, 102, 0.24); }

/* --- Staff : bandeau coloré en haut de la carte --- */
.staff-carte {
  position: relative;
  overflow: hidden;
  padding-top: 4.6rem;
}
/* La couleur vient de Discord, passée par le gabarit dans
   --couleur-role. On en tire un dégradé : la teinte du rôle d'un
   côté, la même éclaircie de l'autre. */
.staff-bandeau {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 78px;
  background: linear-gradient(
    100deg,
    var(--couleur-role, var(--bleu-fonce)),
    color-mix(in srgb, var(--couleur-role, var(--bleu)) 62%, #ffffff)
  );
}
/* Classes de repli, si jamais un bandeau est écrit à la main */
.bandeau-bleu   { background: linear-gradient(100deg, #2b6fd4, #4da3ff); }
.bandeau-violet { background: linear-gradient(100deg, #7c50e6, #b98bfa); }
.bandeau-cyan   { background: linear-gradient(100deg, #1f9fb0, #4fd7e0); }
/* la pastille chevauche le bandeau, comme une photo de profil */
.staff-carte .staff-initiale,
.staff-carte .staff-photo {
  position: relative;
  z-index: 1;
  border: 4px solid var(--fond-carte);
  margin-top: -2.4rem;
}
.staff-desc {
  margin: 0;
  color: var(--texte-doux);
  font-size: 0.93rem;
  line-height: 1.55;
}

/* --- Encart de bas de section --- */
.encart {
  margin-top: 1.6rem;
  padding: 1.7rem;
  text-align: center;
  border: 1px solid var(--trait-fort);
  border-radius: var(--arrondi);
  background:
    radial-gradient(500px 220px at 50% 0%, rgba(77, 163, 255, 0.12), transparent 70%),
    var(--fond-verre);
}
.encart p { margin: 0 0 0.4rem; color: var(--texte-doux); }
.encart-fort {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--texte-fort) !important;
}
.encart .btn { margin-top: 1rem; }

/* --- Bouton de retour en haut --- */
.retour-haut {
  position: fixed;
  right: 1.6rem;
  bottom: 1.6rem;
  z-index: 60;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--bleu), var(--bleu-fonce));
  color: #08111f;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  transition: transform 0.16s;
}
.retour-haut:hover { transform: translateY(-3px); color: #08111f; }
.retour-haut svg { width: 20px; height: 20px; }

/* --- Apparition des sections au défilement ---
   animation-timeline: view() déclenche l'animation quand la section
   entre dans l'écran, sans JavaScript. Les navigateurs qui ne le
   gèrent pas ignorent tout le bloc : le contenu reste simplement
   visible, ce qui est le bon comportement de repli. --- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .anim {
      animation: apparait linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 22%;
    }
    @keyframes apparait {
      from { opacity: 0; transform: translateY(28px); }
      to   { opacity: 1; transform: translateY(0); }
    }
  }
}

/* --- Sur petit écran, le menu déroulé ne doit pas être écrasé --- */
@media (max-width: 1200px) {
  .nav-links a { margin-left: 0.1rem; padding: 0.4rem 0.55rem; font-size: 0.95rem; }
}


/* ============================================================
   BANDEAU DE TITRE DE PAGE
   ============================================================ */
.page-bandeau {
  padding: 3rem 0 2.6rem;
  border-bottom: 1px solid var(--trait);
  background:
    radial-gradient(700px 300px at 12% 0%, rgba(77, 163, 255, 0.20), transparent 70%),
    linear-gradient(180deg, rgba(22, 29, 43, 0.75), rgba(15, 20, 32, 0.35));
  margin-bottom: 2rem;
}
.page-bandeau-interieur {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}
.page-bandeau h1 {
  margin: 0.7rem 0 0.4rem;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--texte-fort);
}
.page-bandeau p {
  margin: 0;
  color: var(--texte-doux);
  font-size: 1.05rem;
}

.fil-ariane {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--texte-doux);
}
.fil-ariane a { color: var(--texte-doux); }
.fil-ariane a:hover { color: var(--bleu-clair); }
.fil-sep { color: var(--ink-3, var(--texte-doux)); opacity: 0.6; }
.fil-actuel { color: var(--bleu-clair); }


/* ============================================================
   RÈGLEMENT — recherche et sommaire
   ============================================================ */
.reglement-recherche-barre {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  max-width: 1400px;
  margin: 0 auto 2rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--trait);
  border-radius: var(--arrondi-petit);
  background: var(--fond-verre);
  color: var(--texte-doux);
}
.reglement-recherche-barre:focus-within { border-color: var(--trait-fort); }
.reglement-recherche-barre svg { width: 19px; height: 19px; flex: none; }
.reglement-recherche-barre input {
  border: none;
  background: none;
  padding: 0;
  width: 100%;
  color: var(--texte);
  font: inherit;
}
.reglement-recherche-barre input:focus { outline: none; }

/* La colonne de droite, qui suit le défilement */
.reglement-sommaire {
  width: 230px;
  flex-shrink: 0;
  position: sticky;
  top: 100px;
  align-self: flex-start;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  padding: 1rem 0 1rem 1.1rem;
  border-left: 1px solid var(--trait);
}
.sommaire-titre {
  margin: 0 0 0.8rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
#sommaire-liens {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.sommaire-lien {
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--texte-doux);
  padding: 0.35rem 0.6rem;
  border-left: 2px solid transparent;
  border-radius: 0 4px 4px 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.sommaire-lien:hover {
  color: var(--texte-fort);
  background: rgba(77, 163, 255, 0.07);
}
.sommaire-lien.niveau-h3 {
  padding-left: 1.3rem;
  font-size: 0.83rem;
}
.sommaire-lien.actif {
  color: var(--bleu-clair);
  border-left-color: var(--bleu);
  background: rgba(77, 163, 255, 0.1);
}
/* Les titres visés doivent s'arrêter sous la barre du haut */
.reglement-contenu h1,
.reglement-contenu h2,
.reglement-contenu h3 { scroll-margin-top: 100px; }

/* Pas assez de place pour trois colonnes : on retire le sommaire */
@media (max-width: 1250px) {
  .reglement-sommaire { display: none; }
}


/* ============================================================
   PIED DE PAGE
   ============================================================ */
.pied {
  margin-top: 5rem;
  border-top: 1px solid var(--trait);
  background: linear-gradient(180deg, rgba(15, 20, 32, 0.4), rgba(11, 15, 24, 0.9));
}
.pied-interieur {
  max-width: 1240px;
  margin: 0 auto;
  padding: 3.2rem 2rem 2.4rem;
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 2.4rem;
}
@media (max-width: 860px) {
  .pied-interieur { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .pied-interieur { grid-template-columns: 1fr; }
}

.pied-marque p {
  margin: 0.9rem 0 1.2rem;
  color: var(--texte-doux);
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 330px;
}
.pied-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.25rem;
  font-weight: 800;
}
.pied-reseau {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--trait);
  background: var(--fond-verre);
  color: var(--texte-doux);
  transition: color 0.15s, border-color 0.15s, transform 0.15s;
}
.pied-reseau:hover {
  color: #fff;
  border-color: var(--trait-fort);
  transform: translateY(-2px);
}
.pied-reseau svg { width: 20px; height: 20px; }

.pied-colonne {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.pied-colonne h3 {
  margin: 0 0 0.4rem;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--texte-fort);
}
.pied-colonne a {
  color: var(--texte-doux);
  font-size: 0.92rem;
}
.pied-colonne a:hover { color: var(--bleu-clair); }

.pied-bas {
  border-top: 1px solid var(--line-soft, var(--trait));
  padding: 1.3rem 2rem;
  text-align: center;
}
.pied-bas p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--texte-doux);
}
.pied-mention {
  margin-top: 0.35rem !important;
  opacity: 0.7;
  font-size: 0.79rem !important;
}


/* ============================================================
   BARRE DU HAUT — finitions
   Tout est enfermé dans `min-width: 901px` : en dessous, c'est le
   menu burger qui prend la main et il ne faut surtout pas le gêner.
   ============================================================ */
@media (min-width: 901px) {
  .navbar {
    padding: 0.85rem 2.4rem;
    /* fond plus dense : les liens ressortent mieux sur l'image de fond */
    background-color: rgba(13, 18, 30, 0.86);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
  }

  /* Logo plus imposant, comme une vraie marque */
  .nav-logo-img {
    width: 50px;
    height: 50px;
    border-width: 2px;
  }
  .nav-logo-texte {
    font-size: 1.45rem;
    letter-spacing: -0.01em;
  }

  /* Les liens sont alignés et espacés régulièrement */
  .nav-links {
    display: flex;
    align-items: center;
    gap: 0.1rem;
  }
  .nav-links > a {
    margin-left: 0;
    padding: 0.55rem 0.8rem;
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap;
  }

  /* Le menu personnel prend la place du bouton de droite */
  .nav-perso { margin-left: 0.7rem; }
  .nav-perso > summary {
    padding: 0.35rem 0.8rem 0.35rem 0.4rem;
    border: 1px solid var(--trait);
    background: rgba(77, 163, 255, 0.08);
  }
  .nav-perso > summary:hover { border-color: var(--trait-fort); }
}

/* Entre 901 et 1400 px, on resserre pour que tout tienne sur une ligne */
@media (min-width: 901px) and (max-width: 1400px) {
  .navbar { padding: 0.8rem 1.4rem; }
  .nav-links > a { padding: 0.5rem 0.55rem; font-size: 0.94rem; }
  .nav-logo-img { width: 42px; height: 42px; }
  .nav-logo-texte { font-size: 1.25rem; }
}

/* ============================================================
   MES PERSONNAGES
   ============================================================ */
.perso-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.2rem;
}

.perso-carte {
  background: #161d2b;
  border: 1px solid #243044;
  border-radius: 14px;
  padding: 1.3rem;
}

.perso-entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.perso-nom {
  margin: 0;
  font-size: 1.25rem;
  color: #4da3ff;
}
.perso-id {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  color: #6b7688;
  font-family: monospace;
  letter-spacing: 0.05em;
}

/* Les sommes d'argent */
.perso-argent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}
.perso-somme {
  background: #0f1420;
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
}
.perso-somme-label {
  display: block;
  font-size: 0.76rem;
  color: #8b94a0;
  margin-bottom: 0.2rem;
}
.perso-somme strong {
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
}

/* Les informations d'identité */
.perso-infos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.7rem 1rem;
  margin: 0;
}
.perso-infos dt {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7688;
}
.perso-infos dd {
  margin: 0.1rem 0 0;
  color: #d7dde8;
}

.perso-prison {
  margin: 1rem 0 0;
  padding: 0.6rem 0.8rem;
  background: rgba(248, 113, 113, 0.1);
  border-left: 3px solid #f87171;
  border-radius: 6px;
  color: #f87171;
  font-size: 0.9rem;
}

.perso-pied {
  margin: 1.1rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.82rem;
  color: #6b7688;
}

/* ----- Papiers du personnage ----- */
.perso-papiers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1.1rem;
}
.perso-papier {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.82rem;
  color: #9aa4b2;
}
.perso-papier.ok { color: #4ade80; background: rgba(74, 222, 128, 0.1); }
.perso-papier.non { color: #6b7688; }

/* ----- Véhicules (repliés) ----- */
.perso-vehicules {
  margin-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 0.9rem;
}
.perso-vehicules > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: #d7dde8;
  padding: 0.3rem 0;
}
.perso-vehicules > summary::-webkit-details-marker { display: none; }
.perso-vehicules > summary::after {
  content: '▾';
  margin-left: auto;
  color: #6b7688;
  transition: transform 0.2s;
}
.perso-vehicules[open] > summary::after { transform: rotate(180deg); }

.perso-compteur {
  padding: 0.05rem 0.5rem;
  background: rgba(77, 163, 255, 0.16);
  border-radius: 999px;
  font-size: 0.8rem;
  color: #4da3ff;
}
.perso-aucun {
  margin: 0.7rem 0 0;
  color: #6b7688;
  font-size: 0.9rem;
}

.vehicule {
  margin-top: 0.8rem;
  padding: 0.85rem;
  background: #0f1420;
  border-radius: 10px;
}
.vehicule-entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}
.vehicule-nom { display: block; color: #f5f5f5; }
.vehicule-plaque {
  display: inline-block;
  margin-top: 0.2rem;
  padding: 0.05rem 0.45rem;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: #9aa4b2;
}
.vehicule-etat {
  flex: 0 0 auto;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  background: rgba(255, 255, 255, 0.06);
  color: #9aa4b2;
}
.vehicule-etat.garage { background: rgba(74, 222, 128, 0.14); color: #4ade80; }
.vehicule-etat.sorti { background: rgba(250, 204, 21, 0.14); color: #facc15; }
.vehicule-etat.fourriere { background: rgba(248, 113, 113, 0.14); color: #f87171; }

.vehicule-jauges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.5rem 0.8rem;
  margin-bottom: 0.7rem;
}
.jauge-label {
  display: block;
  font-size: 0.76rem;
  color: #8b94a0;
  margin-bottom: 0.25rem;
}
.jauge-piste {
  height: 5px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 3px;
  overflow: hidden;
}
.jauge-barre {
  height: 100%;
  background: linear-gradient(90deg, #4da3ff, #7cc0ff);
  border-radius: 3px;
}

.vehicule-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.8rem;
  color: #8b94a0;
}
.vehicule-details span {
  padding: 0.12rem 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 5px;
}
.vehicule-credit { color: #facc15 !important; background: rgba(250, 204, 21, 0.1) !important; }

.vehicule-fourriere {
  margin: 0.6rem 0 0;
  font-size: 0.82rem;
  color: #f87171;
}

/* ----- Liste de messages automatiques ----- */
.editeur-item {
  margin-bottom: 0.9rem;
  border: 1px solid rgba(77, 163, 255, 0.18);
  border-radius: 10px;
  overflow: hidden;
}
.editeur-item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 0.9rem;
  background: rgba(77, 163, 255, 0.07);
  font-weight: 600;
  color: #d7dde8;
}
.editeur-item > summary::-webkit-details-marker { display: none; }
.editeur-item > summary::after {
  content: '▾';
  margin-left: auto;
  color: #6b7688;
  transition: transform 0.2s;
}
.editeur-item[open] > summary::after { transform: rotate(180deg); }
.editeur-item-info {
  font-weight: 400;
  font-size: 0.84rem;
  color: #8b94a0;
}
.editeur-item .editeur {
  border: none;
  border-radius: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Les paires texte/lien des boutons, resserrées */
.editeur-bouton { margin-bottom: 0.5rem; }
.editeur-bouton:last-of-type { margin-bottom: 0.9rem; }