/* ================= VARIABLES ================= */
:root{
  --header-height:64px;

  --black:#0b0b0b;
  --gray-mat:#1c1c1c;
  --gray-box:#242424;

  /* JAUNE OFFICIEL BRN (MESURÉ SUR LE LOGO) */
  --yellow:#fefb06;

  --text:#ffffff;
  --text-soft:#cfcfcf;
}

/* ================= RESET ================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  background:var(--black);
  color:var(--text);
  font-family:Arial, Helvetica, sans-serif;
}

/* =================================================
   BANNIÈRE — STRICTEMENT IDENTIQUE À L’INDEX
   ================================================= */
.page-banner{
  margin-top:var(--header-height);
  height:450px;
  background:url("/brn/assets/img/banner.png") center center / cover no-repeat;
}

/* ================= CONTENU PAGE ================= */
.page-wrapper{
  max-width:1100px;
  margin:40px auto 80px;
  background:var(--gray-mat);
  padding:40px;
  border-radius:18px;
  box-shadow:0 25px 70px rgba(0,0,0,.85);
}

/* ================= TITRES ================= */
.page-h1{
  text-align:center;
  color:var(--yellow);
  font-size:clamp(26px, 4vw, 38px);
  margin-bottom:6px;
}

.page-subtitle{
  text-align:center;
  color:var(--text-soft);
  font-size:15px;
  margin-bottom:42px;
}

/* ================= INTRO ================= */
.page-intro{
  max-width:820px;
  margin:0 auto 60px;
  text-align:center;
  color:var(--text-soft);
  font-size:16px;
  line-height:1.7;
}

/* ================= BLOCS ================= */
.page-block{
  margin-bottom:70px;
}

.page-block h3{
  text-align:center;
  color:var(--yellow);
  font-size:24px;
  margin-bottom:34px;
}

/* ================= GRILLES ================= */
.info-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:26px;
}

.info-box{
  background:var(--gray-box);
  padding:26px;
  border-radius:16px;
  border-left:4px solid var(--yellow);
  font-size:15px;
  line-height:1.6;
  transition:transform .25s ease, box-shadow .25s ease;
}

.info-box:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 32px rgba(0,0,0,.65);
}

/* ================= ACTIONS ================= */
.page-actions{
  display:flex;
  justify-content:center;
  gap:22px;
  margin-top:40px;
  flex-wrap:wrap;
}

/* ================= BOUTONS ================= */
.btn{
  background:transparent;
  color:var(--yellow);
  border:2px solid var(--yellow);
  padding:14px 32px;
  border-radius:10px;
  font-weight:700;
  text-decoration:none;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}

.btn:hover{
  background:var(--yellow);
  color:#000;
  transform:translateY(-2px);
}

.btn-primary{
  background:var(--yellow);
  color:#000;
  border:2px solid var(--yellow);
}

.btn-primary:hover{
  opacity:.9;
}

/* ================= MENU ================= */
#mainMenu a{
  color:var(--yellow);
}

#mainMenu a.active,
#mainMenu a:hover{
  background:var(--yellow);
  color:#000;
}

/* ================= MOBILE ================= */
@media(max-width:768px){

  .page-banner{
    height:220px;
    background-position:center top;
  }

  .page-wrapper{
    margin:30px 15px 60px;
    padding:26px;
  }

  .page-block h3{
    font-size:22px;
  }
}

/* ================= FIX JAUNE BRN ABSOLU ================= */

/* Titres */
.page-h1,
.page-block h3,
.section-title,
.info-box strong{
  color:#fefb06 !important;
  opacity:1 !important;
  filter:none !important;
}

/* Bordures */
.info-box,
.card,
.why-card{
  border-color:#fefb06 !important;
}

/* Boutons */
.btn,
.btn-primary{
  color:#fefb06 !important;
  border-color:#fefb06 !important;
  filter:none !important;
}

.btn-primary{
  background:#fefb06 !important;
  color:#000 !important;
}

/* Menu */
#mainMenu a{
  color:#fefb06 !important;
}

#mainMenu a.active,
#mainMenu a:hover{
  background:#fefb06 !important;
  color:#000 !important;
}