/* =========================================================
   SECTION MASTHEAD (fond limité à la section)
   ========================================================= */
.masthead{
  min-height:60vh;
  background:url("https://labaguetterp.fr/darkrp/assets/images/logo.jpg") center/cover no-repeat;
  /* background:url("assets/img/bg-masthead.png") center/cover no-repeat; */
  position:relative;
  margin-bottom:clamp(32px,6vw,96px) !important;
}
.masthead::after{
  content:"";
  position:absolute; inset:0;
  /* overlay un peu plus sombre pour un meilleur contraste sur fond dark */
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.45));
}
.masthead .container{ position:relative; z-index:2; }

/* =========================================================
   BASE / Variables — Thème sombre
   ========================================================= */
:root{
  /* Fonts */
  --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Poppins", sans-serif;
  --nav-font: "Raleway", sans-serif;

  /* Palette dark */
  --background-color:#0e1117;   /* fond page */
  --default-color:#e5e7eb;       /* texte par défaut */
  --muted-color:#94a3b8;         /* textes secondaires */
  --heading-color:#f8fafc;       /* titres */
  --accent-color:#4f9cff;        /* accent (liens/boutons) */
  --accent-color-2:#1977cc;      /* compat (où tu utilisais déjà 1977cc) */

  /* Surfaces (cartes / blocs) */
  --surface-1:#0f172a;           /* carte principale */
  --surface-2:#111827;           /* variante */
  --surface-3:#0b1220;           /* entêtes / barres */
  --surface-border:#1f2937;      /* bordures discrètes */
  --surface-shadow:0 10px 24px rgba(2,8,23,.35);

  /* Nav (sombre) */
  --nav-color:#e5e7eb;
  --nav-hover-color:#90caf9;
  --nav-mobile-background-color:#0f172a;
  --nav-dropdown-background-color:#0b1220;
  --nav-dropdown-color:#e5e7eb;
  --nav-dropdown-hover-color:#90caf9;

  /* Contraste absolu si nécessaire */
  --contrast-color:#ffffff;
}

