/* ============================================================
   VARIABLES
============================================================ */
:root {
  --turquoise:   #3BBFCE;
  --turq-dark:   #2aa0ae;
  --red:         #E31E24;
  --red-dark:    #B71C1C;
  --navy:        #1A237E;
  --gold:        #F4A800;
  --gold-dark:   #c9900a;
  --white:       #ffffff;
  --card-bg:     rgba(255,255,255,0.97);
  --radius:      20px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Poppins',sans-serif;
  background:linear-gradient(160deg,#5DD6E4 0%,#2BAABB 40%,#1E8A98 100%);
  min-height:100vh;
  overflow-x:hidden;
}
.hidden { display:none !important; }

/* ============================================================
   BACKGROUND ROUE FLOUTÉE (fixe derrière tout)
============================================================ */
.page-bg {
  position:fixed; inset:0; z-index:0; overflow:hidden;
  /*background:linear-gradient(160deg,#5DD6E4 0%,#2BAABB 40%,#1E8A98 100%);*/
  background: url(https://allani.com.tn/modules/allaniroue/views/img/bg-jeux.png) ;
  background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#module-allaniroue-game .header-top { background-color:#fff; position: relative;
    top: -21px; }

   #module-allaniroue-game .footer-container {
    overflow: hidden;
    padding-top: 50px;
    clear: both;
    position: relative;
    background: #333333 !important;
    margin-top: 0px;
}


#module-allaniroue-game  .infoplus.ft {
    text-align: center;
    padding: 25px 5px;
    background: #f7f7f7 !important;
     position: relative;
  }
.page-bg::before {
  content:'';
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:88vmin; height:88vmin;
  border-radius:50%;
  background:conic-gradient(
    #E31E24 0% 8.33%,   /* Air fryer */
    #1A237E 8.33% 16.66%,
    #2E7D32 16.66% 25%,
    #C62828 25% 33.33%,
    #D4A857 33.33% 41.66%,
    #1565C0 41.66% 50%,
    #388E3C 50% 58.33%,
    #B71C1C 58.33% 66.66%,
    #0D47A1 66.66% 75%,
    #1B5E20 75% 83.33%,
    #F9A825 83.33% 91.66%,
    #1976D2 91.66% 100%
  );
  opacity:0.16;
  filter:blur(10px);
  animation:bgSpin 40s linear infinite;
}
@keyframes bgSpin { to { transform:translate(-50%,-50%) rotate(360deg); } }

/* Rubans SVG 
.ribbon { position:fixed; pointer-events:none; z-index:1; }
.ribbon-tl { top:-30px; left:-30px; width:260px; }
.ribbon-br { bottom:-30px; right:-30px; width:260px; transform:rotate(180deg); }*/

/* ============================================================
   SCREENS
============================================================ */
.screen {
  position:relative; z-index:2;
  min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:32px 16px 44px;
}

