.connect4-page{
  display:grid;
  gap:20px;
  color:#111;
}

.connect4-page-hero{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(260px,.8fr);
  gap:20px;
  align-items:stretch;
  background:
    radial-gradient(circle at top left, rgba(255,211,42,.32), transparent 34%),
    linear-gradient(135deg, #ffffff, #fff8e7);
  border:4px solid var(--line);
  border-radius:26px;
  box-shadow:8px 8px 0 var(--line);
  padding:24px;
}

.connect4-page-kicker{
  display:inline-flex;
  width:max-content;
  background:#1546d8;
  color:#fff;
  border:3px solid var(--line);
  border-radius:999px;
  box-shadow:4px 4px 0 var(--line);
  padding:7px 12px;
  font-weight:1000;
  text-transform:uppercase;
  font-size:.78rem;
}

.connect4-page-hero h2{
  margin:14px 0 8px;
  font-size:clamp(2rem,4vw,3.8rem);
  line-height:.95;
  font-weight:1000;
  letter-spacing:-.04em;
  color:#111;
}

.connect4-page-hero p{
  margin:0;
  max-width:760px;
  font-size:1.05rem;
  font-weight:850;
  color:#333;
  line-height:1.55;
}

.connect4-page-status-card{
  display:grid;
  gap:10px;
  background:#111;
  color:#fff;
  border:4px solid var(--line);
  border-radius:22px;
  box-shadow:6px 6px 0 var(--line);
  padding:18px;
  align-content:center;
}

.connect4-page-status-card strong{
  font-size:1.2rem;
  text-transform:uppercase;
}

.connect4-page-status-card span{
  background:#fff;
  color:#111;
  border:2px solid var(--line);
  border-radius:14px;
  padding:9px 10px;
  font-weight:900;
}

.connect4-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:16px;
  flex-wrap:wrap;
  background:#fff;
  border:4px solid var(--line);
  border-radius:24px;
  box-shadow:8px 8px 0 var(--line);
  padding:16px;
}

.connect4-mode{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.connect4-mode label{
  display:grid;
  gap:6px;
  font-weight:1000;
}

.connect4-mode select,
.connect4-actions button{
  border:4px solid #111;
  border-radius:18px;
  box-shadow:5px 5px 0 #111;
  padding:12px 16px;
  font-weight:1000;
  color:#111;
}

.connect4-mode select{
  background:#fff8e7;
}

.connect4-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.connect4-actions button{
  cursor:pointer;
}

#connect4NewGame{
  background:#2ed573;
}

#connect4FriendBtn{
  background:#111;
  color:#fff;
}

.quick-friend-panel{
  display:none;
}

.quick-friend-panel.open{
  display:grid;
  gap:14px;
  background:#fff;
  border:4px solid #111;
  border-radius:22px;
  box-shadow:7px 7px 0 #111;
  padding:16px;
}