.light-background{ --background-color:#0e1117; --surface-color:#0f172a; }
.dark-background{
  --background-color:#0e1117;
  --default-color:#e5e7eb;
  --heading-color:#f8fafc;
  --surface-color:#0f172a;
  --contrast-color:#ffffff;
}

/* =========================================================
   GLOBAL
   ========================================================= */
:root{ scroll-behavior:smooth; }

body{
  color:var(--default-color);
  background-color:var(--background-color);
  font-family:var(--default-font);
}

a{
  color:var(--accent-color);
  text-decoration:none;
  transition:.28s ease;
}
a:hover{
  color:color-mix(in srgb, var(--accent-color), transparent 20%);
  text-decoration:none;
}

h1,h2,h3,h4,h5,h6{
  color:var(--heading-color);
  font-family:var(--heading-font);
}

/* =========================================================
   BOUTON PLAY (inchangé)
   ========================================================= */
.pulsating-play-btn{ width:94px; height:94px; background:radial-gradient(var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 75%) 52%); border-radius:50%; display:block; position:relative; overflow:hidden; }
.pulsating-play-btn:before{ content:""; position:absolute; width:120px; height:120px; animation: pulsate-play-btn 2s infinite steps; opacity:1; border-radius:50%; border:5px solid color-mix(in srgb, var(--accent-color), transparent 30%); top:-15%; left:-15%; background:rgba(198,16,0,0); }
.pulsating-play-btn:after { content:""; position:absolute; left:50%; top:50%; transform:translate(-40%,-50%); width:0; height:0; border-top:10px solid transparent; border-bottom:10px solid transparent; border-left:15px solid #fff; z-index:100; transition:all 400ms cubic-bezier(.55,.055,.675,.19); }
.pulsating-play-btn:hover:before{ content:""; position:absolute; left:50%; top:50%; transform:translate(-40%,-50%); width:0; height:0; border:none; border-top:10px solid transparent; border-bottom:10px solid transparent; border-left:15px solid #fff; z-index:200; animation:none; border-radius:0; }
.pulsating-play-btn:hover:after { border-left:15px solid var(--accent-color); transform:scale(20); }
@keyframes pulsate-play-btn{ 0%{ transform:scale(.6); opacity:1; } 100%{ transform:scale(1); opacity:0; } }

/* =========================================================
   FORM MESSAGES
   ========================================================= */
.php-email-form .error-message{ display:none; background:#df1529; color:#fff; text-align:left; padding:15px; margin-bottom:24px; font-weight:600; border:1px solid #7f1d1d; }
.php-email-form .sent-message{ display:none; color:#fff; background:#059652; text-align:center; padding:15px; margin-bottom:24px; font-weight:600; border:1px solid #03543f; }
.php-email-form .loading{ display:none; background:var(--surface-1); text-align:center; padding:15px; margin-bottom:24px; border:1px solid var(--surface-border); color:var(--muted-color); }
.php-email-form .loading:before{ content:""; display:inline-block; border-radius:50%; width:24px; height:24px; margin:0 10px -6px 0; border:3px solid var(--accent-color); border-top-color:transparent; animation: php-email-form-loading 1s linear infinite;}
@keyframes php-email-form-loading{ 0%{ transform:rotate(0deg);} 100%{ transform:rotate(360deg);} }

/* =========================================================
   HEADER (adapté sombre)
   ========================================================= */
.header{
  color:var(--default-color);
  transition:.5s;
  z-index:997;
  background-color:rgba(15,23,42,.85);
  backdrop-filter:saturate(160%) blur(8px);
  -webkit-backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header .topbar{
  background-color:var(--accent-color-2);
  height:40px; padding:0; font-size:14px; transition:.5s;
}
.header .topbar .contact-info i{ font-style:normal; color:#fff; }
.header .topbar .contact-info i a, .header .topbar .contact-info i span{ padding-left:5px; color:#fff; }
@media (max-width:575px){ .header .topbar .contact-info i a, .header .topbar .contact-info i span{ font-size:13px; } }
.header .topbar .contact-info i a{ line-height:0; transition:.3s; }
.header .topbar .contact-info i a:hover{ color:#fff; text-decoration:underline; }
.header .topbar .social-links a{ color:color-mix(in srgb, #ffffff, transparent 40%); line-height:0; transition:.3s; margin-left:20px; }
.header .topbar .social-links a:hover{ color:#fff; }
.header .branding{ min-height:60px; padding:10px 0; }
.header .logo{ line-height:1; }
.header .logo img{ max-height:36px; margin-right:8px; }
.header .logo h1{ font-size:30px; margin:0; font-weight:700; color:#fff; }
.header .cta-btn, .header .cta-btn:focus{ color:#fff; background:var(--accent-color-2); font-size:14px; padding:8px 25px; margin:0 0 0 30px; border-radius:50px; transition:.3s; border:0; }
.header .cta-btn:hover, .header .cta-btn:focus:hover{ color:#fff; background:color-mix(in srgb, var(--accent-color-2), transparent 12%); }
@media (max-width:1200px){
  .header .logo{ order:1; }
  .header .cta-btn{ order:2; margin:0 15px 0 0; padding:6px 15px; }
  .header .navmenu{ order:3; }
}
.scrolled .header{ box-shadow:0 0 18px rgba(2,8,23,.6); }
.scrolled .header .topbar{ height:0; visibility:hidden; overflow:hidden; }

/* =========================================================
   NAV (desktop sombre)
   ========================================================= */
@media (min-width:1200px){
  .navmenu{ padding:0; }
  .navmenu ul{ margin:0; padding:0; display:flex; list-style:none; align-items:center; }
  .navmenu>ul>li{ white-space:nowrap; padding:15px 14px; position:relative; }
  .navmenu>ul>li:last-child{ padding-right:0; }
  .navmenu a, .navmenu a:focus{
    color:var(--nav-color); font-size:15px; padding:0 2px; font-family:var(--nav-font);
    font-weight:400; display:flex; align-items:center; justify-content:space-between; white-space:nowrap; transition:.3s; position:relative;
  }
  .navmenu a i{ font-size:12px; line-height:0; margin-left:5px; transition:.3s; }
  .navmenu>ul>li>a:before{
    content:""; position:absolute; width:100%; height:2px; bottom:-6px; left:0;
    background-color:var(--nav-hover-color); visibility:hidden; width:0; transition:all .3s ease-in-out;
  }
  .navmenu a:hover:before, .navmenu li:hover>a:before, .navmenu .active:before{ visibility:visible; width:100%; }
  .navmenu li:hover>a, .navmenu .active, .navmenu .active:focus{ color:var(--nav-hover-color); }
  .navmenu .dropdown ul{
    margin:0; padding:10px 0; background:var(--nav-dropdown-background-color); display:block;
    position:absolute; visibility:hidden; left:14px; top:130%; opacity:0; transition:.3s; border-radius:8px; z-index:99;
    border:1px solid var(--surface-border); box-shadow:0 14px 40px rgba(0,0,0,.45);
  }
  .navmenu .dropdown ul li{ min-width:220px; }
  .navmenu .dropdown ul a{ padding:10px 16px; font-size:15px; color:var(--nav-dropdown-color); }
  .navmenu .dropdown ul a:hover, .navmenu .dropdown ul .active:hover, .navmenu .dropdown ul li:hover>a{ color:var(--nav-dropdown-hover-color); background:rgba(255,255,255,.03); }
  .navmenu .dropdown:hover>ul{ opacity:1; top:100%; visibility:visible; }
  .navmenu .dropdown .dropdown ul{ top:0; left:-90%; visibility:hidden; }
  .navmenu .dropdown .dropdown:hover>ul{ opacity:1; top:0; left:-100%; visibility:visible; }
}

/* =========================================================
   ——— SPÉCIFIQUE AGENDA / CARD ———
   ========================================================= */

/* Image de la card (ratio) */
.object-fit-cover{ object-fit:cover; }
.ratio.ratio-16x9 > img{ width:100%; height:100%; display:block; }

/* Badge compact */
.card .badge{ white-space:nowrap; }

/* Countdown propre */
#countdown{ font-variant-numeric:tabular-nums; letter-spacing:.3px; }

/* Layout & polish */
.page-agenda{ padding-block:clamp(28px,4vw,48px) clamp(40px,5vw,64px) !important; }

/* Surfaces foncées pour toutes les cartes de la page */
.page-agenda .next-event-card,
.page-agenda .calendar-card,
#staff .card{
  background:var(--surface-1);
  color:var(--default-color);
  border:1px solid var(--surface-border);
  border-radius:14px;
  box-shadow:var(--surface-shadow);
}

/* Titres & muted */
.page-agenda .card-title{ line-height:1.25; }
.page-agenda .muted, #staff .text-muted{ color:var(--muted-color) !important; }

/* Air dans la card et sous l’image */
.next-event-card .card-body{ padding-top:1.25rem; padding-bottom:.5rem; }
.next-event-card .ratio{ margin-bottom:1rem !important; }

/* Espace entre colonnes desktop */
@media (min-width:1200px){
  .page-agenda .row{ row-gap:2rem; }
  .page-agenda .col-xl-4{ padding-right:1rem; }
  .page-agenda .col-xl-8{ padding-left:1rem; }
}

/* -------- FullCalendar — thème sombre -------- */
#calendar{
  background:var(--surface-1);
  border-radius:12px;
  box-shadow:0 6px 20px rgba(2,8,23,.45);
  border:1px solid var(--surface-border);
}
.fc .fc-toolbar-title{ color:var(--heading-color); font-weight:700; letter-spacing:.2px; }
.fc .fc-button{
  border-radius:10px;
  border:1px solid var(--surface-border);
  background:#0b1220;
  color:#e5e7eb;
}
.fc .fc-button:hover{ background:#111b32; border-color:var(--surface-border); color:#fff; }
.fc-theme-standard td, .fc-theme-standard th{ border-color:var(--surface-border); }
.fc .fc-col-header-cell-cushion{ padding-block:.6rem; font-weight:600; color:#cbd5e1; }
.fc .fc-daygrid-day-number{ color:#cbd5e1; }
.fc .fc-day-today{ background:rgba(79,156,255,.10); }
.fc .fc-daygrid-event{ padding:.25rem .55rem; border-radius:999px; font-weight:600; }

/* Couleurs via classNames depuis le feed PHP */
.fc .evt-event{ background-color:var(--bs-primary) !important; border-color:var(--bs-primary) !important; }
.fc .evt-animation{ background-color:var(--bs-success) !important; border-color:var(--bs-success) !important; }

/* Texte des pills toujours BLANC */
.fc a.evt-event,
.fc a.evt-animation,
.fc a.evt-event:hover,
.fc a.evt-animation:hover,
.fc a.evt-event:visited,
.fc a.evt-animation:visited,
.fc a.evt-event:active,
.fc a.evt-animation:active{
  color:#fff !important;
  text-decoration:none !important;
}
.fc .evt-event .fc-event-time,
.fc .evt-event .fc-event-title,
.fc .evt-animation .fc-event-time,
.fc .evt-animation .fc-event-title{
  color:#fff !important;
}

/* --- Discord card : look + tailles --- */
.discord-card{ min-height:280px; }
@media (max-width: 991.98px){ .discord-card{ min-height:240px; } }

.discord-hero{
  height:110px;
  background: linear-gradient(135deg,#5865F2 0%,#4e5ad7 100%);
  border-top-left-radius:.85rem;
  border-top-right-radius:.85rem;
}
.discord-logo{
  width:26% !important; max-width:96px !important; height:auto !important;
  opacity:.98; filter: drop-shadow(0 10px 30px rgba(0,0,0,.45));
}
.btn-discord{
  background:#5865F2; border-color:#5865F2; color:#fff;
  box-shadow:0 6px 18px rgba(88,101,242,.35);
}
.btn-discord:hover{ background:#4752C4; border-color:#4752C4; color:#fff; }

/* =========================================================
   CARTES GÉNÉRIQUES (si tu veux tout assombrir partout)
   ========================================================= */
.card{
  background:var(--surface-1);
  color:var(--default-color);
  border:1px solid var(--surface-border);
}
.card .text-muted{ color:var(--muted-color) !important; }

/* Petites pastilles badge (grade staff etc.) */
.badge.bg-light{
  background:#0b1220 !important;
  color:#cbd5e1 !important;
  border:1px solid var(--surface-border);
}
.badge.bg-dark-subtle{
  background:#1f2937 !important;
  color:#e5e7eb !important;
  border:1px solid #2b3647;
}

/* Boutons outline sur fond sombre */
.btn.btn-outline-primary{
  color:#90caf9; border-color:#2a3a55; background:transparent;
}
.btn.btn-outline-primary:hover{
  background:#132036; border-color:#2a3a55; color:#cfe8ff;
}

/* Petites notes/micro-typo */
small, .small, .muted, .text-muted{ color:var(--muted-color) !important; }

/* + d'air sur les côtés de la section agenda */
.page-agenda .container{
  /* padding horizontal progressif selon la largeur d'écran */
  padding-inline: clamp(16px, 4vw, 48px);
}

/* Gutter un peu plus large entre les 2 colonnes à partir du desktop */
@media (min-width: 1200px){
  .page-agenda .row{ --bs-gutter-x: 2.25rem; } /* ~36px entre colonnes */
  .page-agenda .col-xl-8{ padding-left: 1.25rem; }  /* sécurité côté calendrier */
  .page-agenda .col-xl-4{ padding-right: 1.25rem; } /* sécurité côté card */
}

/* Un peu plus de marge intérieure dans la carte calendrier elle-même */
.page-agenda .calendar-card{
  padding: clamp(16px, 2vw, 24px);
}