:root{
  --brand:#6c5ce7; /* violet doux */
  --text:#0f172a;
  --pastel-blue:#EAF4FF;
  --pastel-yellow:#FFF7E6;
  --chip:#eef2ff;
}
*{box-sizing:border-box}
body{color:var(--text)}
.brand-title{
  background:linear-gradient(90deg,var(--brand),#00bcd4);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.card-soft{border-radius:18px; box-shadow:0 8px 30px rgba(15,23,42,.06)}
.chip{display:inline-block; padding:.25rem .55rem; border-radius:999px; background:var(--chip); color:#334155; font-size:.75rem; border:1px solid rgba(99,102,241,.18)}
/* VERY BIG jackpot */
.jackpot-amount{font-weight:900; font-size: clamp(3.2rem, 8vw, 6rem); line-height:1}
.jackpot-amount .euro{opacity:.9; font-weight:800}
.jackpot-sub{color:#475569}
.num-pad button{transition: transform .06s ease}
.num-pad button:active{transform: scale(.97)}
/* White clean forms (kept) */
.form-card{background:#ffffff;border:1px solid #e5e7eb;border-radius:18px;box-shadow:0 8px 30px rgba(15,23,42,.06);padding:1.5rem}
.form-title{font-weight:700;font-size:1.25rem;margin-bottom:.75rem;color:#0f172a}
.form-muted{color:#64748b;font-size:.875rem}
.form-input{width:100%;padding:.75rem;border-radius:.75rem;border:1px solid #cbd5e1;background:#fff;color:#0f172a}
.form-input:focus{outline:none;box-shadow:0 0 0 4px rgba(99,102,241,.15);border-color:#a5b4fc}
.form-action{display:inline-block;padding:.75rem 1rem;border-radius:.85rem;background:#4f46e5;color:#fff;font-weight:600}
.form-secondary{display:inline-block;padding:.75rem 1rem;border-radius:.85rem;background:#f1f5f9;border:1px solid #e2e8f0;color:#0f172a}
/* Rollers animation for draw */
.roller{
  width:3rem;height:3.5rem;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid #cbd5e1;border-radius:12px;
  font-size:1.5rem;font-weight:800;color:#0f172a;box-shadow:0 4px 14px rgba(15,23,42,.08)
}
.roll-anim{animation: tick .5s linear infinite}
.roll-stop{transform:scale(1.02)}
@keyframes tick{0%{transform:translateY(0)}50%{transform:translateY(-2px)}100%{transform:translateY(0)}}
.opacity-100{opacity:1}

/* --- Responsive tweaks (added) --- */
img, video, canvas, svg { max-width:100%; height:auto; }
@media (max-width: 768px){
  .btn, .button, button[type="submit"]{ width:100%; }
}
/* avoid chip overflow on small screens */
.chip{ white-space:normal; }
/* ===== PATCH RESPONSIVE LSG - MOBILE ===== */

/* 1) Contenus fluides & padding latéraux confortables */
img, video, canvas, svg { max-width: 100%; height: auto; }
.wrapper, .container, .page, .section { padding-left: 16px; padding-right: 16px; }

/* 2) Carte principale et “chip” (badge du prochain tirage) */
@media (max-width: 480px) {
  .chip { 
    white-space: normal; 
    padding: 6px 10px; 
    line-height: 1.15;
  }
  /* Ligne 1 : un poil moins haute pour laisser respirer la ligne 2 */
  #nd-line1 { font-size: 0.95rem; font-weight: 700; }
  /* Ligne 2 (compte à rebours seul) : plus lisible */
  #nd-line2 { 
    font-size: 1.15rem; 
    font-weight: 800; 
    color: #d62828; 
  }

  /* Cartes : réduire le “gros” padding sur mobile */
  .card, .panel, .box { padding: 14px !important; }

  /* Titre “Jackpot du prochain tirage” : éviter le bloc massif */
  h2, .h2, .title-xl { 
    font-size: clamp(1.15rem, 4.5vw, 1.35rem); 
    line-height: 1.2; 
  }
  /* Montant 30,00 € : adapter sans débordement */
  .jackpot-amount, .big-number, .display-amount {
    font-size: clamp(2rem, 10vw, 3rem);
    line-height: 1.05;
    word-break: break-word;
  }
}

/* 3) Grille “Jouer maintenant” : inputs & keypad */
@media (max-width: 480px) {
  /* cases de saisie : tailles confortables */
  .grid-cells input[type="text"], 
  .grid-cells input[type="number"] {
    width: 100%;
    height: 44px;
    font-size: 1.05rem;
  }
  /* chiffres 1..9 : forcer une grille qui ne s’écrase pas */
  .numbers-grid, .keypad {
    display: grid;
    grid-template-columns: repeat(5, minmax(44px, 1fr));
    gap: 8px;
  }
  .numbers-grid button, .keypad button {
    height: 44px; 
    width: 100%;
  }
  /* bouton Effacer */
  .btn-clear, .btn-danger { min-height: 44px; }
}

/* 4) Boutons : plein largeur sur mobile */
@media (max-width: 768px) {
  .btn, .button, button[type="submit"], .cta, .cta button { 
    width: 100%; 
    min-height: 44px; 
  }
}

/* 5) Colonnes de la home : gauche/droite -> pile sur mobile + gaps doux */
.home-grid { gap: 24px; }
@media (max-width: 1024px) {
  .home-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
  .home-grid > .col-left { order: 1; }
  .home-grid > .col-right { order: 2; }
}

/* 6) Encarts “Nos abonnements” : rétrécir les puces/marges sur mobile */
@media (max-width: 480px) {
  .pricing-card ul { padding-left: 1.1rem; }
  .pricing-card .btn { margin-top: 8px; }
}

/* 7) Barre “Jeu responsable” en bas : éviter le chevauchement du contenu */
.site-footer, .page { padding-bottom: 64px; }
.cookie-bar, .safety-bar { 
  position: fixed; 
  bottom: 0; left: 0; right: 0; 
  z-index: 50; 
}

/* 8) En-tête : autoriser le retour à la ligne des liens + compacter les CTA */
@media (max-width: 480px) {
  .site-header nav { flex-wrap: wrap; gap: 8px; }
  .site-header .auth { display: flex; gap: 8px; }
  .site-header .auth .btn { padding: 8px 10px; font-size: 0.95rem; }
}
/* ===== Header mobile fix (onglets) ===== */
@media (max-width: 480px){
  /* Conteneur d’en-tête : autoriser 2 lignes (nav puis boutons) */
  .site-header,
  header.site-header {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Rangée des onglets : ruban défilable horizontal, pas de wrap */
  .site-header nav,
  .site-header .main-nav,
  header nav {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  /* cacher la barre de scroll (Firefox/Chromium/WebKit) */
  .site-header nav::-webkit-scrollbar,
  header nav::-webkit-scrollbar { display: none; }

  /* Liens de menu : taille plus compacte, pas de flex-grow */
  .site-header nav a,
  header nav a,
  .site-header .main-nav a {
    flex: 0 0 auto;
    font-size: 0.95rem;
    padding: 10px 0;
  }

  /* Bloc des boutons à droite (auth) sur une 2e ligne, full width */
  .site-header .auth {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    width: 100%;
  }
  .site-header .auth .btn,
  .site-header .auth a.btn,
  .site-header .auth button {
    flex: 1 1 0;
    min-height: 44px;
    font-size: 0.95rem;
    padding: 10px 12px;
  }
}



/* === HIDE DESKTOP NAV ON MOBILE & REMOVE DIM BACKDROP === */
@media (max-width: 768px){
  header nav,
  .site-header nav,
  header .main-nav {
    display: none !important; /* nav uniquement via hamburger */
  }
}

/* Backdrop du menu mobile : pas de grisage */
#menuBackdrop {
  background: transparent !important;
}

/* Assure qu'aucune règle ne réactive la nav via flex */
@media (max-width: 768px){
  header nav * { display: inline-block; } /* garde la hauteur si besoin, mais parent est display:none */
}
/* === Header mobile : boutons sous le nom + hamburger à droite === */
@media (max-width: 768px){

  /* On s'assure que le header est la référence pour le placement absolu du hamburger */
  header { position: relative; }

  /* Le conteneur principal du header passe en flux vertical */
  header > .max-w-5xl {
    display: block !important;
  }

  /* Ligne "logo + titre" : on laisse tel quel (bloc en haut) */
  header > .max-w-5xl > a[href="/index.php"]{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0;
  }

  /* Groupe des actions (les 2 boutons) : passe en dessous, centré et pleine largeur */
  header > .max-w-5xl > .ml-auto{
    width: 100% !important;
    margin: 8px 0 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Les boutons eux-mêmes : largeur auto mais alignés au centre */
  header > .max-w-5xl > .ml-auto a.btn,
  header > .max-w-5xl > .ml-auto a{
    min-height: 44px;
  }

  /* Hamburger : reste en haut à droite, au-dessus des boutons */
  #menuBtn{
    position: absolute !important;
    right: 12px !important;
    top: 14px !important;
    margin: 0 !important;
  }

  /* La nav (onglets) reste cachée sur mobile : accessible uniquement via le hamburger */
  header nav{ display: none !important; }
}
/* === Rétablit le dégradé bleu-violet sur le titre "La Suite Gagnante" === */
header a[href="/index.php"] span {
  background: linear-gradient(90deg, #4f46e5 0%, #06b6d4 50%, #3b82f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}