/* =======================================================================
   meilleuresoffresfr.site  ->  feuille de style "maison"
   -----------------------------------------------------------------------
   On bosse en mode library-first : Bootstrap fait 90% du boulot.
   Ici on ne met QUE ce que Bootstrap ne sait pas faire tout seul :
     - le fond global (photo img1 assombrie)
     - notre petite palette perso (teal sombre / magenta / or)
     - 2-3 retouches sur les cartes opérateurs et les pop-ups
   Bref, le strict minimum. Pas la peine de réinventer la roue.
   ======================================================================= */

/* Palette perso - je la mets en variables pour pas me répéter partout.
   (teal foncé tiré de img1 + magenta + or, ça change du bleu classique) */
:root {
  --mof-dark:      #0c2625;   /* fond sombre principal */
  --mof-dark-2:    #071817;   /* encore plus sombre, pour overlays */
  --mof-magenta:   #d6378f;   /* accent principal */
  --mof-magenta-2: #b32a74;   /* magenta survol */
  --mof-gold:      #f4b740;   /* accent secondaire (boutons, titres) */
}

/* -----------------------------------------------------------------------
   FOND GLOBAL
   img1.jpg posée en fixed + un dégradé sombre par dessus pour assombrir.
   Le chemin est relatif au dossier /css/ -> donc ../images/.
   ----------------------------------------------------------------------- */
body#pageBody {
  background:
    linear-gradient(rgba(7, 24, 23, 0.86), rgba(7, 24, 23, 0.93)),
    url("../images/img1.jpg") no-repeat center center fixed;
  background-size: cover;
  color: #eef2f1;
  min-height: 100vh;
}

/* Quand un pop-up bloque la page on coupe le scroll du body.
   La classe est ajoutée/retirée par script.js. */
body.mof-no-scroll {
  overflow: hidden;
}

/* petit utilitaire couleur or, Bootstrap n'a pas exactement ce ton */
.mof-gold-text {
  color: var(--mof-gold) !important;
}

/* -----------------------------------------------------------------------
   BARRE 18+  (le petit bandeau d'avertissement sous le header)
   ----------------------------------------------------------------------- */
.mof-age-bar {
  background-color: var(--mof-magenta);
  letter-spacing: .3px;
}

/* -----------------------------------------------------------------------
   HEADER / NAV
   On garde le navbar de Bootstrap, juste un fond semi-transparent.
   ----------------------------------------------------------------------- */
.mof-header {
  background-color: rgba(7, 24, 23, 0.85);
  backdrop-filter: blur(4px);
}
.mof-logo-img {
  height: 52px;
  width: auto;
}

/* -----------------------------------------------------------------------
   CARTES OPERATEURS
   .card de Bootstrap + un fond sombre translucide et un liseré au survol.
   ----------------------------------------------------------------------- */
.mof-op-card {
  background-color: rgba(12, 38, 37, 0.72);
  border: 1px solid rgba(244, 183, 64, 0.18);
  transition: transform .18s ease, border-color .18s ease;
}
.mof-op-card:hover {
  transform: translateY(-4px);
  border-color: var(--mof-gold);
}
/* le bandeau logo de l'opérateur (fond clair pour que les .svg ressortent) */
.mof-op-logo-box {
  border-radius: .5rem;
  height: 80px;
  width: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mof-op-logo-img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}
.mof-op-bonus {
  background-color: rgba(244, 183, 64, 0.15);
  border: 1px solid rgba(244, 183, 64, 0.4);
  border-radius: .4rem;
  padding: .5rem .75rem;
  color: var(--mof-gold);
  font-weight: 500;
}

/* -----------------------------------------------------------------------
   BOUTONS - on surcharge un poil le btn-warning pour notre or maison
   ----------------------------------------------------------------------- */
.mof-btn-gold {
  background-color: var(--mof-gold);
  border-color: var(--mof-gold);
  color: #1c1300;
  font-weight: 600;
}
.mof-btn-gold:hover {
  background-color: #e0a52f;
  border-color: #e0a52f;
  color: #1c1300;
}

/* -----------------------------------------------------------------------
   SECTIONS "panneau" - simple voile sombre pour la lisibilité du texte
   ----------------------------------------------------------------------- */
.mof-panel {
  background-color: rgba(7, 24, 23, 0.6);
  border-radius: .75rem;
}

/* -----------------------------------------------------------------------
   FOOTER
   ----------------------------------------------------------------------- */
.mof-footer {
  background-color: rgba(4, 14, 13, 0.92);
}
/* logos organismes jeu responsable - on les passe en blanc/gris uniforme */
.mof-org-logo {
  max-height: 38px;
  width: auto;
  filter: grayscale(100%) brightness(1.6);
  opacity: .85;
  transition: opacity .15s ease, filter .15s ease;
}
.mof-org-logo:hover {
  filter: none;
  opacity: 1;
}

/* -----------------------------------------------------------------------
   POP-UPS maison (vérif âge + blocage mineur)
   On n'utilise PAS la modale JS de Bootstrap ici : juste un overlay full
   écran qu'on montre/cache à la main. Plus simple à contrôler.
   ----------------------------------------------------------------------- */
.mof-overlay {
  position: fixed;
  inset: 0;
  z-index: 1080;
  background-color: rgba(4, 14, 13, 0.96);
  display: none;            /* caché par défaut, JS bascule en flex */
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.mof-overlay.mof-show {
  display: flex;
}
.mof-overlay-box {
  max-width: 540px;
  width: 100%;
  background-color: var(--mof-dark);
  border: 1px solid rgba(244, 183, 64, 0.35);
  border-radius: 1rem;
}

/* le bandeau cookies en bas - reste au dessus du reste sauf des overlays */
.mof-cookie-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1070;
  background-color: rgba(4, 14, 13, 0.97);
  border-top: 2px solid var(--mof-magenta);
  display: none;            /* JS l'affiche si pas encore de choix cookie */
}
.mof-cookie-bar.mof-show {
  display: block;
}

/* petit lien doré générique dans les blocs de texte */
.mof-inline-link {
  color: var(--mof-gold);
  text-decoration: underline;
}
.mof-inline-link:hover {
  color: var(--mof-magenta);
}