.jeu-section h1 {
  color: #b80000;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
  font-size: 8vw;
  text-align: center;
  margin-bottom: 10px;
  margin-top: 80px;
}

.image-et-texte
{
  display: flex;
  gap: 20px;
  flex-direction: column;
  margin-left: 30px;
}

@media (min-width: 512px) {

  .image-et-texte
  {
    flex-direction: row;
  }
}

.texte h2 {
    margin-bottom: 10px;    /* petit espace sous le titre */
}

.texte p {
    margin: 0;              /* pas d'espace inutile */
}


:root{
  --size: 360px;
  --radius: calc(var(--size) / 2);
  --label-distance: 140px;
  --segments: 37;
  --seg-angle: calc(360deg / var(--segments));
}


body {
  background: url('../Image/image-min.png') center/cover no-repeat fixed;
  margin: 0;
  color: #fff1ff;
  letter-spacing: 0.5px;
}

.circle-roulette{
  text-align:center;
}

/* ---- Flèche du haut ---- */
.pointer{
  width:0;height:0;
  margin:0 auto 12px;
  border-left:16px solid transparent;
  border-right:16px solid transparent;
  border-bottom:26px solid #f6d61e;
}

/* ---- Anneau clignottant qui fait comme si y'avait une animation ---- */
.led-ring{
  width: calc(var(--size) + 40px);
  height: calc(var(--size) + 40px);
  border-radius:50%;
  display:inline-grid;
  place-items:center;
  margin:0 auto;
  position:relative;
  box-shadow: 0 0 12px 4px rgba(255,215,0,0.08),
              0 0 28px 8px rgba(255,69,0,0.04) inset;
  animation: ringPulse 2s infinite;
}
.led-ring::before{
  position:absolute;
  inset:-12px;
  border-radius:50%;
  background: conic-gradient(from 90deg, rgba(255,255,255,0.08), transparent 40%);
  mix-blend-mode: screen;
  filter: blur(6px);
  opacity:0.9;
}
@keyframes ringPulse{
  0%{ box-shadow:0 0 6px 2px rgba(255,215,0,0.05); transform:scale(1);}
  50%{ box-shadow:0 0 20px 6px rgba(255,215,0,0.2); transform:scale(1.02);}
  100%{ box-shadow:0 0 6px 2px rgba(255,215,0,0.05); transform:scale(1);}
}

/* ---- Roue principale ---- */
.roulette{
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  position:relative;
  overflow:visible;
  display:block;
  transform-origin:center;
  transition:transform 4s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 6px 30px rgba(0,0,0,0.7);
}

/* Couleurs des cases */
.roulette::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  padding:10px;
  background:conic-gradient(
    from -90deg,
    green 0deg 9deg,
    red 9deg 19deg,
    black 19deg 29deg,
    red 29deg 38deg,
    black 38deg 48deg,
    red 48deg 58deg,
    black 58deg 68deg,
    red 68deg 77deg,
    black 77deg 87deg,
    red 87deg 97deg,
    black 97deg 107deg,
    red 107deg 116deg,
    black 116deg 126deg,
    red 126deg 136deg,
    black 136deg 145deg,
    red 145deg 155deg,
    black 155deg 165deg,
    red 165deg 175deg,
    black 175deg 184deg,
    red 184deg 194deg,
    black 194deg 204deg,
    red 204deg 214deg,
    black 214deg 223deg,
    red 223deg 233deg,
    black 233deg 243deg,
    red 243deg 252deg,
    black 252deg 262deg,
    red 262deg 272deg,
    black 272deg 282deg,
    red 282deg 291deg,
    black 291deg 301deg,
    red 301deg 311deg,
    black 311deg 321deg,
    red 321deg 330deg,
    black 330deg 340deg,
    red 340deg 350deg,
    black 350deg 360deg
  );
  box-shadow:inset 0 0 0 6px #111;
}

/* ---- Centre : WINSTREAK ---- */
.center{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:50%; height:50%;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.06), rgba(0,0,0,0.55));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:4px solid rgba(0,0,0,0.6);
  box-shadow:0 6px 18px rgba(0,0,0,0.6), inset 0 2px 6px rgba(255,255,255,0.02);
}
.winstreak{
  font-size:20px;
  font-weight:700;
  letter-spacing:1px;
  color:#fff700;
}
.winstreak-sub{
  font-size:12px;
  color:#fff;
  opacity:0.9;
  margin-top:6px;
}

/* ---- Numéros autour ---- */
.numbers{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.numbers span{
  position:absolute;
  left:50%; top:50%;
  transform-origin:0 0;
  font-size:12px;
  font-weight:600;
  width:34px;
  text-align:center;
  color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,0.8);
}
/* le premier (0 vert) */
.numbers span:nth-child(1){
  transform:rotate(4deg) translate(0,-140px) rotate(-4deg);
  color:#f9fff8;
}

.mise-container {
  display: flex;
  font-size: 2vw;
  color: #f32c2c;
  text-shadow: 0 0 100px rgba(8, 7, 7, 0.6);
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 50px auto;
}

