@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;900&family=Pacifico&family=AR+One+Sans:wght@400;500;700&display=swap');

:root {
  --bleu:   #9FB3C9;
  --rouge:  #BA494C;
  --gris:   #909090;
  --jaune:  #E4C74F;
  --vert:   #C2D1AA;
  --texte:  #D9D9D9;
  --bg:     #1e2235;
  --bg2:    #272d47;
  --bg3:    #2f3659;
  --dark:   #13172a;
  --border: rgba(159,179,201,.18);
  --radius: 12px;
  --shadow: 0 4px 20px rgba(0,0,0,.4);
  --trans:  all .25s ease;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
    font-family: 'AR One Sans', sans-serif;
    font-size: 16px;
    color: var(--texte);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    
    /* 1. On remet la couleur sombre d'origine en secours */
    background-color: var(--bg); 
    
    /* 2. On tente le chemin absolu depuis la racine du site */
    background-image: url('/front-office/fond_acceuil.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

main {
    flex: 1;
    background: transparent;
}

::-webkit-scrollbar { width:7px; }
::-webkit-scrollbar-track { background:var(--dark); }
::-webkit-scrollbar-thumb { background:var(--rouge); border-radius:4px; }

a { color:inherit; text-decoration:none; }
main { flex:1; }

/* Layout */
.container { width:100%; max-width:1200px; margin:0 auto; padding:0 16px; }
.row { display:flex; flex-wrap:wrap; margin:-8px; }
[class^="col-"] { padding:8px; }
.col-2{width:16.666%;} .col-3{width:25%;} .col-4{width:33.333%;}
.col-6{width:50%;} .col-8{width:66.666%;} .col-9{width:75%;} .col-12{width:100%;}
@media(max-width:900px){.col-3,.col-4{width:50%;}.col-8,.col-9{width:100%;}}
@media(max-width:600px){.col-2,.col-3,.col-4,.col-6{width:50%;}}
@media(max-width:480px){[class^="col-"]{width:100%;}}
.d-flex{display:flex;} .align-center{align-items:center;}
.justify-between{justify-content:space-between;} .justify-center{justify-content:center;}
.flex-wrap{flex-wrap:wrap;} .ms-auto{margin-left:auto;}
.gap-1{gap:6px;} .gap-2{gap:10px;} .gap-3{gap:14px;} .gap-4{gap:20px;}
.mt-2{margin-top:12px;} .mt-3{margin-top:18px;} .mt-4{margin-top:24px;}
.mb-2{margin-bottom:12px;} .mb-3{margin-bottom:18px;} .mb-4{margin-bottom:24px;}
.text-center{text-align:center;} .w-100{width:100%;}

/* ======= NAVBAR (charte) ======= */
.navbar {
  background: rgba(19,23,42,.97);
  backdrop-filter: blur(12px);
  border-bottom: 3px solid var(--rouge);
  position: sticky; top:0; z-index:1000;
  box-shadow: 0 2px 20px rgba(186,73,76,.25);
}
.navbar-inner {
  display:flex; align-items:center; gap:16px;
  padding:10px 16px; max-width:1200px; margin:0 auto;
}

/* Logo — Nunito 30 — "Game" blanc "Life" jaune */
.brand {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 30px;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.brand .life { color: var(--jaune); }

/* Barre de recherche */
.search-wrap { position:relative; flex:1; max-width:320px; }
.search-input {
  width:100%; background:rgba(159,179,201,.1); border:1px solid var(--border);
  color:#fff; border-radius:24px; padding:8px 16px 8px 38px;
  font-size:14px; font-family:'AR One Sans',sans-serif; transition:var(--trans);
}
.search-input:focus { outline:none; border-color:var(--rouge); background:rgba(159,179,201,.15); }
.search-input::placeholder { color:rgba(255,255,255,.38); }
.search-ico { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--bleu); font-size:14px; pointer-events:none; }
#search-drop {
  position:absolute; top:calc(100%+5px); left:0; right:0;
  background:var(--bg2); border:1px solid var(--border); border-radius:10px;
  box-shadow:var(--shadow); z-index:500; display:none; max-height:300px; overflow-y:auto;
}
#search-drop a { display:flex; gap:10px; align-items:center; padding:10px 14px; color:#fff; font-size:13px; border-bottom:1px solid var(--border); transition:background .15s; }
#search-drop a:hover { background:rgba(159,179,201,.1); }
#search-drop a:last-child { border:none; }

/* Nav icons */
.nav-btn { background:none; border:none; color:rgba(255,255,255,.72); font-size:18px; cursor:pointer; padding:7px 8px; border-radius:8px; transition:var(--trans); text-decoration:none; display:inline-flex; align-items:center; position:relative; }
.nav-btn:hover { color:var(--jaune); background:rgba(255,255,255,.07); }
.nav-badge { position:absolute; top:1px; right:1px; background:var(--rouge); color:#fff; font-size:10px; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Nunito',sans-serif; font-weight:700; }
.nav-avatar { width:34px; height:34px; border-radius:50%; border:2px solid var(--rouge); object-fit:cover; cursor:pointer; transition:var(--trans); }
.nav-avatar:hover { border-color:var(--jaune); }
.udrop { display:none; position:absolute; top:calc(100%+8px); right:0; background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:6px 0; min-width:195px; box-shadow:var(--shadow); z-index:200; }
.udrop a { display:block; padding:10px 14px; color:#fff; font-size:13px; transition:background .15s; }
.udrop a:hover { background:rgba(159,179,201,.1); }

/* ======= SUBNAV (fond bleu-gris charte) ======= */
.subnav {
  background: rgba(159,179,201,.1);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.subnav-inner { display:flex; gap:2px; padding:6px 16px; max-width:1200px; margin:0 auto; min-width:max-content; }
.subnav a {
  color: rgba(255,255,255,.72);
  font-family: 'Nunito', sans-serif; font-weight:600; font-size:13px;
  padding: 6px 14px; border-radius:20px; transition:var(--trans); white-space:nowrap;
}
.subnav a:hover, .subnav a.active { background:var(--rouge); color:#fff; }

/* ======= HERO (slogan Pacifico 40) ======= */
.hero {
    background-image: url('/front-office/assets/img/fond_acceuil.png');
    background-size: cover;
    background-position: center;
    position: relative;
}
.hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 18% 50%, rgba(186,73,76,.14), transparent 50%),
    radial-gradient(circle at 82% 30%, rgba(228,199,79,.1), transparent 45%);
}
.hero-title {
  font-family: 'Nunito', sans-serif; font-weight:900; font-size:48px;
  margin-bottom:6px; position:relative;
}
.hero-title .life { color:var(--jaune); }
/* Slogan Pacifico taille 40 */
.hero-slogan {
  font-family: 'Pacifico', cursive; font-size:26px;
  color:var(--bleu); margin-bottom:12px; position:relative;
}
.hero-desc {
  color:rgba(255,255,255,.62); font-size:15px;
  max-width:490px; margin:0 auto 22px; line-height:1.7; position:relative;
}

/* ======= BOUTONS ======= */
.btn {
  font-family:'Nunito',sans-serif; font-weight:700; border-radius:25px;
  padding:10px 24px; font-size:14px; cursor:pointer; transition:var(--trans);
  display:inline-flex; align-items:center; gap:7px; border:none; justify-content:center; text-decoration:none;
}
.btn-red   { background:var(--rouge); color:#fff; }
.btn-red:hover   { background:#9e3a3d; color:#fff; transform:translateY(-2px); box-shadow:0 6px 20px rgba(186,73,76,.4); }
.btn-blue  { background:transparent; color:var(--bleu); border:2px solid var(--bleu); }
.btn-blue:hover  { background:var(--bleu); color:var(--dark); transform:translateY(-2px); }
.btn-yellow{ background:var(--jaune); color:var(--dark); }
.btn-yellow:hover{ background:#c9a83a; transform:translateY(-2px); }
.btn-green { background:var(--vert); color:var(--dark); }
.btn-sm  { padding:7px 18px; font-size:13px; border-radius:20px; }
.btn-lg  { padding:13px 30px; font-size:16px; }

/* ======= CARTES JEUX ======= */
.game-card {
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; transition:var(--trans); height:100%; position:relative; cursor:pointer;
}
.game-card:hover { transform:translateY(-6px); box-shadow:0 14px 35px rgba(186,73,76,.28); border-color:var(--rouge); }
.game-card img { height:165px; object-fit:cover; width:100%; display:block; }
.game-img-ph { height:165px; background:linear-gradient(135deg,rgba(186,73,76,.22),rgba(159,179,201,.18)); display:flex; align-items:center; justify-content:center; font-size:56px; }
.game-card-body { padding:14px; }
.game-card-title { font-family:'Nunito',sans-serif; font-weight:700; font-size:14px; color:#fff; margin-bottom:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.game-card-dev { color:var(--gris); font-size:12px; margin-bottom:6px; }
.badge-type { position:absolute; top:8px; right:8px; padding:3px 10px; border-radius:12px; font-size:10px; font-family:'Nunito',sans-serif; font-weight:700; }
.badge-video   { background:var(--rouge); color:#fff; }
.badge-societe { background:var(--jaune);  color:var(--dark); }
.badge-sport   { background:var(--vert);   color:var(--dark); }
.badge-tendance { position:absolute; top:8px; left:8px; background:var(--jaune); color:var(--dark); padding:3px 10px; border-radius:12px; font-size:10px; font-family:'Nunito',sans-serif; font-weight:700; }

/* Titres de section */
.section-title { font-family:'Nunito',sans-serif; font-weight:900; font-size:22px; display:inline-block; margin-bottom:4px; }
.section-title::after { content:''; display:block; width:44px; height:4px; background:var(--rouge); border-radius:2px; margin-top:7px; }
.section-sub { color:var(--texte); font-size:13px; margin-bottom:18px; opacity:.7; }

/* ======= FORMULAIRES ======= */
.card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow); }
.form-label { color:rgba(255,255,255,.85); font-family:'Nunito',sans-serif; font-weight:600; font-size:13px; margin-bottom:5px; display:block; }
.form-input, .form-select, .form-textarea {
  width:100%; background:rgba(159,179,201,.08); border:1px solid var(--border);
  color:#fff; border-radius:9px; padding:11px 14px; font-size:14px;
  font-family:'AR One Sans',sans-serif; transition:var(--trans);
}
.form-input:focus, .form-select:focus, .form-textarea:focus { outline:none; border-color:var(--rouge); background:rgba(159,179,201,.12); box-shadow:0 0 0 3px rgba(186,73,76,.18); }
.form-input::placeholder, .form-textarea::placeholder { color:rgba(255,255,255,.3); }
.form-select option { background:var(--dark); }
.form-textarea { resize:vertical; min-height:90px; line-height:1.6; }
.input-wrap { position:relative; }
.input-wrap .form-input { padding-left:42px; }
.input-icon { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--bleu); font-size:16px; pointer-events:none; }
.eye-btn { position:absolute; right:11px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--gris); cursor:pointer; font-size:16px; padding:0; }

/* Alertes */
.alert { border:none; border-radius:10px; padding:13px 18px; margin-bottom:16px; font-family:'Nunito',sans-serif; font-weight:600; font-size:14px; position:relative; }
.alert-success { background:rgba(194,209,170,.14); color:var(--vert);  border-left:4px solid var(--vert); }
.alert-danger  { background:rgba(186,73,76,.14);   color:#ff9090;      border-left:4px solid var(--rouge); }
.alert-warning { background:rgba(228,199,79,.14);  color:var(--jaune); border-left:4px solid var(--jaune); }
.alert-info    { background:rgba(159,179,201,.14); color:var(--bleu);  border-left:4px solid var(--bleu); }
.btn-close { background:none; border:none; color:inherit; cursor:pointer; position:absolute; right:12px; top:50%; transform:translateY(-50%); opacity:.6; font-size:16px; padding:0; }
.btn-close:hover { opacity:1; }

/* ======= CAPTCHA PUZZLE GAMING ======= */
.captcha-box { background:rgba(159,179,201,.06); border:2px dashed rgba(159,179,201,.35); border-radius:var(--radius); padding:20px; text-align:center; }
.captcha-title { font-family:'Nunito',sans-serif; font-weight:700; font-size:15px; color:var(--bleu); margin-bottom:12px; }
.captcha-puzzle {
  display:inline-block; background:var(--bg3); border-radius:10px;
  padding:16px 24px; margin-bottom:14px;
  border:2px solid rgba(228,199,79,.3);
  box-shadow:0 4px 14px rgba(228,199,79,.1);
}
.captcha-display {
  font-family:'Nunito',sans-serif; font-weight:900; font-size:38px;
  color:var(--jaune); letter-spacing:6px;
  text-shadow:0 2px 12px rgba(228,199,79,.4);
}
.captcha-icons { font-size:22px; margin-bottom:10px; opacity:.65; letter-spacing:4px; }

/* Force mot de passe */
.pw-bar-wrap { background:rgba(255,255,255,.08); border-radius:4px; height:5px; margin:5px 0 3px; overflow:hidden; }
#pw-bar { height:100%; width:0; border-radius:4px; transition:all .3s; }

/* Session timer */
#session-bar { position:fixed; bottom:0; left:0; height:3px; background:var(--rouge); transition:width 1s linear; z-index:9998; }
#session-warn { position:fixed; bottom:14px; left:50%; transform:translateX(-50%); background:var(--bg2); border:2px solid var(--jaune); color:#fff; padding:14px 22px; border-radius:12px; font-family:'Nunito',sans-serif; font-weight:600; font-size:14px; z-index:9999; display:none; box-shadow:var(--shadow); white-space:nowrap; }

/* Toasts */
#toasts { position:fixed; bottom:18px; right:18px; z-index:9999; display:flex; flex-direction:column; gap:9px; }
.gl-toast { background:var(--bg2); border-left:4px solid var(--rouge); color:#fff; padding:12px 18px; border-radius:10px; box-shadow:var(--shadow); font-family:'Nunito',sans-serif; font-weight:600; font-size:14px; animation:slideIn .3s ease; max-width:300px; }
@keyframes slideIn { from{transform:translateX(110%);opacity:0} to{transform:translateX(0);opacity:1} }

/* ======= FOOTER ======= */
.footer { background:var(--dark); border-top:3px solid var(--rouge); padding:42px 0 18px; margin-top:auto; }
.footer-brand { font-family:'Nunito',sans-serif; font-weight:900; font-size:24px; margin-bottom:4px; }
.footer-brand .life { color:var(--jaune); }
/* Slogan footer Pacifico */
.footer-slogan { font-family:'Pacifico',cursive; font-size:13px; color:var(--bleu); margin-bottom:10px; }
.footer a { color:rgba(255,255,255,.48); font-size:13px; display:block; margin-bottom:6px; transition:color .2s; }
.footer a:hover { color:var(--jaune); }
.footer-title { font-family:'Nunito',sans-serif; font-weight:700; margin-bottom:10px; font-size:14px; color:rgba(255,255,255,.8); }
.footer-copy { color:rgba(255,255,255,.28); font-size:12px; text-align:center; margin-top:22px; border-top:1px solid var(--border); padding-top:16px; }

/* Pagination */
.pagination { display:flex; justify-content:center; gap:6px; margin-top:24px; flex-wrap:wrap; }
.page-link { padding:7px 13px; border-radius:8px; font-family:'Nunito',sans-serif; font-weight:700; font-size:13px; background:rgba(159,179,201,.1); color:var(--texte); transition:var(--trans); border:1px solid var(--border); }
.page-link:hover, .page-link.active { background:var(--rouge); color:#fff; border-color:var(--rouge); }

@media(max-width:768px){
  .hero-title{font-size:32px;} .hero-slogan{font-size:20px;}
  .card{padding:20px;} .search-wrap{display:none!important;}
}