/* ============================================================
   CARTE COMMUNE
============================================================ */
.card {
  background:rgb(255 255 255 / 37%);
  border-radius:var(--radius);
  box-shadow:0 24px 80px rgba(0,0,0,0.16), 0 4px 16px rgba(0,0,0,0.07);
  width:100%; max-width:640px;
  position:relative; overflow:hidden;
  padding:34px 30px 38px;
  text-align:center;
     background: url(https://allani.com.tn/modules/allaniroue/views/img/bg-roue-2-Copie.png) ;
  background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
/* Coins décor
.card::before, .card::after {
  content:'';
  position:absolute;
  width:90px; height:90px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'%3E%3Cpath d='M0 0 Q45 22 90 90' stroke='%23E31E24' stroke-width='5' fill='none' opacity='0.75'/%3E%3Cpath d='M0 0 Q55 16 90 90' stroke='%23F4A800' stroke-width='4' fill='none' opacity='0.65'/%3E%3Cpath d='M0 0 Q35 28 90 90' stroke='%232E7D32' stroke-width='3.5' fill='none' opacity='0.55'/%3E%3C/svg%3E");
  background-size:contain; background-repeat:no-repeat;
}
.card::before { top:0; right:0; }
.card::after  { bottom:0; left:0; transform:rotate(180deg); } */

/* ============================================================
   LOGO 60 ANS
============================================================ */
.logo60 {
  display:inline-flex; align-items:center; gap:10px;
  margin-bottom:16px;
}
.logo60-badge {
  width:64px; height:64px; border-radius:50%;
  background:linear-gradient(135deg,var(--red) 0%,var(--navy) 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:0 4px 18px rgba(227,30,36,0.38); flex-shrink:0;
}
.logo60-badge .b-num  { font-size:22px; font-weight:900; color:#fff; line-height:1; }
.logo60-badge .b-ans  { font-size:8px; font-weight:700; color:var(--gold); letter-spacing:1.5px; text-transform:uppercase; }
.logo60-text .t-main  { font-size:20px; font-weight:900; color:var(--red); line-height:1; text-align:left; }
.logo60-text .t-sub   { font-size:9.5px; font-weight:700; color:var(--navy); letter-spacing:2px; text-transform:uppercase; }
.logo60-text .t-since { font-size:8.5px; color:#aaa; font-style:italic; }

/* LOGO SM (pour les écrans non-hero) */
.logo60.sm .logo60-badge { width:44px; height:44px; }
.logo60.sm .logo60-badge .b-num  { font-size:15px; }
.logo60.sm .logo60-badge .b-ans  { font-size:6.5px; }
.logo60.sm .logo60-text .t-main  { font-size:14px; }
.logo60.sm .logo60-text .t-sub   { font-size:8px; }

/* ============================================================
   ÉCRAN 1 — HERO
============================================================ */
/* Logo top */
.hero-logo-top {
  text-align:right; margin-bottom:10px;
}
.hero-logo-img {
  height:60px; object-fit:contain;
}
.hero-card {
  text-align:center;
}

.hero-arabic-small {
  font-family:'Tajawal',sans-serif !important;
  font-size:45px; font-weight:800; color:var(--navy);
  margin-bottom:19px; direction:rtl;
}
/*.hero-arabic-main {
  font-family:'Tajawal',sans-serif;
  font-size:clamp(30px,7vw,48px); font-weight:900;
  color:var(--red); line-height:1.1;
  margin-bottom:10px; direction:rtl;
}
*/

/* Texte principal rouge avec contour blanc */
.hero-arabic-main {
    font-family:'Tajawal',sans-serif !important; 
  font-size: 57px;
  font-weight: 900;
  padding: 20px 0px 20px 0px !important;
  color: #fff;
  text-align: center;
  direction: rtl;

  /* contour blanc */
  -webkit-text-stroke: 3px #e60000;

  /* fallback contour */
  text-shadow:
    2px 2px 0 #fff,
   -2px 2px 0 #fff,
    2px -2px 0 #fff,
   -2px -2px 0 #fff,
    0px 4px 8px rgba(0,0,0,0.2);
}




.hero-arabic-sub {
  font-family:'Tajawal',sans-serif !important;
 font-size: 36px;
  font-weight: 600;
  color: white;
  text-align: center;
  direction: rtl;
  margin-top: 20px;

  text-shadow: 0px 2px 6px rgba(0,0,0,0.3);
}

/* Mini roue preview */
.mini-wheel {
  width:110px; height:110px; border-radius:50%;
  background:conic-gradient(
    #E31E24 0% 8.33%, #1A237E 8.33% 16.66%, #2E7D32 16.66% 25%,
    #C62828 25% 33.33%, #D4A857 33.33% 41.66%, #1565C0 41.66% 50%,
    #388E3C 50% 58.33%, #B71C1C 58.33% 66.66%, #0D47A1 66.66% 75%,
    #1B5E20 75% 83.33%, #F9A825 83.33% 91.66%, #1976D2 91.66% 100%
  );
  border:7px solid var(--gold);
  box-shadow:0 4px 22px rgba(244,168,0,0.45);
  animation:spinPreview 8s linear infinite;
  margin:22px auto 0;
  position:relative;
}
.mini-wheel::after {
  content:'60';
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:36px; height:36px; background:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:12px; color:var(--red);
  box-shadow:0 2px 8px rgba(0,0,0,0.18);
}
@keyframes spinPreview { to { transform:rotate(360deg); } }

/* ============================================================
   BOUTONS
============================================================ */
.btn-red {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--red); color:#fff;
  font-family:'Tajawal',sans-serif !important; font-size:24px; font-weight:600;
  padding:15px 46px; border-radius:50px; border:none; cursor:pointer;
  letter-spacing:1px; box-shadow:0 6px 28px rgba(227,30,36,0.42);
  transition:all 0.3s; position:relative; overflow:hidden;
}
.btn-red::before {
  content:''; position:absolute; top:0; left:-100%;
  width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.22),transparent);
  transition:0.5s;
}
.btn-red:hover::before { left:100%; }
.btn-red:hover { transform:translateY(-2px); box-shadow:0 10px 36px rgba(227,30,36,0.58); }
.btn-red:disabled { opacity:0.45; cursor:not-allowed; transform:none; }
.btn-red.full { width:100%; font-size:17px; letter-spacing:2px; margin-top:6px; }

/* ============================================================
   ÉCRAN 2 — FORMULAIRE
============================================================ */
.form-title {
  font-size:33px; font-weight:800; color:#000;
  text-align:left; margin-bottom:20px;
  font-family: 'Tajawal',sans-serif !important;;
}
.form-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:11px; margin-bottom:11px; text-align:left;
}
.form-full { grid-column:1/-1; }
.inp-wrap label {
  display:block; font-size:10px; font-weight:700; text-align: left !important;
  color:#999; letter-spacing:1px; text-transform:uppercase;
  margin-bottom:4px;
}
.inp {
  width:100%; background:#f6f7f9; border:1px solid #000;
  color:#222; font-family:'Poppins',sans-serif;
  font-size:14px; padding:12px 14px; border-radius:10px;
  outline:none; transition:all 0.25s;
}
.inp:focus {
  border-color:var(--turquoise); background:#fff;
  box-shadow:0 0 0 4px rgba(59,191,206,0.13);
}
.inp::placeholder { color:#ccc; }
.inp.error { border-color:var(--red); }

/* CGU checkbox */
.cgu-wrap {
  display:flex; align-items:flex-start; gap:10px;
  background:#f6f7f9; border-radius:10px;
  padding:12px 14px; margin-bottom:14px; text-align:left;
}
.cgu-wrap input[type=checkbox] {
  width:18px; height:18px; flex-shrink:0;
  accent-color:var(--red); margin-top:2px; cursor:pointer;
}
.cgu-txt {
  font-size:12px; color:#666; line-height:1.6;
  text-align: left !important;
}
.cgu-txt a { color:var(--turq-dark); font-weight:600; }
.jeu-gratuit {
  font-size:11px; color:#fff !important; text-align:center; margin-bottom:12px;
}

.form-note { font-size:10px; color:#fff !important; text-align:center; margin-top:11px; margin-bottom:0px }

/* ============================================================
   ÉCRAN 3 — ROUE
============================================================ */
.wheel-title {
  
    font-family: 'Tajawal', sans-serif !important;
    font-size: 34px;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 19px;
    direction: rtl;
}
.wheel-subtitle {
 
    font-size: 58px;
    font-weight: 900;
    color: rgb(255, 255, 255);
    text-align: center;
    direction: rtl;
    text-shadow: rgb(255, 255, 255) 2px 2px 0px, rgb(255, 255, 255) -2px 2px 0px, rgb(255, 255, 255) 2px -2px 0px, rgb(255, 255, 255) -2px -2px 0px, rgba(0, 0, 0, 0.2) 0px 4px 8px;
    font-family: Tajawal, sans-serif !important;
    -webkit-text-stroke: 3px rgb(230, 0, 0);
    padding: 20px 0px !important;

}

/* Code box */
.code-box {
  display:inline-block;
  background:#f6f7f9; border:2px dashed var(--gold);
  border-radius:11px; padding:10px 22px; margin-bottom:18px;
}
.code-box .cl { font-size:9.5px; color:#bbb; letter-spacing:2.5px; text-transform:uppercase; margin-bottom:3px; }
.code-box .cv { font-size:28px; font-weight:900; color:var(--navy); letter-spacing:7px; }

/* Roue container — responsive (corr 1) */
.wheel-outer {
  position:relative;
  width:100%;
  max-width:420px;
  aspect-ratio:1 / 1;        /* hauteur = largeur, plus de débordement */
  margin:0 auto 22px;
  overflow:visible;          /* le pointeur dépasse en haut, ne pas couper */
}
.wheel-ring { display:none; }
@keyframes ringPulse { 0%,100%{} 50%{} }
.wheel-ring-inner { width:100%; height:100%; border-radius:50%; background:#fff; overflow:hidden; }
#wheelCanvas { position:absolute; top:11px; left:11px; border-radius:50%; }

/* Image roue (remplace le canvas) */
.wheel-img-wrap {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  transition: transform 0.1s linear;
}
.wheel-img {
  width:100%; height:100%;
  object-fit:contain;
  filter:drop-shadow(0 4px 20px rgba(0,0,0,0.25));
}

/* Pointeur rouge triangulaire */
.wheel-ptr {
  position:absolute;
  top:-8px;
  left:50%;
  transform:translateX(-50%);
  width:0; height:0;
  border-left:16px solid transparent;
  border-right:16px solid transparent;
  border-top:36px solid var(--red);
  z-index:10;
  filter:drop-shadow(0 3px 6px rgba(227,30,36,0.5));
}

/* Centre 60 ans (hidden when using image roue - logo is in the PNG) */
.wheel-ctr { display:none; }

/* ============================================================
   ÉCRAN 4 — RÉSULTAT
============================================================ */
#screen-result { min-height:100vh; position:relative; }

.result-bg {
  position:fixed; inset:0; z-index:1;
  /*background:linear-gradient(160deg,#29B6D4 0%,#00ACC1 50%,#0097A7 100%);*/
   background: url(https://allani.com.tn/modules/allaniroue/views/img/bg-pdt.JPG) ;
  background-position: center;
background-size: cover;
background-repeat: no-repeat;
  overflow:hidden;
}
.balloon {
  position:absolute;
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  animation:floatB linear infinite;
}
@keyframes floatB {
  0%   { transform:translateY(110vh) rotate(0deg); opacity:0; }
  5%   { opacity:0.9; }
  95%  { opacity:0.7; }
  100% { transform:translateY(-130px) rotate(25deg); opacity:0; }
}

.result-card {
  position:relative; z-index:3;
  background:rgba(255,255,255,0.93);
  border-radius:var(--radius);
  box-shadow:0 28px 90px rgba(0,0,0,0.2);
  width:100%; max-width:560px;
  padding:34px 26px 38px; text-align:center;
  backdrop-filter:blur(10px);
  background: #fff url('https://allani.com.tn/modules/allaniroue/views/img/box-pdt.png') center center / cover no-repeat;
}

.r-mabrouk {
  font-family:'Tajawal',sans-serif;
  font-size:clamp(48px,11vw,76px); font-weight:900; color:var(--red);
  line-height:1; margin-bottom:2px; direction:rtl;
  animation:bigPop 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
.r-subtitle {
  font-family:'Tajawal',sans-serif;
  font-size:clamp(18px,4vw,28px); font-weight:800;
  color:var(--navy); margin-bottom:18px; direction:rtl;
  animation:bigPop 0.6s 0.2s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes bigPop { from{transform:scale(0.3) rotate(-10deg);opacity:0} to{transform:scale(1);opacity:1} }

/* Bloc tirage (gains de type 'tirage' : lave-linge, frigos, écran LG) */
.r-tirage-box {
  margin: 12px auto 14px;
  max-width: 420px;
  text-align: center;
}
.r-tirage-msg {
  font-family: 'Tajawal', 'Arial', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #1A237E, #0D47A1);
  padding: 14px 20px;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(26, 35, 126, 0.35);
  line-height: 1.4;
}
.r-tirage-link {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 26px;
  background: var(--red, #E31E24);
  color: #fff !important;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-radius: 30px;
  box-shadow: 0 4px 12px rgba(227, 30, 36, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.r-tirage-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(227, 30, 36, 0.55);
  color: #fff !important;
}

/* Product box with frame */
.r-product-box {
  width:220px; height:220px;
  margin:0 auto 14px;
  animation:bigPop 0.6s 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
  padding:20px;
}
.r-product-box img {
  max-width:150px; max-height:150px; object-fit:contain;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,0.15));
}
.r-product { display:none; }

.r-gain-lbl {
  font-size:18px; font-weight:800; color:var(--navy); margin-bottom:18px;
}

/* Code résultat */
.r-code-box {
  display:inline-block;
  background:#f6f7f9; border:2px solid var(--gold);
  border-radius:11px; padding:11px 26px; margin-bottom:18px;
}
.r-code-box .rcl { font-size:9.5px; color:#bbb; letter-spacing:2.5px; text-transform:uppercase; margin-bottom:3px; }
.r-code-box .rcv { font-size:30px; font-weight:900; color:var(--red); letter-spacing:6px; }

/* Urgence */
.urgency {
  background:rgba(227,30,36,0.08); border:1px solid rgba(227,30,36,0.2);
  border-radius:10px; padding:10px 18px; margin-bottom:20px;
  display:flex; align-items:center; justify-content:center;
  gap:20px; flex-wrap:wrap;
}
.urg-item { font-size:12px; font-weight:700; color:var(--red); display:flex; align-items:center; gap:5px; }
#countdown { font-size:16px; font-weight:900; color:var(--navy); }

/* Bouton magasin unique */
.btn-magasin {
  width:100%; background:linear-gradient(135deg,var(--turquoise),var(--turq-dark));
  color:#fff; font-family:'Poppins',sans-serif; font-size:15px; font-weight:800;
  padding:16px; border-radius:50px; border:none; cursor:pointer;
  box-shadow:0 6px 24px rgba(59,191,206,0.4); transition:all 0.3s; margin-bottom:10px;
}
.btn-magasin:hover { transform:translateY(-2px); box-shadow:0 10px 32px rgba(59,191,206,0.55); }

.r-note {
  font-size:11px; color:#aaa; text-align:center;
  line-height:1.6; margin-top:6px;
}

/* ============================================================
   ÉCRAN 5 — MAGASINS
============================================================ */
#screen-stores { padding-top:50px; }

.stores-intro { text-align:center; margin-bottom:22px; }
.stores-intro h2 { font-size:clamp(20px,4vw,32px); font-weight:900; color:#fff; margin-bottom:5px; }
.stores-intro p  { font-size:13px; color:rgba(255,255,255,0.75); }

.stores-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:14px; width:100%; max-width:860px; margin:0 auto 22px;
}
.store-card {
  background:rgba(255,255,255,0.92); border-radius:14px;
  padding:20px 18px; transition:0.3s; backdrop-filter:blur(6px);
}
.store-card:hover { transform:translateY(-3px); box-shadow:0 14px 40px rgba(0,0,0,0.1); }
.s-hdr { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.s-ico { width:36px; height:36px; background:rgba(59,191,206,0.12); border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.s-name { font-size:13px; font-weight:700; color:var(--navy); }
.s-info { font-size:11.5px; color:#555; line-height:1.9; }
.s-info a { color:var(--turq-dark); text-decoration:none; }
.s-hlbl { font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gold-dark); margin:10px 0 3px; }
.s-htxt { font-size:11px; color:#888; line-height:1.65; }
.s-map {
  display:flex; align-items:center; justify-content:center; gap:5px;
  margin-top:12px; width:100%; padding:9px;
  background:rgba(59,191,206,0.1); border:1px solid rgba(59,191,206,0.3);
  border-radius:7px; color:var(--turq-dark); font-size:11px; font-weight:700;
  cursor:pointer; transition:0.25s; text-decoration:none;
}
.s-map:hover { background:rgba(59,191,206,0.22); }

.map-wrap { width:100%; max-width:860px; border-radius:16px; overflow:hidden; box-shadow:0 16px 50px rgba(0,0,0,0.16); margin:0 auto; }

/* ============================================================
   MODALE CGU
============================================================ */
.modal-overlay {
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(0,0,0,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  flex-direction: column;
}
.modal-box {
  background:#fff; border-radius:16px;
  width:100%; max-width:680px; max-height:80vh;
  overflow-y:auto; padding:32px 28px;
  box-shadow:0 24px 80px rgba(0,0,0,0.3);
}
.modal-box h2 { font-size:18px; font-weight:800; color:var(--navy); margin-bottom:16px; }
.modal-box .modal-content { font-size:12px; color:#444; line-height:1.85;     padding: 10px;}
.modal-box .modal-content h3 { font-size:13px; font-weight:700; color:var(--red); margin:14px 0 5px; }
.modal-close {
  display:block; width:100%; margin-top:20px;
  background:var(--navy); color:#fff;
  font-family:'Poppins',sans-serif; font-size:14px; font-weight:700;
  padding:13px; border-radius:10px; border:none; cursor:pointer;
  transition:0.25s;
}
.modal-close:hover { background:var(--red); }

/* ============================================================
   CONFETTI
============================================================ */
.cp { position:fixed; top:-10px; animation:cffall linear forwards; z-index:9999; pointer-events:none; }
@keyframes cffall { to { transform:translateY(110vh) rotate(720deg); opacity:0; } }

/* ============================================================
   FOOTER
============================================================ */
.footer-bar {
  position:relative; z-index:3;
  text-align:center; padding:15px 20px;
  font-size:10.5px; color:rgba(255,255,255,0.55);
}
.footer-bar a { color:rgba(255,255,255,0.8); text-decoration:none; }

/* ============================================================
   RESPONSIVE
============================================================ */

/* ---------- Tablette (max 768px) ---------- */
@media(max-width:768px){
  .card { max-width:100%; }
  .result-card { max-width:100%; padding:28px 20px 32px; }
  .stores-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .r-product-box { width:180px; height:180px; min-height:160px!important; }
  .r-product-box img { max-width:120px!important; max-height:120px!important; }
  .ribbon { width:180px; }
}

/* ---------- Mobile (max 600px) ---------- */
@media(max-width:600px){
  /* Global */
  .screen { padding:20px 12px 32px; }
  .card { padding:24px 16px 28px; }
  .ribbon { width:130px; }

  /* Hero */
  .hero-arabic-small { font-size:15px; }
  .hero-arabic-main { font-size:clamp(24px,6vw,36px); }
  .hero-arabic-sub { font-size:15px; margin-bottom:18px; }
  .btn-red.btn-inscris { padding:13px 36px; font-size:15px; }

  /* Formulaire */
  .form-title { font-size:18px; }
  .form-grid { grid-template-columns:1fr; }
  .form-full { grid-column:1; }
  .inp { font-size:13px; padding:10px 12px; }
  .btn-red.full { font-size:15px; padding:13px; }

  /* Roue (corr 1 — fluide, plus de width fixe) */
  .wheel-outer { max-width:300px; }
  .wheel-title { font-size:clamp(15px,3.5vw,20px); }
  .wheel-subtitle { font-size:11px; }
  .wheel-ptr { border-left-width:12px; border-right-width:12px; border-top-width:28px; top:-6px; }
  .code-box { padding:8px 16px; }
  .code-box .cv { font-size:22px; letter-spacing:5px; }
  #btn-spin { font-size:14px; padding:13px 30px; }

  /* Résultat */
  .result-card { padding:24px 16px 28px; margin:0 8px; }
  .r-mabrouk { font-size:clamp(36px,9vw,56px); }
  .r-subtitle { font-size:clamp(16px,3.5vw,22px); margin-bottom:12px; }
  .r-product-box { width:160px; height:160px; min-height:140px!important; padding:14px; }
  .r-product-box img { max-width:110px!important; max-height:110px!important; }
  #r-product-text { font-size:32px!important; }
  .r-gain-lbl { font-size:15px; margin-bottom:14px; }
  .r-code-box { padding:9px 18px; }
  .r-code-box .rcv { font-size:24px; letter-spacing:5px; }
  .urgency { padding:8px 12px; gap:12px; }
  .urg-item { font-size:11px; }
  #countdown { font-size:14px; }
  .btn-magasin { font-size:13px; padding:13px; }
  .r-note { font-size:10px; }

  /* Magasins */
  .stores-grid { grid-template-columns:1fr; gap:10px; }
  .stores-intro h2 { font-size:clamp(18px,4vw,26px); }
  .stores-intro p { font-size:12px; }
  .store-card { padding:16px 14px; }
  .s-name { font-size:12px; }
  .s-info { font-size:11px; }
  .map-wrap { border-radius:12px; }
  .map-wrap iframe { height:250px; }

  /* Modale CGU */
  .modal-overlay { padding:12px; }
  .modal-box { padding:22px 16px; max-height:85vh; border-radius:14px; }
  .modal-box h2 { font-size:15px; }
  .modal-box .modal-content { font-size:11px; }
  .modal-close { font-size:13px; padding:11px; }

  /* Footer */
  .footer-bar { font-size:9px; padding:12px 12px; }
}

/* ---------- Petit mobile (max 380px) ---------- */
@media(max-width:380px){
  .screen { padding:14px 8px 24px; }
  .card { padding:18px 12px 22px; }
  .logo60-badge { width:38px; height:38px; }
  .logo60-badge .b-num { font-size:13px; }
  .logo60-badge .b-ans { font-size:5.5px; }
  .logo60-text .t-main { font-size:12px; }
  .logo60-text .t-sub { font-size:7px; }
  .wheel-outer { max-width:260px; }
  .wheel-ptr { border-left-width:10px; border-right-width:10px; border-top-width:24px; }
  .result-card { padding:18px 12px 22px; margin:0 4px; }
  .r-mabrouk { font-size:clamp(30px,8vw,44px); }
  .r-product-box { width:140px; height:140px; min-height:120px!important; }
  .r-product-box img { max-width:90px!important; max-height:90px!important; }
  .r-code-box .rcv { font-size:20px; letter-spacing:4px; }
  .btn-magasin { font-size:12px; padding:11px; }
}