textarea {
  max-width: 300px;
  max-height: 10px;
}

/* ---- Contrôles ---- */
.mon-bouton {
  display: block;
  margin: 100px auto;
  font-size: 20px;
  padding: 15px 30px;
  background:darkred;
  color: rgb(248, 242, 242);
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: transform 0.1s, background-color 0.2s;
}


/* Effet au survol */
.mon-bouton:hover {
  background-color: #c008e4;
}

/* Effet quand on clique */
.mon-bouton:active {
  transform: scale(0.95);
}


.home-btn {
  position: absolute;
  top: 20px;
  left: 20px;
  background: linear-gradient(145deg, #ff4f4f, #b80000);
  color: #fff;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: bold;
  font-size: 1rem;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.6);
  transition: all 0.25s ease;
  z-index: 1000;
}

.home-btn:hover {
  background: linear-gradient(145deg, #ff6666, #d90000);
  transform: scale(1.08);
  box-shadow: 0 0 18px rgba(255, 50, 50, 0.8);
}

.home-btn {
  position: absolute;
  top: 20px;
  left: 20px;
  transition: transform 0.25s ease, filter 0.25s ease;
}
@media (max-width: 512px) {
  .home-btn {
    bottom: 600px;   /* position en bas */
    top: auto;      /* on annule la position top */
    left: 35%;      /* centré horizontalement */
    transform: translateX(-50%);
    font-size: 0px;
    padding: 0px;
    display: block; 
  }
}

.home-icon {
  width: 50px;
  height: 50px;
  filter: drop-shadow(0 0 8px rgba(255, 0, 4, 0.6));
  transition: filter 0.25s ease, transform 0.25s ease;
}

.home-btn:hover .home-icon {
  transform: scale(1.1);
  filter: drop-shadow(0 0 14px rgba(255, 80, 80, 0.9));
}


.flag-btn {
    position: absolute;
    top: 20px;
    left: 130px;
    background: linear-gradient(145deg, rgba(249, 112, 112, 0.6), #c60000);
    color: #fff;
    text-decoration: none;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 1rem;
    box-shadow: 0 0 10px rgba(251, 115, 115, 0.6);
    transition: all 0.25s ease;
    z-index: 1000;
}

@media (max-width: 512px) {
  .flag-btn {
    bottom: 600px;   /* position en bas */
    top: auto;      /* on annule la position top */
    left: 70%;      /* centré horizontalement */
    transform: translateX(-50%);
    font-size: 0px;
    padding: 0px;
    display: block; 
  }
}

.flag-btn:hover {
    background: linear-gradient(145deg, rgb(250, 0, 104), #c12424);
    transform: scale(1.08);
    box-shadow: 0 0 18px rgba(255, 80, 135, 0.89);
}

.flag-btn {
    transition: transform 0.25s ease, filter 0.25s ease;
}

.flag-icon {
    width: 50px;
    height: 50px;
    filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.6));
    transition: filter 0.25s ease, transform 0.25s ease;
}

.flag-btn:hover .flag-icon {
    transform: scale(1.1);
    filter: drop-shadow(0 0 14px rgba(255, 80, 80, 0.89));
}


.site-footer {
  background: linear-gradient(145deg, rgba(255, 80, 180, 0.15), rgba(120, 0, 180, 0.2));
  border-top: 2px solid rgba(242, 44, 51, 0.6);
  padding: 3rem 1rem;
  color: #ffe3f9;
  text-align: center;
  font-size: 0.95rem;
  box-shadow: 0 -0 20px rgba(black);
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
  max-width: 1000px;
  margin: 0 auto;
}

.footer-section {
  flex: 1 1 250px;
  min-width: 220px;
  background: rgba(255, 100, 220, 0.08);
  border: 1px solid rgba(244, 91, 102, 0.5);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 0 15px rgba(241, 41, 51, 0.2), inset 0 0 8px rgba(235, 28, 83, 0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.footer-section:hover {
  transform: scale(1.02);
  box-shadow: 0 0 25px rgba(232, 16, 16, 0.35), inset 0 0 12px rgba(242, 15, 15, 0.15);
}

.footer-section h3 {
  color: #f75252;
  margin-bottom: 1rem;
  font-size: 1.2rem;
  text-shadow:
    -2px 2px 0 #000,
    0 0 10px rgba(255, 70, 95, 0.8);
}

.footer-section p {
  line-height: 1.6;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}

.footer-section ul {
  display: flex;
  justify-content: center;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-section ul li {
  margin-bottom: 0.7rem;
}

.footer-section ul li a {
  text-align: center;
  color: #fd7f7f;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

.footer-section ul li a:hover {
  color: #ff6363;
  text-shadow: 0 0 8px rgba(243, 10, 10, 0.7);
  text-decoration: underline;
}

.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: radial-gradient(circle at center, #ff4f64 20%, #b80000 90%);
  color: #fff;
  text-decoration: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  box-shadow: 0 0 15px rgba(255, 70, 82, 0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 1000;
}

.back-to-top:hover {
  transform: scale(1.1) rotate(5deg);
}