.connect4-status{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.connect4-status > div{
  background:#fff;
  border:4px solid #111;
  border-radius:22px;
  box-shadow:6px 6px 0 #111;
  padding:14px;
  text-align:center;
}

.connect4-status span{
  display:block;
  text-transform:uppercase;
  font-size:.82rem;
  color:#555;
  font-weight:1000;
}

.connect4-status strong{
  display:block;
  margin-top:4px;
  font-size:1.8rem;
  color:#111;
}

.connect4-message{
  background:#fff3b0;
  color:#111;
  border:4px solid #111;
  border-radius:22px;
  box-shadow:6px 6px 0 #111;
  padding:14px;
  font-weight:1000;
  text-align:center;
}

.connect4-game-zone{
  display:grid;
  gap:12px;
  justify-content:center;
  background:#fff;
  border:4px solid #111;
  border-radius:28px;
  box-shadow:8px 8px 0 #111;
  padding:24px;
  overflow:auto;
}

/* Boutons de colonne au-dessus du plateau */
.connect4-column-buttons{
  display:grid;
  grid-template-columns:repeat(7, 72px);
  gap:8px;
  justify-content:center;
}

.connect4-col-btn{
  height:44px;
  border:4px solid #111;
  border-radius:16px;
  background:#ffd32a;
  color:#111;
  box-shadow:4px 4px 0 #111;
  font-weight:1000;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease;
}

.connect4-col-btn:hover:not(:disabled){
  transform:translateY(-3px);
  background:#ffec70;
}

.connect4-col-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

/* Vrai plateau Puissance 4 */
.connect4-board{
  position:relative;
  display:grid;
  grid-template-columns:repeat(7, 72px);
  grid-template-rows:repeat(6, 72px);
  gap:8px;
  justify-content:center;
  width:max-content;
  max-width:100%;
  padding:18px;
  background:
    linear-gradient(180deg, #1d68ff 0%, #003db8 100%);
  border:6px solid #111;
  border-radius:28px;
  box-shadow:
    10px 10px 0 #111,
    inset 0 6px 0 rgba(255,255,255,.35),
    inset 0 -10px 0 rgba(0,0,0,.25);
}

.connect4-cell{
  position:relative;
  width:72px;
  height:72px;
  border:4px solid #082c90;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.9) 0 8%, transparent 9%),
    radial-gradient(circle at center, #ffffff 0 55%, #d9e4ff 56% 100%);
  box-shadow:
    inset 5px 7px 0 rgba(0,0,0,.18),
    inset -4px -5px 0 rgba(255,255,255,.45),
    2px 2px 0 rgba(0,0,0,.35);
  overflow:hidden;
}

.connect4-disc{
  position:absolute;
  inset:5px;
  border-radius:50%;
  border:4px solid #111;
  box-shadow:
    inset 5px 7px 0 rgba(255,255,255,.35),
    inset -7px -8px 0 rgba(0,0,0,.28),
    3px 3px 0 rgba(0,0,0,.35);
  animation:connect4Drop .22s ease-out both;
}

.connect4-disc.red{
  background:
    radial-gradient(circle at 32% 25%, #ffb3b3 0 10%, transparent 22%),
    linear-gradient(145deg, #ff4757 0%, #c1121f 100%);
}

.connect4-disc.yellow{
  background:
    radial-gradient(circle at 32% 25%, #fff6a8 0 10%, transparent 22%),
    linear-gradient(145deg, #ffe45e 0%, #f5b700 100%);
}

.connect4-cell.win{
  outline:6px solid #2ed573;
  outline-offset:-4px;
  z-index:2;
}

.connect4-cell.win .connect4-disc{
  animation:connect4WinPulse .55s ease-in-out infinite alternate;
}

@keyframes connect4Drop{
  from{
    transform:translateY(-260px) scale(.92);
    opacity:.5;
  }
  to{
    transform:translateY(0) scale(1);
    opacity:1;
  }
}

@keyframes connect4WinPulse{
  from{transform:scale(1)}
  to{transform:scale(1.09)}
}

@media(max-width:760px){
  .connect4-page-hero,
  .connect4-status{
    grid-template-columns:1fr;
  }

  .connect4-toolbar{
    align-items:stretch;
  }

  .connect4-mode,
  .connect4-actions{
    width:100%;
  }

  .connect4-actions button,
  .connect4-mode label{
    flex:1;
  }

  .connect4-column-buttons{
    grid-template-columns:repeat(7, 42px);
    gap:5px;
  }

  .connect4-col-btn{
    height:34px;
    border-radius:12px;
    font-size:.8rem;
  }

  .connect4-board{
    grid-template-columns:repeat(7, 42px);
    grid-template-rows:repeat(6, 42px);
    gap:5px;
    padding:10px;
    border-radius:20px;
  }

  .connect4-cell{
    width:42px;
    height:42px;
    border-width:3px;
  }

  .connect4-disc{
    inset:3px;
    border-width:3px;
  }
}



/* === PUISSANCE 4 V502 : même design + clic direct colonne === */

/* On cache seulement les flèches, sans modifier le plateau */
.connect4-column-buttons{
  display:none !important;
}

/* Les cellules restent visuellement identiques à la version précédente */
.connect4-cell{
  padding:0;
  appearance:none;
  -webkit-appearance:none;
  cursor:default;
  touch-action:manipulation;
}

/* On indique la colonne jouable sans casser le design */
.connect4-cell.playable{
  cursor:pointer;
}

/* Sur ordinateur : indication discrète, pas de changement de forme */
.connect4-cell.playable:hover{
  box-shadow:
    inset 5px 7px 0 rgba(0,0,0,.18),
    inset -4px -5px 0 rgba(255,255,255,.45),
    2px 2px 0 rgba(0,0,0,.35),
    0 0 0 4px rgba(255,211,42,.85);
}

/* Sur mobile : pas d'effet de survol parasite */
@media (hover:none){
  .connect4-cell.playable:hover{
    box-shadow:
      inset 5px 7px 0 rgba(0,0,0,.18),
      inset -4px -5px 0 rgba(255,255,255,.45),
      2px 2px 0 rgba(0,0,0,.35);
  }

  .connect4-cell.playable:active{
    box-shadow:
      inset 5px 7px 0 rgba(0,0,0,.18),
      inset -4px -5px 0 rgba(255,255,255,.45),
      2px 2px 0 rgba(0,0,0,.35),
      0 0 0 4px rgba(255,211,42,.85);
  }
}

/* === FIN PUISSANCE 4 V502 === */

/* === PUISSANCE 4 V503 : plateau proche du vrai jeu === */

.connect4-game-zone{
  position:relative;
  display:grid;
  justify-content:center;
  gap:0;
  background:#ffffff;
  border:4px solid #111;
  border-radius:28px;
  box-shadow:8px 8px 0 #111;
  padding:34px 28px 46px;
  overflow:visible;
}

/* Base rouge du vrai jeu */
.connect4-game-zone::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  width:min(620px, 90%);
  height:34px;
  background:linear-gradient(180deg, #ff4b4b 0%, #c51626 100%);
  border:4px solid #111;
  border-radius:999px;
  box-shadow:
    0 6px 0 rgba(0,0,0,.28),
    inset 0 4px 0 rgba(255,255,255,.35),
    inset 0 -5px 0 rgba(0,0,0,.25);
  z-index:0;
}

/* Jambes rouges latérales */
.connect4-game-zone::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:34px;
  transform:translateX(-50%);
  width:min(600px, 88%);
  height:72px;
  background:
    linear-gradient(90deg,
      #c51626 0 8%,
      transparent 8% 92%,
      #c51626 92% 100%);
  border-radius:0 0 22px 22px;
  z-index:0;
  pointer-events:none;
}

.connect4-board{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(7, 74px);
  grid-template-rows:repeat(6, 74px);
  gap:10px;
  width:max-content;
  max-width:100%;
  padding:24px;
  background:
    linear-gradient(180deg, #2f7cff 0%, #1556df 50%, #003aaf 100%);
  border:6px solid #111;
  border-radius:30px 30px 20px 20px;
  box-shadow:
    10px 10px 0 #111,
    inset 0 7px 0 rgba(255,255,255,.42),
    inset 0 -10px 0 rgba(0,0,0,.28);
}

/* Bord supérieur plus épais comme le vrai jouet */
.connect4-board::before{
  content:"";
  position:absolute;
  left:22px;
  right:22px;
  top:8px;
  height:14px;
  border-radius:999px;
  background:rgba(255,255,255,.28);
  box-shadow:0 2px 0 rgba(0,0,0,.16);
  pointer-events:none;
}

/* Rangée inférieure rouge, impression de socle */
.connect4-board::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:-18px;
  height:26px;
  background:linear-gradient(180deg, #ff4b4b 0%, #c51626 100%);
  border:5px solid #111;
  border-top:0;
  border-radius:0 0 22px 22px;
  box-shadow:7px 7px 0 #111;
  z-index:-1;
}

/* Alvéoles rondes profondes */
.connect4-cell{
  position:relative;
  width:74px;
  height:74px;
  border:5px solid #082c90;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, #ffffff 0 51%, #dce8ff 52% 58%, #082c90 59% 100%);
  box-shadow:
    inset 6px 8px 0 rgba(0,0,0,.30),
    inset -5px -5px 0 rgba(255,255,255,.50),
    2px 3px 0 rgba(0,0,0,.35);
  overflow:hidden;
}

/* Relief de plastique autour des trous */
.connect4-cell::before{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:50%;
  box-shadow:
    inset 0 5px 0 rgba(255,255,255,.35),
    inset 0 -5px 0 rgba(0,0,0,.24);
  pointer-events:none;
}

/* Jetons plus physiques */
.connect4-disc{
  position:absolute;
  inset:5px;
  border-radius:50%;
  border:5px solid #111;
  box-shadow:
    inset 6px 8px 0 rgba(255,255,255,.35),
    inset -8px -10px 0 rgba(0,0,0,.30),
    3px 4px 0 rgba(0,0,0,.45);
  animation:connect4Drop .22s ease-out both;
}

.connect4-disc.red{
  background:
    radial-gradient(circle at 32% 24%, #ffd0d0 0 10%, transparent 22%),
    radial-gradient(circle at 50% 55%, #ff5c66 0 42%, #d71928 43% 100%);
}

.connect4-disc.yellow{
  background:
    radial-gradient(circle at 32% 24%, #fff8b8 0 10%, transparent 22%),
    radial-gradient(circle at 50% 55%, #ffe66b 0 42%, #f0b400 43% 100%);
}

/* Clic direct sur colonne, sans changer la forme */
.connect4-cell.playable{
  cursor:pointer;
}

.connect4-cell.playable:hover{
  outline:5px solid #ffd32a;
  outline-offset:-4px;
  filter:brightness(1.05);
}

.connect4-cell.playable:active{
  transform:scale(.96);
}

.connect4-cell.win{
  outline:6px solid #2ed573;
  outline-offset:-4px;
  z-index:2;
}

.connect4-cell.win .connect4-disc{
  animation:connect4WinPulse .55s ease-in-out infinite alternate;
}

@media(max-width:760px){
  .connect4-game-zone{
    padding:22px 12px 34px;
    border-radius:22px;
  }

  .connect4-game-zone::after{
    height:24px;
    bottom:12px;
  }

  .connect4-game-zone::before{
    bottom:24px;
    height:50px;
  }

  .connect4-board{
    grid-template-columns:repeat(7, 43px);
    grid-template-rows:repeat(6, 43px);
    gap:6px;
    padding:13px;
    border-width:5px;
    border-radius:22px 22px 16px 16px;
  }

  .connect4-board::before{
    left:14px;
    right:14px;
    top:5px;
    height:8px;
  }

  .connect4-board::after{
    left:10px;
    right:10px;
    bottom:-13px;
    height:18px;
    border-width:4px;
  }

  .connect4-cell{
    width:43px;
    height:43px;
    border-width:3px;
  }

  .connect4-disc{
    inset:3px;
    border-width:3px;
  }
}

/* === FIN PUISSANCE 4 V503 === */

/* === PUISSANCE 4 V504 : cases transparentes === */

.connect4-cell{
  background: transparent !important;
  border: 5px solid #0a2f8f !important;
  box-shadow:
    inset 6px 8px 0 rgba(0,0,0,.28),
    inset -4px -4px 0 rgba(255,255,255,.10),
    2px 3px 0 rgba(0,0,0,.28) !important;
}

.connect4-cell::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%,
      rgba(255,255,255,.10) 0 10%,
      rgba(255,255,255,0) 18%),
    radial-gradient(circle at 50% 55%,
      rgba(5,18,55,.20) 0 52%,
      rgba(5,18,55,.38) 70%,
      rgba(5,18,55,.52) 100%);
  pointer-events:none;
  z-index:0;
}

.connect4-disc{
  z-index:2;
}

.connect4-cell.playable:hover{
  outline:5px solid #ffd32a;
  outline-offset:-4px;
  filter:brightness(1.04);
}

/* Mobile */
@media(max-width:760px){
  .connect4-cell{
    border-width:3px !important;
  }
}

/* === FIN PUISSANCE 4 V504 === */

/* === PUISSANCE 4 V505 : plateau codé façon vrai jeu, sans image === */

/* Zone globale du jeu */
.connect4-game-zone{
  position:relative !important;
  display:grid !important;
  justify-content:center !important;
  gap:0 !important;
  background:#fff !important;
  border:4px solid #111 !important;
  border-radius:28px !important;
  box-shadow:8px 8px 0 #111 !important;
  padding:34px 34px 78px !important;
  overflow:visible !important;
}

/* Pied gauche */
.connect4-game-zone::before{
  content:"" !important;
  position:absolute !important;
  left:calc(50% - 378px) !important;
  bottom:18px !important;
  width:56px !important;
  height:190px !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.28), transparent 28%),
    linear-gradient(180deg, #1675ff 0%, #0044c8 100%) !important;
  border:5px solid #111 !important;
  border-radius:22px 22px 8px 8px !important;
  box-shadow:
    7px 7px 0 #111,
    inset 6px 0 0 rgba(255,255,255,.20),
    inset -7px 0 0 rgba(0,0,0,.22) !important;
  z-index:0 !important;
}

/* Pied droit */
.connect4-game-zone::after{
  content:"" !important;
  position:absolute !important;
  right:calc(50% - 378px) !important;
  bottom:18px !important;
  width:56px !important;
  height:190px !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(180deg, #1675ff 0%, #0044c8 100%) !important;
  border:5px solid #111 !important;
  border-radius:22px 22px 8px 8px !important;
  box-shadow:
    7px 7px 0 #111,
    inset 6px 0 0 rgba(255,255,255,.20),
    inset -7px 0 0 rgba(0,0,0,.22) !important;
  z-index:0 !important;
}

/* Plateau principal */
.connect4-board{
  position:relative !important;
  z-index:2 !important;
  display:grid !important;
  grid-template-columns:repeat(7, 78px) !important;
  grid-template-rows:repeat(6, 78px) !important;
  gap:12px !important;
  width:max-content !important;
  max-width:100% !important;
  padding:28px 30px 30px !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,.28) 0 1px, transparent 2px),
    linear-gradient(90deg, rgba(255,255,255,.18), transparent 18%, transparent 82%, rgba(0,0,0,.18)),
    linear-gradient(180deg, #1e7cff 0%, #075ae8 48%, #003fb9 100%) !important;

  border:6px solid #111 !important;
  border-radius:26px 26px 18px 18px !important;

  box-shadow:
    10px 10px 0 #111,
    inset 0 7px 0 rgba(255,255,255,.42),
    inset 0 -11px 0 rgba(0,0,0,.26),
    inset 8px 0 0 rgba(255,255,255,.10),
    inset -8px 0 0 rgba(0,0,0,.18) !important;
}

/* Barre supérieure moulée */
.connect4-board::before{
  content:"" !important;
  position:absolute !important;
  left:24px !important;
  right:24px !important;
  top:8px !important;
  height:14px !important;
  border-radius:999px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.12)) !important;
  box-shadow:0 2px 0 rgba(0,0,0,.18) !important;
  pointer-events:none !important;
}

/* Socle bas bleu */
.connect4-board::after{
  content:"" !important;
  position:absolute !important;
  left:18px !important;
  right:18px !important;
  bottom:-34px !important;
  height:34px !important;
  background:
    linear-gradient(180deg, #1067ff 0%, #003fb9 100%) !important;
  border:6px solid #111 !important;
  border-top:0 !important;
  border-radius:0 0 20px 20px !important;
  box-shadow:
    8px 8px 0 #111,
    inset 0 -8px 0 rgba(0,0,0,.24),
    inset 0 4px 0 rgba(255,255,255,.25) !important;
  z-index:-1 !important;
  pointer-events:none !important;
}

/* Cache ancien conteneur de flèches */
.connect4-column-buttons{
  display:none !important;
}

/* Cellules = vrais trous du plateau */
.connect4-cell{
  position:relative !important;
  width:78px !important;
  height:78px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  overflow:visible !important;
  background:transparent !important;
  cursor:default !important;
  touch-action:manipulation !important;
  box-shadow:none !important;
}

/* Trou blanc / transparent avec profondeur */
.connect4-cell::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:50% !important;

  background:
    radial-gradient(circle at 50% 50%, #ffffff 0 48%, #eef4ff 49% 58%, #092f96 59% 68%, #001d63 69% 100%) !important;

  box-shadow:
    inset 7px 8px 0 rgba(0,0,0,.34),
    inset -5px -5px 0 rgba(255,255,255,.65),
    0 3px 0 rgba(255,255,255,.30),
    0 -3px 0 rgba(0,0,0,.24) !important;

  z-index:1 !important;
  pointer-events:none !important;
}

/* Anneau bleu brillant autour du trou */
.connect4-cell::after{
  content:"" !important;
  position:absolute !important;
  inset:-3px !important;
  border-radius:50% !important;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 58%, rgba(255,255,255,.65) 59% 62%, #063ec3 63% 74%, rgba(0,0,0,.32) 75% 100%) !important;
  box-shadow:
    inset 0 4px 0 rgba(255,255,255,.35),
    inset 0 -4px 0 rgba(0,0,0,.28) !important;
  z-index:0 !important;
  pointer-events:none !important;
}

/* Case jouable : on ne déforme pas, juste un halo propre */
.connect4-cell.playable{
  cursor:pointer !important;
}

.connect4-cell.playable:hover::after{
  background:
    radial-gradient(circle at 50% 50%, transparent 0 57%, #ffd32a 58% 64%, #063ec3 65% 74%, rgba(0,0,0,.34) 75% 100%) !important;
}

/* Jetons insérés */
.connect4-disc{
  position:absolute !important;
  inset:7px !important;
  border-radius:50% !important;
  border:4px solid rgba(0,0,0,.72) !important;
  z-index:3 !important;

  box-shadow:
    inset 6px 7px 0 rgba(255,255,255,.36),
    inset -8px -9px 0 rgba(0,0,0,.28),
    3px 4px 0 rgba(0,0,0,.42) !important;

  animation:connect4Drop .22s ease-out both !important;
}

/* Jeton rouge */
.connect4-disc.red{
  background:
    radial-gradient(circle at 32% 22%, #ffc7c7 0 9%, transparent 21%),
    radial-gradient(circle at 50% 54%, #ff2a1d 0 45%, #d20e10 46% 100%) !important;
}

/* Jeton jaune */
.connect4-disc.yellow{
  background:
    radial-gradient(circle at 32% 22%, #fff8b8 0 9%, transparent 21%),
    radial-gradient(circle at 50% 54%, #ffd22b 0 45%, #f2aa00 46% 100%) !important;
}

/* Anneau intérieur du jeton */
.connect4-disc::after{
  content:"" !important;
  position:absolute !important;
  inset:7px !important;
  border-radius:50% !important;
  border:3px solid rgba(0,0,0,.18) !important;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.24) !important;
}

/* Victoire */
.connect4-cell.win::after{
  background:
    radial-gradient(circle at 50% 50%, transparent 0 57%, #2ed573 58% 66%, #063ec3 67% 74%, rgba(0,0,0,.34) 75% 100%) !important;
}

.connect4-cell.win .connect4-disc{
  animation:connect4WinPulse .55s ease-in-out infinite alternate !important;
}

/* Responsive */
@media(max-width:760px){
  .connect4-game-zone{
    padding:22px 8px 52px !important;
    border-radius:22px !important;
  }

  .connect4-game-zone::before{
    left:calc(50% - 213px) !important;
    bottom:12px !important;
    width:34px !important;
    height:120px !important;
    border-width:4px !important;
  }

  .connect4-game-zone::after{
    right:calc(50% - 213px) !important;
    bottom:12px !important;
    width:34px !important;
    height:120px !important;
    border-width:4px !important;
  }

  .connect4-board{
    grid-template-columns:repeat(7, 43px) !important;
    grid-template-rows:repeat(6, 43px) !important;
    gap:7px !important;
    padding:16px !important;
    border-width:5px !important;
    border-radius:20px 20px 14px 14px !important;
  }

  .connect4-board::before{
    left:14px !important;
    right:14px !important;
    top:5px !important;
    height:8px !important;
  }

  .connect4-board::after{
    left:12px !important;
    right:12px !important;
    bottom:-22px !important;
    height:22px !important;
    border-width:4px !important;
  }

  .connect4-cell{
    width:43px !important;
    height:43px !important;
  }

  .connect4-disc{
    inset:4px !important;
    border-width:3px !important;
  }

  .connect4-disc::after{
    inset:4px !important;
    border-width:2px !important;
  }
}

/* === FIN PUISSANCE 4 V505 === */

/* === PUISSANCE 4 V506 : correction saut des pions === */

/* Tous les pions déjà posés restent fixes */
.connect4-disc{
  animation:none !important;
  opacity:1 !important;
  transform:none !important;
}

/* Seul le dernier pion posé s’anime légèrement */
.connect4-disc.new{
  animation:connect4DropClean .18s ease-out both !important;
}

@keyframes connect4DropClean{
  from{
    transform:translateY(-70px);
    opacity:.75;
  }
  to{
    transform:translateY(0);
    opacity:1;
  }
}

/* Le plateau ne doit jamais se redimensionner au survol ou au clic */
.connect4-board,
.connect4-cell,
.connect4-disc{
  box-sizing:border-box;
}

.connect4-cell.playable:hover,
.connect4-cell.playable:active{
  transform:none !important;
}

/* === FIN PUISSANCE 4 V506 === */